<template>
  <div class="home">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <div class="hero-badge">
          <span class="badge-dot"></span>
          <span>AI 驱动数据生成</span>
        </div>
        <h1 class="hero-title">
          构建高质量<br />
          <span class="glow-text">训练数据集</span>
        </h1>
        <p class="hero-subtitle">
          通过智能分割、AI 生成问答和无缝评估，
          将文档转化为结构化数据集。
        </p>
        <div class="hero-actions">
          <el-button type="primary" size="large" @click="createProject" class="btn-primary">
            <el-icon><Plus /></el-icon>
            创建项目
          </el-button>
          <el-button size="large" @click="goToDataSquare" class="btn-secondary">
            <el-icon><Grid /></el-icon>
            数据集广场
          </el-button>
        </div>
      </div>

      <!-- Hero Visual - 全息粒子矩阵风格 -->
      <div class="hero-visual">
        <!-- Card 1: 多格式支持 -->
        <div class="hologram-card card-1">
          <div class="card-bg"></div>
          <div class="scan-line"></div>
          <div class="particles-container">
            <span class="particle" style="--x: 20%; --y: 30%"></span>
            <span class="particle" style="--x: 80%; --y: 20%"></span>
            <span class="particle" style="--x: 50%; --y: 70%"></span>
            <span class="particle" style="--x: 30%; --y: 60%"></span>
            <span class="particle" style="--x: 70%; --y: 80%"></span>
            <span class="particle" style="--x: 15%; --y: 85%"></span>
            <span class="particle" style="--x: 85%; --y: 45%"></span>
            <span class="particle" style="--x: 45%; --y: 15%"></span>
          </div>
          <div class="pulse-ring"></div>
          <div class="card-content">
            <div class="icon-wrapper cyan">
              <div class="icon-glow"></div>
              <el-icon size="28"><Document /></el-icon>
            </div>
            <span class="card-label">多格式支持</span>
            <span class="card-sublabel">PDF DOCX EPUB Excel</span>
          </div>
        </div>

        <!-- Card 2: AI 生成 -->
        <div class="hologram-card card-2">
          <div class="card-bg"></div>
          <div class="scan-line"></div>
          <div class="particles-container">
            <span class="particle" style="--x: 25%; --y: 35%"></span>
            <span class="particle" style="--x: 75%; --y: 25%"></span>
            <span class="particle" style="--x: 55%; --y: 65%"></span>
            <span class="particle" style="--x: 35%; --y: 55%"></span>
            <span class="particle" style="--x: 65%; --y: 85%"></span>
            <span class="particle" style="--x: 20%; --y: 80%"></span>
            <span class="particle" style="--x: 80%; --y: 50%"></span>
            <span class="particle" style="--x: 50%; --y: 20%"></span>
          </div>
          <div class="pulse-ring"></div>
          <div class="card-content">
            <div class="icon-wrapper violet">
              <div class="icon-glow"></div>
              <el-icon size="28"><MagicStick /></el-icon>
            </div>
            <span class="card-label">AI 生成</span>
            <span class="card-sublabel">智能问答 自动标注</span>
          </div>
        </div>

        <!-- Card 3: 智能评估 -->
        <div class="hologram-card card-3">
          <div class="card-bg"></div>
          <div class="scan-line"></div>
          <div class="particles-container">
            <span class="particle" style="--x: 30%; --y: 25%"></span>
            <span class="particle" style="--x: 70%; --y: 35%"></span>
            <span class="particle" style="--x: 45%; --y: 75%"></span>
            <span class="particle" style="--x: 25%; --y: 65%"></span>
            <span class="particle" style="--x: 75%; --y: 85%"></span>
            <span class="particle" style="--x: 10%; --y: 75%"></span>
            <span class="particle" style="--x: 90%; --y: 40%"></span>
            <span class="particle" style="--x: 40%; --y: 10%"></span>
          </div>
          <div class="pulse-ring"></div>
          <div class="card-content">
            <div class="icon-wrapper teal">
              <div class="icon-glow"></div>
              <el-icon size="28"><DataAnalysis /></el-icon>
            </div>
            <span class="card-label">智能评估</span>
            <span class="card-sublabel">质量分析 模型对比</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Quick Actions -->
    <section class="quick-actions">
      <div class="action-card" @click="goToPlayground">
        <div class="action-icon">
          <el-icon><ChatDotRound /></el-icon>
        </div>
        <div class="action-info">
          <h3>测试场</h3>
          <p>交互式测试模型能力</p>
        </div>
        <el-icon class="action-arrow"><ArrowRight /></el-icon>
      </div>
    </section>

    <!-- Projects Section -->
    <section class="projects-section">
      <div class="section-header">
        <div class="section-title">
          <h2>我的项目</h2>
          <p>{{ projects.length }} 个项目</p>
        </div>
        <el-button type="primary" @click="createProject" class="add-btn">
          <el-icon><Plus /></el-icon>
          新建
        </el-button>
      </div>

      <!-- Projects Grid -->
      <div class="projects-grid" v-loading="loading">
        <!-- Empty State -->
        <div v-if="!loading && projects.length === 0" class="empty-state">
          <div class="empty-illustration">
            <div class="circle-1"></div>
            <div class="circle-2"></div>
            <div class="circle-3"></div>
            <el-icon size="48"><FolderAdd /></el-icon>
          </div>
          <h3>暂无项目</h3>
          <p>创建您的第一个项目开始生成数据集</p>
          <el-button type="primary" @click="createProject">创建项目</el-button>
        </div>

        <!-- Project Cards -->
        <div
          v-else
          v-for="(project, index) in projects"
          :key="project.id"
          class="project-card"
          :style="{ '--delay': index * 0.1 + 's' }"
          @click="openProject(project)"
        >
          <div class="card-glow"></div>
          <div class="card-header">
            <div class="card-avatar">
              <el-icon><Folder /></el-icon>
            </div>
            <div class="card-menu">
              <el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, project)">
                <el-icon class="menu-icon"><MoreFilled /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <h3 class="card-title">{{ project.name }}</h3>
          <p class="card-desc">{{ project.description || '暂无描述' }}</p>
          <div class="card-footer">
            <span class="card-date">
              <el-icon><Calendar /></el-icon>
              {{ formatDate(project.created_at) }}
            </span>
            <div class="card-status">
              <span class="status-dot"></span>
              活跃
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Create Dialog -->
    <el-dialog v-model="dialogVisible" title="" width="480px" class="create-dialog" :show-close="false" align-center>
      <template #header>
        <div class="dialog-header">
          <div class="header-glow"></div>
          <div class="header-content">
            <div class="dialog-icon-new">
              <el-icon size="24"><FolderAdd /></el-icon>
            </div>
            <div class="header-text">
              <h3>创建新项目</h3>
              <p>开始构建您的AI训练数据集</p>
            </div>
          </div>
          <button class="close-btn" @click="dialogVisible = false">
            <el-icon><Close /></el-icon>
          </button>
        </div>
      </template>
      <div class="dialog-body">
        <div class="form-card">
          <div class="input-group">
            <label class="input-label">
              <span class="label-icon">✦</span>
              项目名称
            </label>
            <el-input
              v-model="form.name"
              placeholder="例如：客服问答数据集"
              size="large"
              class="custom-input"
            />
          </div>
          <div class="input-group">
            <label class="input-label">
              <span class="label-icon">✦</span>
              项目描述
            </label>
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="3"
              placeholder="描述这个项目的用途和数据类型..."
              class="custom-input"
            />
          </div>
        </div>

        <!-- Quick Templates -->
        <div class="templates-section">
          <span class="templates-label">快速开始模板</span>
          <div class="templates-grid">
            <div class="template-card" @click="useTemplate('qa')">
              <el-icon><ChatDotRound /></el-icon>
              <span>问答对</span>
            </div>
            <div class="template-card" @click="useTemplate('conversation')">
              <el-icon><ChatLineRound /></el-icon>
              <span>对话</span>
            </div>
            <div class="template-card" @click="useTemplate('instruction')">
              <el-icon><Promotion /></el-icon>
              <span>指令</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btn-cancel">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="submitting" class="btn-create">
            <el-icon v-if="!submitting"><Plus /></el-icon>
            创建项目
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { projectApi } from '@/api'

const router = useRouter()

const loading = ref(false)
const projects = ref([])
const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref(null)

const form = reactive({
  name: '',
  description: ''
})

const rules = {
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
}

const fetchProjects = async () => {
  loading.value = true
  try {
    const res = await projectApi.list()
    projects.value = res.data.projects || []
  } catch (error) {
    projects.value = []
  } finally {
    loading.value = false
  }
}

const createProject = () => {
  form.name = ''
  form.description = ''
  dialogVisible.value = true
}

const useTemplate = (type) => {
  const templates = {
    qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
    conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
    instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
  }
  const t = templates[type]
  form.name = t.name
  form.description = t.description
}

const submitForm = async () => {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return

  submitting.value = true
  try {
    const res = await projectApi.create(form)
    ElMessage.success('项目创建成功')
    dialogVisible.value = false
    fetchProjects()
    router.push(`/project/${res.data.id}`)
  } catch (error) {
    ElMessage.error('创建项目失败')
  } finally {
    submitting.value = false
  }
}

const openProject = (project) => {
  router.push(`/project/${project.id}`)
}

const handleCommand = async (cmd, project) => {
  if (cmd === 'delete') {
    try {
      await ElMessageBox.confirm(
        `确定要删除项目 "${project.name}" 吗？`,
        '删除项目',
        { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
      )
      await projectApi.delete(project.id)
      ElMessage.success('项目已删除')
      fetchProjects()
    } catch (e) {
      if (e !== 'cancel') ElMessage.error('删除失败')
    }
  }
}

const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', year: 'numeric' })
}

const goToDataSquare = () => router.push('/data-square')
const goToPlayground = () => router.push('/playground')

onMounted(() => fetchProjects())
</script>

<style scoped>
.home {
  min-height: 100vh;
  padding: 60px 40px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--accent-primary-muted);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 100px;
  font-size: 13px;
  color: var(--accent-primary);
  margin-bottom: 20px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

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

.hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 14px;
}

.btn-primary {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-md);
}

.btn-secondary {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* ========================
   Hero Visual - 全息粒子矩阵
   ======================== */
.hero-visual {
  position: relative;
  height: 420px;
  perspective: 1000px;
}

/* 全息卡片基础样式 */
.hologram-card {
  position: absolute;
  width: 180px;
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 18, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  animation: hologramFloat 6s ease-in-out infinite;
  overflow: hidden;
}

/* 卡片位置 */
.hologram-card.card-1 {
  top: 10px;
  right: 60px;
  animation-delay: 0s;
}

.hologram-card.card-2 {
  top: 130px;
  left: 30px;
  animation-delay: -2s;
}

.hologram-card.card-3 {
  bottom: 20px;
  right: 80px;
  animation-delay: -4s;
}

@keyframes hologramFloat {
  0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
  25% { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(0) rotateX(0) rotateY(0); }
  75% { transform: translateY(-5px) rotateX(-1deg) rotateY(2deg); }
}

/* 悬浮时的3D效果 */
.hologram-card:hover {
  transform: translateY(-15px) scale(1.05);
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 212, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hologram-card:hover .scan-line {
  animation: scanMove 1.5s linear infinite;
}

.hologram-card:hover .pulse-ring {
  animation: pulseRing 2s ease-out infinite;
}

.hologram-card:hover .particle {
  animation: particleBurst 1s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

/* 卡片背景 */
.card-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
  opacity: 0.8;
}

.card-2 .card-bg {
  background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
              radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
}

.card-3 .card-bg {
  background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
              radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
}

/* 扫描线效果 */
.scan-line {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    transparent 0%,
    rgba(0, 212, 255, 0.03) 50%,
    transparent 100%
  );
  transform: rotate(30deg);
  pointer-events: none;
}

@keyframes scanMove {
  0% { transform: translateY(-100%) rotate(30deg); }
  100% { transform: translateY(100%) rotate(30deg); }
}

/* 粒子容器 */
.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  left: var(--x);
  top: var(--y);
}

.card-1 .particle {
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}

.card-2 .particle {
  background: var(--accent-secondary);
  box-shadow: 0 0 6px var(--accent-secondary);
}

.card-3 .particle {
  background: var(--accent-tertiary);
  box-shadow: 0 0 6px var(--accent-tertiary);
}

@keyframes particleBurst {
  0% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* 脉动光环 */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.3);
  opacity: 0;
  pointer-events: none;
}

.card-2 .pulse-ring { border-color: rgba(124, 58, 237, 0.3); }
.card-3 .pulse-ring { border-color: rgba(6, 182, 212, 0.3); }

@keyframes pulseRing {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* 卡片内容 */
.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* 图标包装器 */
.icon-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.icon-wrapper.cyan {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 100%);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--accent-primary);
}

.icon-wrapper.violet {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--accent-secondary);
}

.icon-wrapper.teal {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%);
  border-color: rgba(6, 182, 212, 0.3);
  color: var(--accent-tertiary);
}

/* 图标发光 */
.icon-glow {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: inherit;
  filter: blur(15px);
  opacity: 0.5;
  z-index: -1;
}

.hologram-card:hover .icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

.hologram-card:hover .icon-glow { opacity: 0.8; }

/* 标签文字 */
.card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.card-sublabel {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 响应式 */
@media (max-width: 1200px) {
  .hero-visual { display: none; }
}

/* Quick Actions */
.quick-actions { margin-bottom: 50px; }

.action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
}

.action-card:hover {
  border-color: var(--accent-primary);
  transform: translateX(6px);
}

.action-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary-muted);
  border-radius: var(--radius-md);
  font-size: 24px;
  color: var(--accent-primary);
}

.action-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.action-info p { font-size: 14px; color: var(--text-tertiary); }

.action-arrow {
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
  transition: transform var(--transition-base);
}

.action-card:hover .action-arrow {
  transform: translateX(4px);
  color: var(--accent-primary);
}

/* Projects Section */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.section-title h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.section-title p { font-size: 14px; color: var(--text-tertiary); }

.add-btn { padding: 10px 18px; border-radius: var(--radius-md); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  text-align: center;
}

.empty-illustration {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.empty-illustration .el-icon {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
}

.circle-1, .circle-2, .circle-3 {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border-default);
}

.circle-1 { width: 100%; height: 100%; animation: rotate 20s linear infinite; }
.circle-2 { width: 70%; height: 70%; animation: rotate 15s linear infinite reverse; }
.circle-3 { width: 40%; height: 40%; background: var(--bg-tertiary); }

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

.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--text-tertiary); margin-bottom: 24px; }

/* Project Card */
.project-card {
  position: relative;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  overflow: hidden;
  animation: cardFadeIn 0.5s ease backwards;
  animation-delay: var(--delay);
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.project-card:hover .card-glow { opacity: 1; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-avatar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary-muted);
  border-radius: var(--radius-md);
  font-size: 20px;
  color: var(--accent-primary);
}

.menu-icon {
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.menu-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

.card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }

.card-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success);
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
}

/* Dialog - New Design */
.create-dialog :deep(.el-dialog) {
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(20, 20, 30, 0.98) 0%, rgba(15, 15, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 212, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.create-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}

.dialog-header {
  position: relative;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.header-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
  animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.header-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dialog-icon-new {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 14px;
  color: var(--accent-primary);
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.2); }
}

.header-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.header-text p {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Dialog Body */
.create-dialog :deep(.el-dialog__body) {
  padding: 28px;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.label-icon {
  color: var(--accent-primary);
  font-size: 10px;
}

.custom-input :deep(.el-input__wrapper) {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: none;
  padding: 4px 14px;
  transition: all 0.25s ease;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: rgba(0, 212, 255, 0.3);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.custom-input :deep(.el-input__inner) {
  color: var(--text-primary);
}

.custom-input :deep(.el-input__inner::placeholder) {
  color: var(--text-muted);
}

.custom-input :deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: none;
  padding: 12px 14px;
  color: var(--text-primary);
  resize: none;
  transition: all 0.25s ease;
}

.custom-input :deep(.el-textarea__inner:hover) {
  border-color: rgba(0, 212, 255, 0.3);
}

.custom-input :deep(.el-textarea__inner:focus) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

/* Templates Section */
.templates-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.templates-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.template-card:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
}

.template-card .el-icon {
  font-size: 22px;
  color: var(--accent-primary);
}

.template-card span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Dialog Footer */
.create-dialog :deep(.el-dialog__footer) {
  padding: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.btn-create {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
  border: none;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.35);
}

/* Responsive */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 640px) {
  .home { padding: 40px 20px 60px; }
  .hero-title { font-size: 36px; }
  .hero-actions { flex-direction: column; }
  .projects-grid { grid-template-columns: 1fr; }
}
</style>
