num/client/components/TriangleChart.vue

<template>
  <view class="container">
    <view class="chart-inner">
      <view class="triangle-glow"></view>
      <view class="triangle-bg"></view>

      <view class="inner-matrix">
        <view class="zone-left-bg"></view>
        <view class="zone-right-bg"></view>

        <view class="row row-top" @click="showCellDetail('O', chartNum('innerTop'))">
          <view class="cell cell-main" :class="numColorCls(chartNum('innerTop'))">
            {{ matrix.innerTop }}
            <text v-if="isMasterNum(chartNum('innerTop'))" class="master-star">★</text>
          </view>
        </view>

        <view class="row row-mid">
          <view class="cell cell-mid border-right zone-father" @click="showCellDetail('M', chartNum('innerMid', 0))">
            <text :class="numColorCls(chartNum('innerMid', 0))">
              {{ matrix.innerMid[0] }}
              <text v-if="isMasterNum(chartNum('innerMid', 0))" class="master-star-sm">★</text>
            </text>
          </view>
          <view class="cell cell-mid zone-mother" @click="showCellDetail('N', chartNum('innerMid', 1))">
            <text :class="numColorCls(chartNum('innerMid', 1))">
              {{ matrix.innerMid[1] }}
              <text v-if="isMasterNum(chartNum('innerMid', 1))" class="master-star-sm">★</text>
            </text>
          </view>
        </view>

        <view class="row-sep"></view>

        <view class="row row-bot4">
          <view class="cell-bot4" @click="showCellDetail('I', chartNum('innerBottom', 0))">
            <text :class="numColorCls(chartNum('innerBottom', 0))">
              {{ matrix.innerBottom[0] }}
              <text v-if="isMasterNum(chartNum('innerBottom', 0))" class="master-star-sm">★</text>
            </text>
          </view>
          <view class="cell-bot4 zone-father" @click="showCellDetail('J', chartNum('innerBottom', 1))">
            <text :class="numColorCls(chartNum('innerBottom', 1))">
              {{ matrix.innerBottom[1] }}
              <text v-if="isMasterNum(chartNum('innerBottom', 1))" class="master-star-sm">★</text>
            </text>
          </view>
          <view class="cell-bot4" @click="showCellDetail('K', chartNum('innerBottom', 2))">
            <text :class="numColorCls(chartNum('innerBottom', 2))">
              {{ matrix.innerBottom[2] }}
              <text v-if="isMasterNum(chartNum('innerBottom', 2))" class="master-star-sm">★</text>
            </text>
          </view>
          <view class="cell-bot4 zone-mother" @click="showCellDetail('L', chartNum('innerBottom', 3))">
            <text :class="numColorCls(chartNum('innerBottom', 3))">
              {{ matrix.innerBottom[3] }}
              <text v-if="isMasterNum(chartNum('innerBottom', 3))" class="master-star-sm">★</text>
            </text>
          </view>
        </view>
      </view>

      <!-- 外三区 -->
      <view class="outer-tri top-tri">
        <view class="tri-main" :class="numColorCls(matrix.outerTop.main)" @click="showCellDetail('X', matrix.outerTop.main)">
          {{ matrix.outerTop.main }}
          <text v-if="isMasterNum(matrix.outerTop.main)" class="master-star">★</text>
        </view>
        <view class="tri-subs">
          <text class="tri-sub" :class="numColorCls(matrix.outerTop.sub[0])" @click.stop="showCellDetail('V', matrix.outerTop.sub[0])">
            {{ matrix.outerTop.sub[0] }}
            <text v-if="isMasterNum(matrix.outerTop.sub[0])" class="master-star-sm">★</text>
          </text>
          <text class="tri-sub" :class="numColorCls(matrix.outerTop.sub[1])" @click.stop="showCellDetail('W', matrix.outerTop.sub[1])">
            {{ matrix.outerTop.sub[1] }}
            <text v-if="isMasterNum(matrix.outerTop.sub[1])" class="master-star-sm">★</text>
          </text>
        </view>
      </view>

      <view class="outer-tri left-tri">
        <view class="tri-main" :class="numColorCls(matrix.outerLeft.main)" @click="showCellDetail('R', matrix.outerLeft.main)">
          {{ matrix.outerLeft.main }}
          <text v-if="isMasterNum(matrix.outerLeft.main)" class="master-star-sm">★</text>
        </view>
        <view class="tri-subs">
          <text class="tri-sub" :class="numColorCls(matrix.outerLeft.sub[0])" @click.stop="showCellDetail('P', matrix.outerLeft.sub[0])">
            {{ matrix.outerLeft.sub[0] }}
            <text v-if="isMasterNum(matrix.outerLeft.sub[0])" class="master-star-sm">★</text>
          </text>
          <text class="tri-sub" :class="numColorCls(matrix.outerLeft.sub[1])" @click.stop="showCellDetail('Q', matrix.outerLeft.sub[1])">
            {{ matrix.outerLeft.sub[1] }}
            <text v-if="isMasterNum(matrix.outerLeft.sub[1])" class="master-star-sm">★</text>
          </text>
        </view>
      </view>

      <view class="outer-tri right-tri">
        <view class="tri-main" :class="numColorCls(matrix.outerRight.main)" @click="showCellDetail('U', matrix.outerRight.main)">
          {{ matrix.outerRight.main }}
          <text v-if="isMasterNum(matrix.outerRight.main)" class="master-star-sm">★</text>
        </view>
        <view class="tri-subs">
          <text class="tri-sub" :class="numColorCls(matrix.outerRight.sub[0])" @click.stop="showCellDetail('S', matrix.outerRight.sub[0])">
            {{ matrix.outerRight.sub[0] }}
            <text v-if="isMasterNum(matrix.outerRight.sub[0])" class="master-star-sm">★</text>
          </text>
          <text class="tri-sub" :class="numColorCls(matrix.outerRight.sub[1])" @click.stop="showCellDetail('T', matrix.outerRight.sub[1])">
            {{ matrix.outerRight.sub[1] }}
            <text v-if="isMasterNum(matrix.outerRight.sub[1])" class="master-star-sm">★</text>
          </text>
        </view>
      </view>

      <view class="sep-v sep-v-left"></view>
      <view class="sep-v sep-v-right"></view>
    </view>

    <view class="date-footer">
      <view class="date-group">
        <view class="input-boxes">
          <view class="box" v-for="(num, index) in birthday.day" :key="'d-'+index">{{ num }}</view>
        </view>
        <text class="label">日</text>
      </view>
      <view class="date-divider"></view>
      <view class="date-group">
        <view class="input-boxes">
          <view class="box" v-for="(num, index) in birthday.month" :key="'m-'+index">{{ num }}</view>
        </view>
        <text class="label">月</text>
      </view>
      <view class="date-divider"></view>
      <view class="date-group">
        <view class="input-boxes">
          <view class="box" v-for="(num, index) in birthday.year" :key="'y-'+index">{{ num }}</view>
        </view>
        <text class="label">年</text>
      </view>
    </view>

    <!-- Detail panel with annotation support -->
    <view v-if="selectedCell" class="detail-overlay" @click="hideDetail">
      <view class="detail-panel" @click.stop>
        <view class="detail-close" @click="hideDetail">✕</view>
        <view class="detail-num" :class="numColorCls(selectedCell.value)">{{ selectedCell.value }}</view>
        <view class="detail-name">{{ selectedCell.label }}</view>
        <view class="detail-zone-tag" :class="'tag-' + selectedCell.zone">{{ zoneName(selectedCell.zone) }}</view>
        <view class="detail-trait">{{ selectedCell.trait }}</view>
        <view class="detail-desc">{{ selectedCell.desc }}</view>
        <view v-if="selectedCell.isMaster" class="detail-master">✦ 卓越数 — 能量倍增，非同凡响 ✦</view>

        <!-- Annotation section (US-7.1) -->
        <view v-if="recordId" class="annotation-section">
          <view class="anno-divider"></view>
          <text class="anno-title">📝 批注</text>

          <!-- Existing annotations for this position -->
          <view v-if="positionAnnotations.length > 0" class="anno-list">
            <view v-for="(a, idx) in positionAnnotations" :key="idx" class="anno-item">
              <text class="anno-text">{{ a.content }}</text>
              <view class="anno-item-row">
                <text class="anno-date">{{ formatTime(a.createdAt) }}</text>
                <text class="anno-tag" v-if="a.tagName" :style="{ color: a.tagColor }">#{{ a.tagName }}</text>
                <text class="anno-del" @click="deleteAnnotation(a.id)">删除</text>
              </view>
            </view>
          </view>

          <!-- Add annotation -->
          <view class="anno-add">
            <input class="anno-input" v-model="annoText" placeholder="添加批注..." maxlength="200" />
            <view class="anno-actions">
              <view class="tag-selector">
                <text
                  v-for="t in allTags"
                  :key="t.id"
                  class="tag-option"
                  :class="{ active: selectedTagId === t.id }"
                  :style="{ borderColor: t.color || '#666' }"
                  @click="selectedTagId = selectedTagId === t.id ? null : t.id"
                >#{{ t.name }}</text>
                <text class="tag-option tag-add" @click="showCreateTag">+</text>
              </view>
              <button class="anno-save" @click="saveAnnotation" :disabled="!annoText.trim()">保存</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Create tag modal -->
    <view v-if="showTagModal" class="detail-overlay" @click="showTagModal = false">
      <view class="tag-modal" @click.stop>
        <text class="tag-modal-title">新建标签</text>
        <input class="tag-modal-input" v-model="newTagName" placeholder="标签名称" maxlength="20" />
        <view class="tag-color-picker">
          <text
            v-for="c in tagColors"
            :key="c"
            class="color-dot"
            :class="{ active: newTagColor === c }"
            :style="{ background: c }"
            @click="newTagColor = c"
          ></text>
        </view>
        <view class="tag-modal-actions">
          <button class="tag-cancel" @click="showTagModal = false">取消</button>
          <button class="tag-confirm" @click="createTag" :disabled="!newTagName.trim()">创建</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const NUM_COLORS = {
  1: '#D94A4A', 2: '#4A90D9', 3: '#E8A238',
  4: '#2D8B67', 5: '#D4A017', 6: '#7B6FA0',
  7: '#4A6FA5', 8: '#C9A84C', 9: '#B85C3A'
}

const POSITION_INFO = {
  O: { label: '主性格', zone: 'main',  trait: '核心人格特质', desc: '代表你的核心性格、人生方向和主要能量特征，是整个命盘的中心。' },
  M: { label: '青年综合数', zone: 'left',  trait: '青年期自身力量的呈现', desc: '由月能量与日能量结合而成，代表青年期的内在动力与外在表现。' },
  N: { label: '晚年综合数', zone: 'right', trait: '晚年期自身力量的呈现', desc: '由年前位与年后位结合而成，代表晚年的人生经验积累与智慧沉淀。' },
  I: { label: '日能量', zone: 'left',  trait: '出生日能量', desc: '代表你出生当天的能量特质，影响你的日常行为和表达方式。' },
  J: { label: '月能量', zone: 'father', trait: '父亲遗传与先天能量', desc: '代表来自父亲/父系的先天遗传能量，影响你的内在根基。' },
  K: { label: '年前位', zone: 'right', trait: '前半生积累', desc: '代表早年环境与成长经历，影响人生前期的运势走向。' },
  L: { label: '年后位', zone: 'mother', trait: '母亲遗传与后天能量', desc: '代表来自母亲/母系的遗传能量以及后天环境的影响。' },
  P: { label: '左侧左子', zone: 'left', trait: '外部左翼基础', desc: '由日能量（I）与青年综合数（M）结合，代表左翼外部能量的基础层面。' },
  Q: { label: '左侧右子', zone: 'left', trait: '外部左翼辅助', desc: '由月能量（J）与青年综合数（M）结合，代表左翼外部能量的辅助层面。' },
  R: { label: '左侧主数', zone: 'left', trait: '左翼外部能量总和（21-40岁）', desc: '左侧子数之和，代表21-40岁年龄段的综合外部能量。' },
  S: { label: '右侧左子', zone: 'right', trait: '外部右翼基础', desc: '由年前位与晚年综合数结合，代表右翼外部能量的基础层面。' },
  T: { label: '右侧右子', zone: 'right', trait: '外部右翼辅助', desc: '由年后位与晚年综合数结合，代表右翼外部能量的辅助层面。' },
  U: { label: '右侧主数', zone: 'right', trait: '右翼外部能量总和（61+岁）', desc: '右侧子数之和，代表61岁以后年龄段的综合外部能量。' },
  V: { label: '顶部左子', zone: 'main',  trait: '顶部外部基础', desc: '由青年综合数与主性格结合，代表顶部外部能量的基础层面。' },
  W: { label: '顶部右子', zone: 'main',  trait: '顶部外部辅助', desc: '由晚年综合数与主性格结合，代表顶部外部能量的辅助层面。' },
  X: { label: '顶部主数', zone: 'main',  trait: '顶部外部能量总和（41-60岁）', desc: '顶部子数之和，代表41-60岁年龄段的综合外部能量。' }
}

const TAG_COLORS = ['#D94A4A', '#4A90D9', '#E8A238', '#2D8B67', '#7B6FA0', '#C9A84C', '#D4A017', '#B85C3A']

export default {
  props: {
    chartData: { type: Object, default: null },
    birthYear: { type: Number, default: 0 },
    birthMonth: { type: Number, default: 0 },
    birthDay: { type: Number, default: 0 },
    recordId: { type: Number, default: null },
    annotations: { type: Array, default: () => [] },
    tags: { type: Array, default: () => [] }
  },
  emits: ['annotation-add', 'annotation-delete', 'tag-create'],
  data() {
    return {
      selectedCell: null,
      annoText: '',
      selectedTagId: null,
      showTagModal: false,
      newTagName: '',
      newTagColor: TAG_COLORS[1],
      tagColors: TAG_COLORS
    }
  },
  computed: {
    matrix() {
      if (!this.chartData) {
        return {
          innerTop: 3,
          innerMid: [2, 1],
          innerBottom: [1, 2, 3, 4],
          outerTop: { main: 7, sub: [5, 6] },
          outerLeft: { main: 1, sub: [8, 9] },
          outerRight: { main: 4, sub: [2, 3] }
        }
      }
      const d = this.chartData
      return {
        innerTop: d.O,
        innerMid: [d.M, d.N],
        innerBottom: [d.I, d.J, d.K, d.L],
        outerTop: { main: d.X, sub: [d.V, d.W] },
        outerLeft: { main: d.R, sub: [d.P, d.Q] },
        outerRight: { main: d.U, sub: [d.S, d.T] }
      }
    },
    birthday() {
      if (this.birthYear > 0) {
        return {
          year: String(this.birthYear).padStart(4, '0').split(''),
          month: String(this.birthMonth).padStart(2, '0').split(''),
          day: String(this.birthDay).padStart(2, '0').split('')
        }
      }
      return {
        month: ['0', '1'],
        day: ['0', '1'],
        year: ['1', '9', '9', '0']
      }
    },
    positionAnnotations() {
      if (!this.selectedCell || !this.annotations || !this.recordId) return []
      return this.annotations.filter(a => a.position === this.selectedCell.position)
    },
    allTags() {
      return this.tags || []
    }
  },
  methods: {
    chartNum(row, index) {
      if (row === 'innerTop') return this.matrix.innerTop
      if (row === 'innerMid') return this.matrix.innerMid[index]
      if (row === 'innerBottom') return this.matrix.innerBottom[index]
      return 0
    },
    numColorCls(num) {
      return 'num-color-' + num
    },
    isMasterNum(num) {
      return num === 11 || num === 22 || num === 33
    },
    showCellDetail(pos, value) {
      const info = POSITION_INFO[pos]
      if (!info) return
      this.selectedCell = {
        position: pos,
        value: value,
        label: info.label,
        zone: info.zone,
        trait: info.trait,
        desc: info.desc,
        isMaster: this.isMasterNum(value)
      }
    },
    hideDetail() {
      this.selectedCell = null
      this.annoText = ''
      this.selectedTagId = null
    },
    zoneName(zone) {
      return { main: '主性格区', left: '左区（月日能量）', right: '右区（年份能量）', father: '父源区', mother: '母源区' }[zone] || ''
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return `${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
    },
    saveAnnotation() {
      if (!this.annoText.trim() || !this.recordId || !this.selectedCell) return
      this.$emit('annotation-add', {
        recordId: this.recordId,
        position: this.selectedCell.position,
        content: this.annoText.trim(),
        tagId: this.selectedTagId
      })
      this.annoText = ''
    },
    deleteAnnotation(annoId) {
      this.$emit('annotation-delete', annoId)
    },
    showCreateTag() {
      this.showTagModal = true
      this.newTagName = ''
      this.newTagColor = TAG_COLORS[1]
    },
    createTag() {
      if (!this.newTagName.trim()) return
      this.$emit('tag-create', {
        name: this.newTagName.trim(),
        color: this.newTagColor
      })
      this.showTagModal = false
    }
  }
}
</script>

<style scoped>
/* ================================================
   数字能量三角图 - 深邃星空 · 黄金三角
   ================================================ */

.container {
  width: 100%;
  background: linear-gradient(160deg, #0c0a1a 0%, #1a1040 40%, #0f0c2e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 85rpx 0 14rpx;
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1rpx 1rpx at 10% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5rpx 1.5rpx at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1rpx 1rpx at 50% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1rpx 1rpx at 70% 80%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5rpx 1.5rpx at 85% 30%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1rpx 1rpx at 20% 90%, rgba(255,255,255,0.3) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.chart-inner {
  position: relative;
  width: 100%;
  height: 520rpx;
  padding: 120rpx 60rpx 0 60rpx;
  box-sizing: border-box;
  z-index: 1;
}

/* Zone backgrounds, layout, cells, outer tris, etc. — exactly the same as before */
.zone-left-bg,
.zone-right-bg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}
.zone-left-bg {
  left: 0;
  bottom: 0;
  width: 55%;
  height: 85%;
  clip-path: polygon(0% 100%, 15% 0%, 100% 100%);
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.zone-right-bg {
  right: 0;
  bottom: 0;
  width: 55%;
  height: 85%;
  clip-path: polygon(100% 100%, 85% 0%, 0% 100%);
  background: linear-gradient(135deg, #4A90D9, #4A6FA5);
}

.zone-father { position: relative; }
.zone-father::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 20rpx;
  height: 3rpx;
  border-radius: 2rpx;
  background: #4A90D9;
  opacity: 0.5;
}
.zone-mother { position: relative; }
.zone-mother::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 20rpx;
  height: 3rpx;
  border-radius: 2rpx;
  background: #7B6FA0;
  opacity: 0.5;
}

.inner-matrix::after {
  content: '';
  position: absolute;
  top: 28%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1rpx;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.10) 15%,
    rgba(255, 255, 255, 0.10) 85%,
    rgba(255, 255, 255, 0.04) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.num-color-1 { color: #D94A4A !important; }
.num-color-2 { color: #4A90D9 !important; }
.num-color-3 { color: #E8A238 !important; }
.num-color-4 { color: #2D8B67 !important; }
.num-color-5 { color: #D4A017 !important; }
.num-color-6 { color: #7B6FA0 !important; }
.num-color-7 { color: #4A6FA5 !important; }
.num-color-8 { color: #C9A84C !important; }
.num-color-9 { color: #B85C3A !important; }

.master-star {
  font-size: 28rpx;
  color: #fbbf24;
  text-shadow: 0 0 16rpx rgba(251, 191, 36, 0.8);
  display: inline-block;
  margin-left: 4rpx;
  animation: pulse-star 1.5s ease-in-out infinite;
}
.master-star-sm {
  font-size: 20rpx;
  color: #fbbf24;
  text-shadow: 0 0 12rpx rgba(251, 191, 36, 0.6);
  display: inline-block;
  margin-left: 2rpx;
  animation: pulse-star 1.5s ease-in-out infinite;
}
@keyframes pulse-star {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.triangle-glow {
  position: absolute;
  top: 100rpx;
  left: 44rpx;
  right: 44rpx;
  bottom: 10rpx;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(135deg, rgba(255, 200, 50, 0.2), rgba(255, 100, 200, 0.15));
  filter: blur(20rpx);
}

.triangle-bg {
  position: absolute;
  top: 104rpx;
  left: 48rpx;
  right: 48rpx;
  bottom: 14rpx;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(165deg, #fbbf24 0%, #f59e0b 30%, #d97706 60%, #b45309 100%);
  padding: 3rpx;
  box-sizing: border-box;
}
.triangle-bg::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0f0a1e 0%, #1a1035 50%, #0f0a20 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.inner-matrix {
  position: absolute;
  bottom: 14rpx;
  left: 48rpx;
  right: 48rpx;
  height: 74%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.row { display: flex; }
.row-top {
  height: 36%;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 4rpx;
}
.row-mid {
  height: 28%;
  justify-content: center;
  align-items: center;
  gap: 56rpx;
  position: relative;
}
.row-mid::before {
  content: '';
  position: absolute;
  top: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
  pointer-events: none;
}
.row-bot4 {
  height: 36%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rpx;
  padding: 0 20rpx;
  position: relative;
}
.row-sep {
  height: 2rpx;
  width: 62%;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, transparent);
  flex-shrink: 0;
}
.row-bot4::before {
  content: '';
  position: absolute;
  top: 6rpx;
  bottom: 6rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 1rpx;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 80%, transparent);
  pointer-events: none;
  z-index: 1;
}

.cell-main {
  font-size: 64rpx;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 24rpx rgba(251, 191, 36, 0.5), 0 0 80rpx rgba(251, 191, 36, 0.2);
  letter-spacing: 2rpx;
}
.cell-mid {
  flex: none;
  width: auto;
  font-size: 44rpx;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 16rpx rgba(255, 255, 255, 0.25);
  padding: 0 6rpx;
}
.cell-bot4 {
  width: 64rpx;
  text-align: center;
  font-size: 40rpx;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 0 12rpx rgba(255, 255, 255, 0.2);
}
.border-right { border-right: 1rpx solid rgba(255, 255, 255, 0.1); }

.outer-tri {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.tri-main {
  font-size: 44rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 18rpx rgba(255, 255, 255, 0.2);
  line-height: 1.1;
}
.tri-subs {
  display: flex;
  gap: 20rpx;
  margin-top: 4rpx;
}
.tri-sub {
  font-size: 44rpx;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.top-tri { top: -58rpx; left: 50%; transform: translateX(-50%); position: absolute; }
.top-tri .tri-main { font-size: 52rpx; color: #fbbf24; text-shadow: 0 0 28rpx rgba(251, 191, 36, 0.4); }
.left-tri { top: 28%; left: 58rpx; position: absolute; }
.right-tri { top: 28%; right: 58rpx; position: absolute; }
.top-tri .tri-subs { position: relative; }
.top-tri .tri-subs::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20rpx;
  transform: translateX(-50%);
  width: 130rpx;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.15) 85%, transparent);
}

.sep-v {
  position: absolute;
  z-index: 2;
  width: 1rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}
.sep-v-left { top: 20rpx; left: 50%; height: 70rpx; transform-origin: top center; transform: rotate(-36deg); }
.sep-v-right { top: 20rpx; left: 50%; height: 70rpx; transform-origin: top center; transform: rotate(36deg); }

.date-footer {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 40rpx;
  z-index: 1;
}
.date-group { display: flex; flex-direction: column; align-items: center; }
.date-divider { width: 1rpx; height: 40rpx; background: rgba(255, 255, 255, 0.08); margin: 0 24rpx; }
.input-boxes { display: flex; }
.box {
  width: 34rpx; height: 42rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.25);
  border-radius: 6rpx; margin: 0 3rpx;
  text-align: center; line-height: 42rpx;
  font-size: 22rpx; color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.label { font-size: 18rpx; color: rgba(255, 255, 255, 0.45); margin-top: 8rpx; letter-spacing: 2rpx; }

/* Detail overlay (same as before, extended for annotations) */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.detail-panel {
  width: 100%;
  background: linear-gradient(180deg, #1a1040 0%, #0f0c2e 100%);
  border-radius: 28rpx 28rpx 0 0;
  padding: 40rpx 36rpx 60rpx;
  position: relative;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1rpx solid rgba(251, 191, 36, 0.2);
  max-height: 70vh;
  overflow-y: auto;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.detail-close {
  position: absolute; top: 20rpx; right: 28rpx;
  font-size: 32rpx; color: rgba(255, 255, 255, 0.3);
  width: 50rpx; height: 50rpx;
  display: flex; align-items: center; justify-content: center;
}
.detail-num { font-size: 80rpx; font-weight: 700; text-align: center; text-shadow: 0 0 30rpx currentColor; margin-bottom: 8rpx; }
.detail-name { font-size: 30rpx; font-weight: 600; color: #ffffff; text-align: center; margin-bottom: 16rpx; }
.detail-zone-tag { display: inline-block; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 20rpx; text-align: center; margin: 0 auto 20rpx; width: fit-content; }
.tag-main { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1rpx solid rgba(251, 191, 36, 0.2); }
.tag-left { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1rpx solid rgba(245, 158, 11, 0.2); }
.tag-right { background: rgba(74, 144, 217, 0.15); color: #4A90D9; border: 1rpx solid rgba(74, 144, 217, 0.2); }
.tag-father { background: rgba(74, 144, 217, 0.15); color: #4A90D9; border: 1rpx solid rgba(74, 144, 217, 0.2); }
.tag-mother { background: rgba(123, 111, 160, 0.15); color: #7B6FA0; border: 1rpx solid rgba(123, 111, 160, 0.2); }
.detail-trait { font-size: 26rpx; font-weight: 500; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 16rpx; }
.detail-desc { font-size: 24rpx; color: rgba(255, 255, 255, 0.5); line-height: 1.8; text-align: center; padding: 0 20rpx; }
.detail-master { margin-top: 24rpx; text-align: center; font-size: 22rpx; color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1rpx solid rgba(251, 191, 36, 0.15); border-radius: 12rpx; padding: 12rpx; letter-spacing: 2rpx; }

/* ===== Annotation section ===== */
.annotation-section {
  margin-top: 16rpx;
}
.anno-divider {
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  margin: 20rpx 0 16rpx;
}
.anno-title {
  font-size: 26rpx;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 12rpx;
}
.anno-list {
  margin-bottom: 12rpx;
}
.anno-item {
  background: rgba(255,255,255,0.04);
  border: 1rpx solid rgba(255,255,255,0.06);
  border-radius: 10rpx;
  padding: 12rpx 14rpx;
  margin-bottom: 8rpx;
}
.anno-text {
  font-size: 24rpx;
  color: rgba(255,255,255,0.85);
  display: block;
  line-height: 1.5;
}
.anno-item-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 6rpx;
}
.anno-date {
  font-size: 20rpx;
  color: rgba(255,255,255,0.3);
}
.anno-tag {
  font-size: 20rpx;
  font-weight: 500;
}
.anno-del {
  font-size: 20rpx;
  color: #D94A4A;
  margin-left: auto;
}
.anno-add {
  margin-top: 8rpx;
}
.anno-input {
  width: 100%;
  height: 72rpx;
  border: 1rpx solid rgba(255,255,255,0.1);
  border-radius: 10rpx;
  padding: 0 14rpx;
  font-size: 24rpx;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  box-sizing: border-box;
}
.anno-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}
.tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  flex: 1;
}
.tag-option {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  border: 1rpx solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
}
.tag-option.active {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.tag-add {
  font-size: 24rpx;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  border-style: dashed;
  padding: 4rpx 14rpx;
}
.anno-save {
  font-size: 22rpx;
  padding: 6rpx 24rpx;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 8rpx;
  flex-shrink: 0;
  margin-left: 8rpx;
}
.anno-save[disabled] { opacity: 0.3; }

/* Tag creation modal */
.tag-modal {
  width: 70%;
  background: #1a1040;
  border-radius: 20rpx;
  padding: 36rpx;
  border: 1rpx solid rgba(251,191,36,0.15);
  margin-bottom: 30vh;
}
.tag-modal-title {
  font-size: 28rpx;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: block;
  text-align: center;
  margin-bottom: 20rpx;
}
.tag-modal-input {
  width: 100%;
  height: 72rpx;
  border: 1rpx solid rgba(255,255,255,0.15);
  border-radius: 10rpx;
  padding: 0 14rpx;
  font-size: 26rpx;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  box-sizing: border-box;
  margin-bottom: 16rpx;
}
.tag-color-picker {
  display: flex;
  gap: 12rpx;
  justify-content: center;
  margin-bottom: 24rpx;
}
.color-dot {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid transparent;
}
.color-dot.active {
  border-color: #fff;
  box-shadow: 0 0 12rpx rgba(255,255,255,0.3);
}
.tag-modal-actions {
  display: flex;
  gap: 16rpx;
}
.tag-cancel {
  flex: 1;
  padding: 12rpx 0;
  background: rgba(255,255,255,0.06);
  border: 1rpx solid rgba(255,255,255,0.1);
  border-radius: 10rpx;
  color: rgba(255,255,255,0.6);
  font-size: 26rpx;
}
.tag-confirm {
  flex: 1;
  padding: 12rpx 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: 10rpx;
  color: #fff;
  font-size: 26rpx;
}
.tag-confirm[disabled] { opacity: 0.3; }
</style>