/* QQBot 管理平台 UI 美化样式 - 简洁现代版 */

/* 页面淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app {
  animation: fadeIn 0.4s ease-out;
}

/* 按钮美化 - 简洁风格 */
button, .btn, .el-button, [class*="button"] {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

button:hover, .btn:hover, .el-button:hover, [class*="button"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(117, 104, 255, 0.2) !important;
}

button:active, .btn:active, .el-button:active, [class*="button"]:active {
  transform: translateY(0) !important;
}

/* 卡片美化 */
.card, .el-card, [class*="card"] {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.card:hover, .el-card:hover, [class*="card"]:hover {
  box-shadow: 0 8px 24px rgba(117, 104, 255, 0.12) !important;
}

/* 输入框美化 */
input, .el-input__inner, textarea, [class*="input"] {
  border-radius: 8px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

input:focus, .el-input__inner:focus, textarea:focus, [class*="input"]:focus {
  border-color: #7568ff !important;
  box-shadow: 0 0 0 3px rgba(117, 104, 255, 0.08) !important;
}

/* 导航栏美化 */
.navbar, .el-menu, header, [class*="nav"] {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 表格美化 */
table, .el-table {
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

table tr:hover, .el-table__row:hover {
  background: rgba(117, 104, 255, 0.03) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(117, 104, 255, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(117, 104, 255, 0.5);
}

/* 徽章/标签美化 */
.badge, .el-tag, [class*="tag"] {
  border-radius: 16px !important;
  font-weight: 500 !important;
}

/* 对话框/模态框美化 */
.dialog, .el-dialog, .modal, [class*="dialog"] {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}

/* 页面背景 */
body {
  background: #f8f9fb;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .card, .el-card, [class*="card"] {
    border-radius: 10px !important;
  }
  
  button, .btn, .el-button {
    border-radius: 8px !important;
  }
}