宜博 / lemonboss

<template>
  <div class="company-dashboard">
    <AppNav />
<!-- Removed top action bar -->
    <!-- ═══ Empty State (No Companies) ═══ -->
    <section class="company-empty" v-if="companies.length === 0">
      <div class="empty-state-card">
        <span class="empty-icon">🏗️</span>
        <h2>自治架构观测站</h2>
        <p>没有任何正在运行中的公司或工作舱。</p>
        <p style="color: var(--accent); font-weight: 600;">请使用右侧侧边栏召出「MasterBot」，用自然语言指示它去建立您的第一家公司。</p>
      </div>
    </section>

    <!-- ═══ Company Detail ═══ -->
    <section class="company-detail" v-if="selectedCompany">
      <div class="detail-header">
        <div class="company-switcher-wrapper">
          <div class="company-switcher" @click.stop="showDropdown = !showDropdown">
            <span class="switcher-icon">🏢</span>
            <h2 class="switcher-name">{{ selectedCompany.name }}</h2>
            <span class="switcher-arrow">▼</span>
          </div>
          <div class="switcher-dropdown" v-if="showDropdown">
            <div class="dropdown-scroll">
              <div 
                v-for="c in companies" :key="c.id" 
                class="switcher-item" :class="{active: c.id === selectedCompany.id}"
                @click="goToCompany(c.id); showDropdown = false">
                <span class="item-icon">🏢</span> {{ c.name }}
              </div>
            </div>
            <div class="switcher-divider"></div>
            <div class="switcher-item create-btn" style="cursor:default; border:none; opacity: 0.6;">
              <span class="item-icon">🤖</span> 请呼叫 MasterBot 创建
            </div>
          </div>
        </div>
        
        <div class="detail-header-actions" style="margin-left: auto;">
          <button class="btn-templates" @click="showTemplates = !showTemplates" style="border: none; background: transparent;">
            📦 模板库 ({{ templates.length }})
          </button>
        </div>
      </div>
      <p class="detail-desc" style="margin-left:8px;">{{ selectedCompany.description || '暂无描述' }}</p>

<!-- Tabs moved to AppNav -->

      <!-- Tab: Agents -->
      <div v-if="activeTab === 'agents'" class="tab-content">
        <div class="section-header">
          <h3>团队成员</h3>
          <button class="btn-sm" @click="showHireModal = true">＋ 招聘</button>
        </div>
        <div class="agents-grid">
          <div v-for="agent in companyAgents" :key="agent.id" class="agent-card">
            <div class="agent-avatar">{{ agentEmoji(agent.type) }}</div>
            <div class="agent-info">
              <span class="agent-name">{{ agent.name }}</span>
              <span class="agent-type">{{ agent.type }}</span>
            </div>
            <span class="agent-status" :class="agent.status">{{ agent.status }}</span>
          </div>
          <div v-if="companyAgents.length === 0" class="empty-mini">暂无成员</div>
        </div>
      </div>

      <!-- Tab: Pipelines -->
      <div v-if="activeTab === 'pipelines'" class="tab-content">
        <div class="section-header">
          <h3>SOP 流水线</h3>
        </div>
        <div class="pipeline-list">
          <div v-for="p in pipelines" :key="p.id" class="pipeline-card" @click="loadPipelineDetail(p.id)">
            <div class="pipeline-header">
              <span class="pipeline-name">⚙️ {{ p.name }}</span>
              <span class="pipeline-steps">{{ p.stepCount }} 步</span>
            </div>
            <span class="card-status" :class="p.status">{{ p.status }}</span>
          </div>
          <div v-if="pipelines.length === 0" class="empty-mini">暂无流水线</div>
        </div>

        <!-- Pipeline Detail -->
        <div v-if="selectedPipeline" class="pipeline-detail">
          <h4>{{ selectedPipeline.name }}</h4>
          <div class="step-flow">
            <div
              v-for="(step, idx) in selectedPipeline.steps"
              :key="idx"
              class="step-node"
            >
              <div class="step-index">{{ idx + 1 }}</div>
              <div class="step-info">
                <span class="step-name">{{ step.name }}</span>
                <span class="step-agent">🤖 {{ step.agent }}</span>
              </div>
              <div v-if="idx < selectedPipeline.steps.length - 1" class="step-arrow">→</div>
            </div>
          </div>
          <div v-if="selectedPipeline.cron" class="cron-badge">
            🔄 自动触发: 每 {{ selectedPipeline.cron.intervalHours }} 小时
          </div>
        </div>

        <!-- Runs -->
        <div v-if="pipelineRuns.length > 0" class="runs-section">
          <h4>运行记录</h4>
          <div v-for="run in pipelineRuns" :key="run.runId" class="run-card">
            <div class="run-header">
              <span class="run-id">{{ run.runId }}</span>
              <span class="card-status" :class="run.status">{{ run.status }}</span>
            </div>
            <div class="run-meta">
              <span>📌 {{ run.pipelineName }}</span>
              <span>步骤 {{ run.currentStep + 1 }}/{{ run.totalSteps }}</span>
              <span>🚀 {{ run.trigger }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Goals -->
      <div v-if="activeTab === 'goals'" class="tab-content">
        <div class="section-header">
          <h3>OKR 目标</h3>
        </div>
        <div class="goals-list">
          <div v-for="g in goals" :key="g.id" class="goal-card">
            <div class="goal-header">
              <span class="goal-id">{{ g.id }}</span>
              <span class="card-status" :class="g.status">{{ g.status }}</span>
            </div>
            <h4 class="goal-title">{{ g.title }}</h4>
            <div class="goal-meta">
              <span>👤 {{ g.owner }}</span>
            </div>
          </div>
          <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
        </div>
      </div>
    </section>


    <!-- ═══ Templates Panel ═══ -->
    <div v-if="showTemplates" class="templates-panel">
      <div class="panel-header">
        <h3>📦 模板库</h3>
        <button @click="showTemplates = false">✕</button>
      </div>
      <div class="template-list">
        <div v-for="tpl in templates" :key="tpl.id" class="template-card">
          <div class="tpl-name">{{ tpl.name }}</div>
          <div class="tpl-meta">
            <span class="tpl-type">{{ tpl.type }}</span>
            <span v-if="tpl.benchmarkScore" class="tpl-score">⭐ {{ tpl.benchmarkScore }}</span>
            <span class="tpl-used">用 {{ tpl.usedCount }} 次</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import AppNav from '@/components/AppNav.vue'
import { useCompanies } from '@/composables/useCompanies'

const router = useRouter()
const route = useRoute()

const { companies, loadCompanies, activeCompanyId } = useCompanies()

const selectedCompany = ref(null)
const companyAgents = ref([])
const pipelines = ref([])
const pipelineRuns = ref([])
const selectedPipeline = ref(null)
const goals = ref([])
const templates = ref([])
const activeTab = ref('agents')
const showTemplates = ref(false)
const showDropdown = ref(false)

function statusLabel(status) {
  const map = { creating: '创建中', running: '运行中', paused: '已暂停', shutdown: '已关停' }
  return map[status] || status
}

function agentEmoji(type) {
  const map = { cxo: '👔', role: '🏢', skill: '⚙️', specialist: '🔬' }
  return map[type] || '🤖'
}

async function initPage() {
  await loadCompanies()
  if (route.path === '/company' && companies.value.length > 0) {
    const target = activeCompanyId.value || companies.value[0].id
    router.replace(`/${target}/agents`)
  }
}

async function loadTemplates() {
  try {
    const { data } = await axios.get('/api/company/templates')
    templates.value = data
  } catch (e) { console.error(e) }
}

async function loadCompanyData(id, tab) {
  try {
    if (!selectedCompany.value || selectedCompany.value.id !== id) {
      const { data } = await axios.get(`/api/company/${id}`)
      selectedCompany.value = data
    }
    activeTab.value = tab || 'agents'
    
    if (activeTab.value === 'agents') await loadCompanyAgents(id)
    if (activeTab.value === 'pipelines') await loadPipelines(id)
    if (activeTab.value === 'goals') await loadGoals(id)
  } catch (e) { console.error(e) }
}

function goToCompany(id) {
  router.push(`/${id}/agents`)
}

// goToList is no longer used, dropdown replaces it

function goToTab(key) {
  if (!selectedCompany.value) return
  router.push(`/${selectedCompany.value.id}/${key}`)
}

watch(() => route.params, async (params) => {
  if (route.name === 'CompanyDetail' && params.id) {
    await loadCompanyData(params.id, params.tab)
  } else if (route.path === '/company') {
    if (companies.value.length > 0) {
      const target = activeCompanyId.value || companies.value[0].id
      router.replace(`/${target}/agents`)
    } else {
      selectedCompany.value = null
    }
  }
}, { immediate: true })

async function loadCompanyAgents(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/agents`)
    companyAgents.value = data
  } catch (e) { console.error(e) }
}

async function loadPipelines(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/pipelines`)
    pipelines.value = data
    selectedPipeline.value = null
    // load runs
    const { data: runs } = await axios.get(`/api/company/${id}/pipelines/runs/list`)
    pipelineRuns.value = runs
  } catch (e) { console.error(e) }
}

async function loadPipelineDetail(pipelineId) {
  try {
    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/pipelines/${pipelineId}`)
    selectedPipeline.value = data
  } catch (e) { console.error(e) }
}

async function loadGoals(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/goals`)
    goals.value = data
  } catch (e) { console.error(e) }
}

// switchTab removed, handled by goToTab and router watcher

onMounted(() => {
  loadCompanies()
  loadTemplates()
  document.addEventListener('click', closeDropdown)
})

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
})

function closeDropdown() {
  showDropdown.value = false
}
</script>

<style scoped>
.company-dashboard {
  min-height: 100vh;
  padding: 0;
  background: var(--bg-primary);
}

/* Removed separate Action Bar classes, moved to detail-header */
.btn-create {
  background: linear-gradient(135deg, var(--accent), #059669);
  color: #fff; border: none; padding: 8px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.btn-create:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(16,185,129,0.3); }

.btn-templates {
  color: var(--text-secondary); padding: 8px 16px;
  border-radius: 10px; font-size: 13px; cursor: pointer;
  transition: all 0.2s;
}
.btn-templates:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.btn-sm {
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--border-active); padding: 6px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-sm:hover { background: var(--accent-bg-hover); }

.btn-back {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 14px; cursor: pointer; padding: 4px 0;
  transition: color 0.2s;
}
.btn-back:hover { color: var(--accent); }

.btn-cancel {
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-primary); padding: 8px 20px;
  border-radius: 10px; font-size: 14px; cursor: pointer;
}

/* ═══ Company Grid ═══ */
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; padding: 32px;
}

.company-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 16px; padding: 24px; cursor: pointer;
  transition: all 0.25s ease;
}
.company-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(16,185,129,0.08);
}
.company-card.status-running { border-left: 3px solid var(--accent); }
.company-card.status-shutdown { opacity: 0.5; }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-emoji { font-size: 32px; }
.card-status {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.card-status.running { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.creating { background: rgba(59,130,246,0.15); color: var(--blue-text); }
.card-status.paused { background: rgba(251,191,36,0.15); color: var(--yellow-text); }
.card-status.shutdown { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.card-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.completed { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.failed { background: rgba(239,68,68,0.15); color: #f87171; }
.card-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
.card-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.card-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }

.card-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-tertiary); }

/* ═══ Empty State ═══ */
.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 64px; display: block; margin-bottom: 16px; }
.empty-mini { padding: 32px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ═══ Company Detail ═══ */
.company-detail { padding: 32px; }
.detail-header { margin-bottom: 24px; }
.detail-title-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.detail-title-row h2 { font-size: 24px; font-weight: 800; }
.detail-desc { color: var(--text-tertiary); font-size: 14px; }


.tab-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h3 { font-size: 16px; font-weight: 700; }

/* ═══ Agents Grid ═══ */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.agent-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: 16px; transition: all 0.2s;
}
.agent-card:hover { border-color: var(--border-active); }
.agent-avatar { font-size: 28px; }
.agent-info { flex: 1; }
.agent-name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.agent-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.agent-status { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 600; }
.agent-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.agent-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
.agent-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }
.agent-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }

/* ═══ Pipelines ═══ */
.pipeline-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pipeline-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
}
.pipeline-card:hover { border-color: var(--border-active); }
.pipeline-header { display: flex; align-items: center; gap: 12px; }
.pipeline-name { font-weight: 600; font-size: 14px; }
.pipeline-steps { font-size: 12px; color: var(--text-muted); }

.pipeline-detail {
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: 24px; margin-bottom: 24px;
}
.pipeline-detail h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.step-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.step-node { display: flex; align-items: center; gap: 8px; }
.step-index {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.step-info { display: flex; flex-direction: column; }
.step-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.step-agent { font-size: 11px; color: var(--text-muted); }
.step-arrow { font-size: 18px; color: var(--text-muted); margin: 0 4px; }

.cron-badge {
  margin-top: 12px; padding: 8px 14px;
  background: rgba(139,92,246,0.1); color: var(--purple-text);
  border-radius: 8px; font-size: 12px; font-weight: 600;
  display: inline-block;
}

.runs-section h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-secondary); }
.run-card {
  padding: 14px 18px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 10px;
  margin-bottom: 8px;
}
.run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.run-id { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: monospace; }
.run-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }

/* ═══ Goals ═══ */
.goals-list { display: flex; flex-direction: column; gap: 8px; }
.goal-card {
  padding: 16px 20px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 12px;
}
.goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.goal-id { font-size: 12px; font-weight: 700; color: var(--accent); font-family: monospace; }
.goal-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.goal-meta { font-size: 12px; color: var(--text-muted); }

/* ═══ Modal ═══ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  border-radius: 20px; padding: 32px; width: 420px; max-width: 90vw;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.modal label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin: 12px 0 6px; text-transform: uppercase;
}
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-input);
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  transition: border-color 0.2s;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-input-focus);
}
.modal-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }

.hire-result {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; animation: fadeIn 0.3s;
}
.hire-result.hired_from_template { background: rgba(16,185,129,0.1); color: var(--accent-light); }
.hire-result.training { background: rgba(139,92,246,0.1); color: var(--purple-text); }
.hire-result.already_exists { background: rgba(251,191,36,0.1); color: var(--yellow-text); }

/* ═══ Templates Panel ═══ */
.templates-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 340px;
  background: var(--bg-secondary); border-left: 1px solid var(--border-primary);
  z-index: 150; padding: 24px; overflow-y: auto;
  animation: slideLeft 0.3s ease;
}
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: none; } }

.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.panel-header h3 { font-size: 16px; font-weight: 700; }
.panel-header button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }

.template-list { display: flex; flex-direction: column; gap: 8px; }
.template-card {
  padding: 14px 16px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 10px;
}
.tpl-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tpl-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.tpl-type { background: var(--bg-surface-hover); padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.tpl-score { color: var(--yellow-text); }

/* ═══ Company Switcher Header ═══ */
.detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  position: relative;
  height: 64px;
}
.company-switcher-wrapper {
  position: relative;
}
.company-switcher {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
  transition: all 0.2s; user-select: none; margin-left: -12px;
}
.company-switcher:hover { background: var(--bg-surface-hover); }
.switcher-icon { font-size: 20px; }
.switcher-name { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-primary); }
.switcher-arrow { font-size: 10px; color: var(--text-muted); margin-left: 4px; }

.switcher-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; width: 220px;
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 100;
  display: flex; flex-direction: column; overflow: hidden;
  animation: dropIn 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}
@keyframes dropIn { from{opacity:0;transform:translateY(-10px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.dropdown-scroll { max-height: 240px; overflow-y: auto; padding: 6px; }
.switcher-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.switcher-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.switcher-item.active { background: var(--accent-bg); color: var(--accent-light); margin-bottom: 2px;}
.item-icon { font-size: 14px; opacity: 0.8; }
.switcher-divider { height: 1px; background: var(--border-primary); margin: 0; }
.switcher-item.create-btn { padding: 12px; color: var(--accent-light); margin: 4px; border: 1px dashed var(--border-active); justify-content: center;}
.switcher-item.create-btn:hover { background: var(--accent-bg); color: var(--accent-light); }

.detail-desc {
  font-size: 13px; color: var(--text-secondary); padding: 0 20px 10px;
  border-bottom: 1px solid var(--border-primary);
}

/* ═══ Empty State ═══ */
.company-empty { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 100px); width: 100%;}
.empty-state-card { background: var(--bg-surface); padding: 40px; border-radius: 16px; border: 1px dashed var(--border-active); text-align: center; max-width: 400px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.empty-state-card h2 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; color: var(--text-primary); }
.empty-state-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.empty-icon { font-size: 54px; opacity: 0.9; animation: float 3s infinite ease-in-out; display: inline-block; filter: drop-shadow(0 4px 8px rgba(16,185,129,0.3)); }
</style>