<template>
  <view class="analysis-result">
    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder"></view>

    <!-- Header -->
    <view class="analysis-header">
      <button class="analysis-header-btn" @click="$emit('back')">
        <text class="analysis-header-arrow">‹</text>
        <text>返回</text>
      </button>
      <text class="analysis-header-title">姓名分析</text>
      <button class="analysis-header-btn">
        <text class="analysis-header-share">⋯</text>
      </button>
    </view>

    <!-- Content Scroll -->
    <scroll-view scroll-y class="analysis-content">
      <!-- 1. 总分卡片 -->
      <view class="score-card" @click="openModal('score')">
        <view class="score-card-corner score-card-corner-tl"></view>
        <view class="score-card-corner score-card-corner-tr"></view>
        <view class="score-card-corner score-card-corner-bl"></view>
        <view class="score-card-corner score-card-corner-br"></view>

        <view class="score-card-content">
          <text class="score-card-label">TOTAL SCORE</text>
          <view class="score-card-rotation">
            <view class="score-card-ring"></view>
            <text class="score-card-rotation-text">93</text>
          </view>
          <view class="score-card-stars">
            <text v-for="i in 5" :key="i" class="score-card-star" :class="{ filled: i <= 4 }">★</text>
          </view>
          <view class="score-card-divider"></view>
          <text class="score-card-name">云帆</text>
          <text class="score-card-poem">"长风破浪会有时，直挂云帆济沧海"</text>
        </view>
      </view>

      <!-- 2. 字义与生肖解析 -->
      <view class="section" @click="openModal('meaning')">
        <view class="section-title">
          <text class="section-title-icon">📖</text>
          <text class="section-title-text">字义与生肖解析</text>
        </view>

        <!-- 组合意象 -->
        <view class="meaning-card">
          <view class="meaning-card-quote">❝</view>
          <text class="meaning-card-title">组合意象</text>
          <text class="meaning-card-text">
            <text class="highlight">云</text>者，高远洁白，逍遥自在；<text
              class="highlight">帆</text>者，借风远航，志在四方。二字组合，动静结合，既有高远的志向，又有脚踏实地、乘风破浪的行动力。

            <text class="meaning-card-judge">判断：</text>二字搭配极佳，音律平仄相间（阳平配阴平），朗朗上口，寓意积极向上，无消极晦涩之义。
          </text>
        </view>

        <!-- 生肖喜忌 -->
        <view class="zodiac-card">
          <view class="zodiac-card-header">
            <view class="zodiac-card-left">
              <view class="zodiac-icon">🐇</view>
              <view class="zodiac-info">
                <text class="zodiac-label">生肖适配度</text>
                <text class="zodiac-value">属兔 · 喜用</text>
              </view>
            </view>
            <text class="zodiac-score">95分</text>
          </view>
          <view class="zodiac-items">
            <view class="zodiac-item">
              <view class="zodiac-dot"></view>
              <text class="zodiac-text"><text
                  class="zodiac-char">云：</text>兔喜小，云为天之物，虽大但柔，且"云"字藏"雨"，水生木（兔为木），大利生肖。</text>
            </view>
            <view class="zodiac-item">
              <view class="zodiac-dot"></view>
              <text class="zodiac-text"><text class="zodiac-char">帆：</text>"帆"字含"巾"，意为披彩衣，兔披彩衣更显尊贵，寓意生活富足，受人敬仰。</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 3. 单字详解 -->
      <view class="section" @click="openModal('char')">
        <view class="section-title">
          <text class="section-title-icon">✨</text>
          <text class="section-title-text">单字详解</text>
        </view>

        <view class="char-list">
          <view v-for="(item, i) in charDetails" :key="i" class="char-item">
            <view class="char-item-left">
              <view class="char-box">{{ item.char }}</view>
              <text class="char-element" :style="setWuxingColor(item.element as WuxingElement)">{{ item.element
              }}</text>

            </view>
            <view class="char-item-right">
              <view class="char-item-meta">
                <text class="char-meta-label">康熙笔画：<text class="char-meta-value">{{ item.stroke }}</text></text>
                <text class="char-meta-label">{{ item.tone }}</text>
              </view>
              <text class="char-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 4. 笔画与三才五格 -->
      <view class="section" @click="openModal('strokes')">
        <view class="section-title">
          <text class="section-title-icon">#</text>
          <text class="section-title-text">笔画数理分析</text>
        </view>

        <!-- 笔画图示 -->
        <view class="strokes-display">
          <view class="stroke-item">
            <view class="stroke-box">李</view>
            <view class="stroke-label">7画 <span :style="setWuxingColorText('木')">(木)</span></view>
          </view>
          <view class="stroke-line"></view>
          <view class="stroke-item stroke-item-active">
            <view class="stroke-box stroke-box-active">云</view>
            <view class="stroke-label">4画 <span :style="setWuxingColorText('水')">(水)</span></view>
          </view>
          <view class="stroke-line"></view>
          <view class="stroke-item stroke-item-active">
            <view class="stroke-box stroke-box-active">帆</view>
            <view class="stroke-label">6画 <span :style="setWuxingColorText('水')">(水)</span></view>
          </view>
        </view>

        <!-- 三才五格详解 -->
        <view class="wuge-list">
          <view class="wuge-item">
            <view class="wuge-item-left">
              <text class="wuge-name">天格 (8) · 吉</text>
              <text class="wuge-desc">祖业运 · 坚毅不拔之数</text>
            </view>
            <view class="wuge-bar">
              <view class="wuge-bar-fill" style="width: 80%"></view>
            </view>
          </view>
          <view class="wuge-item wuge-item-highlight">
            <view class="wuge-indicator"></view>
            <view class="wuge-item-left">
              <text class="wuge-name wuge-name-highlight">人格 (11) · 大吉</text>
              <text class="wuge-desc wuge-desc-highlight">主运 · 万物更新，挽回天运</text>
            </view>
            <view class="wuge-bar">
              <view class="wuge-bar-fill wuge-bar-fill-highlight" style="width: 95%"></view>
            </view>
          </view>
          <view class="wuge-item">
            <view class="wuge-item-left">
              <text class="wuge-name">地格 (10) · 半吉</text>
              <text class="wuge-desc">前运 · 终结之数，雪暗飘零</text>
            </view>
            <view class="wuge-bar">
              <view class="wuge-bar-fill wuge-bar-fill-blue" style="width: 60%"></view>
            </view>
          </view>
          <view class="wuge-item">
            <view class="wuge-item-left">
              <text class="wuge-name">外格 (7) · 吉</text>
              <text class="wuge-desc">副运 · 精悍果断，独立权威</text>
            </view>
            <view class="wuge-bar">
              <view class="wuge-bar-fill" style="width: 75%"></view>
            </view>
          </view>
          <view class="wuge-item wuge-item-red">
            <view class="wuge-item-left">
              <text class="wuge-name">总格 (17) · 大吉</text>
              <text class="wuge-desc">后运 · 权威刚强，突破万难</text>
            </view>
            <view class="wuge-bar">
              <view class="wuge-bar-fill wuge-bar-fill-red" style="width: 90%"></view>
            </view>
          </view>
        </view>

        <!-- 三才配置 & 五行能量 -->
        <view class="grid-2">
          <!-- 三才配置 -->
          <view class="sancai-card">
            <text class="sancai-title">三才配置</text>
            <view class="sancai-circles">
              <view class="sancai-circle sancai-circle-small">
                <text class="sancai-circle-text" :style="setWuxingCircleStyle('金')">金</text>
                <text class="sancai-circle-label">天才</text>
              </view>
              <view class="sancai-line"></view>
              <view class="sancai-circle sancai-circle-large">
                <text class="sancai-circle-text" :style="setWuxingCircleStyle('木')">木</text>
                <text class="sancai-circle-label">人才</text>
              </view>
              <view class="sancai-line"></view>
              <view class="sancai-circle sancai-circle-small">
                <text class="sancai-circle-text" :style="setWuxingCircleStyle('水')">水</text>
                <text class="sancai-circle-label">地才</text>
              </view>
            </view>
            <text class="sancai-result"><text class="sancai-label">吉凶：</text>吉（金木水）</text>
          </view>

          <!-- 五行能量 -->
          <view class="wuxing-card">
            <text class="wuxing-title">五行能量</text>
            <view class="wuxing-bars">
              <view v-for="item in wuxingData" :key="item.label" class="wuxing-bar-item">
                <text class="wuxing-bar-label" :style="setWuxingColorText(item.label as WuxingElement)">{{ item.label
                }}</text>
                <view class="wuxing-bar-bg">
                  <view class="wuxing-bar-fill" :style="{ width: item.value + '%', backgroundColor: item.color }">
                  </view>
                </view>
                <text class="wuxing-bar-value">{{ item.value }}%</text>
              </view>
            </view>
            <text class="wuxing-note">* 基础运稳固，境遇安泰，可得部下之力。</text>
          </view>
        </view>
      </view>

      <!-- 5. 六维格局 -->
      <view @click="openModal('sixdim')">
        <SixDimensionRadar :labels="sixDimLabels" :values="sixDimValues" :remark="sixDimRemark" />
      </view>

      <!-- 6. 周易卦象 -->
      <view class="section" @click="openModal('gua')">
        <view class="section-title">
          <text class="section-title-icon">🧭</text>
          <text class="section-title-text">周易卦象</text>
        </view>

        <view class="gua-card">
          <view class="gua-bg">涣</view>
          <view class="gua-lines">
            <view class="gua-line gua-line-solid"></view>
            <view class="gua-line gua-line-solid"></view>
            <view class="gua-line gua-line-broken">
              <view class="gua-line-part"></view>
              <view class="gua-line-part"></view>
            </view>
            <view class="gua-space"></view>
            <view class="gua-line gua-line-broken gua-line-gray">
              <view class="gua-line-part"></view>
              <view class="gua-line-part"></view>
            </view>
            <view class="gua-line gua-line-solid gua-line-white"></view>
            <view class="gua-line gua-line-broken gua-line-gray">
              <view class="gua-line-part"></view>
              <view class="gua-line-part"></view>
            </view>
          </view>
          <view class="gua-content">
            <view class="gua-header">
              <text class="gua-name">风水涣</text>
              <text class="gua-tag">上巽下坎</text>
            </view>
            <text class="gua-desc">风行水上，涣散之象。离散之中蕴含亨通，寓意破旧立新。利于涉大川，建功立业，乃是乘风破浪之吉兆。</text>
          </view>
        </view>
      </view>

      <!-- 6. 开运锦囊 -->
      <view class="section" @click="openModal('lucky')">
        <view class="section-title">
          <ActivityIcon class="section-title-icon-svg" />
          <text class="section-title-text">开运锦囊</text>
        </view>

        <view class="lucky-grid">
          <view v-for="item in luckyItems" :key="item.label" class="lucky-item">
            <view class="lucky-icon" :class="item.colorClass">{{ item.icon }}</view>
            <view class="lucky-info">
              <text class="lucky-label">{{ item.label }}</text>
              <text class="lucky-value">{{ item.value }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 7. 诗词出处 -->
      <view class="section" @click="openModal('poem')">
        <view class="section-title">
          <text class="section-title-icon">📖</text>
          <text class="section-title-text">诗词出处</text>
        </view>

        <view class="poem-card">
          <text class="poem-quote">❝</text>
          <text class="poem-text">"长风破浪会有时，直挂<text class="poem-highlight">云帆</text>济沧海"</text>
          <text class="poem-author">—— 李白《行路难·其一》</text>
        </view>
      </view>

      <!-- 8. 人生运程 -->
      <view class="section" @click="openModal('lifespan')">
        <view class="section-title">
          <text class="section-title-icon">📈</text>
          <text class="section-title-text">人生运程</text>
        </view>

        <scroll-view scroll-x class="lifespan-scroll">
          <view class="lifespan-row">
            <view v-for="item in lifespanData" :key="item.age" class="lifespan-item" :class="item.colorClass">
              <text class="lifespan-age">{{ item.age }}</text>
              <text class="lifespan-desc">{{ item.desc }}</text>
            </view>
          </view>
        </scroll-view>
      </view>


      <!-- 9. 大师寄语 -->
      <view class="master-message" @click="openModal('master')">
        <text class="master-message-title">大师寄语</text>
        <text class="master-message-text">"云帆"一名，既顺应了生肖兔喜彩衣、喜水木的特性，又在数理上避开了大凶之数。虽地格稍弱，但总格大吉，属先苦后甜、大器晚成之局。</text>
      </view>

      <view class="footer">
        <text class="footer-text">壹梵 · 致力于东方美学与易经智慧的传承</text>
      </view>
    </scroll-view>

    <view v-if="showModal" class="modal-overlay" @click.stop="closeModal">
      <view class="modal-container" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ modalTitle }}</text>
          <view class="modal-close" @click.stop="closeModal">
            <text class="modal-close-icon">×</text>
          </view>
        </view>
        <scroll-view scroll-y class="modal-body">
          <view class="modal-body-contain">
            <view v-if="currentModal === 'score'" class="modal-content">
              <text class="modal-text">总分：93</text>
              <text class="modal-text">姓名：云帆</text>
              <text class="modal-text">"长风破浪会有时，直挂云帆济沧海"</text>
            </view>

            <view v-else-if="currentModal === 'meaning'" class="modal-content">
              <text class="modal-section-title">组合意象</text>
              <text class="modal-text">云者，高远洁白，逍遥自在；帆者，借风远航，志在四方。二字组合，动静结合，既有高远的志向，又有脚踏实地、乘风破浪的行动力。</text>
              <text class="modal-section-title">生肖喜忌</text>
              <text class="modal-text">属兔 · 喜用（示例：水生木，利生肖）</text>
            </view>

            <view v-else-if="currentModal === 'char'" class="modal-content">
              <text class="modal-section-title">单字详解</text>
              <view class="modal-char-list">
                <view v-for="(item, i) in charDetails" :key="i" class="modal-char-item">
                  <text class="modal-char-title">{{ item.char }}（{{ item.element }}）</text>
                  <text class="modal-text">康熙笔画：{{ item.stroke }}</text>
                  <text class="modal-text">{{ item.tone }}</text>
                  <text class="modal-text">{{ item.desc }}</text>
                </view>
              </view>
            </view>

            <view v-else-if="currentModal === 'strokes'" class="modal-content">
              <text class="modal-section-title">笔画数理分析</text>
              <text class="modal-text">包含三才五格、五行能量等内容（当前为示例静态数据）。</text>
            </view>

            <view v-else-if="currentModal === 'sixdim'" class="modal-content">
              <text class="modal-section-title">六维格局</text>
              <text class="modal-text">事业、财运、健康、家庭、社交、智慧六维综合评估（当前为示例静态数据）。</text>
            </view>

            <view v-else-if="currentModal === 'gua'" class="modal-content">
              <text class="modal-section-title">周易卦象</text>
              <text class="modal-text">风行水上，涣散之象。离散之中蕴含亨通，寓意破旧立新。</text>
            </view>

            <view v-else-if="currentModal === 'lucky'" class="modal-content">
              <text class="modal-section-title">开运锦囊</text>
              <view class="modal-list">
                <text v-for="(item, idx) in luckyItems" :key="idx" class="modal-text">{{ item.label }}：{{ item.value }}</text>
              </view>
            </view>

            <view v-else-if="currentModal === 'poem'" class="modal-content">
              <text class="modal-section-title">诗词出处</text>
              <text class="modal-text">"长风破浪会有时，直挂云帆济沧海" —— 李白《行路难·其一》</text>
            </view>

            <view v-else-if="currentModal === 'lifespan'" class="modal-content">
              <text class="modal-section-title">人生运程</text>
              <view class="modal-list">
                <text v-for="(item, idx) in lifespanData" :key="idx" class="modal-text">{{ item.age }}：{{ item.desc }}</text>
              </view>
            </view>

            <view v-else-if="currentModal === 'master'" class="modal-content">
              <text class="modal-section-title">大师寄语</text>
              <text class="modal-text">"云帆"一名，既顺应了生肖兔喜彩衣、喜水木的特性，又在数理上避开了大凶之数。虽地格稍弱，但总格大吉，属先苦后甜、大器晚成之局。</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import SixDimensionRadar from './SixDimensionRadar.vue';
import ActivityIcon from './icons/ActivityIcon.vue';
import { createWuxingData, getWuxingColor, WUXING_COLORS, WuxingElement } from '@/constants/wuxing';

const wuxingData = createWuxingData([10, 40, 30, 15, 5]);

const emit = defineEmits<{
  back: [];
}>();

const showModal = ref(false);
const currentModal = ref<string>('');

const modalTitles: Record<string, string> = {
  score: '总分详解',
  meaning: '字义与生肖详解',
  char: '单字详解',
  strokes: '笔画数理详解',
  sixdim: '六维格局详解',
  gua: '周易卦象详解',
  lucky: '开运锦囊详解',
  poem: '诗词出处详解',
  lifespan: '人生运程详解',
  master: '大师寄语详解'
};

const modalTitle = computed(() => modalTitles[currentModal.value] || '详情');

const openModal = (modalType: string) => {
  currentModal.value = modalType;
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
  currentModal.value = '';
};

// 单字详解
const charDetails = [
  {
    char: "云",
    element: "水",
    stroke: "4画",
    tone: "yún (阳平)",
    desc: "意境高远，象征自由、纯洁。云卷云舒，去留无意，寓意人生境界开阔。"
  },
  {
    char: "帆",
    element: "木",
    stroke: "6画",
    tone: "fān (阴平)",
    desc: "借风之力，行船致远。寓意事业顺利，有贵人相助，能够乘势而上。"
  }
];

// 五行能量
// const wuxingData = [
//   { label: "金", value: 10, color: "#E0E0E0" },
//   { label: "木", value: 40, color: "#4CAF50" },
//   { label: "水", value: 30, color: "#2196F3" },
//   { label: "火", value: 15, color: "#F44336" },
//   { label: "土", value: 5, color: "#795548" }
// ];

// 开运锦囊
const luckyItems = [
  { icon: "🎨", label: "幸运色", value: "青、蓝、黑", colorClass: "lucky-icon-blue" },
  { icon: "#", label: "幸运数", value: "1, 3, 6, 8", colorClass: "lucky-icon-pink" },
  { icon: "📍", label: "吉位", value: "东方、北方", colorClass: "lucky-icon-green" },
  { icon: "⭐", label: "贵人", value: "双鱼、巨蟹", colorClass: "lucky-icon-yellow" }
];

// 人生运程
const lifespanData = [
  { age: "少年", desc: "聪慧过人，学业优异", colorClass: "lifespan-green" },
  { age: "青年", desc: "初露锋芒，贵人提携", colorClass: "lifespan-yellow" },
  { age: "中年", desc: "事业有成，名利双收", colorClass: "lifespan-red" },
  { age: "晚年", desc: "德高望重，福寿绵长", colorClass: "lifespan-blue" }
];

const setWuxingColor = (element: WuxingElement) => {
  const color = getWuxingColor(element, 'lightColor');
  return `background: ${color}; color: #fff;`;
}

const setWuxingColorText = (element: WuxingElement) => {
  const color = getWuxingColor(element, 'lightColor');
  return `color: ${color};`;
}

// 设置三才配置圆圈的样式（背景色、边框色、文字色、阴影）
const setWuxingCircleStyle = (element: WuxingElement) => {
  const config = WUXING_COLORS[element];
  const color = config.color;
  const rgb = config.rgb || { r: 0, g: 0, b: 0 };

  return {
    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
    borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.5)`,
    color: color,
    boxShadow: `0 0 20rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`
  };
}
// 六维格局数据
const sixDimLabels = ['事业', '财运', '健康', '家庭', '社交', '智慧'];
const sixDimValues = [100, 100, 100, 100, 100, 100];
const sixDimRemark = '此名天格人格地格配置上佳，主事业运亨通。水木相生，智慧超群，唯需注意社交圆融。';

</script>

<style scoped>
/* Result Stage */
.analysis-result {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
  color: #e2e2e2;
  overflow: hidden;
  padding: 32rpx;

}

.status-bar-placeholder {
  height: var(--status-bar-height, 0);
  width: 100%;
  flex-shrink: 0;
}

/* Header */
.analysis-header {
  padding: 16rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(8px);
}

.analysis-header-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #a0a0a0;
  background: none;
  border: none;
  padding: 16rpx 0;
  font-size: 24rpx;
  letter-spacing: 0.2em;
}

.analysis-header-arrow {
  font-size: 36rpx;
  font-weight: 300;
}

.analysis-header-title {
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 0.3em;
  color: #d4af37;
  text-shadow: 0 0 10rpx rgba(212, 175, 55, 0.3);
}

.analysis-header-share {
  color: #d4af37;
  font-size: 36rpx;
}

/* Content */
.analysis-content {
  flex: 1;
  height: 0;
  padding-bottom: 160rpx;
}

/* Score Card */
.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);
  padding: 48rpx;
  text-align: center;
  border-radius: 4rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 64rpx;
}

.score-card-corner {
  position: absolute;
  width: 16rpx;
  height: 16rpx;
  border-color: #d4af37;
  border-style: solid;
}

.score-card-corner-tl {
  top: 6px;
  left: 6px;
  border-width: 1px 0 0 1px;
}

.score-card-corner-tr {
  top: 6px;
  right: 6px;
  border-width: 1px 1px 0 0;
}

.score-card-corner-bl {
  bottom: 6px;
  left: 6px;
  border-width: 0 0 1px 1px;
}

.score-card-corner-br {
  bottom: 6px;
  right: 6px;
  border-width: 0 1px 1px 0;
}

.score-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.score-card-rotation {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-card-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed #d4af37;
  border-radius: 50%;
  background: transparent;
  animation: rotate 10s linear infinite;
}

.score-card-rotation-text {
  position: relative;
  font-size: 120rpx;
  font-weight: bold;
  color: #d4af37;
  text-shadow: 0 0 18rpx rgba(212, 175, 55, 0.5);
}

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

  to {
    transform: rotate(360deg);
  }
}

.score-card-stars {
  display: flex;
  gap: 8rpx;
  margin-top: 24rpx;
  margin-bottom: 32rpx;
}

.score-card-star {
  font-size: 20rpx;
  color: #5a5a5a;
}

.score-card-star.filled {
  color: #d4af37;
}

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

.score-card-name {
  font-size: 48rpx;
  font-weight: bold;
  color: #e2e2e2;
  letter-spacing: 0.5em;
  margin-top: 16rpx;
  margin-bottom: 8rpx;
}

.score-card-poem {
  font-size: 24rpx;
  color: #a0a0a0;
  font-style: italic;
}

/* Section */
.section {
  margin-bottom: 64rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 32rpx;
  padding: 0 8rpx;
}

.section-title-icon {
  font-size: 28rpx;
}

.section-title-icon-svg {
  width: 30rpx;
  height: 30rpx;
  display: block;
  color: #e2e2e2;
  flex: 0 0 auto;
}

.section-title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #e2e2e2;
  letter-spacing: 0.3em;
}

.section-subtitle {
  font-size: 20rpx;
  color: #a0a0a0;
  margin-bottom: 24rpx;
  padding: 0 8rpx;
  display: block;
}

/* Meaning Card */
.meaning-card {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32rpx;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 32rpx;
}

.meaning-card-quote {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.1;
  color: #d4af37;
  font-size: 80rpx;
}

.meaning-card-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #d4af37;
  margin-bottom: 16rpx;
  display: block;
}

.meaning-card-text {
  font-size: 24rpx;
  color: #a0a0a0;
  line-height: 1.75;
  text-align: justify;
  display: block;
}

.highlight {
  color: #e2e2e2;
  font-weight: bold;
}

.meaning-card-judge {
  color: #d4af37;
  display: inline;
}

/* Zodiac Card */
.zodiac-card {
  background: linear-gradient(to right, #16213e, #1a1a2e);
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.zodiac-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.zodiac-card-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.zodiac-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}

.zodiac-info {
  display: flex;
  flex-direction: column;
}

.zodiac-label {
  font-size: 24rpx;
  color: #a0a0a0;
}

.zodiac-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #e2e2e2;
  margin: 10px 0px;
}

.zodiac-score {
  font-size: 40rpx;
  font-weight: bold;
  color: #d4af37;
}

.zodiac-items {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.zodiac-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
}

.zodiac-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #4caf50;
  margin-top: 12rpx;
  flex-shrink: 0;
}

.zodiac-text {
  font-size: 24rpx;
  color: #a0a0a0;
  line-height: 1.67;
  flex: 1;
}

.zodiac-char {
  color: #e2e2e2;
  font-weight: bold;
}

/* Char List */
.char-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.char-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
}

.char-item-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.char-box {
  width: 96rpx;
  height: 96rpx;
  background: #0a0a0f;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #e2e2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.char-element {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background: rgba(33, 150, 243, 0.2);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: #90caf9;
}

.char-item-right {
  flex: 1;
}

.char-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.char-meta-label {
  font-size: 24rpx;
  color: #a0a0a0;
}

.char-meta-value {
  color: #e2e2e2;
}

.char-desc {
  font-size: 24rpx;
  color: #a0a0a0;
  line-height: 1.75;
  text-align: justify;
}

/* Strokes Display */
.strokes-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48rpx;
  padding: 32rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 48rpx;
}

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

.stroke-box {
  width: 96rpx;
  height: 96rpx;
  border-radius: 16rpx;
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #e2e2e2;
  margin-bottom: 8rpx;
}

.stroke-box-active {
  border-color: rgba(212, 175, 55, 0.3);
  color: #d4af37;
}

.stroke-line {
  width: 32rpx;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.stroke-label {
  font-size: 20rpx;
  color: #a0a0a0;
}

/* Wu Ge List */
.wuge-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.wuge-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 24rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.wuge-item-highlight {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.wuge-item-red {
  background: rgba(156, 42, 42, 0.1);
  border: 1px solid rgba(156, 42, 42, 0.3);
}

.wuge-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4rpx;
  background: #d4af37;
}

.wuge-item-left {
  flex: 1;
}

.wuge-name {
  font-size: 24rpx;
  font-weight: bold;
  color: #e2e2e2;
  display: block;
}

.wuge-name-highlight {
  color: #d4af37;
}

.wuge-desc {
  font-size: 20rpx;
  color: #a0a0a0;
  opacity: 0.8;
}

.wuge-desc-highlight {
  color: #e2e2e2;
}

.wuge-bar {
  width: 128rpx;
  height: 12rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999rpx;
  overflow: hidden;
}

.wuge-bar-fill {
  height: 100%;
  background: #fbc02d;
  border-radius: 999rpx;
}

.wuge-bar-fill-highlight {
  background: #d4af37;
}

.wuge-bar-fill-blue {
  background: #42a5f5;
}

.wuge-bar-fill-red {
  background: #9c2a2a;
}

/* Grid 2 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}

/* San Cai Card */
.sancai-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sancai-title {
  font-size: 24rpx;
  color: #d4af37;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 24rpx;
  padding-left: 16rpx;
  border-left: 2px solid #d4af37;
  display: block;
}

.sancai-circles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8rpx;
  margin-bottom: 24rpx;
}

.sancai-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.sancai-circle-small {
  width: 64rpx;
  height: 64rpx;
}

.sancai-circle-large {
  width: 80rpx;
  height: 80rpx;
}

.sancai-circle-text {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  border: 1px solid rgba(76, 175, 80, 0.5);
  background: rgba(76, 175, 80, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #4caf50;
  box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.2);
}

.sancai-circle-label {
  font-size: 20rpx;
  color: #a0a0a0;
}

.sancai-line {
  width: 48rpx;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.sancai-result {
  font-size: 20rpx;
  color: #e2e2e2;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 12rpx 0;
  border-radius: 8rpx;
}

.sancai-label {
  color: #d4af37;
  font-weight: bold;
}

/* Wu Xing Card */
.wuxing-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.wuxing-title {
  font-size: 24rpx;
  color: #d4af37;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 24rpx;
  padding-left: 16rpx;
  border-left: 2px solid #d4af37;
  display: block;
}

.wuxing-bars {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.wuxing-bar-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.wuxing-bar-label {
  width: 40rpx;
  color: #a0a0a0;
  font-size: 24rpx;
}

.wuxing-bar-bg {
  flex: 1;
  height: 12rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999rpx;
  overflow: hidden;
}

.wuxing-bar-fill {
  height: 100%;
  border-radius: 999rpx;
  box-shadow: 0 0 8rpx currentColor;
}

.wuxing-bar-value {
  width: 64rpx;
  text-align: right;
  color: #e2e2e2;
  font-size: 24rpx;
  font-family: monospace;
}

.wuxing-note {
  font-size: 20rpx;
  color: #a0a0a0;
  opacity: 0.7;
  line-height: 1.67;
}

/* Gua Card */
.gua-card {
  background: linear-gradient(to right, #16213e, #1a1a2e);
  padding: 40rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  gap: 48rpx;
  position: relative;
  overflow: hidden;
}

.gua-bg {
  position: absolute;
  right: -40rpx;
  top: -40rpx;
  font-size: 200rpx;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.gua-lines {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  width: 112rpx;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.gua-line {
  width: 100%;
  height: 12rpx;
  display: flex;
  justify-content: space-between;
}

.gua-line-solid {
  background: #d4af37;
  box-shadow: 0 0 8rpx #d4af37;
}

.gua-line-broken {
  display: flex;
  justify-content: space-between;
}

.gua-line-part {
  width: 45%;
  height: 100%;
  background: rgba(212, 175, 55, 0.5);
}

.gua-line-gray .gua-line-part {
  background: rgba(160, 160, 160, 0.5);
}

.gua-line-white {
  background: #e2e2e2;
}

.gua-space {
  height: 8rpx;
}

.gua-content {
  flex: 1;
  position: relative;
  z-index: 10;
}

.gua-header {
  display: flex;
  align-items: baseline;
  gap: 24rpx;
  margin-bottom: 16rpx;
}

.gua-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #e2e2e2;
  letter-spacing: 0.3em;
}

.gua-tag {
  font-size: 20rpx;
  color: #9c2a2a;
  border: 1px solid #9c2a2a;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.gua-desc {
  font-size: 24rpx;
  color: #a0a0a0;
  line-height: 1.75;
  text-align: justify;
}

/* Lucky Grid */
.lucky-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  margin-bottom: 64rpx;
}

.lucky-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 24rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s;
}

.lucky-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.lucky-icon-blue {
  color: #42a5f5;
}

.lucky-icon-pink {
  color: #ec407a;
}

.lucky-icon-green {
  color: #66bb6a;
}

.lucky-icon-yellow {
  color: #ffee58;
}

.lucky-info {
  flex: 1;
}

.lucky-label {
  font-size: 20rpx;
  color: #a0a0a0;
  display: block;
}

.lucky-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #e2e2e2;
  display: block;
}

/* Poem Card */
.poem-card {
  background: rgba(226, 226, 226, 0.05);
  padding: 40rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  margin-bottom: 64rpx;
}

.poem-quote {
  position: absolute;
  top: -16rpx;
  left: -16rpx;
  opacity: 0.05;
  color: white;
  font-size: 120rpx;
  transform: rotate(180deg);
}

.poem-text {
  font-size: 28rpx;
  color: #e2e2e2;
  font-style: italic;
  line-height: 1.75;
  text-align: center;
  display: block;
  margin-bottom: 8rpx;
}

.poem-highlight {
  color: #d4af37;
  margin: 0 8rpx;
}

.poem-author {
  font-size: 20rpx;
  color: #a0a0a0;
  text-align: right;
  display: block;
  margin-top: 8rpx;
}

/* Lifespan Scroll */
.lifespan-scroll {
  width: 100%;
  white-space: nowrap;
}

.lifespan-row {
  display: inline-flex;
  gap: 24rpx;
  padding-bottom: 32rpx;
  padding-left: 8rpx;
  padding-right: 8rpx;
}

.lifespan-item {
  min-width: 240rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lifespan-green {
  background: rgba(56, 142, 60, 0.2);
  border-color: rgba(76, 175, 80, 0.3);
}

.lifespan-yellow {
  background: rgba(245, 127, 23, 0.2);
  border-color: rgba(255, 152, 0, 0.3);
}

.lifespan-red {
  background: rgba(183, 28, 28, 0.2);
  border-color: rgba(244, 67, 54, 0.3);
}

.lifespan-blue {
  background: rgba(13, 71, 161, 0.2);
  border-color: rgba(33, 150, 243, 0.3);
}

.lifespan-age {
  font-size: 24rpx;
  font-weight: bold;
  color: #e2e2e2;
  margin-bottom: 16rpx;
}

.lifespan-desc {
  font-size: 20rpx;
  color: #a0a0a0;
  line-height: 1.67;
}

/* Recommend List */
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.recommend-item {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.3s;
}

.recommend-left {
  flex: 1;
}

.recommend-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.recommend-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #e2e2e2;
  transition: color 0.3s;
}

.recommend-tags {
  display: flex;
  gap: 8rpx;
}

.recommend-tag {
  font-size: 18rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background: rgba(255, 255, 255, 0.05);
  color: #a0a0a0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.recommend-desc {
  font-size: 20rpx;
  color: #a0a0a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 24rpx;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.recommend-score {
  font-size: 24rpx;
  color: #d4af37;
  font-weight: bold;
}

.recommend-label {
  font-size: 18rpx;
  color: #a0a0a0;
}

/* Master Message */
.master-message {
  background: linear-gradient(to right, #1a1a2e, #10101a);
  padding: 32rpx;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border-left: 4px solid #d4af37;
  border-top-right-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 64rpx;
}

.master-message-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #d4af37;
  letter-spacing: 0.3em;
  margin-bottom: 16rpx;
  display: block;
}

.master-message-text {
  font-size: 22rpx;
  color: #a0a0a0;
  line-height: 1.75;
}

/* Footer */
.footer {
  text-align: center;
  padding-bottom: 64rpx;
}

.footer-text {
  font-size: 18rpx;
  color: #5a5a5a;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-container {
  width: 100%;
  max-width: 750rpx;
  max-height: 80vh;
  background: #0a0a0f;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  border: 1px solid rgba(212, 175, 55, 0.2);
  overflow: hidden;
}

.modal-header {
  padding: 24rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-title {
  color: #d4af37;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 26rpx;
}

.modal-close {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-icon {
  font-size: 44rpx;
  color: rgba(212, 175, 55, 0.9);
  line-height: 1;
}

.modal-body {
  max-height: calc(80vh - 96rpx);
}

.modal-body-contain {
  padding: 24rpx 32rpx 40rpx;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.modal-section-title {
  color: #d4af37;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.modal-text {
  color: #a0a0a0;
  font-size: 24rpx;
  line-height: 1.75;
}

.modal-char-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.modal-char-item {
  padding: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.03);
}

.modal-char-title {
  color: #e2e2e2;
  font-size: 28rpx;
  font-weight: bold;
  letter-spacing: 0.2em;
}

.modal-list {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
</style>
