feat: 完成70%全局样式与可读性优化

pages/genealogy/g01-my-genealogies.vue

@@ -68,7 +68,7 @@
             </view>
             <view class="current-info-divider"></view>
             <view class="current-meta">
-              <view class="current-meta-item">
+              <view class="current-meta-item current-meta-item--location">
                 <image
                   class="current-meta-icon"
                   src="/static/assets/foundation/transparent/meta-location.png"
@@ -78,7 +78,7 @@
                   currentGenealogy.location
                 }}</text>
               </view>
-              <view class="current-meta-item">
+              <view class="current-meta-item current-meta-item--members">
                 <image
                   class="current-meta-icon"
                   src="/static/assets/foundation/transparent/meta-member.png"
@@ -88,7 +88,7 @@
                   >{{ currentGenealogy.memberCount }} 位成员</text
                 >
               </view>
-              <view class="current-meta-item">
+              <view class="current-meta-item current-meta-item--role">
                 <image
                   class="current-meta-icon"
                   src="/static/assets/foundation/transparent/meta-admin.png"
@@ -710,7 +710,7 @@ const openShortcut = (key) => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .genealogy-index {
   display: flex;
@@ -754,9 +754,9 @@ const openShortcut = (key) => {
 }
 
 .current-slip {
-  @include adaptive.adaptive-genealogy-current-slip;
+  @include adaptive-genealogy-current-slip;
   display: block;
-  min-height: 268rpx;
+  min-height: 300rpx;
   padding: 30rpx 34rpx 28rpx;
 }
 
@@ -775,7 +775,7 @@ const openShortcut = (key) => {
 .current-seal-title {
   color: #fff7e7;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
   letter-spacing: 2rpx;
   writing-mode: vertical-rl;
@@ -790,59 +790,76 @@ const openShortcut = (key) => {
   flex: 1;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 38rpx;
+  font-size: clamp(18px, 34rpx, 24px);
   font-weight: 700;
   line-height: 1.25;
-  white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 .current-switch-copy {
   flex: 0 0 auto;
-  margin-left: auto;
+  margin-left: 16rpx;
+  padding: 4rpx 12rpx;
+  border: 1rpx solid rgba(159, 23, 15, 0.34);
+  border-radius: 999rpx;
   color: $brand-red;
-  font-size: 28rpx;
+  font-size: clamp(15px, 25rpx, 18px);
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
 }
 .current-info-divider {
   width: 100%;
   height: 1rpx;
-  margin: 14rpx 0 16rpx;
+  margin: 18rpx 0 16rpx;
   background: rgba(181, 138, 75, 0.48);
 }
 
 .current-meta {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 28rpx;
+  row-gap: 10rpx;
   margin-top: 0;
   color: #62584c;
-  font-size: 27rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 500;
   line-height: 1.4;
 }
 
 .current-meta-item {
   display: flex;
+  min-width: 0;
   align-items: center;
   margin: 0;
-  flex-wrap: wrap;
 
   .current-meta-item-text {
+    min-width: 0;
     overflow-wrap: anywhere;
   }
 }
+.current-meta-item--location {
+  grid-column: 1 / -1;
+}
+.current-meta-item--role {
+  justify-self: end;
+}
 .current-meta-icon {
-  width: 36rpx;
-  height: 36rpx;
+  width: 34rpx;
+  height: 34rpx;
+  flex: 0 0 auto;
   margin-right: 8rpx;
   opacity: 1;
 }
 
 .shortcut-grid {
   display: flex;
-  min-height: 194rpx;
+  min-height: 168rpx;
   align-items: center;
-  margin-top: 24rpx;
+  margin-top: 18rpx;
   padding: 8rpx 0;
 }
 
@@ -854,15 +871,15 @@ const openShortcut = (key) => {
   align-items: center;
 }
 .shortcut-icon {
-  width: 82rpx;
-  height: 82rpx;
+  width: 76rpx;
+  height: 76rpx;
 }
 .shortcut-label {
   width: 100%;
-  margin-top: 12rpx;
+  margin-top: 10rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 29rpx;
+  font-size: clamp(16px, 27rpx, 19px);
   font-weight: 700;
   text-align: center;
   overflow-wrap: anywhere;
@@ -890,7 +907,7 @@ const openShortcut = (key) => {
   margin-bottom: 8rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 
@@ -907,7 +924,7 @@ const openShortcut = (key) => {
 }
 
 .application-record {
-  @include adaptive.adaptive-genealogy-list-card;
+  @include adaptive-genealogy-list-card;
   display: flex;
   min-height: 138rpx;
   align-items: center;
@@ -928,7 +945,7 @@ const openShortcut = (key) => {
 .application-record__name {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
   overflow-wrap: anywhere;
 }
@@ -936,7 +953,7 @@ const openShortcut = (key) => {
   flex: 0 0 auto;
   margin-left: 16rpx;
   color: #7f4f16;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   font-weight: 600;
 }
 .application-record__status--rejected {
@@ -949,7 +966,7 @@ const openShortcut = (key) => {
   display: block;
   margin-top: 10rpx;
   color: #62584c;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   font-weight: 500;
   line-height: 1.4;
 }
@@ -965,7 +982,7 @@ const openShortcut = (key) => {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
 }
 
 .create-action {
@@ -976,7 +993,7 @@ const openShortcut = (key) => {
   background: rgba(255, 249, 238, 0.66);
   color: $brand-red;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
   letter-spacing: 3rpx;
 }
@@ -1019,18 +1036,18 @@ const openShortcut = (key) => {
   margin-top: 24rpx;
   color: $ink;
   font-family: serif;
-  font-size: 38rpx;
+  font-size: clamp(20px, 38rpx, 26px);
   font-weight: 700;
 }
 .state-copy {
   margin-top: 14rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   line-height: 1.7;
 }
 
 .state-panel--error {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   min-height: 1120rpx;
   padding: 0;
 }
@@ -1060,7 +1077,7 @@ const openShortcut = (key) => {
   margin-top: 30rpx;
   color: #392719;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 42rpx;
+  font-size: clamp(22px, 42rpx, 28px);
   font-weight: 700;
   letter-spacing: 2rpx;
 }
@@ -1070,7 +1087,7 @@ const openShortcut = (key) => {
   min-height: 72rpx;
   margin-top: 16rpx;
   color: #786654;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   line-height: 1.65;
 }
 
@@ -1092,7 +1109,7 @@ const openShortcut = (key) => {
 }
 
 .empty-panel {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   min-height: 1120rpx;
 }
 
@@ -1120,7 +1137,7 @@ const openShortcut = (key) => {
 .empty-seal__text {
   color: #fff7e7;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
   letter-spacing: 2rpx;
   writing-mode: vertical-rl;
@@ -1131,7 +1148,7 @@ const openShortcut = (key) => {
   margin-top: 30rpx;
   color: #392719;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 48rpx;
+  font-size: clamp(24px, 48rpx, 30px);
   font-weight: 700;
   letter-spacing: 2rpx;
 }
@@ -1141,7 +1158,7 @@ const openShortcut = (key) => {
   min-height: 84rpx;
   margin-top: 18rpx;
   color: #786654;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   line-height: 1.65;
 }
 
@@ -1177,7 +1194,7 @@ const openShortcut = (key) => {
 .empty-invite-action__copy {
   color: #7b4e24;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
   letter-spacing: 3rpx;
 }
@@ -1194,13 +1211,13 @@ const openShortcut = (key) => {
 }
 .empty-create-action__copy {
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
 }
 .empty-create-note {
   display: block;
   color: $ink-muted;
-  font-size: 26rpx;
-  line-height: 38rpx;
+  font-size: clamp(16px, 26rpx, 20px);
+  line-height: max(1.35em, clamp(20px, 38rpx, 26px));
 }
 
 .state-retry {
@@ -1216,7 +1233,7 @@ const openShortcut = (key) => {
 .state-retry__copy {
   color: #fff9ec;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 29rpx;
+  font-size: clamp(16px, 29rpx, 20px);
 }
 
 .add-dialog-layer {
@@ -1230,7 +1247,7 @@ const openShortcut = (key) => {
   background: rgba(34, 20, 12, 0.68);
 }
 .add-dialog {
-  @include adaptive.adaptive-g01-add-sheet;
+  @include adaptive-g01-add-sheet;
   width: 100%;
   min-height: 780rpx;
   max-height: calc(100vh - 80rpx);
@@ -1301,7 +1318,7 @@ const openShortcut = (key) => {
   background: rgba(34, 20, 12, 0.58);
 }
 .genealogy-switcher {
-  @include adaptive.adaptive-g01-switcher;
+  @include adaptive-g01-switcher;
   width: 670rpx;
   max-width: 100%;
   min-height: 600rpx;
@@ -1346,14 +1363,14 @@ const openShortcut = (key) => {
 .dialog-title {
   color: $brand-red;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 42rpx;
+  font-size: clamp(22px, 42rpx, 28px);
   font-weight: 700;
   letter-spacing: 4rpx;
 }
 .dialog-copy {
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   line-height: 1.5;
 }
 .switcher-item {
@@ -1381,17 +1398,17 @@ const openShortcut = (key) => {
 .switcher-item__name {
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
 }
 .switcher-item__meta {
   margin-top: 6rpx;
   color: #62584c;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
 }
 .switcher-item__state {
   color: $brand-red;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 600;
 }
 .switcher-item--active {
@@ -1412,10 +1429,10 @@ const openShortcut = (key) => {
     padding-left: 20rpx;
   }
   .current-name {
-    font-size: 40rpx;
+    font-size: clamp(20px, 40rpx, 26px);
   }
   .shortcut-label {
-    font-size: 23rpx;
+    font-size: clamp(14px, 23rpx, 17px);
   }
   .current-meta-icon {
     width: 32rpx;

pages/genealogy/g03-create-genealogy.vue

@@ -503,7 +503,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .create-page {
   display: flex;
@@ -516,7 +516,7 @@ onUnload(() => {
   padding: 24rpx 32rpx 72rpx;
 }
 .create-card {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   padding: 48rpx 38rpx 42rpx;
 }
 .create-card__eyebrow,
@@ -528,7 +528,7 @@ onUnload(() => {
 }
 .create-card__eyebrow {
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   font-weight: 700;
   letter-spacing: 3rpx;
 }
@@ -536,13 +536,13 @@ onUnload(() => {
   margin-top: 12rpx;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 42rpx;
+  font-size: clamp(22px, 42rpx, 28px);
   font-weight: 700;
 }
 .create-card__note {
   margin-top: 16rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   line-height: 1.65;
 }
 .field-row {
@@ -556,18 +556,19 @@ onUnload(() => {
   background: rgba(255, 252, 245, 0.7);
 }
 .field-row__label {
-  width: 142rpx;
+  width: 184rpx;
   flex: 0 0 auto;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
+  white-space: nowrap;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 1;
   transform: translateY(-3rpx);
 }
@@ -575,7 +576,7 @@ onUnload(() => {
   min-width: 0;
   flex: 1;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .field-row--selector {
   justify-content: space-between;
@@ -585,7 +586,7 @@ onUnload(() => {
   min-width: 0;
   flex: 1;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: right;
   overflow-wrap: anywhere;
 }
@@ -606,7 +607,7 @@ onUnload(() => {
   display: block;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .intro-field textarea {
@@ -615,7 +616,7 @@ onUnload(() => {
   min-height: 120rpx;
   margin-top: 14rpx;
   color: $ink;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   line-height: 1.55;
 }
 .cover-field {
@@ -631,14 +632,14 @@ onUnload(() => {
   display: block;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .cover-field__hint {
   display: block;
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -650,18 +651,18 @@ onUnload(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-receipt {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .field-error,
 .submit-error {
   margin-top: 10rpx;
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.5;
 }
 .access-rule {
@@ -670,7 +671,7 @@ onUnload(() => {
 .access-rule__label {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .access-rule__options {
@@ -684,7 +685,7 @@ onUnload(() => {
   border: 1rpx solid rgba(128, 89, 49, 0.34);
   border-radius: 12rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   text-align: center;
 }
 .access-rule__option--active {
@@ -726,7 +727,7 @@ onUnload(() => {
 .region-sheet__title {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 36rpx;
+  font-size: clamp(19px, 36rpx, 24px);
   font-weight: 700;
 }
 .region-sheet__picker {
@@ -745,7 +746,7 @@ onUnload(() => {
   width: 33.333%;
   padding: 24rpx 12rpx;
   color: $ink-muted;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   text-align: center;
 }
 .region-sheet__column-heading + .region-sheet__column-heading {
@@ -761,7 +762,7 @@ onUnload(() => {
   overflow: hidden;
   padding: 0 6rpx;
   color: $ink-muted;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 104rpx;
   text-align: center;
   text-overflow: ellipsis;
@@ -781,7 +782,7 @@ onUnload(() => {
   min-width: 116rpx;
   padding: 20rpx 10rpx;
   color: $ink-muted;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .region-sheet__confirm {
@@ -793,7 +794,7 @@ onUnload(() => {
   border-radius: 10rpx;
   background: $brand-red;
   color: #fff;
-  font-size: 29rpx;
+  font-size: clamp(16px, 29rpx, 20px);
   font-weight: 700;
   line-height: 82rpx;
 }

pages/genealogy/g05-genealogy-overview.vue

@@ -428,14 +428,18 @@ const applyToJoin = () => {
   if (!publicCanApply.value) return false;
   return openPage(
     "G08",
-    { genealogyId: genealogyId.value, source: "search" },
+    {
+      genealogyId: genealogyId.value,
+      genealogyName: genealogy.name,
+      source: "search",
+    },
     "G05",
   );
 };
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .overview-page {
   display: flex;
   min-height: 100vh;
@@ -446,7 +450,7 @@ const applyToJoin = () => {
   z-index: 3;
 }
 .overview-surface {
-  @include adaptive.adaptive-g05-overview-surface;
+  @include adaptive-g05-overview-surface;
   z-index: 2;
   width: 100%;
   min-height: min(483px, calc(100vw * 1.3422));
@@ -509,28 +513,23 @@ const applyToJoin = () => {
 .overview-hero__kicker {
   display: block;
   color: #dec483;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.5;
 }
 .overview-hero__title {
   display: block;
   margin-bottom: 6rpx;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 42rpx;
+  font-size: clamp(22px, 42rpx, 28px);
   font-weight: 700;
   letter-spacing: 2rpx;
 }
 .overview-hero__motto {
   display: block;
-  height: 66rpx;
   margin-top: 22rpx;
   color: #e9dcc1;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.55;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
 }
 .overview-hero__stats {
   display: flex;
@@ -538,7 +537,7 @@ const applyToJoin = () => {
   gap: 8rpx 0;
   margin-top: 18rpx;
   color: #dbc990;
-  font-size: 19rpx;
+  font-size: clamp(13px, 19rpx, 16px);
   line-height: 1.4;
 }
 .overview-hero__stats text {
@@ -571,7 +570,7 @@ const applyToJoin = () => {
   border-top: 1rpx solid rgba(152, 119, 72, 0.28);
   box-sizing: border-box;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.5;
 }
 .overview-action--tree {
@@ -618,11 +617,11 @@ const applyToJoin = () => {
   margin-bottom: 5rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .overview-action--tree .overview-action__title {
-  font-size: 40rpx;
+  font-size: clamp(20px, 40rpx, 26px);
 }
 .overview-summary {
   grid-template-columns: minmax(0, 1fr);
@@ -637,7 +636,7 @@ const applyToJoin = () => {
   padding: 20rpx 0;
   border-top: 1rpx solid rgba(152, 119, 72, 0.28);
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.5;
 }
 .overview-family text {
@@ -647,7 +646,7 @@ const applyToJoin = () => {
   margin-bottom: 3rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   font-weight: 700;
 }
 .overview-note {
@@ -657,18 +656,18 @@ const applyToJoin = () => {
   padding: 18rpx 0 0;
   border-top: 1rpx solid rgba(152, 119, 72, 0.28);
   color: $ink-muted;
-  font-size: 19rpx;
+  font-size: clamp(13px, 19rpx, 16px);
   line-height: 1.55;
 }
 .overview-note__title {
   margin-bottom: 5rpx;
   color: $brand-red;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .overview-state {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   display: flex;
   width: 100%;
   min-height: 0;
@@ -699,14 +698,14 @@ const applyToJoin = () => {
   margin-top: 28rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 42rpx;
+  font-size: clamp(22px, 42rpx, 28px);
   font-weight: 700;
 }
 .overview-state-panel__copy {
   max-width: 520rpx;
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   line-height: 1.7;
 }
 .overview-state-panel__action {
@@ -722,7 +721,7 @@ const applyToJoin = () => {
 .overview-state-panel__action text {
   z-index: 1;
   color: #fff9ed;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .overview-public {
@@ -740,14 +739,14 @@ const applyToJoin = () => {
 .overview-public__eyebrow {
   display: block;
   color: #dec483;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   letter-spacing: 3rpx;
 }
 .overview-public__title {
   display: block;
   margin-top: 10rpx;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 43rpx;
+  font-size: clamp(22px, 43rpx, 28px);
   font-weight: 700;
   letter-spacing: 4rpx;
 }
@@ -755,7 +754,7 @@ const applyToJoin = () => {
   display: block;
   margin-top: 7rpx;
   color: #e9dcc1;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .overview-public__details {
   display: grid;
@@ -785,13 +784,13 @@ const applyToJoin = () => {
 }
 .overview-public__details text:first-child {
   color: $brand-red;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .overview-public__details text:last-child {
   margin-top: 6rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
 }
 .overview-public__trust {
   display: grid;
@@ -799,15 +798,15 @@ const applyToJoin = () => {
   gap: 10rpx 24rpx;
   margin: 28rpx 9% 0;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
 }
 .overview-public__notice {
   display: flex;
   margin: 54rpx 9% 0;
   color: $ink-muted;
-  font-size: 19rpx;
-  line-height: 26rpx;
+  font-size: clamp(13px, 19rpx, 16px);
+  line-height: max(1.35em, clamp(16px, 26rpx, 20px));
 }
 .overview-public__notice text:first-child {
   flex: 0 0 auto;
@@ -827,7 +826,7 @@ const applyToJoin = () => {
 .overview-public__action text {
   z-index: 1;
   color: #fff9ed;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   font-weight: 700;
   letter-spacing: 3rpx;
 }

pages/genealogy/g06-search-genealogies.vue

@@ -111,7 +111,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .search-page {
   display: flex;
   min-height: 100vh;
@@ -128,7 +128,7 @@ onUnload(() => {
 .search-note,
 .state-card,
 .genealogy-card {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
 }
 .search-note {
   display: flex;
@@ -140,13 +140,13 @@ onUnload(() => {
 .search-note text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .search-note text:last-child {
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .state-card {
   display: flex;
@@ -158,7 +158,7 @@ onUnload(() => {
   padding: 42rpx;
   text-align: center;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .state-card .app-button {
   width: 100%;
@@ -182,20 +182,20 @@ onUnload(() => {
 .card-heading text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
   overflow-wrap: anywhere;
 }
 .card-heading text:last-child {
   flex: 0 0 auto;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .card-meta,
 .card-copy {
   display: block;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.5;
 }
 .card-meta {
@@ -211,7 +211,7 @@ onUnload(() => {
   gap: 18rpx;
   margin-top: 20rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .card-footer .app-button {
   min-width: 180rpx;

pages/genealogy/g08-join-application.vue

@@ -171,7 +171,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .join-page {
   display: flex;
   min-height: 100vh;
@@ -187,7 +187,7 @@ onUnmounted(() => {
 }
 .state-card,
 .join-form {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
 }
 .state-card {
   min-height: 340rpx;
@@ -201,13 +201,13 @@ onUnmounted(() => {
 .form-heading text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button,
@@ -226,7 +226,7 @@ onUnmounted(() => {
 }
 .form-heading text:last-child {
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
 }
 .form-field {
   margin-top: 22rpx;
@@ -234,19 +234,19 @@ onUnmounted(() => {
 .form-field > text {
   display: block;
   color: $ink;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .form-field input,
 .form-field textarea {
-  @include adaptive.adaptive-genealogy-form-field;
+  @include adaptive-genealogy-form-field;
   box-sizing: border-box;
   display: block;
   width: 100%;
   margin-top: 10rpx;
   padding: 16rpx 22rpx;
   color: $ink;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
 }
 .form-field input {
   min-height: 76rpx;
@@ -261,7 +261,7 @@ onUnmounted(() => {
   display: block;
   margin-top: 16rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.45;
 }
 </style>

pages/genealogy/g09-my-applications.vue

@@ -74,7 +74,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .applications-page {
   display: flex;
   min-height: 100vh;
@@ -93,7 +93,7 @@ onUnload(() => {
   min-height: 340rpx;
   padding: 78rpx 52rpx 50rpx;
   text-align: center;
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
 }
 .state-card text {
   display: block;
@@ -101,13 +101,13 @@ onUnload(() => {
 .state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {

pages/genealogy/g10-application-review.vue

@@ -86,7 +86,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .review-page {
   display: flex;
   min-height: 100vh;
@@ -105,7 +105,7 @@ onUnload(() => {
   min-height: 340rpx;
   padding: 78rpx 52rpx 50rpx;
   text-align: center;
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
 }
 .state-card text {
   display: block;
@@ -113,13 +113,13 @@ onUnload(() => {
 .state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {

pages/genealogy/g11-genealogy-settings.vue

@@ -513,7 +513,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .settings-page {
   display: flex;
@@ -531,7 +531,7 @@ onUnload(() => {
 }
 .settings-card,
 .state-card {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   box-sizing: border-box;
 }
 .settings-card {
@@ -546,13 +546,13 @@ onUnload(() => {
 .settings-card__title {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 40rpx;
+  font-size: clamp(20px, 40rpx, 26px);
   font-weight: 700;
 }
 .settings-card__note {
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.55;
 }
 .field-row {
@@ -566,18 +566,19 @@ onUnload(() => {
   background: rgba(255, 252, 245, 0.7);
 }
 .field-row__label {
-  width: 142rpx;
+  width: 184rpx;
   flex: 0 0 auto;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
+  white-space: nowrap;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 1;
   transform: translateY(-3rpx);
 }
@@ -585,7 +586,7 @@ onUnload(() => {
   min-width: 0;
   flex: 1;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .field-row--selector {
   justify-content: space-between;
@@ -595,7 +596,7 @@ onUnload(() => {
   min-width: 0;
   flex: 1;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: right;
   overflow-wrap: anywhere;
 }
@@ -616,7 +617,7 @@ onUnload(() => {
   display: block;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .intro-field textarea {
@@ -625,7 +626,7 @@ onUnload(() => {
   min-height: 120rpx;
   margin-top: 14rpx;
   color: $ink;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   line-height: 1.55;
 }
 .cover-field {
@@ -636,7 +637,7 @@ onUnload(() => {
   display: block;
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -648,18 +649,18 @@ onUnload(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-receipt {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .field-error,
 .submit-error {
   margin-top: 10rpx;
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.5;
 }
 .access-rule {
@@ -668,7 +669,7 @@ onUnload(() => {
 .access-rule__label {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .access-rule__options {
@@ -682,7 +683,7 @@ onUnload(() => {
   border: 1rpx solid rgba(128, 89, 49, 0.34);
   border-radius: 12rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   text-align: center;
 }
 .access-rule__option--active {
@@ -705,13 +706,13 @@ onUnload(() => {
 .state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {
@@ -744,7 +745,7 @@ onUnload(() => {
   display: block;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 36rpx;
+  font-size: clamp(19px, 36rpx, 24px);
   font-weight: 700;
 }
 .region-sheet__picker {
@@ -762,7 +763,7 @@ onUnload(() => {
   width: 33.333%;
   padding: 24rpx 12rpx;
   color: $ink-muted;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   text-align: center;
 }
 .region-sheet__column-heading + .region-sheet__column-heading {
@@ -777,7 +778,7 @@ onUnload(() => {
   height: 104rpx;
   padding: 0 6rpx;
   color: $ink-muted;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 104rpx;
   text-align: center;
   text-overflow: ellipsis;
@@ -797,7 +798,7 @@ onUnload(() => {
   min-width: 116rpx;
   padding: 20rpx 10rpx;
   color: $ink-muted;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .region-sheet__confirm {
@@ -809,7 +810,7 @@ onUnload(() => {
   border-radius: 10rpx;
   background: $brand-red;
   color: #fff;
-  font-size: 29rpx;
+  font-size: clamp(16px, 29rpx, 20px);
   font-weight: 700;
   line-height: 82rpx;
 }

pages/genealogy/g12-generation-poems.vue

@@ -411,7 +411,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .poem-page {
   display: flex;
   min-height: 100vh;
@@ -422,7 +422,7 @@ onUnload(() => {
   z-index: 3;
 }
 .poem-panel {
-  @include adaptive.adaptive-genealogy-state-panel;
+  @include adaptive-genealogy-state-panel;
   z-index: 2;
   width: calc(100% - 32rpx);
   margin: 18rpx auto 0;
@@ -440,7 +440,7 @@ onUnload(() => {
 .poem-list__eyebrow {
   display: block;
   color: $brand-red;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   letter-spacing: 3rpx;
 }
 .poem-list__title {
@@ -448,14 +448,14 @@ onUnload(() => {
   margin-top: 11rpx;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .poem-list__copy {
   display: block;
   margin-top: 10rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.55;
 }
 .poem-rows {
@@ -472,11 +472,11 @@ onUnload(() => {
 }
 .poem-load-more text {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .poem-row {
-  @include adaptive.adaptive-genealogy-form-field;
+  @include adaptive-genealogy-form-field;
   display: grid;
   min-height: 72rpx;
   margin-top: 10rpx;
@@ -488,7 +488,7 @@ onUnload(() => {
   grid-column: 1;
   margin-left: 24rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .poem-row__character {
   z-index: 1;
@@ -497,7 +497,7 @@ onUnload(() => {
   padding: 12rpx 16rpx 12rpx 0;
   color: $ink;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
+  font-size: clamp(17px, 32rpx, 22px);
   font-weight: 700;
   line-height: 1.4;
   overflow-wrap: anywhere;
@@ -508,7 +508,7 @@ onUnload(() => {
   grid-column: 3;
   margin-right: 22rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .poem-row--disabled .poem-row__character,
 .poem-row--disabled .poem-row__status {
@@ -537,12 +537,12 @@ onUnload(() => {
   justify-content: center;
   height: 100%;
   color: #fff9ed;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 700;
   letter-spacing: 2rpx;
 }
 .poem-field {
-  @include adaptive.adaptive-genealogy-form-field;
+  @include adaptive-genealogy-form-field;
   display: grid;
   min-height: 118rpx;
   margin-top: 22rpx;
@@ -553,7 +553,7 @@ onUnload(() => {
   align-self: center;
   margin-left: 24rpx;
   color: $ink;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   font-weight: 700;
 }
 .poem-field textarea {
@@ -567,7 +567,7 @@ onUnload(() => {
   margin-left: 164rpx;
   padding-top: 34rpx;
   color: $ink;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.5;
 }
 .poem-placeholder {
@@ -577,8 +577,8 @@ onUnload(() => {
   display: block;
   margin-top: 4rpx;
   color: $brand-red;
-  font-size: 24rpx;
-  line-height: 34rpx;
+  font-size: clamp(15px, 24rpx, 18px);
+  line-height: max(1.35em, clamp(19px, 34rpx, 24px));
   text-align: right;
 }
 .poem-policy {
@@ -589,7 +589,7 @@ onUnload(() => {
 }
 .poem-policy > text {
   color: $ink;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .poem-policy__option {
@@ -610,7 +610,7 @@ onUnload(() => {
   justify-content: center;
   height: 100%;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .poem-policy__option .poem-policy__option-text--active {
@@ -620,7 +620,7 @@ onUnload(() => {
   display: block;
   margin-top: 22rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   line-height: 1.6;
 }
 .poem-editor__actions {
@@ -668,7 +668,7 @@ onUnload(() => {
 .poem-feedback text {
   z-index: 1;
   color: $ink;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 @media (min-width: 400px) {
   .poem-panel {