/*
 * 1Panel 超炫科技感主题 V2
 * 服务器: 104.64.212.250
 * 设计: 深空黑底 + 电光青/热洋红 双色调
 */

/* ==================== 基础变量 ==================== */
:root {
  /* 主色调 - 电光青/热洋红 */
  --tech-primary: #00f0ff;
  --tech-primary-dark: #00a8b5;
  --tech-secondary: #ff0080;
  --tech-secondary-dark: #b50059;
  --tech-accent: #ffaa00;
  
  /* 背景色 - 深空黑 */
  --tech-bg-primary: #050508;
  --tech-bg-secondary: #0a0a10;
  --tech-bg-tertiary: #101018;
  --tech-bg-card: #0c0c14;
  --tech-bg-glass: rgba(12, 12, 20, 0.85);
  
  /* 文字色 */
  --tech-text-primary: #ffffff;
  --tech-text-secondary: #a0a8b8;
  --tech-text-muted: #505868;
  
  /* 边框和发光 */
  --tech-border: #1a1a2e;
  --tech-border-glow: rgba(0, 240, 255, 0.3);
  --tech-glow-primary: 0 0 30px rgba(0, 240, 255, 0.4);
  --tech-glow-secondary: 0 0 30px rgba(255, 0, 128, 0.4);
  
  /* 状态色 */
  --tech-success: #00ff88;
  --tech-warning: #ffcc00;
  --tech-danger: #ff3366;
  --tech-info: #00f0ff;
}

/* ==================== 全局背景 ==================== */
body {
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(0, 240, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 0, 128, 0.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--tech-bg-primary) 0%, var(--tech-bg-secondary) 100%) !important;
  color: var(--tech-text-primary) !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
}

/* 网格背景 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

.app-wrapper {
  background: transparent !important;
}

.main-container {
  background: transparent !important;
}

/* ==================== 侧边栏 ==================== */
.app-sidebar {
  background: var(--tech-bg-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--tech-border) !important;
  box-shadow: 
    4px 0 30px rgba(0, 0, 0, 0.5),
    inset -1px 0 0 rgba(0, 240, 255, 0.1) !important;
}

.sidebar-container {
  background: transparent !important;
}

/* Logo 区域发光 */
.sidebar-container .logo {
  filter: drop-shadow(0 0 10px var(--tech-primary)) !important;
}

/* 菜单项 */
.el-menu {
  background: transparent !important;
}

.el-menu-item {
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.05)) !important;
  color: var(--tech-text-secondary) !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 6px 16px 6px 0 !important;
  height: 48px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.el-menu-item::before {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.el-menu-item:hover::before {
  left: 100%;
}

.el-menu-item:hover {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.05)) !important;
  color: var(--tech-primary) !important;
  border-left-color: var(--tech-primary) !important;
  text-shadow: 0 0 10px var(--tech-primary) !important;
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 128, 0.1)) !important;
  color: var(--tech-primary) !important;
  border-left-color: var(--tech-primary) !important;
  box-shadow: 
    inset 0 0 20px rgba(0, 240, 255, 0.1),
    0 0 20px rgba(0, 240, 255, 0.2) !important;
}

.el-menu-item.is-active::before {
  background: var(--tech-primary) !important;
  box-shadow: 0 0 15px var(--tech-primary) !important;
}

/* 子菜单 */
.el-sub-menu__title {
  background: linear-gradient(90deg, transparent, rgba(255, 0, 128, 0.05)) !important;
  color: var(--tech-text-secondary) !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 6px 16px 6px 0 !important;
  height: 48px !important;
  border-left: 3px solid transparent !important;
}

.el-sub-menu__title:hover {
  color: var(--tech-secondary) !important;
  border-left-color: var(--tech-secondary) !important;
  text-shadow: 0 0 10px var(--tech-secondary) !important;
}

/* ==================== 卡片样式 ==================== */
.el-card {
  background: var(--tech-bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.el-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tech-primary), var(--tech-secondary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.el-card:hover::before {
  opacity: 1;
}

.el-card:hover {
  border-color: var(--tech-border-glow) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    var(--tech-glow-primary) !important;
  transform: translateY(-4px) !important;
}

.el-card__header {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.05), transparent) !important;
  border-bottom: 1px solid var(--tech-border) !important;
  color: var(--tech-text-primary) !important;
  font-weight: 600 !important;
}

/* ==================== 按钮样式 ==================== */
.el-button--primary {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.el-button--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.el-button--primary:hover::before {
  left: 100%;
}

.el-button--primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.6) !important;
}

.el-button--default {
  background: var(--tech-bg-tertiary) !important;
  border: 1px solid var(--tech-border) !important;
  color: var(--tech-text-secondary) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.el-button--default:hover {
  background: rgba(0, 240, 255, 0.1) !important;
  border-color: var(--tech-primary) !important;
  color: var(--tech-primary) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2) !important;
}

/* ==================== 表格样式 ==================== */
.el-table {
  background: var(--tech-bg-glass) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--tech-border) !important;
}

.el-table__header {
  background: var(--tech-bg-tertiary) !important;
}

.el-table th {
  background: linear-gradient(180deg, var(--tech-bg-tertiary), var(--tech-bg-secondary)) !important;
  color: var(--tech-primary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--tech-border) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}

.el-table td {
  background: transparent !important;
  color: var(--tech-text-secondary) !important;
  border-bottom: 1px solid rgba(26, 26, 46, 0.5) !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(0, 240, 255, 0.02) !important;
}

.el-table__body tr:hover td {
  background: rgba(0, 240, 255, 0.08) !important;
  color: var(--tech-text-primary) !important;
}

/* ==================== 输入框 ==================== */
.el-input__wrapper {
  background: var(--tech-bg-tertiary) !important;
  border: 1px solid var(--tech-border) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.el-input__wrapper:hover {
  border-color: rgba(0, 240, 255, 0.5) !important;
}

.el-input__wrapper.is-focus {
  border-color: var(--tech-primary) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2) !important;
}

.el-input__inner {
  color: var(--tech-text-primary) !important;
  font-weight: 500 !important;
}

/* ==================== 标签和徽章 ==================== */
.el-tag {
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid var(--tech-primary) !important;
  color: var(--tech-primary) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.el-tag--success {
  background: rgba(0, 255, 136, 0.1) !important;
  border-color: var(--tech-success) !important;
  color: var(--tech-success) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.2) !important;
}

.el-tag--warning {
  background: rgba(255, 204, 0, 0.1) !important;
  border-color: var(--tech-warning) !important;
  color: var(--tech-warning) !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.2) !important;
}

.el-tag--danger {
  background: rgba(255, 51, 102, 0.1) !important;
  border-color: var(--tech-danger) !important;
  color: var(--tech-danger) !important;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.2) !important;
}

/* ==================== 导航标签 ==================== */
.el-tabs__nav {
  background: var(--tech-bg-tertiary) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  border: 1px solid var(--tech-border) !important;
}

.el-tabs__item {
  color: var(--tech-text-secondary) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.el-tabs__item:hover {
  color: var(--tech-text-primary) !important;
}

.el-tabs__item.is-active {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4) !important;
}

/* ==================== 进度条 ==================== */
.el-progress-bar__outer {
  background: var(--tech-bg-tertiary) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.el-progress-bar__inner {
  background: linear-gradient(90deg, var(--tech-primary), var(--tech-secondary)) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5) !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==================== 开关 ==================== */
.el-switch__core {
  background: var(--tech-bg-tertiary) !important;
  border-color: var(--tech-border) !important;
  border-radius: 20px !important;
}

.el-switch.is-checked .el-switch__core {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  border-color: transparent !important;
}

.el-switch__action {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ==================== 首页仪表板特殊样式 ==================== */
.h-overview .count span {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.home-card {
  position: relative !important;
}

.home-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tech-primary), var(--tech-secondary), transparent);
  opacity: 0.5;
}

/* 系统信息卡片 */
.h-systemInfo {
  background: var(--tech-bg-glass) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px) !important;
}

/* 应用卡片 */
.h-app-card {
  background: var(--tech-bg-glass) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.h-app-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.h-app-card:hover::before {
  left: 100%;
}

.h-app-card:hover {
  border-color: var(--tech-border-glow) !important;
  box-shadow: var(--tech-glow-primary) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

/* ==================== 滚动条 ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--tech-bg-secondary) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tech-primary), var(--tech-secondary)) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--tech-primary), var(--tech-secondary)) !important;
  box-shadow: 0 0 10px var(--tech-primary) !important;
}

/* ==================== 模态框 ==================== */
.el-dialog {
  background: var(--tech-bg-glass) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 240, 255, 0.1) !important;
}

.el-dialog__header {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent) !important;
  border-bottom: 1px solid var(--tech-border) !important;
  padding: 20px 24px !important;
}

.el-dialog__title {
  color: var(--tech-text-primary) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* ==================== 下拉菜单 ==================== */
.el-dropdown-menu {
  background: var(--tech-bg-glass) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.el-dropdown-menu__item {
  color: var(--tech-text-secondary) !important;
  transition: all 0.2s ease !important;
}

.el-dropdown-menu__item:hover {
  background: rgba(0, 240, 255, 0.1) !important;
  color: var(--tech-primary) !important;
}

/* ==================== 加载动画 ==================== */
.el-loading-spinner .path {
  stroke: var(--tech-primary) !important;
  stroke-width: 3 !important;
}

.el-loading-mask {
  background: rgba(5, 5, 8, 0.95) !important;
  backdrop-filter: blur(5px) !important;
}

/* 首屏加载 */
.first-loading-wrap {
  background: var(--tech-bg-primary) !important;
}

.dot i {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  box-shadow: 0 0 20px var(--tech-primary) !important;
}

/* ==================== 登录页 ==================== */
.login-form .login-button {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 25px rgba(0, 240, 255, 0.5) !important;
  transition: all 0.3s ease !important;
}

.login-form .login-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 35px rgba(0, 240, 255, 0.7) !important;
}

/* ==================== 分页 ==================== */
.el-pagination {
  color: var(--tech-text-secondary) !important;
}

.el-pagination .el-pager li {
  background: var(--tech-bg-tertiary) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.el-pagination .el-pager li:hover {
  border-color: var(--tech-primary) !important;
  color: var(--tech-primary) !important;
}

.el-pagination .el-pager li.active {
  background: linear-gradient(135deg, var(--tech-primary), var(--tech-secondary)) !important;
  color: #000 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4) !important;
}

/* ==================== 树形组件 ==================== */
.el-tree {
  background: transparent !important;
}

.el-tree-node__content {
  color: var(--tech-text-secondary) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.el-tree-node__content:hover {
  background: rgba(0, 240, 255, 0.08) !important;
  color: var(--tech-primary) !important;
}

/* ==================== 通知 ==================== */
.el-message {
  background: var(--tech-bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

.el-message--success {
  border-color: var(--tech-success) !important;
}

.el-message--warning {
  border-color: var(--tech-warning) !important;
}

.el-message--error {
  border-color: var(--tech-danger) !important;
}

/* ==================== 页脚 ==================== */
.footer {
  background: var(--tech-bg-secondary) !important;
  border-top: 1px solid var(--tech-border) !important;
  color: var(--tech-text-muted) !important;
}

.footer a:hover {
  color: var(--tech-primary) !important;
  text-shadow: 0 0 10px var(--tech-primary) !important;
}

/* ==================== 选中文字 ==================== */
::selection {
  background: rgba(0, 240, 255, 0.3) !important;
  color: var(--tech-text-primary) !important;
}

/* ==================== 动画效果 ==================== */
@keyframes tech-pulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--tech-primary), 0 0 10px var(--tech-primary);
  }
  50% {
    box-shadow: 0 0 20px var(--tech-primary), 0 0 40px var(--tech-secondary);
  }
}

@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes data-stream {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

/* 扫描线效果 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tech-primary), transparent);
  opacity: 0.3;
  animation: scan-line 8s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

/* ==================== 结束 ==================== */