/* ============================================================
   道场 · 修仙养成 - 干净CSS架构 v20260327-multiplatform
   原则：自然流式、无强制覆盖、无保底机制
   ============================================================ */

/* ===== 字体 ===== */
@font-face {
  font-family: 'JiangXiZhuoKai';
  src: url('fonts/subset/江西拙楷2.0.woff2') format('woff2'),
       url('fonts/subset/江西拙楷2.0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== 重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== 公共工具类 ===================================================
   从index.html提取的公共内联样式
   ======================================================================= */

/* 全屏遮罩层 */
.modal-mask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
}

/* 居中弹窗 */
.modal-box {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 501;
}

/* 页面容器（全屏固定） */
.page-fixed {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* ===== 多端适配基础层 ===================================================
   覆盖目标：H5手机、微信小程序WebView、抖音小程序WebView、未来APP
   ======================================================================= */

/* 1. 根字号 — 统一 em 基准，不受平台默认字号影响 */
html {
  height: 100%;
  /* vw方案: 1vw = 7.5px, 750px设计稿 */
}

/* 2. body — 禁止横向溢出，撑满安全区 */
body {
  font-family: 'JiangXiZhuoKai', 'Microsoft YaHei', 'SimHei', sans-serif;
  background: #000;
  color: #ecf0f1;
  min-height: 100%;
  min-height: 100dvh; /* 动态视口高度，兼容微信/抖音WebView地址栏 */
  overflow-x: hidden;
  /* 底部安全区（iPhone Home Bar / 安卓手势条） */
  padding-bottom: env(safe-area-inset-bottom, 0 /* 0px */);
}

/* 3. 容器层 — vw方案: 100vw = 750px设计稿宽度 */
.container {
  width: 100vw /* 750px */;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  /* 允许内容滚动 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 大屏限制最大宽度，居中显示 */
@media screen and (min-width: 751px) {
  .container {
    width: 750px;
    max-width: 750px;
  }
}

/* 隐藏滚动条 */
.container::-webkit-scrollbar {
  display: none;
}
.container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 4. fixed 层安全区 — 所有 position:fixed 底部元素统一用此变量 */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0 /* 0px */);
  --safe-top:    env(safe-area-inset-top,    0 /* 0px */);
  /* 视口高度：优先 dvh（动态高度），降级 100vh */
  --vh: 100dvh;
}
@supports not (height: 100dvh) {
  :root { --vh: 100vh; }
}

/* 5. 全页背景图高度 — 用变量替代 100vh，避免微信WebView偏差 */
#mainPage .img-bg-main {
  height: var(--vh);
}

/* 6. 触摸目标：禁用双击缩放，提升响应速度（全局安全） */
button, .img-hotspot, .tab-btn, .pf-item, .tm-step, .img-back-btn {
  touch-action: manipulation;
}
/* 文字型列表/步骤按钮才强制最小高度，圆形图标按钮不加（否则会变椭圆） */
.tab-btn, .pf-item, .tm-step {
  min-height: 5.8667vw /* 44px */;
}

/* ===== 基础层：html/body 自然撑开（保留兼容旧规则的注释位） ===== */


    /* ===== 输入卡片 ===== */
    .input-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vw /* 18px */; margin-bottom: 3.7333vw /* 28px */; }
    @media(max-width:80vw /* 600px */){ .input-section{ grid-template-columns:1fr; } }

    .card {
      background: rgba(255,255,255,0.07);
      border-radius: 1.6vw /* 12px */; padding: 2.6667vw /* 20px */;
      border: 1px solid rgba(255,255,255,0.14);
      transition: all 0.3s;
    }
    .card:hover { transform: translateY(-0.0417rem /* -2px */); box-shadow: 0 1.0667vw /* 8px */ 2.6667vw /* 20px */ rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.28); }
    .card-title { font-size: 3.5vw /* 26px - 750设计更大 */; color: #f39c12; margin-bottom: 1.8667vw /* 14px */; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 1.0667vw /* 8px */; display: flex; align-items: center; gap: 1.0667vw /* 8px */; }

    .form-label { display: block; margin-bottom: 0.6667vw /* 5px */; color: #95a5a6; font-size: 3vw /* 22.5px - 750设计更大 */; }
    .form-group { margin-bottom: 1.8667vw /* 14px */; }
    .form-input {
      width: 100%; padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 0.8vw /* 6px */; background: rgba(0,0,0,0.3);
      color: #ecf0f1; font-size: 0.97em;
    }
    .form-input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0.6667vw /* 5px */ rgba(230,126,34,0.5); }
    .radio-group { display: flex; gap: 2.4vw /* 18px */; margin-top: 0.5333vw /* 4px */; flex-wrap: wrap; }
    .radio-label { display: flex; align-items: center; gap: 1vw /* 7.5px */; cursor: pointer; font-size: 3.2vw /* 24px - 更大单选标签 */; }


    /* ===== 竖排八字排盘 ===== */
    .bazi-v-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.8vw /* 6px */;
      margin-top: 1.8667vw /* 14px */;
    }
    .bazi-v-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(0,0,0,0.28);
      border-radius: 1.0667vw /* 8px */;
      padding: 1.0667vw /* 8px */ 0.5333vw /* 4px */ 1.3333vw /* 10px */;
      border: 1px solid rgba(200,160,60,0.18);
      gap: 0.2667vw /* 2px */;
    }
    .bazi-v-col-day {
      background: rgba(200,140,30,0.13);
      border-color: rgba(240,180,60,0.45);
    }
    .bazi-v-pillar-label {
      font-size: 0.72em;
      color: rgba(200,170,100,0.75);
      letter-spacing: 0.05em;
      margin-bottom: 0.5333vw /* 4px */;
      font-weight: bold;
    }
    .bazi-v-shishen {
      font-size: 0.65em;
      color: rgba(200,170,100,0.6);
      letter-spacing: 0.02em;
      min-height: 1.8667vw /* 14px */;
      line-height: 1;
    }
    .bazi-v-daymaster-tag {
      font-size: 0.65em;
      color: #f0c060;
      font-weight: bold;
      letter-spacing: 0.02em;
      min-height: 1.8667vw /* 14px */;
      line-height: 1;
    }
    .bazi-v-char {
      font-size: 2em;
      font-weight: bold;
      line-height: 1.15;
      font-family: 'JiangXiZhuoKai', serif;
      text-shadow: 0 1px 0.8vw /* 6px */ rgba(0,0,0,0.5);
    }
    /* 五行配色 — 天干地支共用 */
    .bazi-wx-wood  { color: #3dde7a; text-shadow: 0 0 1.0667vw /* 8px */ rgba(61,222,122,0.55); }
    .bazi-wx-fire  { color: #ff6b4a; text-shadow: 0 0 1.0667vw /* 8px */ rgba(255,107,74,0.55); }
    .bazi-wx-earth { color: #e8b84b; text-shadow: 0 0 1.0667vw /* 8px */ rgba(232,184,75,0.55); }
    .bazi-wx-metal { color: #f0d060; text-shadow: 0 0 1.0667vw /* 8px */ rgba(240,208,96,0.55); }
    .bazi-wx-water { color: #5ab0ff; text-shadow: 0 0 1.0667vw /* 8px */ rgba(90,176,255,0.55); }
    /* 日主高亮圈 */
    .bazi-daymaster-char {
      position: relative;
    }
    .bazi-daymaster-char::after {
      content: '';
      position: absolute;
      inset: -0.0625rem /* -3px */;
      border-radius: 0.5333vw /* 4px */;
      border: 0.2667vw /* 2px */ solid rgba(240,180,60,0.7);
      pointer-events: none;
    }

    /* ===== 五行统计 ===== */
    .wuxing-display { display: flex; justify-content: space-around; margin-top: 1.6vw /* 12px */; padding: 1.3333vw /* 10px */; background: rgba(0,0,0,0.2); border-radius: 1.0667vw /* 8px */; }
    .wuxing-item { text-align: center; }
    .wuxing-label { font-size: 0.82em; color: #95a5a6; }
    .wuxing-value { font-size: 1.3em; font-weight: bold; }
    .wuxing-wood  { color: #3dde7a; }
    .wuxing-fire  { color: #ff6b4a; }
    .wuxing-earth { color: #e8b84b; }
    .wuxing-metal { color: #f0d060; }
    .wuxing-water { color: #5ab0ff; }

    /* ===== 操作按钮 ===== */
    .action-button {
      background: linear-gradient(145deg, #e67e22, #d35400);
      border: none; border-radius: 1.0667vw /* 8px */;
      padding: 1.6vw /* 12px */ 2.4vw /* 18px */; color: white;
      font-size: 1em; font-weight: bold;
      cursor: pointer; width: 100%;
      margin-top: 1.0667vw /* 8px */; transition: all 0.28s;
    }
    .action-button:hover { transform: translateY(-0.0208rem /* -1px */); background: linear-gradient(145deg, #f39c12, #e67e22); }
    .action-button:disabled { background: #555; cursor: not-allowed; transform: none; }

    .back-button {
      background: linear-gradient(145deg, #95a5a6, #7f8c8d);
      border: none; border-radius: 1.3333vw /* 10px */;
      padding: 1.7333vw /* 13px */ 3.7333vw /* 28px */; color: white;
      font-size: 1em; cursor: pointer;
      transition: all 0.28s; display: block;
      margin: 3.7333vw /* 28px */ auto 0; box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0,0,0,0.2);
    }
    .back-button:hover { background: linear-gradient(145deg, #bdc3c7, #95a5a6); transform: translateY(-0.0417rem /* -2px */); }

    /* ===== 天命推演区域 ===== */
    #tianmingResult { display: none; margin-top: 3.2vw /* 24px */; }

    /* 分类标题 */
    .category-section { margin-bottom: 3.7333vw /* 28px */; }
    .category-header {
      display: flex; align-items: center; gap: 1.3333vw /* 10px */;
      padding: 1.6vw /* 12px */ 2.4vw /* 18px */; border-radius: 1.3333vw /* 10px */ 1.3333vw /* 10px */ 0 0;
      font-size: 1.15em; font-weight: bold;
      margin-bottom: 0;
    }
    .category-badge {
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.12);
      border-radius: 2.6667vw /* 20px */; padding: 0.2667vw /* 2px */ 1.6vw /* 12px */;
      font-size: 0.8em; margin-left: auto;
    }

    /* 问题卡片网格 */
    .questions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(37.3333vw /* 280px */, 1fr));
      gap: 1.6vw /* 12px */;
      padding: 1.8667vw /* 14px */;
      background: rgba(0,0,0,0.15);
      border-radius: 0 0 1.3333vw /* 10px */ 1.3333vw /* 10px */;
      border: 1px solid rgba(255,255,255,0.08);
    }

    /* 单个问题卡片 */
    .q-card {
      background: rgba(255,255,255,0.06);
      border-radius: 1.0667vw /* 8px */; padding: 1.8667vw /* 14px */ 2vw /* 15px */;
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.25s;
      position: relative;
    }
    .q-card:hover { border-color: rgba(243,156,18,0.45); background: rgba(255,255,255,0.1); }
    .q-card.loading { opacity: 0.55; }
    .q-card.done { border-left: 0.4vw /* 3px */ solid #2ecc71; }
    .q-card.error { border-left: 0.4vw /* 3px */ solid #e74c3c; }

    .q-number {
      position: absolute; top: 1.3333vw /* 10px */; right: 1.6vw /* 12px */;
      font-size: 0.75em; color: #7f8c8d;
      background: rgba(0,0,0,0.3);
      padding: 1px 0.9333vw /* 7px */; border-radius: 1.3333vw /* 10px */;
    }
    .q-question {
      font-size: 0.9em; color: #bdc3c7;
      margin-bottom: 1.0667vw /* 8px */; padding-right: 4.8vw /* 36px */;
      line-height: 1.5;
    }
    .q-answer {
      font-size: 0.93em; color: #ecf0f1;
      line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 1.0667vw /* 8px */; margin-top: 0.5333vw /* 4px */;
    }
    .q-answer strong { color: #f39c12; }
    .q-algo {
      font-size: 0.73em; color: #7f8c8d;
      margin-top: 1.0667vw /* 8px */; font-style: italic;
    }
    .q-status-pending { color: #7f8c8d; font-style: italic; font-size: 0.85em; margin-top: 0.8vw /* 6px */; }

    /* 进度条 */
    .progress-wrapper { margin: 2.1333vw /* 16px */ 0 1.0667vw /* 8px */; }
    .progress-bar-bg { background: rgba(0,0,0,0.35); border-radius: 1.3333vw /* 10px */; height: 1.0667vw /* 8px */; overflow: hidden; }
    .progress-bar-fill { background: linear-gradient(90deg, #27ae60, #f39c12); height: 100%; border-radius: 1.3333vw /* 10px */; transition: width 0.5s ease; width: 0%; }
    .progress-text { font-size: 0.82em; color: #95a5a6; margin-top: 0.6667vw /* 5px */; text-align: right; }

    /* 颜色主题 */
    .theme-green  { background: linear-gradient(135deg, #1e6b3c, #2e7d4f); }
    .theme-blue   { background: linear-gradient(135deg, #1a4a7a, #2563a8); }
    .theme-purple { background: linear-gradient(135deg, #4a1a6b, #6b2d8e); }
    .theme-pink   { background: linear-gradient(135deg, #7a1a4a, #9e2563); }
    .theme-orange { background: linear-gradient(135deg, #7a4a1a, #a05520); }
    .theme-teal   { background: linear-gradient(135deg, #1a5a5a, #1f7a7a); }
    .theme-brown  { background: linear-gradient(135deg, #5a3a1a, #7a4e22); }

    /* ===== 其他功能页 ===== */
    .cards-container { display: grid; grid-template-columns: repeat(auto-fit,minmax(37.3333vw /* 280px */,1fr)); gap:2.4vw /* 18px */; margin-bottom:4.2667vw /* 32px */; }
    .card-item { margin-bottom:1.0667vw /* 8px */; padding-left:1.3333vw /* 10px */; border-left:0.2667vw /* 2px */ solid #e67e22; font-size:0.93em; }
    .card-content { line-height:1.65; }

    /* 进度条动效 */
    .progress-fill { background:linear-gradient(90deg,#e67e22,#f39c12); height:100%; border-radius:1.3333vw /* 10px */; width:0%; transition:width 2s ease; }
    .luck-stars { font-size:1.5em; color:#f39c12; margin:1.3333vw /* 10px */ 0; }
    .avatar-placeholder { width:10.1333vw /* 76px */; height:10.1333vw /* 76px */; border-radius:50%; background:linear-gradient(145deg,#e67e22,#f39c12); margin:0 auto 1.8667vw /* 14px */; display:flex; align-items:center; justify-content:center; font-size:2em; color:white; }

    /* ===== 动画 ===== */
    /* fade-in：纯 opacity，无位移，180ms 轻快进场 */
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    .fade-in { animation: fadeIn 0.18s ease-out; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
    .pulsing { animation: pulse 1.5s infinite; }

    /* 页面进场动画：delay:1ms + fill-mode:both = class加上就立即透明，1ms后开始淡入 */
    @keyframes pageEnter { from{opacity:0} to{opacity:1} }
    .page-enter { animation: pageEnter 0.35s ease-out 1ms both; }

    /* ===== 页脚 ===== */
    .footer { text-align:center; padding:2.4vw /* 18px */; color:#7f8c8d; font-size:0.87em; border-top:1px solid #1e2a38; margin-top:auto; }
    .version { color:#e67e22; font-weight:bold; }



    /* ===== 天命卷 · 五步分页导航条 ===== */
    .tm-stepper {
      display: flex; align-items: center;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1.8667vw /* 14px */; padding: 1.8667vw /* 14px */ 2.4vw /* 18px */;
      margin-bottom: 3.7333vw /* 28px */; gap: 0;
      overflow-x: auto;
    }
    .tm-step {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.6667vw /* 5px */; flex-shrink: 0; cursor: pointer;
      min-width: 9.6vw /* 72px */; transition: opacity 0.25s;
    }
    .tm-step:not(.tm-step-done):not(.tm-step-active) { opacity: 0.38; pointer-events: none; }
    .tm-step-done { opacity: 0.72; }
    .tm-step-done:hover { opacity: 1; }
    .tm-step-circle {
      width: 4.5333vw /* 34px */; height: 4.5333vw /* 34px */; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.88em; font-weight: bold;
      transition: all 0.3s;
    }
    .tm-step-active .tm-step-circle {
      background: linear-gradient(135deg, #e67e22, #f39c12);
      color: white; box-shadow: 0 0 1.8667vw /* 14px */ rgba(230,126,34,0.55);
    }
    .tm-step-done .tm-step-circle {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: white;
    }
    .tm-step:not(.tm-step-active):not(.tm-step-done) .tm-step-circle {
      background: rgba(255,255,255,0.1);
      color: #7f8c8d;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .tm-step-label {
      font-size: 0.72em; color: #95a5a6; white-space: nowrap; text-align: center;
    }
    .tm-step-active .tm-step-label { color: #f39c12; font-weight: bold; }
    .tm-step-done .tm-step-label   { color: #2ecc71; }
    .tm-connector {
      flex: 1; height: 0.2667vw /* 2px */; min-width: 2.4vw /* 18px */;
      background: rgba(255,255,255,0.1); border-radius: 0.2667vw /* 2px */;
      transition: background 0.4s;
    }
    .tm-connector.done { background: rgba(39,174,96,0.5); }

    /* 分页面板 */
    .tm-page { display: none; animation: fadeIn 0.4s ease-out; }
    .tm-page.active { display: block; }

    /* 分页底部导航按钮 */
    .tm-nav-bar {
      display: flex; gap: 1.6vw /* 12px */; margin-top: 4.2667vw /* 32px */; padding-top: 2.6667vw /* 20px */;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .tm-nav-btn {
      flex: 1; padding: 1.7333vw /* 13px */ 18px; border: none; border-radius: 1.3333vw /* 10px */;
      font-size: 0.97em; font-weight: bold; cursor: pointer;
      transition: all 0.25s;
    }
    .tm-nav-btn-prev {
      background: rgba(255,255,255,0.07);
      color: #95a5a6; border: 1px solid rgba(255,255,255,0.14);
      flex: 0 0 auto; padding: 1.7333vw /* 13px */ 22px;
    }
    .tm-nav-btn-prev:hover { background: rgba(255,255,255,0.13); color: #ecf0f1; }
    .tm-nav-btn-next {
      background: linear-gradient(135deg, #e67e22, #d35400);
      color: white;
    }
    .tm-nav-btn-next:hover { background: linear-gradient(135deg, #f39c12, #e67e22); transform: translateY(-0.0417rem /* -2px */); }
    .tm-nav-btn-next:disabled { background: #3a3a3a; color: #666; cursor: not-allowed; transform: none; }

    /* 第2页排盘结果区域 */
    .page2-bazi-result {
      display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vw /* 18px */; margin-bottom: 2.9333vw /* 22px */;
    }
    @media(max-width:80vw /* 600px */) { .page2-bazi-result { grid-template-columns: 1fr; } }

    /* 大运展示 */
    .dayun-section { margin-top: 2.4vw /* 18px */; }
    .dayun-title { font-size: 0.9em; color: #c8a040; font-weight: bold; margin-bottom: 1.3333vw /* 10px */; letter-spacing: 0.08em; }
    .dayun-scroll { display: flex; gap: 1.0667vw /* 8px */; overflow-x: auto; padding-bottom: 0.8vw /* 6px */; scrollbar-width: thin; scrollbar-color: #c8a040 transparent; }
    .dayun-scroll::-webkit-scrollbar { height: 0.5333vw /* 4px */; }
    .dayun-scroll::-webkit-scrollbar-thumb { background: #c8a040; border-radius: 0.2667vw /* 2px */; }
    .dayun-item {
      flex: 0 0 auto; min-width: 8.5333vw /* 64px */; text-align: center;
      background: rgba(200,160,64,0.10); border: 1px solid rgba(200,160,64,0.3);
      border-radius: 1.0667vw /* 8px */; padding: 1.0667vw /* 8px */ 0.8vw /* 6px */ 0.8vw /* 6px */;
      transition: all 0.2s;
    }
    .dayun-item.dayun-current {
      background: rgba(200,160,64,0.25); border-color: #c8a040;
      box-shadow: 0 0 1.0667vw /* 8px */ rgba(200,160,64,0.35);
    }
    .dayun-ganzhi { font-size: 1.3em; font-weight: bold; color: #ffe08a; letter-spacing: 0.05em; }
    .dayun-age { font-size: 0.72em; color: #a09070; margin-top: 0.4vw /* 3px */; }
    .dayun-year { font-size: 0.68em; color: #7a7060; margin-top: 1px; }
    .dayun-tengod { font-size: 0.68em; color: #c8a040; margin-top: 0.4vw /* 3px */; background: rgba(200,160,64,0.12); border-radius: 0.4vw /* 3px */; padding: 1px 0.4vw /* 3px */; }
    .dayun-start-info { font-size: 0.78em; color: #a09070; margin-top: 0.8vw /* 6px */; padding-top: 0.8vw /* 6px */; border-top: 1px solid rgba(200,160,64,0.2); }
    .dayun-start-info strong { color: #ffe08a; }

    /* 第2页提示栏 */
    .page2-ready-bar {
      background: linear-gradient(135deg, rgba(39,174,96,0.12), rgba(46,204,113,0.06));
      border: 1px solid rgba(39,174,96,0.35); border-radius: 1.6vw /* 12px */;
      padding: 1.8667vw /* 14px */ 2.4vw /* 18px */; display: flex; align-items: center; gap: 1.6vw /* 12px */;
      margin-bottom: 2.9333vw /* 22px */;
    }
    /* ===== 图片 UI 层 ===== */
    /* 注意：页面元素直接放在.container内，不需要再针对.container写覆盖规则 */

    /* 主页面：背景图撑满，热区绝对定位叠上去 */
    #mainPage {
      position: relative;
      width: 100%;
      margin: 0 auto;
      min-height: 100vh;
      overflow: hidden;
      background: #060408;
    }
    /* 背景图：撑满整个视口 */
    #mainPage .img-bg-main {
      display: block;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      object-position: center top;
      pointer-events: none;
    }
    /* 隐藏原来的文字 header 和按钮 */
    #mainPage .header,
    #mainPage .main-menu { display: none; }

    /* 热区按钮：绝对定位叠在背景图上 */
    .img-hotspot {
      position: absolute;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 100;
      padding: 0;
    }
    .img-hotspot img {
      width: 100%; height: auto;
      max-height: 80%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }
    .img-hotspot:hover { opacity: 0.9; transform: scale(1.06); transition: all 0.2s; background: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.7) !important; }
    .img-hotspot:active { opacity: 0.75; transform: scale(0.97); }

    /* 主菜单图标按钮：图标 + 名称标签布局（无边框无底色，使用透明背景图标） */
    .menu-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5333vw /* 4px */;
      background: transparent;
      border: none;
      padding: 0;
    }
    .menu-icon-btn img {
      width: 100%;
      max-height: 61%;
      object-fit: contain;
      pointer-events: none;
      flex-shrink: 0;
    }
    .menu-icon-label {
      display: block;
      font-size: 0.72em;
      font-weight: bold;
      color: #ffe87a;
      text-shadow: 0 1px 0.4vw rgba(0,0,0,0.8), 0 0 0.9333vw rgba(255,220,80,0.5);
      letter-spacing: 0.12em;
      line-height: 1.1;
      white-space: nowrap;
      pointer-events: none;
    }

    /* 卷轴：装饰性按钮，有悬停/点击动效但不跳转页面，cursor用默认 */
    .img-hotspot-deco { cursor: default; }
    .img-hotspot-deco:hover { opacity: 0.9; transform: scale(1.02); }
    .img-hotspot-deco:active { opacity: 0.7; transform: scale(0.98); }

    /* 图片返回按钮（各功能页面顶部） - 750设计更大 */
    .img-back-btn {
      display: block;
      width: 18vw /* 135px - 750设计更大 */;
      cursor: pointer;
      margin-bottom: 2vw /* 15px */;
      transition: opacity 0.2s, transform 0.2s;
    }
    .img-back-btn:hover { opacity: 0.82; transform: scale(1.04); }
    .img-back-btn:active { opacity: 0.65; transform: scale(0.96); }

    /* ===== 功能页：全屏背景图方案 ===== */
    .function-page {
      position: relative;
      min-height: 100dvh; /* 动态视口高度，适配各种屏幕 */
      min-height: 100vh;  /* 后备方案 */
    }

    /* 功能页背景图：铺满整页，跟随页面滚动（position:absolute而非fixed，防止串页面） */
    .function-page .page-bg-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      min-height: 100dvh;
      min-height: 100vh;
      object-fit: cover;
      object-position: top center;
      z-index: 0;
      pointer-events: none;
      display: block;
    }

    /* 功能页内容容器：叠在背景图上面，可正常流式布局 */
    .function-page .page-content-wrap {
      position: relative;
      z-index: 1;
      padding: 0;
      min-height: 100dvh;
      min-height: 100vh;
    }

    /* 修身镜页面装饰卡片 */
    .xiushen-deco-row {
      display: flex; gap: 1.6vw /* 12px */;
      margin: 0 2.1333vw /* 16px */ 2.4vw /* 18px */;
    }
    .xiushen-deco-row img {
      flex: 1; height: auto; border-radius: 1.3333vw /* 10px */;
      object-fit: contain;
    }

    /* 功能页面内容区加内边距 */
    .function-title { margin: 0 2.1333vw /* 16px */ 1.3333vw /* 10px */; padding-top: 6.9333vw /* 52px */; }
    .function-subtitle { margin: 0 2.1333vw /* 16px */ 2.6667vw /* 20px */; }
    .input-section,
    .page2-bazi-result,
    .cards-container { margin: 0 2.1333vw /* 16px */ !important; }
    .tm-nav-bar { margin: 2.6667vw /* 20px */ 2.1333vw /* 16px */ 2.1333vw /* 16px */ !important; }
    .category-section { margin: 0 2.1333vw /* 16px */ 2.6667vw /* 20px */ !important; }
    #page2InferProgress,
    #page2TianmingResult,
    #page2ReadyBar { margin: 0 2.1333vw /* 16px */ 2.1333vw /* 16px */ !important; }

    /* ===== 第1页生辰录入：米色模块 ===== */
    #tmPage1 .input-section {
      grid-template-columns: 1fr !important;
      margin: 8vw /* 60px */ 5.3333vw /* 40px */ 0 !important;
      gap: 0 !important;
    }
    #tmPage1 .card {
      background: rgba(245,235,210,0.92) !important;
      border: 1px solid rgba(160,110,50,0.35) !important;
      border-radius: 1.3333vw /* 10px */;
      padding: 1.8667vw /* 14px */ 2.1333vw /* 16px */ 2.4vw /* 18px */;
      box-shadow: 0 0.2667vw /* 2px */ 1.6vw /* 12px */ rgba(0,0,0,0.35) !important;
    }
    #tmPage1 .card-title {
      font-size: 4.2vw /* 更大标题 */ !important;
      color: #3a1f08 !important;
      font-weight: bold !important;
      margin-bottom: 1.6vw !important;
      padding-bottom: 0.8vw !important;
      border-bottom: 1px solid rgba(120,80,30,0.25) !important;
      display: block !important;
    }
    #tmPage1 .form-label {
      font-size: 3.6vw /* 更大标签文字 */ !important;
      color: #4a2c0a !important;
      font-weight: bold !important;
      margin-bottom: 0.8vw !important;
      display: block !important;
    }
    #tmPage1 .form-input {
      padding: 2vw /* 15px */ 2.1333vw /* 16px */;
      font-size: 3.4vw /* 25.5px - 更大输入文字 */ !important;
      background: rgba(255,252,240,0.9) !important;
      border: 1px solid rgba(140,90,30,0.4) !important;
      color: #2d1505 !important;
      border-radius: 0.6667vw /* 5px */;
    }
    #tmPage1 .form-input:focus {
      border-color: #8a5520 !important;
      box-shadow: 0 0 0.6667vw /* 5px */ rgba(140,85,30,0.4) !important;
    }
    #tmPage1 .radio-group {
      gap: 2.1333vw /* 16px */;
    }
    #tmPage1 .radio-label {
      font-size: 3.4vw /* 25.5px - 750设计更大 */ !important;
      color: #3a1f08 !important;
    }

    /* ===== 滚轮选择器样式 - 显示5项居中（紧凑版v4） ===== */
    .wheel-picker-container {
      display: flex;
      gap: 1.0667vw /* 8px */;
      justify-content: space-between;
      margin-bottom: 1.6vw /* 12px */;
      touch-action: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      height: 40vw /* 300px - 精确5行×8vw */;
    }
    .wheel-column {
      flex: 1;
      position: relative;
      height: 100%;
      overflow: hidden;
      background: rgba(255,252,240,0.85);
      border-radius: 1.6vw /* 12px */;
      border: 1px solid rgba(140,90,30,0.4);
      touch-action: pan-y; /* 只允许垂直滚动 */
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      min-width: 12vw; /* 确保最小宽度 */
    }
    .wheel-column::before,
    .wheel-column::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 12vw /* 渐变遮罩高度 - 紧凑版 */;
      pointer-events: none;
      z-index: 10;
    }
    .wheel-column::before {
      top: 0;
      background: linear-gradient(to bottom, rgba(255,252,240,0.97), transparent);
    }
    .wheel-column::after {
      bottom: 0;
      background: linear-gradient(to up, rgba(255,252,240,0.97), transparent);
    }
    .wheel-highlight {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 8vw /* 与wheel-item高度一致，确保选中项精确居中 */;
      transform: translateY(-50%);
      background: rgba(212,175,90,0.22);
      border-top: 1px solid rgba(180,120,50,0.45);
      border-bottom: 1px solid rgba(180,120,50,0.45);
      pointer-events: none;
      z-index: 5;
    }
    .wheel-options {
      position: relative;
      transition: transform 0.15s ease-out;
    }
    .wheel-item {
      height: 8vw /* 60px - 紧凑行高，精确5行显示 */;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3vw /* 22.5px - 适中字体 */;
      font-weight: 600;
      color: #5a3e1a;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .wheel-item.selected {
      font-weight: bold;
      color: #2d1505;
      font-size: 3.6vw /* 27px - 选中项更大更清晰 */;
    }
    .wheel-item.dimmed {
      opacity: 0.35;
      font-size: 2.4vw /* 18px - 非选中项稍小 */;
    }
    .wheel-label {
      position: absolute;
      right: 1.0667vw /* 8px */;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.75em;
      color: rgba(90,62,26,0.6);
      pointer-events: none;
    }
    /* 时辰列加宽 - 保持与其他列相同高度 */
    .wheel-column-hour {
      flex: 1.3;
      min-width: 12vw /* 90px */;
      height: 100% !important;
      position: relative;
      overflow: hidden;
      background: rgba(255,252,240,0.85);
      border-radius: 1.6vw /* 12px */;
      border: 1px solid rgba(140,90,30,0.4);
      touch-action: pan-y;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
    /* 时辰列也需要遮罩 */
    .wheel-column-hour::before,
    .wheel-column-hour::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 12vw /* 渐变遮罩高度与主列一致（紧凑版v4） */;
      pointer-events: none;
      z-index: 10;
    }
    .wheel-column-hour::before {
      top: 0;
      background: linear-gradient(to bottom, rgba(255,252,240,0.95), transparent);
    }
    .wheel-column-hour::after {
      bottom: 0;
      background: linear-gradient(to top, rgba(255,252,240,0.95), transparent);
    }
    /* 时辰时间提示 */
    .wheel-time-hint {
      position: absolute;
      bottom: 1.0667vw /* 8px */;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 2.4vw /* 18px - 更大的时辰提示 */ !important;
      color: rgba(140,90,30,0.8);
      background: rgba(255,252,240,0.7);
      padding: 0.2667vw /* 2px */ 0.5333vw /* 4px */;
      border-radius: 0.5333vw /* 4px */;
    }
    /* 拖动时禁止选中文字 */
    .wheel-column {
      user-select: none;
      -webkit-user-select: none;
    }

    /* ===== 档案系统样式 ===== */
    /* 档案按钮 */
    .pf-arch-btn {
      padding: 2vw /* 15px */ 2.6667vw /* 20px */; border-radius: 0.6667vw /* 5px */; cursor: pointer;
      font-size: 3.8vw /* 28.5px - 更大按钮文字 */ !important; font-family: inherit; font-weight: bold !important;
      background: rgba(140,90,30,0.15); border: 1px solid rgba(140,90,30,0.45);
      color: #4a2c0a; white-space: nowrap; transition: all 0.18s; flex-shrink: 0;
    }
    .pf-arch-btn:hover { background: rgba(140,90,30,0.28); }
    .pf-arch-btn.open { background: rgba(140,90,30,0.3); color: #2d1505; }

    /* 档案面板容器 */
    .pf-archive-panel {
      background: rgba(255,250,235,0.88); border: 1px solid rgba(140,90,30,0.35);
      border-radius: 1.0667vw /* 8px */; padding: 1.3333vw /* 10px */ 1.6vw /* 12px */; margin-bottom: 1.3333vw /* 10px */;
      animation: pfSlideDown 0.18s ease;
    }
    @keyframes pfSlideDown {
      from { opacity:0; transform:translateY(-0.125rem /* -6px */); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* 自己档案提示条 */
    .pf-self-bar {
      display: flex; align-items: center; gap: 1.0667vw /* 8px */;
      padding: 0.9333vw /* 7px */ 1.3333vw /* 10px */; margin-bottom: 1.2vw /* 9px */;
      background: rgba(200,155,50,0.15); border: 1px solid rgba(180,130,40,0.4);
      border-radius: 0.9333vw /* 7px */; font-size: 0.82em; color: #3a1f08;
    }
    .pf-self-tag {
      padding: 0.2667vw /* 2px */ 1.0667vw /* 8px */; border-radius: 1.3333vw /* 10px */; font-size: 0.78em; font-weight: bold;
      background: rgba(200,140,30,0.25); border: 1px solid rgba(180,120,20,0.5);
      color: #5a2e04; white-space: nowrap;
    }
    .pf-self-bar-name { font-weight: bold; color: #2d1505; flex:1; }
    .pf-self-load-btn {
      padding: 0.4vw /* 3px */ 1.2vw /* 9px */; border-radius: 0.8vw /* 6px */; font-size: 0.78em; cursor: pointer;
      background: rgba(140,90,30,0.18); border: 1px solid rgba(140,90,30,0.4);
      color: #4a2c0a; font-family: inherit; transition: all 0.15s;
    }
    .pf-self-load-btn:hover { background: rgba(140,90,30,0.32); }

    /* 历史档案标题 */
    .pf-arch-label {
      font-size: 3.2vw /* 24px - 更大标题 */ !important;
      color: #7a5020 !important;
      font-weight: bold !important;
      letter-spacing: 0.05em;
      margin-bottom: 0.9333vw /* 7px */; padding-bottom: 0.6667vw /* 5px */;
      border-bottom: 1px solid rgba(140,90,30,0.2);
    }

    /* 档案列表 */
    .pf-archive-list { display: flex; flex-direction: column; gap: 0.6667vw /* 5px */; max-height: 24vw /* 180px */; overflow-y: auto; }
    .pf-archive-item {
      display: flex; align-items: center; gap: 0.9333vw /* 7px */;
      padding: 0.9333vw /* 7px */ 1.2vw /* 9px */; border-radius: 0.9333vw /* 7px */;
      background: rgba(255,252,240,0.7); border: 1px solid rgba(140,90,30,0.2);
      cursor: pointer; transition: all 0.15s;
    }
    .pf-archive-item:hover { background: rgba(200,155,50,0.18); border-color: rgba(140,90,30,0.4); }
    .pf-archive-item.is-self { border-color: rgba(180,130,40,0.5); background: rgba(200,155,50,0.12); }
    .pf-ai-rel {
      font-size: 0.72em; padding: 1px 0.8vw /* 6px */; border-radius: 1.0667vw /* 8px */; flex-shrink: 0;
      font-weight: bold; white-space: nowrap;
    }
    .pf-ai-rel-self    { background:rgba(220,140,20,0.22);  border:1px solid rgba(200,120,10,0.4); color:#5a2e04; }
    .pf-ai-rel-partner { background:rgba(200,60,120,0.18);  border:1px solid rgba(180,50,100,0.4); color:#6a1040; }
    .pf-ai-rel-family  { background:rgba(60,130,200,0.18);  border:1px solid rgba(40,110,180,0.4); color:#0a2060; }
    .pf-ai-rel-friend  { background:rgba(60,160,80,0.18);   border:1px solid rgba(40,140,60,0.4);  color:#0a4015; }
    .pf-ai-rel-other   { background:rgba(140,100,60,0.18);  border:1px solid rgba(120,80,40,0.4);  color:#3a2005; }
    .pf-ai-name { font-size: 0.88em; font-weight: bold; color: #2d1505; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pf-ai-date { font-size: 0.72em; color: #7a5020; flex-shrink:0; }
    .pf-ai-del {
      font-size: 0.72em; padding: 0.2667vw /* 2px */ 0.8vw /* 6px */; border-radius: 0.5333vw /* 4px */; cursor: pointer;
      background: none; border: none; color: rgba(160,80,50,0.6); flex-shrink:0;
      font-family: inherit; transition: color 0.15s;
    }
    .pf-ai-del:hover { color: rgba(200,60,30,0.9); }
    .pf-arch-empty { font-size: 0.8em; color: #9a7040; text-align: center; padding: 1.6vw /* 12px */ 0; }

    /* 入档行 */
    .pf-save-row {
      display: flex; align-items: center; flex-wrap: wrap; gap: 1.0667vw /* 8px */;
      padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */; margin-bottom: 0.5333vw /* 4px */;
      background: rgba(200,155,50,0.08); border: 1px solid rgba(140,90,30,0.2);
      border-radius: 0.9333vw /* 7px */;
    }
    .pf-save-check-wrap {
      display: flex; align-items: center; gap: 0.8vw /* 6px */; cursor: pointer;
      font-size: 3.4vw /* 25.5px - 更大的绑定道统文字 */ !important; color: #4a2c0a; font-weight: bold; flex-shrink:0;
    }
    .pf-save-check-wrap input[type=checkbox] { width: 2.6667vw /* 20px */; height: 2.6667vw /* 20px */; cursor: pointer; accent-color: #8a5520; }
    .pf-save-check-label { white-space: nowrap; }

    /* 关系选择按钮组 */
    .pf-relation-row { display: flex; gap: 0.6667vw /* 5px */; flex-wrap: wrap; align-items: center; }
    .pf-rel-btn {
      padding: 0.5333vw /* 4px */ 1.2vw /* 9px */; border-radius: 1.8667vw /* 14px */; cursor: pointer; font-size: 0.78em;
      font-family: inherit; font-weight: bold; transition: all 0.15s;
      background: rgba(255,252,240,0.8); border: 1px solid rgba(140,90,30,0.3);
      color: #6a4010;
    }
    .pf-rel-btn:hover { background: rgba(200,155,50,0.2); border-color: rgba(140,90,30,0.5); }
    .pf-rel-btn.active { background: rgba(140,90,30,0.28); border-color: rgba(110,65,15,0.65); color: #2d1505; }
    .pf-rel-btn[data-rel="self"].active    { background:rgba(220,140,20,0.28);  border-color:rgba(200,120,10,0.6); }
    .pf-rel-btn[data-rel="partner"].active { background:rgba(200,60,120,0.22);  border-color:rgba(180,50,100,0.6); }
    .pf-rel-btn[data-rel="family"].active  { background:rgba(60,130,200,0.22);  border-color:rgba(40,110,180,0.6); }
    .pf-rel-btn[data-rel="friend"].active  { background:rgba(60,160,80,0.22);   border-color:rgba(40,140,60,0.6);  }
    .pf-rel-btn[data-rel="other"].active   { background:rgba(140,100,60,0.22);  border-color:rgba(120,80,40,0.6);  }

    /* 当前命盘绑定提示（如意笏/修身镜中） */
    .ruyi-binding-bar {
      display: flex; align-items: center; gap: 0.9333vw /* 7px */;
      padding: 1.2vw /* 9px */ 2vw /* 15px */; margin-bottom: 1.3333vw /* 10px */;
      background: rgba(200,160,60,0.1); border: 1px solid rgba(200,160,60,0.25);
      border-radius: 1.0667vw /* 8px */; font-size: 1.05em; color: rgba(230,205,140,0.95);
    }
    .ruyi-binding-self { border-color: rgba(200,160,40,0.4) !important; }
    .ruyi-binding-other { border-color: rgba(255,140,80,0.4) !important; background: rgba(255,140,60,0.08) !important; }
    .ruyi-binding-name { font-weight: bold; color: rgba(255,235,165,1); }
    .ruyi-binding-rel  { font-size: 0.9em; opacity: 0.82; }

    /* ═══════════════════════════════════════════════════════
       游历系统 · 全套样式
    ═══════════════════════════════════════════════════════ */

    /* ── 游历悬浮按钮 ── */
    .youli-float-btn {
      position: absolute;
      /* 位置：主页右下角，给底部导航条腾出空间 */
      right: 4%;
      bottom: 14%;
      width: 8vw /* 60px */;
      height: 8vw /* 60px */;
      border-radius: 50%;
      border: 0.2667vw /* 2px */ solid rgba(200,160,60,0.6);
      background: radial-gradient(circle at 40% 35%, rgba(40,30,10,0.9), rgba(20,14,5,0.95));
      box-shadow: 0 0 2.1333vw /* 16px */ rgba(200,150,50,0.4), 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0,0,0,0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
      transition: all 0.3s;
      overflow: visible;
      padding: 0;
    }
    .youli-float-btn:hover, .youli-float-btn:active {
      box-shadow: 0 0 3.7333vw /* 28px */ rgba(200,150,50,0.65), 0 0.8vw /* 6px */ 2.4vw /* 18px */ rgba(0,0,0,0.7);
      transform: scale(1.08);
    }
    .youli-btn-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 50%;
    }
    .youli-btn-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 1.4em;
      color: #d4af5a;
      font-weight: bold;
      pointer-events: none;
    }
    /* 归来提示气泡 */
    .youli-notify-bubble {
      position: absolute;
      top: -0.2083rem /* -10px */;
      right: -0.25rem /* -12px */;
      background: linear-gradient(135deg, #c84040, #e05050);
      color: #fff;
      font-size: 0.62em;
      padding: 0.4vw /* 3px */ 1.0667vw /* 8px */;
      border-radius: 1.6vw /* 12px */;
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(200,40,40,0.5);
      display: flex;
      align-items: center;
      gap: 0.5333vw /* 4px */;
      animation: youli-bubble-pulse 1.8s ease-in-out infinite;
      z-index: 10;
    }
    .youli-notify-dot {
      width: 0.8vw /* 6px */;
      height: 0.8vw /* 6px */;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
      animation: youli-dot-blink 1s ease-in-out infinite;
    }
    @keyframes youli-bubble-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    @keyframes youli-dot-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* ── 游历动画遮罩 ── */
    /* 御剑飞行小人动画 */
    .youli-fly-character {
      position: absolute;
      top: 45%;
      left: -1.6667rem /* -80px */;
      width: 10.6667vw /* 80px */;
      height: 10.6667vw /* 80px */;
      z-index: 10;
      animation: youli-fly-move 3s linear infinite;
    }
    .youli-fly-character img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0.5333vw /* 4px */ 1.0667vw /* 8px */ rgba(0,0,0,0.4));
      animation: youli-fly-bounce 0.8s ease-in-out infinite;
    }
    @keyframes youli-fly-move {
      0% { left: -1.6667rem /* -80px */; }
      100% { left: calc(100% + 10.6667vw /* 80px */); }
    }
    @keyframes youli-fly-bounce {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-0.4167rem /* -20px */) rotate(5deg); }
    }

    .youli-anim-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #0a1020 0%, #050810 100%);
      overflow: hidden;
    }
    .youli-anim-text {
      font-size: 1.6em;
      color: #d4af5a;
      letter-spacing: 0.3em;
      text-shadow: 0 0 2.6667vw /* 20px */ rgba(212,175,90,0.6);
      z-index: 2;
      margin-bottom: 1.6vw /* 12px */;
    }
    .youli-anim-hint {
      font-size: 0.8em;
      color: rgba(200,180,140,0.5);
      letter-spacing: 0.12em;
      z-index: 2;
    }
    .youli-anim-close-hint {
      position: absolute;
      bottom: 3.2vw /* 24px */;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75em;
      color: rgba(200,180,140,0.45);
      letter-spacing: 0.1em;
      z-index: 3;
    }
    /* 云朵动画（无GIF时兜底） */
    .youli-anim-clouds { position: absolute; inset: 0; z-index: 1; }
    .youli-cloud {
      position: absolute;
      border-radius: 6.6667vw /* 50px */;
      background: rgba(200,180,140,0.08);
      filter: blur(1.6vw /* 12px */);
    }
    .youli-cloud-1 {
      width: 26.6667vw /* 200px */; height: 8vw /* 60px */;
      top: 30%; left: -40%;
      animation: cloud-drift 8s linear infinite;
    }
    .youli-cloud-2 {
      width: 20vw /* 150px */; height: 6vw /* 45px */;
      top: 50%; left: -30%;
      animation: cloud-drift 11s linear infinite 2s;
    }
    .youli-cloud-3 {
      width: 16vw /* 120px */; height: 4.8vw /* 36px */;
      top: 65%; left: -20%;
      animation: cloud-drift 9s linear infinite 4s;
    }
    @keyframes cloud-drift {
      from { transform: translateX(0); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      to { transform: translateX(66.6667vw /* 500px */); opacity: 0; }
    }

    /* ── 出游日记页 ── */
    .youli-jiandu-btn {
      display: flex;
      align-items: center;
      gap: 0.5333vw /* 4px */;
      background: rgba(200,160,60,0.15);
      border: 1px solid rgba(200,160,60,0.4);
      border-radius: 2.1333vw /* 16px */;
      color: #d4af5a;
      font-size: 0.78em;
      padding: 0.6667vw /* 5px */ 1.6vw /* 12px */;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .youli-diary-wrap {
      flex: 1;
      padding: 0 2.1333vw /* 16px */;
      overflow-y: auto;
    }
    .youli-diary-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.6vw /* 12px */;
      padding: 8vw /* 60px */ 2.6667vw /* 20px */;
      color: rgba(200,180,140,0.6);
      font-size: 0.9em;
      letter-spacing: 0.1em;
    }
    .youli-loading-icon {
      font-size: 2.4em;
      animation: youli-spin 3s linear infinite;
    }
    @keyframes youli-spin { to { transform: rotate(360deg); } }

    /* 日记卡片 */
    .youli-diary-card {
      background: linear-gradient(160deg, rgba(15,10,25,0.9), rgba(10,8,18,0.95));
      border: 1px solid rgba(200,160,60,0.25);
      border-radius: 2.1333vw /* 16px */;
      padding: 2.4vw /* 18px */;
      margin: 1.6vw /* 12px */ 0;
    }
    .youli-diary-date-row {
      display: flex;
      align-items: center;
      gap: 1.0667vw /* 8px */;
      margin-bottom: 1.3333vw /* 10px */;
    }
    .youli-diary-date-tag {
      font-size: 0.72em;
      color: rgba(200,180,140,0.65);
      background: rgba(200,160,60,0.1);
      border: 1px solid rgba(200,160,60,0.2);
      border-radius: 1.3333vw /* 10px */;
      padding: 0.2667vw /* 2px */ 1.3333vw /* 10px */;
    }
    .youli-diary-type-tag {
      font-size: 0.7em;
      padding: 0.2667vw /* 2px */ 1.3333vw /* 10px */;
      border-radius: 1.3333vw /* 10px */;
      font-weight: bold;
    }
    .youli-type-lucky  { background:rgba(200,160,60,0.2);  color:#d4af5a; border:1px solid rgba(200,160,60,0.35); }
    .youli-type-unlucky{ background:rgba(180,40,40,0.2);   color:#e08080; border:1px solid rgba(180,40,40,0.35); }
    .youli-type-neutral{ background:rgba(80,120,200,0.2);  color:#90b8e0; border:1px solid rgba(80,120,200,0.3); }
    .youli-diary-title {
      font-size: 1.1em;
      color: #d4af5a;
      font-weight: bold;
      letter-spacing: 0.1em;
      margin-bottom: 1.0667vw /* 8px */;
    }
    .youli-diary-text {
      font-size: 0.88em;
      color: rgba(220,200,170,0.9);
      line-height: 1.9;
      letter-spacing: 0.04em;
    }
    .youli-diary-text em {
      color: #d4af5a;
      font-style: normal;
      font-weight: bold;
    }
    /* EXP影响条 */
    .youli-exp-delta {
      display: flex;
      align-items: center;
      gap: 0.8vw /* 6px */;
      margin-top: 1.6vw /* 12px */;
      padding: 0.8vw /* 6px */ 1.3333vw /* 10px */;
      background: rgba(255,255,255,0.04);
      border-radius: 1.0667vw /* 8px */;
      font-size: 0.78em;
    }
    .youli-exp-delta-pos { color: #60d880; }
    .youli-exp-delta-neg { color: #e06060; }
    .youli-exp-delta-tag {
      padding: 1px 1.0667vw /* 8px */;
      border-radius: 1.0667vw /* 8px */;
      font-size: 0.92em;
    }
    .youli-exp-delta-tag.shen { background:rgba(160,80,220,0.2); color:#c080f0; }
    .youli-exp-delta-tag.ti   { background:rgba(40,160,120,0.2); color:#60d0a0; }
    .youli-exp-delta-tag.qi   { background:rgba(40,100,220,0.2); color:#80b8f0; }

    /* ── 器物掉落区 ── */
    .youli-loot-section {
      padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
      border-top: 1px solid rgba(200,160,60,0.15);
    }
    .youli-loot-title {
      font-size: 0.88em;
      color: #d4af5a;
      letter-spacing: 0.1em;
      margin-bottom: 1.3333vw /* 10px */;
      display: flex;
      align-items: center;
      gap: 0.8vw /* 6px */;
    }
    .youli-loot-icon { font-size: 1.1em; }
    .youli-loot-items {
      display: flex;
      gap: 1.3333vw /* 10px */;
      flex-wrap: wrap;
    }
    .youli-loot-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5333vw /* 4px */;
      padding: 1.3333vw /* 10px */ 1.8667vw /* 14px */;
      background: rgba(200,160,60,0.1);
      border: 1px solid rgba(200,160,60,0.3);
      border-radius: 1.6vw /* 12px */;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 9.6vw /* 72px */;
    }
    .youli-loot-item:hover { background: rgba(200,160,60,0.2); transform: translateY(-0.0417rem /* -2px */); }
    .youli-loot-item-icon {
      width: 5.3333vw /* 40px */;
      height: 5.3333vw /* 40px */;
      border-radius: 1.0667vw /* 8px */;
      object-fit: contain;
      background: rgba(255,255,255,0.05);
    }
    .youli-loot-item-name {
      font-size: 0.75em;
      color: rgba(220,200,170,0.9);
      text-align: center;
    }
    .youli-loot-item-new {
      font-size: 0.62em;
      color: #f0d890;
      background: rgba(200,160,60,0.3);
      border-radius: 0.8vw /* 6px */;
      padding: 1px 0.6667vw /* 5px */;
    }

    /* ── 日记底部区 ── */
    .youli-diary-bottom {
      padding: 1.6vw /* 12px */ 2.1333vw /* 16px */ 3.2vw /* 24px */;
      display: flex;
      flex-direction: column;
      gap: 1.3333vw /* 10px */;
    }
    .youli-exp-hint {
      font-size: 0.8em;
      color: rgba(200,180,140,0.7);
      text-align: center;
      line-height: 1.6;
      padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
      background: rgba(255,255,255,0.04);
      border-radius: 1.3333vw /* 10px */;
    }
    .youli-goto-jiandu-btn {
      background: linear-gradient(135deg, rgba(200,160,60,0.25), rgba(160,120,40,0.15));
      border: 1px solid rgba(200,160,60,0.4);
      border-radius: 2.6667vw /* 20px */;
      color: #d4af5a;
      font-size: 0.88em;
      padding: 1.3333vw /* 10px */ 0;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.1em;
      width: 100%;
      transition: all 0.2s;
    }
    .youli-goto-jiandu-btn:hover { background: rgba(200,160,60,0.35); }

    /* ── 器物图鉴页 ── */
    .youli-owned-count {
      font-size: 0.78em;
      color: rgba(200,180,140,0.7);
      white-space: nowrap;
      padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
      background: rgba(200,160,60,0.1);
      border: 1px solid rgba(200,160,60,0.2);
      border-radius: 1.6vw /* 12px */;
    }
    .qiwu-filter-bar {
      display: flex;
      gap: 0.8vw /* 6px */;
      padding: 1.0667vw /* 8px */ 2.1333vw /* 16px */;
      overflow-x: auto;
      scrollbar-width: none;
      flex-shrink: 0;
    }
    .qiwu-filter-bar::-webkit-scrollbar { display: none; }
    .qiwu-filter-btn {
      padding: 0.6667vw /* 5px */ 1.8667vw /* 14px */;
      border-radius: 2.1333vw /* 16px */;
      border: 1px solid rgba(200,160,60,0.3);
      background: transparent;
      color: rgba(200,180,140,0.7);
      font-size: 0.8em;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .qiwu-filter-btn.active, .qiwu-filter-btn:hover {
      background: rgba(200,160,60,0.2);
      border-color: rgba(200,160,60,0.55);
      color: #d4af5a;
    }
    /* 器物网格 */
    .qiwu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.3333vw /* 10px */;
      padding: 1.0667vw /* 8px */ 2.1333vw /* 16px */ 4.2667vw /* 32px */;
      overflow-y: auto;
    }
    .qiwu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6667vw /* 5px */;
      padding: 1.6vw /* 12px */ 1.0667vw /* 8px */;
      background: rgba(15,10,25,0.85);
      border: 1px solid rgba(200,160,60,0.2);
      border-radius: 1.8667vw /* 14px */;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .qiwu-item:hover { border-color: rgba(200,160,60,0.5); background: rgba(25,15,40,0.9); transform: translateY(-0.0417rem /* -2px */); }
    .qiwu-item.owned { border-color: rgba(200,160,60,0.45); }
    .qiwu-item.locked { opacity: 0.45; }
    .qiwu-item-img {
      width: 7.2vw /* 54px */;
      height: 7.2vw /* 54px */;
      object-fit: contain;
      border-radius: 1.3333vw /* 10px */;
      background: rgba(200,160,60,0.06);
    }
    .qiwu-item-img-fallback {
      width: 7.2vw /* 54px */;
      height: 7.2vw /* 54px */;
      border-radius: 1.3333vw /* 10px */;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8em;
      background: rgba(200,160,60,0.08);
      border: 1px solid rgba(200,160,60,0.15);
    }
    .qiwu-item-name {
      font-size: 0.78em;
      color: rgba(220,200,170,0.9);
      text-align: center;
      line-height: 1.3;
    }
    .qiwu-item-rarity {
      font-size: 0.65em;
      padding: 1px 0.8vw /* 6px */;
      border-radius: 0.8vw /* 6px */;
    }
    .rarity-common  { background:rgba(140,140,140,0.2); color:#aaa; }
    .rarity-rare    { background:rgba(60,120,220,0.2);  color:#80b8f0; }
    .rarity-epic    { background:rgba(140,40,200,0.2);  color:#c080f0; }
    .rarity-legend  { background:rgba(220,160,40,0.25); color:#d4af5a; }
    .qiwu-owned-badge {
      position: absolute;
      top: 0.6667vw /* 5px */;
      right: 0.6667vw /* 5px */;
      width: 2.1333vw /* 16px */;
      height: 2.1333vw /* 16px */;
      border-radius: 50%;
      background: rgba(200,160,60,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6em;
      color: #fff;
    }
    .qiwu-lock-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      pointer-events: none;
    }

    /* 器物详情弹窗 */
    .qiwu-detail-header {
      padding: 2.6667vw /* 20px */ 2.6667vw /* 20px */ 1.8667vw /* 14px */;
      border-bottom: 1px solid rgba(200,160,60,0.2);
      display: flex;
      align-items: center;
      gap: 1.8667vw /* 14px */;
    }
    .qiwu-detail-img {
      width: 8.5333vw /* 64px */;
      height: 8.5333vw /* 64px */;
      object-fit: contain;
      border-radius: 1.6vw /* 12px */;
      background: rgba(200,160,60,0.08);
      border: 1px solid rgba(200,160,60,0.2);
    }
    .qiwu-detail-img-fallback {
      width: 8.5333vw /* 64px */;
      height: 8.5333vw /* 64px */;
      border-radius: 1.6vw /* 12px */;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2em;
      background: rgba(200,160,60,0.08);
      border: 1px solid rgba(200,160,60,0.2);
      flex-shrink: 0;
    }
    .qiwu-detail-title-col { flex: 1; }
    .qiwu-detail-name {
      font-size: 1.1em;
      color: #d4af5a;
      font-weight: bold;
      letter-spacing: 0.1em;
      margin-bottom: 0.5333vw /* 4px */;
    }
    .qiwu-detail-tags {
      display: flex;
      gap: 0.6667vw /* 5px */;
      flex-wrap: wrap;
    }
    .qiwu-detail-body { padding: 1.8667vw /* 14px */ 2.6667vw /* 20px */; }
    .qiwu-detail-desc {
      font-size: 0.85em;
      color: rgba(220,200,170,0.88);
      line-height: 1.85;
      letter-spacing: 0.04em;
      margin-bottom: 1.6vw /* 12px */;
    }
    .qiwu-detail-usage-title {
      font-size: 0.78em;
      color: rgba(200,160,60,0.8);
      letter-spacing: 0.08em;
      margin-bottom: 0.8vw /* 6px */;
    }
    .qiwu-detail-usage {
      font-size: 0.82em;
      color: rgba(200,180,140,0.75);
      line-height: 1.7;
      padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
      background: rgba(200,160,60,0.06);
      border-left: 0.2667vw /* 2px */ solid rgba(200,160,60,0.35);
      border-radius: 0 1.0667vw /* 8px */ 1.0667vw /* 8px */ 0;
    }
    .qiwu-detail-how-got {
      font-size: 0.75em;
      color: rgba(200,180,140,0.5);
      margin-top: 1.3333vw /* 10px */;
      text-align: center;
    }
    .qiwu-detail-locked-tip {
      text-align: center;
      padding: 1.3333vw /* 10px */;
      font-size: 0.82em;
      color: rgba(200,160,60,0.5);
    }

    /* ═══════════════════════════════════════════════════════
       如意笏BUFF系统 · 全套样式
    ═══════════════════════════════════════════════════════ */

    /* ── 领取按钮区 ── */
    .ruyi-claim-btn {
      width: 100%;
      max-width: 64vw /* 480px - 放宽 */;
      padding: 3.6vw /* 27px - 再×1.5 */ 4.8vw /* 36px - 再×1.5 */;
      background: linear-gradient(135deg, rgba(255,248,230,0.98), rgba(250,240,210,0.95));
      border: 1px solid rgba(200,160,60,0.5);
      border-radius: 4vw /* 30px - 放大 */;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.2vw /* 9px - 再×1.5 */;
      margin: 0 auto;
      transition: all 0.3s;
      box-shadow: 0 0.8vw /* 6px */ 3.2vw /* 24px */ rgba(180,140,40,0.25);
    }
    .ruyi-claim-btn:hover {
      background: linear-gradient(135deg, #fffef5, #faf5e0);
      border-color: rgba(200,160,60,0.7);
      transform: translateY(-0.0417rem /* -2px */);
      box-shadow: 0 1.2vw /* 9px */ 4.8vw /* 36px */ rgba(180,140,40,0.35);
    }
    .ruyi-claim-btn:active {
      transform: translateY(1px);
    }
    .ruyi-claim-icon {
      font-size: 6.75vw /* 50.6px - 再×1.5 */;
      animation: ruyi-icon-pulse 2s ease-in-out infinite;
    }
    .ruyi-claim-label {
      font-size: 4.2vw /* 31.5px - 再×1.5 */;
      color: #8b6914; /* 深色文字 */
      font-weight: bold;
      letter-spacing: 0.15em;
    }
    .ruyi-claim-hint {
      font-size: 3vw /* 22.5px - 再×1.5 */;
      color: rgba(120,100,60,0.65); /* 深色文字 */
      letter-spacing: 0.08em;
    }
    @keyframes ruyi-icon-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    /* 加载中 */
    .ruyi-claiming {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4vw /* 18px - 再×1.5 */;
      padding: 6vw /* 45px - 再×1.5 */;
      color: #6b5018; /* 深色文字 */
      font-size: 3vw /* 22.5px - 再×1.5 */;
      letter-spacing: 0.1em;
    }
    .ruyi-claim-spinner {
      width: 9.6vw /* 72px - 再×1.5 */;
      height: 9.6vw /* 72px - 再×1.5 */;
      border: 0.6vw /* 4.5px */ solid rgba(180,150,80,0.25);
      border-top-color: #c49a30; /* 深金色 */
      border-radius: 50%;
      animation: ruyi-spin 1s linear infinite;
    }
    @keyframes ruyi-spin { to { transform: rotate(360deg); } }

    /* ── BUFF展示区（渐显） ── */
    .ruyi-buff-area {
      animation: ruyi-fade-in 0.8s ease-out;
    }
    @keyframes ruyi-fade-in {
      from { opacity: 0; transform: translateY(2.6667vw /* 20px */); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── BUFF区域分割 ── */
    .ruyi-buff-section {
      padding: 2.4vw /* 18px - 再×1.5 */ 3.2vw /* 24px - 再×1.5 */ 4vw /* 30px - 再×1.5 */;
      border-radius: 3.2vw /* 24px - 放大 */;
      margin-bottom: 3.2vw /* 24px - 再×1.5 */;
    }
    .ruyi-buff-positive {
      background: linear-gradient(160deg, rgba(230,250,220,0.95), rgba(245,255,240,0.95));
      border: 1px solid rgba(120,180,80,0.4);
      box-shadow: 0 0.5333vw 2.1333vw rgba(100,170,60,0.12);
    }
    .ruyi-buff-negative {
      background: linear-gradient(160deg, rgba(255,245,235,0.98), rgba(252,242,225,0.96));
      border: 1px solid rgba(200,140,60,0.35);
      box-shadow: 0 0.5333vw 2.1333vw rgba(180,130,40,0.12);
    }
    .ruyi-buff-section-title {
      display: flex;
      align-items: center;
      gap: 1.2vw /* 9px - 再×1.5 */;
      margin-bottom: 2.4vw /* 18px - 再×1.5 */;
      padding-bottom: 1.6vw /* 12px - 再×1.5 */;
      border-bottom: 1px solid rgba(180,150,80,0.25);
    }
    .ruyi-buff-title-icon {
      font-size: 4.5vw /* 33.75px - 再×1.5 */ !important;
    }
    .ruyi-buff-title-text {
      font-size: 3.6vw /* 27px - 再×1.5 */ !important;
      font-weight: bold;
      letter-spacing: 0.12em;
      color: #3a5a20; /* 深绿色 - 正BUFF标题 */
    }
    .ruyi-buff-positive .ruyi-buff-title-icon { color: #4a9a30; }
    .ruyi-buff-positive .ruyi-buff-title-text { color: #3a7a18; }
    .ruyi-buff-negative .ruyi-buff-title-icon { color: #c06020; }
    .ruyi-buff-negative .ruyi-buff-title-text { color: #8b5010; /* 深棕 - 负BUFF标题 */ }
    .ruyi-buff-count {
      margin-left: auto;
      font-size: 2.4vw /* 18px - 再×1.5 */;
      padding: 0.4vw /* 3px */ 2vw /* 15px - 再×1.5 */;
      border-radius: 2.4vw /* 18px - 放大 */;
      background: rgba(255,255,255,0.6);
    }

    /* ── BUFF卡片 ── */
    .ruyi-buff-list {
      display: flex;
      flex-direction: column;
      gap: 2vw /* 15px - 再×1.5 */;
    }
    .ruyi-buff-card {
      /* 亮色背景卡片 */
      background: rgba(255,252,245,0.98);
      border: 1px solid rgba(200,170,80,0.35);
      border-radius: 2.4vw /* 18px - 放大 */;
      padding: 2.8vw /* 21px - 再×1.5 */ 3.2vw /* 24px - 再×1.5 */;
      display: flex;
      gap: 2.4vw /* 18px - 再×1.5 */;
      animation: ruyi-card-enter 0.4s ease-out backwards;
    }
    .ruyi-buff-positive .ruyi-buff-card {
      border-color: rgba(120,180,80,0.35);
      box-shadow: 0 0.4vw 1.6vw rgba(100,170,60,0.12);
      background: rgba(240,255,235,0.98);
    }
    .ruyi-buff-negative .ruyi-buff-card {
      border-color: rgba(200,140,60,0.35);
      box-shadow: 0 0.4vw 1.6vw rgba(180,130,40,0.12);
      background: rgba(255,250,238,0.98);
    }
    .ruyi-buff-card:nth-child(1) { animation-delay: 0.05s; }
    .ruyi-buff-card:nth-child(2) { animation-delay: 0.15s; }
    .ruyi-buff-card:nth-child(3) { animation-delay: 0.25s; }
    .ruyi-buff-card:nth-child(4) { animation-delay: 0.35s; }
    @keyframes ruyi-card-enter {
      from { opacity: 0; transform: translateY(1.6vw /* 12px */); }
      to { opacity: 1; transform: translateY(0); }
    }
    .ruyi-buff-icon {
      font-size: 5.7vw /* 42.75px - 再×1.5 */;
      flex-shrink: 0;
      width: 9.6vw /* 72px - 再×1.5 */;
      height: 9.6vw /* 72px - 再×1.5 */;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2.4vw /* 18px - 放大 */;
      background: rgba(200,170,80,0.08);
    }
    .ruyi-buff-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.8vw /* 6px - 再×1.5 */;
    }
    .ruyi-buff-title {
      font-size: 3vw /* 22.5px - 再×1.5 */ !important;
      font-weight: bold;
      letter-spacing: 0.08em;
      color: #3a2a0e; /* 深色文字 */
    }
    .ruyi-buff-positive .ruyi-buff-title { color: #2a6a15; } /* 深绿 */
    .ruyi-buff-negative .ruyi-buff-title { color: #8b4513; } /* 深棕 */
    .ruyi-buff-effect {
      font-size: 2.7vw /* 20.25px - 再×1.5 */ !important;
      color: #4a4028; /* 深色文字 */
      line-height: 1.5;
    }
    .ruyi-buff-effect em {
      color: #8b6914; /* 深金色 */
      font-style: normal;
      font-weight: bold;
    }
    .ruyi-buff-advice {
      font-size: 2.55vw /* 19px - 再×1.5 */ !important;
      color: #5a4a18; /* 深色文字 */
      line-height: 1.6;
      padding: 0.8vw /* 6px */ 1.6vw /* 12px - 再×1.5 */;
      background: rgba(200,170,80,0.12); /* 浅金色背景 */
      border-left: 0.4vw /* 3px - 再×1.5 */ solid rgba(180,140,50,0.4);
      border-radius: 0 1.2vw /* 9px */ 1.2vw /* 9px */ 0;
      margin-top: 0.8vw /* 6px - 再×1.5 */;
    }

    /* ── 底部提示区 ── */
    .ruyi-buff-footer {
      text-align: center;
      padding: 3.2vw /* 24px - 再×1.5 */ 0 4.8vw /* 36px - 再×1.5 */;
    }
    .ruyi-buff-footer-hint {
      font-size: 2.55vw /* 19px - 再×1.5 */ !important;
      color: rgba(120,100,60,0.6); /* 深色文字 */
      letter-spacing: 0.08em;
      margin-bottom: 2vw /* 15px - 再×1.5 */;
    }
    .ruyi-refresh-btn {
      padding: 2.4vw /* 18px - 再×1.5 */ 4.8vw /* 36px - 再×1.5 */;
      background: rgba(255,250,240,0.9); /* 亮色 */
      border: 1px solid rgba(200,160,60,0.35);
      border-radius: 3.2vw /* 24px - 放大 */;
      color: #6b5018; /* 深色文字 */
      font-size: 2.7vw /* 20.25px - 再×1.5 */ !important;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
    }
    .ruyi-refresh-btn:hover {
      background: rgba(255,255,245,1);
      border-color: rgba(200,160,60,0.5);
      color: #4a3810; /* 更深色 */
    }

    /* 获取赐福按钮 */
    .ruyi-bless-btn {
      padding: 5.6vw /* 42px - ×4 */ 8vw /* 60px - 放大 */;
      background: linear-gradient(135deg, rgba(255,245,215,0.98), rgba(250,235,195,0.95));
      border: 0.667vw /* 5px */ solid rgba(200,160,60,0.55);
      border-radius: 7vw /* 52.5px - 放大 */;
      color: #5a4010; /* 深色文字 */
      font-size: 5.2vw /* 39px - ×2.6，接近3倍 */ !important;
      letter-spacing: 0.15em;
      cursor: pointer;
      font-family: inherit;
      font-weight: bold; /* 加粗让文字更清晰 */
      transition: all 0.3s;
      box-shadow: 0 1.6vw /* 12px */ 4.8vw /* 36px */ rgba(200,150,60,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .ruyi-bless-btn:hover {
      background: linear-gradient(135deg, rgba(255,252,235,1), rgba(255,245,210,0.98));
      border-color: rgba(200,160,60,0.75);
      color: #3a2808; /* hover更深色 */
      box-shadow: 0 2.4vw /* 18px */ 6.4vw /* 48px */ rgba(200,150,60,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
      transform: translateY(-0.0833rem /* -4px */);
    }
    .ruyi-bless-btn:active {
      transform: translateY(0);
    }

    /* ═══════════════════════════════════════════════════════ */

    /* ===== 公历/农历切换 Tab ===== */
    .date-tab-bar {
      display: flex;
      gap: 0;
      margin-bottom: 1.8667vw /* 14px */;
      border-radius: 0.8vw /* 6px */;
      overflow: hidden;
      border: 1px solid rgba(140,90,30,0.4);
      background: rgba(255,252,240,0.5);
    }
    .date-tab {
      flex: 1;
      padding: 1.8667vw /* 14px */ 0;
      border: none;
      background: transparent;
      color: #7a5020;
      font-size: 3.4vw /* 25.5px - 更大标签文字 */ !important;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: bold !important;
    }
    .date-tab:first-child { border-right: 1px solid rgba(140,90,30,0.3); }
    .date-tab.active {
      background: rgba(140,90,30,0.18);
      color: #4a2005;
    }
    .date-tab:hover:not(.active) { background: rgba(140,90,30,0.08); }

    /* 农历/公历回显提示 */
    .lunar-echo {
      font-size: 2.8vw /* 21px - 更大回显文字 */ !important;
      color: #7a5020 !important;
      background: rgba(240,200,100,0.15);
      border: 1px solid rgba(200,150,50,0.25);
      border-radius: 0.6667vw /* 5px */;
      padding: 0.6667vw /* 5px */ 1.3333vw /* 10px */;
      margin-top: -0.125rem /* -6px */;
      margin-bottom: 1.3333vw /* 10px */;
      min-height: 3.4667vw /* 26px */;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
    .lunar-echo:empty { display: none; }

    /* ===== 全站模块背景与文字统一覆盖 ===== */

    /* 1. 生辰录入+推演进度卡片：透明背景与页面融合 */
    #tmPage2 .card {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }
    #tmPage2 .card-title {
      color: #f5d580 !important;
      font-size: 1.05em !important;
      border-bottom: 1px solid rgba(245,200,80,0.25) !important;
      padding-bottom: 1.0667vw /* 8px */ !important;
      margin-bottom: 1.6vw /* 12px */ !important;
    }

    /* 八字排盘数值颜色加强 */
    #tmPage2 .bazi-item {
      background: rgba(0,0,0,0.38) !important;
      border: 1px solid rgba(220,170,60,0.3) !important;
    }
    #tmPage2 .bazi-label { color: #b09060 !important; }
    #tmPage2 .bazi-value { color: #ffe080 !important; }
    #tmPage2 .rizhu-display {
      background: rgba(0,0,0,0.3) !important;
      border: 1px solid rgba(220,170,60,0.25) !important;
      color: #e0c060 !important;
    }
    #tmPage2 .rizhu-value { color: #ffe080 !important; }
    #tmPage2 .wuxing-display { background: transparent !important; }
    #tmPage2 .wuxing-label { color: #a09070 !important; }
    /* 竖排八字 暗色主题 */
    #tmPage2 .bazi-v-col { background: rgba(0,0,0,0.35) !important; border-color: rgba(200,160,60,0.2) !important; }
    #tmPage2 .bazi-v-col-day { background: rgba(200,140,30,0.15) !important; border-color: rgba(240,180,60,0.5) !important; }
    #tmPage2 .bazi-v-pillar-label { color: rgba(200,170,100,0.8) !important; }
    #tmPage2 .bazi-v-shishen { color: rgba(190,165,100,0.65) !important; }
    #tmPage2 .bazi-v-daymaster-tag { color: #f0c060 !important; }

    /* 推演进度条文字去掉 x/50 文字，进度条背景融合 */
    #progressText { display: none !important; }
    #tmPage2 .progress-bar-bg {
      background: rgba(0,0,0,0.35) !important;
      height: 1.3333vw /* 10px */ !important;
      border-radius: 0.8vw /* 6px */ !important;
    }
    #tmPage2 .progress-bar-fill {
      background: linear-gradient(90deg, #a06020, #e8a040, #ffe080) !important;
    }


    /* ===== 50条推演结果模块：米色 ===== */
    .questions-grid {
      background: rgba(242,232,205,0.88) !important;
      border: 1px solid rgba(140,95,40,0.25) !important;
      border-radius: 0 0 1.3333vw /* 10px */ 1.3333vw /* 10px */ !important;
    }
    .q-card {
      background: rgba(255,250,235,0.85) !important;
      border: 1px solid rgba(150,105,45,0.28) !important;
    }
    .q-card:hover { background: rgba(255,252,240,0.95) !important; border-color: rgba(120,80,30,0.45) !important; }
    .q-card.done { border-left: 0.4vw /* 3px */ solid #3a8020 !important; }
    .q-card.error { border-left: 0.4vw /* 3px */ solid #a03020 !important; }
    .q-number {
      color: #5a3818 !important;
      background: rgba(200,175,130,0.45) !important;
    }
    .q-question {
      color: #3a1f08 !important;
    }
    .q-answer {
      color: #2d1505 !important;
      border-top: 1px solid rgba(140,95,40,0.2) !important;
    }
    .q-answer strong { color: #7a3010 !important; }
    .category-header {
      color: #2d1505 !important;
    }
    .category-badge {
      background: rgba(200,170,110,0.4) !important;
      color: #2d1505 !important;
    }

    /* ============================================================
       修身镜（XiuShen）专属样式
       ============================================================ */

    /* ── 步骤进度指示器 ── */
    .xs-stepper {
      display: flex; align-items: center; justify-content: center;
      margin: 0.8vw /* 6px */ 2.1333vw /* 16px */ 2.4vw /* 18px */;
      gap: 0;
    }
    .xs-step {
      display: flex; flex-direction: column; align-items: center; gap: 0.5333vw /* 4px */;
      flex-shrink: 0;
    }
    .xs-step-circle {
      width: 5.3333vw /* 40px - 750放大 */; height: 5.3333vw /* 40px */; border-radius: 50%;
      background: rgba(200,160,64,0.15);
      border: 1px solid rgba(200,160,64,0.35);
      color: rgba(245,220,150,0.45);
      font-size: 1em !important; font-weight: bold;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s;
    }
    .xs-step.active .xs-step-circle {
      background: rgba(200,160,64,0.35);
      border-color: #c8a040;
      color: #ffe080;
      box-shadow: 0 0 1.0667vw /* 8px */ rgba(200,160,64,0.4);
    }
    .xs-step.done .xs-step-circle {
      background: rgba(80,160,80,0.25);
      border-color: rgba(80,200,80,0.5);
      color: #80e080;
    }
    .xs-step-label {
      font-size: 0.85em !important; color: rgba(245,220,150,0.55);
      transition: color 0.3s;
    }
    .xs-step.active .xs-step-label { color: #f5d878; }
    .xs-step.done  .xs-step-label { color: rgba(128,220,128,0.7); }
    .xs-step-line {
      flex: 1; height: 1px; min-width: 2.4vw /* 18px */; max-width: 4.8vw /* 36px */;
      background: rgba(200,160,64,0.2);
      margin-bottom: 1.8667vw /* 14px */;
    }

    /* ── 步骤面板 ── */
    .xs-step-panel { }
    .xs-step-panel.fade-in { animation: fadeIn 0.35s ease; }

    /* ── 行动按钮 ── */
    .xs-action-btn {
      display: inline-block; padding: 2vw /* 15px */ 4vw /* 30px */;
      background: linear-gradient(135deg, #4a2a08, #7a4010);
      color: #f0c870; border: 1px solid rgba(180,120,40,0.5);
      border-radius: 0.8vw /* 6px */; font-size: 1.25em !important; font-weight: bold;
      cursor: pointer; transition: all 0.22s;
      font-family: inherit;
    }
    .xs-action-btn:hover {
      background: linear-gradient(135deg, #6a3c10, #9a5218);
      transform: translateY(-0.0208rem /* -1px */);
    }

    /* ── 灵根名片 ── */
    .xs-linggen-card {
      background: linear-gradient(135deg, rgba(30,15,5,0.92), rgba(60,30,8,0.88)) !important;
      border: 1px solid rgba(200,140,40,0.45) !important;
      text-align: center; padding: 3.2vw /* 24px */ 2.6667vw /* 20px */ !important;
    }
    .xs-linggen-title {
      font-size: 2em !important; font-weight: bold;
      color: #ffe080;
      text-shadow: 0 0 1.8667vw /* 14px */ rgba(240,180,40,0.6), 0.2667vw /* 2px */ 0.2667vw /* 2px */ 0.5333vw /* 4px */ rgba(0,0,0,0.8);
      letter-spacing: 0.15em; margin-bottom: 1.3333vw /* 10px */;
    }
    .xs-linggen-desc {
      font-size: 1em !important; color: rgba(245,220,160,0.75);
      line-height: 1.7; letter-spacing: 0.05em;
    }

    /* ── 五维雷达图容器 ── */
    .xs-radar-wrap {
      position: relative; width: 100%; max-width: 34.6667vw /* 260px */;
      margin: 0 auto 1.0667vw /* 8px */;
    }
    .xs-radar-labels {
      display: flex; justify-content: space-around; flex-wrap: wrap;
      margin-top: 0.5333vw /* 4px */; gap: 0.5333vw /* 4px */;
    }
    .xs-radar-lbl {
      font-size: 0.85em !important; color: rgba(245,220,160,0.8);
      text-align: center; line-height: 1.4;
    }
    .xs-radar-lbl span { color: #ffe080; font-weight: bold; }

    /* ── 五行能量条 ── */
    .xs-wuxing-bars { display: flex; flex-direction: column; gap: 1.3333vw /* 10px */; }
    .xs-wx-row {
      display: flex; align-items: center; gap: 1.0667vw /* 8px */;
    }
    .xs-wx-label {
      width: 4.2667vw /* 32px */; text-align: center; font-size: 1em !important; font-weight: bold; flex-shrink: 0;
    }
    .xs-wx-bar-bg {
      flex: 1; height: 1.0667vw /* 8px */; border-radius: 0.5333vw /* 4px */;
      background: rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .xs-wx-bar-fill {
      height: 100%; border-radius: 0.5333vw /* 4px */;
      transition: width 0.8s ease;
    }
    .xs-wx-pct { width: 5.3333vw /* 40px */; text-align: right; font-size: 0.95em !important; color: rgba(245,220,160,0.75); flex-shrink: 0; }
    /* 五行颜色 */
    .xs-wx-wood  .xs-wx-label { color: #7ec850; }
    .xs-wx-wood  .xs-wx-bar-fill { background: linear-gradient(90deg, #2d6a10, #7ec850); }

/* ============================================================
   阵法盘（Zhenfa）专属样式 - 设计图精确版
   ============================================================ */

#zhenfaPage {
  background: #f5f0e6;
  color: #5a4a3a;
  min-height: 100vh;
}

#zhenfaPage .dc-inner {
  padding: 1.3333vw /* 10px */;
  max-width: 100vw /* 750px */;
  margin: 0 auto;
}

/* 顶部标题 */
.zhenfa-header-new {
  text-align: center;
  padding: 0.6667vw /* 5px */ 0 1.6vw /* 12px */;
  border-bottom: 1px solid rgba(139,105,20,0.1);
  margin-bottom: 1.3333vw /* 10px */;
  position: relative;
}

.zhenfa-header-new .zhenfa-back-btn {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border: 1px solid rgba(139,105,20,0.3);
  color: #8b6914;
  padding: 0.8vw /* 6px */ 2vw /* 15px */;
  border-radius: 0.6667vw /* 5px */;
  font-size: 0.95em !important;
  cursor: pointer;
}

.zhenfa-header-new .zhenfa-title {
  font-size: 3.5vw /* 26.25px - 750放大 */;
  color: #8b6914;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 0;
}

.zhenfa-header-new .zhenfa-subtitle {
  font-size: 1.8vw /* 13.5px - 750放大 */;
  color: rgba(139,105,20,0.5);
  margin-top: 0.2667vw /* 2px */;
}

/* 顶部导航栏 */
.zhenfa-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
  background: rgba(255,255,255,0.5);
  border-radius: 1.0667vw /* 8px */;
  margin-bottom: 1.3333vw /* 10px */;
}

.zhenfa-back-btn {
  background: rgba(139,105,20,0.15);
  border: 1px solid rgba(139,105,20,0.3);
  border-radius: 0.6667vw /* 5px */;
  padding: 1.0667vw /* 8px */ 2.1333vw /* 16px */;
  font-size: 1.85vw /* 13.9px - 750放大 */;
  color: #8b6914;
  cursor: pointer;
  font-family: inherit;
}

.zhenfa-back-btn:hover {
  background: rgba(139,105,20,0.25);
}

.zhenfa-title {
  font-size: 2.6vw /* 19.5px - 750放大 */;
  font-weight: bold;
  color: #5a4a3a;
  letter-spacing: 0.2667vw /* 2px */;
}

.zhenfa-header-spacer {
  width: 8vw /* 60px */;
}

/* 主体三栏布局 - 人物和属性等宽大，装备槽小且正方形 */
.zhenfa-body-grid {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 2.5fr;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 1.3333vw /* 10px */;
  align-items: stretch;
}

/* 左侧：人物（高度自适应，与右侧对齐） */
.zhenfa-left-col {
  display: flex;
  flex-direction: column;
}

.zhenfa-avatar-wrapper {
  background: rgba(255,255,255,0.4);
  border-radius: 1.0667vw /* 8px */;
  flex: 1;
  min-height: 37.3333vw /* 280px */;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(139,105,20,0.08);
}

.zhenfa-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.zhenfa-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0e6d6, #e6dcc8);
}

/* 灵气加成 - 最顶部 */
.zhenfa-boost-top {
  background: rgba(200,200,255,0.35);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
  margin-bottom: 1.3333vw /* 10px */;
  text-align: center;
}

.boost-top-label {
  font-size: 1.8vw /* 13.5px - 750放大 */;
  color: #8b6914;
  margin-bottom: 0.5333vw /* 4px */;
}

.boost-top-bar {
  display: flex;
  justify-content: center;
  gap: 2.6667vw /* 20px */;
  font-size: 1.85vw /* 13.9px - 750放大 */;
  color: #5a4a3a;
}

/* 灵气加成 - 标题下方长条横排（兼容） */
.zhenfa-boost-header {
  display: flex;
  justify-content: center;
  gap: 2.1333vw /* 16px */;
  margin-top: 1.0667vw /* 8px */;
  padding: 0.8vw /* 6px */ 0;
  background: rgba(200,200,255,0.25);
  border-radius: 0.5333vw /* 4px */;
  font-size: 1.05em !important;
}

.boost-h-item {
  color: #5a4a3a;
  white-space: nowrap;
}

/* 灵气加成 - 旧版低矮长条横排（兼容） */
.zhenfa-boost-bar {
  background: rgba(200,200,255,0.3);
  border-radius: 0.5333vw /* 4px */;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  font-size: 0.95em !important;
}

.boost-label {
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 0.4vw /* 3px */;
}

.boost-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5333vw /* 4px */ 1.0667vw /* 8px */;
}

.boost-item {
  color: #5a4a3a;
  white-space: nowrap;
}

/* 旧版灵气加成样式（兼容） */
.zhenfa-boost-box {
  background: rgba(200,200,255,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 1.3333vw /* 10px */;
  font-size: 1em !important;
}

.boost-title-small {
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 0.5333vw /* 4px */;
}

.boost-content {
  color: rgba(90,74,58,0.8);
  line-height: 1.4;
}

/* 中间：装备槽位 */
.zhenfa-center-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

.slots-container {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
  width: 100%;
}

/* 竖排文字装备槽位 */
.slots-text-vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.8vw /* 6px */;
  width: 100%;
  max-width: 7.3333vw /* 55px */;
  padding: 0;
}

.slot-text-item {
  background: rgba(212,165,116,0.25);
  border: 1px solid rgba(212,165,116,0.4);
  border-radius: 0.5333vw /* 4px */;
  padding: 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9em !important;
  color: #8b6914;
  font-weight: bold;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.6667vw /* 50px */;
  height: 6.6667vw /* 50px */;
  aspect-ratio: 1/1;
}

.slot-text-item:hover {
  background: rgba(212,165,116,0.35);
}

.slot-text-item.selected {
  border-color: #8b6914;
  box-shadow: 0 0 0.8vw /* 6px */ rgba(139,105,20,0.3);
}

.slot-text-item.has-item {
  background: rgba(139,105,20,0.2);
}

/* 竖排小方形装备槽位（兼容） */
.slots-container-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
  width: 100%;
}

.slot-mini {
  background: rgba(212,165,116,0.2);
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 0.5333vw /* 4px */;
  padding: 0.5333vw /* 4px */ 0.8vw /* 6px */;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  min-height: 3.7333vw /* 28px */;
}

.slot-mini:hover {
  background: rgba(212,165,116,0.3);
}

.slot-mini.selected {
  border-color: #8b6914;
  box-shadow: 0 0 0.5333vw /* 4px */ rgba(139,105,20,0.25);
}

.slot-mini.has-item {
  background: rgba(139,105,20,0.15);
}

.slot-mini-name {
  font-size: 0.9em !important;
  color: #8b6914;
  font-weight: bold;
  width: 5.3333vw /* 40px */;
}

.slot-mini-icon {
  width: 1.8667vw /* 14px */;
  height: 1.8667vw /* 14px */;
  border-radius: 50%;
  flex-shrink: 0;
}

.slot-expand-icon {
  font-size: 0.6em;
  color: #8b6914;
  margin-left: auto;
}

/* 子槽位 */
.slot-mini-group {
  display: flex;
  flex-direction: column;
  gap: 0.2667vw /* 2px */;
}

.slot-sub-items {
  display: flex;
  flex-direction: column;
  gap: 0.2667vw /* 2px */;
  padding-left: 1.6vw /* 12px */;
}

.slot-sub {
  background: rgba(212,165,116,0.12);
  border: 1px solid rgba(212,165,116,0.25);
  border-radius: 0.4vw /* 3px */;
  padding: 0.4vw /* 3px */ 0.6667vw /* 5px */;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.6667vw /* 5px */;
  min-height: 2.9333vw /* 22px */;
}

.slot-sub:hover {
  background: rgba(212,165,116,0.2);
}

.slot-sub.selected {
  border-color: #8b6914;
}

.slot-sub.has-item {
  background: rgba(139,105,20,0.1);
}

.slot-sub-name {
  font-size: 0.65em;
  color: #8b6914;
  width: 3.7333vw /* 28px */;
}

.slot-sub-icon {
  width: 1.3333vw /* 10px */;
  height: 1.3333vw /* 10px */;
  border-radius: 50%;
}

/* 方形装备槽位 - 统一大小 */
.slot-square {
  background: rgba(212,165,116,0.2);
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 0.8vw /* 6px */;
  aspect-ratio: 1;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-square:hover {
  background: rgba(212,165,116,0.3);
}

.slot-square.selected {
  border-color: #8b6914;
  box-shadow: 0 0 0.8vw /* 6px */ rgba(139,105,20,0.25);
}

.slot-square.has-item {
  background: rgba(139,105,20,0.15);
}

.slot-square .slot-icon {
  width: 60%;
  height: 60%;
  border-radius: 50%;
}

.slot-square.slot-small .slot-icon {
  width: 55%;
  height: 55%;
}

/* 旧版装备槽位样式（兼容） */
.slot-box {
  background: rgba(212,165,116,0.2);
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 0.5333vw /* 4px */;
  padding: 0.8vw /* 6px */ 0.5333vw /* 4px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 4.2667vw /* 32px */;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slot-box:hover {
  background: rgba(212,165,116,0.3);
}

.slot-box.selected {
  border-color: #8b6914;
  box-shadow: 0 0 0.8vw /* 6px */ rgba(139,105,20,0.25);
}

.slot-box.has-item {
  background: rgba(139,105,20,0.15);
}

.slot-box .slot-name {
  font-size: 0.8em;
  color: #8b6914;
  font-weight: bold;
}

.slot-box .slot-item-name {
  font-size: 0.6em;
  color: rgba(90,74,58,0.7);
  margin-top: 0.2667vw /* 2px */;
}

.slot-box.slot-large {
  min-height: 6.6667vw /* 50px */;
}

.slots-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5333vw /* 4px */;
}

.slot-box.slot-small {
  min-height: 4.8vw /* 36px */;
  padding: 0.5333vw /* 4px */ 0.2667vw /* 2px */;
}

/* 右侧：属性面板 */
.zhenfa-right-col {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
}

.stats-container {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
}

/* 新属性面板 - 所有属性可点击，弹出提示框 */
.stats-container-new {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
  height: 100%;
  position: relative;
}

/* 属性列表 - 全部可点击 */
.stats-list-all {
  background: rgba(200,230,200,0.3);
  border-radius: 1.0667vw /* 8px */;
  padding: 0.8vw /* 6px */;
  display: flex;
  flex-direction: column;
  gap: 0.4vw /* 3px */;
  flex: 1;
}

.stat-item-btn {
  background: rgba(255,255,255,0.4);
  border-radius: 0.6667vw /* 5px */;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item-btn:hover {
  background: rgba(255,255,255,0.6);
  border-color: rgba(139,105,20,0.2);
}

.stat-item-btn:active {
  background: rgba(255,255,255,0.8);
}

.stat-label-all {
  font-size: 0.9em;
  color: #5a4a3a;
  font-weight: bold;
}

.stat-value-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.stat-arrow {
  font-size: 0.85em;
  font-weight: bold;
}

.stat-arrow.arrow-up {
  color: #7EC850;
}

.stat-arrow.arrow-down {
  color: #E74C3C;
}

.stat-value-all {
  font-size: 1em;
  font-weight: bold;
  color: #888;
}

.stat-value-all.positive {
  color: #7EC850;
}

.stat-value-all.negative {
  color: #E74C3C;
}

/* 属性提示框 - 绝对定位，不拉伸布局 */
.stat-tooltip-popup {
  position: absolute;
  background: rgba(255,250,240,0.98);
  border: 1px solid rgba(139,105,20,0.3);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */;
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0,0,0,0.15);
  z-index: 100;
  margin: 0 0.5333vw /* 4px */;
}

.stat-tooltip-title {
  font-size: 1em;
  font-weight: bold;
  color: #8b6914;
  margin-bottom: 0.8vw /* 6px */;
  padding-right: 2.6667vw /* 20px */;
}

.stat-tooltip-desc {
  font-size: 0.8em;
  color: #5a4a3a;
  line-height: 1.5;
}

.stat-tooltip-close {
  position: absolute;
  top: 0.8vw /* 6px */;
  right: 1.0667vw /* 8px */;
  background: none;
  border: none;
  font-size: 1.2em;
  color: #8b6914;
  cursor: pointer;
  padding: 0;
  width: 2.6667vw /* 20px */;
  height: 2.6667vw /* 20px */;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-tooltip-close:hover {
  color: #5a4a3a;
}



/* 灵气值 - 竖向排列 */
.wuxing-horizontal {
  background: rgba(230,200,230,0.3);
  border-radius: 0.8vw /* 6px */;
  padding: 1.3333vw /* 10px */ 1.0667vw /* 8px */;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  width: 100%;
  margin-top: 0.8vw /* 6px */;
}

.wuxing-h-title {
  font-size: 0.85em;
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 0.8vw /* 6px */;
  text-align: center;
}

/* 三行排列容器 */
.wuxing-h-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
  width: 100%;
}

/* 每一行 */
.wuxing-h-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

/* 数值行 */
.wuxing-h-row.values {
  font-size: 1em;
  font-weight: bold;
  color: #8b6914;
}

/* 五行文字行 */
.wuxing-h-row.labels {
  font-size: 0.8em;
  color: #5a4a3a;
}

/* 颜色球行 */
.wuxing-h-row.dots {
  gap: 1.0667vw /* 8px */;
}

.wuxing-h-dot {
  width: 1.3333vw /* 10px */;
  height: 1.3333vw /* 10px */;
  border-radius: 50%;
  flex-shrink: 0;
}

.wuxing-h-text {
  color: #5a4a3a;
}

.wuxing-h-value {
  font-size: 0.85em;
  color: #8b6914;
  font-weight: bold;
  margin-left: 0.4vw /* 3px */;
}

/* 五行调和 - 竖排（兼容） */
.wuxing-vertical {
  background: rgba(230,200,230,0.3);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
}

.wuxing-v-title {
  font-size: 0.8em;
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 0.8vw /* 6px */;
  text-align: center;
}

.wuxing-v-list {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
}

.wuxing-v-item {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  font-size: 0.8em;
}

.wuxing-v-dot {
  width: 1.3333vw /* 10px */;
  height: 1.3333vw /* 10px */;
  border-radius: 50%;
}

.wuxing-v-text {
  color: #5a4a3a;
}

/* 提示框 - 新版，加宽并向左与装备槽对齐 */
.tips-panel-new {
  background: rgba(255,255,200,0.4);
  border: 1px solid rgba(200,180,100,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
  font-size: 0.75em;
  width: calc(100% + 9.3333vw /* 70px */);
  margin-left: -1.4583rem /* -70px */;
  margin-top: 1.0667vw /* 8px */;
}

/* 提示框 - 紧凑横排版 */
.tips-panel-compact {
  background: rgba(255,255,200,0.4);
  border: 1px solid rgba(200,180,100,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  font-size: 0.7em;
  width: calc(100% + 9.3333vw /* 70px */);
  margin-left: -1.4583rem /* -70px */;
  margin-top: 0.8vw /* 6px */;
  display: flex;
  align-items: flex-start;
  gap: 0.8vw /* 6px */;
  line-height: 1.4;
}

.tips-panel-compact .tips-label {
  font-weight: bold;
  color: #8b6914;
  white-space: nowrap;
  flex-shrink: 0;
}

.tips-panel-compact .tips-content {
  color: #5a4a3a;
}

.tips-panel-new .tips-title {
  font-weight: bold;
  color: #8b6914;
  margin-bottom: 0.5333vw /* 4px */;
}

.tips-panel-new .tips-text {
  color: #5a4a3a;
  line-height: 1.5;
}

/* 加大属性面板（兼容） */
.stats-container-large {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  height: 100%;
}

.stats-list-large {
  background: rgba(200,230,200,0.3);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */ 1.8667vw /* 14px */;
  flex: 1;
}

.stat-row-large {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6667vw /* 5px */ 0;
  font-size: 0.9em;
}

.stat-label-large {
  color: #5a4a3a;
  font-size: 1em;
  font-weight: 500;
}

.stat-value-large {
  font-weight: bold;
  color: #888;
  min-width: 7.3333vw /* 55px */;
  text-align: right;
  font-size: 1.05em;
}

.stat-value-large.positive {
  color: #7EC850;
}

.stat-value-large.negative {
  color: #E74C3C;
}

/* 属性列表 - 浅绿色背景 */
.stats-list {
  background: rgba(200,230,200,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */;
}

.stat-row-new {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  padding: 0.4vw /* 3px */ 0;
  font-size: 0.75em;
}

.stat-label {
  width: 4.2667vw /* 32px */;
  color: #5a4a3a;
}

.stat-bar-bg {
  flex: 1;
  height: 0.8vw /* 6px */;
  background: rgba(0,0,0,0.1);
  border-radius: 0.4vw /* 3px */;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 0.4vw /* 3px */;
}

.stat-num {
  width: 2.6667vw /* 20px */;
  text-align: right;
  color: #8b6914;
  font-weight: bold;
}

/* 紧凑属性列表 - 仅显示变化值，无进度条 */
.stats-list-compact {
  background: rgba(200,230,200,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 0.8vw /* 6px */ 1.0667vw /* 8px */;
}

.stat-row-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2667vw /* 2px */ 0;
  font-size: 0.7em;
}

.stat-label-compact {
  color: #5a4a3a;
  font-size: 0.9em;
}

.stat-change {
  font-weight: bold;
  color: #888;
}

.stat-change.positive {
  color: #7EC850;
}

.stat-change.negative {
  color: #E74C3C;
}

/* 贴边属性列表 - 带箭头 */
.stats-list-arrow {
  background: rgba(200,230,200,0.3);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
}

.stat-row-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4vw /* 3px */ 0;
  font-size: 0.75em;
}

.stat-label-arrow {
  color: #5a4a3a;
  font-size: 0.9em;
}

.stat-value-arrow {
  font-weight: bold;
  color: #888;
  min-width: 6vw /* 45px */;
  text-align: right;
}

.stat-value-arrow.positive {
  color: #7EC850;
}

.stat-value-arrow.negative {
  color: #E74C3C;
}

/* 提示框 - 浅黄色 */
.tips-panel {
  background: rgba(255,255,200,0.35);
  border: 1px solid rgba(200,180,100,0.2);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */;
  font-size: 0.7em;
}

.tips-title {
  font-weight: bold;
  color: #8b6914;
  margin-bottom: 0.5333vw /* 4px */;
}

.tips-text {
  color: rgba(90,74,58,0.75);
  line-height: 1.4;
}

/* 五行调和 - 浅紫色 */
.wuxing-panel {
  background: rgba(230,200,230,0.25);
  border-radius: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */;
}

.wuxing-title {
  font-size: 0.8em;
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 0.8vw /* 6px */;
}

.wuxing-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
}

.wuxing-bar-item {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  font-size: 0.75em;
}

.wuxing-dot {
  width: 1.3333vw /* 10px */;
  height: 1.3333vw /* 10px */;
  border-radius: 50%;
}

.wuxing-text {
  color: #5a4a3a;
}

/* 背包区域 - 浅青色 */
.zhenfa-backpack-section {
  background: rgba(180,230,230,0.25);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.3333vw /* 10px */;
}

.backpack-container {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
}

.backpack-tabs {
  display: flex;
  gap: 0.8vw /* 6px */;
  justify-content: center;
}

.bp-tab {
  background: rgba(255,220,180,0.5);
  border: 1px solid rgba(212,165,116,0.25);
  border-radius: 0.5333vw /* 4px */;
  padding: 0.6667vw /* 5px */ 1.8667vw /* 14px */;
  font-size: 0.8em;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.2s;
}

.bp-tab:hover {
  background: rgba(255,220,180,0.7);
}

.bp-tab.active {
  background: rgba(212,165,116,0.4);
  border-color: rgba(139,105,20,0.35);
  font-weight: bold;
}

.bp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.0667vw /* 8px */;
}

.bp-cell {
  aspect-ratio: 1;
  background: rgba(255,245,220,0.7);
  border: 1px solid rgba(212,165,116,0.25);
  border-radius: 0.5333vw /* 4px */;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0.8vw /* 6px */ 0.5333vw /* 4px */;
}

.bp-cell:hover {
  background: rgba(255,245,220,0.9);
  transform: translateY(-0.0417rem /* -2px */);
}

.bp-cell.equipped {
  border-color: rgba(139,105,20,0.4);
  background: rgba(139,105,20,0.12);
}

.bp-wuxing {
  width: 2.6667vw /* 20px */;
  height: 2.6667vw /* 20px */;
  border-radius: 50%;
  margin-bottom: 0.5333vw /* 4px */;
}

.bp-name {
  font-size: 0.65em;
  color: #5a4a3a;
  text-align: center;
  line-height: 1.2;
}

.bp-cell.preview {
  border-color: #8b6914;
  box-shadow: 0 0 1.0667vw /* 8px */ rgba(139,105,20,0.3);
}

.bp-equipped-mark {
  position: absolute;
  top: 0.2667vw /* 2px */;
  right: 0.2667vw /* 2px */;
  font-size: 0.5em;
  color: #8b6914;
  background: rgba(255,255,255,0.8);
  padding: 1px 0.4vw /* 3px */;
  border-radius: 0.2667vw /* 2px */;
}

.bp-cell {
  position: relative;
}

/* 装备预览弹窗 */
.item-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.item-preview-modal {
  background: #faf8f5;
  border-radius: 1.6vw /* 12px */;
  padding: 2.6667vw /* 20px */;
  width: 90%;
  max-width: 42.6667vw /* 320px */;
  box-shadow: 0 1.0667vw /* 8px */ 4.2667vw /* 32px */ rgba(0,0,0,0.2);
  position: relative;
}

.preview-close-btn {
  position: absolute;
  top: 1.3333vw /* 10px */;
  right: 1.3333vw /* 10px */;
  background: none;
  border: none;
  font-size: 1.5em;
  color: #8b6914;
  cursor: pointer;
  width: 4vw /* 30px */;
  height: 4vw /* 30px */;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 1.6vw /* 12px */;
  margin-bottom: 1.6vw /* 12px */;
  padding-right: 4vw /* 30px */;
}

.preview-wuxing-icon {
  width: 5.3333vw /* 40px */;
  height: 5.3333vw /* 40px */;
  border-radius: 50%;
  flex-shrink: 0;
}

.preview-title {
  flex: 1;
}

.preview-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.2667vw /* 2px */;
}

.preview-quality {
  font-size: 0.75em;
  color: #888;
}

.preview-desc {
  font-size: 0.8em;
  color: #5a4a3a;
  line-height: 1.5;
  margin-bottom: 2.1333vw /* 16px */;
  padding: 1.3333vw /* 10px */;
  background: rgba(139,105,20,0.05);
  border-radius: 0.8vw /* 6px */;
}

.preview-effects {
  margin-bottom: 2.1333vw /* 16px */;
}

.preview-section-title {
  font-size: 0.8em;
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 1.0667vw /* 8px */;
}

.preview-effect-row {
  display: flex;
  justify-content: space-between;
  padding: 0.8vw /* 6px */ 0;
  border-bottom: 1px solid rgba(139,105,20,0.1);
}

.preview-effect-row:last-child {
  border-bottom: none;
}

.effect-attr {
  font-size: 0.85em;
  color: #5a4a3a;
}

.effect-value {
  font-size: 0.85em;
  font-weight: bold;
}

.effect-value.positive {
  color: #4CAF50;
}

.effect-value.negative {
  color: #E74C3C;
}

.preview-no-effect {
  font-size: 0.8em;
  color: #999;
  text-align: center;
  padding: 1.3333vw /* 10px */;
}

.preview-actions {
  display: flex;
  gap: 1.3333vw /* 10px */;
}

.preview-btn {
  flex: 1;
  padding: 1.6vw /* 12px */;
  border: none;
  border-radius: 0.8vw /* 6px */;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.preview-btn.equip {
  background: linear-gradient(135deg, #8b6914, #a67c2e);
  color: white;
}

.preview-btn.equip:hover {
  background: linear-gradient(135deg, #6b4f0a, #8b6914);
}

.preview-btn.unequip {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white;
}

.preview-btn.unequip:hover {
  background: linear-gradient(135deg, #a93226, #c0392b);
}

.preview-btn.disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
}

/* 旧样式保留兼容 */
.zhenfa-slot {
  background: rgba(30,25,20,0.6);
  border: 1px solid rgba(200,160,80,0.2);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.zhenfa-slot:hover {
  background: rgba(50,40,30,0.7);
  border-color: rgba(200,160,80,0.4);
}

.zhenfa-slot.selected {
  border-color: #d4b87a;
  box-shadow: 0 0 1.3333vw /* 10px */ rgba(212,184,122,0.3);
}

.zhenfa-slot.equipped {
  background: rgba(60,50,30,0.5);
  border-color: rgba(200,160,80,0.35);
}

.slot-icon {
  font-size: 1.4em;
  width: 4.2667vw /* 32px */;
  text-align: center;
}

.slot-name {
  font-size: 0.8em;
  color: rgba(200,180,140,0.8);
  width: 5.3333vw /* 40px */;
}

.slot-item {
  flex: 1;
  font-size: 0.85em;
  color: #c8a860;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-tag {
  position: absolute;
  top: 0.2667vw /* 2px */;
  right: 0.5333vw /* 4px */;
  font-size: 0.6em;
  color: rgba(200,160,80,0.6);
  background: rgba(0,0,0,0.4);
  padding: 1px 0.5333vw /* 4px */;
  border-radius: 0.4vw /* 3px */;
}

/* 双手双足行 */
.zhenfa-hands-row,
.zhenfa-feet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.0667vw /* 8px */;
}

.zhenfa-slot-hand,
.zhenfa-slot-foot {
  padding: 1.0667vw /* 8px */;
}

.zhenfa-slot-hand .slot-name,
.zhenfa-slot-foot .slot-name {
  font-size: 0.9em !important;
}

/* 服装槽位 */
.zhenfa-slot-clothing {
  background: rgba(40,30,20,0.5);
  border-style: dashed;
}

/* 右侧属性面板 */
.zhenfa-stats-panel h3 {
  font-size: 1.2em !important;
  color: #d4b87a;
  margin-bottom: 1.6vw /* 12px */;
  text-align: center;
}

.zhenfa-today-boost {
  background: rgba(200,160,80,0.1);
  border: 1px solid rgba(200,160,80,0.25);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */;
  margin-bottom: 2.1333vw /* 16px */;
  text-align: center;
}

.boost-title {
  font-size: 0.9em;
  color: #e8c070;
  font-weight: bold;
}

.boost-effect {
  font-size: 0.8em;
  color: #80c080;
  margin: 0.5333vw /* 4px */ 0;
}

.boost-colors {
  font-size: 0.75em;
  color: rgba(200,180,140,0.7);
}

/* 核心属性条 */
.zhenfa-core-stats {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 2.1333vw /* 16px */;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 1.0667vw /* 8px */;
}

.stat-name {
  width: 5.3333vw /* 40px */;
  font-size: 0.8em;
  color: rgba(200,180,140,0.9);
}

.stat-bar {
  flex: 1;
  height: 1.3333vw /* 10px */;
  background: rgba(0,0,0,0.4);
  border-radius: 0.6667vw /* 5px */;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 0.6667vw /* 5px */;
  transition: width 0.5s ease;
}

.stat-value {
  width: 4.2667vw /* 32px */;
  text-align: right;
  font-size: 0.85em;
  color: #e8c070;
  font-weight: bold;
}

/* 气运属性 */
.zhenfa-fortune-stats {
  display: flex;
  justify-content: space-around;
  background: rgba(0,0,0,0.3);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */;
  margin-bottom: 2.1333vw /* 16px */;
}

.fortune-item {
  text-align: center;
}

.fortune-icon {
  font-size: 1.4em;
  display: block;
}

.fortune-name {
  font-size: 0.7em;
  color: rgba(200,180,140,0.7);
  display: block;
  margin: 0.2667vw /* 2px */ 0;
}

.fortune-value {
  font-size: 1em;
  color: #e8c070;
  font-weight: bold;
}

/* 五行调和 */
.zhenfa-wuxing-balance h4 {
  font-size: 1.05em !important;
  color: #d4b87a;
  margin-bottom: 1.0667vw /* 8px */;
}

.balance-score {
  font-size: 0.8em;
  color: rgba(200,180,140,0.8);
  margin-bottom: 1.3333vw /* 10px */;
}

.wuxing-bars {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
}

.wuxing-item {
  display: flex;
  align-items: center;
  gap: 1.0667vw /* 8px */;
}

.wuxing-name {
  width: 2.6667vw /* 20px */;
  font-size: 0.85em;
  font-weight: bold;
}

.wuxing-bar {
  flex: 1;
  height: 0.8vw /* 6px */;
  background: rgba(0,0,0,0.4);
  border-radius: 0.4vw /* 3px */;
  overflow: hidden;
}

.wuxing-fill {
  height: 100%;
  border-radius: 0.4vw /* 3px */;
  transition: width 0.5s ease;
}

/* 背包区域 */
.zhenfa-backpack-section {
  background: rgba(0,0,0,0.3);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
  margin-bottom: 2.1333vw /* 16px */;
}

.zhenfa-backpack-section h3 {
  font-size: 1.2em !important;
  color: #d4b87a;
  margin-bottom: 1.6vw /* 12px */;
}

.backpack-tabs {
  display: flex;
  gap: 1.0667vw /* 8px */;
  margin-bottom: 1.6vw /* 12px */;
  overflow-x: auto;
  padding-bottom: 0.5333vw /* 4px */;
}

.backpack-tabs::-webkit-scrollbar {
  height: 0.4vw /* 3px */;
}

.backpack-tabs::-webkit-scrollbar-thumb {
  background: rgba(200,160,80,0.3);
  border-radius: 0.2667vw /* 2px */;
}

.tab-btn {
  background: rgba(30,25,20,0.6);
  border: 1px solid rgba(200,160,80,0.2);
  color: rgba(200,180,140,0.7);
  padding: 0.8vw /* 6px */ 1.6vw /* 12px */;
  border-radius: 0.5333vw /* 4px */;
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab-btn:hover {
  background: rgba(50,40,30,0.7);
  border-color: rgba(200,160,80,0.35);
}

.tab-btn.active {
  background: rgba(200,160,80,0.2);
  border-color: rgba(200,160,80,0.5);
  color: #e8c070;
}

/* 装备网格 */
.backpack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.6667vw /* 80px */, 1fr));
  gap: 1.3333vw /* 10px */;
  max-height: 26.6667vw /* 200px */;
  overflow-y: auto;
}

.backpack-item {
  background: rgba(30,25,20,0.6);
  border: 1px solid rgba(200,160,80,0.2);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.3333vw /* 10px */ 0.8vw /* 6px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.backpack-item:hover {
  background: rgba(50,40,30,0.7);
  border-color: rgba(200,160,80,0.4);
  transform: translateY(-0.0417rem /* -2px */);
}

.backpack-item.equipped {
  border-color: rgba(120,200,120,0.5);
  background: rgba(40,60,40,0.5);
}

.item-icon {
  width: 5.3333vw /* 40px */;
  height: 5.3333vw /* 40px */;
  margin: 0 auto 0.8vw /* 6px */;
  border-radius: 50%;
  border: 0.2667vw /* 2px */ solid;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wuxing-mark {
  font-size: 0.9em;
  font-weight: bold;
}

.item-name {
  font-size: 0.75em;
  color: #c8a860;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-quality {
  font-size: 0.65em;
  margin-top: 0.2667vw /* 2px */;
}

.equipped-mark {
  position: absolute;
  top: 0.2667vw /* 2px */;
  right: 0.2667vw /* 2px */;
  font-size: 0.55em;
  color: #80c080;
  background: rgba(0,0,0,0.5);
  padding: 1px 0.4vw /* 3px */;
  border-radius: 0.2667vw /* 2px */;
}

/* 切换按钮 */
.zhenfa-analysis-btn {
  width: 100%;
  padding: 2.6667vw /* 20px */;
  background: linear-gradient(135deg, rgba(120,80,30,0.8), rgba(180,120,40,0.8));
  border: 1px solid rgba(200,160,80,0.4);
  color: #f0d090;
  font-size: 1em;
  font-weight: bold;
  border-radius: 1.0667vw /* 8px */;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.zhenfa-analysis-btn:hover {
  background: linear-gradient(135deg, rgba(140,100,40,0.9), rgba(200,140,50,0.9));
  box-shadow: 0 0.5333vw /* 4px */ 2vw /* 15px */ rgba(200,160,80,0.3);
}

/* 阵法推演页 */
.zhenfa-analysis-page {
  padding-bottom: 2.6667vw /* 20px */;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  gap: 2.1333vw /* 16px */;
}

.analysis-section {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(200,160,80,0.2);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
}

.analysis-section h3 {
  font-size: 1em;
  color: #d4b87a;
  margin-bottom: 1.6vw /* 12px */;
  padding-bottom: 1.0667vw /* 8px */;
  border-bottom: 1px solid rgba(200,160,80,0.2);
}

/* 总评分 */
.overall-score {
  text-align: center;
  padding: 2.6667vw /* 20px */;
}

.score-number {
  font-size: 3em;
  font-weight: bold;
  color: #e8c070;
  text-shadow: 0 0 2.6667vw /* 20px */ rgba(232,192,112,0.4);
}

.score-label {
  font-size: 0.9em;
  color: rgba(200,180,140,0.8);
  margin: 0.5333vw /* 4px */ 0;
}

.score-status {
  font-size: 1.1em;
  color: #80c080;
  font-weight: bold;
}

/* 命理信息 */
.sizhu-info {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3333vw /* 10px */;
  background: rgba(30,25,20,0.5);
  border-radius: 0.8vw /* 6px */;
}

.info-label {
  font-size: 0.85em;
  color: rgba(200,180,140,0.7);
}

.info-value {
  font-size: 0.9em;
  font-weight: bold;
}

/* 建议列表 */
.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
}

.suggestion-item {
  display: flex;
  gap: 1.3333vw /* 10px */;
  padding: 1.3333vw /* 10px */;
  background: rgba(30,25,20,0.5);
  border-radius: 0.8vw /* 6px */;
  border-left: 0.4vw /* 3px */ solid rgba(200,160,80,0.4);
}

.suggestion-item.high {
  border-left-color: #e8c070;
  background: rgba(60,50,30,0.5);
}

.suggestion-type {
  font-size: 0.75em;
  color: rgba(200,180,140,0.6);
  background: rgba(0,0,0,0.3);
  padding: 0.2667vw /* 2px */ 0.8vw /* 6px */;
  border-radius: 0.4vw /* 3px */;
  white-space: nowrap;
}

.suggestion-content {
  flex: 1;
  font-size: 0.85em;
  color: #d8c8a8;
  line-height: 1.5;
}

/* 当前配置 */
.current-equip {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
}

.equip-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  background: rgba(30,25,20,0.5);
  border-radius: 0.8vw /* 6px */;
  font-size: 0.85em;
}

.equip-slot {
  color: rgba(200,180,140,0.6);
  width: 6.6667vw /* 50px */;
}

.equip-name {
  flex: 1;
  font-weight: bold;
}

.equip-wuxing {
  font-size: 0.8em;
  color: rgba(200,180,140,0.5);
}

.empty-tip {
  text-align: center;
  color: rgba(200,180,140,0.5);
  padding: 2.6667vw /* 20px */;
  font-size: 0.9em;
}

/* 阵法盘入口按钮（如意笏下方） */
.zhenfa-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.0667vw /* 8px */;
  width: calc(100% - 4.2667vw /* 32px */);
  margin: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  padding: 1.8667vw /* 14px */ 2.6667vw /* 20px */;
  background: linear-gradient(135deg, rgba(80,40,20,0.9), rgba(140,80,30,0.9));
  border: 1px solid rgba(200,140,80,0.4);
  border-radius: 1.3333vw /* 10px */;
  color: #f0c090;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.zhenfa-entry-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}

.zhenfa-entry-btn:hover::before {
  left: 100%;
}

.zhenfa-entry-btn:hover {
  background: linear-gradient(135deg, rgba(100,50,25,0.95), rgba(160,90,35,0.95));
  box-shadow: 0 0.5333vw /* 4px */ 2.6667vw /* 20px */ rgba(200,140,80,0.3);
  transform: translateY(-0.0417rem /* -2px */);
}

.zhenfa-entry-btn .icon {
  font-size: 1.3em;
}

.zhenfa-entry-btn .text {
  letter-spacing: 0.1em;
}

.zhenfa-entry-btn .subtext {
  font-size: 0.9em !important;
  color: rgba(240,192,144,0.75);
  font-weight: normal;
  margin-left: 1.0667vw /* 8px */;
}
    .xs-wx-fire  .xs-wx-label { color: #ff7040; }
    .xs-wx-fire  .xs-wx-bar-fill { background: linear-gradient(90deg, #8b2000, #ff7040); }
    .xs-wx-earth .xs-wx-label { color: #e0a830; }
    .xs-wx-earth .xs-wx-bar-fill { background: linear-gradient(90deg, #7a5010, #e0a830); }
    .xs-wx-metal .xs-wx-label { color: #d0d8e8; }
    .xs-wx-metal .xs-wx-bar-fill { background: linear-gradient(90deg, #6080a0, #d0d8e8); }
    .xs-wx-water .xs-wx-label { color: #60b8f0; }
    .xs-wx-water .xs-wx-bar-fill { background: linear-gradient(90deg, #104880, #60b8f0); }

    /* ── 境界卡片 ── */
    .xs-jiejie-card {
      background: linear-gradient(135deg, rgba(20,10,5,0.92), rgba(50,20,5,0.88)) !important;
      border: 1px solid rgba(200,140,40,0.45) !important;
      text-align: center; padding: 3.2vw /* 24px */ 2.1333vw /* 16px */ !important;
    }
    .xs-jiejie-tag {
      display: inline-block; padding: 0.5333vw /* 4px */ 2.1333vw /* 16px */;
      background: rgba(200,160,40,0.2);
      border: 1px solid rgba(200,160,40,0.4);
      border-radius: 2.6667vw /* 20px */; font-size: 0.9em !important; color: #c8a040;
      margin-bottom: 1.3333vw /* 10px */; letter-spacing: 0.1em;
    }
    .xs-jiejie-name {
      font-size: 2.4em; font-weight: bold; color: #ffe080;
      text-shadow: 0 0 2.4vw /* 18px */ rgba(240,180,40,0.7), 0.2667vw /* 2px */ 0.2667vw /* 2px */ 0.8vw /* 6px */ rgba(0,0,0,0.9);
      letter-spacing: 0.2em; margin-bottom: 1.6vw /* 12px */;
      animation: fadeIn 0.5s ease;
    }
    .xs-jiejie-desc {
      font-size: 1em !important; color: rgba(245,220,160,0.75); line-height: 1.7;
    }

    /* ── 五境界进度条 ── */
    .xs-jiejie-track {
      display: flex; gap: 0.5333vw /* 4px */; margin: 1.6vw /* 12px */ 0 1.0667vw /* 8px */;
    }
    .xs-jiejie-seg {
      flex: 1; height: 4.8vw /* 36px */; border-radius: 0.5333vw /* 4px */;
      background: rgba(100,80,40,0.2);
      border: 1px solid rgba(160,120,40,0.2);
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end;
      overflow: hidden; position: relative;
      transition: all 0.3s;
    }
    .xs-seg-fill {
      position: absolute; bottom: 0; left: 0; right: 0; height: 0;
      background: rgba(200,160,40,0.15);
      transition: height 0.6s ease;
    }
    .xs-seg-label {
      position: relative; z-index: 1;
      font-size: 0.82em !important; color: rgba(245,220,150,0.55);
      padding-bottom: 0.5333vw /* 4px */;
    }
    .xs-jiejie-seg.passed {
      background: rgba(80,140,80,0.2);
      border-color: rgba(80,180,80,0.35);
    }
    .xs-jiejie-seg.passed .xs-seg-fill { height: 100%; background: rgba(80,160,80,0.25); }
    .xs-jiejie-seg.passed .xs-seg-label { color: rgba(160,240,160,0.8); }
    .xs-jiejie-seg.current {
      background: rgba(200,160,40,0.3);
      border-color: #c8a040;
      box-shadow: 0 0 1.0667vw /* 8px */ rgba(200,160,40,0.4);
    }
    .xs-jiejie-seg.current .xs-seg-fill { height: 100%; background: rgba(200,160,40,0.3); }
    .xs-jiejie-seg.current .xs-seg-label { color: #ffe080; font-weight: bold; }

    /* ── 命局区间标注 ── */
    .xs-bounds-row {
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8vw /* 6px */;
      font-size: 0.88em !important; color: rgba(245,220,150,0.55);
      margin-top: 0.5333vw /* 4px */; padding: 0 0.2667vw /* 2px */;
    }
    /* 境界完成度提示 */
    .xs-jiejie-pct-tip {
      width: 100%; text-align: center;
      font-size: 0.88em !important; color: rgba(200,160,64,0.7);
      margin-top: 0.2667vw /* 2px */; letter-spacing: 0.05em;
    }

    /* ── 灵石目标卡片 ── */
    .xs-target-card {
      background: linear-gradient(135deg, rgba(15,25,45,0.92), rgba(20,40,70,0.88)) !important;
      border: 1px solid rgba(96,184,240,0.35) !important;
      text-align: center; padding: 2.6667vw /* 20px */ 2.1333vw /* 16px */ !important;
    }
    .xs-target-income {
      font-size: 2em; font-weight: bold; color: #60b8f0;
      text-shadow: 0 0 1.8667vw /* 14px */ rgba(96,184,240,0.5);
      letter-spacing: 0.1em; margin: 1.3333vw /* 10px */ 0 0.8vw /* 6px */;
    }
    .xs-target-period {
      font-size: 0.95em !important; color: rgba(160,200,240,0.7);
    }

    /* ── 技能卡片 ── */
    .xs-skills-list { display: flex; flex-direction: column; gap: 1.0667vw /* 8px */; }
    .xs-skill-item {
      display: flex; flex-direction: column; gap: 0.8vw /* 6px */;
      padding: 1.8667vw /* 14px */ 2.1333vw /* 16px */;
      background: rgba(255,248,228,0.06);
      border: 1px solid rgba(200,160,64,0.2);
      border-radius: 0.8vw /* 6px */;
    }
    .xs-skill-header {
      display: flex; align-items: center; justify-content: space-between; gap: 1.0667vw /* 8px */;
    }
    .xs-skill-name {
      font-size: 1.08em !important; font-weight: bold; color: #ffe080;
    }
    .xs-skill-rank {
      font-size: 0.85em !important; color: rgba(200,160,64,0.7);
      background: rgba(200,160,64,0.12);
      border: 1px solid rgba(200,160,64,0.25);
      border-radius: 0.4vw /* 3px */; padding: 1px 0.6667vw /* 5px */; white-space: nowrap;
    }
    .xs-skill-desc {
      font-size: 0.95em !important; color: rgba(245,220,160,0.7); line-height: 1.5;
    }

    /* ── 工具推荐 ── */
    .xs-tools-list { display: flex; flex-direction: column; gap: 0.8vw /* 6px */; }
    .xs-tool-item {
      display: flex; align-items: center; gap: 1.3333vw /* 10px */;
      padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
      background: rgba(96,184,240,0.05);
      border: 1px solid rgba(96,184,240,0.18);
      border-radius: 0.8vw /* 6px */;
    }
    .xs-tool-icon { font-size: 1.1em; flex-shrink: 0; }
    .xs-tool-info { display: flex; flex-direction: column; gap: 0.2667vw /* 2px */; flex: 1; }
    .xs-tool-name {
      font-size: 1em !important; font-weight: bold; color: #80c8f0;
    }
    .xs-tool-use { font-size: 0.92em !important; color: rgba(160,210,240,0.65); }

    /* ── 行动清单 ── */
    .xs-actions-list { display: flex; flex-direction: column; gap: 1.0667vw /* 8px */; }
    .xs-action-item {
      display: flex; align-items: flex-start; gap: 1.0667vw /* 8px */;
      padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
      background: rgba(80,160,80,0.06);
      border: 1px solid rgba(80,160,80,0.2);
      border-radius: 0.8vw /* 6px */;
      cursor: pointer; transition: all 0.25s;
    }
    .xs-action-item:hover { background: rgba(80,160,80,0.12); }
    .xs-action-item.xs-action-done {
      background: rgba(80,160,80,0.18);
      border-color: rgba(80,200,80,0.45);
      opacity: 0.75;
    }
    .xs-action-item.xs-action-done .xs-action-check::before { content: '☑'; color: #80e080; }
    .xs-action-check {
      font-size: 1.05em; flex-shrink: 0; margin-top: 1px; line-height: 1;
    }
    .xs-action-check::before { content: '☐'; color: rgba(80,200,80,0.5); }
    .xs-action-num {
      width: 2.6667vw /* 20px */; height: 2.6667vw /* 20px */; border-radius: 50%;
      background: rgba(80,160,80,0.25);
      border: 1px solid rgba(80,180,80,0.4);
      color: #80e080; font-size: 0.88em !important; font-weight: bold;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 0.2667vw /* 2px */;
    }
    .xs-action-text { font-size: 1em !important; color: rgba(200,240,200,0.85); line-height: 1.55; }

    /* ── Step2 天赋提示卡 ── */
    .xs-talent-hint-card {
      background: linear-gradient(135deg, rgba(30,18,5,0.95), rgba(18,30,18,0.9)) !important;
      border: 1px solid rgba(100,180,100,0.35) !important;
      padding: 1.6vw /* 12px */ 2.1333vw /* 16px */ !important;
    }
    .xs-talent-hint-title {
      font-size: 1em !important; font-weight: bold;
      color: rgba(120,220,120,0.9);
      margin-bottom: 0.8vw /* 6px */; letter-spacing: 0.05em;
    }
    .xs-talent-hint-body {
      font-size: 0.95em !important; color: rgba(210,230,200,0.8); line-height: 1.7;
    }
    .xs-talent-hint-body b { color: rgba(255,210,80,0.9); }

    /* Step2 其他/自述文本框 */
    .xs-other-textarea {
      resize: vertical; min-height: 10.6667vw /* 80px */;
      font-size: 1em !important; line-height: 1.6;
    }

    /* ── 天赋路径卡片区 ── */
    .xs-path-cards-wrap {
      display: flex; flex-direction: column; gap: 1.3333vw /* 10px */;
      padding: 0 0.5333vw /* 4px */;
    }
    .xs-path-card {
      background: linear-gradient(135deg,
        rgba(15,10,5,0.9) 0%,
        color-mix(in srgb, var(--wx-color, #4a7c59) 18%, rgba(10,8,4,0.9)) 100%);
      border: 1px solid color-mix(in srgb, var(--wx-color, #4a7c59) 50%, transparent);
      border-radius: 1.3333vw /* 10px */; padding: 1.6vw /* 12px */ 1.8667vw /* 14px */;
      cursor: pointer; transition: all 0.2s;
    }
    .xs-path-card:hover { transform: translateY(-0.0208rem /* -1px */); filter: brightness(1.1); }
    .xs-path-card.xs-path-card-selected {
      border-color: color-mix(in srgb, var(--wx-color, #4a7c59) 90%, white);
      box-shadow: 0 0 1.6vw /* 12px */ 0.2667vw /* 2px */ color-mix(in srgb, var(--wx-color, #4a7c59) 40%, transparent);
    }
    .xs-path-card-header {
      display: flex; align-items: center; justify-content: space-between; gap: 0.9333vw /* 7px */; margin-bottom: 0.8vw /* 6px */;
    }
    .xs-path-wx-icon { font-size: 1.1em; }
    .xs-path-wx-label {
      font-size: 0.72em; color: color-mix(in srgb, var(--wx-color, #4a7c59) 90%, #ffffff);
      opacity: 0.8; font-weight: bold;
    }
    .xs-path-industry {
      font-size: 0.9em; font-weight: bold;
      color: rgba(245,225,180,0.92); flex: 1;
    }
    .xs-path-role-tag {
      font-size: 0.68em; padding: 0.2667vw /* 2px */ 0.9333vw /* 7px */; border-radius: 1.3333vw /* 10px */;
      background: color-mix(in srgb, var(--wx-color, #4a7c59) 30%, transparent);
      border: 1px solid color-mix(in srgb, var(--wx-color, #4a7c59) 55%, transparent);
      color: color-mix(in srgb, var(--wx-color, #4a7c59) 90%, #ffffff);
    }
    .xs-path-desc {
      font-size: 0.76em; color: rgba(220,200,155,0.6); line-height: 1.5;
      margin-bottom: 1.3333vw /* 10px */;
    }
    /* 成长节点横排 */
    .xs-path-nodes-wrap {
      display: flex; align-items: center; gap: 0.5333vw /* 4px */;
      overflow-x: auto; padding-bottom: 0.5333vw /* 4px */;
      scrollbar-width: none;
    }
    .xs-path-nodes-wrap::-webkit-scrollbar { display: none; }
    .xs-path-node {
      flex-shrink: 0; text-align: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(200,160,64,0.15);
      border-radius: 0.8vw /* 6px */; padding: 0.6667vw /* 5px */ 0.9333vw /* 7px */; min-width: 9.3333vw /* 70px */;
    }
    .xs-path-node-title {
      font-size: 0.68em; color: rgba(245,220,160,0.8);
      line-height: 1.3; margin-bottom: 0.2667vw /* 2px */;
    }
    .xs-path-node-income {
      font-size: 0.62em; color: rgba(180,230,180,0.6);
    }
    .xs-path-arrow {
      flex-shrink: 0; font-size: 0.75em;
      color: rgba(200,160,64,0.4); margin: 0 1px;
    }
    .xs-path-choose-btn {
      display: block; width: 100%; margin-top: 1.3333vw /* 10px */;
      background: color-mix(in srgb, var(--wx-color, #4a7c59) 25%, transparent);
      border: 1px solid color-mix(in srgb, var(--wx-color, #4a7c59) 55%, transparent);
      color: color-mix(in srgb, var(--wx-color, #4a7c59) 85%, #ffffff);
      padding: 0.9333vw /* 7px */; border-radius: 0.8vw /* 6px */; font-size: 0.8em;
      cursor: pointer; text-align: center; transition: all 0.18s;
      font-family: inherit;
    }
    .xs-path-choose-btn:hover {
      background: color-mix(in srgb, var(--wx-color, #4a7c59) 40%, transparent);
    }
    .xs-path-card-selected .xs-path-choose-btn {
      background: color-mix(in srgb, var(--wx-color, #4a7c59) 50%, transparent);
      color: rgba(255,240,200,0.95);
    }

    /* V3-05：路径卡片 header 改为 flex 两端对齐 */
    .xs-path-header-left {
      display: flex; align-items: center; gap: 0.9333vw /* 7px */; flex: 1; overflow: hidden;
    }

    /* V3-05：匹配度圆环 */
    .xs-path-resonance-ring {
      position: relative; width: 7.2vw /* 54px */; height: 7.2vw /* 54px */; flex-shrink: 0;
    }
    .xs-path-resonance-ring svg { display: block; }
    .xs-ring-pct {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.68em; font-weight: bold;
      color: rgba(255,220,100,0.9);
      line-height: 1;
    }

    /* V3-05：命格特征标签行 */
    .xs-feat-tags-row {
      display: flex; flex-wrap: wrap; gap: 0.6667vw /* 5px */;
      margin: 0.6667vw /* 5px */ 0 1.0667vw /* 8px */;
    }
    .xs-feat-tag {
      font-size: 0.68em; padding: 0.2667vw /* 2px */ 0.9333vw /* 7px */; border-radius: 1.3333vw /* 10px */;
      border: 1px solid; white-space: nowrap;
    }
    .xs-feat-gold {
      color: #f5d060; border-color: rgba(245,208,96,0.45);
      background: rgba(245,208,96,0.1);
    }
    .xs-feat-silver {
      color: rgba(190,210,230,0.85); border-color: rgba(190,210,230,0.3);
      background: rgba(190,210,230,0.07);
    }

    /* V3-05：命理依据折叠区 */
    .xs-basis-wrap {
      margin: 0.5333vw /* 4px */ 0 1.0667vw /* 8px */;
      border-top: 1px solid rgba(200,160,64,0.12);
      padding-top: 0.8vw /* 6px */;
    }
    .xs-basis-toggle {
      background: none; border: none; cursor: pointer; padding: 0;
      color: rgba(200,160,64,0.65); font-size: 0.72em;
      letter-spacing: 0.04em; transition: color 0.2s;
    }
    .xs-basis-toggle:hover { color: rgba(245,210,80,0.9); }
    .xs-basis-content {
      margin-top: 0.8vw /* 6px */; padding: 0.8vw /* 6px */ 1.0667vw /* 8px */;
      background: rgba(0,0,0,0.25); border-radius: 0.8vw /* 6px */;
    }
    .xs-basis-line {
      font-size: 0.7em; color: rgba(220,200,160,0.65);
      line-height: 1.55; padding: 1px 0;
    }

    /* Step3 天赋得分细项 */
    .xs-jiejie-score-detail {
      margin-top: 1.6vw /* 12px */; padding-top: 1.3333vw /* 10px */;
      border-top: 1px solid rgba(200,160,64,0.15);
      display: flex; flex-direction: column; gap: 0.9333vw /* 7px */;
    }
    .xs-score-row {
      display: flex; align-items: center; gap: 1.0667vw /* 8px */;
    }
    .xs-score-label {
      width: 9.0667vw /* 68px */; font-size: 0.72em; color: rgba(245,230,200,0.5);
      flex-shrink: 0; text-align: right;
    }
    .xs-score-bar {
      flex: 1; height: 0.8vw /* 6px */; border-radius: 0.4vw /* 3px */;
      background: rgba(255,255,255,0.07); overflow: hidden;
    }
    .xs-score-bar span {
      display: block; height: 100%; border-radius: 0.4vw /* 3px */;
      background: linear-gradient(90deg, rgba(200,140,40,0.6), rgba(255,200,80,0.85));
      transition: width 0.8s cubic-bezier(.4,0,.2,1);
    }
    .xs-score-val {
      width: 4.8vw /* 36px */; font-size: 0.72em; color: rgba(255,200,80,0.75);
      text-align: right; flex-shrink: 0;
    }

    /* ── 修身镜 card 深色系 ── */
    #xiushenPage .card {
      background: rgba(20,12,5,0.82) !important;
      border: 1px solid rgba(200,160,64,0.25) !important;
    }
    #xiushenPage .card-title {
      color: #f0c870 !important;
      border-bottom: 1px solid rgba(200,160,64,0.2) !important;
    }

    /* ================================================
       五步叩关问卷样式
       ================================================ */

    /* 叩关卡片 */
    .realm-step-card {
      background: rgba(12,8,2,0.88);
      border: 1px solid rgba(200,160,64,0.28);
      border-radius: 1.3333vw /* 10px */;
      margin-bottom: 1.3333vw /* 10px */;
      overflow: hidden;
      transition: box-shadow 0.3s;
    }
    .realm-step-card:hover {
      box-shadow: 0 0 1.6vw /* 12px */ 1px rgba(200,160,64,0.18);
    }

    /* 卡片头部（可点击折叠） */
    .realm-step-header {
      display: flex; align-items: center; gap: 1.3333vw /* 10px */;
      padding: 1.6vw /* 12px */ 1.8667vw /* 14px */; cursor: pointer;
      background: rgba(200,160,64,0.06);
      border-bottom: 1px solid rgba(200,160,64,0.15);
      user-select: none;
    }
    .realm-step-header:hover { background: rgba(200,160,64,0.1); }

    /* 关卡序号圆 */
    .realm-step-num {
      width: 3.7333vw /* 28px */; height: 3.7333vw /* 28px */;
      border-radius: 50%;
      border: 0.2vw /* 1.5px */ solid rgba(200,160,64,0.6);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85em; color: rgba(240,200,80,0.9);
      flex-shrink: 0;
    }

    /* 关卡标题区 */
    .realm-step-info { flex: 1; min-width: 0; }
    .realm-step-title {
      font-size: 0.9em; color: rgba(240,200,80,0.92);
      font-weight: bold; letter-spacing: 0.05em;
    }
    .realm-step-sub {
      font-size: 0.72em; color: rgba(200,180,140,0.55);
      margin-top: 0.2667vw /* 2px */; line-height: 1.4;
    }

    /* 右侧境界角标 */
    .realm-step-badge { flex-shrink: 0; }
    .realm-badge-realm {
      font-size: 0.68em; padding: 0.4vw /* 3px */ 1.0667vw /* 8px */;
      border-radius: 1.3333vw /* 10px */;
      border: 1px solid rgba(200,160,64,0.4);
      color: rgba(240,200,80,0.7);
      background: rgba(200,160,64,0.08);
    }
    .realm-badge-done {
      font-size: 0.68em; padding: 0.4vw /* 3px */ 1.0667vw /* 8px */;
      border-radius: 1.3333vw /* 10px */;
      border: 1px solid rgba(80,200,80,0.5);
      color: rgba(100,220,100,0.9);
      background: rgba(80,200,80,0.08);
    }

    /* 关卡题目区 */
    .realm-step-body {
      padding: 1.8667vw /* 14px */ 1.8667vw /* 14px */ 1.3333vw /* 10px */;
    }

    /* 单题容器 */
    .realm-q-group {
      margin-bottom: 1.8667vw /* 14px */;
    }
    .realm-q-label {
      font-size: 0.83em; color: rgba(240,220,160,0.85);
      margin-bottom: 1.0667vw /* 8px */; line-height: 1.6;
    }

    /* radio 选项组 */
    .realm-radio-group {
      display: flex; flex-direction: column; gap: 0.8vw /* 6px */;
    }
    .realm-radio-label {
      display: flex; align-items: flex-start; gap: 1.0667vw /* 8px */;
      cursor: pointer; padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
      border-radius: 0.9333vw /* 7px */;
      border: 1px solid rgba(200,160,64,0.15);
      background: rgba(200,160,64,0.03);
      transition: all 0.18s;
    }
    .realm-radio-label:hover {
      background: rgba(200,160,64,0.1);
      border-color: rgba(200,160,64,0.35);
    }
    .realm-radio-label input[type="radio"] {
      display: none;
    }
    .realm-radio-circle {
      width: 2.1333vw /* 16px */; height: 2.1333vw /* 16px */; border-radius: 50%;
      border: 0.2vw /* 1.5px */ solid rgba(200,160,64,0.5);
      flex-shrink: 0; margin-top: 1px;
      transition: all 0.2s;
      position: relative;
    }
    .realm-radio-label input[type="radio"]:checked + .realm-radio-circle {
      background: rgba(200,160,64,0.85);
      border-color: rgba(240,200,80,0.9);
      box-shadow: 0 0 0.8vw /* 6px */ rgba(200,160,64,0.5);
    }
    .realm-radio-label:has(input:checked) {
      background: rgba(200,160,64,0.12);
      border-color: rgba(200,160,64,0.45);
    }
    .realm-radio-text {
      font-size: 0.8em; color: rgba(230,210,160,0.8);
      line-height: 1.5;
    }

    /* select 下拉（复用 form-input 样式，额外补充） */
    .realm-select {
      width: 100%; margin-top: 0.2667vw /* 2px */;
    }

    /* 导航按钮 */
    .realm-step-nav {
      margin-top: 1.6vw /* 12px */; text-align: center;
    }
    .realm-next-btn {
      display: inline-block; width: 100%;
      padding: 1.6vw /* 12px */ 0;
      background: linear-gradient(135deg, rgba(160,120,30,0.55), rgba(200,160,60,0.35));
      border: 1px solid rgba(200,160,64,0.5);
      border-radius: 1.0667vw /* 8px */;
      color: rgba(240,210,100,0.95);
      font-size: 0.88em; letter-spacing: 0.08em;
      cursor: pointer; transition: all 0.2s;
    }
    .realm-next-btn:hover {
      background: linear-gradient(135deg, rgba(180,140,40,0.7), rgba(220,180,70,0.5));
      box-shadow: 0 0 1.3333vw /* 10px */ rgba(200,160,64,0.3);
    }
    .realm-final-btn {
      background: linear-gradient(135deg, rgba(100,60,140,0.6), rgba(140,80,180,0.4));
      border-color: rgba(180,100,240,0.5);
      color: rgba(220,180,255,0.95);
    }
    .realm-final-btn:hover {
      background: linear-gradient(135deg, rgba(120,70,160,0.75), rgba(160,100,210,0.55));
      box-shadow: 0 0 1.6vw /* 12px */ rgba(160,80,240,0.3);
    }

    /* 命理依据折叠（新版 realm 内） */
    .xs-basis-fold {
      margin: 0.8vw /* 6px */ 0 0;
      border-top: 1px solid rgba(200,160,64,0.12);
      padding-top: 0.6667vw /* 5px */;
    }
    .xs-basis-fold .xs-basis-toggle {
      background: none; border: none; cursor: pointer;
      color: rgba(200,160,64,0.55); font-size: 0.7em;
      letter-spacing: 0.04em;
    }
    .xs-basis-fold .xs-basis-content {
      display: none; margin-top: 0.6667vw /* 5px */;
    }
    .xs-basis-fold.open .xs-basis-content {
      display: block;
    }

    /* 路径卡片 top 高亮 */
    .xs-path-card-top {
      border-color: rgba(200,160,64,0.45) !important;
    }
    .xs-path-card-inner { flex: 1; min-width: 0; }
    .xs-path-card-title {
      font-size: 0.92em; color: rgba(240,200,80,0.92);
      font-weight: bold; margin-bottom: 0.2667vw /* 2px */;
    }
    .xs-path-card-industry {
      font-size: 0.7em; color: rgba(200,180,120,0.55); margin-bottom: 0.6667vw /* 5px */;
    }

    /* ══════════════════════════════════════════════
       天赋树 (Talent Tree) · 完整样式
    ══════════════════════════════════════════════ */

    /* 区块标题 */
    .tt-section-title {
      font-size: 0.78em; color: rgba(200,170,80,0.75);
      text-align: center; letter-spacing: 0.15em;
      margin-bottom: 1.3333vw /* 10px */;
    }

    /* 五行切换按钮条 */
    .tt-wx-switcher {
      display: flex; gap: 0.8vw /* 6px */; justify-content: center;
      margin-bottom: 1.3333vw /* 10px */; padding: 0 0.5333vw /* 4px */;
      flex-wrap: wrap;
    }
    .tt-wx-tab {
      flex: 1; min-width: 5.8667vw /* 44px */; max-width: 8.2667vw /* 62px */;
      padding: 0.6667vw /* 5px */ 0.2667vw /* 2px */; border-radius: 2.6667vw /* 20px */;
      border: 1px solid color-mix(in srgb, var(--tt-tab-color, #888) 40%, transparent);
      background: color-mix(in srgb, var(--tt-tab-color, #888) 10%, rgba(10,8,4,0.85));
      color: color-mix(in srgb, var(--tt-tab-color, #888) 80%, #fff);
      font-size: 0.72em; cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .tt-wx-tab:hover {
      background: color-mix(in srgb, var(--tt-tab-color, #888) 22%, rgba(15,10,5,0.9));
      border-color: color-mix(in srgb, var(--tt-tab-color, #888) 65%, transparent);
    }
    .tt-wx-tab-active {
      background: color-mix(in srgb, var(--tt-tab-color, #888) 28%, rgba(15,10,5,0.95)) !important;
      border-color: color-mix(in srgb, var(--tt-tab-color, #888) 80%, transparent) !important;
      color: color-mix(in srgb, var(--tt-tab-color, #888) 95%, #fff) !important;
      box-shadow: 0 0 1.0667vw /* 8px */ color-mix(in srgb, var(--tt-tab-color, #888) 30%, transparent);
      font-weight: bold;
    }

    /* 命主画像 header */
    .tt-header {
      display: flex; align-items: flex-start;
      gap: 1.3333vw /* 10px */; margin-bottom: 1.3333vw /* 10px */; padding: 0 0.5333vw /* 4px */;
    }
    .tt-profile-text {
      flex: 1; font-size: 0.78em;
      color: rgba(235,215,165,0.82); line-height: 1.6;
    }
    .tt-role-badge {
      flex-shrink: 0; font-size: 0.72em;
      padding: 0.5333vw /* 4px */ 1.2vw /* 9px */; border-radius: 1.6vw /* 12px */;
      background: color-mix(in srgb, var(--tt-color, #4a7c59) 25%, transparent);
      border: 1px solid color-mix(in srgb, var(--tt-color, #4a7c59) 55%, transparent);
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 90%, #fff);
      white-space: nowrap;
    }

    /* 画布容器：水平居中，允许横向滚动（防止窄屏截断节点） */
    .tt-canvas-wrap {
      overflow-x: auto; overflow-y: auto;
      display: flex; justify-content: center;
      -webkit-overflow-scrolling: touch;
    }
    .tt-canvas {
      position: relative; flex-shrink: 0;
    }
    .tt-svg {
      position: absolute; top: 0; left: 0;
      pointer-events: none;
    }

    /* 通用节点 */
    .tt-node {
      position: absolute;
      border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      cursor: default;
      border: 0.2vw /* 1.5px */ solid color-mix(in srgb, var(--tt-color, #4a7c59) 60%, transparent);
      background: linear-gradient(135deg,
        rgba(12,8,3,0.92),
        color-mix(in srgb, var(--tt-color, #4a7c59) 22%, rgba(8,5,2,0.9)));
      box-shadow: 0 0 1.0667vw /* 8px */ color-mix(in srgb, var(--tt-color, #4a7c59) 20%, transparent);
      opacity: 1;
      transition: transform 0.18s, filter 0.18s, opacity 0.3s;
      user-select: none;
    }
    /* foreignObject 内的节点：覆盖 position，直接填满 SVG foreignObject 空间 */
    foreignObject .tt-node {
      position: relative !important;
      left: auto !important; top: auto !important;
    }
    /* 入场动画：初始透明→放大淡入（动画触发时才生效，不影响默认可见性）*/
    .tt-node-enter {
      animation: ttNodeIn 0.35s ease both;
    }
    @keyframes ttNodeIn {
      from { opacity: 0; transform: scale(0.6) translateY(1.0667vw /* 8px */); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* 根节点（五行） */
    .tt-node-root {
      border-width: 0.2667vw /* 2px */;
      border-color: color-mix(in srgb, var(--tt-color, #4a7c59) 80%, #fff);
      box-shadow: 0 0 2.4vw /* 18px */ color-mix(in srgb, var(--tt-color, #4a7c59) 40%, transparent),
                  inset 0 0 1.3333vw /* 10px */ color-mix(in srgb, var(--tt-color, #4a7c59) 15%, transparent);
    }
    .tt-node-wx-icon { font-size: 1.55em; line-height: 1; }
    .tt-node-wx-label {
      font-size: 0.9em; font-weight: bold;
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 95%, #fff);
      line-height: 1.1; margin-top: 1px;
    }
    .tt-node-wx-tag {
      font-size: 0.6em;
      color: rgba(228,205,152,0.82);
      line-height: 1; margin-top: 1px;
    }

    /* 两仪节点 */
    .tt-node-liangyi { border-width: 0.2vw /* 1.5px */; }
    .tt-node-main {
      font-size: 0.88em; font-weight: bold;
      color: rgba(245,218,148,0.96); line-height: 1.2;
      text-align: center; padding: 0 0.2667vw /* 2px */;
    }
    .tt-node-sub {
      font-size: 0.62em; color: rgba(210,185,120,0.78); line-height: 1;
    }

    /* 四象节点 */
    .tt-node-xiang { border-width: 1px; }
    .tt-node-yao {
      display: block; line-height: 1;
      margin-bottom: 0.2667vw /* 2px */;
    }
    .tt-node-label {
      font-size: 0.6em; color: rgba(225,205,150,0.88);
      line-height: 1; margin-top: 1px; text-align: center;
    }
    /* 行业节点label字号略大，适配52px圆 */
    .tt-node-ind .tt-node-label {
      font-size: 0.68em;
    }

    /* 行业节点（叶节点，48px放大版）*/
    .tt-node-ind {
      cursor: pointer; border-width: 1px;
      flex-direction: column;
    }
    .tt-node-ind:active { transform: scale(0.92); }
    .tt-node-hot {
      border-color: color-mix(in srgb, var(--tt-color, #4a7c59) 75%, #fff) !important;
      box-shadow: 0 0 1.3333vw /* 10px */ color-mix(in srgb, var(--tt-color, #4a7c59) 35%, transparent) !important;
    }
    .tt-node-dim {
      opacity: 0.45 !important;
      filter: saturate(0.4);
    }
    .tt-node-dim.tt-node-enter { animation: ttNodeDimIn 0.35s ease both; }
    @keyframes ttNodeDimIn {
      from { opacity: 0; transform: scale(0.6); }
      to   { opacity: 0.45; transform: scale(1); }
    }
    .tt-node-icon { font-size: 1.25em; line-height: 1; }
    .tt-node-hot-dot {
      position: absolute; top: 0.2667vw /* 2px */; right: 0.2667vw /* 2px */;
      width: 0.8vw /* 6px */; height: 0.8vw /* 6px */; border-radius: 50%;
      background: color-mix(in srgb, var(--tt-color, #4a7c59) 90%, #fff);
      box-shadow: 0 0 0.5333vw /* 4px */ color-mix(in srgb, var(--tt-color, #4a7c59) 70%, transparent);
    }

    /* 图例 */
    .tt-legend {
      display: flex; gap: 1.6vw /* 12px */; justify-content: center; align-items: center;
      font-size: 0.65em; color: rgba(195,172,110,0.78);
      margin-top: 0.8vw /* 6px */; padding: 0 0.5333vw /* 4px */;
    }
    .tt-legend-hot { color: rgba(215,192,115,0.90); }
    .tt-legend-tip { color: rgba(175,155,100,0.70); }

    /* ── 第二界面：行业详情 ── */
    .tt-detail-wrap { display: flex; flex-direction: column; gap: 0; }
    .tt-detail-header {
      display: flex; flex-direction: column; gap: 0.4vw /* 3px */;
      padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
      background: linear-gradient(135deg,
        rgba(12,8,3,0.95),
        color-mix(in srgb, var(--tt-color, #4a7c59) 20%, rgba(8,5,2,0.92)));
      border: 1px solid color-mix(in srgb, var(--tt-color, #4a7c59) 45%, transparent);
      border-radius: 1.3333vw /* 10px */; margin-bottom: 1.3333vw /* 10px */;
    }
    .tt-detail-back {
      font-size: 0.72em; color: rgba(210,180,105,0.88);
      background: none; border: none; cursor: pointer;
      text-align: left; padding: 0; font-family: inherit;
      margin-bottom: 0.5333vw /* 4px */;
    }
    .tt-detail-back:active { opacity: 0.6; }
    .tt-detail-title {
      font-size: 1.1em; font-weight: bold;
      color: rgba(245,220,160,0.95); letter-spacing: 0.05em;
    }
    .tt-detail-meta {
      font-size: 0.7em;
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 92%, #fff);
      opacity: 0.92;
    }
    .tt-detail-body { display: flex; flex-direction: column; gap: 1.3333vw /* 10px */; }
    .tt-detail-section {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(200,160,64,0.12);
      border-radius: 1.0667vw /* 8px */; padding: 1.3333vw /* 10px */ 1.6vw /* 12px */;
    }
    .tt-detail-sec-title {
      font-size: 0.76em; font-weight: bold;
      color: rgba(228,198,105,0.95); margin-bottom: 1.0667vw /* 8px */;
      letter-spacing: 0.05em;
    }
    .tt-detail-tip-box {
      font-size: 0.76em; color: rgba(228,210,162,0.90);
      line-height: 1.65;
    }

    /* 细分方向标签组 */
    .tt-subs-wrap {
      display: flex; flex-wrap: wrap; gap: 0.8vw /* 6px */;
      margin-bottom: 0.9333vw /* 7px */;
    }
    .tt-sub-tag {
      font-size: 0.7em;
      padding: 0.4vw /* 3px */ 1.2vw /* 9px */; border-radius: 2.6667vw /* 20px */;
      background: color-mix(in srgb, var(--tt-color, #4a7c59) 18%, rgba(10,7,3,0.85));
      border: 1px solid color-mix(in srgb, var(--tt-color, #4a7c59) 40%, transparent);
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 88%, #fff);
      letter-spacing: 0.04em; white-space: nowrap;
    }
    .tt-detail-brief {
      font-size: 0.72em; color: rgba(210,188,128,0.85);
      line-height: 1.6; margin-top: 0.2667vw /* 2px */; font-style: italic;
    }

    /* 角色列表 */
    .tt-roles-list { display: flex; flex-direction: column; gap: 0.9333vw /* 7px */; }
    .tt-role-item {
      padding: 0.9333vw /* 7px */ 1.3333vw /* 10px */; border-radius: 0.9333vw /* 7px */;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(200,160,64,0.1);
      transition: border-color 0.2s;
    }
    .tt-role-top {
      border-color: color-mix(in srgb, var(--tt-color, #4a7c59) 50%, transparent) !important;
      background: color-mix(in srgb, var(--tt-color, #4a7c59) 8%, transparent) !important;
    }
    .tt-role-header {
      display: flex; align-items: center; gap: 0.8vw /* 6px */; margin-bottom: 0.5333vw /* 4px */;
    }
    .tt-role-icon { font-size: 0.9em; }
    .tt-role-name {
      flex: 1; font-size: 0.8em; font-weight: bold;
      color: rgba(240,215,155,0.88);
    }
    .tt-role-pct {
      font-size: 0.72em; font-weight: bold;
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 85%, #fff);
    }
    .tt-role-bar-wrap {
      height: 0.4vw /* 3px */; background: rgba(255,255,255,0.06);
      border-radius: 0.2667vw /* 2px */; margin-bottom: 0.5333vw /* 4px */; overflow: hidden;
    }
    .tt-role-bar {
      height: 100%; border-radius: 0.2667vw /* 2px */;
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--tt-color, #4a7c59) 60%, transparent),
        color-mix(in srgb, var(--tt-color, #4a7c59) 90%, #fff));
      transition: width 0.5s ease;
    }
    .tt-role-desc {
      font-size: 0.68em; color: rgba(215,195,145,0.80);
      line-height: 1.5;
    }


    /* ══════════════════════════════════════════════
       天赋树第二界面·行业子树 (IndSubtree) 专属样式
    ══════════════════════════════════════════════ */

    /* 子树画布：高度自适应行业子树 */
    .tt-subtree-canvas {
      /* 保持与主树节点类的所有继承，仅覆盖需要调整的部分 */
    }

    /* L2 细分方向节点 */
    .tt-node-sub2 {
      cursor: default;
      border-width: 1px;
    }

    /* L3 叶节点（岗位通称） */
    .tt-node-leaf {
      cursor: default;
      border-width: 1px;
      /* 叶节点默认亮度略低 */
      border-color: color-mix(in srgb, var(--tt-color, #4a7c59) 45%, transparent);
      background: linear-gradient(135deg,
        rgba(10,6,2,0.9),
        color-mix(in srgb, var(--tt-color, #4a7c59) 15%, rgba(6,4,1,0.88)));
    }

    /* 可点击节点（L2/L3）公共样式 */
    .tt-node-clickable {
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      position: relative;
      overflow: visible !important;
    }
    .tt-node-clickable:hover {
      transform: scale(1.12);
      border-color: color-mix(in srgb, var(--tt-color, #4a7c59) 85%, transparent) !important;
      box-shadow: 0 0 1.3333vw /* 10px */ color-mix(in srgb, var(--tt-color, #4a7c59) 45%, transparent);
      z-index: 10;
    }
    .tt-node-clickable:active { transform: scale(0.96); }

    /* 叶/sub2 节点右上角小箭头提示 */
    .tt-node-tip-dot {
      position: absolute;
      top: -0.125rem /* -6px */; right: -0.1042rem /* -5px */;
      font-size: 0.6em;
      color: color-mix(in srgb, var(--tt-color, #4a7c59) 90%, #fff);
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
    }
    .tt-node-clickable:hover .tt-node-tip-dot { opacity: 1; }

    /* 子树区域底部提示文字 */
    .tt-subtree-click-tip {
      font-size: 0.68em;
      color: rgba(205,180,95,0.75);
      text-align: center;
      margin-top: 1.0667vw /* 8px */;
      letter-spacing: 0.05em;
    }

    /* 天赋路径锁定横幅 */
    .talent-sel-banner {
      display: flex; align-items: center; gap: 1.3333vw /* 10px */;
      padding: 1.3333vw /* 10px */ 1.6vw /* 12px */; margin-bottom: 1.6vw /* 12px */; border-radius: 1.3333vw /* 10px */;
      border: 1px solid color-mix(in srgb, var(--ts-color, #b0a060) 50%, transparent);
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--ts-color, #b0a060) 12%, rgba(8,6,2,0.9)),
        rgba(8,6,2,0.85));
      box-shadow: 0 0 1.8667vw /* 14px */ color-mix(in srgb, var(--ts-color, #b0a060) 18%, transparent);
    }
    .ts-banner-icon {
      font-size: 1.2em;
      color: color-mix(in srgb, var(--ts-color, #b0a060) 90%, #fff);
      flex-shrink: 0;
    }
    .ts-banner-content { flex: 1; min-width: 0; }
    .ts-banner-label {
      font-size: 0.68em;
      color: rgba(218,192,118,0.82);
      letter-spacing: 0.08em; margin-bottom: 0.2667vw /* 2px */;
    }
    .ts-banner-path {
      font-size: 0.82em; font-weight: bold;
      color: color-mix(in srgb, var(--ts-color, #b0a060) 90%, #fff);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ts-banner-change {
      flex-shrink: 0;
      padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */; border-radius: 1.8667vw /* 14px */;
      border: 1px solid color-mix(in srgb, var(--ts-color, #b0a060) 40%, transparent);
      background: transparent;
      color: color-mix(in srgb, var(--ts-color, #b0a060) 70%, #fff);
      font-size: 0.68em; cursor: pointer;
      transition: all 0.18s ease;
    }
    .ts-banner-change:hover {
      background: color-mix(in srgb, var(--ts-color, #b0a060) 15%, transparent);
      border-color: color-mix(in srgb, var(--ts-color, #b0a060) 70%, transparent);
    }

    /* 境界问卷 行业已锁定提示 */
    .realm-locked-badge {
      display: inline-block;
      padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */; margin-bottom: 0.8vw /* 6px */; border-radius: 2.6667vw /* 20px */;
      font-size: 0.72em;
      background: rgba(180,150,60,0.12);
      border: 1px solid rgba(180,150,60,0.3);
      color: rgba(220,185,90,0.8);
    }
    .realm-locked-badge b { color: rgba(220,185,90,1); font-weight: bold; }

    /* ═══════════════════════════════════════════════════════
       双子视图切换动画（天赋树 ↔ 叩关问卷）
    ═══════════════════════════════════════════════════════ */
    @keyframes xs2ViewIn {
      from { opacity: 0; transform: translateY(2.4vw /* 18px */); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes xs2ViewOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-0.25rem /* -12px */); }
    }
    .xs2-view-enter { animation: xs2ViewIn 0.36s ease forwards; }
    .xs2-view-exit  { animation: xs2ViewOut 0.18s ease forwards; pointer-events: none; }

    /* 叩关视图顶部栏 */
    .xs2-realm-topbar {
      display: flex; align-items: center;
      padding: 0.5333vw /* 4px */ 0.5333vw /* 4px */ 1.3333vw /* 10px */;
    }
    .xs2-back-btn {
      padding: 0.8vw /* 6px */ 1.8667vw /* 14px */; border-radius: 2.6667vw /* 20px */;
      border: 1px solid rgba(180,150,60,0.35);
      background: rgba(180,150,60,0.08);
      color: rgba(220,185,90,0.85); font-size: 0.75em;
      cursor: pointer; transition: all 0.18s ease;
    }
    .xs2-back-btn:hover {
      background: rgba(180,150,60,0.16);
      border-color: rgba(220,185,90,0.6);
    }

    /* ═══════════════════════════════════════════════════════
       命盘天赋定位卡 V2
    ═══════════════════════════════════════════════════════ */
    .xs-talent-hint-v2 {
      border-color: rgba(200,165,60,0.28) !important;
      background: linear-gradient(135deg,
        rgba(30,18,4,0.92), rgba(18,10,2,0.88)) !important;
    }
    .xs-hint-row {
      display: flex; align-items: baseline; gap: 0.8vw /* 6px */;
      padding: 0.6667vw /* 5px */ 0; border-bottom: 1px solid rgba(200,165,60,0.1);
    }
    .xs-hint-row:last-of-type { border-bottom: none; }
    .xs-hint-dot {
      font-size: 0.72em; color: rgba(200,165,60,0.7); flex-shrink: 0;
    }
    .xs-hint-item-label {
      font-size: 0.72em; color: rgba(200,175,100,0.55);
      min-width: 10.6667vw /* 80px */; flex-shrink: 0;
    }
    .xs-hint-item-val {
      font-size: 0.8em; font-weight: 600;
      color: rgba(240,210,130,0.92);
    }
    .xs-hint-guide {
      font-size: 0.68em;
      color: rgba(200,165,60,0.55);
      text-align: center; margin-top: 1.0667vw /* 8px */;
      letter-spacing: 0.05em;
    }
    /* 五行切换按钮喜用五行小点 */
    .tt-tab-xiyong-dot {
      display: inline-block; width: 0.6667vw /* 5px */; height: 0.6667vw /* 5px */;
      border-radius: 50%; background: rgba(255,220,80,0.9);
      vertical-align: middle; margin-left: 0.2667vw /* 2px */; margin-top: -0.0417rem /* -2px */;
      box-shadow: 0 0 0.5333vw /* 4px */ rgba(255,220,80,0.6);
    }
    /* 切换提示文字 */
    .tt-wx-switcher-hint {
      font-size: 0.62em; color: rgba(200,165,60,0.4);
      text-align: center; margin-top: -0.0833rem /* -4px */; margin-bottom: 0.8vw /* 6px */;
      letter-spacing: 0.06em;
    }

    /* ═══════════════════════════════════════════════════════
       金乌铜树风格（覆盖原有 tt-node 颜色为铜金质感）
    ═══════════════════════════════════════════════════════ */


    /* ══ 青铜神树画布背景（扶桑铜树风格） ══ */
    /* 兼容旧类名 + 新类名 */
    .tt-canvas-copper, .tt-canvas-bronze {
      /* 底部暖光渐变，模拟台座灯光氛围 */
      background:
        radial-gradient(ellipse at 50% 100%, rgba(100,55,8,0.32) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%,  rgba(20,10,2,0.15)  0%, transparent 80%);
    }

    /* 根节点金乌风格 —— 配色随五行 --tt-color 变化 */
    .tt-node-root-jinwu {
      background: radial-gradient(circle at 38% 38%,
        color-mix(in srgb, var(--tt-color,#c87820) 35%, rgba(255,220,80,0.25)),
        color-mix(in srgb, var(--tt-color,#c87820) 55%, rgba(80,35,5,0.9)),
        rgba(20,8,2,0.95)) !important;
      border-width: 0.2667vw /* 2px */ !important;
      border-color: color-mix(in srgb, var(--tt-color,#c87820) 85%, #fff) !important;
      box-shadow:
        0 0 3.2vw /* 24px */ color-mix(in srgb, var(--tt-color,#c87820) 50%, transparent),
        0 0 1.0667vw /* 8px */  rgba(255,220,80,0.25),
        inset 0 0 1.8667vw /* 14px */ color-mix(in srgb, var(--tt-color,#c87820) 20%, transparent) !important;
      overflow: visible !important;
    }
    /* 根节点外圈光晕环（五行色脉冲动画） */
    .tt-root-glow-ring {
      position: absolute;
      width: calc(100% + 2.4vw /* 18px */); height: calc(100% + 2.4vw /* 18px */);
      left: -0.1875rem /* -9px */; top: -0.1875rem /* -9px */;
      border-radius: 50%;
      border: 0.2vw /* 1.5px */ solid color-mix(in srgb, var(--tt-color,#c87820) 55%, transparent);
      animation: ttRootPulse 2.8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes ttRootPulse {
      0%   { transform: scale(1);    opacity: 0.6; }
      50%  { transform: scale(1.12); opacity: 0.18; }
      100% { transform: scale(1);    opacity: 0.6; }
    }
    /* 放射线动画 */
    .tt-root-ray {
      animation: ttRayFade 3s ease-in-out infinite;
    }
    @keyframes ttRayFade {
      0%, 100% { opacity: 0.45; }
      50%       { opacity: 0.12; }
    }

    /* 主干分叉枝干（SVG）通过 JS renderTalentTree 生成，颜色由 --tt-color 控制 */

    /* 两仪节点：五行色调质感 */
    .tt-node-liangyi {
      background: linear-gradient(145deg,
        color-mix(in srgb, var(--tt-color,#4a7c59) 18%, rgba(8,5,2,0.95)),
        color-mix(in srgb, var(--tt-color,#4a7c59) 30%, rgba(40,20,4,0.85)),
        rgba(10,5,1,0.95)) !important;
      border-color: color-mix(in srgb, var(--tt-color,#4a7c59) 65%, rgba(200,160,60,0.5)) !important;
      box-shadow:
        0 0 1.6vw /* 12px */ color-mix(in srgb, var(--tt-color,#4a7c59) 28%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--tt-color,#4a7c59) 20%, rgba(255,230,140,0.1)) !important;
    }
    /* 四象节点：更细腻的五行色 */
    .tt-node-xiang {
      background: linear-gradient(145deg,
        color-mix(in srgb, var(--tt-color,#4a7c59) 12%, rgba(8,5,2,0.96)),
        color-mix(in srgb, var(--tt-color,#4a7c59) 22%, rgba(30,15,3,0.88))) !important;
      border-color: color-mix(in srgb, var(--tt-color,#4a7c59) 50%, rgba(180,140,30,0.4)) !important;
      box-shadow: 0 0 0.9333vw /* 7px */ color-mix(in srgb, var(--tt-color,#4a7c59) 22%, transparent) !important;
    }
    /* 行业叶节点：铜浮雕五行色质感 */
    .tt-node-ind {
      background: linear-gradient(145deg,
        color-mix(in srgb, var(--tt-color,#4a7c59) 10%, rgba(8,4,1,0.97)),
        color-mix(in srgb, var(--tt-color,#4a7c59) 18%, rgba(25,12,2,0.9))) !important;
      border-color: color-mix(in srgb, var(--tt-color,#4a7c59) 42%, rgba(160,120,25,0.4)) !important;
    }
    .tt-node-ind:hover {
      border-color: color-mix(in srgb, var(--tt-color,#4a7c59) 85%, #fff) !important;
      box-shadow: 0 0 1.8667vw /* 14px */ color-mix(in srgb, var(--tt-color,#4a7c59) 45%, transparent) !important;
      transform: scale(1.05);
    }
    /* 热门行业节点：五行色高亮 */
    .tt-node-ind.tt-node-hot {
      border-color: color-mix(in srgb, var(--tt-color,#4a7c59) 90%, #fff) !important;
      box-shadow:
        0 0 1.8667vw /* 14px */ color-mix(in srgb, var(--tt-color,#4a7c59) 45%, transparent),
        0 0 0.5333vw /* 4px */  rgba(255,240,160,0.2) !important;
    }



    /* ═══════════════════════════════════════════════════════
       职能角色卡片选择器
    ═══════════════════════════════════════════════════════ */
    .realm-role-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1.0667vw /* 8px */; margin-top: 1.0667vw /* 8px */;
    }
    .realm-role-card {
      display: flex; align-items: center; gap: 1.0667vw /* 8px */;
      padding: 1.2vw /* 9px */ 1.3333vw /* 10px */; border-radius: 1.3333vw /* 10px */;
      border: 1px solid rgba(180,150,60,0.2);
      background: rgba(18,10,2,0.7);
      cursor: pointer;
      transition: all 0.18s ease;
      position: relative; overflow: hidden;
    }
    .realm-role-card input[type=radio] { display: none; }
    .realm-role-card.selected,
    .realm-role-card:has(input:checked) {
      border-color: rgba(220,185,60,0.7);
      background: rgba(180,120,20,0.18);
      box-shadow: 0 0 1.0667vw /* 8px */ rgba(200,155,30,0.25);
    }
    .realm-role-card:hover {
      border-color: rgba(200,165,50,0.45);
      background: rgba(120,70,10,0.12);
    }
    .role-card-icon {
      font-size: 1.3em; flex-shrink: 0; line-height: 1;
    }
    .role-card-body { flex: 1; min-width: 0; }
    .role-card-name {
      font-size: 0.78em; font-weight: bold;
      color: rgba(240,210,130,0.92);
      display: flex; align-items: center; flex-wrap: wrap; gap: 0.5333vw /* 4px */;
    }
    .role-card-desc {
      font-size: 0.65em; color: rgba(200,170,90,0.5);
      margin-top: 0.2667vw /* 2px */; line-height: 1.35;
    }
    .role-match-badge {
      font-size: 0.72em; padding: 1px 0.8vw /* 6px */; border-radius: 1.0667vw /* 8px */;
      background: rgba(200,155,30,0.2); border: 1px solid rgba(200,155,30,0.4);
      color: rgba(230,185,60,0.85);
    }
    .role-tengod-tag {
      font-size: 0.68em; padding: 1px 0.6667vw /* 5px */; border-radius: 0.8vw /* 6px */;
      background: rgba(100,80,20,0.25);
      color: rgba(190,155,60,0.7);
    }

    /* 子树图例文字略小 */
    .tt-subtree-canvas .tt-node-label {
      line-height: 1.25;
      text-align: center;
    }

    /* 薪资参考 */
    .tt-income-grid { display: flex; flex-direction: column; gap: 0.6667vw /* 5px */; }
    .tt-income-row {
      display: flex; align-items: center; gap: 0.8vw /* 6px */;
      font-size: 0.72em;
    }
    .tt-income-role {
      width: 8vw /* 60px */; flex-shrink: 0;
      color: rgba(200,175,110,0.65);
    }
    .tt-income-range {
      flex: 1; color: rgba(140,220,140,0.75); font-weight: bold;
    }
    /* ================================================================
       如意笏 · 今日机缘  专属样式
    ================================================================ */
    .ruyi-tabs {
      display: flex; gap: 0.5333vw /* 4px */; margin: 0 0 1.6vw /* 12px */; padding: 0.5333vw /* 4px */;
      background: rgba(15,10,4,0.6);
      border: 1px solid rgba(200,160,64,0.15); border-radius: 1.3333vw /* 10px */;
    }
    .ruyi-tab {
      flex: 1; padding: 1.6vw /* 12px */ 4px; background: none; border: none;
      border-radius: 0.9333vw /* 7px */; cursor: pointer; font-size: 1.65vw /* 12.4px - 放大标签文字 */ !important;
      font-family: inherit; color: rgba(220,200,145,0.85);
      transition: all 0.2s ease; letter-spacing: 0.02em;
    }
    .ruyi-tab.active {
      background: linear-gradient(135deg,rgba(80,55,15,0.75),rgba(50,35,8,0.85));
      color: rgba(255,235,168,1);
      border: 1px solid rgba(220,175,80,0.55);
    }
    .ruyi-tab:active { transform: scale(0.97); }
    .ruyi-daybar {
      display: flex; align-items: center; gap: 2.4vw /* 18px - 再×1.5 */;
      padding: 5.1vw /* 38px - 再×1.5 */ 6.4vw /* 48px */; margin-bottom: 4.2vw /* 31px - 再×1.5 */;
      background: rgba(255,250,235,0.95); /* 亮色背景 */
      border: 1px solid rgba(200,160,60,0.35);
      border-radius: 2.2vw /* 16px - 放大 */; box-shadow: 0 0.8vw 4vw rgba(180,140,40,0.15);
    }
    .ruyi-db-left { display: flex; flex-direction: column; align-items: center; min-width: 11vw /* 82px */; }
    .ruyi-db-gz { font-size: 6.6vw /* 49.5px - 再×1.5 */ !important; font-weight: bold; line-height: 1.1; color: #5a3c10; letter-spacing: 0.02em; }
    .ruyi-db-gz span { font-size: 0.85em; color: #8b6914; }
    .ruyi-db-wx { font-size: 3.3vw /* 24.75px - 再×1.5 */; color: #6b5015; margin-top: 1vw /* 7.5px */; white-space: nowrap; }
    .ruyi-db-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .ruyi-db-date { font-size: 4.2vw /* 31.5px - 再×1.5 */; font-weight: bold; color: #2a1a08; }
    .ruyi-db-lunar { font-size: 3.5vw /* 26px - 再×1.5 */; color: #5a4008; margin-top: 1vw /* 7.5px */; }
    .ruyi-db-rel { font-size: 3.5vw /* 26px - 再×1.5 */; color: #5a4008; margin-top: 1vw /* 7.5px */; }
    .ruyi-db-rel strong { color: #2a1a08; }
    .ruyi-db-right { display: flex; flex-direction: column; align-items: center; min-width: 12vw /* 90px */; }
    .ruyi-db-dm { font-size: 3vw /* 22.5px - 再×1.5 */; color: #6b5015; font-weight:bold; }
    .ruyi-db-dm strong { font-size: 1.35em; color: #2a1a08; }
    .ruyi-db-dmwx { font-size: 2.85vw /* 21px - 再×1.5 */; color: #6b5015; margin-top: 1vw /* 7.5px */; font-weight:bold; }
    .ruyi-section-hint {
      font-size: 0.9em !important; color: rgba(230,205,140,0.95); margin-bottom: 1.6vw /* 12px */;
      line-height: 1.55; padding: 1.2vw /* 9px */ 11px;
      background: rgba(200,160,60,0.1); border-radius: 0.8vw /* 6px */;
      border-left: 0.2667vw /* 2px */ solid rgba(220,175,80,0.5);
    }
    .ruyi-events-list { display: flex; flex-direction: column; gap: 2.4vw /* 18px - ×1.5 */; }
    .ruyi-event-card {
      border: 1px solid rgba(180,150,80,0.3); border-radius: 1.4667vw /* 11px */;
      padding: 3.2vw /* 24px - ×1.5 */ 3.4vw /* 25.5px - ×1.5 */ 3vw /* 22.5px - ×1.5 */;
      transition: border-color 0.2s;
      background: rgba(255,250,240,0.95); /* 亮色背景 */
      box-shadow: 0 0.2667vw 1.3333vw rgba(170,140,60,0.08);
    }
    /* 卡片头部：图标 + 标题 + 标签组 */
    .ruyi-ev-header {
      display: flex; align-items: center; gap: 1.6vw /* 12px - ×1.5 */; margin-bottom: 2.2vw /* 16.5px - ×1.5 */;
    }
    .ruyi-ev-icon { font-size: 3.6vw /* 27px - ×1.5 */; flex-shrink: 0; }
    .ruyi-ev-title {
      flex: 1; font-size: 2.63vw /* 19.7px - ×1.5 */; font-weight: bold;
      color: #3a2a0e; letter-spacing: 0.02em;
    }

/* ============================================================
   阵法盘 - 极简装备系统样式 v20260409-10
   ============================================================ */

/* 装备选择栏容器 */
.zhenfa-equipment-section {
  background: rgba(30, 25, 20, 0.6);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.6vw /* 12px */;
  margin-top: 1.6vw /* 12px */;
  border: 1px solid rgba(200, 160, 64, 0.15);
}

.equipment-selection-container {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

/* 选择提示 */
.equipment-selection-hint {
  text-align: center;
  color: rgba(200, 180, 140, 0.7);
  font-size: 1.35vw /* 10px */;
  padding: 4vw /* 30px */ 2.6667vw /* 20px */;
}

/* 选择栏头部 */
.equipment-selection-header {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  padding-bottom: 1.3333vw /* 10px */;
  border-bottom: 1px solid rgba(200, 160, 64, 0.2);
}

.selection-slot-name {
  font-size: 1em;
  font-weight: bold;
  color: rgba(240, 210, 120, 0.95);
}

.selection-count {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  flex: 1;
}

.unequip-btn {
  padding: 0.6667vw /* 5px */ 1.8667vw /* 14px */;
  background: rgba(200, 100, 80, 0.2);
  border: 1px solid rgba(200, 100, 80, 0.4);
  border-radius: 0.5333vw /* 4px */;
  color: rgba(240, 160, 140, 0.9);
  font-size: 0.75em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.unequip-btn:hover {
  background: rgba(200, 100, 80, 0.35);
}

/* 筛选器 */
.equipment-filters {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  padding: 1.0667vw /* 8px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.8vw /* 6px */;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  min-width: 5.3333vw /* 40px */;
}

.filter-btn {
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  background: rgba(60, 50, 40, 0.6);
  border: 1px solid rgba(120, 100, 80, 0.3);
  border-radius: 0.5333vw /* 4px */;
  color: rgba(200, 180, 160, 0.8);
  font-size: 0.72em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.filter-btn:hover {
  background: rgba(80, 70, 60, 0.7);
  border-color: rgba(160, 140, 100, 0.5);
}

.filter-btn.active {
  background: rgba(200, 160, 64, 0.25);
  border-color: rgba(200, 160, 64, 0.6);
  color: rgba(240, 210, 120, 0.95);
}

.wx-dot {
  width: 0.8vw /* 6px */;
  height: 0.8vw /* 6px */;
  border-radius: 50%;
  display: inline-block;
}

/* 装备类型分组 */
.equipment-type-group {
  margin-bottom: 1.0667vw /* 8px */;
}

.type-group-title {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.5);
  padding: 0.5333vw /* 4px */ 0;
  margin-bottom: 0.8vw /* 6px */;
  border-bottom: 1px solid rgba(200, 160, 64, 0.1);
}

.type-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21.3333vw /* 160px */, 1fr));
  gap: 1.0667vw /* 8px */;
}

/* 装备卡片 - 新设计 */
.equipment-card {
  position: relative;
  background: rgba(40, 35, 30, 0.7);
  border: 1px solid rgba(120, 100, 80, 0.25);
  border-radius: 1.0667vw /* 8px */;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  display: flex;
}

.equipment-card:hover {
  transform: translateY(-0.0417rem /* -2px */);
  border-color: rgba(160, 140, 100, 0.4);
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0, 0, 0, 0.3);
}

.equipment-card.equipped {
  border-color: rgba(200, 160, 64, 0.6);
  background: rgba(60, 50, 35, 0.8);
}

.equipment-card.resonance {
  box-shadow: 0 0 1.0667vw /* 8px */ rgba(200, 160, 64, 0.2);
}

/* 材质条 */
.card-material-bar {
  width: 0.5333vw /* 4px */;
  min-height: 100%;
  flex-shrink: 0;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
}

/* 图标区 */
.card-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.card-mat-icon {
  width: 3.4667vw /* 26px */;
  height: 3.4667vw /* 26px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  box-shadow: 0 0.2667vw /* 2px */ 0.5333vw /* 4px */ rgba(0, 0, 0, 0.3);
}

.card-shape-icon {
  font-size: 0.85em;
  opacity: 0.8;
}

/* 信息区 */
.card-info {
  flex: 1;
  min-width: 0;
}

.card-name {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 0.5333vw /* 4px */;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-wuxing {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
}

.wx-tag {
  font-size: 0.65em;
  padding: 0.2667vw /* 2px */ 0.8vw /* 6px */;
  border-radius: 0.4vw /* 3px */;
  color: rgba(255, 255, 255, 0.9);
}

.resonance-badge {
  font-size: 0.6em;
  padding: 1px 0.6667vw /* 5px */;
  background: rgba(200, 160, 64, 0.3);
  border: 1px solid rgba(200, 160, 64, 0.5);
  border-radius: 0.4vw /* 3px */;
  color: rgba(240, 210, 120, 0.9);
}

/* 品质 */
.card-quality {
  font-size: 0.65em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  padding: 0.5333vw /* 4px */ 0.2667vw /* 2px */;
  opacity: 0.8;
}

/* 已装备标记 */
.equipped-mark {
  position: absolute;
  top: 0.2667vw /* 2px */;
  right: 0.2667vw /* 2px */;
  width: 2.4vw /* 18px */;
  height: 2.4vw /* 18px */;
  background: rgba(200, 160, 64, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  color: rgba(30, 25, 20, 0.95);
}

/* 装备槽样式 */
.zhenfa-slot {
  position: absolute;
  width: 7.4667vw /* 56px */;
  height: 7.4667vw /* 56px */;
  cursor: pointer;
  transition: all 0.2s;
}

.zhenfa-slot:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.zhenfa-slot.selected .slot-inner {
  box-shadow: 0 0 2vw /* 15px */ rgba(200, 160, 64, 0.5);
  border-color: rgba(200, 160, 64, 0.8);
}

.slot-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.2667vw /* 2px */ solid rgba(160, 140, 100, 0.4);
  background: rgba(30, 25, 20, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2667vw /* 2px */;
  transition: all 0.2s;
}

.zhenfa-slot.equipped .slot-inner {
  border-width: 0.4vw /* 3px */;
}

.slot-empty {
  font-size: 0.7em;
  color: rgba(160, 140, 120, 0.6);
}

.slot-mat {
  font-size: 1.1em;
}

.slot-shape {
  font-size: 0.8em;
  opacity: 0.8;
}

.slot-wuxing-badge {
  position: absolute;
  bottom: -0.0833rem /* -4px */;
  right: -0.0833rem /* -4px */;
  width: 2.4vw /* 18px */;
  height: 2.4vw /* 18px */;
  border-radius: 50%;
  font-size: 0.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  border: 0.2667vw /* 2px */ solid rgba(30, 25, 20, 0.8);
}

/* 图例 */
.equipment-legend {
  margin-top: 1.6vw /* 12px */;
  padding: 1.3333vw /* 10px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.0667vw /* 8px */;
}

.legend-title {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  margin-bottom: 1.0667vw /* 8px */;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 0.8vw /* 6px */;
  flex-wrap: wrap;
}

.legend-label {
  font-size: 0.7em;
  color: rgba(180, 160, 140, 0.5);
  min-width: 5.3333vw /* 40px */;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  font-size: 0.7em;
  color: rgba(200, 180, 160, 0.8);
}

.legend-icon {
  width: 2.4vw /* 18px */;
  height: 2.4vw /* 18px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
}

.legend-shape {
  font-size: 0.9em;
}

/* 五行统计条 */
.wuxing-summary-bar {
  display: flex;
  justify-content: center;
  gap: 1.6vw /* 12px */;
  padding: 1.3333vw /* 10px */;
  margin-top: 1.3333vw /* 10px */;
}

.wuxing-stat-item {
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2.6667vw /* 20px */;
  opacity: 0.5;
  transition: all 0.2s;
}

.wuxing-stat-item.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
}

.wuxing-icon {
  width: 1.0667vw /* 8px */;
  height: 1.0667vw /* 8px */;
  border-radius: 50%;
}

.wuxing-name {
  font-size: 0.75em;
  color: rgba(200, 180, 160, 0.8);
}

.wuxing-count {
  font-size: 0.7em;
  color: rgba(200, 160, 64, 0.9);
  font-weight: bold;
}

/* ============================================================
   阵法盘 - 极简装备系统样式 v20260409-10（新增）
   ============================================================ */

/* 装备选择栏容器 */
.zhenfa-equipment-section {
  background: rgba(30, 25, 20, 0.6);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.6vw /* 12px */;
  margin-top: 1.6vw /* 12px */;
  border: 1px solid rgba(200, 160, 64, 0.15);
}

.equipment-selection-container {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

/* 选择提示 */
.equipment-selection-hint {
  text-align: center;
  color: rgba(200, 180, 140, 0.7);
  font-size: 0.9em;
  padding: 4vw /* 30px */ 2.6667vw /* 20px */;
}

/* 选择栏头部 */
.equipment-selection-header {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  padding-bottom: 1.3333vw /* 10px */;
  border-bottom: 1px solid rgba(200, 160, 64, 0.2);
}

.selection-slot-name {
  font-size: 1em;
  font-weight: bold;
  color: rgba(240, 210, 120, 0.95);
}

.selection-count {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  flex: 1;
}

.unequip-btn {
  padding: 0.6667vw /* 5px */ 1.8667vw /* 14px */;
  background: rgba(200, 100, 80, 0.2);
  border: 1px solid rgba(200, 100, 80, 0.4);
  border-radius: 0.5333vw /* 4px */;
  color: rgba(240, 160, 140, 0.9);
  font-size: 0.75em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.unequip-btn:hover {
  background: rgba(200, 100, 80, 0.35);
}

/* 筛选器 */
.equipment-filters {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  padding: 1.0667vw /* 8px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.8vw /* 6px */;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  min-width: 5.3333vw /* 40px */;
}

.filter-btn {
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  background: rgba(60, 50, 40, 0.6);
  border: 1px solid rgba(120, 100, 80, 0.3);
  border-radius: 0.5333vw /* 4px */;
  color: rgba(200, 180, 160, 0.8);
  font-size: 0.72em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.filter-btn:hover {
  background: rgba(80, 70, 60, 0.7);
  border-color: rgba(160, 140, 100, 0.5);
}

.filter-btn.active {
  background: rgba(200, 160, 64, 0.25);
  border-color: rgba(200, 160, 64, 0.6);
  color: rgba(240, 210, 120, 0.95);
}

.wx-dot {
  width: 0.8vw /* 6px */;
  height: 0.8vw /* 6px */;
  border-radius: 50%;
  display: inline-block;
}

/* 装备类型分组 */
.equipment-type-group {
  margin-bottom: 1.0667vw /* 8px */;
}

.type-group-title {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.5);
  padding: 0.5333vw /* 4px */ 0;
  margin-bottom: 0.8vw /* 6px */;
  border-bottom: 1px solid rgba(200, 160, 64, 0.1);
}

.type-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21.3333vw /* 160px */, 1fr));
  gap: 1.0667vw /* 8px */;
}

/* 装备卡片 - 新设计 */
.equipment-card {
  position: relative;
  background: rgba(40, 35, 30, 0.7);
  border: 1px solid rgba(120, 100, 80, 0.25);
  border-radius: 1.0667vw /* 8px */;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  display: flex;
}

.equipment-card:hover {
  transform: translateY(-0.0417rem /* -2px */);
  border-color: rgba(160, 140, 100, 0.4);
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0, 0, 0, 0.3);
}

.equipment-card.equipped {
  border-color: rgba(200, 160, 64, 0.6);
  background: rgba(60, 50, 35, 0.8);
}

.equipment-card.resonance {
  box-shadow: 0 0 1.0667vw /* 8px */ rgba(200, 160, 64, 0.2);
}

/* 材质条 */
.card-material-bar {
  width: 0.5333vw /* 4px */;
  min-height: 100%;
  flex-shrink: 0;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  padding: 1.0667vw /* 8px */ 1.3333vw /* 10px */;
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
}

/* 图标区 */
.card-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.card-mat-icon {
  width: 3.4667vw /* 26px */;
  height: 3.4667vw /* 26px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  box-shadow: 0 0.2667vw /* 2px */ 0.5333vw /* 4px */ rgba(0, 0, 0, 0.3);
}

.card-shape-icon {
  font-size: 0.85em;
  opacity: 0.8;
}

/* 信息区 */
.card-info {
  flex: 1;
  min-width: 0;
}

.card-name {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 0.5333vw /* 4px */;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-wuxing {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
}

.wx-tag {
  font-size: 0.65em;
  padding: 0.2667vw /* 2px */ 0.8vw /* 6px */;
  border-radius: 0.4vw /* 3px */;
  color: rgba(255, 255, 255, 0.9);
}

.resonance-badge {
  font-size: 0.6em;
  padding: 1px 0.6667vw /* 5px */;
  background: rgba(200, 160, 64, 0.3);
  border: 1px solid rgba(200, 160, 64, 0.5);
  border-radius: 0.4vw /* 3px */;
  color: rgba(240, 210, 120, 0.9);
}

/* 品质 */
.card-quality {
  font-size: 0.65em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  padding: 0.5333vw /* 4px */ 0.2667vw /* 2px */;
  opacity: 0.8;
}

/* 已装备标记 */
.equipped-mark {
  position: absolute;
  top: 0.2667vw /* 2px */;
  right: 0.2667vw /* 2px */;
  width: 2.4vw /* 18px */;
  height: 2.4vw /* 18px */;
  background: rgba(200, 160, 64, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  color: rgba(30, 25, 20, 0.95);
}

/* 图例 */
.equipment-legend {
  margin-top: 1.6vw /* 12px */;
  padding: 1.3333vw /* 10px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.0667vw /* 8px */;
}

.legend-title {
  font-size: 0.75em;
  color: rgba(200, 180, 140, 0.6);
  margin-bottom: 1.0667vw /* 8px */;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 0.8vw /* 6px */;
  flex-wrap: wrap;
}

.legend-label {
  font-size: 0.7em;
  color: rgba(180, 160, 140, 0.5);
  min-width: 5.3333vw /* 40px */;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  font-size: 0.7em;
  color: rgba(200, 180, 160, 0.8);
}

.legend-icon {
  width: 2.4vw /* 18px */;
  height: 2.4vw /* 18px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
}

.legend-shape {
  font-size: 0.9em;
}

/* 五行统计条 */
.wuxing-summary-bar {
  display: flex;
  justify-content: center;
  gap: 1.6vw /* 12px */;
  padding: 1.3333vw /* 10px */;
  margin-top: 1.3333vw /* 10px */;
}

.wuxing-stat-item {
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2.6667vw /* 20px */;
  opacity: 0.5;
  transition: all 0.2s;
}

.wuxing-stat-item.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
}

.wuxing-icon {
  width: 1.0667vw /* 8px */;
  height: 1.0667vw /* 8px */;
  border-radius: 50%;
}

.wuxing-name {
  font-size: 0.75em;
  color: rgba(200, 180, 160, 0.8);
}

.wuxing-count {
  font-size: 0.7em;
  color: rgba(200, 160, 64, 0.9);
  font-weight: bold;
}

/* ============================================================
   阵法盘 - 装备选择区样式 v20260409-12（新增）
   ============================================================ */

/* 装备选择区容器 */
.zhenfa-equipment-section {
  background: rgba(245, 240, 230, 0.95);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.6vw /* 12px */;
  margin-top: 1.6vw /* 12px */;
  border: 1px solid rgba(200, 180, 160, 0.3);
}

.equipment-selection-hint {
  text-align: center;
  color: #8b7355;
  font-size: 0.9em;
  padding: 2.6667vw /* 20px */;
}

.equipment-selection-container {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

/* 选择栏头部 */
.equipment-selection-header {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  padding-bottom: 1.0667vw /* 8px */;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}

.selection-slot-name {
  font-size: 1em;
  font-weight: bold;
  color: #5a4a3a;
}

.selection-count {
  font-size: 0.75em;
  color: #8b7355;
  flex: 1;
}

.unequip-btn {
  padding: 0.5333vw /* 4px */ 1.6vw /* 12px */;
  background: rgba(200, 100, 80, 0.15);
  border: 1px solid rgba(200, 100, 80, 0.3);
  border-radius: 0.5333vw /* 4px */;
  color: #b87060;
  font-size: 0.75em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.unequip-btn:hover {
  background: rgba(200, 100, 80, 0.25);
}

/* 筛选器 */
.equipment-filters {
  display: flex;
  flex-direction: column;
  gap: 0.8vw /* 6px */;
  padding: 1.0667vw /* 8px */;
  background: rgba(139, 105, 20, 0.05);
  border-radius: 0.8vw /* 6px */;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 0.75em;
  color: #8b7355;
  min-width: 5.3333vw /* 40px */;
}

.filter-btn {
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 0.5333vw /* 4px */;
  color: #6b5a4a;
  font-size: 0.72em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(139, 105, 20, 0.35);
}

.filter-btn.active {
  background: rgba(212, 165, 116, 0.3);
  border-color: rgba(139, 105, 20, 0.5);
  color: #5a4a3a;
}

.wx-dot {
  width: 0.8vw /* 6px */;
  height: 0.8vw /* 6px */;
  border-radius: 50%;
  display: inline-block;
}

/* 装备列表 */
.equipment-list {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  max-height: 26.6667vw /* 200px */;
  overflow-y: auto;
}

.equipment-type-section {
  margin-bottom: 0.5333vw /* 4px */;
}

.type-section-title {
  font-size: 0.75em;
  color: #8b7355;
  padding: 0.5333vw /* 4px */ 0;
  margin-bottom: 0.5333vw /* 4px */;
  border-bottom: 1px solid rgba(139, 105, 20, 0.1);
}

.equipment-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0667vw /* 8px */;
}

/* 装备卡片（迷你版） */
.equipment-card-mini {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(139, 105, 20, 0.15);
  border-radius: 0.8vw /* 6px */;
  padding: 0.8vw /* 6px */ 1.0667vw /* 8px */;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
  min-width: 18.6667vw /* 140px */;
  flex: 1;
  max-width: 26.6667vw /* 200px */;
}

.equipment-card-mini:hover {
  transform: translateY(-0.0208rem /* -1px */);
  border-color: rgba(139, 105, 20, 0.3);
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(0, 0, 0, 0.1);
}

.equipment-card-mini.equipped {
  border-color: rgba(200, 160, 64, 0.6);
  background: rgba(212, 184, 116, 0.2);
}

.equipment-card-mini.resonance {
  box-shadow: 0 0 0.8vw /* 6px */ rgba(200, 160, 64, 0.2);
}

.card-mini-mat {
  width: 2.9333vw /* 22px */;
  height: 2.9333vw /* 22px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  flex-shrink: 0;
}

.card-mini-shape {
  font-size: 0.75em;
  flex-shrink: 0;
  opacity: 0.8;
}

.card-mini-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.card-mini-name {
  font-size: 0.7em;
  font-weight: bold;
  margin-bottom: 0.2667vw /* 2px */;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-mini-wuxing {
  display: flex;
  align-items: center;
  gap: 0.4vw /* 3px */;
}

.mini-wx-tag {
  font-size: 0.55em;
  padding: 1px 0.5333vw /* 4px */;
  border-radius: 0.4vw /* 3px */;
  color: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
}

.mini-wx-tag.sub {
  opacity: 0.8;
}

.mini-resonance {
  font-size: 0.5em;
  padding: 1px 0.4vw /* 3px */;
  background: rgba(200, 160, 64, 0.25);
  border: 1px solid rgba(200, 160, 64, 0.4);
  border-radius: 0.4vw /* 3px */;
  color: #8b6914;
  flex-shrink: 0;
}

.mini-equipped {
  position: absolute;
  top: -0.0833rem /* -4px */;
  right: -0.0833rem /* -4px */;
  width: 2.1333vw /* 16px */;
  height: 2.1333vw /* 16px */;
  background: #d4a030;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65em;
  color: white;
}

    .ruyi-ev-tags { display: flex; align-items: center; gap: 1.2vw /* 9px - ×1.5 */; flex-shrink: 0; }
    .ruyi-ev-badge {
      font-size: 2vw /* 15px - ×1.5 */; padding: 0.6vw /* 4.5px - ×1.5 */ 1.8vw /* 13.5px - ×1.5 */; border: 1px solid;
      border-radius: 2.6667vw /* 20px */; white-space: nowrap;
      font-weight: bold; letter-spacing: 0.03em;
    }
    /* 喜忌徽章 */
    .ruyi-xi-tag {
      font-size: 2vw /* 15px - ×1.5 */; padding: 0.4vw /* 3px - ×1.5 */ 1.6vw /* 12px - ×1.5 */; border-radius: 1.6vw /* 12px */;
      background: rgba(50,180,70,0.18); color: #2a7a30;
      border: 1px solid rgba(60,160,70,0.45); font-weight: bold;
    }
    .ruyi-ji-tag {
      font-size: 2vw /* 15px - ×1.5 */; padding: 0.4vw /* 3px - ×1.5 */ 1.6vw /* 12px - ×1.5 */; border-radius: 1.6vw /* 12px */;
      background: rgba(200,60,40,0.15); color: #a02818;
      border: 1px solid rgba(200,80,55,0.45); font-weight: bold;
    }
    .ruyi-cd-tag {
      font-size: 1.9vw /* 14px - ×1.5 */; padding: 0.4vw /* 3px - ×1.5 */ 1.5vw /* 11px - ×1.5 */; border-radius: 1.6vw /* 12px */;
      background: rgba(100,80,170,0.15); color: #583898;
      border: 1px solid rgba(120,95,185,0.38);
    }
    /* 结论文字 — 最重要，大字高亮 */
    .ruyi-ev-conclusion {
      font-size: 2.8vw /* 21px - ×1.5 */; font-weight: 600;
      color: #2a1e08; line-height: 1.55;
      margin-bottom: 1.6vw /* 12px - ×1.5 */; letter-spacing: 0.01em;
    }
    /* 推演依据 — 次要，小字辅助 */
    .ruyi-ev-basis {
      font-size: 2.1vw /* 15.8px - ×1.5 */; color: #6b5530;
      line-height: 1.5; margin-bottom: 2vw /* 15px - ×1.5 */;
      padding-left: 0.4vw /* 3px - ×1.5 */;
    }
    /* 建议行动 */
    .ruyi-ev-advice {
      font-size: 2.33vw /* 17.5px - ×1.5 */; color: #1a4a18; line-height: 1.6;
      padding: 1.6vw /* 12px - ×1.5 */ 2.4vw /* 18px - ×1.5 */; background: rgba(200,240,180,0.7); border-radius: 0.9333vw /* 7px */;
      border-left: 0.4vw /* 3px - ×1.5 */ solid rgba(80,160,50,0.65);
    }
    /* 分组标题 */
    .ruyi-section-divider {
      display: flex; align-items: center; gap: 1.6vw /* 12px - ×1.5 */;
      padding: 2vw /* 15px - ×1.5 */ 1vw /* 7.5px - ×1.5 */ 1vw /* 7.5px - ×1.5 */; margin-top: 1.6vw /* 12px - ×1.5 */;
    }
    .ruyi-sec-icon { font-size: 2.93vw /* 22px - ×1.5 */; }
    .ruyi-sec-label {
      font-size: 2.48vw /* 18.6px - ×1.5 */; font-weight: bold; color: #3a2a0e;
      letter-spacing: 0.05em;
    }
    .ruyi-sec-sub {
      font-size: 2.18vw /* 16.4px - ×1.5 */; color: #6b5530; margin-left: 1vw /* 7.5px - ×1.5 */;
    }
    .ruyi-empty { font-size: 2.63vw /* 19.7px - ×1.5 */; color: #8b7840; text-align: center; padding: 4vw /* 30px - ×1.5 */; }

    /* 养生模块 */
    .ruyi-well-reason {
      display: flex; align-items: center; flex-wrap: wrap; gap: 1.6vw /* 12px - ×1.5 */;
      padding: 3vw /* 22.5px - ×1.5 */ 3.4vw /* 25.5px - ×1.5 */; margin-bottom: 2.8vw /* 21px - ×1.5 */;
      background: rgba(255,245,220,0.9);
      border: 1px solid rgba(210,168,68,0.45); border-radius: 1.4667vw /* 11px */;
      font-size: 1.6em !important; color: #3a2a0e; line-height: 1.65;
    }
    .ruyi-well-reason strong { font-size: 1em; color: var(--rx-color, #b88a18); }
    .ruyi-well-organ { margin-left: auto; font-size: 1em !important; color: #6b5530; white-space: nowrap; }
    .ruyi-well-block {
      margin-bottom: 2.8vw /* 21px - ×1.5 */; background: rgba(252,248,235,0.95);
      border: 1px solid rgba(200,170,80,0.35); border-radius: 1.4667vw /* 11px */;
      padding: 3vw /* 22.5px - ×1.5 */ 3.4vw /* 25.5px - ×1.5 */;
    }
    .ruyi-well-block-title { font-size: 1.62em !important; font-weight: bold; color: #3a2a0e; margin-bottom: 2vw /* 15px - ×1.5 */; letter-spacing: 0.04em; }
    .ruyi-well-intro { font-size: 1.5em !important; color: #5a4520; line-height: 1.7; margin-bottom: 2.2vw /* 16.5px - ×1.5 */; }
    .ruyi-well-item {
      padding: 2.4vw /* 18px - ×1.5 */ 3vw /* 22.5px - ×1.5 */; margin-bottom: 1.6vw /* 12px - ×1.5 */;
      background: rgba(255,252,240,0.9);
      border: 1px solid rgba(200,170,80,0.3); border-radius: 1.2vw /* 9px */;
    }
    .ruyi-well-item:last-child { margin-bottom: 0; }
    .ruyi-well-name { font-size: 1.62em !important; font-weight: bold; color: #3a2a0e; margin-bottom: 1.2vw /* 9px - ×1.5 */; }
    .ruyi-well-desc { font-size: 1.5em !important; color: #4a3818; line-height: 1.7; }
    .ruyi-well-meta { font-size: 1.35em !important; color: #7a6540; margin-top: 1.2vw /* 9px - ×1.5 */; }
    .ruyi-well-tip-name { color: #b88a18 !important; }
    .ruyi-well-golden { border-color: rgba(200,160,60,0.5) !important; background: rgba(255,248,210,0.9) !important; }
    .ruyi-well-foods { display: flex; flex-wrap: wrap; gap: 1.4vw /* 10.5px - ×1.5 */; margin-top: 1.6vw /* 12px - ×1.5 */; }
    .ruyi-food-tag {
      font-size: 1.5em !important; padding: 1vw /* 7.5px - ×1.5 */ 2.8vw /* 21px - ×1.5 */; border-radius: 2vw /* 15px */;
      background: rgba(220,240,200,0.85); border: 1px solid rgba(120,180,90,0.45);
      color: #2a6a20; white-space: nowrap; font-weight: 500;
    }

    /* 万年历模块 */
    .ruyi-cal-gz { display: flex; gap: 1.0667vw /* 8px */; margin-bottom: 1.8667vw /* 14px */; }
    .ruyi-cal-pillar {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      padding: 1.6vw /* 12px */ 1.2vw /* 9px */; background: rgba(255,255,255,0.035);
      border: 1px solid rgba(200,160,64,0.17); border-radius: 1.2vw /* 9px */;
    }
    .ruyi-cp-today { border-color: rgba(200,160,64,0.55) !important; background: rgba(255,248,210,0.95) !important; }
    .ruyi-cp-label { font-size: 1.28em !important; color: #6b5530; margin-bottom: 1vw /* 7.5px - ×1.5 */; }
    .ruyi-cp-gz { font-size: 1.25em; font-weight: bold; color: #2a1e08; letter-spacing: 0.06em; }
    .ruyi-cp-nayin { font-size: 1.23em !important; color: #6b5530; margin-top: 1vw /* 7.5px - ×1.5 */; }
    .ruyi-cal-jianshen {
      display: flex; gap: 2.4vw /* 18px - ×1.5 */; align-items: flex-start;
      padding: 3vw /* 22.5px - ×1.5 */ 3.4vw /* 25.5px - ×1.5 */; margin-bottom: 2.8vw /* 21px - ×1.5 */;
      background: rgba(252,248,235,0.95);
      border: 1px solid; border-radius: 1.4667vw /* 11px */;
    }
    .ruyi-jc-left { text-align: center; flex-shrink: 0; }
    .ruyi-jc-name { font-size: 2.55em !important; font-weight: bold; line-height: 1.1; color: #2a1e08; }
    .ruyi-jc-label { font-size: 1.2em !important; color: #6b5530; margin-top: 0.8vw /* 6px - ×1.5 */; white-space: nowrap; }
    .ruyi-jc-right { flex: 1; }
    .ruyi-jc-yi { font-size: 1.5em !important; color: #1a6a18; line-height: 1.75; margin-bottom: 0.6vw /* 4.5px */; }
    .ruyi-jc-ji { font-size: 1.5em !important; color: #a03018; line-height: 1.75; }
    .ruyi-cal-block {
      margin-bottom: 2.8vw /* 21px - ×1.5 */; background: rgba(252,248,235,0.95);
      border: 1px solid rgba(200,170,80,0.3); border-radius: 1.4667vw /* 11px */;
      padding: 3vw /* 22.5px - ×1.5 */ 3.4vw /* 25.5px - ×1.5 */;
    }
    .ruyi-wx-bars { display: flex; flex-direction: column; gap: 0.9333vw /* 7px */; margin-top: 0.9333vw /* 7px */; }
    .ruyi-wx-bar-item { display: flex; align-items: center; gap: 1.0667vw /* 8px */; }
    .ruyi-wx-bar-label { font-size: 1.43em !important; color: #5a4520; width: 6vw /* 45px - 放宽 */; flex-shrink: 0; }
    .ruyi-wx-bar-bg { flex: 1; height: 1.4vw /* 10.5px - ×1.5 */; background: rgba(200,180,140,0.25); border-radius: 0.6667vw /* 5px */; overflow: hidden; }
    .ruyi-wx-bar-fill { height: 100%; border-radius: 0.6667vw /* 5px */; transition: width 0.6s ease; }
    .ruyi-wx-bar-cnt { font-size: 1.32em !important; color: #5a4520; width: 3.2vw /* 24px */; text-align: right; flex-shrink: 0; }

    /* 五行当令紧凑小模块 */
    .ruyi-wx-mini-block {
      display: flex; align-items: center; gap: 1.6vw /* 12px - ×1.5 */;
      padding: 1.6vw /* 12px - ×1.5 */ 2.4vw /* 18px - ×1.5 */; margin-bottom: 2.8vw /* 21px - ×1.5 */;
      background: rgba(252,248,235,0.95);
      border: 1px solid rgba(200,170,80,0.3); border-radius: 1.4667vw /* 11px */;
    }
    .ruyi-wx-mini-label {
      font-size: 1.28em !important; color: #5a4520;
      white-space: nowrap; flex-shrink: 0; letter-spacing: 0.03em;
    }
    .ruyi-wx-mini-row {
      display: flex; align-items: center; gap: 0.6667vw /* 5px */; flex: 1; justify-content: flex-end;
    }
    .ruyi-wx-mini-item {
      display: flex; flex-direction: column; align-items: center;
      padding: 0.6667vw /* 5px */ 1.0667vw /* 8px */; border-radius: 0.9333vw /* 7px */; border: 1px solid transparent;
      line-height: 1.2; transition: all 0.2s;
    }
    .ruyi-wx-mini-item .ruyi-wx-mini-icon { font-size: 0.82em !important; }
    .ruyi-wx-mini-item .ruyi-wx-mini-name { font-size: 0.78em !important; font-weight: 500; }
    .ruyi-wx-mini-item .ruyi-wx-mini-cnt  { font-size: 0.72em !important; opacity: 0.75; }
    .ruyi-wx-mini-item .ruyi-wx-mini-tag  { display: none; }
    /* 当令五行：大字突出 */
    .ruyi-wx-mini-dom {
      padding: 0.8vw /* 6px */ 1.3333vw /* 10px */; border-radius: 1.2vw /* 9px */;
    }
    .ruyi-wx-mini-dom .ruyi-wx-mini-icon { font-size: 1.05em; }
    .ruyi-wx-mini-dom .ruyi-wx-mini-name { font-size: 1.05em; font-weight: bold; }
    .ruyi-wx-mini-dom .ruyi-wx-mini-cnt  { font-size: 0.72em; opacity: 0.9; }
    .ruyi-wx-mini-dom .ruyi-wx-mini-tag  {
      display: block; font-size: 0.55em; letter-spacing: 0.05em;
      padding: 1px 0.6667vw /* 5px */; border-radius: 1.0667vw /* 8px */; margin-top: 0.2667vw /* 2px */;
      background: rgba(255,255,255,0.12); opacity: 0.88;
    }
    .ruyi-shichen-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1vw /* 7.5px - ×1.5 */; margin-top: 1.6vw /* 12px - ×1.5 */; }
    .ruyi-shichen-item {
      display: flex; flex-direction: column; align-items: center;
      padding: 1.4vw /* 10.5px - ×1.5 */ 0.4vw /* 3px - ×1.5 */; border-radius: 1.4vw /* 10.5px */;
      border: 1px solid rgba(200,170,80,0.25);
      background: rgba(250,245,230,0.9);
    }
    .ruyi-shichen-cur { border-width: 0.3vw /* 2.25px - ×1.5 */ !important; background: rgba(255,248,210,0.98) !important; }
    .ruyi-sc-zhi { font-size: 1.15em; font-weight: bold; line-height: 1.3; color: #2a1e08; }
    .ruyi-sc-wx { font-size: 0.99em; color: #5a4520; margin-top: 0.4vw /* 3px - ×1.5 */; }
    .ruyi-sc-time { font-size: 0.9em; color: #7a6540; margin-top: 0.4vw /* 3px - ×1.5 */; }

    /* 传统历法新增模块 */
    /* 黄道/黑道 + 冲煞 横排卡片 */
    .ruyi-trad-row { display: flex; gap: 1.6vw /* 12px - ×1.5 */; margin-bottom: 2.8vw /* 21px - ×1.5 */; }
    .ruyi-trad-card {
      flex: 1; padding: 2vw /* 15px - ×1.5 */ 18px; border-radius: 1.4667vw /* 11px */;
      background: rgba(252,248,235,0.9); border: 1px solid rgba(200,170,80,0.28);
      display: flex; flex-direction: column; gap: 0.8vw /* 6px - ×1.5 */;
    }
    .ruyi-trad-card-label { font-size: 1.05em; color: #7a6540; letter-spacing: 0.03em; }
    .ruyi-trad-card-value { font-size: 1.58em; font-weight: bold; color: #2a1e08; letter-spacing: 0.04em; }
    .ruyi-trad-card-sub { font-size: 1.08em; color: #6b5530; line-height: 1.55; }
    /* 黄道吉日绿色强调 */
    .ruyi-trad-huangdao { border-color: rgba(80,190,80,0.5) !important; background: rgba(220,245,210,0.9) !important; }
    .ruyi-trad-huangdao .ruyi-trad-card-value { color: #1a6a18; }
    /* 黑道日红色强调 */
    .ruyi-trad-heidao { border-color: rgba(200,80,60,0.45) !important; background: rgba(255,235,225,0.9) !important; }
    .ruyi-trad-heidao .ruyi-trad-card-value { color: #a02818; }

    /* 吉神凶神列表 */
    .ruyi-shen-grid { display: flex; flex-wrap: wrap; gap: 0.8vw /* 6px */; margin-top: 1.0667vw /* 8px */; }
    .ruyi-shen-ji {
      font-size: 1.2em; padding: 0.6vw /* 4.5px - ×1.5 */ 2.2vw /* 16.5px - ×1.5 */; border-radius: 1.8667vw /* 14px */;
      background: rgba(210,240,200,0.85); border: 1px solid rgba(100,180,80,0.45);
      color: #1a6a18; white-space: nowrap;
    }
    .ruyi-shen-xiong {
      font-size: 1.2em; padding: 0.6vw /* 4.5px - ×1.5 */ 2.2vw /* 16.5px - ×1.5 */; border-radius: 1.8667vw /* 14px */;
      background: rgba(255,230,225,0.85); border: 1px solid rgba(200,80,55,0.4);
      color: #a02818; white-space: nowrap;
    }

    /* 星宿信息 */
    .ruyi-xiu-row { display: flex; align-items: center; gap: 2.8vw /* 21px - ×1.5 */; padding: 2vw /* 15px - ×1.5 */ 2.6vw /* 19.5px - ×1.5 */; }
    .ruyi-xiu-name { font-size: 1.6em; font-weight: bold; color: #2a1e08; flex-shrink: 0; }
    .ruyi-xiu-info { flex: 1; }
    .ruyi-xiu-title { font-size: 1.32em; color: #3a2a0e; font-weight: 600; margin-bottom: 0.6vw /* 4.5px - ×1.5 */; }
    .ruyi-xiu-desc { font-size: 1.14em; color: #5a4520; line-height: 1.6; }
    /* 值神 */
    .ruyi-zhishen-block { display: flex; align-items: center; gap: 2.4vw /* 18px - ×1.5 */; padding: 2vw /* 15px - ×1.5 */ 2.6vw /* 19.5px - ×1.5 */; }
    .ruyi-zhishen-name { font-size: 1.55em; font-weight: bold; color: #b88a18; flex-shrink: 0; }
    .ruyi-zhishen-desc { font-size: 1.23em; color: #4a3818; line-height: 1.65; }
    /* 传统历法文本 */
    .ruyi-taishi-text { font-size: 1.29em; color: #4a3818; padding: 1.6vw /* 12px - ×1.5 */ 2.6vw /* 19.5px - ×1.5 */; line-height: 1.65; }

    .ruyi-tab-panel { animation: ruyiFadeIn 0.22s ease; }
    @keyframes ruyiFadeIn {
      from { opacity:0; transform:translateY(0.8vw /* 6px */); }
      to   { opacity:1; transform:translateY(0); }
    }

    .tt-income-mid {
      font-size: 0.92em; color: rgba(180,165,100,0.5);
    }

    /* ===== 主页面菜单图标放大 15% （从30%缩小15%） ===== */
    .menu-icon-btn {
      background: transparent !important;
      border: none !important;
    }
    .menu-icon-btn img {
      width: 130% !important;
      max-height: 79.5% !important;
      transform: scale(1.0);
      transform-origin: center;
    }
    .menu-icon-label {
      font-size: 0.72em !important;
      transform: scale(1.0);
      transform-origin: center;
    }


/* ============================================================
   修仙工具 · 新增页面样式
   洞府入口页 / 欢迎弹窗 / 法身介绍页 / 八字全报告页
   ============================================================ */

/* ── 洞府入口页 ── */
#dongfuPage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  overflow: hidden;
  background: #060408;
}
.dongfu-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.88;
}
/* 洞府渐变遮罩 */
.dongfu-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,4,8,0.55) 0%,
    rgba(6,4,8,0.20) 35%,
    rgba(6,4,8,0.20) 60%,
    rgba(6,4,8,0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.dongfu-title-wrap {
  position: absolute;
  top: 7%;
  left: 0; right: 0;
  text-align: center;
  z-index: 2;
}
.dongfu-title-main {
  font-size: 2.2em;
  color: #f0d890;
  letter-spacing: 0.6em;
  font-family: 'JiangXiZhuoKai', serif;
  text-shadow: 0 0 3.2vw /* 24px */ rgba(240,200,80,0.55), 0.2667vw /* 2px */ 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(0,0,0,0.9);
}
.dongfu-title-sub {
  font-size: 0.8em;
  color: rgba(220,190,130,0.65);
  letter-spacing: 0.18em;
  margin-top: 0.8vw /* 6px */;
  text-shadow: 1px 1px 0.5333vw /* 4px */ rgba(0,0,0,0.8);
}

/* 绘仙卷按钮区域 */
.dongfu-scroll-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  z-index: 100;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vw /* 18px - 750适配 */;
  padding: 2vw /* 15px - 750适配 */;
  transition: transform 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.dongfu-scroll-btn:active { transform: translate(-50%, -48%) scale(0.95); }
.dongfu-scroll-img {
  width: 15vw /* 112.5px - 750适配 */;
  filter: drop-shadow(0 0 2.1333vw /* 16px */ rgba(240,200,80,0.5)) drop-shadow(0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0,0,0,0.7));
  animation: dongfu-scroll-float 3s ease-in-out infinite;
}
@keyframes dongfu-scroll-float {
  0%, 100% { transform: translateY(0 /* 0px */); }
  50%       { transform: translateY(-0.1667rem /* -8px */); }
}
.dongfu-scroll-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw /* 6px - 750适配 */;
}
.dongfu-scroll-name {
  font-size: 1.6em;
  color: #f0d890;
  letter-spacing: 0.25em;
  font-family: 'JiangXiZhuoKai', serif;
  text-shadow: 0 0 2.1333vw /* 16px */ rgba(240,200,80,0.6), 1px 1px 0.5333vw /* 4px */ rgba(0,0,0,0.9);
}
.dongfu-scroll-hint {
  font-size: 0.9em;
  color: rgba(220,190,130,0.65);
  letter-spacing: 0.1em;
  animation: dongfu-hint-twinkle 2s ease-in-out infinite;
}
@keyframes dongfu-hint-twinkle {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1;    }
}
.dongfu-bottom-hint {
  position: absolute;
  bottom: 6%;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.75em;
  color: rgba(200,170,110,0.5);
  letter-spacing: 0.06em;
  z-index: 2;
  padding: 0 3.2vw /* 24px */;
  line-height: 1.6;
}

/* ── 欢迎弹窗内部元素（清透风格） ── */
@keyframes welcome-ring-spin {
  from { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) translateY(-50%) rotate(360deg); }
}
@keyframes welcome-ring-spin-rev {
  from { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) translateY(-50%) rotate(-360deg); }
}
@keyframes welcome-taiji-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 1;    transform: translate(-50%,-50%) scale(1.06); }
}
/* 太极+符文圆圈 */
.welcome-rune-wrap {
  position: relative;
  width: 10.6667vw /* 80px */; height: 10.6667vw /* 80px */;
  margin: 0 auto 2.6667vw /* 20px */;
}
.welcome-rune-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 10.6667vw /* 80px */; height: 10.6667vw /* 80px */;
  border-radius: 50%;
  border: 1px dashed rgba(160,120,50,0.3);
  animation: welcome-ring-spin 12s linear infinite;
  pointer-events: none;
}
.welcome-rune-ring::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8.5333vw /* 64px */; height: 8.5333vw /* 64px */;
  margin: -0.6667rem /* -32px */ 0 0 -0.6667rem /* -32px */;
  border-radius: 50%;
  border: 1px solid rgba(160,120,50,0.18);
  animation: welcome-ring-spin-rev 7s linear infinite;
}
.welcome-rune-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7.2vw /* 54px */; height: 7.2vw /* 54px */;
  border-radius: 50%;
  background: rgba(255,250,238,0.9);
  border: 1px solid rgba(180,140,60,0.25);
  box-shadow: 0 0.2667vw /* 2px */ 2.1333vw /* 16px */ rgba(160,120,50,0.12), inset 0 1px 0.5333vw /* 4px */ rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  animation: welcome-taiji-breathe 3s ease-in-out infinite;
}
.welcome-title {
  font-size: 1.25em;
  color: #6b4d18;
  letter-spacing: 0.28em;
  font-family: 'JiangXiZhuoKai', serif;
  text-shadow: none;
  margin-bottom: 0.8vw /* 6px */;
  position: relative;
  z-index: 1;
}
.welcome-subtitle {
  font-size: 0.77em;
  color: rgba(130,95,40,0.6);
  letter-spacing: 0.08em;
  margin-bottom: 2.9333vw /* 22px */;
  position: relative;
  z-index: 1;
}
.welcome-progress-wrap {
  width: 100%;
  height: 0.4vw /* 3px */;
  background: rgba(180,140,60,0.12);
  border-radius: 0.4vw /* 3px */;
  overflow: hidden;
  margin-bottom: 1.6vw /* 12px */;
  position: relative;
  z-index: 1;
}
.welcome-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 0.4vw /* 3px */;
  background: linear-gradient(90deg, #c8973a, #e8c870, #c8973a);
  background-size: 200% 100%;
  animation: welcome-bar-shimmer 1.5s linear infinite;
  transition: width 0.6s ease;
}
@keyframes welcome-bar-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.welcome-status {
  font-size: 0.73em;
  color: rgba(140,105,50,0.5);
  letter-spacing: 0.14em;
  margin-bottom: 2.9333vw /* 22px */;
  position: relative;
  z-index: 1;
  min-height: 2.4vw /* 18px */;
}
.welcome-enter-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c8973a, #e0ba62, #c8973a);
  background-size: 200% 100%;
  border: 1px solid rgba(200,155,50,0.4);
  border-radius: 3.7333vw /* 28px */;
  color: #fff8ed;
  font-size: 0.92em;
  font-weight: bold;
  padding: 1.4667vw /* 11px */ 6.1333vw /* 46px */;
  cursor: pointer;
  letter-spacing: 0.22em;
  font-family: 'JiangXiZhuoKai', serif;
  box-shadow: 0 0.5333vw /* 4px */ 2.4vw /* 18px */ rgba(180,130,40,0.22), 0 1px 0.5333vw /* 4px */ rgba(0,0,0,0.06);
  transition: all 0.25s;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.5s ease-out, welcome-btn-shimmer 2.5s ease-in-out infinite;
}
@keyframes welcome-btn-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%       { background-position: 100% 0; }
}
.welcome-enter-btn:active { transform: scale(0.97); opacity: 0.88; }

/* ── 法身页 ── */

/* 新布局：法身主容器 */
.fashen-main-container {
  position: relative;
  width: 100%;
  min-height: 42.6667vw /* 320px */;
  margin: 0 auto 2.1333vw /* 16px */;
}

/* 法身人物图居中偏上 */
.fashen-char-wrapper {
  position: relative;
  width: 24vw /* 180px */;
  margin: 2.6667vw /* 20px */ auto 0;
  z-index: 1;
}

.fashen-char-wrapper .fashen-char-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.3333vw /* 10px */;
  border: 0.2667vw /* 2px */ solid rgba(200, 160, 60, 0.5);
  box-shadow: 0 1.0667vw /* 8px */ 4.2667vw /* 32px */ rgba(0, 0, 0, 0.6);
  object-fit: contain;
  background: rgba(30, 20, 10, 0.6);
}

/* 四柱干支覆盖层 */
.fashen-pillars-overlay {
  position: absolute;
  top: 2.6667vw /* 20px */;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 1.0667vw /* 8px */;
  pointer-events: none;
}

/* 左侧：年柱、月柱 */
.fashen-pillars-left {
  position: absolute;
  left: 2.1333vw /* 16px */;
  top: 8vw /* 60px */;
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  z-index: 2;
}

/* 右侧：日柱、时柱 */
.fashen-pillars-right {
  position: absolute;
  right: 2.1333vw /* 16px */;
  top: 8vw /* 60px */;
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  z-index: 2;
}

/* 单柱干支容器 */
.fashen-pillar-item {
  display: flex;
  flex-direction: column;
  gap: 0.2667vw /* 2px */;
  background: rgba(0, 0, 0, 0.5);
  border: 0.2vw /* 1.5px */ solid rgba(200, 160, 60, 0.4);
  border-radius: 1.0667vw /* 8px */;
  padding: 0.5333vw /* 4px */;
  backdrop-filter: blur(0.5333vw /* 4px */);
}

.fashen-pillar-item .fashen-gan-img,
.fashen-pillar-item .fashen-zhi-img {
  width: 5.8667vw /* 44px */;
  height: 5.8667vw /* 44px */;
  display: block;
  object-fit: contain;
}

/* 灵根信息区 */
.fashen-lgen-title {
  text-align: center;
  padding: 1.3333vw /* 10px */ 2.1333vw /* 16px */;
}

.fashen-lgen-badge {
  font-size: 1.1em;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1.3333vw /* 10px */ currentColor;
}

.fashen-lgen-subtitle {
  font-size: 0.7em;
  color: rgba(200, 170, 110, 0.5);
  letter-spacing: 0.06em;
  margin-top: 0.2667vw /* 2px */;
}

.fashen-wx-bars {
  padding: 0 2.6667vw /* 20px */;
  margin-bottom: 1.6vw /* 12px */;
}

.fashen-lgen-card {
  margin: 0 2.1333vw /* 16px */ 2.1333vw /* 16px */;
  background: rgba(10, 8, 4, 0.8);
  border: 1px solid rgba(200, 160, 60, 0.25);
  border-radius: 1.6vw /* 12px */;
  padding: 1.8667vw /* 14px */ 2.1333vw /* 16px */;
}

.fashen-lgen-card-title {
  font-size: 0.92em;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.1em;
  margin-bottom: 1.3333vw /* 10px */;
  font-weight: bold;
}

.fashen-lgen-card-desc {
  font-size: 0.82em;
  color: rgba(220, 190, 140, 0.85);
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin-bottom: 1.6vw /* 12px */;
}

.fashen-lgen-card-footer {
  font-size: 0.72em;
  color: rgba(160, 130, 80, 0.55);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(200, 160, 60, 0.12);
  padding-top: 1.0667vw /* 8px */;
}

/* 旧版样式保留（兼容按钮） */
.fashen-report-btn {
  background: linear-gradient(135deg, #9a3a1a, #c84a28, #9a3a1a);
  background-size: 200% 100%;
  border: 0.2vw /* 1.5px */ solid rgba(220,120,70,0.6);
  border-radius: 3.7333vw /* 28px */;
  color: #fde8d0;
  font-size: 1.05em;
  font-weight: bold;
  padding: 1.8667vw /* 14px */ 6.4vw /* 48px */;
  cursor: pointer;
  letter-spacing: 0.15em;
  font-family: 'JiangXiZhuoKai', serif;
  box-shadow: 0 0.8vw /* 6px */ 3.2vw /* 24px */ rgba(180,60,30,0.35), 0 0 0 1px rgba(220,120,70,0.15) inset;
  transition: all 0.3s;
  animation: fashen-btn-glow 2.5s ease-in-out infinite;
}
@keyframes fashen-btn-glow {
  0%, 100% { box-shadow: 0 0.8vw /* 6px */ 3.2vw /* 24px */ rgba(180,60,30,0.35); }
  50%       { box-shadow: 0 0.8vw /* 6px */ 4.2667vw /* 32px */ rgba(220,80,40,0.55), 0 0 1.6vw /* 12px */ rgba(240,120,60,0.3); }
}
.fashen-report-btn:active { transform: scale(0.97); }

/* ── 报告页底部按钮 ── */
.report-bottom-btn {
  flex: 1;
  border: none;
  border-radius: 3.2vw /* 24px */;
  font-size: 0.95em;
  font-weight: bold;
  padding: 1.7333vw /* 13px */ 1.3333vw /* 10px */;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-family: 'JiangXiZhuoKai', serif;
  transition: all 0.25s;
  max-width: 20vw /* 150px */;
}
.report-btn-reset {
  background: linear-gradient(135deg, rgba(139,105,20,0.15), rgba(212,165,116,0.1));
  border: 0.2vw /* 1.5px */ solid rgba(139,105,20,0.4);
  color: #8b6914;
}
.report-btn-reset:active { transform: scale(0.96); }
.report-btn-start {
  background: linear-gradient(135deg, #8b6914, #d4a574);
  color: #f5f0e6;
  box-shadow: 0 0.5333vw /* 4px */ 2.4vw /* 18px */ rgba(139,105,20,0.35);
}
.report-btn-start:active { transform: scale(0.96); }

/* ── 灵性报告 · 12维度标签按钮 ── */
.report-dim-btn {
  padding: 0.6667vw /* 5px */ 1.6vw /* 12px */;
  border: 0.2vw /* 1.5px */ solid var(--dc, #8b5cf6);
  border-radius: 2.6667vw /* 20px */;
  background: transparent;
  color: var(--dc, #8b5cf6);
  font-size: 1.7333vw /* 13px */;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.65;
}
.report-dim-btn.active,
.report-dim-btn:active {
  background: var(--dc, #8b5cf6);
  color: #fff;
  opacity: 1;
  box-shadow: 0 0 1.3333vw /* 10px */ color-mix(in srgb, var(--dc, #8b5cf6) 40%, transparent);
}

/* ── 灵性报告 · 维度内容卡片 ── */
.report-dim-panel {
  display: none;
  animation: reportFadeIn 0.3s ease;
}
.report-dim-panel.active { display: block; }
@keyframes reportFadeIn {
  from { opacity: 0; transform: translateY(0.8vw /* 6px */); }
  to   { opacity: 1; transform: translateY(0); }
}
.report-dim-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(139,105,20,0.12);
  border-radius: 1.8667vw /* 14px */;
  padding: 2.1333vw /* 16px */;
  margin-bottom: 1.6vw /* 12px */;
}
.report-dim-card-title {
  font-size: 1.6vw /* 12px */;
  color: rgba(139,105,20,0.55);
  letter-spacing: 0.1em;
  margin-bottom: 1.0667vw /* 8px */;
}
.report-dim-card-body {
  font-size: 1.8667vw /* 14px */;
  color: rgba(60,40,10,0.85);
  line-height: 1.85;
  letter-spacing: 0.04em;
}
.report-dim-score-row {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 1.6vw /* 12px */;
}
.report-dim-score-bar-bg {
  flex: 1;
  height: 0.8vw /* 6px */;
  background: rgba(139,105,20,0.12);
  border-radius: 0.4vw /* 3px */;
  overflow: hidden;
}
.report-dim-score-bar-fill {
  height: 100%;
  border-radius: 0.4vw /* 3px */;
  transition: width 0.6s ease;
}
.report-dim-score-label {
  font-size: 1.4667vw /* 11px */;
  color: rgba(139,105,20,0.55);
  white-space: nowrap;
}
.report-dim-badge {
  display: inline-block;
  padding: 0.2667vw /* 2px */ 1.3333vw /* 10px */;
  border-radius: 1.6vw /* 12px */;
  font-size: 1.4667vw /* 11px */;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-left: 1.0667vw /* 8px */;
}

/* ============================================================
   法身介绍页 详细样式
   ============================================================ */

/* ── 上部两栏布局 ── */
.fashen-top-section {
  display: flex;
  gap: 1.6vw /* 12px */;
  padding: 0 1.8667vw /* 14px */;
  margin-bottom: 1.8667vw /* 14px */;
  align-items: flex-start;
}

/* 左侧人物图 */
.fashen-char-area {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw /* 6px */;
}
.fashen-char-img {
  width: 100%;
  max-width: 17.3333vw /* 130px */;
  border-radius: 1.3333vw /* 10px */;
  border: 0.2vw /* 1.5px */ solid rgba(200,160,60,0.3);
  box-shadow: 0 0.5333vw /* 4px */ 2.6667vw /* 20px */ rgba(0,0,0,0.5);
  object-fit: cover;
  /* 占位尺寸：建议提供 130×234px (1:1.8比例) 的人物立绘 */
  min-height: 24vw /* 180px */;
  background: rgba(30,20,10,0.6);
}
.fashen-char-name {
  font-size: 0.88em;
  color: #f0d890;
  letter-spacing: 0.1em;
  font-family: 'JiangXiZhuoKai', serif;
  text-shadow: 0 0 1.0667vw /* 8px */ rgba(240,200,80,0.4);
}
.fashen-char-gender {
  font-size: 0.7em;
  color: rgba(200,170,110,0.55);
  letter-spacing: 0.08em;
}

/* 右侧灵根区 */
.fashen-linggen-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}
.fashen-linggen-title {
  display: flex;
  flex-direction: column;
  gap: 0.2667vw /* 2px */;
}
.fashen-linggen-badge {
  font-size: 1em;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1.3333vw /* 10px */ currentColor;
}
.fashen-linggen-subtitle {
  font-size: 0.68em;
  color: rgba(200,170,110,0.5);
  letter-spacing: 0.06em;
}

/* 四柱排列格 */
.fashen-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5333vw /* 4px */;
}
.fashen-pillar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.28);
  border-radius: 1.0667vw /* 8px */;
  padding: 0.6667vw /* 5px */ 0.4vw /* 3px */ 0.8vw /* 6px */;
  border: 1px solid rgba(200,160,60,0.15);
  gap: 0.4vw /* 3px */;
  position: relative;
}
.fashen-pillar-daymaster {
  background: rgba(200,140,30,0.1);
  border-color: rgba(240,180,60,0.4);
}
.fashen-pillar-label {
  font-size: 0.6em;
  color: rgba(200,170,100,0.65);
  letter-spacing: 0.04em;
  font-weight: bold;
}
.fashen-daymaster-tag {
  font-size: 0.55em;
  color: #f0c060;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* 天干单元格 */
.fashen-gan-cell,
.fashen-zhi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
}

/* 天干/地支图片
   ★ 建议图片尺寸：64×8.5333vw /* 64px */（PNG/WebP透明背景）
   ★ 实际显示宽度约为 5.3333vw /* 40px */（四柱格内）
*/
.fashen-ganzhi-img {
  width: 5.0667vw /* 38px */;
  height: 5.0667vw /* 38px */;
  object-fit: contain;
  filter: drop-shadow(0 0 0.5333vw /* 4px */ var(--wx-color, rgba(240,200,80,0.4)));
}
.fashen-ganzhi-char {
  font-size: 0.58em;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 0 0.8vw /* 6px */ currentColor;
}
.fashen-ganzhi-wx {
  font-size: 0.5em;
  color: rgba(200,170,110,0.45);
  line-height: 1;
}
/* 无图片兜底：直接大字显示天干/地支 */
.fashen-ganzhi-noimg {
  font-size: 1.4em;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 0 0 1.0667vw /* 8px */ currentColor;
  min-height: 5.0667vw /* 38px */;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 五行能量条 */
.fashen-wx-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
}
.fashen-wx-row {
  display: flex;
  align-items: center;
  gap: 0.6667vw /* 5px */;
}
.fashen-wx-label {
  font-size: 0.65em;
  font-weight: bold;
  min-width: 1.6vw /* 12px */;
  text-align: center;
}
.fashen-wx-bar-bg {
  flex: 1;
  height: 0.6667vw /* 5px */;
  background: rgba(255,255,255,0.07);
  border-radius: 0.5333vw /* 4px */;
  overflow: hidden;
}
.fashen-wx-bar-fill {
  height: 100%;
  border-radius: 0.5333vw /* 4px */;
  transition: width 0.8s ease;
}
.fashen-wx-cnt {
  font-size: 0.6em;
  color: rgba(200,170,110,0.55);
  min-width: 1.3333vw /* 10px */;
  text-align: right;
}

/* ── 下部灵根描述卡片 ── */
.fashen-bottom-section {
  padding: 0 1.8667vw /* 14px */;
  margin-bottom: 1.0667vw /* 8px */;
}
.fashen-lgen-card {
  background: rgba(10,8,4,0.7);
  border: 1px solid rgba(200,160,60,0.2);
  border-radius: 1.6vw /* 12px */;
  padding: 1.8667vw /* 14px */ 2.1333vw /* 16px */;
}
.fashen-lgen-card-title {
  font-size: 0.9em;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.1em;
  margin-bottom: 1.0667vw /* 8px */;
  font-weight: bold;
}
.fashen-lgen-card-desc {
  font-size: 0.8em;
  color: rgba(220,190,140,0.82);
  line-height: 1.75;
  letter-spacing: 0.04em;
  margin-bottom: 1.3333vw /* 10px */;
}
.fashen-lgen-card-footer {
  font-size: 0.7em;
  color: rgba(160,130,80,0.55);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(200,160,60,0.12);
  padding-top: 1.0667vw /* 8px */;
}

/* ============================================================
   神性全报告页 样式
   ============================================================ */

/* 报告头部 */
.report-header {
  text-align: center;
  padding: 1.0667vw /* 8px */ 0 2.6667vw /* 20px */;
  border-bottom: 1px solid rgba(139,105,20,0.2);
  margin-bottom: 2.4vw /* 18px */;
}
.report-header-title {
  font-size: 1.3em;
  color: #8b6914;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.3em;
  margin-bottom: 0.8vw /* 6px */;
}
.report-header-sub {
  font-size: 0.78em;
  color: rgba(139,105,20,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 1.0667vw /* 8px */;
}
.report-name {
  font-family: 'JiangXiZhuoKai', serif;
  color: #8b6914;
}
.report-bazi-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  margin-bottom: 1.0667vw /* 8px */;
  flex-wrap: wrap;
}
.report-bazi-pillar {
  font-size: 1em;
  color: #8b6914;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  letter-spacing: 0.05em;
  background: rgba(139,105,20,0.1);
  padding: 0.4vw /* 3px */ 1.3333vw /* 10px */;
  border-radius: 0.8vw /* 6px */;
  border: 1px solid rgba(139,105,20,0.2);
}
.report-bazi-sep {
  color: rgba(139,105,20,0.35);
  font-size: 0.7em;
}
.report-header-hint {
  font-size: 0.7em;
  color: rgba(100,75,20,0.5);
  letter-spacing: 0.04em;
}

/* 维度区块 */
.report-dim-section {
  margin-bottom: 2.6667vw /* 20px */;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(139,105,20,0.1);
  border-radius: 1.6vw /* 12px */;
  overflow: hidden;
}
.report-dim-header {
  display: flex;
  align-items: center;
  gap: 1.6vw /* 12px */;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  border-bottom: 1px solid rgba(139,105,20,0.12);
  background: rgba(245,240,230,0.8);
}
.report-dim-icon {
  font-size: 1.4em;
  line-height: 1;
  flex-shrink: 0;
}
.report-dim-title {
  font-size: 1em;
  font-family: 'JiangXiZhuoKai', serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #8b6914;
}
.report-dim-desc {
  font-size: 0.68em;
  color: rgba(139,105,20,0.5);
  letter-spacing: 0.06em;
  margin-top: 0.2667vw /* 2px */;
}

/* 维度内条目 */
.report-dim-items {
  padding: 1.6vw /* 12px */ 1.8667vw /* 14px */;
  display: flex;
  flex-direction: column;
  gap: 1.8667vw /* 14px */;
}
.report-item {
  border-left: 0.2667vw /* 2px */ solid rgba(139,105,20,0.25);
  padding-left: 1.6vw /* 12px */;
}
.report-item-label {
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-bottom: 0.6667vw /* 5px */;
  font-family: 'JiangXiZhuoKai', serif;
  color: #8b6914;
}
.report-item-content {
  font-size: 0.82em;
  color: rgba(60,40,10,0.85);
  line-height: 1.75;
  letter-spacing: 0.03em;
}

/* 报告尾部 */
.report-footer {
  text-align: center;
  padding: 2.6667vw /* 20px */ 0 1.3333vw /* 10px */;
  margin-top: 1.0667vw /* 8px */;
}
.report-footer-line {
  width: 60%;
  margin: 0 auto 1.8667vw /* 14px */;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,105,20,0.3), transparent);
}
.report-footer-text {
  font-size: 0.72em;
  color: rgba(139,105,20,0.7);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

/* ============================================================
   神性报告 - 剧本化叙事样式
   ============================================================ */

/* 剧本化叙事容器 */
.report-narrative-container {
  padding: 0 1.8667vw /* 14px */ 2.1333vw /* 16px */;
}

/* 剧本化叙事文本（保持格式） */
.report-narrative-text {
  font-family: 'JiangXiZhuoKai', 'Courier New', monospace;
  font-size: 1.8667vw /* 14px */;
  line-height: 2;
  color: rgba(60, 40, 10, 0.88);
  letter-spacing: 0.05em;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: rgba(255,255,255,0.6);
  border-radius: 1.6vw /* 12px */;
  padding: 2.6667vw /* 20px */;
  border: 1px solid rgba(139, 105, 20, 0.15);
}

/* 模块标题 */
.report-module-title {
  font-size: 2vw /* 15px */;
  color: #8b6914;
  font-weight: bold;
  margin: 2.6667vw /* 20px */ 0 1.6vw /* 12px */ 0;
  letter-spacing: 0.15em;
  padding-bottom: 1.0667vw /* 8px */;
  border-bottom: 1px dashed rgba(139, 105, 20, 0.3);
}

/* 警告标注 */
.report-warning {
  color: #c0392b;
  font-weight: bold;
}

/* 星星标记 */
.report-star {
  color: #c8973a;
  font-size: 1.2em;
}

/* 顶部分割线 */
.report-divider-top {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.4), transparent);
  margin: 1.6vw /* 12px */ 0;
}

/* 中间分割线 */
.report-divider-mid {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.25), transparent);
  margin: 2.1333vw /* 16px */ 0;
}

/* ============================================================
   主页法身信息栏 样式
   ============================================================ */
.main-fashen-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.0667vw /* 8px */ 1.8667vw /* 14px */;
  background: linear-gradient(180deg,
    rgba(6,4,8,0.82) 0%,
    rgba(6,4,8,0.55) 70%,
    transparent 100%
  );
}
.main-fashen-bar-inner {
  flex: 1;
  min-width: 0;
}
.main-fashen-name {
  font-size: 0.88em;
  color: #f0d890;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1.0667vw /* 8px */ rgba(240,200,80,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-fashen-info {
  font-size: 0.65em;
  color: rgba(200,170,110,0.55);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.main-fashen-regen {
  flex-shrink: 0;
  background: rgba(200,160,60,0.12);
  border: 1px solid rgba(200,160,60,0.3);
  border-radius: 50%;
  width: 3.4667vw /* 26px */;
  height: 3.4667vw /* 26px */;
  color: rgba(200,160,60,0.7);
  font-size: 0.9em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 1.0667vw /* 8px */;
}
.main-fashen-regen:active {
  transform: rotate(-180deg);
  background: rgba(200,160,60,0.22);
}

/* ============================================================
   修身镜 · 全新设计（XSM）v=20260414-scale4
   ============================================================ */

/* ── 顶部导航栏 ── */
.xsm-topbar {
  display: flex;
  align-items: center;
  gap: 2.5vw /* 18.75px - 750适配 */;
  padding: 2.5vw /* 18.75px */ 3.5vw /* 26.25px */ 2vw /* 15px */;
  border-bottom: 1px solid rgba(140,100,200,0.2);
}
.xsm-title-block {
  flex: 1;
}
.xsm-title {
  font-size: 7vw /* 52.5px - 750适配 */;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.2em;
  text-shadow: 0 0 1.3333vw /* 10px */ rgba(212,175,90,0.5);
}
.xsm-subtitle {
  font-size: 4vw /* 30px - 750适配 */;
  color: rgba(200,170,110,0.55);
  letter-spacing: 0.08em;
  margin-top: 2px;
}
/* 修炼类型徽章 */
.xsm-cultivate-badge {
  font-size: 4vw /* 30px - 750适配 */;
  color: #d4af5a;
  background: rgba(180,140,60,0.15);
  border: 1px solid rgba(180,140,60,0.35);
  border-radius: 3vw /* 22.5px - 750适配 */;
  padding: 0.8vw /* 6px */ 2.5vw /* 18.75px */;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── 上半区布局：法身图 + 境界 ── */
.xsm-upper-section {
  display: flex;
  gap: 2.5vw /* 18.75px - 750适配 */;
  padding: 3vw /* 22.5px */ 3.5vw /* 26.25px */ 2vw /* 15px */;
  align-items: flex-start;
}

/* 左侧法身 + 三球 */
.xsm-left-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vw /* 11.25px - 750适配 */;
  width: 32vw /* 240px - 750适配 */;
}

/* 三球 + 法身图框架（相对定位容器） */
.xsm-orb-frame {
  position: relative;
  width: 32vw /* 240px - 750适配 */;
  height: 56vw /* 420px - 750适配 */;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 法身立绘图（建议尺寸：208×364px，750适配） */
.xsm-char-img {
  position: absolute;
  width: 48vw /* 360px - 750适配 */;
  height: 86vw /* 645px - 750适配 */;
  object-fit: contain;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 2vw /* 15px */ rgba(160,120,220,0.5));
  z-index: 1;
}
/* 球通用样式 */
.xsm-orb {
  position: absolute;
  width: 22vw /* 165px - 750适配 */;
  height: 22vw /* 165px */;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  box-shadow: 0 0 2.4vw /* 18px */ rgba(0,0,0,0.4);
}
.xsm-orb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* 兜底文字（图片加载失败时显示） */
.xsm-orb-fallback {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0;
}
/* 神球：上方中央（top=0, 水平居中） */
.xsm-orb-shen {
  top: -0.0417rem /* -2px */;
  left: 50%;
  transform: translateX(-50%);
  border: 0.2vw /* 1.5px */ solid rgba(200,160,240,0.6);
  box-shadow: 0 0 2.1333vw /* 16px */ rgba(180,100,240,0.5);
}
.xsm-orb-shen-color { background: radial-gradient(circle, #9c60e0, #6020b0); }
/* 身球：左下 */
.xsm-orb-ti {
  bottom: 0 /* 0px */;
  left: 0 /* 0px */;
  border: 0.2vw /* 1.5px */ solid rgba(80,200,180,0.6);
  box-shadow: 0 0 2.1333vw /* 16px */ rgba(60,180,160,0.5);
}
.xsm-orb-ti-color { background: radial-gradient(circle, #3cc0a0, #1a8070); }
/* 气球：右下 */
.xsm-orb-qi {
  bottom: 0 /* 0px */;
  right: 0 /* 0px */;
  border: 0.2vw /* 1.5px */ solid rgba(80,160,240,0.6);
  box-shadow: 0 0 2.1333vw /* 16px */ rgba(60,140,220,0.5);
}
.xsm-orb-qi-color { background: radial-gradient(circle, #4090e0, #2050b0); }

/* 灵根标签 */
.xsm-linggen-tag {
  font-size: 4vw /* 30px - 750适配 */;
  color: rgba(200,180,240,0.8);
  background: rgba(140,80,220,0.15);
  border: 1px solid rgba(140,80,220,0.3);
  border-radius: 2.5vw /* 18.75px - 750适配 */;
  padding: 0.8vw /* 6px */ 2.5vw /* 18.75px */;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 右侧境界区 */
.xsm-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw /* 15px - 750适配 */;
  min-height: 56vw /* 420px - 750适配 */;
}
.xsm-realm-name {
  font-size: 6vw /* 45px - 750适配 */;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.12em;
  text-shadow: 0 0 1.3333vw /* 10px */ rgba(212,175,90,0.4);
}
.xsm-realm-type {
  font-size: 3.5vw /* 26px - 750适配 */;
  color: rgba(200,170,110,0.6);
  letter-spacing: 0.05em;
}

/* 大境界进度段 */
.xsm-realm-track {
  display: flex;
  flex-direction: column;
  gap: 1.2vw /* 9px - 750适配 */;
}
.xsm-realm-seg {
  display: flex;
  align-items: center;
  gap: 1.5vw /* 11.25px - 750适配 */;
  opacity: 0.45;
}
.xsm-realm-seg-active {
  opacity: 1;
}
.xsm-realm-seg-label {
  font-size: 3.5vw /* 26px - 750适配 */;
  color: rgba(200,180,140,0.8);
  width: 5.5vw /* 41.25px - 750适配 */;
  flex-shrink: 0;
  text-align: right;
  letter-spacing: 0;
}
.xsm-realm-seg-bar {
  flex: 1;
  height: 3vw /* 22.5px - 750适配 */;
  background: rgba(255,255,255,0.1);
  border-radius: 1vw /* 7.5px - 750适配 */;
  overflow: hidden;
}
.xsm-realm-seg-fill {
  height: 100%;
  background: linear-gradient(90deg, #c8973a, #e8c050);
  border-radius: 1vw /* 7.5px - 750适配 */;
  transition: width 0.6s ease-out;
}
.xsm-realm-seg-active .xsm-realm-seg-fill {
  background: linear-gradient(90deg, #c8973a, #f0d890);
  box-shadow: 0 0 1.3333vw /* 10px */ rgba(200,150,50,0.5);
}

/* 三维经验条 */
.xsm-exp-bars {
  display: flex;
  flex-direction: column;
  gap: 1vw /* 7.5px - 750适配 */;
  margin-top: 0.5vw /* 3.75px - 750适配 */;
}
.xsm-exp-row {
  display: flex;
  align-items: center;
  gap: 1.2vw /* 9px - 750适配 */;
}
.xsm-exp-label {
  font-size: 3.5vw /* 26px - 750适配 */;
  font-weight: bold;
  width: 4vw /* 30px - 750适配 */;
  flex-shrink: 0;
  text-align: center;
}
.xsm-exp-shen { color: rgba(180,100,240,0.9); }
.xsm-exp-ti   { color: rgba(60,200,160,0.9); }
.xsm-exp-qi   { color: rgba(60,160,240,0.9); }
.xsm-exp-track {
  flex: 1;
  height: 3vw /* 22.5px - 750适配 */;
  background: rgba(255,255,255,0.1);
  border-radius: 0.8vw /* 6px - 750适配 */;
  overflow: hidden;
}
.xsm-exp-fill {
  height: 100%;
  border-radius: 0.8vw /* 6px - 750适配 */;
  transition: width 0.5s ease-out;
}
.xsm-exp-fill-shen { background: linear-gradient(90deg, #6020b0, #c060f0); }
.xsm-exp-fill-ti   { background: linear-gradient(90deg, #1a8070, #40e0b0); }
.xsm-exp-fill-qi   { background: linear-gradient(90deg, #2050b0, #50a0f0); }
.xsm-exp-val {
  font-size: 3vw /* 22.5px - 750适配 */;
  color: rgba(200,180,160,0.6);
  width: 7vw /* 52.5px - 750适配 */;
  text-align: right;
  flex-shrink: 0;
}

/* 当前层数提示 */
.xsm-layer-hint {
  display: flex;
  align-items: center;
  gap: 1.5vw /* 11.25px - 750适配 */;
  margin-top: 0.5vw /* 3.75px - 750适配 */;
}
#xsmLayerText {
  font-size: 4vw /* 30px - 750适配 */;
  color: rgba(200,180,140,0.75);
  letter-spacing: 0.05em;
}
.xsm-breakthrough-hint {
  font-size: 3.5vw /* 26px - 750适配 */;
  color: #f0d060;
  background: rgba(240,200,60,0.15);
  border: 1px solid rgba(240,200,60,0.35);
  border-radius: 2vw /* 15px - 750适配 */;
  padding: 2px 1.8vw /* 13.5px */;
  animation: xsmPulse 1.5s ease-in-out infinite;
}
@keyframes xsmPulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ============================================================
   灵性报告页 - V2.30 十二维度展示框架（米色主题）
   ============================================================ */

/* ── 顶部导航栏 ── */
.report-topbar {
  display: flex;
  align-items: center;
  gap: 1.6vw /* 12px */;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  background: rgba(245,240,230,0.9);
  border-bottom: 1px solid rgba(139,105,20,0.12);
}
.report-back-btn {
  width: 16vw /* 120px - 750设计更大 */;
  cursor: pointer;
  flex-shrink: 0;
}
.report-title-block {
  flex: 1;
  text-align: center;
}
.report-title {
  font-size: 1.3em;
  color: #8b6914;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.2em;
}
.report-subtitle {
  font-size: 0.7em;
  color: rgba(139,105,20,0.55);
  letter-spacing: 0.1em;
  margin-top: 0.2667vw /* 2px */;
}
.report-share-btn {
  width: 4.8vw /* 36px */;
  height: 4.8vw /* 36px */;
  border-radius: 50%;
  background: rgba(200,160,80,0.15);
  border: 1px solid rgba(200,160,80,0.3);
  color: #d4af5a;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.report-share-btn:active {
  transform: scale(0.95);
  background: rgba(200,160,80,0.25);
}

/* ── 12维度标签导航 ── */
.report-dim-nav {
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  background: rgba(245,240,230,0.8);
  border-bottom: 1px solid rgba(139,105,20,0.1);
}
.report-dim-tabs {
  display: flex;
  gap: 1.0667vw /* 8px */;
  overflow-x: auto;
  padding-bottom: 0.5333vw /* 4px */;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.report-dim-tabs::-webkit-scrollbar {
  display: none;
}
.report-dim-tab {
  flex-shrink: 0;
  padding: 1.0667vw /* 8px */ 2.1333vw /* 16px */;
  border-radius: 2.6667vw /* 20px */;
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  font-family: 'JiangXiZhuoKai', serif;
}
/* 纯色标签设计 - 未选中状态 */
.report-dim-tab {
  background: rgba(139,105,20,0.1);
  color: rgba(100,75,20,0.65);
}
.report-dim-tab:hover {
  background: rgba(139,105,20,0.18);
}
/* 选中状态 - 各维度不同颜色 */
.report-dim-tab.active[data-dim="wuxing"] { background: #8b5cf6; color: #fff; }
.report-dim-tab.active[data-dim="linghui"] { background: #06b6d4; color: #fff; }
.report-dim-tab.active[data-dim="juexing"] { background: #f59e0b; color: #fff; }
.report-dim-tab.active[data-dim="tongda"] { background: #10b981; color: #fff; }
.report-dim-tab.active[data-dim="ziyuan"] { background: #f97316; color: #fff; }
.report-dim-tab.active[data-dim="daotu"] { background: #6366f1; color: #fff; }
.report-dim-tab.active[data-dim="tipo"] { background: #ef4444; color: #fff; }
.report-dim-tab.active[data-dim="danpo"] { background: #ec4899; color: #fff; }
.report-dim-tab.active[data-dim="renxin"] { background: #14b8a6; color: #fff; }
.report-dim-tab.active[data-dim="dingli"] { background: #3b82f6; color: #fff; }
.report-dim-tab.active[data-dim="qianban"] { background: #a855f7; color: #fff; }
.report-dim-tab.active[data-dim="meili"] { background: #e11d48; color: #fff; }

/* ── 内容展示区 ── */
.report-content-area {
  flex: 1;
  padding: 2.1333vw /* 16px */;
  overflow-y: auto;
}

/* ── 维度总览卡片 ── */
.report-dim-overview {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(139,105,20,0.12);
  border-radius: 2.1333vw /* 16px */;
  padding: 2.6667vw /* 20px */;
  margin-bottom: 2.1333vw /* 16px */;
  display: flex;
  align-items: center;
  gap: 2.6667vw /* 20px */;
}
.report-dim-score {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(139,105,20,0.15);
}
.report-score-value {
  font-size: 3em;
  font-weight: bold;
  color: #8b6914;
  font-family: 'JiangXiZhuoKai', serif;
  line-height: 1;
}
.report-score-label {
  font-size: 0.75em;
  color: rgba(139,105,20,0.5);
  margin-top: 0.8vw /* 6px */;
  letter-spacing: 0.1em;
}
.report-dim-level {
  flex: 1;
  text-align: center;
}
.report-level-badge {
  display: inline-block;
  padding: 1.0667vw /* 8px */ 2.6667vw /* 20px */;
  border-radius: 2.6667vw /* 20px */;
  font-size: 1em;
  font-weight: bold;
  color: #1a1a2e;
  background: linear-gradient(135deg, #d4af5a, #f0d890);
  letter-spacing: 0.1em;
}
.report-level-desc {
  font-size: 0.8em;
  color: rgba(100,75,20,0.7);
  margin-top: 1.3333vw /* 10px */;
  line-height: 1.5;
}

/* ── 维度详细内容 ── */
.report-dim-detail {
  display: flex;
  flex-direction: column;
  gap: 1.6vw /* 12px */;
}
.report-dim-section {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(139,105,20,0.1);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
}
.report-section-title {
  font-size: 0.9em;
  color: #8b6914;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 1.6vw /* 12px */;
  padding-bottom: 1.0667vw /* 8px */;
  border-bottom: 1px solid rgba(139,105,20,0.15);
}
.report-section-content {
  font-size: 0.85em;
  color: rgba(60,45,15,0.85);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* ── 底部按钮区 ── */
.report-bottom-actions {
  display: flex;
  gap: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(200,160,80,0.08);
}
.report-action-btn {
  flex: 1;
  padding: 1.8667vw /* 14px */ 2.6667vw /* 20px */;
  border-radius: 3.2vw /* 24px */;
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'JiangXiZhuoKai', serif;
  border: none;
}
.report-btn-secondary {
  background: rgba(100,100,120,0.3);
  color: rgba(180,180,200,0.8);
}
.report-btn-secondary:active {
  background: rgba(120,120,140,0.4);
}
.report-btn-primary {
  background: linear-gradient(135deg, #c8973a, #d4af5a);
  color: #1a1a0e;
  box-shadow: 0 0.5333vw /* 4px */ 2.1333vw /* 16px */ rgba(200,150,60,0.3);
}
.report-btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(200,150,60,0.2);
}

/* ── 底部声明 ── */
.report-footer-declaration {
  text-align: center;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */ 2.6667vw /* 20px */;
  font-size: 0.7em;
  color: rgba(150,140,120,0.4);
  letter-spacing: 0.05em;
}

/* ── 三功法按钮区（三角排列）── */
.xsm-trio-section {
  position: relative;
  padding: 1.8667vw /* 14px */ 1.8667vw /* 14px */ 1.3333vw /* 10px */;
  border-top: 1px solid rgba(140,100,200,0.15);
}
.xsm-trio-center-label {
  text-align: center;
  font-size: 0.75em;
  color: rgba(200,170,110,0.55);
  letter-spacing: 0.15em;
  margin-bottom: 1.3333vw /* 10px */;
}
.xsm-trio-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3333vw /* 10px */;
}
.xsm-trio-row-top {
  display: flex;
  justify-content: center;
}
.xsm-trio-row-bot {
  display: flex;
  justify-content: center;
  gap: 4.8vw /* 36px */;
}

/* 通用三角按钮 */
.xsm-trio-btn {
  position: relative;
  width: 10.9333vw /* 82px */;
  height: 10.9333vw /* 82px */;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2667vw /* 2px */;
  transition: transform 0.18s, box-shadow 0.18s;
}
.xsm-trio-btn:active {
  transform: scale(0.93);
}
.xsm-trio-btn-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.xsm-trio-btn-name {
  position: relative;
  z-index: 1;
  font-size: 1.15em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0.5333vw /* 4px */ rgba(0,0,0,0.8);
  letter-spacing: 0;
  line-height: 1;
}
.xsm-trio-btn-sub {
  position: relative;
  z-index: 1;
  font-size: 0.56em;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 0.4vw /* 3px */ rgba(0,0,0,0.9);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 神按钮（紫色） */
.xsm-trio-btn-shen {
  background: radial-gradient(circle at 40% 35%, #b060f0, #5010a0);
  box-shadow: 0 0 2.6667vw /* 20px */ rgba(160,80,240,0.5), 0 0.5333vw /* 4px */ 1.8667vw /* 14px */ rgba(0,0,0,0.5);
}
.xsm-trio-btn-shen:active {
  box-shadow: 0 0 1.3333vw /* 10px */ rgba(160,80,240,0.3);
}
/* 身按钮（青绿） */
.xsm-trio-btn-ti {
  background: radial-gradient(circle at 40% 35%, #30c090, #0a6050);
  box-shadow: 0 0 2.6667vw /* 20px */ rgba(50,200,150,0.5), 0 0.5333vw /* 4px */ 1.8667vw /* 14px */ rgba(0,0,0,0.5);
}
/* 气按钮（蓝色） */
.xsm-trio-btn-qi {
  background: radial-gradient(circle at 40% 35%, #3080e0, #1030a0);
  box-shadow: 0 0 2.6667vw /* 20px */ rgba(60,140,220,0.5), 0 0.5333vw /* 4px */ 1.8667vw /* 14px */ rgba(0,0,0,0.5);
}
/* 已完成徽章 */
.xsm-done-badge {
  position: absolute;
  top: -0.0833rem /* -4px */;
  right: -0.0833rem /* -4px */;
  width: 2.9333vw /* 22px */;
  height: 2.9333vw /* 22px */;
  border-radius: 50%;
  background: #28a060;
  border: 0.2667vw /* 2px */ solid #050810;
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* ── 今日推荐区 ── */
.xsm-recommend-section {
  margin: 1.3333vw /* 10px */ 2.3333vw /* 17.5px */ 2.3333vw /* 17.5px */;
  background: rgba(200,160,60,0.07);
  border: 1px solid rgba(200,160,60,0.2);
  border-radius: 2.3333vw /* 17.5px */;
  padding: 2vw /* 15px */ 2.3333vw /* 17.5px */;
}
.xsm-recommend-title {
  font-size: 1.8em;
  color: rgba(200,160,60,0.8);
  letter-spacing: 0.12em;
  margin-bottom: 1.3333vw /* 10px */;
}
.xsm-recommend-loading {
  font-size: 1em;
  color: rgba(200,180,140,0.5);
  text-align: center;
  padding: 1.3333vw /* 10px */ 0;
}
.xsm-recommend-item {
  display: flex;
  align-items: flex-start;
  gap: 1.3333vw /* 10px */;
  margin-bottom: 1vw /* 7.5px */;
}
.xsm-recommend-item:last-child {
  margin-bottom: 0;
}
.xsm-recommend-icon {
  font-size: 2.5em;
  flex-shrink: 0;
  margin-top: 1px;
}
.xsm-recommend-text {
  font-size: 2.2em;
  color: #5a3d7e;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.xsm-recommend-hl {
  color: #d4af5a;
  font-weight: bold;
}

/* ── 任务弹窗样式 ── */
.xsm-task-header {
  display: flex;
  align-items: center;
  gap: 1.3333vw /* 10px */;
  padding: 2.1333vw /* 16px */ 2.4vw /* 18px */ 1.6vw /* 12px */;
  border-bottom: 1px solid rgba(160,120,220,0.2);
  position: sticky;
  top: 0;
  background: rgba(10,7,20,0.95);
  border-radius: 2.6667vw /* 20px */ 2.6667vw /* 20px */ 0 0;
  z-index: 1;
}
.xsm-task-type-badge {
  width: 4.5333vw /* 34px */;
  height: 4.5333vw /* 34px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}
.xsm-task-title {
  flex: 1;
  font-size: 0.95em;
  color: #d4af5a;
  letter-spacing: 0.08em;
  font-family: 'JiangXiZhuoKai', serif;
}
.xsm-task-close {
  background: none;
  border: none;
  color: rgba(200,180,160,0.5);
  font-size: 1.4em;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2667vw /* 2px */;
}

.xsm-task-content {
  padding: 2.1333vw /* 16px */ 2.4vw /* 18px */ 1.6vw /* 12px */;
}
/* 任务内容：文段样式 */
.xsm-task-passage {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,170,110,0.15);
  border-left: 0.4vw /* 3px */ solid rgba(200,150,60,0.5);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.8667vw /* 14px */ 1.8667vw /* 14px */;
  margin-bottom: 1.6vw /* 12px */;
}
.xsm-task-passage-title {
  font-size: 0.75em;
  color: rgba(200,170,110,0.55);
  letter-spacing: 0.06em;
  margin-bottom: 1.0667vw /* 8px */;
}
.xsm-task-passage-text {
  font-size: 0.87em;
  color: rgba(240,225,195,0.9);
  line-height: 1.85;
  letter-spacing: 0.05em;
}
/* 动作/呼吸步骤 */
.xsm-task-step {
  display: flex;
  gap: 1.3333vw /* 10px */;
  align-items: flex-start;
  padding: 1.0667vw /* 8px */ 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.xsm-task-step:last-child { border-bottom: none; }
.xsm-task-step-num {
  width: 2.9333vw /* 22px */;
  height: 2.9333vw /* 22px */;
  border-radius: 50%;
  background: rgba(160,120,220,0.2);
  border: 1px solid rgba(160,120,220,0.3);
  color: rgba(200,170,240,0.8);
  font-size: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.xsm-task-step-text {
  flex: 1;
  font-size: 0.83em;
  color: rgba(220,205,180,0.88);
  line-height: 1.65;
}
.xsm-task-reason {
  font-size: 0.75em;
  color: rgba(180,160,120,0.6);
  background: rgba(200,160,60,0.07);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
  margin-top: 1.3333vw /* 10px */;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

/* 境界阶段标签（显示在功法标题旁） */
.xsm-stage-badge {
  display: inline-block;
  font-size: 0.78em;
  color: rgba(200,160,60,0.9);
  background: rgba(200,160,60,0.12);
  border: 1px solid rgba(200,160,60,0.3);
  border-radius: 0.5333vw /* 4px */;
  padding: 1px 0.9333vw /* 7px */;
  margin-left: 1.0667vw /* 8px */;
  vertical-align: middle;
  letter-spacing: 0.05em;
  font-weight: normal;
}

/* 解锁新功法横幅 */
.xsm-stage-unlock-banner {
  background: linear-gradient(90deg, rgba(200,130,30,0.2), rgba(100,200,100,0.15));
  border: 1px solid rgba(200,160,60,0.4);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.2vw /* 9px */ 1.8667vw /* 14px */;
  margin-bottom: 1.6vw /* 12px */;
  font-size: 0.82em;
  color: rgba(240,210,120,0.95);
  text-align: center;
  letter-spacing: 0.08em;
  animation: xsmUnlockGlow 1.5s ease-in-out infinite alternate;
}
@keyframes xsmUnlockGlow {
  from { box-shadow: 0 0 0.8vw /* 6px */ rgba(200,160,60,0.2); }
  to   { box-shadow: 0 0 1.8667vw /* 14px */ rgba(200,160,60,0.5); }
}

/* 下一档解锁提示 */
.xsm-task-next-hint {
  font-size: 0.73em;
  color: rgba(160,140,100,0.55);
  text-align: center;
  margin-top: 1.3333vw /* 10px */;
  padding: 0.8vw /* 6px */ 1.3333vw /* 10px */;
  border-top: 1px dashed rgba(200,160,60,0.15);
  letter-spacing: 0.04em;
}

/* 打卡按钮 */
.xsm-checkin-btn {
  width: 100%;
  padding: 1.7333vw /* 13px */;
  background: linear-gradient(135deg, #6020b0, #9040d0);
  border: none;
  border-radius: 1.8667vw /* 14px */;
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0.5333vw /* 4px */ 2.1333vw /* 16px */ rgba(100,40,200,0.4);
}
.xsm-checkin-btn:active {
  transform: scale(0.97);
}
.xsm-checkin-btn.done {
  background: linear-gradient(135deg, #1a8060, #30c090);
  box-shadow: 0 0.5333vw /* 4px */ 2.1333vw /* 16px */ rgba(40,160,100,0.4);
}

/* 任务弹窗头部颜色变体 */
.xsm-task-header.shen { border-bottom-color: rgba(160,80,240,0.3); }
.xsm-task-header.shen .xsm-task-type-badge { background: radial-gradient(circle, #b060f0, #5010a0); }
.xsm-task-header.ti  { border-bottom-color: rgba(50,200,150,0.3); }
.xsm-task-header.ti  .xsm-task-type-badge { background: radial-gradient(circle, #30c090, #0a6050); }
.xsm-task-header.qi  { border-bottom-color: rgba(60,140,220,0.3); }
.xsm-task-header.qi  .xsm-task-type-badge { background: radial-gradient(circle, #3080e0, #1030a0); }
.xsm-checkin-btn.shen { background: linear-gradient(135deg, #6020b0, #9040d0); }
.xsm-checkin-btn.ti   { background: linear-gradient(135deg, #0a6050, #30c090); }
.xsm-checkin-btn.qi   { background: linear-gradient(135deg, #1030a0, #3080e0); }

/* ── 心镜系统样式 V5.1 - 天生我才（绘仙卷深度集成版） ── */
.xsm-xinjing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,170,110,0.12);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
}

/* 境界标签 */
.xsm-xinjing-realm-tag {
  display: inline-block;
  font-size: 0.7em;
  color: rgba(180,120,220,0.9);
  background: rgba(160,80,240,0.15);
  padding: 0.5333vw /* 4px */ 1.6vw /* 12px */;
  border-radius: 1.6vw /* 12px */;
  letter-spacing: 0.08em;
  margin-bottom: 1.8667vw /* 14px */;
}

/* ==================== 练气期：天生我才 ==================== */
.xsm-xinjing-lianqi {
  border-left: 0.4vw /* 3px */ solid rgba(80,180,120,0.5);
}
.xsm-xinjing-state {
  font-size: 1.05em;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 1.8667vw /* 14px */;
  padding-bottom: 1.6vw /* 12px */;
  border-bottom: 1px solid rgba(200,170,110,0.15);
}
.xsm-xinjing-confirmation {
  margin-bottom: 1.8667vw /* 14px */;
}
.xsm-xinjing-confirm-item {
  font-size: 0.85em;
  color: rgba(240,225,195,0.9);
  line-height: 1.8;
  padding: 0.8vw /* 6px */ 0 0.8vw /* 6px */ 2.6667vw /* 20px */;
  position: relative;
}
.xsm-xinjing-confirm-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(80,200,140,0.7);
  font-size: 0.9em;
}
.xsm-xinjing-value {
  background: rgba(80,180,120,0.1);
  border: 1px solid rgba(80,180,120,0.2);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.8667vw /* 14px */;
  margin-bottom: 1.8667vw /* 14px */;
  font-size: 0.88em;
  color: rgba(140,220,180,0.95);
  line-height: 1.7;
  text-align: center;
}
.xsm-xinjing-affirmation {
  background: rgba(200,160,60,0.12);
  border-radius: 1.3333vw /* 10px */;
  padding: 2.1333vw /* 16px */;
  font-size: 0.95em;
  color: #d4af5a;
  line-height: 1.6;
  text-align: center;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.05em;
}

/* ==================== 筑基期：因时调整 ==================== */
.xsm-xinjing-zhuji {
  border-left: 0.4vw /* 3px */ solid rgba(180,140,60,0.5);
}
.xsm-xinjing-adjustment {
  background: rgba(180,140,60,0.08);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.8667vw /* 14px */;
  margin-bottom: 1.8667vw /* 14px */;
}
.xsm-xinjing-adjustment-label {
  font-size: 0.72em;
  color: rgba(200,170,100,0.8);
  letter-spacing: 0.08em;
  margin-bottom: 1.0667vw /* 8px */;
}
.xsm-xinjing-adjustment-text {
  font-size: 0.85em;
  color: rgba(240,225,195,0.9);
  line-height: 1.75;
}
.xsm-xinjing-scenarios {
  margin-bottom: 1.8667vw /* 14px */;
}
.xsm-xinjing-scenario {
  display: flex;
  flex-direction: column;
  gap: 0.5333vw /* 4px */;
  padding: 1.3333vw /* 10px */ 0;
  border-bottom: 1px solid rgba(200,170,110,0.1);
}
.xsm-xinjing-scenario:last-child {
  border-bottom: none;
}
.xsm-xinjing-scene {
  font-size: 0.8em;
  color: rgba(180,150,100,0.8);
  letter-spacing: 0.05em;
}
.xsm-xinjing-approach {
  font-size: 0.85em;
  color: rgba(240,225,195,0.9);
  line-height: 1.6;
}

/* ==================== 金丹期：特质转化 ==================== */
.xsm-xinjing-jindan {
  border-left: 0.4vw /* 3px */ solid rgba(160,80,240,0.5);
}
.xsm-xinjing-transformation {
  font-size: 0.95em;
  color: rgba(220,195,230,0.95);
  line-height: 1.7;
  margin-bottom: 1.8667vw /* 14px */;
  padding: 1.8667vw /* 14px */;
  background: rgba(160,80,240,0.1);
  border-radius: 1.3333vw /* 10px */;
  text-align: center;
}
.xsm-xinjing-roles {
  margin-bottom: 1.8667vw /* 14px */;
}
.xsm-xinjing-roles-label {
  font-size: 0.72em;
  color: rgba(180,150,100,0.8);
  letter-spacing: 0.08em;
  margin-bottom: 1.3333vw /* 10px */;
}
.xsm-xinjing-role {
  font-size: 0.82em;
  color: rgba(240,225,195,0.9);
  line-height: 1.7;
  padding: 0.8vw /* 6px */ 0 0.8vw /* 6px */ 2.1333vw /* 16px */;
  position: relative;
}
.xsm-xinjing-role::before {
  content: '·';
  position: absolute;
  left: 0.5333vw /* 4px */;
  color: rgba(160,80,240,0.7);
}

/* ==================== 元婴期：运用自如 ==================== */
.xsm-xinjing-yuanying {
  border-left: 0.4vw /* 3px */ solid rgba(220,160,80,0.5);
}
.xsm-xinjing-unity,
.xsm-xinjing-integration,
.xsm-xinjing-transcendence {
  margin-bottom: 2.1333vw /* 16px */;
  padding-bottom: 2.1333vw /* 16px */;
  border-bottom: 1px solid rgba(200,170,110,0.1);
}
.xsm-xinjing-unity-title,
.xsm-xinjing-integration-title,
.xsm-xinjing-transcendence-title {
  font-size: 0.9em;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.06em;
  margin-bottom: 1.3333vw /* 10px */;
}
.xsm-xinjing-unity-content,
.xsm-xinjing-integration-content,
.xsm-xinjing-transcendence-content {
  font-size: 0.84em;
  color: rgba(240,225,195,0.9);
  line-height: 1.8;
  margin-bottom: 1.0667vw /* 8px */;
}
.xsm-xinjing-unity-insight,
.xsm-xinjing-integration-insight,
.xsm-xinjing-transcendence-insight {
  font-size: 0.8em;
  color: rgba(200,170,120,0.9);
  line-height: 1.7;
  padding-left: 1.6vw /* 12px */;
  border-left: 0.2667vw /* 2px */ solid rgba(200,170,110,0.3);
  margin-bottom: 1.0667vw /* 8px */;
}
.xsm-xinjing-unity-freedom,
.xsm-xinjing-integration-practice,
.xsm-xinjing-transcendence-final {
  font-size: 0.88em;
  color: rgba(220,195,150,0.95);
  line-height: 1.7;
  font-style: italic;
}
.xsm-xinjing-transcendence-final {
  text-align: center;
  font-size: 1em;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  margin-top: 1.3333vw /* 10px */;
}

/* ==================== 通用组件 ==================== */
.xsm-xinjing-case {
  background: rgba(200,160,60,0.06);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.8667vw /* 14px */;
  margin: 1.8667vw /* 14px */ 0;
}
.xsm-xinjing-case-header {
  margin-bottom: 1.3333vw /* 10px */;
}
.xsm-xinjing-figure {
  font-size: 0.9em;
  color: #d4af5a;
  font-family: 'JiangXiZhuoKai', serif;
  letter-spacing: 0.06em;
}
.xsm-xinjing-case-story {
  font-size: 0.82em;
  color: rgba(240,225,195,0.9);
  line-height: 1.85;
  margin-bottom: 1.3333vw /* 10px */;
  text-align: justify;
}
.xsm-xinjing-case-insight {
  font-size: 0.78em;
  color: rgba(200,170,120,0.9);
  line-height: 1.7;
  padding-left: 1.6vw /* 12px */;
  border-left: 0.2667vw /* 2px */ solid rgba(200,170,110,0.3);
}
.xsm-xinjing-insight {
  background: rgba(160,80,240,0.08);
  border-radius: 1.3333vw /* 10px */;
  padding: 1.8667vw /* 14px */;
  font-size: 0.85em;
  color: rgba(220,195,230,0.95);
  line-height: 1.7;
  text-align: center;
}

/* ============================================================
   法身介绍页 新版样式（米白色背景设计稿）
   ============================================================ */

/* 旋转动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 法身页面容器 */
#fashenPage {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  min-height: 100vh;
  background: #f5f0e6;
  overflow: hidden;
}

/* 四柱干支文字横排样式（最终版 - 设计稿1:1还原） */
.fashen-pillar-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  background: transparent;
  border: none;
  padding: 0;
  min-width: 4vw /* 30px */;
}

.fashen-pillar-gan-final,
.fashen-pillar-zhi-final {
  font-size: 2.9333vw /* 22px */;
  font-weight: bold;
  color: #3d281a;
  letter-spacing: 0.1em;
}

/* 四柱干支文字横排样式（无标签） */
.fashen-pillar-text-item-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 0.2vw /* 1.5px */ solid #d4a574;
  border-radius: 1.0667vw /* 8px */;
  padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
  min-width: 6vw /* 45px */;
  height: 6.6667vw /* 50px */;
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(61, 40, 26, 0.08);
  transition: all 0.3s ease;
}

.fashen-pillar-text-item-simple:hover {
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(61, 40, 26, 0.12);
  transform: translateY(-0.0417rem /* -2px */);
}

.fashen-pillar-ganzhi-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2667vw /* 2px */;
}

.fashen-pillar-gan-simple {
  font-size: 1.3em;
  font-weight: bold;
  color: #3d281a;
  letter-spacing: 0.1em;
}

.fashen-pillar-zhi-simple {
  font-size: 1.3em;
  font-weight: bold;
  color: #3d281a;
  letter-spacing: 0.1em;
}

/* 四柱干支文字竖排样式（设计稿样式，无边框） */
.fashen-pillar-design {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  background: transparent;
  border: none;
  padding: 0;
}

.fashen-pillar-gan-design,
.fashen-pillar-zhi-design {
  font-size: 1.5em;
  font-weight: bold;
  color: #3d281a;
  letter-spacing: 0.1em;
}

/* 四柱干支文字竖排样式（无边框，人物左右侧） */
.fashen-pillar-no-border {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  min-width: 5.3333vw /* 40px */;
  height: 8vw /* 60px */;
}

.fashen-pillar-text-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw /* 6px */;
}

.fashen-pillar-gan-text,
.fashen-pillar-zhi-text {
  font-size: 1.6em;
  font-weight: bold;
  color: #3d281a;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 0.2667vw /* 2px */ rgba(0, 0, 0, 0.1);
}

.fashen-pillar-zhi-text {
  font-size: 1.8em;
  color: #8b6914;
}

/* 四柱干支文字竖排样式（有标签，左右分布） */
.fashen-pillar-text-item {
  background: #fff;
  border: 1px solid #d4a574;
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */ 1.6vw /* 12px */;
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(61, 40, 26, 0.1);
  transition: all 0.3s;
}

.fashen-pillar-text-item:hover {
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(61, 40, 26, 0.2);
  transform: translateY(-0.0417rem /* -2px */);
}

.fashen-pillar-label {
  font-size: 0.9em;
  color: #8b6914;
  text-align: center;
  margin-bottom: 1.6vw /* 12px */;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.fashen-pillar-ganzhi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0667vw /* 8px */;
}

.fashen-pillar-gan,
.fashen-pillar-zhi {
  font-size: 1.6em;
  color: #3d281a;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 0.2667vw /* 2px */ rgba(0, 0, 0, 0.1);
}

.fashen-pillar-zhi {
  font-size: 1.8em;
  color: #8b6914;
}

/* 生成神性报告按钮悬停效果 */
#fashenReportBtn:hover {
  background: linear-gradient(180deg, #a67c00 0%, #8b6914 100%);
  box-shadow: 0 0.8vw /* 6px */ 2.1333vw /* 16px */ rgba(92, 58, 40, 0.5);
  transform: translateY(-0.0417rem /* -2px */);
}

#fashenReportBtn:active {
  transform: translateY(0) scale(0.97);
}

/* ═══════════════════════════════════════════════════════
   流年天机卡 · BUFF状态标签系统
   ═══════════════════════════════════════════════════════ */

/* ── 卡片容器 ── */
.tianji-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,243,233,0.92));
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 1.8667vw /* 14px */;
  padding: 2.1333vw /* 16px */ 2.4vw /* 18px */ 1.6vw /* 12px */;
  margin-bottom: 2.1333vw /* 16px */;
  box-shadow: 0 0.5333vw /* 4px */ 2.1333vw /* 16px */ rgba(61,40,26,0.06);
  animation: tianji-card-enter 0.4s ease-out both;
}
.tianji-card:nth-child(1) { animation-delay: 0s; }
.tianji-card:nth-child(2) { animation-delay: 0.08s; }
.tianji-card:nth-child(3) { animation-delay: 0.16s; }
.tianji-card:nth-child(4) { animation-delay: 0.24s; }
.tianji-card:nth-child(5) { animation-delay: 0.32s; }
@keyframes tianji-card-enter {
  from { opacity: 0; transform: translateY(1.3333vw /* 10px */); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 卡片头部 ── */
.tianji-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6vw /* 12px */;
}
.tianji-card-title {
  font-size: 2vw /* 15px */;
  font-weight: bold;
  color: #5a4a2a;
  letter-spacing: 0.05em;
}
.tianji-card-year {
  font-size: 1.6vw /* 12px */;
  color: #a67c52;
  letter-spacing: 0.05em;
}

/* ── BUFF标签区域 ── */
.tianji-card-buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0667vw /* 8px */;
}

/* ── BUFF标签包裹 ── */
.buff-tag-wrap {
  position: relative;
}

/* ── 增益标签（绿色 ↑） ── */
.buff-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  padding: 0.6667vw /* 5px */ 1.6vw /* 12px */;
  border-radius: 2.6667vw /* 20px */;
  background: rgba(76,175,80,0.10);
  border: 1px solid rgba(76,175,80,0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.buff-tag:hover {
  background: rgba(76,175,80,0.20);
  border-color: rgba(76,175,80,0.55);
  transform: translateY(-0.0208rem /* -1px */);
  box-shadow: 0 0.4vw /* 3px */ 1.3333vw /* 10px */ rgba(76,175,80,0.15);
}
.buff-tag .buff-icon {
  font-size: 1.8667vw /* 14px */;
}
.buff-tag .buff-name {
  font-size: 1.7333vw /* 13px */;
  font-weight: 600;
  color: #2e7d32;
  letter-spacing: 0.04em;
}
.buff-tag .buff-arrow {
  font-size: 2vw /* 15px */;
  font-weight: bold;
  color: #43a047;
  margin-left: 1px;
}

/* ── 减益标签（红色 ↓） ── */
.debuff-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5333vw /* 4px */;
  padding: 0.6667vw /* 5px */ 1.6vw /* 12px */;
  border-radius: 2.6667vw /* 20px */;
  background: rgba(211,47,47,0.08);
  border: 1px solid rgba(211,47,47,0.30);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.debuff-tag:hover {
  background: rgba(211,47,47,0.16);
  border-color: rgba(211,47,47,0.50);
  transform: translateY(-0.0208rem /* -1px */);
  box-shadow: 0 0.4vw /* 3px */ 1.3333vw /* 10px */ rgba(211,47,47,0.12);
}
.debuff-tag .buff-icon {
  font-size: 1.8667vw /* 14px */;
}
.debuff-tag .buff-name {
  font-size: 1.7333vw /* 13px */;
  font-weight: 600;
  color: #c62828;
  letter-spacing: 0.04em;
}
.debuff-tag .buff-arrow {
  font-size: 2vw /* 15px */;
  font-weight: bold;
  color: #d32f2f;
  margin-left: 1px;
}

/* ── 无BUFF提示 ── */
.buff-empty {
  font-size: 1.7333vw /* 13px */;
  color: #b8a88a;
  text-align: center;
  padding: 1.0667vw /* 8px */ 0;
  letter-spacing: 0.04em;
}

/* ── 卡片底部提示 ── */
.tianji-card-hint {
  text-align: center;
  font-size: 1.4667vw /* 11px */;
  color: #c4aa80;
  margin-top: 1.3333vw /* 10px */;
  letter-spacing: 0.04em;
  opacity: 0.7;
  cursor: pointer;
}

/* ── 详情展开面板 - 750设计超大字体 ── */
.buff-detail-panel {
  display: none;
  margin-top: 2vw /* 15px */;
  padding: 2.5vw /* 19px */ 3vw /* 22px */;
  border-radius: 2.5vw /* 19px */;
  animation: buff-detail-enter 0.25s ease-out;
}
.buff-detail-open {
  display: block !important;
}
@keyframes buff-detail-enter {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 80vw /* 600px */; }
}

/* 增益详情面板背景 */
.buff-tag-wrap .buff-detail-panel {
  background: rgba(76,175,80,0.1);
  border: 0.13vw solid rgba(76,175,80,0.3);
}
/* 减益详情面板背景 */
.buff-tag-wrap:has(.debuff-tag) .buff-detail-panel {
  background: rgba(211,47,47,0.08);
  border: 0.13vw solid rgba(211,47,47,0.25);
}

/* ── 详情分割线 ── */
.buff-detail-divider {
  height: 0.13vw;
  background: linear-gradient(90deg, transparent, rgba(180,160,120,0.35), transparent);
  margin-bottom: 2vw /* 15px */;
}

/* ── 详情区段 - 750设计超大字体 ── */
.buff-detail-section {
  margin-bottom: 2vw /* 15px */;
}
.buff-detail-section:last-child {
  margin-bottom: 0;
}
.buff-detail-label {
  font-size: 3.5vw /* 26px - 750设计超大 */;
  font-weight: bold;
  color: #8b7355;
  letter-spacing: 0.06em;
  margin-bottom: 1vw /* 7px */;
}
.buff-detail-text {
  font-size: 4vw /* 30px - 750设计超大 */;
  color: #5a4a2a;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* ── 可能显化列表 - 750设计超大字体 ── */
.buff-detail-list {
  display: flex;
  flex-direction: column;
  gap: 1vw /* 7px */;
}
.buff-detail-item {
  font-size: 3.8vw /* 28px - 750设计超大 */;
  color: #6b5a3a;
  line-height: 1.7;
  padding-left: 3vw /* 22px */;
  position: relative;
  letter-spacing: 0.02em;
}
.buff-detail-item::before {
  content: '·';
  position: absolute;
  left: 0.5vw /* 4px */;
  color: #a67c52;
  font-weight: bold;
  font-size: 4vw;
}

/* ================================================
 * 属性面板样式 (V6) - 12维能力全图
 * ================================================ */

@keyframes attrFadeIn {
  from { opacity: 0; transform: translateY(-0.1667rem /* -8px */); }
  to { opacity: 1; transform: translateY(0); }
}

.attr-panel {
  padding: 0 0.5333vw /* 4px */;
}

/* ── 模块一：页头（人物图 + 属性条） ── */
.attr-header {
  display: flex;
  align-items: flex-start;
  gap: 1.6vw /* 12px */;
  padding-bottom: 1.6vw /* 12px */;
  border-bottom: 1px solid rgba(201,169,110,0.15);
  margin-bottom: 1.6vw /* 12px */;
}

/* 左侧人物图 - 3:4比例头像裁切 */
.attr-char-img {
  width: 50%;
  flex-shrink: 0;
  text-align: center;
  position: relative;
}
.attr-char-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  border-radius: 1.0667vw /* 8px */;
  filter: drop-shadow(0 0 1.6vw /* 12px */ rgba(201,169,110,0.3));
}

/* 右侧属性列表 - 占50%宽度 */
.attr-list {
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 单行属性（不可点击，纯展示）- 紧凑布局 */
.attr-row {
  display: flex;
  align-items: center;
  padding: 0.2667vw /* 2px */ 0;
  border-radius: 0.5333vw /* 4px */;
  padding-left: 0.2667vw /* 2px */;
  padding-right: 0.2667vw /* 2px */;
}

/* 属性名 - 更紧凑 */
.attr-label {
  width: 5.6vw /* 42px */;
  font-size: 1.4667vw /* 11px */;
  font-weight: 500;
  color: #e8dcc8;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  margin-right: 0.5333vw /* 4px */;
}

/* 进度条容器 - 更紧凑 */
.attr-bar-wrap {
  flex: 1;
  margin: 0 0.5333vw /* 4px */ 0 0;
}
.attr-bar-track {
  height: 0.8vw /* 6px */;
  background: rgba(201,169,110,0.1);
  border-radius: 0.4vw /* 3px */;
  overflow: hidden;
  position: relative;
}
.attr-bar-fill {
  height: 100%;
  border-radius: 0.4vw /* 3px */;
  transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}
.attr-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0.2667vw /* 2px */;
  height: 100%;
  background: rgba(255,255,255,0.5);
  border-radius: 0 0.4vw /* 3px */ 0.4vw /* 3px */ 0;
}

/* 仅显示等级（不显示数值） */
.attr-value {
  width: 3.7333vw /* 28px */;
  text-align: center;
  font-size: 1.4667vw /* 11px */;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 等级徽章 */
.attr-grade {
  display: inline-block;
  min-width: 2.6667vw /* 20px */;
  height: 1.8667vw /* 14px */;
  border-radius: 0.4vw /* 3px */;
  text-align: center;
  line-height: 1.8667vw /* 14px */;
  font-size: 1.3333vw /* 10px */;
  font-weight: 800;
  padding: 0 0.4vw /* 3px */;
}

/* ── 模块二：属性解读（标签按钮展开形式） ── */
.attr-interpret-section {
  padding: 0 0.5333vw /* 4px */ 1.0667vw /* 8px */;
}
.attr-interpret-title {
  font-size: 1.7333vw /* 13px */;
  font-weight: 600;
  color: #c9a96e;
  letter-spacing: 0.08em;
  padding: 0 0 1.3333vw /* 10px */ 0;
  border-bottom: 1px solid rgba(201,169,110,0.15);
  margin-bottom: 1.3333vw /* 10px */;
}

/* 标签按钮容器 */
.attr-interpret-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0667vw /* 8px */;
}

/* 属性解读标签按钮 */
.attr-interpret-tag {
  display: inline-flex;
  align-items: center;
  padding: 1.0667vw /* 8px */ 2.1333vw /* 16px */;
  border: none;
  border-radius: 2.1333vw /* 16px */;
  font-size: 1.7333vw /* 13px */;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  box-shadow: 0 0.2667vw /* 2px */ 0.8vw /* 6px */ rgba(0,0,0,0.12);
  text-shadow: 0 1px 0.2667vw /* 2px */ rgba(0,0,0,0.2);
}
.attr-interpret-tag:hover {
  transform: translateY(-0.0417rem /* -2px */);
  box-shadow: 0 0.5333vw /* 4px */ 1.3333vw /* 10px */ rgba(0,0,0,0.18);
  filter: brightness(1.08);
}
.attr-interpret-tag.active {
  box-shadow: 0 0.4vw /* 3px */ 1.0667vw /* 8px */ rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  filter: brightness(0.95);
}

/* 展开的内容区域 */
.attr-interpret-content {
  margin-top: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */ 2.4vw /* 18px */;
  background: linear-gradient(135deg, #faf6ee 0%, #f5ede0 100%);
  border: 0.2667vw /* 2px */ solid #d4a574;
  border-radius: 1.6vw /* 12px */;
  animation: attrContentFadeIn 0.3s ease;
  box-shadow: 0 0.5333vw /* 4px */ 2.1333vw /* 16px */ rgba(61,40,26,0.1);
}
@keyframes attrContentFadeIn {
  from { opacity: 0; transform: translateY(-0.1667rem /* -8px */); }
  to { opacity: 1; transform: translateY(0); }
}
.attr-interpret-content-header {
  font-size: 2vw /* 15px */;
  font-weight: 700;
  color: #5a3d1a;
  margin-bottom: 1.3333vw /* 10px */;
  display: flex;
  align-items: center;
  gap: 1.0667vw /* 8px */;
}
.attr-interpret-content-text {
  font-size: 1.8667vw /* 14px */;
  color: #3d2615;
  line-height: 1.9;
  font-weight: 500;
}

/* ── 移动端适配 ── */
@media (max-width: 53.3333vw /* 400px */) {
  .attr-header {
    flex-direction: column;
    align-items: center;
    gap: 1.6vw /* 12px */;
  }
  .attr-char-img img {
    width: 13.3333vw /* 100px */;
    height: 17.7333vw /* 133px */;
  }
  .attr-list {
    width: 100%;
  }
}

/* ================================================
 * 灵性报告页样式（绘仙注灵 - 还原截图）
 * ================================================ */

/* 属性条样式 - 使用CSS变量支持动态宽度 - 按480设计放大 */
.report-attr-bar {
  display: flex;
  align-items: center;
  gap: 2vw /* 15px */;
  font-size: 4vw /* 30px - 更大的字体 */;
  padding: 1.2vw 0;
}
.report-attr-fill {
  width: var(--attr-width, 76%);
  height: 100%;
  border-radius: 0.4vw /* 3px */;
  background: var(--attr-color, #5a9bd5);
  transition: width 0.4s ease;
}
.report-attr-name {
  width: 10vw /* 75px */;
  color: #8b6914;
  text-align: right;
  font-weight: 500;
  flex-shrink: 0;
  font-size: 4vw /* 30px */;
}
.report-attr-track {
  flex: 1;
  height: 2.4vw /* 18px - 480设计的12px放大 */;
  background: #e8e0d0;
  border-radius: 0.8vw /* 6px */;
  overflow: hidden;
  min-width: 20vw;
}
.report-attr-fill {
  height: 100%;
  border-radius: 0.8vw /* 6px */;
  transition: width 0.5s ease;
}
.report-attr-grade {
  width: 6vw /* 45px */;
  text-align: center;
  font-weight: bold;
  font-size: 4vw /* 30px */;
  flex-shrink: 0;
}
.report-attr-grade.s { color: #c9a227; }
.report-attr-grade.a { color: #9b7bd8; }
.report-attr-grade.b { color: #5a9bd5; }
.report-attr-grade.c { color: #888; }
.report-attr-grade.d { color: #666; opacity: 0.7; }

/* 维度标签样式 - 使用CSS变量统一配置 - 按480设计放大 */
.report-dim-tag {
  padding: 2vw /* 15px */ 4vw /* 30px */;
  background: var(--tag-bg, rgba(139,92,246,0.12));
  border: 0.27vw /* 2px */ solid var(--tag-color, #8b5cf6);
  border-radius: 4vw /* 30px */;
  font-size: 4vw /* 30px - 更大的字体 */;
  color: var(--tag-color, #8b5cf6);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.report-dim-tag.active {
  background: var(--tag-color, #8b5cf6);
  border-color: var(--tag-color, #8b5cf6);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(0,0,0,0.18);
}
.report-dim-tag:hover {
  opacity: 0.82;
}
.report-dim-tag.active:hover {
  opacity: 0.9;
}

/* 维度标签颜色配置 - 与REPORT_DIMS保持一致 */
.report-dim-tag[data-dim="wuxing"]  { --tag-color: #8b5cf6; --tag-bg: rgba(139,92,246,0.12); }
.report-dim-tag[data-dim="linghui"] { --tag-color: #06b6d4; --tag-bg: rgba(6,182,212,0.12); }
.report-dim-tag[data-dim="juexing"] { --tag-color: #f59e0b; --tag-bg: rgba(245,158,11,0.12); }
.report-dim-tag[data-dim="tongda"]  { --tag-color: #10b981; --tag-bg: rgba(16,185,129,0.12); }
.report-dim-tag[data-dim="ziyuan"]  { --tag-color: #f97316; --tag-bg: rgba(249,115,22,0.12); }
.report-dim-tag[data-dim="daotu"]   { --tag-color: #6366f1; --tag-bg: rgba(99,102,241,0.12); }
.report-dim-tag[data-dim="danpo"]   { --tag-color: #ec4899; --tag-bg: rgba(236,72,153,0.12); }
.report-dim-tag[data-dim="renxin"]  { --tag-color: #14b8a6; --tag-bg: rgba(20,184,166,0.12); }
.report-dim-tag[data-dim="dingli"]  { --tag-color: #3b82f6; --tag-bg: rgba(59,130,246,0.12); }
.report-dim-tag[data-dim="meili"]   { --tag-color: #e11d48; --tag-bg: rgba(225,29,72,0.12); }

/* 线索按钮样式 - 按480设计放大 */
.report-clue-btn {
  padding: 2.5vw /* 19px */ 5vw /* 38px */;
  background: #f5f0e8;
  border: 1px solid #e0d8c8;
  border-radius: 4.5vw /* 34px */;
  font-size: 4vw /* 30px - 更大的字体 */;
  color: #6b5a4a;
  cursor: pointer;
  transition: all 0.2s;
}
.report-clue-btn:hover {
  background: #ebe5db;
  border-color: #d0c8b8;
}

/* 天机按钮样式 - 按480设计放大 */
.report-tianji-btn {
  padding: 2vw /* 15px */ 4vw /* 30px */;
  background: #f5f0e8;
  border: 1px solid #e0d8c8;
  border-radius: 4vw /* 30px */;
  font-size: 4vw /* 30px - 更大的字体 */;
  color: #6b5a4a;
  cursor: pointer;
  transition: all 0.2s;
}
.report-tianji-btn:hover {
  background: #ebe5db;
  border-color: #d0c8b8;
}

/* 解读内容卡片 - 按480设计放大 */
.report-interpret-card {
  background: #fff;
  border-radius: 2.1333vw /* 16px */;
  padding: 3.2vw /* 24px */;
  box-shadow: 0 0.4vw /* 3px */ 1.6vw /* 12px */ rgba(0,0,0,0.05);
}
.report-interpret-title {
  font-size: 4.5vw /* 34px - 更大的标题 */;
  color: #8b6914;
  font-weight: bold;
  margin-bottom: 2.1333vw /* 16px */;
}
.report-interpret-content {
  font-size: 4vw /* 30px - 更大的内容文字 */;
  color: #5a4a3a;
  line-height: 1.8;
}

/* 区域标题样式 - 按480设计放大 */
.report-section-title {
  display: flex;
  align-items: center;
  gap: 1.2vw /* 9px */;
  margin-bottom: 2.1333vw /* 16px */;
  font-size: 3.2vw /* 24px */;
}
.report-section-icon {
  color: #c9a227;
  font-size: 1.8667vw /* 14px */;
}
.report-section-text {
  font-size: 2vw /* 15px */;
  color: #5a4a3a;
  font-weight: bold;
}

/* 居中标题 - 按480设计放大 */
.report-center-title {
  text-align: center;
  margin-bottom: 2.1333vw /* 16px */;
}
.report-center-title-text {
  font-size: 3.2vw /* 24px - 480设计的18px放大 */;
  color: #8b6914;
  font-weight: bold;
}

/* 按钮行容器 */
.report-btn-row {
  display: flex;
  gap: 1.6vw /* 12px */;
}
.report-btn-row > button {
  flex: 1;
}

/* 隐秘线索弹窗 - 750设计：超大字体，清晰可读 */
.clue-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.clue-modal.active {
  opacity: 1;
}
.clue-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.clue-modal-content {
  position: relative;
  z-index: 1;
  width: 95%;
  max-width: 85vw /* 638px - 750设计超大 */;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #fdf8ee 0%, #f5ede0 100%);
  border: 0.4vw /* 3px */ solid #d4a96a;
  border-radius: 3.5vw /* 26px */;
  padding: 5.5vw /* 41px */ 4.5vw /* 34px */ 4.5vw /* 34px */;
  box-shadow: 0 2vw /* 15px */ 6vw /* 45px */ rgba(120,80,20,0.4);
  transform: scale(0.92) translateY(1.3333vw /* 10px */);
  transition: transform 0.3s;
}
.clue-modal.active .clue-modal-content {
  transform: scale(1) translateY(0);
}
.clue-modal-header {
  display: flex;
  align-items: center;
  gap: 2.5vw /* 19px */;
  margin-bottom: 3.5vw /* 26px */;
}
.clue-modal-icon {
  font-size: 6.5vw /* 49px - 750设计超大 */;
  color: #c9a227;
}
.clue-modal-title {
  flex: 1;
  font-size: 6vw /* 45px - 750设计超大 */;
  font-weight: bold;
  color: #5a3a10;
  letter-spacing: 0.05em;
}
.clue-modal-close {
  background: none;
  border: none;
  font-size: 7.5vw /* 56px - 750设计超大 */;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.clue-modal-close:hover {
  color: #888;
}
.clue-modal-body {
  font-size: 5vw /* 37.5px - 750设计超大 */;
  color: #5a4a3a;
  line-height: 1.9;
}
.clue-modal-text {
  margin: 0 0 2.5vw /* 19px */;
}
.clue-modal-year {
  margin: 0;
  font-size: 4.5vw /* 34px - 750设计超大 */;
  color: #c9a227;
  opacity: 0.9;
}


/* ── 线索流年弹窗：年份总结行 - 750设计超大字体 ── */
.clue-year-summary {
  display: flex;
  align-items: center;
  gap: 2vw /* 15px */;
  flex-wrap: wrap;
  margin-bottom: 3vw /* 22px */;
}
.clue-year-overall {
  display: inline-block;
  padding: 1vw /* 7px */ 2.5vw /* 19px */;
  border-radius: 2.5vw /* 19px */;
  font-size: 3.5vw /* 26px - 750设计超大 */;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.gain-label {
  background: rgba(76,175,80,0.15);
  color: #2e7d32;
  border: 0.13vw solid rgba(76,175,80,0.4);
}
.loss-label {
  background: rgba(211,47,47,0.15);
  color: #b71c1c;
  border: 0.13vw solid rgba(211,47,47,0.35);
}
.clue-year-tengod {
  font-size: 3.2vw /* 24px - 750设计超大 */;
  color: #8a6a2a;
  opacity: 0.9;
}

/* ── 线索弹窗内BUFF标签网格 - 750设计超大字体 ── */
.clue-buff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw /* 15px */;
}
.clue-buff-wrap {
  width: 100%;
}
.clue-buff-tag {
  display: inline-flex;
  align-items: center;
  gap: 1.5vw /* 11px */;
  padding: 1.5vw /* 11px */ 3vw /* 22px */;
  border-radius: 3.5vw /* 26px */;
  cursor: pointer;
  font-size: 3.5vw /* 26px - 750设计超大 */;
  transition: all 0.2s;
  user-select: none;
  width: auto;
}
.clue-buff-gain {
  background: rgba(76,175,80,0.15);
  border: 0.13vw solid rgba(76,175,80,0.4);
  color: #2e7d32;
}
.clue-buff-gain:hover,
.clue-buff-gain.active {
  background: rgba(76,175,80,0.25);
  border-color: rgba(76,175,80,0.65);
  box-shadow: 0 0.4vw /* 3px */ 1.5vw /* 11px */ rgba(76,175,80,0.2);
}
.clue-buff-loss {
  background: rgba(211,47,47,0.12);
  border: 0.13vw solid rgba(211,47,47,0.35);
  color: #c62828;
}
.clue-buff-loss:hover,
.clue-buff-loss.active {
  background: rgba(211,47,47,0.2);
  border-color: rgba(211,47,47,0.55);
  box-shadow: 0 0.4vw /* 3px */ 1.5vw /* 11px */ rgba(211,47,47,0.15);
}
.clue-buff-icon {
  font-size: 4vw /* 30px - 750设计超大 */;
}
.clue-buff-name {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.clue-buff-arrow {
  font-size: 4vw /* 30px - 750设计超大 */;
  font-weight: bold;
  margin-left: 0.5vw;
}
/* BUFF详情展开面板 - 750设计超大字体 */
.clue-buff-detail {
  margin-top: 1.5vw /* 11px */;
  margin-left: 1vw /* 7px */;
  padding: 2vw /* 15px */ 3vw /* 22px */;
  border-radius: 2vw /* 15px */;
  font-size: 4vw /* 30px - 750设计超大 */;
  color: #4a3a2a;
  line-height: 1.8;
  animation: clueBuffFadeIn 0.2s ease;
}
.clue-buff-detail.open {
  background: rgba(139,100,20,0.1);
  border-left: 0.4vw /* 3px */ solid rgba(139,100,20,0.3);
}
.clue-buff-detail p {
  margin: 0;
}
@keyframes clueBuffFadeIn {
  from { opacity: 0; transform: translateY(-0.0833rem /* -4px */); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
 * 阵法盘 V3 - 三段式能量条样式（暖色调统一）
 * ======================================== */

/* 属性容器 - 与页面统一暖色调 */
.stats-container-v3 {
  padding: 2.1333vw /* 16px */;
  background: linear-gradient(135deg, rgba(245, 240, 230, 0.95), rgba(240, 235, 225, 0.98));
  border-radius: 1.6vw /* 12px */;
  border: 1px solid rgba(180, 160, 120, 0.2);
}

/* 能量条列表 */
.stats-energy-list {
  display: flex;
  flex-direction: column;
  gap: 1.8667vw /* 14px */;
  margin-bottom: 2.1333vw /* 16px */;
}

/* 能量条包装器 */
.energy-bar-wrapper {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.energy-bar-wrapper:hover {
  transform: translateX(0.5333vw /* 4px */);
}

/* 能量条头部（暖色调） */
.energy-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8vw /* 6px */;
}
.energy-bar-label {
  font-size: 1.7333vw /* 13px */;
  color: #6b5d4d;
  font-weight: 500;
}
.energy-bar-value {
  font-size: 2vw /* 15px */;
  font-weight: 700;
  color: #8b6914;
}
.energy-bar-max {
  font-size: 1.4667vw /* 11px */;
  color: #999;
  font-weight: 400;
  margin-left: 0.2667vw /* 2px */;
}

/* 能量条容器 V3 - 数值堆叠模式（暖色调） */
.energy-bar-container-v3 {
  position: relative;
  height: 3.2vw /* 24px */;
  background: rgba(200, 190, 170, 0.3);
  border-radius: 0.5333vw /* 4px */;
  overflow: visible;
  border: 1px solid rgba(180, 160, 120, 0.15);
  display: flex;
  align-items: center;
}

/* 能量段通用样式 */
.energy-segment {
  position: absolute;
  height: 2.6667vw /* 20px */;
  top: 0.2667vw /* 2px */;
  border-radius: 0.4vw /* 3px */;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 3.2vw /* 24px */;
}

/* 段内数值 */
.segment-value {
  font-size: 1.4667vw /* 11px */;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 0.2667vw /* 2px */ rgba(0, 0, 0, 0.5);
}

/* 基础段（暖灰色） */
.base-segment {
  left: 0.2667vw /* 2px */;
  background: linear-gradient(180deg, #8b8680, #6b6560);
  border: 1px solid rgba(100, 95, 90, 0.3);
  z-index: 1;
}
.base-value {
  color: #f5f0e8;
}

/* 运势增益段（暖绿色，向右延伸） */
.time-segment.time-gain {
  background: linear-gradient(180deg, #7a9a6a, #5a7a4a);
  border: 1px solid rgba(100, 140, 80, 0.4);
  box-shadow: 0 0 1.0667vw /* 8px */ rgba(100, 140, 80, 0.3);
  z-index: 2;
}
.time-segment.time-gain .time-value {
  color: #fff;
}

/* 运势减益段（暖红色，向左重叠） */
.time-segment.time-loss {
  background: linear-gradient(180deg, #b87060, #985040);
  border: 1px solid rgba(180, 100, 80, 0.4);
  box-shadow: 0 0 1.0667vw /* 8px */ rgba(180, 100, 80, 0.3);
  z-index: 5;
}
.time-segment.time-loss .time-value {
  color: #fff;
}

/* 装备增益段（暖金色，向右延伸） */
.equip-segment {
  background: linear-gradient(180deg, #c4a030, #a08020);
  border: 1px solid rgba(180, 150, 50, 0.5);
  box-shadow: 0 0 1.3333vw /* 10px */ rgba(180, 150, 50, 0.4);
  z-index: 3;
  animation: equipGlow 2s ease-in-out infinite;
}
.equip-segment .equip-value {
  color: #fff;
}
@keyframes equipGlow {
  0%, 100% { box-shadow: 0 0 1.0667vw /* 8px */ rgba(180, 150, 50, 0.4); }
  50% { box-shadow: 0 0 2vw /* 15px */ rgba(180, 150, 50, 0.6); }
}

/* 背景刻度 */
.energy-bg-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-tick {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(100, 90, 80, 0.1);
}

/* 图例 */
.energy-legend {
  display: flex;
  justify-content: center;
  gap: 2.1333vw /* 16px */;
  padding: 1.6vw /* 12px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.0667vw /* 8px */;
  margin-bottom: 1.6vw /* 12px */;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.8vw /* 6px */;
}
.legend-color {
  width: 1.8667vw /* 14px */;
  height: 1.8667vw /* 14px */;
  border-radius: 0.4vw /* 3px */;
}
.legend-color.base {
  background: linear-gradient(135deg, #2c3e50, #34495e);
}
.legend-color.time {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.legend-color.equip {
  background: linear-gradient(135deg, #d4af37, #f4d03f);
}
.legend-text {
  font-size: 1.4667vw /* 11px */;
  color: #888;
}

/* 共鸣提示 */
.resonance-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.0667vw /* 8px */;
  padding: 1.3333vw /* 10px */;
  background: linear-gradient(90deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.2));
  border-radius: 1.0667vw /* 8px */;
  border: 1px solid rgba(155, 89, 182, 0.3);
}
.resonance-icon {
  font-size: 2.1333vw /* 16px */;
  color: #9b59b6;
  animation: resonanceGlow 1.5s ease-in-out infinite;
}
@keyframes resonanceGlow {
  0%, 100% { text-shadow: 0 0 0.6667vw /* 5px */ rgba(155, 89, 182, 0.5); }
  50% { text-shadow: 0 0 2vw /* 15px */ rgba(155, 89, 182, 0.9); }
}
.resonance-text {
  font-size: 1.6vw /* 12px */;
  color: #bb8fce;
}

/* 属性详情弹窗 */
.stat-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.2s ease;
}
.stat-detail-modal {
  width: 90%;
  max-width: 42.6667vw /* 320px */;
  background: linear-gradient(135deg, #1a1f2e, #252b3d);
  border-radius: 2.1333vw /* 16px */;
  padding: 3.2vw /* 24px */;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 2.6667vw /* 20px */ 8vw /* 60px */ rgba(0, 0, 0, 0.5);
  position: relative;
}
.detail-close {
  position: absolute;
  top: 1.6vw /* 12px */;
  right: 1.6vw /* 12px */;
  width: 3.7333vw /* 28px */;
  height: 3.7333vw /* 28px */;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #888;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2.4vw /* 18px */;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-title {
  font-size: 2.6667vw /* 20px */;
  color: #d4af37;
  margin-bottom: 1.0667vw /* 8px */;
  text-align: center;
}
.detail-desc {
  font-size: 1.7333vw /* 13px */;
  color: #888;
  line-height: 1.6;
  margin-bottom: 2.6667vw /* 20px */;
  text-align: center;
}
.detail-breakdown {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.0667vw /* 8px */ 0;
}
.detail-row.total {
  padding-top: 1.6vw /* 12px */;
  margin-top: 1.0667vw /* 8px */;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-label {
  font-size: 1.7333vw /* 13px */;
  color: #a0a0a0;
}
.detail-value {
  font-size: 1.8667vw /* 14px */;
  font-weight: 600;
}
.detail-value.base {
  color: #5d6d7e;
}
.detail-value.time {
  color: #2ecc71;
}
.detail-value.equip {
  color: #d4af37;
}
.detail-value.final {
  color: #d4af37;
  font-size: 2.4vw /* 18px */;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 装备更换动画 */
.equip-layer.equipping {
  animation: equipFlash 0.5s ease;
}
@keyframes equipFlash {
  0% { opacity: 0; transform: scaleX(0); }
  50% { opacity: 1; transform: scaleX(1.1); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* ========================================
 * DIY装备系统样式
 * ======================================== */

/* DIY槽位列表 */
.slots-diy-container {
  display: flex;
  flex-direction: column;
  gap: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */;
}

.diy-slot-item {
  display: flex;
  align-items: center;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  background: linear-gradient(135deg, rgba(40, 45, 60, 0.9), rgba(30, 35, 50, 0.95));
  border-radius: 1.3333vw /* 10px */;
  border: 1px solid rgba(212, 175, 55, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.diy-slot-item:hover {
  background: linear-gradient(135deg, rgba(50, 55, 70, 0.9), rgba(40, 45, 60, 0.95));
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateX(0.5333vw /* 4px */);
}

.diy-slot-item.selected {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 2vw /* 15px */ rgba(212, 175, 55, 0.2);
}

.diy-slot-item.has-item .diy-slot-equipped {
  color: #d4af37;
}

.diy-slot-icon {
  width: 4.2667vw /* 32px */;
  height: 4.2667vw /* 32px */;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.6vw /* 12px */;
}

.equipped-dot {
  width: 1.6vw /* 12px */;
  height: 1.6vw /* 12px */;
  border-radius: 50%;
  box-shadow: 0 0 1.0667vw /* 8px */ currentColor;
}

.diy-slot-info {
  flex: 1;
}

.diy-slot-label {
  font-size: 1.7333vw /* 13px */;
  color: #a09070;
  margin-bottom: 0.2667vw /* 2px */;
}

.diy-slot-equipped {
  font-size: 1.8667vw /* 14px */;
  color: #666;
  font-weight: 500;
}

.diy-slot-arrow {
  font-size: 2.6667vw /* 20px */;
  color: rgba(212, 175, 55, 0.5);
}

/* DIY面板遮罩 */
.diy-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.2s ease;
}

.diy-panel-modal {
  width: 90%;
  max-width: 53.3333vw /* 400px */;
  max-height: 80vh;
  background: linear-gradient(135deg, #1a1f2e, #252b3d);
  border-radius: 2.1333vw /* 16px */;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 2.6667vw /* 20px */ 8vw /* 60px */ rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diy-panel-header {
  padding: 2.1333vw /* 16px */ 2.6667vw /* 20px */;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.diy-back-btn {
  position: absolute;
  top: 2.1333vw /* 16px */;
  left: 2.1333vw /* 16px */;
  width: 4.2667vw /* 32px */;
  height: 4.2667vw /* 32px */;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #888;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2.1333vw /* 16px */;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy-panel-title {
  font-size: 2.4vw /* 18px */;
  color: #d4af37;
  text-align: center;
  margin-bottom: 1.6vw /* 12px */;
}

.diy-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw /* 6px */;
  font-size: 1.4667vw /* 11px */;
}

.diy-step-indicator .step {
  padding: 0.5333vw /* 4px */ 1.0667vw /* 8px */;
  border-radius: 0.5333vw /* 4px */;
  color: #666;
  background: rgba(255, 255, 255, 0.05);
}

.diy-step-indicator .step.active {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.15);
}

.diy-step-indicator .step-arrow {
  color: #444;
}

.diy-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 2.6667vw /* 20px */;
}

/* 类型选择网格 */
.diy-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6vw /* 12px */;
}

.diy-type-card {
  background: linear-gradient(135deg, rgba(40, 45, 60, 0.8), rgba(30, 35, 50, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 1.6vw /* 12px */;
  padding: 2.6667vw /* 20px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diy-type-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-0.0417rem /* -2px */);
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0, 0, 0, 0.3);
}

.diy-type-icon {
  font-size: 4.2667vw /* 32px */;
  margin-bottom: 1.0667vw /* 8px */;
}

.diy-type-name {
  font-size: 1.8667vw /* 14px */;
  color: #c0b090;
}

/* 样式选择 */
.diy-style-grid {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

.diy-style-card {
  background: linear-gradient(135deg, rgba(40, 45, 60, 0.8), rgba(30, 35, 50, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 1.3333vw /* 10px */;
  padding: 2.1333vw /* 16px */;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diy-style-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
}

.diy-style-name {
  font-size: 2vw /* 15px */;
  color: #d4af37;
  margin-bottom: 0.5333vw /* 4px */;
}

.diy-style-colors {
  font-size: 1.6vw /* 12px */;
  color: #666;
}

/* 颜色选择 */
.diy-section-title {
  font-size: 1.7333vw /* 13px */;
  color: #888;
  margin-bottom: 1.6vw /* 12px */;
}

.diy-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3333vw /* 10px */;
}

.diy-color-card {
  background: linear-gradient(135deg, rgba(40, 45, 60, 0.8), rgba(30, 35, 50, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */ 1.0667vw /* 8px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diy-color-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
}

.diy-color-dot {
  width: 3.2vw /* 24px */;
  height: 3.2vw /* 24px */;
  border-radius: 50%;
  margin: 0 auto 0.8vw /* 6px */;
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(0, 0, 0, 0.3);
}

.diy-color-name {
  font-size: 1.6vw /* 12px */;
  color: #a09070;
}

/* 形制选择 */
.diy-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3333vw /* 10px */;
}

.diy-shape-card {
  background: linear-gradient(135deg, rgba(40, 45, 60, 0.8), rgba(30, 35, 50, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 1.0667vw /* 8px */;
  padding: 1.6vw /* 12px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diy-shape-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
}

.diy-shape-name {
  font-size: 1.7333vw /* 13px */;
  color: #c0b090;
}

/* 预览区域 */
.diy-preview-section {
  text-align: center;
}

.diy-preview-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1333vw /* 16px */;
  padding: 2.6667vw /* 20px */;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.6vw /* 12px */;
  margin-bottom: 2.6667vw /* 20px */;
}

.diy-preview-icon {
  width: 8vw /* 60px */;
  height: 8vw /* 60px */;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.7333vw /* 28px */;
  box-shadow: 0 0.5333vw /* 4px */ 2vw /* 15px */ rgba(0, 0, 0, 0.3);
}

.diy-preview-name {
  font-size: 2.4vw /* 18px */;
  color: #d4af37;
  margin-bottom: 0.5333vw /* 4px */;
}

.diy-preview-desc {
  font-size: 1.7333vw /* 13px */;
  color: #888;
}

.diy-preview-stats {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1.6vw /* 12px */;
  padding: 2.1333vw /* 16px */;
  margin-bottom: 2.6667vw /* 20px */;
}

.diy-preview-title {
  font-size: 1.8667vw /* 14px */;
  color: #a09070;
  margin-bottom: 1.6vw /* 12px */;
}

.diy-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 1.0667vw /* 8px */ 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.diy-stat-row:last-child {
  border-bottom: none;
}

.diy-stat-name {
  font-size: 1.8667vw /* 14px */;
  color: #888;
}

.diy-stat-value {
  font-size: 1.8667vw /* 14px */;
  color: #2ecc71;
  font-weight: 600;
}

.diy-preview-actions {
  display: flex;
  gap: 1.6vw /* 12px */;
  justify-content: center;
}

.diy-btn-cancel {
  padding: 1.6vw /* 12px */ 3.2vw /* 24px */;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #888;
  border-radius: 1.0667vw /* 8px */;
  cursor: pointer;
  font-size: 1.8667vw /* 14px */;
}

.diy-btn-equip {
  padding: 1.6vw /* 12px */ 4.2667vw /* 32px */;
  border: none;
  background: linear-gradient(135deg, #d4af37, #b8960c);
  color: #1a1f2e;
  border-radius: 1.0667vw /* 8px */;
  cursor: pointer;
  font-size: 1.8667vw /* 14px */;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   行囊（背包）系统样式 - V4.5
   ═══════════════════════════════════════════════ */

/* 背包页面基础样式 */
#backpackPage {
  background: linear-gradient(180deg, #f8f4ed 0%, #efe8d8 50%, #e8e0d0 100%);
}

/* 背包标签按钮 */
.backpack-tab {
  transition: all 0.2s ease;
}

.backpack-tab:hover {
  transform: translateY(-0.0208rem /* -1px */);
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(180, 140, 70, 0.25);
}

.backpack-tab.active {
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(200, 151, 58, 0.35);
}

/* 背包物品卡片 */
.backpack-item-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 246, 238, 0.9));
  border-radius: 1.6vw /* 12px */;
  padding: 1.6vw /* 12px */ 1.0667vw /* 8px */;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(180, 140, 70, 0.2);
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(0, 0, 0, 0.05);
}

.backpack-item-card:hover {
  transform: translateY(-0.0417rem /* -2px */);
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(0, 0, 0, 0.1);
  border-color: rgba(180, 140, 70, 0.35);
}

.backpack-item-card:active {
  transform: translateY(0);
  box-shadow: 0 0.2667vw /* 2px */ 0.8vw /* 6px */ rgba(0, 0, 0, 0.08);
}

/* 背包物品图标 */
.backpack-item-icon {
  font-size: 2.5em;
  margin-bottom: 1.0667vw /* 8px */;
  filter: drop-shadow(0 0.2667vw /* 2px */ 0.5333vw /* 4px */ rgba(0, 0, 0, 0.1));
}

/* 背包物品名称 */
.backpack-item-name {
  font-size: 1.7333vw /* 13px */;
  color: #5a3e1a;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 背包物品分类标签 */
.backpack-item-category {
  font-size: 1.4667vw /* 11px */;
  color: #8b7355;
  margin-top: 0.5333vw /* 4px */;
  padding: 0.2667vw /* 2px */ 1.0667vw /* 8px */;
  background: rgba(180, 140, 70, 0.1);
  border-radius: 1.3333vw /* 10px */;
  display: inline-block;
}

/* 空状态 */
.backpack-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vw /* 60px */ 2.6667vw /* 20px */;
  color: #8b7355;
}

.backpack-empty-icon {
  font-size: 3em;
  margin-bottom: 2.1333vw /* 16px */;
  opacity: 0.5;
}

.backpack-empty-title {
  font-size: 2vw /* 15px */;
  letter-spacing: 0.1em;
}

.backpack-empty-desc {
  font-size: 1.7333vw /* 13px */;
  margin-top: 1.0667vw /* 8px */;
  opacity: 0.7;
}

/* 背包统计 */
.backpack-stats {
  font-size: 1.7333vw /* 13px */;
  color: #7a5520;
  text-align: center;
  letter-spacing: 0.02em;
}

/* 物品详情弹窗 */
#backpackItemModal {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toast 提示 */
#simpleToast {
  animation: toastSlideUp 0.3s ease;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(2.6667vw /* 20px */);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 菜单按钮回退图标 */
.menu-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b6914, #a67c00);
  border-radius: 1.0667vw /* 8px */;
}