:root {
  --phone-w: min(100vw, 438px);
  --phone-h: calc(var(--phone-w) * 902 / 440);
  --ink: #5f2f20;
  --ink-soft: #815544;
  --gold: #b77a36;
  --gold-soft: #ddb67d;
  --red: #8f2f22;
  --red-deep: #6e1d14;
  --paper: #f8ead7;
  --paper-2: #edd7bb;
  --shadow: 0 14px 36px rgba(34, 11, 7, 0.32);
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-display: "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  --font-title: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-name: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 🚀 核心修复：用黑色兜底，防止出现白边。放宽高度限制，解决底部被裁切问题 */
html, body { 
  margin: 0; 
  padding: 0;
  width: 100%;
  /* 移除 height: 100% 和 overflow: hidden，让它自然延展 */
  background-color: #ffffff; /* 强行黑色兜底，避免任何白块 */
  overscroll-behavior-y: none; /* 依然保留这句，防止 iOS 橡皮筋回弹 */
  -webkit-overflow-scrolling: auto; 
}

body {
  font-family: var(--font-ui);
  background: radial-gradient(circle at top, #2a0c08 0%, #130504 48%, #070202 100%);
  color: var(--ink);
  touch-action: pan-y;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.home-stage {
  position: relative;
  width: min(100vw, 450px);
  max-width: 450px;
  aspect-ratio: 549 / 1130;
  height: auto;
  max-height: none;
  overflow: visible;
  margin: 0 auto;
}

.home-stage__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 0;
}
/* 4. 所有的浮动层基础设置 */
.layer {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 10;
}

/* =========================
   第一块：统计区
   ========================= */
.stats-layer {
  position: absolute;
  top: 17%;    
  height: 9%; 
  left: 13%;
  width: 68.18%;
  padding: 2;
  box-sizing: border-box;
}

/* =========================
   第二块：个人官牒
   ========================= */
.profile-layer {
  position: absolute;
  top: 25.5%;    
  height: 16%;
  left: 6%;
  width: 88%;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ==========================================================
   第三块：横向滑动牌匾系统 (价值观)
   ========================================================== */
.engine-layer {
  position: absolute;
  top: 44%;    
  height: 18%; 
  left: 7.95%;
  width: 84.09%; 
  padding: 10px 0; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center; 
}

/* =========================
   第四块：启动区
   ========================= */
.launch-layer {
  position: absolute;
  top: 63%;    
  height: 23%; 
  left: 10%; 
  width: 80%; 
  padding: 10px 14px; 
  box-sizing: border-box;
  display: flex; 
  flex-direction: column; 
  justify-content: space-around; 
}

.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  row-gap: 12px;
  padding: 6px 10px 24px;
  box-sizing: border-box;
}

.stats-grid::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 30px;
  left: 51%;
  width: 1px;
  height:48px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom, rgba(243, 219, 175, 0), rgba(243, 219, 175, 0.72) 18%, rgba(243, 219, 175, 0.72) 82%, rgba(243, 219, 175, 0));
  pointer-events: none;
}

.stats-grid::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 47%;
  height: 1px;
  transform: translateY(-6px);
  background: linear-gradient(to right, rgba(243, 219, 175, 0), rgba(243, 219, 175, 0.68) 16%, rgba(243, 219, 175, 0.68) 84%, rgba(243, 219, 175, 0));
  pointer-events: none;
}

.stat-item {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #f7e8ca;
  text-shadow: 0 1px 2px rgba(50, 13, 7, 0.34);
  white-space: nowrap;
}

.stat-item__label { font-size: 13px; line-height: 18px; font-weight: 500; color: #f0d2a2; flex-shrink: 0; }
.stat-item__value { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.01em; color: #f2dcb0; }


.profile-top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 138px;
}

.avatar-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  margin-left: 2px;
  margin-top: 12px;
  border-radius: 50%;
  overflow: visible;
}

.avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ead2a0 0%, #c9924f 100%);
  box-shadow: 0 2px 5px rgba(63, 23, 12, 0.12), inset 0 1px 1px rgba(255,255,255,0.22);
  z-index: 0;
}

.avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 238, 219, 0.9);
  box-shadow: inset 0 0 0 1px rgba(187, 138, 84, 0.28);
  z-index: 1;
}

.avatar, .avatar-fallback {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  z-index: 2;
}

.avatar { object-fit: cover; display: block; }

.avatar-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #b8894c 0%, #8f5f33 100%);
  color: #fff4e1;
  font-size: 30px;
  font-family: var(--font-display);
  font-weight: 700;
}

.avatar-ornament {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #f4d8a3 0%, #c98b45 100%);
  box-shadow: 0 1px 3px rgba(67, 25, 12, 0.14);
  z-index: 3;
}

.avatar-ornament::before, .avatar-ornament::after {
  content: ""; position: absolute; top: 4px; width: 8px; height: 1px;
  background: linear-gradient(to right, rgba(203,155,88,0), rgba(203,155,88,0.78));
}
.avatar-ornament::before { right: 100%; margin-right: 2px; }
.avatar-ornament::after { left: 100%; margin-left: 2px; transform: scaleX(-1); }

.profile-main { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  margin-top: 12px; 
}

.name-row {
  position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 12px; padding-bottom: 10px;
}

.name-row::after {
  content: ""; position: absolute; left: 0; right: 6px; bottom: 0; height: 1px;
  background: linear-gradient(to right, rgba(193, 147, 97, 0), rgba(193, 147, 97, 0.42) 12%, rgba(193, 147, 97, 0.42) 88%, rgba(193, 147, 97, 0));
}

.profile-name {
  margin: 0; white-space: nowrap; font-size: 25px; line-height: 1; font-weight: 1200; color: #4b2418;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

.rank-seal {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 95px; height: 25px; padding: 0 18px; box-sizing: border-box;
  background: linear-gradient(180deg, #d6ab73 50%, #bf8447 100%);
  box-shadow: 0 1px 3px rgba(75, 24, 12, 0.10), inset 0 1px 0 rgba(255, 241, 222, 0.28);
  clip-path: polygon(7% 0%, 93% 0%, 100% 20%, 100% 80%, 93% 100%, 7% 100%, 0% 80%, 0% 20%);
}

.rank-seal::before {
  content: ""; position: absolute; inset: 2px 3px; background: linear-gradient(#A84025 50%); z-index: 0;
  clip-path: polygon(7% 0%, 93% 0%, 100% 20%, 100% 80%, 93% 100%, 7% 100%, 0% 80%, 0% 20%);
  box-shadow: inset 0 1px 0 rgba(255, 223, 196, 0.16), inset 0 -1px 0 rgba(101, 28, 18, 0.16);
}

.rank-seal::after {
  content: ""; position: absolute; inset: 1px 6px; border: 1px solid rgba(244, 210, 168, 0.34); z-index: 1; pointer-events: none;
  clip-path: polygon(7% 0%, 93% 0%, 100% 20%, 100% 80%, 93% 100%, 7% 100%, 0% 80%, 0% 20%);
}

.rank-seal__text {
  position: relative; z-index: 2; font-size: 12px; line-height: 1; font-weight: 1000; color: #fff2de; letter-spacing: 1px; white-space: nowrap; font-family: var(--font-name);
}

.profile-meta-row { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 4px; }
.profile-meta-row--1, .profile-meta-row--2 { font-size: 12px; line-height: 1.4; }
.profile-meta-row--1 { margin-bottom: 10px; }
.profile-meta-row--2 { margin-bottom: 0; justify-content: flex-start; }

.meta-item { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.meta-item--rank { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.label { white-space: nowrap; color: #8a5c46; font-size: 12px; font-weight: 400; }
.value { white-space: nowrap; color: #a03222; font-size: 12px; font-weight: 700; }
.value.accent { color: #a03222; }
.rank-number { display: inline-block; white-space: nowrap; font-size: 12px; line-height: 1; font-weight: 800; color: #a03222; }
.divider { color: #a03222; margin: 0 2px; font-size: 12px; }
.nowrap { white-space: nowrap; }

.engine-scroll-area { margin: 0; }
.value-plaque { padding: 8px; }
.btn-adjust { margin-top: 0; height: 32px; }

.new-engine-panel {
  /* 把底部的 padding 清零，给按钮腾出往下掉的空间 */
  padding: 5px 0px 0px; 
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.engine-scroll-area {
  width: 102%;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  /* 🚀 核心修复 2：减小牌匾底部的下巴厚度（原为 15px） */
  padding: 5px 0px 5px 1px; 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  -webkit-overflow-scrolling: touch; 
  pointer-events: auto; 
}
.engine-scroll-area::-webkit-scrollbar { display: none; }

/* 牌匾样式保持不变 */
.value-plaque {
  flex: 0 0 auto;
  width: 130px; 
  height: 100px; 
  background-image: url('./assets/index_picture/牌匾样式.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative; 
}

.plaque-title {
  position: absolute; top: 13%; left: 50%; transform: translateX(-50%);
  width: 100%; text-align: center; font-size: 28px; font-weight: 800;
  color: #9c4128; font-family: var(--font-display); letter-spacing: 2px; line-height: 1;
}

.plaque-tag {
  position: absolute; left: 50%; transform: translateX(-50%) scale(0.9); 
  width: 80%; text-align: center; color: #fcecd7; font-size: 12px; font-weight: 500;
  letter-spacing: 1px; white-space: nowrap; background: transparent; border: none; box-shadow: none; padding: 0;
}
.plaque-tag-1 { top: 51%; }
.plaque-tag-2 { top: 75%; }

.engine-action-area {
  margin-top: auto;
  /* 🚀 核心一击：把 13px 改为负数（比如 -5px 或 -10px），强行把它往下拽！ */
  margin-bottom: -8px; 
  display: flex; align-items: center; justify-content: center; position: relative; padding: 0 10px; z-index: 10;
}
/* =========================================
     执行：统一移动“我要调整”按钮及两侧线条
     ========================================= */
  .engine-action-area {
    margin-bottom: 2px !important; 
    transform: translateY(var(--hw-action-row-y)) !important;
  }
.engine-action-area::after { background: linear-gradient(to left, rgba(163, 119, 84, 0), rgba(163, 119, 84, 0.5)); }

.adjust-btn-new {
  background: transparent; border: none; padding: 0; margin: 0 10px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.2s; position: relative; z-index: 50; 
}
.adjust-btn-new:active { transform: scale(0.95); }
.adjust-btn-icon {
  height: 28px; width: auto; object-fit: contain; display: block; transition: filter 0.2s ease; 
}
.adjust-btn-new:active .adjust-btn-icon { filter: brightness(0.8); }

.filter-row { margin-bottom: 0; }
.mode-btn { height: 42px; margin-bottom: 0; }

.launch-head {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; margin-bottom: 14px;
  display: none; 
}

.launch-head__divider { font-size: 18px; line-height: 1; color: rgba(150, 104, 68, 0.72); transform: translateY(-1px); }

.launch-selector {
  position: relative; height: 34px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(247, 236, 218, 0.88) 0%, rgba(235, 218, 193, 0.78) 100%);
  border: 1px solid rgba(194, 152, 107, 0.58); color: #5c2f1f;
  clip-path: polygon(6% 0%, 94% 0%, 100% 22%, 100% 78%, 94% 100%, 6% 100%, 0% 78%, 0% 22%);
  box-shadow: inset 0 1px 0 rgba(255, 247, 235, 0.45), 0 1px 2px rgba(72, 27, 13, 0.06);
}

.launch-selector::before {
  content: ""; position: absolute; inset: 2px 3px; border: 1px solid rgba(220, 188, 150, 0.24);
  clip-path: polygon(6% 0%, 94% 0%, 100% 22%, 100% 78%, 94% 100%, 6% 100%, 0% 78%, 0% 22%); pointer-events: none;
}

.launch-selector-wrap { position: relative; }

.launch-menu {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; min-width: 156px;
  background: linear-gradient(180deg, rgba(247, 237, 220, 0.96) 0%, rgba(236, 219, 193, 0.94) 100%);
  border: 1px solid rgba(194, 152, 107, 0.52); border-radius: 8px;
  box-shadow: 0 8px 16px rgba(65, 28, 14, 0.12), inset 0 1px 0 rgba(255, 247, 235, 0.42);
  overflow: hidden; z-index: 30;
}

.launch-menu__item {
  width: 100%; display: block; border: none; background: transparent; color: #5c2f1f; text-align: left; padding: 10px 14px; font-size: 12px; line-height: 1.2; font-weight: 500; cursor: pointer; border-bottom: 1px solid rgba(212, 183, 146, 0.18);
}
.launch-menu__item:last-child { border-bottom: none; }
.launch-menu__item:hover { background: rgba(223, 194, 151, 0.34); color: #4a2417; }
.launch-menu__item.is-active { background: linear-gradient(180deg, rgba(219, 186, 139, 0.72) 0%, rgba(206, 168, 118, 0.82) 100%); color: #4a2417; font-weight: 700; }

.launch-selector__label, .launch-selector__value { position: relative; z-index: 1; }
.launch-selector__label { font-size: 11px; line-height: 1; color: #8f633f; white-space: nowrap; }
.launch-selector__value { font-size: 12px; line-height: 1; font-weight: 700; color: #4e2a1d; white-space: nowrap; }

.launch-copy-wrap { 
  display: none; 
}
.launch-copy-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(209, 170, 122, 0), rgba(209, 170, 122, 0.75) 35%, rgba(209, 170, 122, 0) 100%); position: relative; }
.launch-copy-line::after { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-radius: 50%; background: rgba(209, 170, 122, 0.82); transform: translateY(-50%); }
.launch-copy-wrap .launch-copy-line:first-child::after { left: 0; right: auto; }

.launch-copy { margin: 0; white-space: nowrap; text-align: center; font-size: 12px; line-height: 1.2; font-weight: 600; color: #4f2b1d; font-family: "STSong", "Songti SC", "SimSun", "Noto Serif CJK SC", serif; }

.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px;
  column-gap: 50px; row-gap: 20px; } 

.mode-btn { appearance: none; -webkit-appearance: none; border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; 
  display: block; width: 100%; line-height: 0;
   transition: transform 0.16s ease, filter 0.16s ease;
  transform: scale(1.2); 
}
.mode-btn__img { display: block; width: 100%; height: auto; object-fit: contain; 
  pointer-events: none; filter: drop-shadow(0 4px 7px rgba(76, 24, 12, 0.18)) drop-shadow(0 1px 1px rgba(255, 218, 180, 0.10));
   transition: transform 0.16s ease, filter 0.16s ease, brightness 0.16s ease; }
.mode-btn:hover .mode-btn__img { transform: translateY(-1px); 
  filter: brightness(1.04) drop-shadow(0 5px 8px rgba(76, 24, 12, 0.22)) drop-shadow(0 1px 1px rgba(255, 218, 180, 0.12)); }
.mode-btn:active .mode-btn__img { transform: translateY(1px) scale(0.992); 
  filter: brightness(0.97) drop-shadow(0 2px 3px rgba(76, 24, 12, 0.14)); }
.mode-btn:active, .adjust-btn:active, .select-card:active, .nation-link:active { transform: scale(0.985); }
.mode-btn--inactive {
  opacity: 1;
  filter: brightness(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 438px) {
  .home-stage { 
    width: 100vw; 
    height: auto; 
  }
}



/* ==========================================================
   第五块：底部返回入口
   ========================================================== */
.return-portal-layer {
  position: absolute;
  /* 🚀 控制按钮上下的位置：数值越大越往上，数值越小越往下 */
  bottom: 0%; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.return-portal-btn {
  background: transparent;
  color: rgba(140, 3, 3, 0.904); /* 半透明白色，完美融入深色火焰背景 */
  font-size: 22px;
  letter-spacing: 4px;
  padding: 8px 20px;
  font-weight:900;
  margin-bottom:-8px;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px rgba(249, 249, 249, 0.8); /* 增加一点阴影，保证在红底上能看清 */
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 按下时的反馈：变亮并轻微缩小 */
.return-portal-btn:active {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(0.95);
}

/* ==========================================================
   💻 【PC 端 / 大屏】全版块独立调控面板 (屏幕宽度 >= 768px)
   ========================================================== */
@media screen and (min-width: 481px) {
  :root {
    /* --- 1. 纵向位置分布 (数值越大越靠下) --- */
    --pc-stats-top: 17%;      /* [官方数据栏] 距离顶部高度 */
    --pc-profile-top: 25.5%;  /* [个人官牒区] 距离顶部高度 */
    --pc-engine-top: 47%;     /* [价值观牌匾] 距离顶部高度 */
    --pc-launch-top: 65.5%;   /* [模式启动台] 距离顶部高度 */

    /* --- 2. 横向安全布局 (内容区的呼吸感) --- */
    --pc-safe-w: 84%;         /* 内容区总宽度 (推荐 80%-88%) */
    --pc-safe-l: 8%;          /* 内容区左边距 (计算公式: [100-总宽度]/2) */

    /* --- 3. 官方数据栏列位移 (对齐背景暗纹竖线) --- */
    --pc-stats-left-pl: 28px; /* 左侧列（参与人数等）左缩进 */
    --pc-stats-right-pl: 8px; /* 右侧列（累计作品等）左缩进 */
    --pc-stats-gap: 30px;     /* 左右两列之间的物理间距 */

    /* --- 4. 价值观滚动优化 --- */
    --pc-scroll-right-pad: 35px; /* 滑动到底部时，最右侧卡片的留白距离 */
  }

  /* 执行逻辑：将变量映射至组件 */
  .stats-layer { top: var(--pc-stats-top) !important; width: var(--pc-safe-w) !important; left: var(--pc-safe-l) !important; }
  .profile-layer { top: var(--pc-profile-top) !important; width: var(--pc-safe-w) !important; left: var(--pc-safe-l) !important; padding: 0 !important; }
  .engine-layer { top: var(--pc-engine-top) !important; width: var(--pc-safe-w) !important; left: var(--pc-safe-l) !important; }
  .launch-layer { top: var(--pc-launch-top) !important; width: var(--pc-safe-w) !important; left: var(--pc-safe-l) !important; }

  .stats-grid { column-gap: var(--pc-stats-gap) !important; padding-left: 0 !important; }
  .stats-grid .stat-item:nth-child(odd) { padding-left: var(--pc-stats-left-pl) !important; }
  .stats-grid .stat-item:nth-child(even) { padding-left: var(--pc-stats-right-pl) !important; }
  .engine-scroll-area { padding-right: var(--pc-scroll-right-pad) !important; width: 102% !important; }
}



/* ==========================================================
   📱 【华为 / 窄屏安卓】终极全版块微调控制台 (<= 480px)
   ========================================================== */
@media screen and (max-width: 480px) {
  :root {
    /* --- 1. 核心四大版块位置 (X/Y轴精确定位) --- */
    
    /* 【官方数据栏】 */
    --hw-stats-top: 17%;     /* 上下位置 */
    --hw-stats-w: 90%;         /* 模块宽度 */
    --hw-stats-l: 5%;          /* 左右位置 (值越大越往右推) */

    /* 【个人官牒区】 */
    --hw-profile-top: 24.5%;
    --hw-profile-w: 88%;
    --hw-profile-l: 6%;

    /* 【价值观牌匾】 ⚠️ 手机端调这里，调 pc- 没用！ */
    --hw-engine-top: 46%;      
    --hw-engine-w: 80%;
    --hw-engine-l: 7%;

    /* 【模式启动台】 */
    --hw-launch-top: 64%;
    --hw-launch-w: 86%;
    --hw-launch-l: 7%;

    /* --- 2. 内部元素精细微调旋钮 --- */
    
    /* 📸 头像照片调整 */
    --hw-avatar-size: 70px;    /* 头像大小 */
    --hw-avatar-x: 10px;        /* 头像左右微调 (正数向右，负数向左) */
    --hw-avatar-y: -2px;        /* 头像上下微调 (正数向下，负数向上) */
    --hw-avatar-col-w: 88px;   /* 头像占用的列宽，影响右侧"姓名官职"的起始位置 */

    /* 🪧 价值观牌匾内部微调 */
    --hw-plaque-indent: 10px;  /* 第一张牌匾左侧的初始缩进距离 */
    --hw-plaque-gap: 12px;     /* 牌匾与牌匾之间的间距 */

    /* 🎛️ 底部模式按钮间距 */
    --hw-mode-col-gap: 26px;   /* 左右两列按钮的间距 */
    --hw-mode-row-gap: 12px;   /* 上下行按钮的间距 */

    /* 📊 官方数据栏内部文字 */
    --hw-stats-label: 12px;
    --hw-stats-value: 12px;
    --hw-stats-left-pl: 38px;
    --hw-stats-right-pl: 5px;

    /* 📝 官牒区文字 */
    --hw-meta-font: 11.5px;
    --hw-meta-gap: 2px;

  

  /* 🖱️ 模式按钮：独立图片大小（缩放）微调 */
    --hw-mode-btn-scale: 1.15;  /* 👈 补上具体的数值 */
    
    /* 🪧 价值观牌匾防裁切与内部微调 */
    --hw-plaque-h: 100px;       /* 牌匾整体高度 (原为 100px，适度拉高以容纳底部文字) */
    --hw-scroll-pb: 18px;       /* 滚动区底部缓冲边距 (防止被父容器一刀切) */
    --hw-tag2-top: 72%;         /* 底部第二行标签的Y轴位置 (若依然偏下，调小百分比往上提，如 68%) */

    /* 🔠 价值观牌匾内部文字独立微调 */
    --hw-plaque-title-size: 28px;   /* 主标题字号 (如"增长引擎"，原版为28px) */
    --hw-plaque-tag-size: 14px;     /* 小标签字号 (如"中华文明价值观"，原版为12px) */
    --hw-plaque-tag-scale: 0.85;    /* 小标签全局缩放比例 (原版为0.9，进一步缩小可防截断) */
    --hw-plaque-tag2-top: 76%;      /* 第二行标签高度 (向上提，远离危险边缘) */

    /* 🔠 牌匾内部间距精微调整 */
    --hw-tag1-top: 51%;      /* 第一行标签（如"中华文明价值观"）的位置。原为51%，调大则向下远离标题，调小则向上靠近。 */
    /* 🪧 价值观牌匾：整体等比缩放 (终极外挂) */
    --hw-plaque-scale: 0.9;  /* 1.0 为原始大小。调小(如0.85或0.8)可让整个牌匾无损微缩，彻底解决裁切与拥挤 */
 
  /* ✏️ “我要调整”整行(按钮+线条统一控制)：上下位移微调 */
    --hw-action-row-y: -10px;  /* 正数向下，负数向上。如果觉得和牌匾太近，就填正数往下移 */

  /* 🚀 价值观牌匾：根源防裁切与右侧视觉极限 */
    --hw-engine-layer-h: 22%;     /* [解开高度锁死] 将原有的18%放宽，给牌匾放大提供绝对的物理空间 */
    --hw-scroll-pb: 30px;         /* [底部防裁切垫] 大幅增加滚动区底部内边距，彻底托起牌匾 */
    --hw-scroll-w: 107%;          /* [右侧贴边延伸] 容器横向拉伸：数值越大，右侧被裁切的位置越靠屏幕右边缘 */
    --hw-scroll-pr: 50px;         /* [最右侧留白] 滑动到最后一张卡片时，预留的右侧缓冲空间 */
  }

  /* =========================================
     执行逻辑：强制将变量穿透映射至底层元素
     ========================================= */
  .stats-layer { top: var(--hw-stats-top) !important; width: var(--hw-stats-w) !important; left: var(--hw-stats-l) !important; }
  .profile-layer { top: var(--hw-profile-top) !important; width: var(--hw-profile-w) !important; left: var(--hw-profile-l) !important; padding: 0 !important; }
  .engine-layer { top: var(--hw-engine-top) !important; width: var(--hw-engine-w) !important; left: var(--hw-engine-l) !important; }
  .launch-layer { top: var(--hw-launch-top) !important; width: var(--hw-launch-w) !important; left: var(--hw-launch-l) !important; }

  /* 头像精调执行 */
  .profile-top { grid-template-columns: var(--hw-avatar-col-w) 1fr !important; }
  .avatar-wrap {
    width: var(--hw-avatar-size) !important;
    height: var(--hw-avatar-size) !important;
    transform: translate(var(--hw-avatar-x), var(--hw-avatar-y)) !important;
  }

  /* 牌匾缩进与间距执行 */
  .engine-scroll-area {
    padding-left: var(--hw-plaque-indent) !important;
    gap: var(--hw-plaque-gap) !important;
  }

  /* 模式按钮间距执行 */
  .mode-grid {
    column-gap: var(--hw-mode-col-gap) !important;
    row-gap: var(--hw-mode-row-gap) !important;
  }

  /* 其他已有文字排版逻辑保留 */
  .profile-meta-row { gap: var(--hw-meta-gap) !important; flex-wrap: nowrap !important; }
  .label, .value { font-size: var(--hw-meta-font) !important; letter-spacing: -0.2px; white-space: nowrap; }
  .divider { margin: 0 1px !important; transform: scale(0.6); }
  .stats-grid .stat-item__label { font-size: var(--hw-stats-label) !important; }
  .stats-grid .stat-item__value { font-size: var(--hw-stats-value) !important; }
  .stats-grid { padding-left: 0 !important; }
  .stats-grid .stat-item:nth-child(odd) { padding-left: var(--hw-stats-left-pl) !important; }
  .stats-grid .stat-item:nth-child(even) { padding-left: var(--hw-stats-right-pl) !important; }




  /* 执行模式按钮的独立缩放 */
  .mode-btn {
    transform: scale(var(--hw-mode-btn-scale)) !important;
    transform-origin: center center; /* 确保以中心点缩放，不跑位 */
  }

  /* =========================================
     执行：修复价值观牌匾底部裁切问题
     ========================================= */
  .value-plaque {
    height: var(--hw-plaque-h) !important;
  }
  
  .engine-scroll-area {
    padding-bottom: var(--hw-scroll-pb) !important;
  }
  
  .plaque-tag-2 {
    top: var(--hw-tag2-top) !important;
  }

  /* =========================================
     执行：价值观牌匾文字极限防裁切
     ========================================= */
  .value-plaque .plaque-title {
    font-size: var(--hw-plaque-title-size) !important;
  }

  .value-plaque .plaque-tag {
    font-size: var(--hw-plaque-tag-size) !important;
    /* 核心修复：保留居中定位的同时，应用独立的缩放变量 */
    transform: translateX(-50%) scale(var(--hw-plaque-tag-scale)) !important;
    /* 放宽容器物理限制，配合缩放让文字彻底舒展 */
    width: 96% !important; 
    white-space: nowrap !important;
  }

  .value-plaque .plaque-tag-2 {
    top: var(--hw-plaque-tag2-top) !important;
  }

  /* 执行：价值观牌匾整体等比缩放 */
  .value-plaque {
    zoom: var(--hw-plaque-scale) !important;
  }

  /* 执行：“我要调整”两侧分割线的独立位移 */
  .engine-action-area::before,
  .engine-action-area::after {
    transform: translateY(var(--hw-adjust-line-offset-y)) !important;
  }

/* =========================================
     执行：解除比例死锁，强制背景上下拉伸填满 (修复白屏塌陷)
     ========================================= */
  .app-shell {
    min-height: var(--sscd-real-vh, 100dvh) !important;
    height: auto !important;
  }

  .home-stage {
    aspect-ratio: auto !important; 
    width: 100% !important;
    height: var(--sscd-real-vh, 100dvh) !important;
    min-height: 100svh !important;
    align-self: stretch !important;
  }

  .home-stage__bg {
    height: 100% !important; 
    object-fit: fill !important;   /* 强制图片拉伸填满 */
  }

  /* =========================================
     执行：根治牌匾裁切，突破尺寸与右侧边缘限制
     ========================================= */
  .engine-layer {
    height: var(--hw-engine-layer-h) !important;
  }
  
  .engine-scroll-area {
    padding-bottom: var(--hw-scroll-pb) !important;
    width: var(--hw-scroll-w) !important;
    padding-right: var(--hw-scroll-pr) !important;
  }

  

  /* =========================================
     执行：根治牌匾裁切，突破尺寸与右侧边缘限制
     ========================================= */
  .engine-layer {
    height: var(--hw-engine-layer-h) !important;
  }
  
  .engine-scroll-area {
    padding-bottom: var(--hw-scroll-pb) !important;
    width: var(--hw-scroll-w) !important;
    padding-right: var(--hw-scroll-pr) !important;
  }

  .app-shell {
  min-height: var(--sscd-real-vh, 100dvh);
}

.home-stage {
  flex-shrink: 0;
}

.return-portal-layer {
  bottom: calc(env(safe-area-inset-bottom) + 5px);
  z-index: 60;
}