<template>
  <view class="profile-page">
    <view class="space-bg"></view>
    <view class="status-space" :style="{ height: capsuleTopReservePx + 'px' }"></view>

    <view class="topbar">
      <text class="back" @click="goBack">‹</text>
      <text class="title">编辑资料 <text class="gold">✦</text></text>
      <text class="save" :class="{ disabled: saving }" @click="saveProfile">{{ saving ? '保存中' : '保存' }}</text>
    </view>

    <scroll-view class="scroll" scroll-y :show-scrollbar="false">
      <view class="hero-card glass-card">
        <view class="avatar-wrap">
          <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
          <view class="avatar-edit" @click="chooseAvatar">
            <view class="pen-icon"></view>
          </view>
        </view>
        <view class="hero-info">
          <view class="hero-name-row">
            <text class="hero-name">{{ form.nickname || '未设置昵称' }}</text>
            <text class="gold hero-star">✦</text>
          </view>
          <text class="hero-sub">正在成为更清晰的自己</text>
          <view class="hero-line"></view>
          <text class="hero-quote">生活是自己的，选择也是。”</text>
        </view>
        <view class="hero-planet">
          <view class="planet-core"></view>
          <view class="planet-ring"></view>
        </view>
      </view>

      <view class="panel glass-card">
        <view class="section-head">
          <view class="section-icon basic-icon"></view>
          <text class="section-title">基础信息</text>
        </view>
        <view class="profile-row">
          <text class="row-label">昵称</text>
          <input class="row-input" v-model="form.nickname" placeholder="输入昵称" placeholder-class="placeholder" />
          <text class="chevron">›</text>
        </view>
        <view class="profile-row">
          <text class="row-label">性别</text>
          <view class="gender-row">
            <text v-for="item in genderOptions" :key="item" class="choice" :class="{ active: form.gender === item }" @click="form.gender = item">{{ item }}</text>
          </view>
        </view>
        <view class="profile-row">
          <text class="row-label">生日</text>
          <picker class="row-picker" mode="date" :value="birthday" @change="onBirthday">
            <view class="row-value">{{ birthdayDisplay }}</view>
          </picker>
          <text class="chevron">›</text>
        </view>
        <view class="profile-row">
          <text class="row-label">所在城市</text>
          <input class="row-input" v-model="form.city" placeholder="填写城市" placeholder-class="placeholder" />
          <text class="chevron">›</text>
        </view>

        <view class="astro-panel">
          <view class="astro-col">
            <view class="astro-title-row">
              <view class="zodiac-head-icon">♋</view>
              <text class="astro-title">星座</text>
              <text class="astro-current">{{ form.zodiac || '巨蟹座' }}</text>
              <text class="chevron">›</text>
            </view>
            <text class="select-title">选择星座</text>
            <view class="zodiac-grid">
              <view
                v-for="item in zodiacOptions"
                :key="item.name"
                class="zodiac-item"
                :class="{ active: form.zodiac === item.name }"
                @click="form.zodiac = item.name"
              >
                <view class="zodiac-bubble">{{ item.symbol }}</view>
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          <view class="astro-col mbti-col">
            <view class="astro-title-row">
              <view class="mbti-head-icon"></view>
              <text class="astro-title">MBTI</text>
              <text class="astro-current">{{ form.mbti || 'ENTJ' }}</text>
              <text class="chevron">›</text>
            </view>
            <text class="select-title">选择MBTI</text>
            <view class="mbti-grid">
              <text
                v-for="item in mbtiOptions"
                :key="item"
                class="mbti-chip"
                :class="{ active: form.mbti === item }"
                @click="form.mbti = item"
              >{{ item }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="panel glass-card">
        <view class="section-head">
          <view class="section-icon job-title-icon"></view>
          <text class="section-title">职业信息</text>
        </view>
        <view class="profile-row">
          <text class="row-label">职业</text>
          <input class="row-input" v-model="form.profession" placeholder="产品经理" placeholder-class="placeholder" />
          <text class="chevron">›</text>
        </view>
        <view class="profile-row">
          <text class="row-label">行业</text>
          <input class="row-input" v-model="form.industry" placeholder="互联网" placeholder-class="placeholder" />
          <text class="chevron">›</text>
        </view>
        <view class="profile-row">
          <text class="row-label">公司（可选）</text>
          <input class="row-input muted" v-model="form.company" placeholder="填写公司名称" placeholder-class="placeholder" />
          <text class="chevron">›</text>
        </view>
      </view>

      <view class="panel glass-card">
        <view class="section-head with-action">
          <view class="section-title-wrap">
            <view class="section-icon smile-title-icon"></view>
            <text class="section-title">性格标签</text>
            <text class="section-hint">（最多选择5个）</text>
          </view>
          <text class="manage-link" @click="goTagManage('personality')">管理</text>
        </view>
        <view class="tag-grid">
          <text
            v-for="tag in displayPersonalityTags"
            :key="tag"
            class="tag-choice"
            :class="{ active: form.personalityTags.includes(tag) }"
            @click="toggleList(form.personalityTags, tag, 5)"
          >{{ tag }}</text>
          <text class="tag-choice dashed" @click="addCustomTag('personality')">＋ 添加标签</text>
        </view>
      </view>

      <view class="panel glass-card">
        <view class="section-head with-action">
          <view class="section-title-wrap">
            <view class="section-icon heart-title-icon"></view>
            <text class="section-title">兴趣爱好</text>
            <text class="section-hint">（最多选择5个）</text>
          </view>
          <text class="manage-link" @click="goTagManage('hobby')">管理</text>
        </view>
        <view class="tag-grid">
          <text
            v-for="tag in displayHobbyTags"
            :key="tag"
            class="tag-choice"
            :class="{ active: form.hobbies.includes(tag) }"
            @click="toggleList(form.hobbies, tag, 5)"
          >{{ tag }}</text>
          <text class="tag-choice dashed" @click="addCustomTag('hobby')">＋ 添加兴趣</text>
        </view>
      </view>

      <view class="panel glass-card bio-panel">
        <view class="section-head">
          <view class="section-icon bio-title-icon"></view>
          <text class="section-title">个人简介</text>
        </view>
        <textarea
          class="bio"
          v-model="form.future.ideal"
          maxlength="200"
          :placeholder="bioPlaceholder"
          placeholder-class="placeholder"
        />
        <text class="bio-count">{{ (form.future.ideal || '').length }}/200</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useAppStore } from '../../stores/app.js'
import { useMenuButtonSafeArea } from '../../composables/useMenuButtonSafeArea.js'

const store = useAppStore()
const { capsuleTopReservePx } = useMenuButtonSafeArea({ extraTopPx: 2 })
const isEdit = ref(false)
const saving = ref(false)
const birthday = ref('')
const avatarLocal = ref('')
const bioPlaceholder = '热爱阅读和旅行，喜欢用文字和镜头记录生活。\n相信真诚和努力能让世界变得更美好。'

const genderOptions = ['女', '男', '不透露']
const zodiacOptions = [
  { name: '白羊座', symbol: '♈' },
  { name: '金牛座', symbol: '♉' },
  { name: '双子座', symbol: '♊' },
  { name: '巨蟹座', symbol: '♋' },
  { name: '狮子座', symbol: '♌' },
  { name: '处女座', symbol: '♍' },
  { name: '天秤座', symbol: '♎' },
  { name: '天蝎座', symbol: '♏' },
  { name: '射手座', symbol: '♐' },
  { name: '摩羯座', symbol: '♑' },
  { name: '水瓶座', symbol: '♒' },
  { name: '双鱼座', symbol: '♓' }
]
const mbtiOptions = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
const personalityTags = ['理性', '感性', '乐观', '独立', '有创造力', '坚韧', '细腻', '好奇', '内敛', '冒险', '自由']
const hobbyOptions = ['阅读', '旅行', '音乐', '写作', '摄影', '电影', '运动', '绘画', '咖啡', '游戏']

const form = reactive({
  nickname: '',
  gender: '',
  zodiac: '',
  mbti: '',
  profession: '',
  city: '',
  industry: '',
  company: '',
  personalityTags: [],
  hobbies: [],
  personalityTagLibrary: [],   // 新增
  hobbyLibrary: [],            // 新增
  childhood: { date: '', text: '' },
  joy: { date: '', text: '' },
  low: { date: '', text: '' },
  future: { vision: '', ideal: '' }
})

const avatarUrl = computed(() => {
  if (avatarLocal.value) return avatarLocal.value
  const nickname = form.nickname || 'User'
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(nickname)}&backgroundColor=b982ff`
})

const birthdayDisplay = computed(() => {
  if (!birthday.value) return '请选择生日'
  const [year, month, day] = birthday.value.split('-')
  return `${year}年${month}月${day}日`
})

/**
 * 合并预设数组与已选数组，去重返回完整库
 */
const buildInitialLibrary = (preset, selected) => {
  const library = [...preset]
  if (Array.isArray(selected)) {
    selected.forEach((tag) => {
      if (!library.includes(tag)) library.push(tag)
    })
  }
  return library
}

const syncFromStore = () => {
  const source = store.userProfile || store.registrationData || {}

  // 性格标签库：后端有则用后端，否则用预设 + 已选合并（老用户兼容）
  const personalityTagLibrary = Array.isArray(source.personalityTagLibrary) && source.personalityTagLibrary.length > 0
    ? [...source.personalityTagLibrary]
    : buildInitialLibrary(personalityTags, source.personalityTags)

  // 兴趣爱好库：后端有则用后端，否则用预设 + 已选合并（老用户兼容）
  const hobbyLibrary = Array.isArray(source.hobbyLibrary) && source.hobbyLibrary.length > 0
    ? [...source.hobbyLibrary]
    : buildInitialLibrary(hobbyOptions, source.hobbies)

  Object.assign(form, {
    nickname: source.nickname || '',
    gender: source.gender || '',
    zodiac: source.zodiac || '',
    mbti: source.mbti || '',
    profession: source.profession || '',
    city: source.city || '',
    industry: source.industry || '',
    company: source.company || '',
    personalityTags: Array.isArray(source.personalityTags) ? [...source.personalityTags] : [],
    hobbies: Array.isArray(source.hobbies) ? [...source.hobbies] : [],
    personalityTagLibrary,
    hobbyLibrary,
    childhood: { date: source.childhood?.date || '', text: source.childhood?.text || '' },
    joy: { date: source.joy?.date || '', text: source.joy?.text || '' },
    low: { date: source.low?.date || '', text: source.low?.text || '' },
    future: { vision: source.future?.vision || '', ideal: source.future?.ideal || '' }
  })
  birthday.value = source.birthday || ''
}

/**
 * 性格标签有序展示列表：
 * 1. 新增的自定义标签（不在预设中）按库顺序排在最前
 * 2. 已选中的其他标签紧随其后
 * 3. 其余未选中的预设标签排在最后
 */
const displayPersonalityTags = computed(() => {
  const selectedSet = new Set(form.personalityTags)
  const presetSet = new Set(personalityTags)

  const customTags = form.personalityTagLibrary.filter((tag) => !presetSet.has(tag))
  const selectedPreset = form.personalityTagLibrary.filter(
    (tag) => presetSet.has(tag) && selectedSet.has(tag)
  )
  const unselectedPreset = form.personalityTagLibrary.filter(
    (tag) => presetSet.has(tag) && !selectedSet.has(tag)
  )

  return [...customTags, ...selectedPreset, ...unselectedPreset]
})

/**
 * 兴趣爱好有序展示列表（逻辑同上）
 */
const displayHobbyTags = computed(() => {
  const selectedSet = new Set(form.hobbies)
  const presetSet = new Set(hobbyOptions)

  const customTags = form.hobbyLibrary.filter((tag) => !presetSet.has(tag))
  const selectedPreset = form.hobbyLibrary.filter(
    (tag) => presetSet.has(tag) && selectedSet.has(tag)
  )
  const unselectedPreset = form.hobbyLibrary.filter(
    (tag) => presetSet.has(tag) && !selectedSet.has(tag)
  )

  return [...customTags, ...selectedPreset, ...unselectedPreset]
})

const onBirthday = (event) => {
  birthday.value = event.detail.value
}

const toggleList = (list, tag, max) => {
  const index = list.indexOf(tag)
  if (index >= 0) {
    list.splice(index, 1)
    return
  }
  if (list.length >= max) {
    uni.showToast({ title: `最多选择${max}个`, icon: 'none' })
    return
  }
  list.push(tag)
}

const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      avatarLocal.value = res.tempFilePaths?.[0] || ''
      uni.showToast({ title: '头像已更新到本地预览', icon: 'none' })
    }
  })
}

/**
 * 跳转到管理标签页面
 */
const goTagManage = (type) => {
  uni.navigateTo({
    url: `/pages/onboarding/tag-manage?type=${type}`
  })
}

/**
 * 新增自定义标签（性格标签 / 兴趣爱好通用）
 * @param {string} type 'personality' 或 'hobby'
 */
const addCustomTag = (type) => {
  const isPersonality = type === 'personality'
  const library = isPersonality ? form.personalityTagLibrary : form.hobbyLibrary
  const selected = isPersonality ? form.personalityTags : form.hobbies
  const title = isPersonality ? '添加性格标签' : '添加兴趣爱好'

  uni.showModal({
    title,
    editable: true,
    placeholderText: '请输入标签（最多8个字符）',
    success: (res) => {
      const value = String(res.content || '').trim()
      if (!res.confirm) return
      if (!value) {
        uni.showToast({ title: '请输入标签内容', icon: 'none' })
        return
      }
      if (value.length > 8) {
        uni.showToast({ title: '标签最多8个字符', icon: 'none' })
        return
      }
      if (library.includes(value)) {
        uni.showToast({ title: '标签已存在', icon: 'none' })
        return
      }
      // 新标签插入到库数组最前面
      library.unshift(value)
      // 若已选未满 5 个，自动加入已选；否则仅提示
      if (selected.length >= 5) {
        uni.showToast({ title: '已达上限，仅加入标签库', icon: 'none' })
        return
      }
      selected.push(value)
    }
  })
}

const saveProfile = async () => {
  if (saving.value) return

  if (!form.nickname.trim()) {
    uni.showToast({ title: '请填写昵称', icon: 'none' })
    return
  }

  saving.value = true
  store.updateRegistration(JSON.parse(JSON.stringify({ ...form, birthday: birthday.value })))
  const res = await store.saveUserProfile()
  saving.value = false

  if (!res.success) {
    uni.showToast({ title: res.error || '保存失败', icon: 'none' })
    return
  }

  syncFromStore()
  uni.showToast({ title: '已保存', icon: 'success' })
  setTimeout(() => {
    if (isEdit.value) uni.navigateBack()
    else uni.reLaunch({ url: '/pages/main/index?tab=script' })
  }, 350)
}

const goBack = () => {
  if (isEdit.value) uni.navigateBack()
  else uni.reLaunch({ url: '/pages/main/index?tab=script' })
}

onMounted(async () => {
  const pages = getCurrentPages()
  isEdit.value = pages[pages.length - 1]?.options?.edit === '1'
  if (isEdit.value) {
    await store.fetchUserProfile()
  }
  syncFromStore()
})
</script>

<style scoped>
.profile-page {
  position: relative;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #050615;
}

.space-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 3%, rgba(87, 122, 255, 0.12), transparent 28%),
    radial-gradient(circle at 14% 26%, rgba(130, 71, 255, 0.16), transparent 30%),
    linear-gradient(180deg, #05081b 0%, #07031a 52%, #03020d 100%);
}

.status-space,
.topbar,
.scroll {
  position: relative;
  z-index: 1;
}

.status-space,
.topbar {
  flex-shrink: 0;
}

.topbar {
  height: 72rpx;
  display: grid;
  grid-template-columns: 76rpx 1fr 112rpx;
  align-items: center;
  padding: 0 28rpx;
}

.back {
  color: #fff;
  font-size: 56rpx;
  line-height: 1;
}

.title {
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: 900;
}

.gold {
  color: #ffd58c;
  text-shadow: 0 0 20rpx rgba(255, 202, 125, 0.45);
}

.save {
  color: #b94cff;
  font-size: 26rpx;
  text-align: right;
  justify-self: end;
  min-width: 96rpx;
}

.save.disabled {
  opacity: 0.58;
}

.scroll {
  flex: 1;
  height: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 24rpx 28rpx;
  margin-top: -6rpx;
}

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1rpx solid rgba(155, 110, 255, 0.14);
  background:
    radial-gradient(circle at 92% 12%, rgba(104, 66, 255, 0.1), transparent 34%),
    rgba(10, 13, 43, 0.54);
  box-shadow: inset 0 0 30rpx rgba(123, 60, 255, 0.05), 0 10rpx 36rpx rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(24rpx);
  -webkit-backdrop-filter: blur(24rpx);
}

.hero-card {
  min-height: 156rpx;
  border-radius: 22rpx;
  margin-bottom: 18rpx;
  padding: 18rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 22rpx;
}

.avatar-wrap {
  position: relative;
  width: 118rpx;
  height: 118rpx;
  flex-shrink: 0;
  padding: 5rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #9b54ff 46%, #4a67ff);
  box-shadow: 0 0 34rpx rgba(162, 91, 255, 0.52);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #27124a;
}

.avatar-edit {
  position: absolute;
  right: -4rpx;
  bottom: -2rpx;
  width: 38rpx;
  height: 38rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #8f4dff, #582cff);
  box-shadow: 0 0 18rpx rgba(158, 91, 255, 0.62);
}

.pen-icon {
  width: 17rpx;
  height: 6rpx;
  margin: 16rpx auto;
  border-radius: 999rpx;
  background: #fff;
  transform: rotate(-45deg);
}

.hero-info {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.hero-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.hero-name {
  color: #fff;
  font-size: 34rpx;
  font-weight: 900;
  line-height: 1.1;
}

.hero-star {
  font-size: 22rpx;
}

.hero-sub {
  display: block;
  margin-top: 8rpx;
  color: rgba(239, 232, 255, 0.84);
  font-size: 23rpx;
}

.hero-line {
  width: 280rpx;
  height: 1rpx;
  margin-top: 14rpx;
  background: rgba(180, 139, 255, 0.22);
}

.hero-quote {
  display: block;
  margin-top: 12rpx;
  color: #b94cff;
  font-size: 23rpx;
  font-weight: 700;
}

.hero-planet {
  position: absolute;
  right: 34rpx;
  top: 28rpx;
  width: 210rpx;
  height: 150rpx;
  opacity: 0.42;
}

.planet-core {
  position: absolute;
  right: 30rpx;
  top: 24rpx;
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #7d63ff, #4b1da8 62%, #19083b);
  box-shadow: 0 0 48rpx rgba(141, 78, 255, 0.58);
}

.planet-ring {
  position: absolute;
  right: 4rpx;
  top: 58rpx;
  width: 158rpx;
  height: 34rpx;
  border: 5rpx solid rgba(161, 92, 255, 0.55);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.panel {
  border-radius: 22rpx;
  margin-bottom: 18rpx;
  padding: 22rpx 24rpx;
}

.section-head,
.section-title-wrap {
  display: flex;
  align-items: center;
}

.section-head {
  min-height: 44rpx;
  gap: 10rpx;
}

.section-head.with-action {
  justify-content: space-between;
}

.section-title {
  color: rgba(239, 232, 255, 0.9);
  font-size: 24rpx;
  font-weight: 800;
}

.section-hint {
  color: rgba(222, 211, 240, 0.54);
  font-size: 22rpx;
}

.section-icon {
  position: relative;
  width: 28rpx;
  height: 28rpx;
  color: #a855ff;
  flex-shrink: 0;
}

.basic-icon::before {
  content: '♜';
  color: currentColor;
  font-size: 28rpx;
  line-height: 1;
}

.job-title-icon {
  border: 4rpx solid currentColor;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.job-title-icon::before {
  content: '';
  position: absolute;
  left: 7rpx;
  top: -8rpx;
  width: 10rpx;
  height: 7rpx;
  border: 3rpx solid currentColor;
  border-bottom: 0;
  border-radius: 6rpx 6rpx 0 0;
}

.smile-title-icon {
  border-radius: 50%;
  border: 3rpx solid currentColor;
}

.smile-title-icon::before,
.smile-title-icon::after {
  content: '';
  position: absolute;
  top: 8rpx;
  width: 4rpx;
  height: 4rpx;
  border-radius: 50%;
  background: currentColor;
}

.smile-title-icon::before { left: 7rpx; }
.smile-title-icon::after { right: 7rpx; }

.heart-title-icon::before {
  content: '♡';
  font-size: 30rpx;
  line-height: 1;
}

.bio-title-icon {
  border: 3rpx solid currentColor;
  border-radius: 5rpx;
  box-sizing: border-box;
}

.bio-title-icon::before,
.bio-title-icon::after {
  content: '';
  position: absolute;
  left: 6rpx;
  right: 6rpx;
  height: 3rpx;
  background: currentColor;
}

.bio-title-icon::before { top: 8rpx; }
.bio-title-icon::after { top: 15rpx; }

.profile-row {
  min-height: 60rpx;
  display: grid;
  grid-template-columns: 142rpx 1fr 24rpx;
  align-items: center;
  border-top: 1rpx solid rgba(180, 139, 255, 0.16);
}

.section-head + .profile-row {
  margin-top: 8rpx;
}

.row-label {
  color: rgba(205, 191, 238, 0.82);
  font-size: 23rpx;
}

.row-input,
.row-value {
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 23rpx;
  text-align: left;
}

.row-picker {
  min-width: 0;
}

.muted {
  color: rgba(217, 205, 238, 0.42);
}

.chevron {
  color: rgba(218, 204, 243, 0.7);
  font-size: 38rpx;
  line-height: 1;
  text-align: right;
}

.gender-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.choice,
.mbti-chip,
.tag-choice {
  height: 40rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(224, 214, 243, 0.72);
  border: 1rpx solid rgba(151, 111, 255, 0.42);
  background: rgba(255, 255, 255, 0.02);
  font-size: 22rpx;
  box-sizing: border-box;
}

.choice.active,
.mbti-chip.active,
.tag-choice.active {
  color: #fff;
  border-color: rgba(206, 82, 255, 0.95);
  background: linear-gradient(180deg, rgba(169, 61, 255, 0.62), rgba(107, 41, 206, 0.5));
  box-shadow: 0 0 18rpx rgba(168, 67, 255, 0.52), inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
}

.astro-panel {
  display: flex;
  flex-direction: column;
  gap: 22rpx;
  margin-top: 10rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(180, 139, 255, 0.16);
}

.astro-col {
  min-width: 0;
  padding: 0;
}

.mbti-col {
  border-left: 0;
  padding-top: 18rpx;
  border-top: 1rpx solid rgba(180, 139, 255, 0.12);
}

.astro-title-row {
  display: grid;
  grid-template-columns: 34rpx 76rpx 1fr 18rpx;
  align-items: center;
  gap: 8rpx;
}

.zodiac-head-icon,
.mbti-head-icon {
  width: 28rpx;
  height: 28rpx;
  color: #a855ff;
}

.zodiac-head-icon {
  font-size: 28rpx;
  line-height: 1;
}

.mbti-head-icon {
  border: 4rpx solid currentColor;
  border-radius: 4rpx;
  box-sizing: border-box;
}

.astro-title {
  color: rgba(222, 211, 240, 0.76);
  font-size: 23rpx;
}

.astro-current {
  color: rgba(255, 255, 255, 0.9);
  font-size: 22rpx;
  text-align: right;
}

.select-title {
  display: block;
  margin-top: 16rpx;
  color: rgba(222, 211, 240, 0.72);
  font-size: 21rpx;
}

.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14rpx 10rpx;
  margin-top: 14rpx;
}

.zodiac-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7rpx;
  color: rgba(226, 217, 246, 0.84);
  font-size: 20rpx;
}

.zodiac-bubble {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855ff;
  font-size: 26rpx;
  background: rgba(124, 58, 237, 0.28);
  border: 1rpx solid rgba(173, 84, 255, 0.36);
}

.zodiac-item.active .zodiac-bubble {
  color: #fff;
  border-color: rgba(215, 128, 255, 0.95);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(98, 47, 190, 0.66));
  box-shadow: 0 0 22rpx rgba(190, 92, 255, 0.72);
}

.mbti-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12rpx 14rpx;
  margin-top: 14rpx;
}

.mbti-chip {
  height: 40rpx;
  font-size: 20rpx;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14rpx 24rpx;
  margin-top: 20rpx;
}

.tag-choice {
  height: 40rpx;
  font-size: 21rpx;
}

.tag-choice.dashed {
  border-style: dashed;
  color: #c06dff;
}

.manage-link {
  color: #c06dff;
  font-size: 23rpx;
}

.bio-panel {
  margin-bottom: 0;
}

.bio {
  width: 100%;
  height: 116rpx;
  box-sizing: border-box;
  margin-top: 16rpx;
  padding: 18rpx 20rpx;
  border-radius: 18rpx;
  border: 1rpx solid rgba(151, 111, 255, 0.22);
  background: rgba(10, 12, 40, 0.66);
  color: #fff;
  font-size: 23rpx;
  line-height: 1.5;
}

.bio-count {
  display: block;
  margin-top: 8rpx;
  text-align: right;
  color: rgba(224, 214, 243, 0.56);
  font-size: 20rpx;
}

.placeholder {
  color: rgba(214, 204, 235, 0.42);
}
</style>
