----/前端源码/uni-app/components/screens/TestNameDetail.vue

<template>
  <view class="test-name-detail" :class="{ 'test-name-detail--desktop': desktopLayout }">
    <view class="starry-bg">
      <view v-for="star in stars" :key="star.id" class="star" :style="{
        top: star.top,
        left: star.left,
        width: star.size + 'px',
        height: star.size + 'px',
        animationDuration: star.duration + 's',
        animationDelay: star.delay + 's',
      }"></view>
      <view class="glow-top"></view>
      <view class="glow-bottom"></view>
    </view>

    <view class="detail-header">
      <view class="detail-header-back" @click="emit('back')">
        <text class="back-icon">‹</text>
        <text class="back-text">返回</text>
      </view>
      <text class="detail-header-title">测名详解</text>
      <view class="detail-header-download" @click="handleDownloadPdf">
        <text class="detail-header-download-icon">↓</text>
        <text class="detail-header-download-text">下载PDF</text>
      </view>
    </view>

    <scroll-view scroll-y class="detail-content" :class="{ 'detail-content--desktop': desktopLayout }">
      <!-- 1 分数 -->
      <view class="score-card mystic-score-card clickable module-order-1" @click="openDetail('总分详解', dataObj?.header?.details?.nodes)">
        <view class="mystic-score-card__glow" />
        <view class="score-corner score-corner-tl"></view>
        <view class="score-corner score-corner-tr"></view>
        <view class="score-corner score-corner-bl"></view>
        <view class="score-corner score-corner-br"></view>

        <view class="score-label">命盘总分</view>
        <view class="score-value-wrap">
          <view v-if="desktopLayout" class="score-bagua-aura">
            <view class="score-yinyang-bg" aria-hidden="true"></view>
            <view class="score-rune-particles" aria-hidden="true">
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <view class="score-rune-dot" />
              <text class="score-rune-glyph">✦</text>
              <text class="score-rune-glyph">✧</text>
              <text class="score-rune-glyph">⋆</text>
              <text class="score-rune-glyph">⁂</text>
            </view>
            <view class="score-bagua-core"></view>
            <view class="score-bagua-ring-2"></view>
            <view class="score-bagua-symbols">
              <text class="score-bagua-symbol">☰</text>
              <text class="score-bagua-symbol">☱</text>
              <text class="score-bagua-symbol">☲</text>
              <text class="score-bagua-symbol">☳</text>
              <text class="score-bagua-symbol">☴</text>
              <text class="score-bagua-symbol">☵</text>
              <text class="score-bagua-symbol">☶</text>
              <text class="score-bagua-symbol">☷</text>
            </view>
          </view>
          <text class="score">{{ num(dataObj?.header?.score) }}</text>
          <view class="score-ring"></view>
        </view>
        <view class="score-stars">
          <text v-for="i in 5" :key="i" class="score-star" :class="{ active: i <= num(dataObj?.header?.star_rating) }">★</text>
        </view>
        <view class="score-divider"></view>
        <text class="name">{{ toText(dataObj?.header?.name) || '—' }}</text>
        <text class="quote">{{ toText(dataObj?.header?.poem_quote) }}</text>
        <view v-if="desktopLayout" class="score-mystic-ornaments">
          <view class="score-mystic-line"></view>
          <view class="score-mystic-bagua">
            <text class="score-mystic-symbol">乾</text>
            <text class="score-mystic-dot">·</text>
            <text class="score-mystic-symbol">坤</text>
            <text class="score-mystic-dot">·</text>
            <text class="score-mystic-symbol">震</text>
            <text class="score-mystic-dot">·</text>
            <text class="score-mystic-symbol">巽</text>
            <text class="score-mystic-dot">·</text>
            <text class="score-mystic-symbol">坎</text>
            <text class="score-mystic-dot">·</text>
            <text class="score-mystic-symbol">离</text>
          </view>
          <view class="score-mystic-sigil">
            <text class="score-mystic-sigil-text">☯</text>
          </view>
        </view>
        <view class="detail-entry">
          <text class="detail-entry-text">查看总分详解</text>
        </view>
      </view>

      <!-- 2 五行八卦（相生相克） -->
      <view v-if="hasWuxingBagua" class="section mystic-panel module-order-2">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">卦</text>
          <text class="section-text">五行八卦</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="wuge-card mystic-inner-card clickable" @click="openWuxingBaguaDetail">
          <view v-if="hasWuxingSupplement" class="wuxing-adapt-grid">
            <text v-if="toText(dataObj?.wuxing_bagua?.lacking)" class="wuxing-adapt-item"><text class="wuxing-adapt-label">先天偏缺</text>{{ toText(dataObj?.wuxing_bagua?.lacking) }}</text>
            <text v-if="toText(dataObj?.wuxing_bagua?.supplement)" class="wuxing-adapt-item"><text class="wuxing-adapt-label">补益建议</text>{{ toText(dataObj?.wuxing_bagua?.supplement) }}</text>
          </view>
          <text v-if="toText(dataObj?.wuxing_bagua?.wuxing_sketch)" class="line line-strong">五行：{{ toText(dataObj?.wuxing_bagua?.wuxing_sketch) }}</text>
          <text v-if="toText(dataObj?.wuxing_bagua?.bagua_profile)" class="line">八卦：{{ toText(dataObj?.wuxing_bagua?.bagua_profile) }}</text>
          <text v-if="toText(dataObj?.wuxing_bagua?.mutual_sketch)" class="line">{{ toText(dataObj?.wuxing_bagua?.mutual_sketch) }}</text>
          <text v-if="toText(dataObj?.wuxing_bagua?.summary)" class="line">{{ toText(dataObj?.wuxing_bagua?.summary) }}</text>
        </view>

        <!-- 五行单字详解（放到五行八卦下面） -->
        <view v-if="hasCharDetail" class="mystic-panel mystic-panel--extra">
          <view class="section-title mystic-section-title">
            <text class="section-glyph">字</text>
            <text class="section-text">五行单字详解</text>
            <text class="section-detail-tip">详解</text>
          </view>
          <view class="info-card mystic-inner-card clickable" @click="openCharDetail">
            <view v-for="(it, idx) in arr(dataObj?.char_detail?.items)" :key="idx" class="line">
              {{ toText(it?.char) }}
              <text v-if="toText(it?.element)"> · {{ toText(it?.element) }}</text>
              <text v-if="toText(it?.yin_yang_element) || toText(it?.yin_yang)"> · {{ toText(it?.yin_yang_element) || toText(it?.yin_yang) }}</text>
              <text v-if="toText(it?.bagua_trigram_symbol) || toText(it?.bagua_trigram)"> · 卦：{{ toText(it?.bagua_trigram_symbol) }}{{ toText(it?.bagua_trigram_symbol) && toText(it?.bagua_trigram) ? ' ' : '' }}{{ toText(it?.bagua_trigram) }}</text>
              <text v-if="toText(it?.stroke)"> · {{ toText(it?.stroke) }}</text>
              <text v-if="toText(it?.tone)"> · {{ toText(it?.tone) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 3 五行相生还是相克 -->
      <view v-if="hasBaziNameFit" class="section mystic-panel module-order-3">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">☯</text>
          <text class="section-text">八字与姓名五行</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="zodiac-card mystic-inner-card clickable" @click="openDetail('八字与姓名五行详解', dataObj?.bazi_name_fit?.details?.nodes)">
          <view class="zodiac-header">
            <view class="zodiac-info">
              <text v-if="toText(dataObj?.bazi_name_fit?.xiyongshen)" class="line">喜用神：{{ toText(dataObj?.bazi_name_fit?.xiyongshen) }}</text>
              <text v-if="toText(dataObj?.bazi_name_fit?.name_wuxing_profile)" class="line">姓名五行：{{ toText(dataObj?.bazi_name_fit?.name_wuxing_profile) }}</text>
              <text v-if="toText(dataObj?.bazi_name_fit?.complement_summary)" class="line">{{ toText(dataObj?.bazi_name_fit?.complement_summary) }}</text>
            </view>
            <text
              v-if="dataObj?.bazi_name_fit?.fit_score !== undefined && dataObj?.bazi_name_fit?.fit_score !== null && dataObj?.bazi_name_fit?.fit_score !== ''"
              class="zodiac-score"
            >{{ num(dataObj?.bazi_name_fit?.fit_score) }}</text>
          </view>
        </view>
      </view>

      <!-- 4 三才五格 -->
      <view class="section mystic-panel module-order-4">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">爻</text>
          <text class="section-text">笔画 · 五格 · 三才</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="wuge-card mystic-inner-card clickable" @click="openDetail('笔画数理详解', dataObj?.strokes_wuge_sancai?.details?.nodes)">
          <view v-for="(it, idx) in arr(dataObj?.strokes_wuge_sancai?.wuge)" :key="idx" class="line">
            {{ toText(it?.name) }}：{{ toText(it?.desc) }}
          </view>
          <text class="line">三才：{{ toText(dataObj?.strokes_wuge_sancai?.sancai?.result) }}</text>
        </view>
      </view>

      <!-- 5 六爻 -->
      <view v-if="hasLiuyao" class="section mystic-panel module-order-5">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">卦</text>
          <text class="section-text">六爻</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="meaning-card mystic-inner-card clickable" @click="openDetail('六爻详解', dataObj?.liuyao?.details?.nodes)">
          <text v-if="toText(dataObj?.liuyao?.hexagram_title)" class="line line-strong">{{ toText(dataObj?.liuyao?.hexagram_title) }}</text>
          <text v-if="toText(dataObj?.liuyao?.changing_summary)" class="line">动爻：{{ toText(dataObj?.liuyao?.changing_summary) }}</text>
          <text v-if="toText(dataObj?.liuyao?.interpretation)" class="line">{{ toText(dataObj?.liuyao?.interpretation) }}</text>
          <view v-for="(yl, yi) in arr(dataObj?.liuyao?.yao_lines).slice(0, 6)" :key="yi" class="line">{{ toText(yl) }}</view>
        </view>
      </view>

      <!-- 6 属相 -->
      <view v-if="hasZodiacSign" class="section mystic-panel module-order-6">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">肖</text>
          <text class="section-text">属相</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="zodiac-card mystic-inner-card clickable" @click="openZodiacDetail">
          <view class="zodiac-header">
            <view class="zodiac-icon-wrap">
              <text class="zodiac-icon">{{ toText(dataObj?.zodiac_sign?.animal_icon) || toText(dataObj?.zodiac_sign?.animal) || '属相' }}</text>
            </view>
            <view class="zodiac-info">
              <text class="zodiac-label">属相</text>
              <text class="zodiac-value">{{ toText(dataObj?.zodiac_sign?.animal) }} {{ toText(dataObj?.zodiac_sign?.earthly_branch) }}</text>
              <text v-if="toText(dataObj?.zodiac_sign?.trait_summary)" class="line trait-line">{{ toText(dataObj?.zodiac_sign?.trait_summary) }}</text>
              <text v-if="toText(dataObj?.zodiac_sign?.name_harmony)" class="line trait-line">与名：{{ toText(dataObj?.zodiac_sign?.name_harmony) }}</text>
              <view v-if="hasZodiacAdaptation" class="zodiac-adapt-grid">
                <text v-if="toText(dataObj?.zodiac_sign?.sanhe)" class="zodiac-adapt-item"><text class="zodiac-adapt-label">三合</text>{{ toText(dataObj?.zodiac_sign?.sanhe) }}</text>
                <text v-if="toText(dataObj?.zodiac_sign?.liuhe)" class="zodiac-adapt-item"><text class="zodiac-adapt-label">六合</text>{{ toText(dataObj?.zodiac_sign?.liuhe) }}</text>
                <text v-if="toText(dataObj?.zodiac_sign?.xiangchong)" class="zodiac-adapt-item"><text class="zodiac-adapt-label">相冲</text>{{ toText(dataObj?.zodiac_sign?.xiangchong) }}</text>
                <text v-if="toText(dataObj?.zodiac_sign?.xianghai)" class="zodiac-adapt-item"><text class="zodiac-adapt-label">相害</text>{{ toText(dataObj?.zodiac_sign?.xianghai) }}</text>
                <text v-if="toText(dataObj?.zodiac_sign?.xiangxing)" class="zodiac-adapt-item"><text class="zodiac-adapt-label">相刑</text>{{ toText(dataObj?.zodiac_sign?.xiangxing) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 7 幸运数字 -->
      <view v-if="hasLuckyNumbers" class="section mystic-panel module-order-7">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">数</text>
          <text class="section-text">幸运数字</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="info-card mystic-inner-card clickable" @click="openDetail('幸运数字详解', dataObj?.lucky_numbers?.details?.nodes)">
          <text v-if="toText(dataObj?.lucky_numbers?.primary)" class="line line-strong">主推：{{ toText(dataObj?.lucky_numbers?.primary) }}</text>
          <text v-if="luckyNumbersDisplay" class="line">{{ luckyNumbersDisplay }}</text>
          <text v-if="toText(dataObj?.lucky_numbers?.meaning)" class="line">{{ toText(dataObj?.lucky_numbers?.meaning) }}</text>
        </view>
      </view>

      <!-- 8 颜色 -->
      <view v-if="hasLuckyColors" class="section mystic-panel module-order-8">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">色</text>
          <text class="section-text">幸运颜色</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="info-card mystic-inner-card clickable" @click="openDetail('幸运颜色详解', dataObj?.lucky_colors?.details?.nodes)">
          <text v-if="toText(dataObj?.lucky_colors?.primary)" class="line line-strong">主推：{{ toText(dataObj?.lucky_colors?.primary) }}</text>
          <view v-for="(c, ci) in arr(dataObj?.lucky_colors?.colors)" :key="ci" class="lucky-color-row">
            <view
              v-if="toText(c?.hex)"
              class="lucky-color-swatch"
              :style="{ backgroundColor: toText(c?.hex) }"
            />
            <text class="line lucky-color-text">{{ toText(c?.name) }}{{ toText(c?.note) ? ' — ' + toText(c.note) : '' }}</text>
          </view>
          <text v-if="toText(dataObj?.lucky_colors?.meaning)" class="line">{{ toText(dataObj?.lucky_colors?.meaning) }}</text>
        </view>
      </view>

      <!-- 9 事业规划 -->
      <view v-if="hasCareerPlan" class="section mystic-panel module-order-9">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">业</text>
          <text class="section-text">事业规划</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="info-card mystic-inner-card clickable" @click="openDetail('事业规划详解', dataObj?.career_plan?.details?.nodes)">
          <text v-if="toText(dataObj?.career_plan?.summary)" class="line">{{ toText(dataObj?.career_plan?.summary) }}</text>
          <view v-for="(m, mi) in arr(dataObj?.career_plan?.milestones)" :key="mi" class="career-milestone">
            <text class="line line-strong">{{ toText(m?.phase) }}{{ toText(m?.period) ? ' · ' + toText(m.period) : '' }}</text>
            <text v-if="toText(m?.focus)" class="line">{{ toText(m.focus) }}</text>
            <text v-if="toText(m?.advice)" class="line">{{ toText(m.advice) }}</text>
          </view>
        </view>
      </view>

      <!-- 10 开运锦囊 -->
      <view class="section mystic-panel module-order-10">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">锦</text>
          <text class="section-text">开运锦囊</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="info-card mystic-inner-card clickable" @click="openDetail('开运锦囊详解', dataObj?.lucky_tips?.details?.nodes)">
          <view v-for="(it, idx) in arr(dataObj?.lucky_tips?.items)" :key="idx" class="line">
            {{ toText(it?.icon) }} {{ toText(it?.label) }}：{{ toText(it?.value) }}
          </view>
        </view>
      </view>

      <!-- 11 人生运程 -->
      <view class="section mystic-panel module-order-11">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">运</text>
          <text class="section-text">人生运程</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="wuxing-card mystic-inner-card clickable" @click="openDetail('人生运程详解', dataObj?.lifespan?.details?.nodes)">
          <view v-for="(it, idx) in arr(dataObj?.lifespan?.items)" :key="idx" class="line">
            {{ toText(it?.age) }}：{{ toText(it?.desc) }}
          </view>
        </view>
      </view>

      <!-- 12 诗词出处 -->
      <view class="section mystic-panel module-order-12">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">诗</text>
          <text class="section-text">诗词出处</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="meaning-card mystic-inner-card clickable" @click="openDetail('诗词出处详解', dataObj?.poetry_source?.details?.nodes)">
          <text class="line">{{ toText(dataObj?.poetry_source?.text) }}</text>
          <text class="line">{{ toText(dataObj?.poetry_source?.source) }}</text>
        </view>
      </view>

      <!-- 13 六维格局 -->
      <view class="section mystic-panel section--sixdim-compact module-order-13">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">维</text>
          <text class="section-text">六维格局</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="clickable mystic-inner-card mystic-inner-card--flush" @click="openDetail('六维格局详解', dataObj?.six_dimension?.details?.nodes)">
          <SixDimensionRadarDesktopEchart
            v-if="desktopLayout"
            :labels="arr(dataObj?.six_dimension?.labels)"
            :values="arr(dataObj?.six_dimension?.values)"
            :remark="toText(dataObj?.six_dimension?.remark)"
          />
          <SixDimensionRadar
            v-else
            :labels="arr(dataObj?.six_dimension?.labels)"
            :values="arr(dataObj?.six_dimension?.values)"
            :remark="toText(dataObj?.six_dimension?.remark)"
          />
        </view>
      </view>

      <!-- 14 大师寄语 -->
      <view class="section mystic-panel module-order-14">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">师</text>
          <text class="section-text">大师寄语</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="meaning-card mystic-inner-card clickable" @click="openDetail('大师寄语详解', dataObj?.master_message?.details?.nodes)">
          <text class="line">{{ toText(dataObj?.master_message?.text) }}</text>
        </view>
      </view>

      <!-- 其余模块置后 -->
      <view class="section mystic-panel mystic-panel--extra">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">意</text>
          <text class="section-text">字义与生肖</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="meaning-card mystic-inner-card clickable" @click="openDetail('字义与生肖详解', dataObj?.meaning_and_zodiac?.details?.nodes)">
          <view class="meaning-quote">「</view>
          <text class="meaning-label">{{ toText(dataObj?.meaning_and_zodiac?.imagery_title) || "组合意象" }}</text>
          <text class="meaning-text">{{ toText(dataObj?.meaning_and_zodiac?.imagery_text) }}</text>
          <view class="meaning-judge">
            <text class="meaning-judge-label">判断：</text>
            <text class="meaning-judge-text">{{ toText(dataObj?.meaning_and_zodiac?.judgement) }}</text>
          </view>
        </view>
        <view class="zodiac-card mystic-inner-card clickable" @click="openDetail('字义与生肖详解', dataObj?.meaning_and_zodiac?.details?.nodes)">
          <view class="zodiac-header">
            <view class="zodiac-icon-wrap">
              <text class="zodiac-icon">{{ toText(dataObj?.meaning_and_zodiac?.zodiac?.animal) || "🐉" }}</text>
            </view>
            <view class="zodiac-info">
              <text class="zodiac-label">生肖适配</text>
              <text class="zodiac-value">{{ toText(dataObj?.meaning_and_zodiac?.zodiac?.label) }}</text>
            </view>
            <text class="zodiac-score">{{ num(dataObj?.meaning_and_zodiac?.zodiac?.score) }}</text>
          </view>
        </view>
      </view>

      <!-- 单字详解已移到“五行八卦”下面 -->

      <view v-if="hasPhonetics" class="section mystic-panel mystic-panel--extra">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">音</text>
          <text class="section-text">音律音韵</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="meaning-card mystic-inner-card clickable" @click="openDetail('音律音韵详解', dataObj?.phonetics?.details?.nodes)">
          <text v-if="toText(dataObj?.phonetics?.pinyin_full)" class="line line-strong">{{ toText(dataObj?.phonetics?.pinyin_full) }}</text>
          <text v-if="toText(dataObj?.phonetics?.pingze)" class="line">声调与平仄：{{ toText(dataObj?.phonetics?.pingze) }}</text>
          <text v-if="toText(dataObj?.phonetics?.rhythm_summary)" class="line">{{ toText(dataObj?.phonetics?.rhythm_summary) }}</text>
          <view v-if="toText(dataObj?.phonetics?.judgement)" class="meaning-judge">
            <text class="meaning-judge-label">简评：</text>
            <text class="meaning-judge-text">{{ toText(dataObj?.phonetics?.judgement) }}</text>
          </view>
        </view>
      </view>

      <view class="section mystic-panel mystic-panel--extra">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">易</text>
          <text class="section-text">周易卦象</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="zodiac-card mystic-inner-card clickable" @click="openGuaDetail">
          <text class="line line-strong">{{ toText(dataObj?.gua?.name) }}</text>
          <text v-if="dataObj?.gua?.hexagram_code !== undefined && dataObj?.gua?.hexagram_code !== null && dataObj?.gua?.hexagram_code !== ''" class="line">卦序：{{ toText(dataObj?.gua?.hexagram_code) }}</text>
          <text v-if="toText(dataObj?.gua?.bgText)" class="line">卦名：{{ toText(dataObj?.gua?.bgText) }}</text>
          <text v-if="toText(dataObj?.gua?.badge)" class="line">卦象：{{ toText(dataObj?.gua?.badge) }}</text>
          <text class="line">{{ toText(dataObj?.gua?.desc) }}</text>
        </view>
      </view>

      <view v-if="hasNamePopularity" class="section mystic-panel mystic-panel--extra">
        <view class="section-title mystic-section-title">
          <text class="section-glyph">名</text>
          <text class="section-text">重名与流行度</text>
          <text class="section-detail-tip">详解</text>
        </view>
        <view class="info-card mystic-inner-card clickable" @click="openDetail('重名与流行度详解', dataObj?.name_popularity?.details?.nodes)">
          <text v-if="toText(dataObj?.name_popularity?.duplicate_rate_label)" class="line line-strong">
            重名提示：{{ toText(dataObj?.name_popularity?.duplicate_rate_label) }}
          </text>
          <text v-if="toText(dataObj?.name_popularity?.popularity_tier)" class="line">
            流行度：{{ toText(dataObj?.name_popularity?.popularity_tier) }}
          </text>
          <text v-if="toText(dataObj?.name_popularity?.interpretation)" class="line">{{ toText(dataObj?.name_popularity?.interpretation) }}</text>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <view v-if="showModal" class="modal-mask" @click="closeDetail">
      <view class="detail-modal" @click.stop="">
        <view class="detail-modal-orn detail-modal-orn--tl" />
        <view class="detail-modal-orn detail-modal-orn--tr" />
        <view class="detail-modal-orn detail-modal-orn--bl" />
        <view class="detail-modal-orn detail-modal-orn--br" />
        <view class="detail-modal-card">
          <view class="modal-title-wrap">
            <view class="modal-title-seal">符</view>
            <text class="modal-title">{{ modalTitle }}</text>
          </view>
          <view class="close" @click="closeDetail">×</view>
        </view>
        <scroll-view scroll-y class="detail-modal-body">
          <view v-for="(node, idx) in modalNodes" :key="idx" class="node">
            <text v-if="node?.type === 'text'" class="line">{{ toText(node.text) }}</text>
            <view v-else-if="node?.type === 'list'">
              <text v-for="(item, j) in arr(node.items)" :key="j" class="line">- {{ toText(item) }}</text>
            </view>
            <view v-else-if="node?.type === 'kv'">
              <text v-for="(item, j) in arr(node.items)" :key="j" class="line">{{ toText(item?.label) }}：{{ toText(item?.value) }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import SixDimensionRadar from "../SixDimensionRadar.vue";
import SixDimensionRadarDesktopEchart from "../SixDimensionRadarDesktopEchart.vue";
import pdfBgUrl from "../../utils/pdf/background.png";

const props = withDefaults(
  defineProps<{ data: any; desktopLayout?: boolean }>(),
  { desktopLayout: false },
);
const emit = defineEmits<{ back: [] }>();

const tryParse = (v: any) => {
  if (v && typeof v === "object") return v;
  if (typeof v !== "string") return {};
  try {
    return JSON.parse(v);
  } catch {
    return {};
  }
};

const dataObj = computed(() => tryParse(props.data));
const toText = (v: any) => String(v ?? "").trim();

const hasPhonetics = computed(() => {
  const p = dataObj.value?.phonetics;
  if (!p || typeof p !== "object") return false;
  return !!(
    toText(p.pinyin_full) ||
    toText(p.pingze) ||
    toText(p.rhythm_summary) ||
    toText(p.judgement) ||
    arr(p.details?.nodes).length
  );
});

const hasBaziNameFit = computed(() => {
  const b = dataObj.value?.bazi_name_fit;
  if (!b || typeof b !== "object") return false;
  const rawScore = b.fit_score;
  const scoreNum = Number(rawScore);
  const hasScore =
    rawScore !== undefined &&
    rawScore !== null &&
    rawScore !== "" &&
    Number.isFinite(scoreNum);
  return !!(
    toText(b.xiyongshen) ||
    toText(b.name_wuxing_profile) ||
    toText(b.complement_summary) ||
    hasScore ||
    arr(b.details?.nodes).length
  );
});

const hasNamePopularity = computed(() => {
  const n = dataObj.value?.name_popularity;
  if (!n || typeof n !== "object") return false;
  return !!(
    toText(n.duplicate_rate_label) ||
    toText(n.popularity_tier) ||
    toText(n.interpretation) ||
    arr(n.details?.nodes).length
  );
});

const hasLiuyao = computed(() => {
  const x = dataObj.value?.liuyao;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.hexagram_title) ||
    toText(x.changing_summary) ||
    toText(x.interpretation) ||
    arr(x.yao_lines).length ||
    arr(x.details?.nodes).length
  );
});

const hasWuxingBagua = computed(() => {
  const x = dataObj.value?.wuxing_bagua;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.lacking) ||
    toText(x.supplement) ||
    toText(x.wuxing_sketch) ||
    toText(x.bagua_profile) ||
    toText(x.mutual_sketch) ||
    toText(x.summary) ||
    arr(x.details?.nodes).length
  );
});
const hasWuxingSupplement = computed(() => {
  const x = dataObj.value?.wuxing_bagua;
  if (!x || typeof x !== "object") return false;
  return !!(toText(x.lacking) || toText(x.supplement));
});

const hasCharDetail = computed(() => {
  const items = arr(dataObj.value?.char_detail?.items);
  return items.length > 0;
});

const hasZodiacSign = computed(() => {
  const x = dataObj.value?.zodiac_sign;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.animal) ||
    toText(x.animal_icon) ||
    toText(x.earthly_branch) ||
    toText(x.sanhe) ||
    toText(x.liuhe) ||
    toText(x.xiangchong) ||
    toText(x.xianghai) ||
    toText(x.xiangxing) ||
    toText(x.trait_summary) ||
    toText(x.name_harmony) ||
    arr(x.details?.nodes).length
  );
});
const hasZodiacAdaptation = computed(() => {
  const x = dataObj.value?.zodiac_sign;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.sanhe) ||
    toText(x.liuhe) ||
    toText(x.xiangchong) ||
    toText(x.xianghai) ||
    toText(x.xiangxing)
  );
});

const hasCareerPlan = computed(() => {
  const x = dataObj.value?.career_plan;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.summary) ||
    arr(x.milestones).length ||
    arr(x.details?.nodes).length
  );
});

const hasLuckyNumbers = computed(() => {
  const x = dataObj.value?.lucky_numbers;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.primary) ||
    toText(x.meaning) ||
    arr(x.numbers).length ||
    arr(x.details?.nodes).length
  );
});

const hasLuckyColors = computed(() => {
  const x = dataObj.value?.lucky_colors;
  if (!x || typeof x !== "object") return false;
  return !!(
    toText(x.primary) ||
    toText(x.meaning) ||
    arr(x.colors).length ||
    arr(x.details?.nodes).length
  );
});

const luckyNumbersDisplay = computed(() => {
  const nums = arr(dataObj.value?.lucky_numbers?.numbers);
  if (!nums.length) return "";
  return nums.map((n: any) => String(n)).join("、");
});

const arr = (v: any) => (Array.isArray(v) ? v : []);
const num = (v: any) => {
  const n = Number(v);
  return Number.isFinite(n) ? n : 0;
};

const showModal = ref(false);
const modalTitle = ref("详解");
const modalNodes = ref<any[]>([]);
const openDetail = (title: string, nodes: any) => {
  modalTitle.value = title;
  modalNodes.value = arr(nodes);
  showModal.value = true;
};
const closeDetail = () => {
  showModal.value = false;
};

// —— 五行八卦：把“每个字的五行/阴阳/卦象”拼到详解弹层最前面 ——
const formatCharDetailLine = (it: any): string => {
  const parts: string[] = [];
  const char = toText(it?.char);
  if (!char) return "";
  parts.push(char);

  const element = toText(it?.element);
  if (element) parts.push(element);

  const yinYang = toText(it?.yin_yang_element) || toText(it?.yin_yang);
  if (yinYang) parts.push(yinYang);

  const sym = toText(it?.bagua_trigram_symbol);
  const tri = toText(it?.bagua_trigram);
  if (sym || tri) {
    const trigram = tri ? tri : "";
    parts.push(`卦：${sym}${sym && trigram ? ' ' : ''}${trigram}`.trim());
  }

  const stroke = toText(it?.stroke);
  if (stroke) parts.push(`笔画：${stroke}`);

  const tone = toText(it?.tone);
  if (tone) parts.push(`声调：${tone}`);

  return parts.join(" · ");
};

const charDetailNodes = computed(() => {
  const items = arr(dataObj.value?.char_detail?.items);
  const nodes = items
    .map((it: any) => {
      const line = formatCharDetailLine(it);
      return line ? { type: "text", text: line } : null;
    })
    .filter(Boolean) as any[];
  return nodes;
});

const openCharDetail = () => {
  const fallbackNodes = arr(dataObj.value?.char_detail?.details?.nodes);
  const nodes = charDetailNodes.value.length ? charDetailNodes.value : fallbackNodes;
  openDetail("五行单字详解", nodes);
};

const openWuxingBaguaDetail = () => {
  const x = dataObj.value?.wuxing_bagua || {};
  const extraNodes = [
    toText(x?.lacking) ? { type: "text", text: `先天偏缺：${toText(x.lacking)}` } : null,
    toText(x?.supplement) ? { type: "text", text: `补益建议：${toText(x.supplement)}` } : null,
    toText(x?.wuxing_sketch) ? { type: "text", text: `五行：${toText(x.wuxing_sketch)}` } : null,
    toText(x?.bagua_profile) ? { type: "text", text: `八卦：${toText(x.bagua_profile)}` } : null,
    toText(x?.mutual_sketch) ? { type: "text", text: toText(x.mutual_sketch) } : null,
    toText(x?.summary) ? { type: "text", text: toText(x.summary) } : null,
  ].filter(Boolean) as any[];
  const baguaFallbackNodes = arr(dataObj.value?.wuxing_bagua?.details?.nodes);
  const nodes = charDetailNodes.value.length
    ? [...charDetailNodes.value, ...extraNodes, ...baguaFallbackNodes]
    : [...extraNodes, ...baguaFallbackNodes];
  openDetail("五行八卦详解", nodes);
};

const openZodiacDetail = () => {
  const z = dataObj.value?.zodiac_sign || {};
  const extraNodes = [
    (toText(z?.animal) || toText(z?.earthly_branch))
      ? { type: "text", text: `属相：${toText(z.animal)} ${toText(z.earthly_branch)}`.trim() }
      : null,
    toText(z?.trait_summary) ? { type: "text", text: `特性：${toText(z.trait_summary)}` } : null,
    toText(z?.name_harmony) ? { type: "text", text: `与名契合：${toText(z.name_harmony)}` } : null,
    toText(z?.sanhe) ? { type: "text", text: `三合：${toText(z.sanhe)}` } : null,
    toText(z?.liuhe) ? { type: "text", text: `六合：${toText(z.liuhe)}` } : null,
    toText(z?.xiangchong) ? { type: "text", text: `相冲：${toText(z.xiangchong)}` } : null,
    toText(z?.xianghai) ? { type: "text", text: `相害：${toText(z.xianghai)}` } : null,
    toText(z?.xiangxing) ? { type: "text", text: `相刑：${toText(z.xiangxing)}` } : null,
  ].filter(Boolean) as any[];
  openDetail("属相详解", [...extraNodes, ...arr(z?.details?.nodes)]);
};

const openGuaDetail = () => {
  const g = dataObj.value?.gua || {};
  const extraNodes = [
    toText(g?.name) ? { type: "text", text: `卦象：${toText(g.name)}` } : null,
    (g?.hexagram_code !== undefined && g?.hexagram_code !== null && g?.hexagram_code !== "")
      ? { type: "text", text: `卦序：${toText(g.hexagram_code)}` }
      : null,
    toText(g?.bgText) ? { type: "text", text: `卦名：${toText(g.bgText)}` } : null,
    toText(g?.badge) ? { type: "text", text: `卦位：${toText(g.badge)}` } : null,
    toText(g?.desc) ? { type: "text", text: toText(g.desc) } : null,
  ].filter(Boolean) as any[];
  openDetail("周易卦象详解", [...extraNodes, ...arr(g?.details?.nodes)]);
};

const handleDownloadPdf = async () => {
  // H5/浏览器环境生成 PDF 下载到本地；若非浏览器则直接返回
  if (typeof window === "undefined" || typeof document === "undefined") return;
  uni.showLoading({ title: "正在生成PDF..." });
  const raw = dataObj.value || {};
  const header = raw?.header || {};
  const measuredName = toText(header?.name);
  const score = header?.score ?? "";
  const starRating = header?.star_rating ?? header?.stars ?? 0;

  const preferredModules: Array<{ key: string; title: string }> = [
    { key: "wuxing_bagua", title: "五行八卦（相生相克）" },
    { key: "char_detail", title: "五行单字详解" },
    { key: "bazi_name_fit", title: "八字与姓名五行" },
    { key: "strokes_wuge_sancai", title: "三才五格" },
    { key: "liuyao", title: "六爻" },
    { key: "zodiac_sign", title: "属相" },
    { key: "wuxing_bagua", title: "五行八卦" },
    { key: "lucky_numbers", title: "幸运数字" },
    { key: "lucky_colors", title: "幸运颜色" },
    { key: "career_plan", title: "事业规划" },
    { key: "lucky_tips", title: "开运锦囊" },
    { key: "lifespan", title: "人生规划" },
    { key: "poetry_source", title: "诗词出处" },
    { key: "six_dimension", title: "六维格局" },
    { key: "master_message", title: "大师寄语" },
  ];
  const keyToTitle = new Map(preferredModules.map((m) => [m.key, m.title]));

  const escapeHtml = (s: string) =>
    s
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");

  const flattenNodesToLines = (nodes: any[]): string[] => {
    const out: string[] = [];
    for (const n of nodes || []) {
      if (!n || typeof n !== "object") continue;
      if (n.type === "text") {
        const t = toText(n.text);
        if (t) out.push(t);
      } else if (n.type === "list") {
        const items = Array.isArray(n.items) ? n.items : [];
        for (const it of items) {
          const t = toText(it);
          if (t) out.push(`- ${t}`);
        }
      } else if (n.type === "kv") {
        const items = Array.isArray(n.items) ? n.items : [];
        for (const it of items) {
          const k = toText(it?.label);
          const v = toText(it?.value);
          if (k || v) out.push(`${k ? k : "项"}：${v}`);
        }
      }
      // 空行作为模块间隔（避免所有内容挤在一起）
      out.push("");
    }
    // 去掉尾部多余空行
    while (out.length && !out[out.length - 1]) out.pop();
    return out;
  };

  const labelForKey = (rawKey: string): string => {
    const k = String(rawKey || "").trim();
    if (!k) return "";
    const dict: Record<string, string> = {
      // 通用
      header: "基础信息",
      details: "详解",
      nodes: "详解内容",
      items: "条目",
      list: "列表",
      text: "内容",
      title: "标题",
      summary: "总结",
      remark: "批注",
      note: "说明",
      result: "结果",
      score: "评分",
      star_rating: "星级",
      stars: "星级",
      name: "名称",
      label: "标签",
      value: "内容",
      desc: "描述",
      // 单字详解
      char: "字",
      element: "五行",
      stroke: "笔画",
      tone: "声调",
      pinyin: "拼音",
      // 卦象
      gua: "周易卦象",
      bg: "卦象",
      // 五行/生肖
      wuxing: "五行",
      zodiac: "生肖",
      shuxiang: "属相",
      animal: "生肖",
      earthly_branch: "地支",
      // 其它常见
      phase: "阶段",
      period: "周期",
      focus: "重点",
      advice: "建议",
      colors: "颜色",
      hex: "色值",
      primary: "主推",
      meaning: "含义",
      numbers: "数字",
      labels: "维度",
      values: "分值",
      lucky: "吉凶",
      is_lucky: "吉凶",
      color: "颜色",
      wuxing_sketch: "五行概述",
      bagua_profile: "八卦画像",
      mutual_sketch: "生克互助",
      trait_summary: "特性概述",
      name_harmony: "与名字契合",
      lacking: "先天偏缺",
      supplement: "补益建议",
      sanhe: "三合",
      liuhe: "六合",
      xiangchong: "相冲",
      xianghai: "相害",
      xiangxing: "相刑",
      hexagram_code: "卦序",
      bgText: "卦名",
      badge: "卦位",
    };

    if (dict[k]) return dict[k];

    // snake_case → 简单中文化（仅用于兜底，避免直接露出字段名）
    const snake = k.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`);
    const parts = snake.split("_").filter(Boolean);
    const partDict: Record<string, string> = {
      char: "字",
      detail: "详解",
      analysis: "分析",
      bagua: "八卦",
      wuxing: "五行",
      zodiac: "生肖",
      score: "评分",
      name: "名称",
      plan: "规划",
      lucky: "幸运",
      color: "颜色",
      number: "数字",
      career: "事业",
      master: "大师",
      message: "寄语",
      poetry: "诗词",
      source: "出处",
      stroke: "笔画",
      gua: "卦象",
      tips: "锦囊",
    };
    const mapped = parts.map((p) => partDict[p] || "");
    const s = mapped.filter(Boolean).join("");
    return s || "信息";
  };

  const noisyKeys = new Set(["details", "nodes", "type", "meta", "status", "code", "raw"]);
  const hiddenPdfKeys = new Set([
    "id",
    "report_id",
    "is_unlocked",
    "unlock_price",
    "locked",
    "lock",
    "price",
  ]);
  const isNoisyInfoLine = (label: string, line: string) => {
    if (label !== "信息") return false;
    const s = String(line || "").trim();
    if (!s) return true;
    if (/^(true|false)$/i.test(s)) return true;
    if (/^[a-z_]+$/i.test(s) && s.length <= 16) return true;
    return false;
  };
  const flattenAnyToLines = (val: any, prefix = "", depth = 0): string[] => {
    if (depth > 4) return [];
    const out: string[] = [];
    if (val === null || val === undefined) return out;
    if (typeof val === "string" || typeof val === "number" || typeof val === "boolean") {
      const s = toText(val);
      // 布尔值在报告中大多是内部标记位，默认不直接导出，避免“信息：true/false”噪音
      if (typeof val === "boolean") return out;
      if (s) out.push(prefix ? `${prefix}：${s}` : s);
      return out;
    }
    if (Array.isArray(val)) {
      val.forEach((it) => {
        const child = flattenAnyToLines(it, "", depth + 1);
        if (!child.length) return;
        child.forEach((line) => out.push(line));
      });
      return out;
    }
    if (typeof val === "object") {
      Object.keys(val).forEach((k) => {
        if (noisyKeys.has(k)) return;
        if (hiddenPdfKeys.has(k)) return;
        // 隐藏纯容器字段
        if (k === "items" && Array.isArray((val as any)[k])) {
          const child = flattenAnyToLines((val as any)[k], "", depth + 1);
          child.forEach((line) => out.push(line));
          return;
        }
        const label = labelForKey(k);
        const child = flattenAnyToLines((val as any)[k], "", depth + 1);
        child.forEach((line) => {
          if (isNoisyInfoLine(label, line)) return;
          const shouldKeepRaw = line.includes("：") && (label === "信息" || !label);
          out.push(shouldKeepRaw ? line : (label ? `${label}：${line}` : line));
        });
      });
    }
    return out;
  };
  const uniqueLines = (lines: string[]) => {
    const seen = new Set<string>();
    const out: string[] = [];
    lines.forEach((line) => {
      const s = String(line || "").trim();
      if (!s || seen.has(s)) return;
      seen.add(s);
      out.push(s);
    });
    return out;
  };
  const isNumericLike = (s: string) => /^\d+(\.\d+)?$/.test(String(s || "").trim());
  const shouldSkipModule = (title: string, lines: string[]) => {
    if (title.includes("解锁状态") || title.includes("解锁价格")) return true;
    const clean = (lines || []).map((x) => String(x || "").trim()).filter(Boolean);
    if (!clean.length) return true;
    const numericCount = clean.filter((x) => isNumericLike(x)).length;
    // 过滤无语义章节：标题“信息”且内容仅为数字（如 302/337）
    if (title === "信息" && numericCount === clean.length) return true;
    // 兜底：标题“信息”且几乎没有文本语义
    if (title === "信息" && clean.length <= 2 && numericCount >= 1) return true;
    return false;
  };
  const linesFromSixDimension = (v: any): string[] => {
    if (!v || typeof v !== "object") return [];
    const labels = arr(v.labels).map((x: any) => toText(x)).filter(Boolean);
    const values = arr(v.values).map((x: any) => toText(x)).filter(Boolean);
    const lines: string[] = [];
    const len = Math.max(labels.length, values.length);
    for (let i = 0; i < len; i++) {
      const lb = labels[i] || `维度${i + 1}`;
      const val = values[i];
      if (!lb && !val) continue;
      lines.push(`${lb}：${val || "-"}`);
    }
    if (toText(v.remark)) lines.push(`批注：${toText(v.remark)}`);
    return lines;
  };

  const prettifyKey = (k: string) => keyToTitle.get(k) || labelForKey(k);

  // 固定优先模块 + 后端动态模块（确保不漏返回内容）
  const usedKeys = new Set<string>();
  const moduleOrder: Array<{ key: string; title: string; lines: string[] }> = [];

  for (const p of preferredModules) {
    const mod = (raw as any)?.[p.key];
    if (!mod) continue;
    const nodeLines = flattenNodesToLines(arr(mod?.details?.nodes));
    const plainLines = p.key === "six_dimension" ? linesFromSixDimension(mod) : flattenAnyToLines(mod);
    const merged = uniqueLines([...plainLines, ...nodeLines]);
    if (shouldSkipModule(p.title, merged)) continue;
    moduleOrder.push({ key: p.key, title: p.title, lines: merged });
    usedKeys.add(p.key);
  }

  Object.keys(raw || {}).forEach((k) => {
    if (usedKeys.has(k)) return;
    if (hiddenPdfKeys.has(k)) return;
    const v = (raw as any)[k];
    const nodeLines = v && typeof v === "object" ? flattenNodesToLines(arr((v as any)?.details?.nodes)) : [];
    const plainLines = k === "six_dimension" ? linesFromSixDimension(v) : flattenAnyToLines(v);
    const merged = uniqueLines([...plainLines, ...nodeLines]);
    const title = prettifyKey(k);
    if (shouldSkipModule(title, merged)) return;
    moduleOrder.push({ key: k, title, lines: merged });
  });

  if (!moduleOrder.length) return;

  const visualLineCost = (line: string) => {
    const s = String(line || "").trim();
    if (!s) return 1;
    return Math.max(1, Math.ceil(s.length / 30));
  };
  const splitByLines = (lines: string[], maxLinesPerPage: number) => {
    if (!lines.length) return [[]];
    const pages: string[][] = [];
    let bucket: string[] = [];
    let cost = 0;
    lines.forEach((line) => {
      const lc = visualLineCost(line);
      if (bucket.length && cost + lc > maxLinesPerPage) {
        pages.push(bucket);
        bucket = [];
        cost = 0;
      }
      bucket.push(line);
      cost += lc;
    });
    if (bucket.length) pages.push(bucket);
    return pages;
  };

  // 以 96dpi 折算：A4 = 793.7 x 1122.5 px
  const PAGE_W = 794;
  const PAGE_H = 1123;
  // 分页容量：区分“单章节切分容量”和“页面总容量”
  const MAX_SECTION_LINES_PER_PAGE = 30;
  const MAX_PAGE_COST = 42;

  // 动态加载 pdf 依赖（减少首屏包体积）
  const [{ jsPDF }, html2canvasMod] = await Promise.all([
    import("jspdf"),
    import("html2canvas"),
  ]);
  const html2canvas = (html2canvasMod as any).default || (html2canvasMod as any);

  // 样式只注入一次
  const styleId = "pdf-gen-mystic-style";
  let style = document.getElementById(styleId) as HTMLStyleElement | null;
  if (!style) {
    style = document.createElement("style");
    style.id = styleId;
    document.head.appendChild(style);
  }
  style.textContent = `
      .pdf-gen-page{
        position:absolute;
        width:${PAGE_W}px;
        height:${PAGE_H}px;
        background-size:cover;
        background-position:center;
        font-family: "Songti SC","SimSun","STSong","Noto Serif SC",serif;
        color:#f2e6d8;
      }
      .pdf-gen-panel{
        position:absolute;
        left:48px;
        right:48px;
        top:116px;
        bottom:92px;
        background: rgba(10, 10, 15, 0.62);
        border: 1px solid rgba(212, 175, 55, 0.38);
        border-radius: 16px;
        padding: 30px 28px;
        box-sizing:border-box;
        overflow:hidden;
      }
      .pdf-cover-kicker{
        text-align:center;
        font-size: 12px;
        letter-spacing: .28em;
        color: rgba(212,175,55,0.72);
        margin-bottom: 12px;
      }
      .pdf-cover-title{
        text-align:center;
        font-size: 25px;
        letter-spacing: .16em;
        font-weight: 700;
        color: rgba(212,175,55,0.95);
        margin-bottom: 28px;
      }
      .pdf-name{
        text-align:center;
        font-size: 50px;
        font-weight: 800;
        margin-bottom: 16px;
        color: rgba(242,230,216,0.98);
        text-shadow: 0 0 18px rgba(212,175,55,0.18);
      }
      .pdf-score-row{
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 16px;
        margin-top: 8px;
      }
      .pdf-score{
        font-size: 38px;
        font-weight: 900;
        color: rgba(212,175,55,0.98);
      }
      .pdf-cover-divider{
        width: 210px;
        height: 1px;
        margin: 22px auto 18px;
        background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.7), rgba(212,175,55,0));
      }
      .pdf-cover-seal{
        width: 66px;
        height: 66px;
        margin: 26px auto 0;
        border-radius: 50%;
        border: 1px solid rgba(212,175,55,.34);
        box-shadow: inset 0 0 0 6px rgba(212,175,55,.05);
        display:flex;
        align-items:center;
        justify-content:center;
        color: rgba(212,175,55,.92);
        font-size: 20px;
      }
      .pdf-stars{
        display:flex;
        gap: 8px;
        font-size: 16px;
        color: rgba(212,175,55,0.95);
        letter-spacing: .08em;
      }
      .pdf-dir-title{
        font-size: 20px;
        font-weight: 800;
        letter-spacing: .14em;
        color: rgba(212,175,55,0.95);
        margin-bottom: 12px;
      }
      .pdf-dir-kicker{
        font-size: 11px;
        letter-spacing: .24em;
        color: rgba(212,175,55,.68);
        margin-bottom: 8px;
      }
      .pdf-dir-list{
        margin-top: 6px;
        border-top: 1px solid rgba(212,175,55,.14);
      }
      .pdf-dir-item{
        display:flex;
        align-items:center;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        min-height: 42px;
        padding: 0 4px;
        box-sizing:border-box;
        gap: 8px;
      }
      .pdf-dir-idx{
        width: 68px;
        flex: 0 0 68px;
        font-size: 15px;
        color: rgba(212,175,55,0.96);
        font-weight: 800;
        letter-spacing: .02em;
      }
      .pdf-dir-name{
        flex: 1;
        font-size: 16px;
        color: rgba(232,232,232,0.96);
        font-weight: 700;
        letter-spacing: .04em;
      }
      .pdf-dir-dots{
        flex: 1;
        border-bottom: 1px dashed rgba(212,175,55,.34);
        height: 0;
        transform: translateY(2px);
      }
      .pdf-dir-page{
        width: 62px;
        flex: 0 0 62px;
        text-align:right;
        font-size: 13px;
        color: rgba(226,214,188,0.92);
        font-weight: 700;
        border: 1px solid rgba(212,175,55,.22);
        border-radius: 999px;
        padding: 2px 8px;
        box-sizing: border-box;
        background: rgba(212,175,55,.06);
      }
      .pdf-chapter-bar{
        position:absolute;
        left:48px;
        right:48px;
        top:78px;
        height: 48px;
        border-radius: 12px;
        background: rgba(212,175,55,0.08);
        border: 1px solid rgba(212,175,55,0.24);
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding: 0 22px;
        box-sizing:border-box;
      }
      .pdf-chapter-no{
        font-size: 16px;
        font-weight: 900;
        color: rgba(212,175,55,0.98);
        margin-right: 14px;
      }
      .pdf-chapter-title{
        font-size: 16px;
        font-weight: 800;
        color: rgba(242,230,216,0.98);
      }
      .pdf-content-pre{
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 13px;
        line-height: 1.85;
        color: rgba(226,226,226,0.94);
      }
      .pdf-flow-wrap{
        display:block;
      }
      .pdf-flow-section{
        margin-bottom: 10px;
        border-radius: 10px;
        border: 1px solid rgba(212,175,55,0.16);
        background: rgba(11,16,38,0.55);
        overflow: hidden;
      }
      .pdf-flow-section:last-child{
        margin-bottom:0;
      }
      .pdf-flow-head{
        height: 38px;
        display:flex;
        align-items:center;
        gap:10px;
        padding: 0 14px;
        border-bottom: 1px solid rgba(212,175,55,0.16);
        background: linear-gradient(90deg, rgba(212,175,55,0.12), rgba(212,175,55,0.03));
      }
      .pdf-flow-bullet{
        color: rgba(212,175,55,0.96);
        font-size: 15px;
      }
      .pdf-flow-title{
        color: rgba(245,236,218,0.98);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: .05em;
      }
      .pdf-flow-body{
        padding: 10px 14px 12px;
      }
      .pdf-flow-line{
        font-size: 15px;
        line-height: 1.72;
        color: rgba(228,230,238,0.95);
        margin-bottom: 2px;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
      }
      .pdf-page-footer{
        position:absolute;
        left:48px;
        right:48px;
        bottom:42px;
        height:24px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:12px;
        color:rgba(210,210,210,.72);
        letter-spacing:.04em;
      }
      .pdf-footer-line{
        position:absolute;
        left:48px;
        right:48px;
        bottom:70px;
        height:1px;
        background:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.45),rgba(212,175,55,0));
      }
    `;

  const wrapper = document.createElement("div");
  wrapper.style.position = "fixed";
  wrapper.style.left = "-100000px";
  wrapper.style.top = "0";
  wrapper.style.zIndex = "-1";
  wrapper.style.width = "0";
  wrapper.style.height = "0";
  document.body.appendChild(wrapper);

  try {
    const pages: HTMLElement[] = [];
    const bgUrl = pdfBgUrl;

    const createPageEl = (idx: number) => {
      const el = document.createElement("div");
      el.className = "pdf-gen-page";
      el.style.left = `${idx * 2}px`;
      el.style.top = `${idx * 2}px`;
      (el.style as any).backgroundImage = `url(${bgUrl})`;
      wrapper.appendChild(el);
      pages.push(el);
      return el;
    };
    const appendFooter = (el: HTMLElement, pageNo: number, label = "测名详解报告") => {
      const footer = document.createElement("div");
      footer.className = "pdf-page-footer";
      footer.innerHTML = `<div>${escapeHtml(label)}</div><div>第 ${pageNo} 页</div>`;
      const line = document.createElement("div");
      line.className = "pdf-footer-line";
      el.appendChild(line);
      el.appendChild(footer);
    };

    // 1) 封面页
    const coverEl = createPageEl(0);
    coverEl.innerHTML = `
    <div class="pdf-gen-panel">
      <div class="pdf-cover-kicker">玄 · 命 · 精 · 解</div>
      <div class="pdf-cover-title">测名详解报告</div>
      <div class="pdf-name">${escapeHtml(measuredName || "未命名")}</div>
      <div style="text-align:center;color:rgba(226,226,226,0.92);font-size:14px;margin-bottom:18px;">易经数理 · 五行生克 · 三才五格</div>
      <div class="pdf-cover-divider"></div>
      <div class="pdf-score-row">
        <div class="pdf-score">${escapeHtml(String(score))}</div>
        <div class="pdf-stars">${"★".repeat(Math.max(0, Math.min(5, Number(starRating) || 0)))}${"☆".repeat(Math.max(0, 5 - Math.max(0, Math.min(5, Number(starRating) || 0))))}</div>
      </div>
      <div class="pdf-cover-seal">玄</div>
    </div>
  `;
    appendFooter(coverEl, 1, "测名详解报告 · 封面");

    // 2) 目录页（先占位，pageNo 在后面计算后再重建）
    const dirEl = createPageEl(1);
    dirEl.innerHTML = `
    <div class="pdf-gen-panel">
      <div class="pdf-dir-title">目录</div>
      <div class="pdf-content-pre">${escapeHtml("正在生成目录...")}</div>
    </div>
  `;

    // 3) 分章分页：章节结束后可无缝衔接下一章，避免留白过多
    let currentPageNo = 3; // 封面=1，目录=2，所以正文从 3 开始
    const dirItems: Array<{ no: number; title: string; start: number; end: number }> = [];
    type ChapterSection = { chapterNo: number; title: string; lines: string[]; continued?: boolean };
    type ContentPage = { sections: ChapterSection[]; used: number };
    const contentPages: ContentPage[] = [];
    const sectionCost = (lines: string[]) => {
      const bodyCost = lines.reduce((sum, line) => sum + visualLineCost(line), 0);
      // 节标题+边距固定开销
      return bodyCost + 6;
    };

    let chapterCounter = 0;
    for (const m of moduleOrder) {
      chapterCounter += 1;
      const chapterNo = chapterCounter;
      const lines = Array.isArray(m.lines) ? m.lines : [];
      if (!lines.length) continue;
      const chunks = splitByLines(lines, MAX_SECTION_LINES_PER_PAGE);
      const startPage = currentPageNo;

      chunks.forEach((chunkLines, chunkIdx) => {
        const section: ChapterSection = {
          chapterNo,
          title: m.title,
          lines: chunkLines,
          continued: chunkIdx > 0,
        };
        const cost = sectionCost(chunkLines);
        const prevPage = contentPages[contentPages.length - 1];
        const canAppend =
          !!prevPage &&
          prevPage.used + cost <= MAX_PAGE_COST;
        if (canAppend) {
          prevPage.sections.push(section);
          prevPage.used += cost;
        } else {
          contentPages.push({ sections: [section], used: cost });
          currentPageNo += 1;
        }
      });

      const endPage = Math.max(startPage, currentPageNo - 1);
      dirItems.push({ no: chapterNo, title: m.title, start: startPage, end: endPage });
    }

    // 重建目录页内容
    const dirHtml = `
      <div class="pdf-dir-list">
        ${dirItems
          .map((it) => {
            const idxText = `第${it.no}章`;
            const pageText = it.start === it.end ? `${it.start}` : `${it.start}-${it.end}`;
            return `<div class="pdf-dir-item">
              <div class="pdf-dir-idx">${escapeHtml(idxText)}</div>
              <div class="pdf-dir-name">${escapeHtml(it.title)}</div>
              <div class="pdf-dir-dots"></div>
              <div class="pdf-dir-page">${escapeHtml(pageText)}</div>
            </div>`;
          })
          .join("")}
      </div>
    `;
    dirEl.innerHTML = `
      <div class="pdf-gen-panel">
        <div class="pdf-dir-kicker">卷 一 · 纲 目</div>
        <div class="pdf-dir-title">目录</div>
        ${dirHtml}
      </div>
    `;
    appendFooter(dirEl, 2, "测名详解报告 · 目录");

    // 创建内容页 DOM（同页可容纳多个章节）
    contentPages.forEach((page, i) => {
      const el = createPageEl(2 + i);
      const sectionsHtml = page.sections
        .map((section) => {
          const sectionTitle = `第${section.chapterNo}章 ${section.title}${section.continued ? "（续）" : ""}`;
          const linesHtml = section.lines
            .map((ln) => `<div class="pdf-flow-line">${escapeHtml(ln || " ")}</div>`)
            .join("");
          return `<div class="pdf-flow-section">
            <div class="pdf-flow-head">
              <div class="pdf-flow-bullet">✧</div>
              <div class="pdf-flow-title">${escapeHtml(sectionTitle)}</div>
            </div>
            <div class="pdf-flow-body">${linesHtml}</div>
          </div>`;
        })
        .join("");
      el.innerHTML = `
        <div class="pdf-gen-panel">
          <div class="pdf-flow-wrap">${sectionsHtml}</div>
        </div>
      `;
      appendFooter(el, 3 + i);
    });

    // 捕获页面并写入 PDF
    const doc = new jsPDF({ unit: "pt", format: "a4" });
    const pageW = doc.internal.pageSize.getWidth();
    const pageH = doc.internal.pageSize.getHeight();
    // 提速关键：降低渲染倍率并使用 JPEG，通常可显著减少导出耗时
    const renderScale = Math.min(1.45, Math.max(1.15, Number((window as any)?.devicePixelRatio || 1)));
    const jpegQuality = 0.86;

    const renderPageCanvasSafely = async (sourceEl: HTMLElement): Promise<HTMLCanvasElement> => {
      try {
        return await html2canvas(sourceEl, {
          scale: renderScale,
          useCORS: true,
          allowTaint: true,
          backgroundColor: "#0a0a0f",
          logging: false, // 关闭 html2canvas 大量控制台日志
        });
      } catch (err: any) {
        const msg = String(err?.message || err || "");
        // html2canvas 偶发：createPattern 传入 0x0 canvas，重试时移除背景图规避
        if (!msg.includes("createPattern")) throw err;

        const cloned = sourceEl.cloneNode(true) as HTMLElement;
        const list = [cloned, ...Array.from(cloned.querySelectorAll("*"))] as HTMLElement[];
        list.forEach((node) => {
          node.style.backgroundImage = "none";
        });
        cloned.style.position = "absolute";
        cloned.style.left = "-99999px";
        cloned.style.top = "0";
        document.body.appendChild(cloned);
        try {
          return await html2canvas(cloned, {
            scale: renderScale,
            useCORS: true,
            allowTaint: true,
            backgroundColor: "#0a0a0f",
            logging: false,
          });
        } finally {
          cloned.remove();
        }
      }
    };

    for (let i = 0; i < pages.length; i++) {
      const canvas = await renderPageCanvasSafely(pages[i]);
      const imgData = canvas.toDataURL("image/jpeg", jpegQuality);
      if (i > 0) doc.addPage();
      doc.addImage(imgData, "JPEG", 0, 0, pageW, pageH, undefined, "FAST");
    }

    // 下载到本地
    const safeName = measuredName ? measuredName.replace(/[\\\\/:*?\"<>|]/g, "_") : "测名详解";
    doc.save(`${safeName}-测名详解.pdf`);
    uni.showToast({ title: "PDF下载成功", icon: "success" });
  } catch (e) {
    console.error("生成PDF失败:", e);
    uni.showToast({ title: "PDF下载失败", icon: "none" });
  } finally {
    // 清理 DOM
    wrapper.remove();
    uni.hideLoading();
  }
};

const stars = Array.from({ length: 24 }, (_, i) => ({
  id: i + 1,
  top: `${Math.random() * 100}%`,
  left: `${Math.random() * 100}%`,
  size: Math.random() * 2 + 1,
  duration: Math.random() * 4 + 3,
  delay: Math.random() * 4,
}));
</script>

<style scoped>
.test-name-detail {
  min-height: 100vh;
  background: #0a0a0f;
  position: relative;
  color: #e2e2e2;
}

.detail-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-header-back {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #a0a0a0;
}

.back-icon {
  font-size: 24px;
  margin-right: 8rpx;
}
.back-text {
  font-size: 14px;
  letter-spacing: 0.1em;
}

.detail-header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.3em;
  pointer-events: none;
}

.detail-header-placeholder { width: 80rpx; }

.detail-header-download {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
  padding: 10rpx 16rpx;
  border-radius: 999rpx;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.10);
  color: rgba(255, 242, 210, 0.92);
  backdrop-filter: blur(8px);
}

.detail-header-download-icon {
  font-size: 18px;
  line-height: 1;
}

.detail-header-download-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.detail-content {
  position: relative;
  z-index: 10;
  padding: 180rpx 32rpx 60rpx;
  height: 100vh;
  box-sizing: border-box;
}

.clickable { cursor: pointer; }

.score-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8rpx;
  padding: 48rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 48rpx;
}

.score-label {
  font-size: 10px;
  color: #d4af37;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 16rpx;
}

.score-corner {
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  border-color: #d4af37;
  border-style: solid;
}
.score-corner-tl { top: 0; left: 0; border-width: 4rpx 0 0 4rpx; }
.score-corner-tr { top: 0; right: 0; border-width: 4rpx 4rpx 0 0; }
.score-corner-bl { bottom: 0; left: 0; border-width: 0 0 4rpx 4rpx; }
.score-corner-br { bottom: 0; right: 0; border-width: 0 4rpx 4rpx 0; }

.score-value-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280rpx;
  height: 280rpx;
  margin-bottom: 16rpx;
}

.score {
  position: relative;
  z-index: 2;
  font-size: 72px;
  font-weight: 700;
  background: linear-gradient(to bottom, #d4af37, #8a6e1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.score-ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(212, 175, 55, 0.2);
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}

.score-bagua-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.score-yinyang-bg {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  opacity: 0.11;
  background:
    radial-gradient(circle at 50% 25%, rgba(12, 14, 28, 0.95) 11%, transparent 11.5%),
    radial-gradient(circle at 50% 75%, rgba(212, 175, 55, 0.55) 11%, transparent 11.5%),
    linear-gradient(90deg, rgba(12, 14, 28, 0.98) 50%, rgba(212, 175, 55, 0.35) 50%);
  box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.08);
  animation: scoreYinyangSpin 48s linear infinite reverse;
}

.score-rune-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.score-rune-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 224, 160, 0.95);
  box-shadow:
    0 0 6px rgba(255, 210, 120, 0.85),
    0 0 14px rgba(212, 175, 55, 0.35);
  animation: scoreRuneTwinkle 2.8s ease-in-out infinite;
}

.score-rune-dot:nth-child(1) { top: 12%; left: 38%; animation-delay: 0s; }
.score-rune-dot:nth-child(2) { top: 22%; right: 14%; animation-delay: 0.4s; }
.score-rune-dot:nth-child(3) { top: 48%; left: 8%; animation-delay: 0.8s; }
.score-rune-dot:nth-child(4) { bottom: 18%; left: 22%; animation-delay: 1.1s; }
.score-rune-dot:nth-child(5) { bottom: 12%; right: 28%; animation-delay: 0.2s; }
.score-rune-dot:nth-child(6) { top: 62%; right: 10%; animation-delay: 1.5s; }
.score-rune-dot:nth-child(7) { top: 8%; right: 42%; animation-delay: 0.6s; }
.score-rune-dot:nth-child(8) { bottom: 38%; right: 6%; animation-delay: 1.9s; }

.score-rune-glyph {
  position: absolute;
  font-size: 9px;
  color: rgba(212, 175, 55, 0.55);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
  animation: scoreRuneDrift 6s ease-in-out infinite;
}

.score-rune-glyph:nth-child(9) { top: 28%; left: 18%; animation-delay: 0s; }
.score-rune-glyph:nth-child(10) { top: 18%; right: 22%; animation-delay: 1.2s; }
.score-rune-glyph:nth-child(11) { bottom: 28%; right: 16%; animation-delay: 2.1s; }
.score-rune-glyph:nth-child(12) { bottom: 20%; left: 14%; animation-delay: 0.7s; }

.score-bagua-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 42%, rgba(7, 12, 30, 0) 72%);
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.06);
}

.score-bagua-ring-2 {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.08);
}

.score-bagua-symbols {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: rotate 26s linear infinite;
}

.score-bagua-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(212, 175, 55, 0.65);
  font-size: 11px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
  transform-origin: 0 -134px;
}

.score-bagua-symbol:nth-child(1) { transform: rotate(0deg) translateY(-134px) rotate(0deg); }
.score-bagua-symbol:nth-child(2) { transform: rotate(45deg) translateY(-134px) rotate(-45deg); }
.score-bagua-symbol:nth-child(3) { transform: rotate(90deg) translateY(-134px) rotate(-90deg); }
.score-bagua-symbol:nth-child(4) { transform: rotate(135deg) translateY(-134px) rotate(-135deg); }
.score-bagua-symbol:nth-child(5) { transform: rotate(180deg) translateY(-134px) rotate(-180deg); }
.score-bagua-symbol:nth-child(6) { transform: rotate(225deg) translateY(-134px) rotate(-225deg); }
.score-bagua-symbol:nth-child(7) { transform: rotate(270deg) translateY(-134px) rotate(-270deg); }
.score-bagua-symbol:nth-child(8) { transform: rotate(315deg) translateY(-134px) rotate(-315deg); }

.score-stars {
  display: flex;
  justify-content: center;
  gap: 8rpx;
  margin-bottom: 24rpx;
}
.score-star { font-size: 14px; color: #5a5a5a; }
.score-star.active { color: #d4af37; }

.score-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.3), transparent);
  margin: 16rpx 0;
}

.name {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #e2e2e2;
  letter-spacing: 0.2em;
  margin-top: 16rpx;
  margin-bottom: 8rpx;
}
.quote {
  display: block;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1.8;
}

.detail-entry {
  margin-top: 16rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
}

.sixdim-entry {
  margin-top: -20rpx;
  margin-left: 24rpx;
}

.detail-entry-text {
  font-size: 11px;
  color: #d4af37;
  letter-spacing: 0.08em;
}

.score-mystic-ornaments {
  display: none;
}

/* —— 玄幻古风：模块外框 —— */
.mystic-score-card {
  position: relative;
  overflow: visible;
  background:
    linear-gradient(155deg, rgba(28, 32, 56, 0.95) 0%, rgba(14, 18, 36, 0.92) 45%, rgba(18, 22, 42, 0.96) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16rpx;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.12) inset,
    0 16rpx 56rpx rgba(0, 0, 0, 0.5),
    0 0 40rpx rgba(120, 90, 200, 0.12);
  backdrop-filter: blur(14px);
}

.mystic-score-card__glow {
  pointer-events: none;
  position: absolute;
  inset: -2rpx;
  border-radius: 18rpx;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.18), transparent 55%);
  opacity: 0.85;
}

.mystic-panel {
  position: relative;
  margin-bottom: 48rpx;
  padding: 28rpx 24rpx 32rpx;
  border-radius: 16rpx;
  background: linear-gradient(160deg, rgba(22, 26, 48, 0.92) 0%, rgba(10, 12, 28, 0.94) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.1) inset,
    0 12rpx 48rpx rgba(0, 0, 0, 0.42),
    0 0 32rpx rgba(80, 60, 140, 0.1);
  backdrop-filter: blur(12px);
}

.mystic-panel::before {
  content: "";
  position: absolute;
  inset: 10rpx;
  border-radius: 12rpx;
  border: 1px solid rgba(212, 175, 55, 0.14);
  pointer-events: none;
}

.mystic-panel--extra {
  opacity: 0.98;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.22);
}

.mystic-section-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 22rpx;
  padding-bottom: 18rpx;
  border-bottom: none;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent) bottom / 100% 1px no-repeat;
}

.section-glyph {
  flex-shrink: 0;
  min-width: 56rpx;
  padding: 6rpx 10rpx;
  text-align: center;
  font-size: 22rpx;
  font-weight: 700;
  color: #c9a227;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.06));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8rpx;
  box-shadow: 0 0 16rpx rgba(212, 175, 55, 0.12);
}

.mystic-inner-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(212, 175, 55, 0.18) !important;
  border-radius: 12rpx !important;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.25);
}

.mystic-inner-card--flush {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.section { margin-bottom: 48rpx; }
.mystic-panel.section {
  margin-bottom: 48rpx;
}
.section-title { display: flex; align-items: center; margin-bottom: 24rpx; padding-left: 8rpx; }
.section-icon { font-size: 16px; color: #d4af37; margin-right: 12rpx; }
.section-text {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #f0e8d8;
  letter-spacing: 0.18em;
  text-shadow: 0 0 20rpx rgba(212, 175, 55, 0.2);
}
.section-detail-tip {
  margin-left: auto;
  font-size: 11px;
  color: #c9a227;
  opacity: 0.9;
  letter-spacing: 0.14em;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 32rpx;
}

.line {
  display: block;
  font-size: 14px;
  color: #a0a0a0;
  line-height: 1.8;
  margin-bottom: 10rpx;
}
.line-strong { color: #e2e2e2; font-weight: 700; }

.meaning-card {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.meaning-quote {
  position: absolute;
  top: 8rpx;
  right: 20rpx;
  font-size: 56px;
  line-height: 1;
  color: rgba(212, 175, 55, 0.18);
  font-family: "Songti SC", "SimSun", serif;
}
.meaning-label { display: block; font-size: 14px; font-weight: 700; color: #d4af37; margin-bottom: 16rpx; }
.meaning-text { display: block; font-size: 14px; color: #a0a0a0; line-height: 1.8; margin-bottom: 16rpx; }
.meaning-judge { display: flex; flex-wrap: wrap; }
.meaning-judge-label { font-size: 14px; color: #d4af37; }
.meaning-judge-text { font-size: 14px; color: #a0a0a0; }

.zodiac-card {
  background: linear-gradient(to right, #16213e, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 32rpx;
}
.zodiac-header { display: flex; align-items: center; margin-bottom: 8rpx; }
.zodiac-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.zodiac-icon { font-size: 24px; }
.zodiac-info { flex: 1; }
.zodiac-label { display: block; font-size: 12px; color: #a0a0a0; margin-bottom: 4rpx; }
.zodiac-value { display: block; font-size: 16px; font-weight: 700; color: #e2e2e2; }
.zodiac-score { font-size: 24px; font-weight: 700; color: #d4af37; }

.info-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 32rpx;
}

.wuge-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 32rpx;
}
.wuxing-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 32rpx;
}

.trait-line {
  display: block;
  font-size: 13px;
  color: #a0a0a0;
  line-height: 1.65;
  margin-top: 8rpx;
}

.wuxing-adapt-grid,
.zodiac-adapt-grid {
  margin: 10rpx 0 12rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.wuxing-adapt-item,
.zodiac-adapt-item {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: #b8b8b8;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 12rpx;
  padding: 8rpx 12rpx;
}

.wuxing-adapt-label,
.zodiac-adapt-label {
  display: inline-block;
  margin-right: 10rpx;
  color: #d4af37;
  font-weight: 700;
  font-size: 12px;
}

.career-milestone {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.career-milestone:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.lucky-color-row {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  margin-bottom: 12rpx;
}

.lucky-color-swatch {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6rpx;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.lucky-color-text {
  flex: 1;
  margin-bottom: 0;
}

.bottom-spacer { height: 80rpx; }

.modal-mask {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(212, 175, 55, 0.12), transparent 55%),
    radial-gradient(900px 520px at 20% 80%, rgba(88, 120, 210, 0.10), transparent 55%),
    rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  z-index: 1000;
}

.detail-modal {
  width: min(720rpx, 92vw);
  max-height: 72vh;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.34);
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(212, 175, 55, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(18, 16, 36, 0.985), rgba(8, 10, 18, 0.99));
  box-shadow:
    0 16rpx 52rpx rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.14) inset,
    0 0 38rpx rgba(212, 175, 55, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
}

.detail-modal-orn {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  pointer-events: none;
  opacity: 0.65;
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.34), transparent 55%),
    linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0.08));
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  padding: 6rpx;
  border-radius: 8rpx;
  box-shadow: 0 0 14rpx rgba(212, 175, 55, 0.08);
}

.detail-modal-orn--tl { top: 8rpx; left: 8rpx; transform: rotate(0deg); }
.detail-modal-orn--tr { top: 8rpx; right: 8rpx; transform: rotate(90deg); }
.detail-modal-orn--bl { bottom: 8rpx; left: 8rpx; transform: rotate(-90deg); }
.detail-modal-orn--br { bottom: 8rpx; right: 8rpx; transform: rotate(180deg); }

.detail-modal-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14rpx 16rpx 12rpx;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  background:
    linear-gradient(90deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02), rgba(212, 175, 55, 0.10));
  position: relative;
}

.detail-modal-card::after {
  content: "";
  position: absolute;
  left: 16rpx;
  right: 16rpx;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
  opacity: 0.45;
}

.modal-title {
  font-size: 14px;
  color: #f4e6c8;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10rpx rgba(212, 175, 55, 0.16);
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10rpx;
  min-width: 0;
}

.modal-title-seal {
  width: 30rpx;
  height: 30rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rpx;
  font-weight: 800;
  color: rgba(255, 242, 210, 0.96);
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.34), rgba(212, 175, 55, 0.10));
  border: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.1) inset,
    0 6rpx 12rpx rgba(0, 0, 0, 0.18);
}

.close {
  width: 30rpx;
  height: 30rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 242, 210, 0.88);
  line-height: 1;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.02) 58%, transparent 72%),
    rgba(0, 0, 0, 0.16);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.08) inset,
    0 4rpx 10rpx rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
}

.detail-modal-body {
  max-height: calc(72vh - 70rpx);
  padding: 14rpx 16rpx 18rpx;
}

.node {
  margin-bottom: 12rpx;
  padding: 10rpx 10rpx 8rpx;
  border-radius: 8rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(212, 175, 55, 0.08);
}

.node:last-child {
  margin-bottom: 0;
}

.detail-modal-body .line {
  color: rgba(228, 232, 244, 0.86);
  margin-bottom: 8rpx;
  line-height: 1.65;
}

.detail-modal-body .line-strong {
  color: rgba(255, 246, 224, 0.94);
}

/* 桌面端：使用固定像素上限，避免 rpx 导致弹窗接近满屏 */
.test-name-detail--desktop .modal-mask {
  padding: 20px;
}

.test-name-detail--desktop .detail-modal {
  width: min(760px, 68vw);
  max-width: 760px;
  max-height: 74vh;
  border-radius: 14px;
}

.test-name-detail--desktop .detail-modal-card {
  padding: 12px 14px 10px;
}

.test-name-detail--desktop .detail-modal-body {
  max-height: calc(74vh - 64px);
  padding: 12px 14px 16px;
}

.test-name-detail--desktop .close {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.starry-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, #050508, #10101a, #1a1a2e);
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.2;
  animation: twinkle ease-in-out infinite;
}

.glow-top {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: #2a3d5d;
  opacity: 0.2;
  filter: blur(100px);
  border-radius: 50%;
}

.glow-bottom {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: #9c2a2a;
  opacity: 0.1;
  filter: blur(100px);
  border-radius: 50%;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scoreYinyangSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scoreRuneTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes scoreRuneDrift {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-3px); }
}

/* —— 电脑端（/test-name-live）：双列排版 + 登录页同系玻璃金边，减少纵向滚动 —— */
.test-name-detail--desktop {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #070a12 0%, #12102a 42%, #0a1628 100%);
  color: #e8e4dc;
}

.test-name-detail--desktop .starry-bg {
  opacity: 0.28;
}

.test-name-detail--desktop .detail-header {
  background: rgba(15, 23, 42, 0.72);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(12px);
  padding: 12px 18px !important;
}

.test-name-detail--desktop .detail-header-title {
  color: #f2e6d8;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.22);
}

.test-name-detail--desktop .detail-header-back {
  color: #d4af37;
}

.test-name-detail--desktop .detail-content--desktop {
  flex: 1;
  min-height: 0;
  height: auto !important;
  max-height: none;
  box-sizing: border-box;
  padding: 92px 14px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
  /* 桌面端：内容宽度缩成约一半，居中更舒服 */
  max-width: 660px !important;
  margin: 0 auto !important;
}

.test-name-detail--desktop .score-card {
  grid-column: auto;
  margin-bottom: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

/* 桌面端：缩小“分数”模块，避免过大导致空旷 */
.test-name-detail--desktop .score-label {
  font-size: 8px !important;
  margin-bottom: 6rpx !important;
}

.test-name-detail--desktop .score-value-wrap {
  width: 184rpx !important;
  height: 184rpx !important;
  margin-bottom: 6rpx !important;
}

.test-name-detail--desktop .score-ring {
  border-width: 1px !important;
  border-style: dashed !important;
  border-color: rgba(255, 224, 160, 0.62) !important;
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.35),
    0 0 36px rgba(212, 175, 55, 0.12),
    inset 0 0 14px rgba(255, 224, 160, 0.08);
}

.test-name-detail--desktop .score-bagua-ring-2 {
  border-color: rgba(255, 224, 160, 0.42) !important;
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.28),
    inset 0 0 10px rgba(212, 175, 55, 0.06) !important;
}

.test-name-detail--desktop .score-yinyang-bg {
  opacity: 0.15;
  inset: 20% !important;
}

.test-name-detail--desktop .score-rune-dot {
  width: 2px;
  height: 2px;
}

.test-name-detail--desktop .score-rune-glyph {
  font-size: 8px;
}

.test-name-detail--desktop .score-bagua-symbol {
  font-size: 10px;
  transform-origin: 0 -88px;
}

.test-name-detail--desktop .score-bagua-symbol:nth-child(1) { transform: rotate(0deg) translateY(-88px) rotate(0deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(2) { transform: rotate(45deg) translateY(-88px) rotate(-45deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(3) { transform: rotate(90deg) translateY(-88px) rotate(-90deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(4) { transform: rotate(135deg) translateY(-88px) rotate(-135deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(5) { transform: rotate(180deg) translateY(-88px) rotate(-180deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(6) { transform: rotate(225deg) translateY(-88px) rotate(-225deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(7) { transform: rotate(270deg) translateY(-88px) rotate(-270deg); }
.test-name-detail--desktop .score-bagua-symbol:nth-child(8) { transform: rotate(315deg) translateY(-88px) rotate(-315deg); }

.test-name-detail--desktop .score {
  font-size: 44px !important;
}

.test-name-detail--desktop .score-stars {
  gap: 4rpx !important;
  margin-bottom: 8rpx !important;
}

.test-name-detail--desktop .score-star {
  font-size: 10px !important;
}

.test-name-detail--desktop .score-divider {
  margin: 8rpx 0 !important;
}

.test-name-detail--desktop .name {
  font-size: 18px !important;
  margin-top: 6rpx !important;
  margin-bottom: 4rpx !important;
}

.test-name-detail--desktop .quote {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.test-name-detail--desktop .detail-entry {
  margin-top: 10rpx !important;
  padding: 6rpx 14rpx !important;
}

.test-name-detail--desktop .score-mystic-ornaments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 2px;
}

.test-name-detail--desktop .score-mystic-line {
  width: min(320px, 72%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
}

.test-name-detail--desktop .score-mystic-bagua {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(212, 175, 55, 0.9);
}

.test-name-detail--desktop .score-mystic-symbol {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.test-name-detail--desktop .score-mystic-dot {
  font-size: 10px;
  color: rgba(212, 175, 55, 0.45);
}

.test-name-detail--desktop .score-mystic-sigil {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
}

.test-name-detail--desktop .score-mystic-sigil-text {
  font-size: 12px;
  color: #d4af37;
}

.test-name-detail--desktop .detail-entry-text {
  font-size: 10px !important;
}

.test-name-detail--desktop .section {
  margin-bottom: 0 !important;
}

.test-name-detail--desktop .detail-content--desktop > .section {
  order: 999;
}

.test-name-detail--desktop .detail-content--desktop > .score-card {
  order: 1;
}

.test-name-detail--desktop .module-order-1 {
  order: 1;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-2 {
  order: 2;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-3 {
  order: 3;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-4 {
  order: 4;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-5 {
  order: 5;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-6 {
  order: 6;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-7 {
  order: 7;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-8 {
  order: 8;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-9 {
  order: 9;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-10 {
  order: 10;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-11 {
  order: 11;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-12 {
  order: 12;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-13 {
  order: 13;
}
.test-name-detail--desktop .detail-content--desktop > .section.module-order-14 {
  order: 14;
}

.test-name-detail--desktop .section--desktop-wide {
  grid-column: 1 / -1;
}

/* 六维格局：电脑端不再超大占位，保持与其它卡片一致密度 */
.test-name-detail--desktop .section--sixdim-compact {
  grid-column: auto;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-section) {
  margin-bottom: 0 !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-bar) {
  margin-bottom: 6px !important;
  gap: 8rpx !important;
  padding: 0 2rpx !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-icon-grid) {
  width: 20rpx !important;
  height: 20rpx !important;
  gap: 1.5rpx !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-icon-dot) {
  width: 4rpx !important;
  height: 4rpx !important;
  border-radius: 1.5rpx !important;
  opacity: 0.8;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-bar-title) {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  color: rgba(246, 236, 209, 0.95) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.22);
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-card) {
  padding: 8px 8px 6px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.48) !important;
  border: 1px solid rgba(212, 175, 55, 0.16) !important;
  backdrop-filter: blur(8px);
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-radar) {
  max-width: 170rpx !important;
  padding-top: 0 !important;
  height: 236px !important;
  border-radius: 12rpx !important;
  border: 1px solid rgba(212, 175, 55, 0.14);
  background:
    radial-gradient(circle at 50% 48%, rgba(245, 186, 54, 0.14), rgba(245, 186, 54, 0.02) 42%, transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 0 14px rgba(212, 175, 55, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.24);
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-echart-inner) {
  top: 0 !important;
  inset: 0 !important;
  height: 100% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-radar-svg) {
  opacity: 0.84;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-radar-svg polygon) {
  stroke: rgba(212, 220, 236, 0.58) !important;
  stroke-width: 0.58 !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-radar-fill) {
  inset: 31% !important;
  background: linear-gradient(180deg, rgba(255, 205, 96, 0.86), rgba(230, 129, 38, 0.72)) !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 6px rgba(244, 176, 61, 0.2));
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label) {
  font-size: 12rpx !important;
  color: rgba(228, 232, 244, 0.84) !important;
  text-shadow: 0 0 6px rgba(95, 126, 196, 0.14);
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-0) {
  top: 10% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-1),
.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-5) {
  top: 29% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-1) {
  right: 11% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-5) {
  left: 11% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-2),
.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-4) {
  bottom: 30% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-2) {
  right: 9% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-4) {
  left: 9% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-label-3) {
  bottom: 8% !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-remark-center) {
  margin-top: 6px !important;
  padding: 0 4px !important;
}

.test-name-detail--desktop .section--sixdim-compact :deep(.sixdim-remark) {
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

.test-name-detail--desktop .section-title,
.test-name-detail--desktop .mystic-section-title {
  margin-bottom: 6px !important;
  padding-bottom: 4px !important;
  border-bottom: none !important;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.22), transparent) bottom / 100% 1px no-repeat !important;
}

.test-name-detail--desktop .section-text {
  font-size: 16px !important;
  letter-spacing: 0.12em !important;
}

.test-name-detail--desktop .section-detail-tip {
  font-size: 12px !important;
  opacity: 0.75;
}

.test-name-detail--desktop .meaning-card,
.test-name-detail--desktop .zodiac-card,
.test-name-detail--desktop .info-card,
.test-name-detail--desktop .wuge-card,
.test-name-detail--desktop .wuxing-card,
.test-name-detail--desktop .mystic-inner-card {
  padding: 12px 14px !important;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(15, 23, 42, 0.45)) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  backdrop-filter: blur(8px);
  margin-bottom: 0 !important;
}

.test-name-detail--desktop .mystic-inner-card--flush {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.test-name-detail--desktop .mystic-panel {
  padding: 14px 16px 16px !important;
  border-radius: 12px;
}

.test-name-detail--desktop .section-glyph {
  min-width: 36px;
  font-size: 13px;
  padding: 4px 8px;
}

.test-name-detail--desktop .line {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.test-name-detail--desktop .name {
  font-size: 22px !important;
}

.test-name-detail--desktop .quote {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.test-name-detail--desktop .bottom-spacer {
  display: none;
}

@media (min-width: 1200px) {
  .test-name-detail--desktop .detail-content--desktop {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .test-name-detail--desktop .score-card {
    grid-column: auto;
  }

  /* 六维格局：三列大屏下占两列，避免单列显得突兀/空旷 */
  .test-name-detail--desktop .section--sixdim-compact {
    grid-column: auto;
  }
}
</style>