refactor: split project into web and server directories

- Move frontend to web/ directory
- Add server/ directory for backend
- Restructure project for前后端分离架构

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/src/components/layout/DocFilterBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="doc-filters" aria-label="单据筛选">
+    <div class="filter-item">
+      <span class="filter-label">申请月份</span>
+      <Dropdown v-model="docFilters.month" :options="docMonths" placeholder="选择月份" appendTo="body" class="filter-dropdown">
+        <template #option="{ option }">
+          {{ formatMonth(option) }}
+        </template>
+        <template #value="{ value }">
+          {{ formatMonth(value) }}
+        </template>
+      </Dropdown>
+    </div>
+    <div class="filter-item">
+      <span class="filter-label">申请类型</span>
+      <Dropdown v-model="docFilters.type" :options="docTypes" placeholder="选择类型" appendTo="body" class="filter-dropdown" />
+    </div>
+    <div class="filter-item">
+      <span class="filter-label">单据状态</span>
+      <Dropdown v-model="docFilters.status" :options="docStatuses" placeholder="选择状态" appendTo="body" class="filter-dropdown" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import Dropdown from 'primevue/dropdown'
+
+defineProps({
+  docFilters: { type: Object, required: true },
+  docMonths: { type: Array, required: true },
+  docTypes: { type: Array, required: true },
+  docStatuses: { type: Array, required: true }
+})
+
+function formatMonth(m) {
+  if (!m) return ''
+  const [y, mm] = m.split('-')
+  return `${y}年${parseInt(mm)}月`
+}
+</script>
+
+<style scoped>
+.doc-filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 14px;
+  padding: 16px 28px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+.filter-item { display: grid; gap: 6px; }
+.filter-label { color: var(--muted); font-size: 12px; font-weight: 700; }
+.filter-dropdown { width: 100%; }
+</style>

web/src/components/layout/FilterBar.vue

@@ -0,0 +1,156 @@
+<template>
+  <section class="filters" :class="{ compact }" aria-label="筛选条件">
+    <template v-if="!compact">
+      <label>
+      <span>法人主体</span>
+      <select v-model="filters.entity">
+        <option>全部主体</option>
+        <option>Northstar China Ltd.</option>
+        <option>Northstar Singapore Pte.</option>
+        <option>Northstar US Inc.</option>
+      </select>
+    </label>
+    <label>
+      <span>费用类型</span>
+      <select v-model="filters.category">
+        <option>全部费用</option>
+        <option>机票</option>
+        <option>酒店</option>
+        <option>火车/用车</option>
+        <option>餐补及杂费</option>
+      </select>
+    </label>
+    <label>
+      <span>风险等级</span>
+      <select v-model="filters.risk">
+        <option>全部风险</option>
+        <option>高风险</option>
+        <option>需解释</option>
+        <option>低风险</option>
+      </select>
+      </label>
+    </template>
+    <div class="segmented-wrap" :class="{ compact }">
+      <span v-if="!compact">时间范围</span>
+      <div class="segmented" role="tablist" aria-label="处理视图">
+        <button
+          v-for="range in ranges"
+          :key="range"
+          :class="{ active: activeRange === range }"
+          type="button"
+          @click="emit('update:activeRange', range)"
+        >
+          {{ range }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  filters: { type: Object, required: true },
+  ranges: { type: Array, required: true },
+  activeRange: { type: String, required: true },
+  compact: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:activeRange'])
+</script>
+
+<style scoped>
+.filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
+  gap: 14px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid var(--line);
+  background: #fff;
+}
+
+.filters.compact {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 16px;
+}
+
+.filters label,
+.segmented-wrap {
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.filters select {
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ink);
+}
+
+.segmented-wrap {
+  justify-self: end;
+}
+
+.segmented {
+  align-self: end;
+  display: inline-flex;
+  gap: 0;
+  min-height: 40px;
+  padding: 3px;
+  border-radius: 10px;
+  background: #f1f5f9;
+}
+
+.segmented button {
+  position: relative;
+  min-height: 34px;
+  padding: 0 20px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.segmented button:hover:not(.active) {
+  color: #334155;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.segmented button.active {
+  background: #fff;
+  color: #1e293b;
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+@media (max-width: 980px) {
+  .filters {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .segmented-wrap {
+    justify-self: start;
+  }
+}
+
+@media (max-width: 760px) {
+  .filters {
+    grid-template-columns: 1fr;
+    padding: 0 16px 16px;
+  }
+
+  .segmented {
+    width: 100%;
+  }
+}
+</style>

web/src/components/layout/SidebarRail.vue

@@ -0,0 +1,323 @@
+<template>
+  <aside class="rail" aria-label="主导航">
+    <div class="rail-brand">
+      <div class="brand-mark" aria-hidden="true">
+        <svg viewBox="0 0 36 36">
+          <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
+          <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
+        </svg>
+      </div>
+      <strong class="brand-name">星海科技</strong>
+      <button class="brand-toggle" type="button" aria-label="打开 AI 助手" @click="emit('openChat')">
+        <i class="mdi mdi-chevron-double-left"></i>
+      </button>
+    </div>
+
+    <nav class="rail-nav" aria-label="功能导航">
+      <button
+        v-for="item in decoratedNavItems"
+        :key="item.id"
+        class="nav-btn"
+        :class="{ active: activeView === item.id }"
+        type="button"
+        @click="emit('navigate', item.id)"
+      >
+        <span class="nav-icon" v-html="item.icon"></span>
+        <span class="nav-label">{{ item.displayLabel }}</span>
+        <span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
+      </button>
+    </nav>
+
+    <button class="rail-user" type="button" aria-label="打开用户菜单">
+      <span class="user-avatar">张</span>
+      <span class="user-copy">
+        <strong>张晓明</strong>
+        <span>财务管理员</span>
+      </span>
+      <i class="mdi mdi-chevron-down"></i>
+    </button>
+  </aside>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  navItems: { type: Array, required: true },
+  activeView: { type: String, required: true }
+})
+
+const emit = defineEmits(['navigate', 'openChat'])
+
+const sidebarMeta = {
+  overview: { label: '总览' },
+  workbench: { label: '个人工作台' },
+  requests: { label: '差旅申请/报销' },
+  approval: { label: '审批中心', badge: '12' },
+  chat: { label: 'AI助手' },
+  policies: { label: '知识管理' },
+  audit: { label: '技能中心' },
+  employees: { label: '员工管理' }
+}
+
+const decoratedNavItems = computed(() =>
+  props.navItems.map((item) => ({
+    ...item,
+    displayLabel: sidebarMeta[item.id]?.label ?? item.label,
+    badge: sidebarMeta[item.id]?.badge
+  }))
+)
+</script>
+
+<style scoped>
+.rail {
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,250,.96)),
+    #fff;
+  border-right: 1px solid #dbe4ee;
+  box-shadow: 1px 0 0 rgba(15,23,42,.02);
+  z-index: 20;
+}
+
+.rail-brand {
+  min-height: 86px;
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 10px;
+  padding: 22px 20px 18px;
+}
+
+.brand-mark {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  color: #07936f;
+}
+
+.brand-mark svg {
+  width: 30px;
+  height: 30px;
+  fill: currentColor;
+}
+
+.brand-name {
+  min-width: 0;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.brand-toggle {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #718096;
+  transition: background 180ms var(--ease), color 180ms var(--ease);
+}
+
+.brand-toggle:hover {
+  background: #eef7f4;
+  color: #07936f;
+}
+
+.rail-nav {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  padding: 16px 20px;
+  overflow-y: auto;
+}
+
+.nav-btn {
+  width: 100%;
+  min-height: 48px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+  text-align: left;
+  transition:
+    background 180ms var(--ease),
+    border-color 180ms var(--ease),
+    color 180ms var(--ease),
+    box-shadow 180ms var(--ease);
+}
+
+.nav-btn:hover {
+  background: rgba(16,185,129,.07);
+  color: #0f9f78;
+}
+
+.nav-btn.active {
+  background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.08));
+  border-color: rgba(16,185,129,.10);
+  color: #059669;
+  box-shadow: inset 3px 0 0 #10b981;
+}
+
+.nav-icon {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 7px;
+  color: currentColor;
+}
+
+.nav-btn :deep(svg) {
+  width: 19px;
+  height: 19px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.nav-label {
+  min-width: 0;
+  color: currentColor;
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-badge {
+  min-width: 34px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #ff5b67;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.rail-user {
+  min-width: 0;
+  min-height: 74px;
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) 22px;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  padding: 16px 20px 18px;
+  border: 0;
+  border-top: 1px solid transparent;
+  background: transparent;
+  color: #64748b;
+  text-align: left;
+  transition: background 180ms var(--ease), border-color 180ms var(--ease);
+}
+
+.rail-user:hover {
+  border-top-color: #e2e8f0;
+  background: rgba(255,255,255,.72);
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #0f9f78, #65d6b4);
+  box-shadow: 0 6px 14px rgba(15,159,120,.18);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.user-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.user-copy strong {
+  color: #334155;
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-copy span {
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rail-user .mdi {
+  justify-self: end;
+  color: #718096;
+  font-size: 13px;
+}
+
+@media (max-width: 980px) {
+  .rail {
+    position: relative;
+    height: auto;
+  }
+}
+
+@media (max-width: 760px) {
+  .rail {
+    border-right: 0;
+    border-bottom: 1px solid #dbe4ee;
+  }
+
+  .rail-brand {
+    min-height: 68px;
+    padding: 16px;
+  }
+
+  .rail-nav {
+    display: flex;
+    gap: 10px;
+    padding: 8px 16px 16px;
+    overflow-x: auto;
+  }
+
+  .nav-btn {
+    min-width: 148px;
+  }
+
+  .rail-user {
+    display: none;
+  }
+}
+</style>

web/src/components/layout/TopBar.vue

@@ -0,0 +1,635 @@
+<template>
+  <header class="topbar" :class="{ 'chat-mode': isChat }">
+    <div class="title-group">
+      <div class="eyebrow">{{ isChat ? 'Smart Finance Q&A' : 'Smart Expense Operations' }}</div>
+      <h1>{{ currentView.title }}</h1>
+      <p>{{ currentView.desc }}</p>
+    </div>
+
+    <div class="top-actions">
+      <template v-if="isChat">
+        <div class="kpi-chips">
+          <div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="isOverview">
+        <div class="range-combo" aria-label="首页时间范围">
+          <div class="range-shell">
+            <span class="range-meta">
+              <i class="mdi mdi-calendar"></i>
+              <span>{{ activeDateLabel }}</span>
+            </span>
+
+            <div class="range-tabs" role="tablist" aria-label="时间范围">
+              <button
+                v-for="option in rangeOptions"
+                :key="option.value"
+                type="button"
+                role="tab"
+                :aria-selected="activeRange === option.value"
+                :class="{ active: activeRange === option.value }"
+                @click="setRange(option.value)"
+              >
+                {{ option.label }}
+              </button>
+            </div>
+          </div>
+
+          <div class="custom-range-wrap">
+            <button
+              class="custom-range-btn"
+              type="button"
+              :class="{ active: isCustomRange }"
+              :aria-expanded="calendarOpen"
+              aria-haspopup="dialog"
+              @click="calendarOpen = !calendarOpen"
+            >
+              <i class="mdi mdi-calendar-plus"></i>
+              <span>选择时间段</span>
+            </button>
+
+            <div v-if="calendarOpen" class="calendar-popover" role="dialog" aria-label="选择看板时间段">
+              <header>
+                <strong>选择看板时间段</strong>
+                <button type="button" aria-label="关闭日期选择" @click="calendarOpen = false">
+                  <i class="mdi mdi-close"></i>
+                </button>
+              </header>
+
+              <div class="date-fields">
+                <label>
+                  <span>开始日期</span>
+                  <input v-model="draftStart" type="date" />
+                </label>
+                <label>
+                  <span>结束日期</span>
+                  <input v-model="draftEnd" type="date" />
+                </label>
+              </div>
+
+              <footer>
+                <button class="ghost-btn" type="button" @click="calendarOpen = false">取消</button>
+                <button class="apply-btn" type="button" :disabled="!canApplyCustomRange" @click="applyCustomRange">
+                  应用
+                </button>
+              </footer>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="isRequests">
+        <div class="kpi-chips">
+          <div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>单</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="isApproval">
+        <div class="kpi-chips">
+          <div v-for="kpi in approvalKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
+        <div class="topbar-spacer"></div>
+        <button class="create-top-btn" type="button">
+          <i class="mdi mdi-check-circle"></i>
+          <span>批量通过</span>
+        </button>
+      </template>
+
+      <template v-else-if="isPolicies">
+        <div class="kpi-chips">
+          <div v-for="kpi in knowledgeKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
+            <span class="chip-value">{{ kpi.value }}</span>
+            <span class="chip-label">{{ kpi.label }}</span>
+            <span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  currentView: { type: Object, required: true },
+  search: { type: String, default: '' },
+  activeView: { type: String, default: '' },
+  ranges: { type: Array, default: () => [] },
+  activeRange: { type: String, default: '' },
+  customRange: {
+    type: Object,
+    default: () => ({ start: '2024-07-06', end: '2024-07-12' })
+  }
+})
+
+const emit = defineEmits([
+  'update:search',
+  'update:activeRange',
+  'update:customRange',
+  'batchApprove',
+  'openChat',
+  'newApplication'
+])
+
+const isChat = computed(() => props.activeView === 'chat')
+const isOverview = computed(() => props.activeView === 'overview')
+const isRequests = computed(() => props.activeView === 'requests')
+const isApproval = computed(() => props.activeView === 'approval')
+const isPolicies = computed(() => props.activeView === 'policies')
+
+const requestKpis = [
+  { label: '全部单据', value: 30, delta: '+8', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' },
+  { label: '待提交', value: 5, delta: '-1', trend: 'down', arrow: 'mdi mdi-arrow-down', color: '#f59e0b' },
+  { label: '审批中', value: 8, delta: '+2', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#3b82f6' },
+  { label: '已完成', value: 17, delta: '+7', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' }
+]
+
+const chatKpis = [
+  { label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },
+  { label: '已解决问题', value: 72, unit: '条', meta: '解决率 83.7%', trend: 'up', color: '#3b82f6' },
+  { label: '知识命中率', value: '92.3', unit: '%', meta: '较昨日 +2.6%', trend: 'up', color: '#8b5cf6' },
+  { label: '平均响应时长', value: 2.1, unit: 's', meta: '较昨日 -0.3s', trend: 'down', color: '#f59e0b' }
+]
+
+const approvalKpis = [
+  { label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: '#059669' },
+  { label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', trend: 'up', color: '#ef4444' },
+  { label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', trend: 'down', color: '#f59e0b' },
+  { label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: '#10b981' }
+]
+
+const knowledgeKpis = [
+  { label: '文档总数', value: '1,248', meta: '较上周 +68', trend: 'up', icon: 'mdi mdi-file-document-outline', color: '#10b981' },
+  { label: '文件夹总数', value: '36', meta: '较上周 +2', trend: 'up', icon: 'mdi mdi-folder-outline', color: '#3b82f6' },
+  { label: '问答总量', value: '8,562', meta: '较上周 +321', trend: 'up', icon: 'mdi mdi-comment-text-multiple-outline', color: '#8b5cf6' },
+  { label: '知识命中率', value: '87.3%', meta: '较上周 +1.2%', trend: 'up', icon: 'mdi mdi-bullseye-arrow', color: '#f59e0b' }
+]
+const calendarOpen = ref(false)
+const draftStart = ref(props.customRange.start)
+const draftEnd = ref(props.customRange.end)
+
+const fallbackRangeLabels = ['今日', '本周', '本月']
+const dateLabels = {
+  '今日': '2024-07-12',
+  '本周': '2024-07-06 ~ 2024-07-12',
+  '本月': '2024-07'
+}
+
+const rangeOptions = computed(() =>
+  props.ranges.map((range, index) => ({
+    value: range,
+    label: fallbackRangeLabels[index] ?? String(range)
+  }))
+)
+
+const activeOption = computed(() =>
+  rangeOptions.value.find((option) => option.value === props.activeRange) ?? rangeOptions.value[0]
+)
+
+const isCustomRange = computed(() => props.activeRange === 'custom')
+const activeDateLabel = computed(() => {
+  if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
+  return dateLabels[activeOption.value?.label] ?? '2024-07-06 ~ 2024-07-12'
+})
+
+const canApplyCustomRange = computed(() =>
+  Boolean(draftStart.value && draftEnd.value && draftStart.value <= draftEnd.value)
+)
+
+watch(
+  () => props.customRange,
+  (range) => {
+    draftStart.value = range.start
+    draftEnd.value = range.end
+  },
+  { deep: true }
+)
+
+function setRange(range) {
+  emit('update:activeRange', range)
+  calendarOpen.value = false
+}
+
+function applyCustomRange() {
+  if (!canApplyCustomRange.value) return
+  emit('update:customRange', { start: draftStart.value, end: draftEnd.value })
+  emit('update:activeRange', 'custom')
+  calendarOpen.value = false
+}
+
+function formatRangeLabel(start, end) {
+  if (!start || !end) return '选择时间段'
+  if (start === end) return start
+  return `${start} ~ ${end}`
+}
+</script>
+
+<style scoped>
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px 24px 20px;
+  background: #fff;
+}
+
+.topbar.chat-mode {
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eef2f7;
+}
+
+.title-group {
+  min-width: 0;
+}
+
+.eyebrow {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(59, 130, 246, 0.10));
+  color: #0d9668;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+.topbar h1 {
+  color: #0f172a;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+
+.topbar p {
+  margin-top: 6px;
+  max-width: 720px;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.range-combo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.range-shell {
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  padding: 3px;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
+}
+
+.range-meta {
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-right: 1px solid #e2e8f0;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.range-meta .mdi {
+  color: #10b981;
+}
+
+.range-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding-left: 3px;
+}
+
+.range-tabs button {
+  height: 34px;
+  min-width: 54px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
+}
+
+.range-tabs button:hover:not(.active) {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.range-tabs button.active {
+  background: #10b981;
+  color: #fff;
+  box-shadow: 0 6px 14px rgba(16, 185, 129, .18);
+}
+
+.custom-range-wrap {
+  position: relative;
+}
+
+.custom-range-btn {
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 13px;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.custom-range-btn:hover,
+.custom-range-btn.active {
+  border-color: rgba(16, 185, 129, .34);
+  background: #f6fffb;
+  color: #0f9f78;
+}
+
+.calendar-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  width: 336px;
+  z-index: 40;
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid #d7e0ea;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
+}
+
+.calendar-popover header,
+.calendar-popover footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.calendar-popover header strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.calendar-popover header button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+}
+
+.date-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.date-fields label {
+  display: grid;
+  gap: 6px;
+}
+
+.date-fields span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.date-fields input {
+  width: 100%;
+  height: 38px;
+  padding: 0 9px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.ghost-btn,
+.apply-btn {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.ghost-btn {
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #334155;
+}
+
+.apply-btn {
+  border: 0;
+  background: #10b981;
+  color: #fff;
+}
+
+.apply-btn:disabled {
+  cursor: not-allowed;
+  background: #cbd5e1;
+}
+
+.kpi-chips {
+  display: flex;
+  gap: 10px;
+}
+
+.kpi-chip {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  gap: 2px 10px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 8%, #fff), color-mix(in srgb, var(--chip-color) 3%, #f8fafc));
+  border: 1px solid color-mix(in srgb, var(--chip-color) 18%, #e2e8f0);
+}
+
+.chip-value {
+  grid-row: 1 / 3;
+  align-self: center;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.chip-value small {
+  font-size: 13px;
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+.chip-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.chip-delta {
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.chip-delta.up { color: #059669; }
+.chip-delta.down { color: #f59e0b; }
+
+.topbar-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.create-top-btn {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: 8px;
+  background: #059669;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 750;
+  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
+  white-space: nowrap;
+}
+
+.create-top-btn:hover {
+  background: #047857;
+}
+
+@media (max-width: 1120px) {
+  .range-combo {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 960px) {
+  .topbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .top-actions,
+  .search-wrap,
+  .search-wrap.wide,
+  .month-chip,
+  .qa-filter,
+  .new-question-btn {
+    width: 100%;
+  }
+
+  .range-combo {
+    justify-content: stretch;
+  }
+
+  .range-shell {
+    flex: 1;
+  }
+
+  .range-meta {
+    flex: 1;
+  }
+
+  .custom-range-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .calendar-popover {
+    right: auto;
+    left: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .range-combo {
+    display: grid;
+    gap: 8px;
+  }
+
+  .range-shell {
+    height: auto;
+    display: grid;
+    gap: 4px;
+  }
+
+  .range-meta {
+    width: 100%;
+    border-right: 0;
+    border-bottom: 1px solid #e2e8f0;
+    justify-content: center;
+  }
+
+  .range-tabs {
+    width: 100%;
+    padding-left: 0;
+  }
+
+  .range-tabs button {
+    flex: 1;
+    padding: 0 8px;
+  }
+
+  .calendar-popover {
+    width: min(336px, calc(100vw - 32px));
+  }
+
+  .date-fields {
+    grid-template-columns: 1fr;
+  }
+}
+</style>