feat: 优化 Knowledge 页面并添加样式文件

- 重构 Knowledge 页面代码
- 新增 knowledge.css 样式文件
- 添加知识库截图

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

web/src/views/Knowledge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import './database/database.css'
+import './knowledge/knowledge.css'
 
 // 模拟知识库数据
 const knowledgeBases = ref([
@@ -47,18 +47,38 @@ const filteredKnowledgeBases = () => {
   )
 }
 
-// 新建知识库
+// 新建知识库 - 分步骤
 const showCreateDialog = ref(false)
+const createStep = ref(1)
 const newKbForm = ref({
   name: '',
   description: '',
 })
+const embeddingConfig = ref({
+  provider: '',
+  model: '',
+})
 
-const createKnowledgeBase = () => {
+const openCreateDialog = () => {
+  createStep.value = 1
+  newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
+  showCreateDialog.value = true
+}
+
+const nextStep = () => {
   if (!newKbForm.value.name) {
     ElMessage.warning('Please enter knowledge base name')
     return
   }
+  createStep.value = 2
+}
+
+const prevStep = () => {
+  createStep.value = 1
+}
+
+const createKnowledgeBase = () => {
   knowledgeBases.value.push({
     id: Date.now().toString(),
     name: newKbForm.value.name,
@@ -69,12 +89,14 @@ const createKnowledgeBase = () => {
     status: 'ready'
   })
   newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
   showCreateDialog.value = false
   ElMessage.success('Knowledge base created successfully')
 }
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
   showCreateDialog.value = false
 }
 
@@ -132,7 +154,7 @@ const viewDetail = (kb: any) => {
         <i class="fa-solid fa-brain text-gray-400"></i>
         <span class="font-medium">Knowledge Base</span>
       </div>
-      <button @click="showCreateDialog = true" class="btn-primary">
+      <button @click="openCreateDialog" class="btn-primary">
         <i class="fa-solid fa-plus"></i>
         New Knowledge Base
       </button>
@@ -195,21 +217,21 @@ const viewDetail = (kb: any) => {
               <div class="flex items-center justify-center gap-2">
                 <button
                   @click="viewDetail(kb)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="View"
                 >
-                  <i class="fa-solid fa-eye text-gray-400"></i>
+                  <i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="openEdit(kb)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="Edit"
                 >
-                  <i class="fa-solid fa-pen text-gray-400"></i>
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="deleteKb(kb.id)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="Delete"
                 >
                   <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
@@ -233,26 +255,116 @@ const viewDetail = (kb: any) => {
     <!-- 新建知识库弹窗 -->
     <el-dialog
       v-model="showCreateDialog"
-      title="Create Knowledge Base"
-      width="500px"
+      title="创建知识库"
+      width="1100px"
       :close-on-click-modal="false"
-      class="kb-dialog"
+      :show-close="false"
+      class="kb-dialog kb-create-dialog"
     >
-      <p class="dialog-desc">Create a new knowledge base to store your documents</p>
+      <div class="create-layout">
+        <!-- 左侧：选项列表 -->
+        <div class="sidebar">
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 1 }"
+            @click="createStep = 1"
+          >
+            <i class="fa-solid fa-layer-group menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">基本信息</span>
+              <span class="menu-desc">知识库名称和描述</span>
+            </div>
+            <i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 2 }"
+            @click="createStep = 2"
+          >
+            <i class="fa-solid fa-brain menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Embedding 配置</span>
+              <span class="menu-desc">向量化和检索设置</span>
+            </div>
+            <i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+        </div>
 
-      <el-form label-position="top" class="kb-form">
-        <el-form-item label="Name">
-          <el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
-        </el-form-item>
-        <el-form-item label="Description">
-          <el-input v-model="newKbForm.description" type="textarea" :rows="3" placeholder="Enter description" />
-        </el-form-item>
-      </el-form>
+        <!-- 右侧：内容区 -->
+        <div class="content">
+          <!-- 基本信息 -->
+          <div v-if="createStep === 1" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-layer-group section-icon"></i>
+              <span class="section-title">基本信息</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="名称" required>
+                <el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Embedding 配置 -->
+          <div v-if="createStep === 2" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-brain section-icon"></i>
+              <span class="section-title">Embedding 配置</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Embedding Provider">
+                <el-select v-model="embeddingConfig.provider" placeholder="请选择 Embedding 服务商" class="w-full">
+                  <el-option label="OpenAI" value="openai">
+                    <div class="provider-option">
+                      <i class="fa-solid fa-robot"></i>
+                      <span>OpenAI</span>
+                    </div>
+                  </el-option>
+                  <el-option label="Ollama" value="ollama">
+                    <div class="provider-option">
+                      <i class="fa-solid fa-microchip"></i>
+                      <span>Ollama</span>
+                    </div>
+                  </el-option>
+                  <el-option label="Azure OpenAI" value="azure">
+                    <div class="provider-option">
+                      <i class="fa-brands fa-microsoft"></i>
+                      <span>Azure OpenAI</span>
+                    </div>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Embedding Model">
+                <el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button text @click="cancelCreate">Cancel</el-button>
-          <el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
+          <div class="footer-left">
+            <span class="step-hint">填写完基本信息后，点击下一步继续配置</span>
+          </div>
+          <div class="footer-right">
+            <el-button @click="cancelCreate" class="cancel-btn">取消</el-button>
+            <el-button v-if="createStep === 2" @click="createStep = 1" class="prev-btn">
+              <i class="fa-solid fa-arrow-left"></i>
+              上一步
+            </el-button>
+            <el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
+              下一步
+              <i class="fa-solid fa-arrow-right"></i>
+            </el-button>
+            <el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
+              <i class="fa-solid fa-plus"></i>
+              创建
+            </el-button>
+          </div>
         </div>
       </template>
     </el-dialog>
@@ -285,182 +397,3 @@ const viewDetail = (kb: any) => {
     </el-dialog>
   </div>
 </template>
-
-<style scoped>
-/* 按钮样式 */
-.btn-primary {
-  background-color: #f97316;
-  border: none;
-  color: white;
-  padding: 10px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background-color: #ea580c;
-}
-
-/* 搜索框 */
-.search-input {
-  background-color: #171922;
-  border: 1px solid #374151;
-  color: white;
-  padding: 10px 12px 10px 36px;
-  border-radius: 8px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.search-input:focus {
-  border-color: #f97316;
-}
-
-.search-input::placeholder {
-  color: #6b7280;
-}
-
-/* 表格样式 */
-.bg-dark-700 {
-  background-color: #1f2937;
-}
-
-.bg-dark-600 {
-  background-color: #111827;
-}
-
-.table-row {
-  border-bottom: 1px solid #374151;
-  transition: background-color 0.2s;
-}
-
-.table-row:hover {
-  background-color: #374151;
-}
-
-/* 空状态 - 使用 database.css 中的样式 */
-.empty-box {
-  min-height: 340px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-icon {
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #1f2937, #111827);
-  border-radius: 24px;
-  margin-bottom: 20px;
-}
-
-.empty-icon i {
-  font-size: 40px;
-  color: #6b7280;
-}
-
-.empty-text {
-  color: #d1d5db;
-  font-size: 1.25rem;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.empty-tip {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-/* 弹窗样式 */
-.kb-dialog :deep(.el-dialog) {
-  background-color: #1f2937;
-  border-radius: 12px;
-  border: 1px solid #374151;
-}
-
-.kb-dialog :deep(.el-dialog__header) {
-  padding: 20px 24px;
-  border-bottom: 1px solid #374151;
-}
-
-.kb-dialog :deep(.el-dialog__title) {
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn) {
-  top: 20px;
-  right: 20px;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
-  color: #9ca3af;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
-  color: #f97316;
-}
-
-.kb-dialog :deep(.el-dialog__body) {
-  padding: 24px;
-}
-
-.kb-dialog :deep(.el-dialog__footer) {
-  padding: 16px 24px;
-  border-top: 1px solid #374151;
-}
-
-.dialog-desc {
-  font-size: 14px;
-  color: #9ca3af;
-  margin-bottom: 20px;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-.kb-form :deep(.el-form-item__label) {
-  color: #d1d5db;
-  font-size: 14px;
-}
-
-.kb-form :deep(.el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #374151;
-  box-shadow: none;
-}
-
-.kb-form :deep(.el-input__inner) {
-  color: white;
-}
-
-.kb-form :deep(.el-textarea__inner) {
-  background-color: #171922;
-  border: 1px solid #374151;
-  color: white;
-  box-shadow: none;
-}
-
-.kb-dialog :deep(.el-button--primary) {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-.kb-dialog :deep(.el-button--primary:hover) {
-  background-color: #ea580c;
-  border-color: #ea580c;
-}
-</style>

web/src/views/knowledge/knowledge.css

@@ -0,0 +1,504 @@
+/* Knowledge 页面样式 */
+
+/* 按钮样式 */
+.btn-primary {
+  background-color: #f97316;
+  border: none;
+  color: white;
+  padding: 10px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.btn-primary:hover {
+  background-color: #ea580c;
+}
+
+/* 搜索框 */
+.search-input {
+  background-color: #171922;
+  border: 1px solid #374151;
+  color: white;
+  padding: 10px 12px 10px 36px;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #f97316;
+}
+
+.search-input::placeholder {
+  color: #6b7280;
+}
+
+/* 表格样式 */
+.bg-dark-700 {
+  background-color: #171922;
+}
+
+.bg-dark-600 {
+  background-color: #1a1c25;
+}
+
+.table-row {
+  border-bottom: 1px solid #374151;
+}
+
+/* 空状态 */
+.empty-box {
+  min-height: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1f2937, #111827);
+  border-radius: 24px;
+  margin-bottom: 20px;
+}
+
+.empty-icon i {
+  font-size: 40px;
+  color: #6b7280;
+}
+
+.empty-text {
+  color: #d1d5db;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* 基础弹窗样式 */
+.kb-dialog :deep(.el-dialog) {
+  background-color: #1f2937;
+  border-radius: 12px;
+  border: 1px solid #374151;
+}
+
+.kb-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #374151;
+}
+
+.kb-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn) {
+  top: 20px;
+  right: 20px;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #9ca3af;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #f97316;
+}
+
+.kb-dialog :deep(.el-dialog__body) {
+  padding: 24px;
+}
+
+.kb-dialog :deep(.el-dialog__footer) {
+  padding: 16px 24px;
+  border-top: 1px solid #374151;
+}
+
+.dialog-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 20px;
+}
+
+.kb-dialog :deep(.el-button--primary) {
+  background-color: #f97316;
+  border-color: #f97316;
+}
+
+.kb-dialog :deep(.el-button--primary:hover) {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* 创建弹窗样式 */
+.kb-create-dialog :deep(.el-dialog) {
+  background-color: #0f1419;
+  border-radius: 16px;
+  border: 1px solid #1e2832;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.kb-create-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #1e2832;
+}
+
+.kb-create-dialog :deep(.el-dialog__title) {
+  color: #e8eaed;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn) {
+  top: 18px;
+  right: 18px;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #5f6368;
+  font-size: 18px;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #e8eaed;
+}
+
+.kb-create-dialog :deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.kb-create-dialog :deep(.el-dialog__footer) {
+  padding: 20px 24px;
+  border-top: 1px solid #1e2832;
+  background-color: #0d1117;
+  border-radius: 0 0 16px 16px;
+}
+
+/* 创建内容布局 */
+.create-layout {
+  display: flex;
+  min-height: 560px;
+}
+
+/* 左侧 sidebar */
+.sidebar {
+  width: 280px;
+  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
+  border-right: 1px solid #1e2832;
+  padding: 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  border: 1px solid transparent;
+}
+
+.menu-item:hover {
+  background-color: rgba(54, 191, 250, 0.06);
+  border-color: rgba(54, 191, 250, 0.1);
+}
+
+.menu-item.active {
+  background: linear-gradient(135deg, rgba(54, 191, 250, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
+  border-color: rgba(54, 191, 250, 0.25);
+}
+
+.menu-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background-color: #1e2832;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #5f6368;
+  transition: all 0.3s ease;
+}
+
+.menu-item.active .menu-icon {
+  background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(54, 191, 250, 0.3);
+}
+
+.menu-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8eaed;
+  transition: color 0.2s;
+}
+
+.menu-item.active .menu-title {
+  color: #36bffa;
+}
+
+.menu-desc {
+  font-size: 12px;
+  color: #5f6368;
+}
+
+.menu-arrow {
+  font-size: 12px;
+  color: #36bffa;
+}
+
+/* 右侧内容区 */
+.content {
+  flex: 1;
+  padding: 36px 48px;
+  background-color: #0f1419;
+}
+
+.form-content {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 区块标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 32px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #1e2832;
+}
+
+.section-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(54, 191, 250, 0.2) 0%, rgba(14, 165, 233, 0.12) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #36bffa;
+  font-size: 18px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #e8eaed;
+}
+
+/* 表单样式 */
+.kb-form :deep(.el-form-item__label) {
+  color: #9aa0a6;
+  font-size: 13px;
+  font-weight: 500;
+  padding-bottom: 8px;
+}
+
+.kb-form :deep(.el-input__wrapper) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 4px 12px;
+}
+
+.kb-form :deep(.el-input__wrapper:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-input__wrapper.is-focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+.kb-form :deep(.el-input__inner) {
+  color: #e8eaed;
+  font-size: 14px;
+}
+
+.kb-form :deep(.el-input__inner::placeholder) {
+  color: #5f6368;
+}
+
+.kb-form :deep(.el-textarea__inner) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  color: #e8eaed;
+  font-size: 14px;
+  box-shadow: none;
+  padding: 12px;
+}
+
+.kb-form :deep(.el-textarea__inner:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-textarea__inner:focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+.kb-form :deep(.el-select) {
+  width: 100%;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 4px 12px;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper.is-focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+/* 提供商选项 */
+.provider-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #e8eaed;
+}
+
+.provider-option i {
+  color: #36bffa;
+}
+
+/* 底部按钮区域 */
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+}
+
+.step-hint {
+  font-size: 12px;
+  color: #5f6368;
+}
+
+.footer-right {
+  display: flex;
+  gap: 10px;
+}
+
+.cancel-btn {
+  background-color: transparent;
+  border: 1px solid #2d3640;
+  color: #9aa0a6;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.cancel-btn:hover {
+  border-color: #5f6368;
+  color: #e8eaed;
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.prev-btn {
+  background-color: #1e2832;
+  border: none;
+  color: #9aa0a6;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prev-btn:hover {
+  background-color: #2d3640;
+  color: #e8eaed;
+}
+
+.next-btn {
+  background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(54, 191, 250, 0.25);
+}
+
+.next-btn:hover {
+  background: linear-gradient(135deg, #4dc3ff 0%, #36bffa 100%);
+  box-shadow: 0 6px 16px rgba(54, 191, 250, 0.35);
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+}
+
+.confirm-btn:hover {
+  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
+}