diff --git a/docs/design/assets/candidates/2026-07-19/g01-dialog-close-source-green.png b/docs/design/assets/candidates/2026-07-19/g01-dialog-close-source-green.png
new file mode 100644
index 0000000..343ebd2
Binary files /dev/null and b/docs/design/assets/candidates/2026-07-19/g01-dialog-close-source-green.png differ
diff --git a/docs/design/assets/g01-background/masters/genealogy-page-background-long-flagship-master.png b/docs/design/assets/g01-background/masters/genealogy-page-background-long-flagship-master.png
new file mode 100644
index 0000000..fcfd8e7
Binary files /dev/null and b/docs/design/assets/g01-background/masters/genealogy-page-background-long-flagship-master.png differ
diff --git a/pages/genealogy/g06-search-genealogies.vue b/pages/genealogy/g06-search-genealogies.vue
index 25973dc..be8841b 100644
--- a/pages/genealogy/g06-search-genealogies.vue
+++ b/pages/genealogy/g06-search-genealogies.vue
@@ -6,117 +6,259 @@
 
     <view class="search-page__content">
       <view class="search-title-strip">
-        <image class="search-title-strip__skin" src="/static/assets/modules/genealogy/opaque/g06-search-title-strip.png" mode="scaleToFill" />
-        <image class="search-title-strip__seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
+        <image
+          class="search-title-strip__skin"
+          src="/static/assets/modules/genealogy/opaque/g06-search-title-strip.png"
+          mode="scaleToFill"
+        />
+        <image
+          class="search-title-strip__seal"
+          src="/static/assets/foundation/transparent/brand-seal.png"
+          mode="aspectFit"
+        />
         <text class="search-title-strip__text">加入家谱</text>
       </view>
 
       <view class="mode-tabs">
-        <view class="mode-tab" :class="{ 'mode-tab--active': mode === 'search' }" @click="switchMode('search')">搜索家谱</view>
-        <view class="mode-tab" :class="{ 'mode-tab--active': mode === 'invite' }" @click="switchMode('invite')">邀请码加入</view>
+        <view
+          class="mode-tab"
+          :class="{ 'mode-tab--active': mode === 'search' }"
+          @click="switchMode('search')"
+          >搜索家谱</view
+        >
+        <view
+          class="mode-tab"
+          :class="{ 'mode-tab--active': mode === 'invite' }"
+          @click="switchMode('invite')"
+          >邀请码加入</view
+        >
       </view>
 
       <template v-if="mode === 'search'">
         <view class="search-controls">
           <view class="search-field">
-            <image class="search-field__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
-            <input v-model.trim="keyword" class="search-input" placeholder="姓氏、谱名、地区或堂号" placeholder-class="search-input__placeholder" @confirm="search" />
-            <view v-if="keyword" class="search-clear" @click="clearSearch">清空</view>
+            <image
+              class="search-field__skin"
+              src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png"
+              mode="scaleToFill"
+            />
+            <input
+              v-model.trim="keyword"
+              class="search-input"
+              placeholder="姓氏、谱名、地区或堂号"
+              placeholder-class="search-input__placeholder"
+              @confirm="search"
+            />
+            <view v-if="keyword" class="search-clear" @click="clearSearch"
+              >清空</view
+            >
           </view>
           <view class="search-action" @click="search">
-            <image class="search-action__skin" src="/static/assets/modules/genealogy/opaque/g06-search-button.png" mode="scaleToFill" />
+            <image
+              class="search-action__skin"
+              src="/static/assets/modules/genealogy/opaque/g06-search-button.png"
+              mode="scaleToFill"
+            />
             <text class="search-action__label">搜索</text>
           </view>
         </view>
         <view class="filter-row">
           <text class="filter-label">地区</text>
-          <view v-for="area in areas" :key="area" class="filter-chip" :class="{ 'filter-chip--active': selectedArea === area }" @click="selectedArea = area">{{ area }}</view>
+          <view
+            v-for="area in areas"
+            :key="area"
+            class="filter-chip"
+            :class="{ 'filter-chip--active': selectedArea === area }"
+            @click="selectedArea = area"
+            >{{ area }}</view
+          >
         </view>
-        <image class="search-divider" src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
+        <image
+          class="search-divider"
+          src="/static/assets/modules/genealogy/transparent/section-divider.png"
+          mode="scaleToFill"
+        />
 
-        <view v-if="searchState === 'loading'" class="search-status search-loading">
-          <text class="search-status__lead">正在检索公开家谱</text>
-          <text class="search-status__copy">请稍候，正在整理匹配结果。</text>
-        </view>
-        <view v-else-if="searchState === 'initial'" class="search-status search-initial">
+        <AppLoading
+          v-if="searchState === 'loading'"
+          variant="section"
+          text="正在检索公开家谱"
+          description="请稍候，正在整理匹配结果。"
+        />
+        <view
+          v-else-if="searchState === 'initial'"
+          class="search-status search-initial"
+        >
           <text class="search-status__lead">先确认家族是否已有家谱</text>
-          <text class="search-status__copy">可按姓氏、谱名、地区或堂号查找，避免重复创建。</text>
-          <image class="search-status__hall" src="/static/assets/foundation/transparent/root-header-hall.png" mode="aspectFit" />
+          <text class="search-status__copy"
+            >可按姓氏、谱名、地区或堂号查找，避免重复创建。</text
+          >
+          <image
+            class="search-status__hall"
+            src="/static/assets/foundation/transparent/root-header-hall.png"
+            mode="aspectFit"
+          />
         </view>
         <view v-else-if="searchState === 'results'" class="search-results">
-          <view class="search-results__head"><text>检索到 {{ results.length }} 部家谱</text><text>请核对支系与管理信息</text></view>
-          <view v-for="item in results" :key="item.id" class="result-card genealogy-card" @click="openPreview(item)">
-            <image class="result-card__skin" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
+          <view class="search-results__head"
+            ><text>检索到 {{ results.length }} 部家谱</text
+            ><text>请核对支系与管理信息</text></view
+          >
+          <view
+            v-for="item in results"
+            :key="item.id"
+            class="result-card genealogy-card"
+            @click="openPreview(item)"
+          >
+            <image
+              class="result-card__skin"
+              src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
+              mode="scaleToFill"
+            />
             <view class="result-card__content">
               <view class="result-card__head">
                 <view>
                   <text class="result-card__name">{{ item.name }}</text>
-                  <text class="result-card__identity">{{ item.surname }}氏 · {{ item.hall }}</text>
+                  <text class="result-card__identity"
+                    >{{ item.surname }}氏 · {{ item.hall }}</text
+                  >
                 </view>
-                <text class="result-card__relation" :class="`result-card__relation--${item.relation}`">{{ item.actionLabel }}</text>
+                <text
+                  class="result-card__relation"
+                  :class="`result-card__relation--${item.relation}`"
+                  >{{ item.actionLabel }}</text
+                >
               </view>
               <view class="result-card__facts">
                 <text>地区：{{ item.location }}</text>
                 <text>所属上级谱：{{ item.parentName }}</text>
                 <text>当前支系：{{ item.branchName }}</text>
-                <text>管理信息：{{ item.manager }} · {{ item.certification }}</text>
-                <text>{{ item.memberCount }} 位成员 · 更新于 {{ item.updatedAt }}</text>
+                <text
+                  >管理信息：{{ item.manager }} · {{ item.certification }}</text
+                >
+                <text
+                  >{{ item.memberCount }} 位成员 · 更新于
+                  {{ item.updatedAt }}</text
+                >
               </view>
-              <view class="result-card__action" @click.stop="handleResultAction(item)">{{ item.actionLabel }}</view>
+              <view
+                class="result-card__action"
+                @click.stop="handleResultAction(item)"
+                >{{ item.actionLabel }}</view
+              >
             </view>
           </view>
         </view>
-        <view v-else-if="searchState === 'empty'" class="search-status search-empty">
-          <image class="search-status__cloud" src="/static/assets/modules/genealogy/transparent/create-cloud.png" mode="aspectFit" />
+        <view
+          v-else-if="searchState === 'empty'"
+          class="search-status search-empty"
+        >
+          <image
+            class="search-status__cloud"
+            src="/static/assets/modules/genealogy/transparent/create-cloud.png"
+            mode="aspectFit"
+          />
           <text class="search-status__lead">暂未找到匹配家谱</text>
-          <text class="search-status__copy">可调整地区或关键词后重试，也可使用邀请码加入。</text>
+          <text class="search-status__copy"
+            >可调整地区或关键词后重试，也可使用邀请码加入。</text
+          >
         </view>
         <view v-else class="search-status search-error">
           <text class="search-status__lead">检索暂时失败</text>
-          <text class="search-status__copy">当前仅展示失败样式，请稍后重新搜索。</text>
-          <view class="status-retry" @click="search">重新搜索</view>
+          <text class="search-status__copy"
+            >当前仅展示失败样式，请稍后重新搜索。</text
+          >
+          <view class="status-retry" @click="search">
+            <image
+              src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
+              mode="aspectFit"
+            />
+            <text>重新搜索</text>
+          </view>
         </view>
       </template>
 
       <template v-else>
         <view class="invite-block">
           <text class="invite-title">输入家谱邀请码</text>
-          <text class="invite-copy">邀请码用于定位指定家谱，加入前仍需确认真实姓名和关系。</text>
+          <text class="invite-copy"
+            >邀请码用于定位指定家谱，加入前仍需确认真实姓名和关系。</text
+          >
           <view class="invite-controls">
             <view class="invite-field">
-              <image class="search-field__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
-              <input v-model.trim="inviteCode" class="invite-input" maxlength="12" placeholder="请输入邀请码" placeholder-class="search-input__placeholder" />
+              <image
+                class="search-field__skin"
+                src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png"
+                mode="scaleToFill"
+              />
+              <input
+                v-model.trim="inviteCode"
+                class="invite-input"
+                maxlength="12"
+                placeholder="请输入邀请码"
+                placeholder-class="search-input__placeholder"
+              />
             </view>
             <view class="search-action" @click="verifyInvite">
-              <image class="search-action__skin" src="/static/assets/modules/genealogy/opaque/g06-search-button.png" mode="scaleToFill" />
+              <image
+                class="search-action__skin"
+                src="/static/assets/modules/genealogy/opaque/g06-search-button.png"
+                mode="scaleToFill"
+              />
               <text class="search-action__label">验证</text>
             </view>
           </view>
           <text class="invite-demo">样式验证可输入 JP2026</text>
         </view>
-        <image class="search-divider" src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
+        <image
+          class="search-divider"
+          src="/static/assets/modules/genealogy/transparent/section-divider.png"
+          mode="scaleToFill"
+        />
 
-        <view v-if="inviteState === 'initial'" class="search-status invite-initial">
+        <view
+          v-if="inviteState === 'initial'"
+          class="search-status invite-initial"
+        >
           <text class="search-status__lead">通过邀请码直接定位家谱</text>
-          <text class="search-status__copy">验证有效后会显示目标家谱，确认关系后可直接加入。</text>
+          <text class="search-status__copy"
+            >验证有效后会显示目标家谱，确认关系后可直接加入。</text
+          >
         </view>
-        <view v-else-if="inviteState === 'invalid'" class="search-status invite-invalid">
+        <view
+          v-else-if="inviteState === 'invalid'"
+          class="search-status invite-invalid"
+        >
           <text class="search-status__lead">邀请码无效或已过期</text>
-          <text class="search-status__copy">请核对邀请码，或向家谱管理员重新获取。</text>
+          <text class="search-status__copy"
+            >请核对邀请码，或向家谱管理员重新获取。</text
+          >
         </view>
         <view v-else class="invite-result">
           <text class="invite-result__label">已定位目标家谱</text>
           <view class="result-card genealogy-card">
-            <image class="result-card__skin" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
+            <image
+              class="result-card__skin"
+              src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
+              mode="scaleToFill"
+            />
             <view class="result-card__content">
               <text class="result-card__name">{{ inviteTarget.name }}</text>
               <view class="result-card__facts">
-                <text>{{ inviteTarget.surname }}氏 · {{ inviteTarget.hall }} · {{ inviteTarget.location }}</text>
+                <text
+                  >{{ inviteTarget.surname }}氏 · {{ inviteTarget.hall }} ·
+                  {{ inviteTarget.location }}</text
+                >
                 <text>所属上级谱：{{ inviteTarget.parentName }}</text>
                 <text>当前支系：{{ inviteTarget.branchName }}</text>
-                <text>{{ inviteTarget.manager }} · {{ inviteTarget.certification }}</text>
+                <text
+                  >{{ inviteTarget.manager }} ·
+                  {{ inviteTarget.certification }}</text
+                >
               </view>
-              <view class="result-card__action" @click="confirmInvite">确认关系并加入</view>
+              <view class="result-card__action" @click="confirmInvite"
+                >确认关系并加入</view
+              >
             </view>
           </view>
           <text class="invite-result__note">提交后直接加入，无需等待审核</text>
@@ -127,164 +269,622 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
-import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
-import PageHeader from '@/components/PageHeader.vue'
+import { computed, ref } from "vue";
+import { onLoad, onUnload, onShow } from "@dcloudio/uni-app";
+import AppLoading from "@/components/AppLoading.vue";
+import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
 
-const mode = ref('search')
-const keyword = ref('')
-const selectedArea = ref('全部')
-const searchState = ref('initial')
-const inviteCode = ref('')
-const inviteState = ref('initial')
-const results = ref([])
-let searchTimer = null
+const mode = ref("search");
+const keyword = ref("");
+const selectedArea = ref("全部");
+const searchState = ref("initial");
+const inviteCode = ref("");
+const inviteState = ref("initial");
+const results = ref([]);
+let searchTimer = null;
 
-const areas = ['全部', '河南', '山东']
+const areas = ["全部", "河南", "山东"];
 const resultFixtures = [
-  { id: 2001, surname: '汤', name: '汤氏南阳宗谱', hall: '敦睦堂', location: '河南·南阳', parentName: '汤氏中华总谱', branchName: '南阳主支', manager: '管理员 汤文礼', certification: '资料已认证', memberCount: 428, updatedAt: '2026-07-12', relation: 'available', actionLabel: '申请加入' },
-  { id: 2002, surname: '汤', name: '汤氏洛阳家谱', hall: '承志堂', location: '河南·洛阳', parentName: '汤氏中华总谱', branchName: '洛阳二支', manager: '管理员 汤文远', certification: '资料已认证', memberCount: 158, updatedAt: '2026-07-10', relation: 'joined', actionLabel: '已加入' },
-  { id: 2003, surname: '汤', name: '汤氏济宁宗谱', hall: '敬宗堂', location: '山东·济宁', parentName: '汤氏鲁西总谱', branchName: '济宁主支', manager: '管理员 汤正明', certification: '管理员已实名', memberCount: 286, updatedAt: '2026-07-08', relation: 'pending', actionLabel: '审核中' },
-  { id: 2004, surname: '汤', name: '汤氏清河家谱', hall: '思源堂', location: '山东·临清', parentName: '汤氏鲁西总谱', branchName: '清河支系', manager: '管理员 汤志成', certification: '资料已认证', memberCount: 96, updatedAt: '2026-07-05', relation: 'rejected', actionLabel: '修改后重新申请' },
-  { id: 2005, surname: '汤', name: '汤氏汝南支谱', hall: '崇本堂', location: '河南·驻马店', parentName: '汤氏中原总谱', branchName: '汝南三支', manager: '管理员 汤国安', certification: '管理员已实名', memberCount: 72, updatedAt: '2026-07-02', relation: 'removed', actionLabel: '重新申请' },
-  { id: 2006, surname: '汤', name: '汤氏新安家谱', hall: '继善堂', location: '河南·三门峡', parentName: '无上级谱', branchName: '新安主支', manager: '创建者 当前用户', certification: '资料待完善', memberCount: 34, updatedAt: '2026-06-28', relation: 'owned', actionLabel: '我创建的' }
-]
+  {
+    id: 2001,
+    surname: "汤",
+    name: "汤氏南阳宗谱",
+    hall: "敦睦堂",
+    location: "河南·南阳",
+    parentName: "汤氏中华总谱",
+    branchName: "南阳主支",
+    manager: "管理员 汤文礼",
+    certification: "资料已认证",
+    memberCount: 428,
+    updatedAt: "2026-07-12",
+    relation: "available",
+    actionLabel: "申请加入",
+  },
+  {
+    id: 2002,
+    surname: "汤",
+    name: "汤氏洛阳家谱",
+    hall: "承志堂",
+    location: "河南·洛阳",
+    parentName: "汤氏中华总谱",
+    branchName: "洛阳二支",
+    manager: "管理员 汤文远",
+    certification: "资料已认证",
+    memberCount: 158,
+    updatedAt: "2026-07-10",
+    relation: "joined",
+    actionLabel: "已加入",
+  },
+  {
+    id: 2003,
+    surname: "汤",
+    name: "汤氏济宁宗谱",
+    hall: "敬宗堂",
+    location: "山东·济宁",
+    parentName: "汤氏鲁西总谱",
+    branchName: "济宁主支",
+    manager: "管理员 汤正明",
+    certification: "管理员已实名",
+    memberCount: 286,
+    updatedAt: "2026-07-08",
+    relation: "pending",
+    actionLabel: "审核中",
+  },
+  {
+    id: 2004,
+    surname: "汤",
+    name: "汤氏清河家谱",
+    hall: "思源堂",
+    location: "山东·临清",
+    parentName: "汤氏鲁西总谱",
+    branchName: "清河支系",
+    manager: "管理员 汤志成",
+    certification: "资料已认证",
+    memberCount: 96,
+    updatedAt: "2026-07-05",
+    relation: "rejected",
+    actionLabel: "修改后重新申请",
+  },
+  {
+    id: 2005,
+    surname: "汤",
+    name: "汤氏汝南支谱",
+    hall: "崇本堂",
+    location: "河南·驻马店",
+    parentName: "汤氏中原总谱",
+    branchName: "汝南三支",
+    manager: "管理员 汤国安",
+    certification: "管理员已实名",
+    memberCount: 72,
+    updatedAt: "2026-07-02",
+    relation: "removed",
+    actionLabel: "重新申请",
+  },
+  {
+    id: 2006,
+    surname: "汤",
+    name: "汤氏新安家谱",
+    hall: "继善堂",
+    location: "河南·三门峡",
+    parentName: "无上级谱",
+    branchName: "新安主支",
+    manager: "创建者 当前用户",
+    certification: "资料待完善",
+    memberCount: 34,
+    updatedAt: "2026-06-28",
+    relation: "owned",
+    actionLabel: "我创建的",
+  },
+];
 
-const inviteTarget = computed(() => resultFixtures[0])
+const inviteTarget = computed(() => resultFixtures[0]);
 
 const syncModeFromRoute = () => {
-  let requestedMode = 'search'
-  if (typeof location !== 'undefined') {
-    requestedMode = new URLSearchParams(location.hash.split('?')[1] || '').get('mode') || 'search'
+  let requestedMode = "search";
+  let requestedState = "";
+  if (typeof location !== "undefined") {
+    const routeParams = new URLSearchParams(location.hash.split("?")[1] || "");
+    requestedMode = routeParams.get("mode") || "search";
+    requestedState = routeParams.get("state") || "";
   } else {
-    const pages = getCurrentPages()
-    requestedMode = pages[pages.length - 1]?.options?.mode || 'search'
+    const pages = getCurrentPages();
+    const routeOptions = pages[pages.length - 1]?.options || {};
+    requestedMode = routeOptions.mode || "search";
+    requestedState = routeOptions.state || "";
   }
-  mode.value = requestedMode === 'invite' ? 'invite' : 'search'
-}
+  mode.value = requestedMode === "invite" ? "invite" : "search";
+  if (mode.value === "search" && requestedState === "loading")
+    searchState.value = "loading";
+};
 
-onLoad(syncModeFromRoute)
-onShow(syncModeFromRoute)
-onUnload(() => { if (searchTimer) clearTimeout(searchTimer) })
+onLoad(syncModeFromRoute);
+onShow(syncModeFromRoute);
+onUnload(() => {
+  if (searchTimer) clearTimeout(searchTimer);
+});
 
 const switchMode = (nextMode) => {
-  mode.value = nextMode
-  searchState.value = 'initial'
-  inviteState.value = 'initial'
-}
+  mode.value = nextMode;
+  searchState.value = "initial";
+  inviteState.value = "initial";
+};
 
 const search = () => {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchState.value = 'loading'
+  if (searchTimer) clearTimeout(searchTimer);
+  searchState.value = "loading";
   searchTimer = setTimeout(() => {
-    const value = keyword.value.trim()
-    if (value === '失败') {
-      searchState.value = 'error'
-      return
+    const value = keyword.value.trim();
+    if (value === "失败") {
+      searchState.value = "error";
+      return;
     }
     results.value = resultFixtures.filter((item) => {
-      const matchesKeyword = !value || `${item.name}${item.surname}${item.location}${item.hall}`.includes(value)
-      const matchesArea = selectedArea.value === '全部' || item.location.includes(selectedArea.value)
-      return matchesKeyword && matchesArea
-    })
-    searchState.value = results.value.length ? 'results' : 'empty'
-    searchTimer = null
-  }, 260)
-}
+      const matchesKeyword =
+        !value ||
+        `${item.name}${item.surname}${item.location}${item.hall}`.includes(
+          value,
+        );
+      const matchesArea =
+        selectedArea.value === "全部" ||
+        item.location.includes(selectedArea.value);
+      return matchesKeyword && matchesArea;
+    });
+    searchState.value = results.value.length ? "results" : "empty";
+    searchTimer = null;
+  }, 260);
+};
 
 const clearSearch = () => {
-  keyword.value = ''
-  results.value = []
-  searchState.value = 'initial'
-}
+  keyword.value = "";
+  results.value = [];
+  searchState.value = "initial";
+};
 
 const openPreview = (item) => {
-  if (item.relation === 'available') {
-    uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?mode=public&genealogyId=${item.id}` })
+  if (item.relation === "available") {
+    uni.navigateTo({
+      url: `/pages/genealogy/g05-genealogy-overview?mode=public&genealogyId=${item.id}`,
+    });
   }
-}
+};
 
 const handleResultAction = (item) => {
-  if (item.relation === 'available') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&genealogyId=${item.id}` })
-  if (item.relation === 'pending') return uni.navigateTo({ url: '/pages/genealogy/g09-my-applications?status=pending' })
-  if (item.relation === 'rejected' || item.relation === 'removed') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&previous=${item.relation}&genealogyId=${item.id}` })
-  return uni.reLaunch({ url: `/pages/genealogy/g01-my-genealogies?genealogyId=${item.id}` })
-}
+  if (item.relation === "available")
+    return uni.navigateTo({
+      url: `/pages/genealogy/g08-join-application?source=search&genealogyId=${item.id}`,
+    });
+  if (item.relation === "pending")
+    return uni.navigateTo({
+      url: "/pages/genealogy/g09-my-applications?status=pending",
+    });
+  if (item.relation === "rejected" || item.relation === "removed")
+    return uni.navigateTo({
+      url: `/pages/genealogy/g08-join-application?source=search&previous=${item.relation}&genealogyId=${item.id}`,
+    });
+  return uni.reLaunch({
+    url: `/pages/genealogy/g01-my-genealogies?genealogyId=${item.id}`,
+  });
+};
 
 const verifyInvite = () => {
-  inviteState.value = inviteCode.value.toUpperCase() === 'JP2026' ? 'valid' : 'invalid'
-}
-const confirmInvite = () => uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=invite&genealogyId=${inviteTarget.value.id}` })
+  inviteState.value =
+    inviteCode.value.toUpperCase() === "JP2026" ? "valid" : "invalid";
+};
+const confirmInvite = () =>
+  uni.navigateTo({
+    url: `/pages/genealogy/g08-join-application?source=invite&genealogyId=${inviteTarget.value.id}`,
+  });
 </script>
 
 <style scoped lang="scss">
-.search-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
-.search-page__header { position: relative; z-index: 2; }
-.search-page__content { position: relative; z-index: 3; min-height: calc(100vh - 104rpx); padding: 30rpx 24rpx calc(58rpx + env(safe-area-inset-bottom)); box-sizing: border-box; }
-.search-title-strip { position: relative; width: 100%; height: 138rpx; }
-.search-title-strip__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.search-title-strip__seal { position: absolute; top: 27rpx; left: 52rpx; z-index: 1; width: 72rpx; height: 84rpx; }
-.search-title-strip__text { position: absolute; inset: 0 170rpx 0 156rpx; z-index: 1; display: flex; align-items: center; justify-content: center; color: #f5d596; font-family: 'STKaiti', 'KaiTi', serif; font-size: 39rpx; font-weight: 700; letter-spacing: 5rpx; }
-.mode-tabs { display: flex; width: 500rpx; margin: 30rpx auto 0; border-bottom: 1rpx solid rgba(181, 138, 75, .45); }
-.mode-tab { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 70rpx; color: $ink-muted; font-family: 'STKaiti', 'KaiTi', serif; font-size: 28rpx; }
-.mode-tab--active { color: $brand-red; font-weight: 700; }
-.mode-tab--active::after { position: absolute; right: 42rpx; bottom: -2rpx; left: 42rpx; height: 4rpx; background: $brand-red; content: ''; }
-.search-controls { display: flex; align-items: center; gap: 20rpx; margin-top: 32rpx; }
-.invite-controls { display: flex; align-items: center; gap: 20rpx; margin-top: 32rpx; }
-.search-field { position: relative; width: 430rpx; height: 95rpx; }
+.search-page {
+  position: relative;
+  min-height: 100vh;
+  overflow-x: hidden;
+  background: $paper;
+}
+.search-page__header {
+  position: relative;
+  z-index: 2;
+}
+.search-page__content {
+  position: relative;
+  z-index: 3;
+  min-height: calc(100vh - 104rpx);
+  padding: 30rpx 24rpx calc(58rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+}
+.search-title-strip {
+  position: relative;
+  width: 100%;
+  height: 138rpx;
+}
+.search-title-strip__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.search-title-strip__seal {
+  position: absolute;
+  top: 27rpx;
+  left: 52rpx;
+  z-index: 1;
+  width: 72rpx;
+  height: 84rpx;
+}
+.search-title-strip__text {
+  position: absolute;
+  inset: 0 170rpx 0 156rpx;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f5d596;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 39rpx;
+  font-weight: 700;
+  letter-spacing: 5rpx;
+}
+.mode-tabs {
+  display: flex;
+  width: 500rpx;
+  margin: 30rpx auto 0;
+  border-bottom: 1rpx solid rgba(181, 138, 75, 0.45);
+}
+.mode-tab {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 70rpx;
+  color: $ink-muted;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 28rpx;
+}
+.mode-tab--active {
+  color: $brand-red;
+  font-weight: 700;
+}
+.mode-tab--active::after {
+  position: absolute;
+  right: 42rpx;
+  bottom: -2rpx;
+  left: 42rpx;
+  height: 4rpx;
+  background: $brand-red;
+  content: "";
+}
+.search-controls {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-top: 32rpx;
+}
+.invite-controls {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-top: 32rpx;
+}
+.search-field {
+  position: relative;
+  width: 430rpx;
+  height: 95rpx;
+}
 .search-field__skin,
-.search-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-.search-input { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 82rpx 0 30rpx; box-sizing: border-box; color: $ink; font-size: 25rpx; }
-.search-input__placeholder { color: #ab9c83; }
-.search-clear { position: absolute; z-index: 2; top: 0; right: 20rpx; display: flex; height: 100%; align-items: center; color: $brand-red; font-size: 21rpx; }
-.search-action { position: relative; display: flex; width: 200rpx; height: 88rpx; align-items: center; justify-content: center; }
-.search-action__label { position: relative; z-index: 1; color: #fff4dc; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; letter-spacing: 5rpx; }
-.filter-row { display: flex; align-items: center; gap: 12rpx; margin: 16rpx 14rpx 0; }
-.filter-label { color: $ink-muted; font-size: 22rpx; }
-.filter-chip { display: flex; min-width: 82rpx; min-height: 52rpx; align-items: center; justify-content: center; color: $ink-muted; font-size: 22rpx; }
-.filter-chip--active { color: $brand-red; font-weight: 700; }
-.search-divider { display: block; width: 100%; height: 30rpx; margin: 24rpx 0 24rpx; }
-.search-status { display: flex; min-height: 240rpx; flex-direction: column; align-items: center; justify-content: center; padding: 16rpx 28rpx 24rpx; box-sizing: border-box; text-align: center; }
-.search-status__cloud { width: 92rpx; height: 46rpx; margin-bottom: 4rpx; opacity: .78; }
-.search-status__lead { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; }
-.search-status__copy { margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 36rpx; }
-.search-status__hall { width: 330rpx; height: 132rpx; margin-top: 210rpx; opacity: .22; filter: grayscale(1); }
-.status-retry { display: flex; min-height: 70rpx; align-items: center; margin-top: 18rpx; color: $brand-red; font-size: 24rpx; }
-.search-results { display: flex; flex-direction: column; gap: 16rpx; margin-top: 4rpx; }
-.search-results__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16rpx; color: $ink-muted; font-size: 21rpx; }
-.search-results__head text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
-.result-card { position: relative; min-height: 314rpx; box-sizing: border-box; padding: 28rpx 30rpx; overflow: hidden; }
-.result-card__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
-.result-card__content { position: relative; z-index: 1; }
-.result-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
+.search-action__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.search-input {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 0 82rpx 0 30rpx;
+  box-sizing: border-box;
+  color: $ink;
+  font-size: 25rpx;
+}
+.search-input__placeholder {
+  color: #ab9c83;
+}
+.search-clear {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 20rpx;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  color: $brand-red;
+  font-size: 21rpx;
+}
+.search-action {
+  position: relative;
+  display: flex;
+  width: 200rpx;
+  height: 88rpx;
+  align-items: center;
+  justify-content: center;
+}
+.search-action__label {
+  position: relative;
+  z-index: 1;
+  color: #fff4dc;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 31rpx;
+  font-weight: 700;
+  letter-spacing: 5rpx;
+}
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin: 16rpx 14rpx 0;
+}
+.filter-label {
+  color: $ink-muted;
+  font-size: 22rpx;
+}
+.filter-chip {
+  display: flex;
+  min-width: 82rpx;
+  min-height: 52rpx;
+  align-items: center;
+  justify-content: center;
+  color: $ink-muted;
+  font-size: 22rpx;
+}
+.filter-chip--active {
+  color: $brand-red;
+  font-weight: 700;
+}
+.search-divider {
+  display: block;
+  width: 100%;
+  height: 30rpx;
+  margin: 24rpx 0 24rpx;
+}
+.search-status {
+  display: flex;
+  min-height: 240rpx;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 28rpx 24rpx;
+  box-sizing: border-box;
+  text-align: center;
+}
+.search-status__cloud {
+  width: 92rpx;
+  height: 46rpx;
+  margin-bottom: 4rpx;
+  opacity: 0.78;
+}
+.search-status__lead {
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 30rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+}
+.search-status__copy {
+  margin-top: 12rpx;
+  color: $ink-muted;
+  font-size: 22rpx;
+  line-height: 36rpx;
+}
+.search-status__hall {
+  width: 330rpx;
+  height: 132rpx;
+  margin-top: 210rpx;
+  opacity: 0.22;
+  filter: grayscale(1);
+}
+.status-retry {
+  position: relative;
+  display: flex;
+  width: 300rpx;
+  height: 76rpx;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24rpx;
+  overflow: hidden;
+}
+.status-retry image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.status-retry text {
+  position: relative;
+  z-index: 1;
+  color: #fff9ed;
+  font-size: 25rpx;
+  font-weight: 700;
+}
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  margin-top: 4rpx;
+}
+.search-results__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16rpx;
+  color: $ink-muted;
+  font-size: 21rpx;
+}
+.search-results__head text:first-child {
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 27rpx;
+  font-weight: 700;
+}
+.result-card {
+  position: relative;
+  min-height: 314rpx;
+  box-sizing: border-box;
+  padding: 28rpx 30rpx;
+  overflow: hidden;
+}
+.result-card__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.result-card__content {
+  position: relative;
+  z-index: 1;
+}
+.result-card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
 .result-card__name,
-.result-card__identity { display: block; }
-.result-card__name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 33rpx; font-weight: 700; }
-.result-card__identity { margin-top: 5rpx; color: $ink-muted; font-size: 22rpx; }
-.result-card__relation { flex: 0 0 auto; max-width: 190rpx; margin-left: 12rpx; color: #9a641f; font-size: 21rpx; text-align: right; }
+.result-card__identity {
+  display: block;
+}
+.result-card__name {
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 33rpx;
+  font-weight: 700;
+}
+.result-card__identity {
+  margin-top: 5rpx;
+  color: $ink-muted;
+  font-size: 22rpx;
+}
+.result-card__relation {
+  flex: 0 0 auto;
+  max-width: 190rpx;
+  margin-left: 12rpx;
+  color: #9a641f;
+  font-size: 21rpx;
+  text-align: right;
+}
 .result-card__relation--rejected,
-.result-card__relation--removed { color: $brand-red; }
-.result-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8rpx 18rpx; margin-top: 16rpx; color: $ink-muted; font-size: 23rpx; line-height: 32rpx; }
+.result-card__relation--removed {
+  color: $brand-red;
+}
+.result-card__facts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8rpx 18rpx;
+  margin-top: 16rpx;
+  color: $ink-muted;
+  font-size: 23rpx;
+  line-height: 32rpx;
+}
 .result-card__facts text:nth-child(4),
-.result-card__facts text:nth-child(5) { grid-column: 1 / -1; }
-.result-card__action { display: flex; min-height: 58rpx; align-items: center; justify-content: center; margin-top: 14rpx; color: $brand-red; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
-.invite-block { padding: 24rpx 18rpx 0; }
-.invite-title { display: block; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
-.invite-copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 22rpx; line-height: 35rpx; }
-.invite-field { position: relative; flex: 1; height: 95rpx; }
-.invite-input { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 30rpx; box-sizing: border-box; color: $ink; font-size: 25rpx; letter-spacing: 3rpx; }
-.invite-demo { display: block; margin-top: 8rpx; color: #9b876f; font-size: 19rpx; }
-.invite-result__label { display: block; margin: 0 12rpx 12rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
-.invite-result__note { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; text-align: center; }
+.result-card__facts text:nth-child(5) {
+  grid-column: 1 / -1;
+}
+.result-card__action {
+  display: flex;
+  min-height: 58rpx;
+  align-items: center;
+  justify-content: center;
+  margin-top: 14rpx;
+  color: $brand-red;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 27rpx;
+  font-weight: 700;
+}
+.invite-block {
+  padding: 24rpx 18rpx 0;
+}
+.invite-title {
+  display: block;
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 31rpx;
+  font-weight: 700;
+}
+.invite-copy {
+  display: block;
+  margin-top: 10rpx;
+  color: $ink-muted;
+  font-size: 22rpx;
+  line-height: 35rpx;
+}
+.invite-field {
+  position: relative;
+  flex: 1;
+  height: 95rpx;
+}
+.invite-input {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  color: $ink;
+  font-size: 25rpx;
+  letter-spacing: 3rpx;
+}
+.invite-demo {
+  display: block;
+  margin-top: 8rpx;
+  color: #9b876f;
+  font-size: 19rpx;
+}
+.invite-result__label {
+  display: block;
+  margin: 0 12rpx 12rpx;
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 27rpx;
+  font-weight: 700;
+}
+.invite-result__note {
+  display: block;
+  margin-top: 12rpx;
+  color: $brand-red;
+  font-size: 22rpx;
+  text-align: center;
+}
 
 @media screen and (max-width: 340px) {
-  .search-page__content { padding-right: 20rpx; padding-left: 20rpx; }
-  .search-title-strip__seal { left: 44rpx; }
-  .search-title-strip__text { right: 148rpx; left: 138rpx; font-size: 37rpx; }
-  .search-field { width: 430rpx; }
-  .result-card { padding-right: 24rpx; padding-left: 24rpx; }
-  .result-card__facts { grid-template-columns: 1fr; }
-  .result-card__facts text { grid-column: 1 !important; }
+  .search-page__content {
+    padding-right: 20rpx;
+    padding-left: 20rpx;
+  }
+  .search-title-strip__seal {
+    left: 44rpx;
+  }
+  .search-title-strip__text {
+    right: 148rpx;
+    left: 138rpx;
+    font-size: 37rpx;
+  }
+  .search-field {
+    width: 430rpx;
+  }
+  .result-card {
+    padding-right: 24rpx;
+    padding-left: 24rpx;
+  }
+  .result-card__facts {
+    grid-template-columns: 1fr;
+  }
+  .result-card__facts text {
+    grid-column: 1 !important;
+  }
 }
 </style>
diff --git a/pages/tree/t08-member-states.vue b/pages/tree/t08-member-states.vue
index 2702b23..3b61147 100644
--- a/pages/tree/t08-member-states.vue
+++ b/pages/tree/t08-member-states.vue
@@ -1,26 +1,54 @@
 <!-- 页面编号：T-08；用途：成员隐私、离世纪念与无权限状态说明。 -->
 <template>
-  <view class="member-status-page" :class="{
-    'member-status--privacy': statusState === 'privacy',
-    'member-status--deceased': statusState === 'deceased',
-    'member-status--forbidden': statusState === 'forbidden'
-  }">
+  <view
+    class="member-status-page"
+    :class="{
+      'member-status--privacy': statusState === 'privacy',
+      'member-status--deceased': statusState === 'deceased',
+      'member-status--forbidden': statusState === 'forbidden',
+    }"
+  >
     <ModulePageBackground module="tree" />
-    <view class="member-status-page__header"><PageHeader title="成员状态" /></view>
+    <view class="member-status-page__header"
+      ><PageHeader title="成员状态"
+    /></view>
     <view class="status-tabs">
-      <view v-for="item in tabs" :key="item.value" class="status-tab" @click="statusState = item.value">
-        <image :src="statusState === item.value ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
-        <text :class="{ 'status-tab__text--active': statusState === item.value }">{{ item.label }}</text>
+      <view
+        v-for="item in tabs"
+        :key="item.value"
+        class="status-tab"
+        @click="statusState = item.value"
+      >
+        <image
+          :src="
+            statusState === item.value
+              ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
+              : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
+          "
+          mode="aspectFit"
+        />
+        <text
+          :class="{ 'status-tab__text--active': statusState === item.value }"
+          >{{ item.label }}</text
+        >
       </view>
     </view>
     <view class="status-card">
-      <image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
+      <image
+        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
+        mode="scaleToFill"
+      />
       <view class="status-card__copy">
-        <text>{{ activeStatus.eyebrow }}</text><text>{{ activeStatus.title }}</text><text>{{ activeStatus.copy }}</text>
+        <text>{{ activeStatus.eyebrow }}</text
+        ><text>{{ activeStatus.title }}</text
+        ><text>{{ activeStatus.copy }}</text>
       </view>
     </view>
     <view class="status-guidance">
-      <image src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
+      <image
+        src="/static/assets/modules/tree/transparent/t01-state-panel.png"
+        mode="scaleToFill"
+      />
       <view>
         <text>{{ activeStatus.guideTitle }}</text>
         <text v-for="line in activeStatus.guides" :key="line">{{ line }}</text>
@@ -29,39 +57,169 @@
   </view>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import ModulePageBackground from '@/components/ModulePageBackground.vue'
-import PageHeader from '@/components/PageHeader.vue'
-const statusState = ref('privacy')
-const tabs = [{ value: 'privacy', label: '隐私' }, { value: 'deceased', label: '纪念' }, { value: 'forbidden', label: '无权限' }]
+import { computed, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import ModulePageBackground from "@/components/ModulePageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
+const statusState = ref("privacy");
+const tabs = [
+  { value: "privacy", label: "隐私" },
+  { value: "deceased", label: "纪念" },
+  { value: "forbidden", label: "无权限" },
+];
 const states = {
-  privacy: { eyebrow: '隐私成员', title: '敏感资料只向授权成员展示', copy: '姓名可保留在世系位置，出生信息、联系方式和生平内容根据权限隐藏。', guideTitle: '隐私展示原则', guides: ['本人可以查看和维护自己的完整档案', '谱主可协助处理身份与世系关系', '普通成员只看到被允许公开的内容'] },
-  deceased: { eyebrow: '离世成员', title: '在世系中保留温和的纪念状态', copy: '离世不会删除成员关系；档案可继续记录生平、影像和家人的追思内容。', guideTitle: '纪念资料范围', guides: ['生卒年月与世系关系继续保留', '生平内容由有权限家人共同维护', '敏感资料仍遵守原有隐私设置'] },
-  forbidden: { eyebrow: '访问受限', title: '当前账号没有查看该档案的权限', copy: '为保护家人隐私，页面不会展示被隐藏的字段，也不会提供绕过权限的入口。', guideTitle: '如何申请查看', guides: ['先确认已经加入对应家谱', '联系谱主说明亲属关系和用途', '权限变更后重新进入成员档案'] }
-}
-const activeStatus = computed(() => states[statusState.value])
-onLoad((query) => { statusState.value = states[query.state] ? query.state : 'privacy' })
+  privacy: {
+    eyebrow: "隐私成员",
+    title: "敏感资料只向授权成员展示",
+    copy: "姓名可保留在世系位置，出生信息、联系方式和生平内容根据权限隐藏。",
+    guideTitle: "隐私展示原则",
+    guides: [
+      "本人可以查看和维护自己的完整档案",
+      "谱主可协助处理身份与世系关系",
+      "普通成员只看到被允许公开的内容",
+    ],
+  },
+  deceased: {
+    eyebrow: "离世成员",
+    title: "在世系中保留温和的纪念状态",
+    copy: "离世不会删除成员关系；档案可继续记录生平、影像和家人的追思内容。",
+    guideTitle: "纪念资料范围",
+    guides: [
+      "生卒年月与世系关系继续保留",
+      "生平内容由有权限家人共同维护",
+      "敏感资料仍遵守原有隐私设置",
+    ],
+  },
+  forbidden: {
+    eyebrow: "访问受限",
+    title: "当前账号没有查看该档案的权限",
+    copy: "为保护家人隐私，页面不会展示被隐藏的字段，也不会提供绕过权限的入口。",
+    guideTitle: "如何申请查看",
+    guides: [
+      "先确认已经加入对应家谱",
+      "联系谱主说明亲属关系和用途",
+      "权限变更后重新进入成员档案",
+    ],
+  },
+};
+const activeStatus = computed(() => states[statusState.value]);
+onLoad((query) => {
+  statusState.value = states[query.state] ? query.state : "privacy";
+});
 </script>
 <style scoped lang="scss">
-.member-status-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
-.member-status-page__header, .status-tabs, .status-card, .status-guidance { position: relative; z-index: 2; }
-.status-tabs { display: flex; gap: 10rpx; padding: 22rpx 24rpx 0; }
-.status-tab { position: relative; width: calc(33.333% - 7rpx); height: 62rpx; }
-.status-tab image { position: absolute; inset: 0; width: 100%; height: 100%; }
-.status-tab text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 21rpx; font-weight: 700; }
-.status-tab .status-tab__text--active { color: #fff9ed; }
-.status-card { width: calc(100% - 48rpx); height: calc((100vw - 24px) * .34286); min-height: 224rpx; margin: 24rpx auto 0; }
-.status-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
-.status-card__copy { position: absolute; inset: 18% 10%; z-index: 1; text-align: center; }
-.status-card__copy text { display: block; }
-.status-card__copy text:first-child { color: $brand-red; font-size: 20rpx; letter-spacing: 3rpx; }
-.status-card__copy text:nth-child(2) { margin-top: 7rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
-.status-card__copy text:last-child { margin-top: 10rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.5; }
-.status-guidance { width: calc(100% - 48rpx); height: min(400px, calc((100vw - 24px) * .9)); margin: 18rpx auto 0; }
-.status-guidance > image { position: absolute; inset: 0; width: 100%; height: 100%; }
-.status-guidance > view { position: absolute; inset: 12% 11%; z-index: 1; }
-.status-guidance text { display: block; color: $ink-muted; font-size: 21rpx; line-height: 1.65; }
-.status-guidance text:first-child { margin-bottom: 18rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
-.status-guidance text:not(:first-child) { margin-top: 12rpx; }
+.member-status-page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  background: $paper;
+}
+.member-status-page__header,
+.status-tabs,
+.status-card,
+.status-guidance {
+  position: relative;
+  z-index: 2;
+}
+.status-tabs {
+  display: flex;
+  gap: 10rpx;
+  padding: 22rpx 24rpx 0;
+}
+.status-tab {
+  position: relative;
+  width: calc(33.333% - 7rpx);
+  height: 62rpx;
+}
+.status-tab image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.status-tab text {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: $ink;
+  font-size: 23rpx;
+  font-weight: 700;
+}
+.status-tab .status-tab__text--active {
+  color: #fff9ed;
+}
+.status-card {
+  width: calc(100% - 48rpx);
+  height: calc((100vw - 24px) * 0.34286);
+  min-height: 224rpx;
+  margin: 24rpx auto 0;
+}
+.status-card > image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.status-card__copy {
+  position: absolute;
+  inset: 18% 10%;
+  z-index: 1;
+  text-align: center;
+}
+.status-card__copy text {
+  display: block;
+}
+.status-card__copy text:first-child {
+  color: $brand-red;
+  font-size: 22rpx;
+  letter-spacing: 3rpx;
+}
+.status-card__copy text:nth-child(2) {
+  margin-top: 7rpx;
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 32rpx;
+  font-weight: 700;
+}
+.status-card__copy text:last-child {
+  margin-top: 10rpx;
+  color: $ink-muted;
+  font-size: 24rpx;
+  line-height: 1.5;
+}
+.status-guidance {
+  width: calc(100% - 48rpx);
+  height: min(400px, calc((100vw - 24px) * 0.9));
+  margin: 18rpx auto 0;
+}
+.status-guidance > image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.status-guidance > view {
+  position: absolute;
+  inset: 12% 11%;
+  z-index: 1;
+}
+.status-guidance text {
+  display: block;
+  color: $ink-muted;
+  font-size: 24rpx;
+  line-height: 1.65;
+}
+.status-guidance text:first-child {
+  margin-bottom: 18rpx;
+  color: $ink;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: 31rpx;
+  font-weight: 700;
+}
+.status-guidance text:not(:first-child) {
+  margin-top: 12rpx;
+}
 </style>
diff --git a/static/assets/modules/genealogy/opaque/genealogy-page-background-long.png b/static/assets/modules/genealogy/opaque/genealogy-page-background-long.png
new file mode 100644
index 0000000..da5a3b7
Binary files /dev/null and b/static/assets/modules/genealogy/opaque/genealogy-page-background-long.png differ
diff --git a/static/assets/modules/genealogy/opaque/genealogy-page-background.png b/static/assets/modules/genealogy/opaque/genealogy-page-background.png
new file mode 100644
index 0000000..2001850
Binary files /dev/null and b/static/assets/modules/genealogy/opaque/genealogy-page-background.png differ