/* ===== Tech Enhancement v5.0 - 终极炫彩渐变科技感特效 ===== */

/* --- Universal glow pulse keyframes --- */
@keyframes aura-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes neon-flicker {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, .15); }
  33% { box-shadow: 0 0 30px rgba(139, 92, 246, .2); }
  66% { box-shadow: 0 0 25px rgba(236, 72, 153, .15); }
}
@keyframes shimmer-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ring-rotate {
  0% { transform: rotateX(70deg) rotateZ(0deg); }
  100% { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes ring-rotate-reverse {
  0% { transform: rotateX(60deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateZ(-360deg); }
}

/* --- Section pill badge label --- */
.tech-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .06));
  border: 1px solid rgba(34, 211, 238, .15);
  color: #7c8db5;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.tech-section-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #c084fc);
  box-shadow: 0 0 6px rgba(34, 211, 238, .4);
  animation: aura-breathe 2.5s ease-in-out infinite;
}
.tech-section-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -50%; right: -50%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .06), transparent);
  animation: shimmer-line 4s ease-in-out infinite;
}

/* --- Gradient text title --- */
.tech-title-gradient {
  background: linear-gradient(135deg, #e2e8f0 0%, #22d3ee 25%, #818cf8 60%, #c084fc 85%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Card v5 holographic glass --- */
.el-card {
  background: linear-gradient(135deg, rgba(10, 17, 44, .55), rgba(6, 10, 30, .5)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(96, 165, 250, .12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  border-radius: 16px !important;
  overflow: hidden;
  position: relative;
  transition: all .4s cubic-bezier(.4, 0, .2, 1) !important;
}
.el-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .3), rgba(139, 92, 246, .25), rgba(236, 72, 153, .15), transparent);
  animation: shimmer-line 5s ease-in-out infinite;
  z-index: 1;
}
.el-card::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .06), rgba(139, 92, 246, .04), rgba(236, 72, 153, .03), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.el-card:hover {
  border-color: rgba(34, 211, 238, .2) !important;
  box-shadow: 0 0 30px rgba(34, 211, 238, .06), 0 12px 48px rgba(0, 0, 0, .35) !important;
  transform: translateY(-2px);
}

/* --- Card header v5 --- */
.el-card__header {
  background: linear-gradient(135deg, rgba(34, 211, 238, .03), rgba(139, 92, 246, .02), rgba(236, 72, 153, .01)) !important;
  border-bottom: 1px solid rgba(96, 165, 250, .08) !important;
  padding: 16px 20px !important;
}

/* --- Button neon v5 --- */
.el-button--primary {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #818cf8 100%) !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, .2), 0 0 40px rgba(34, 211, 238, .08), 0 4px 16px rgba(0, 0, 0, .2) !important;
  transition: all .35s cubic-bezier(.4, 0, .2, 1) !important;
  position: relative;
  overflow: hidden;
}
.el-button--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
.el-button--primary:hover {
  box-shadow: 0 0 30px rgba(34, 211, 238, .3), 0 0 60px rgba(139, 92, 246, .1), 0 6px 24px rgba(0, 0, 0, .25) !important;
  transform: translateY(-2px);
}
.el-button--primary:hover::before {
  left: 100%;
}
.el-button--primary:active {
  transform: translateY(0);
}

/* --- Button danger neon --- */
.el-button--danger {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(236, 72, 153, .2), 0 4px 12px rgba(0, 0, 0, .15) !important;
}
.el-button--danger:hover {
  box-shadow: 0 0 24px rgba(236, 72, 153, .3), 0 6px 20px rgba(0, 0, 0, .2) !important;
  transform: translateY(-1px);
}

/* --- Button success neon --- */
.el-button--success {
  background: linear-gradient(135deg, #22d3ee, #10b981) !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, .15), 0 4px 12px rgba(0, 0, 0, .15) !important;
}

/* --- Sidebar v5 glass platform --- */
.sidebar-container {
  transition: width 0.28s;
  width: 200px !important;
  background: linear-gradient(180deg, rgba(10, 17, 44, .78), rgba(6, 10, 30, .85)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border-right: 1px solid rgba(34, 211, 238, .1) !important;
  height: 100%;
  position: fixed;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  box-shadow: 2px 0 20px rgba(0, 0, 0, .3), 0 0 30px rgba(34, 211, 238, .04) !important;
}

/* --- Sidebar menu items v5 --- */
.sidebar-container .el-menu-item,
.sidebar-container .el-sub-menu__title {
  color: #a3aed0 !important;
  transition: all .35s cubic-bezier(.4, 0, .2, 1) !important;
  position: relative;
  overflow: hidden;
}
.sidebar-container .el-menu-item:hover,
.sidebar-container .el-sub-menu__title:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .04), transparent) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 3px 0 0 rgba(34, 211, 238, .35);
}
.sidebar-container .el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .1), rgba(139, 92, 246, .05), transparent) !important;
  color: #22d3ee !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, .3);
  box-shadow: inset 3px 0 0 rgba(34, 211, 238, .5), inset 0 0 20px rgba(34, 211, 238, .03) !important;
}
.sidebar-container .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 50%;
  background: linear-gradient(180deg, #22d3ee, #818cf8, #c084fc);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(34, 211, 238, .6);
}

/* --- Sidebar logo area glow --- */
.sidebar-logo-container {
  background: linear-gradient(180deg, rgba(10, 17, 44, .5), transparent) !important;
  border-bottom: 1px solid rgba(34, 211, 238, .08) !important;
}

/* --- Navbar v5 aurora bar --- */
.navbar {
  background: linear-gradient(180deg, rgba(10, 17, 44, .6), rgba(6, 10, 30, .5)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(34, 211, 238, .12) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .25), 0 0 20px rgba(34, 211, 238, .04) !important;
  position: relative;
  overflow: hidden;
}
.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: -50%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .03), rgba(139, 92, 246, .02), transparent);
  animation: shimmer-line 8s ease-in-out infinite;
  pointer-events: none;
}

/* --- Health indicator v5 --- */
.navbar .health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #10b981);
  box-shadow: 0 0 8px rgba(34, 211, 238, .6), 0 0 16px rgba(34, 211, 238, .3);
  animation: aura-breathe 2s ease-in-out infinite;
}

/* --- Tags view v5 glass --- */
.tags-view-container {
  background: linear-gradient(180deg, rgba(10, 17, 44, .5), rgba(6, 10, 30, .4)) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(96, 165, 250, .08) !important;
}
.tags-view-container .tags-view-item {
  border: 1px solid rgba(96, 165, 250, .1) !important;
  background: rgba(10, 17, 44, .35) !important;
  color: #7c8db5 !important;
  transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.tags-view-container .tags-view-item.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, .1), rgba(139, 92, 246, .05)) !important;
  border-color: rgba(34, 211, 238, .2) !important;
  color: #22d3ee !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .1), 0 2px 8px rgba(0, 0, 0, .1) !important;
  text-shadow: 0 0 6px rgba(34, 211, 238, .2);
}

/* --- App main top glow line --- */
.app-main {
  position: relative;
}
.app-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .2), rgba(139, 92, 246, .15), rgba(236, 72, 153, .08), transparent);
  pointer-events: none;
  z-index: 1;
}

/* --- Dialog v5 holographic --- */
.el-dialog {
  background: linear-gradient(135deg, rgba(10, 17, 44, .85), rgba(6, 10, 30, .9)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .1) !important;
  box-shadow: 0 0 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(34, 211, 238, .04), inset 0 1px 0 rgba(255, 255, 255, .02) !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.el-dialog::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .25), rgba(139, 92, 246, .15), transparent);
  z-index: 1;
}
.el-dialog__header {
  background: linear-gradient(135deg, rgba(34, 211, 238, .03), rgba(139, 92, 246, .02), rgba(236, 72, 153, .01)) !important;
  border-bottom: 1px solid rgba(96, 165, 250, .06) !important;
}

/* --- Table v5 --- */
.el-table__header-wrapper th {
  background: linear-gradient(180deg, rgba(34, 211, 238, .03), rgba(10, 17, 44, .4)) !important;
  border-bottom: 2px solid rgba(34, 211, 238, .1) !important;
  color: #c0cdf5 !important;
  font-weight: 500;
}
.el-table__row:hover > td {
  background: linear-gradient(90deg, rgba(34, 211, 238, .02), rgba(139, 92, 246, .01)) !important;
}
.el-table .el-table__cell {
  border-bottom: 1px solid rgba(96, 165, 250, .04) !important;
}

/* --- Input focus v5 glow --- */
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .5) inset, 0 0 16px rgba(34, 211, 238, .12), 0 0 32px rgba(139, 92, 246, .05) !important;
  border-color: rgba(34, 211, 238, .3) !important;
}

/* --- Tabs v5 --- */
.el-tabs__item.is-active {
  color: #22d3ee !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, .3);
}
.el-tabs__active-bar {
  background: linear-gradient(90deg, #22d3ee, #818cf8, #c084fc) !important;
  height: 3px !important;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(34, 211, 238, .4);
}

/* --- Pagination v5 --- */
.el-pagination.is-background .el-pager li.is-active {
  background: linear-gradient(135deg, rgba(34, 211, 238, .15), rgba(139, 92, 246, .08)) !important;
  color: #22d3ee !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .1) !important;
  border: 1px solid rgba(34, 211, 238, .15) !important;
}

/* --- Breadcrumb v5 --- */
.el-breadcrumb__item .el-breadcrumb__inner.is-link:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, .2);
}

/* --- Switch v5 --- */
.el-switch.is-checked .el-switch__core {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .25) !important;
}

/* --- Tag v5 --- */
.el-tag--primary {
  background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .04)) !important;
  border-color: rgba(34, 211, 238, .15) !important;
  color: #22d3ee !important;
  text-shadow: 0 0 4px rgba(34, 211, 238, .1);
}

/* --- Progress v5 --- */
.el-progress-bar__inner {
  background: linear-gradient(90deg, #22d3ee, #818cf8, #c084fc) !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, .3);
}

/* --- Scrollbar v5 --- */
.el-scrollbar__thumb {
  background: linear-gradient(180deg, rgba(34, 211, 238, .35), rgba(139, 92, 246, .25), rgba(236, 72, 153, .15)) !important;
  border-radius: 4px;
}

/* --- Drawer v5 --- */
.el-drawer {
  background: linear-gradient(135deg, rgba(10, 17, 44, .88), rgba(6, 10, 30, .92)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  border-left: 1px solid rgba(34, 211, 238, .08) !important;
}

/* --- Message box v5 --- */
.el-message-box {
  background: linear-gradient(135deg, rgba(10, 17, 44, .92), rgba(6, 10, 30, .95)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .1) !important;
  box-shadow: 0 0 60px rgba(0, 0, 0, .45) !important;
  border-radius: 20px !important;
}

/* --- Notification v5 --- */
.el-notification {
  background: linear-gradient(135deg, rgba(10, 17, 44, .9), rgba(6, 10, 30, .95)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* --- Badge v5 --- */
.el-badge__content {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, .3);
  border: none !important;
}

/* --- Steps v5 --- */
.el-step__head.is-process .el-step__icon {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .4);
}
.el-step__head.is-finish .el-step__icon {
  background: linear-gradient(135deg, #22d3ee, #818cf8) !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, .3);
}

/* --- Timeline v5 --- */
.el-timeline-item__node {
  background: linear-gradient(135deg, #22d3ee, #818cf8) !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, .4);
}

/* --- Avatar v5 --- */
.el-avatar {
  border: 1px solid rgba(34, 211, 238, .15);
  box-shadow: 0 0 10px rgba(34, 211, 238, .1);
}

/* --- Backtop v5 --- */
.el-backtop {
  background: linear-gradient(135deg, rgba(34, 211, 238, .15), rgba(139, 92, 246, .1)) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(34, 211, 238, .2) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, .1) !important;
}

/* --- Divider v5 --- */
.el-divider {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .1), rgba(139, 92, 246, .08), rgba(236, 72, 153, .05), transparent) !important;
}

/* --- Descriptions v5 --- */
.el-descriptions__header {
  background: linear-gradient(90deg, rgba(34, 211, 238, .02), transparent);
  border-bottom: 1px solid rgba(96, 165, 250, .06);
}

/* --- Alert v5 glass --- */
.el-alert {
  border-radius: 12px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(96, 165, 250, .08) !important;
}

/* --- Dropdown menu v5 --- */
.el-dropdown-menu {
  background: rgba(10, 17, 44, .9) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* --- Select dropdown v5 --- */
.el-select-dropdown {
  background: rgba(10, 17, 44, .92) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .06) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* --- Popover v5 --- */
.el-popover.el-popper {
  background: rgba(10, 17, 44, .92) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .06) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* --- Tooltip v5 --- */
.el-popper .el-popper__arrow::before {
  background: rgba(10, 17, 44, .95) !important;
  border-color: rgba(34, 211, 238, .1) !important;
}

/* --- Collapse v5 --- */
.el-collapse-item__header {
  background: linear-gradient(90deg, rgba(34, 211, 238, .02), transparent) !important;
  border-bottom: 1px solid rgba(96, 165, 250, .06) !important;
}

/* --- Form item v5 --- */
.el-form-item:focus-within .el-form-item__label {
  color: #22d3ee !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, .15);
}

/* --- Menu dropdown v5 --- */
.el-menu--vertical .el-menu {
  background: rgba(10, 17, 44, .88) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(34, 211, 238, .06) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* --- 3D platform ring decoration (CSS only, for hero sections) --- */
.platform-ring {
  position: relative;
}
.platform-ring::before,
.platform-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .15);
  box-shadow: 0 0 20px rgba(34, 211, 238, .1), inset 0 0 20px rgba(139, 92, 246, .05);
}
.platform-ring::before {
  width: 200px; height: 200px;
  top: 50%; left: 50%;
  margin: -100px 0 0 -100px;
  animation: ring-rotate 8s linear infinite;
}
.platform-ring::after {
  width: 280px; height: 280px;
  top: 50%; left: 50%;
  margin: -140px 0 0 -140px;
  border-color: rgba(139, 92, 246, .1);
  animation: ring-rotate-reverse 12s linear infinite;
}

/* --- Utility classes --- */
.tech-glass-panel {
  background: linear-gradient(135deg, rgba(10, 17, 44, .5), rgba(6, 10, 30, .45)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .06) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
}
.tech-glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .2), rgba(139, 92, 246, .15), transparent);
  z-index: 1;
}
.tech-gradient-text {
  background: linear-gradient(135deg, #e2e8f0 0%, #22d3ee 20%, #818cf8 50%, #c084fc 80%, #f472b6 100%);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.tech-glow-pulse {
  animation: neon-flicker 3s ease-in-out infinite;
}
.tech-float {
  animation: float-gentle 4s ease-in-out infinite;
}

/* --- Chat widget v5 --- */
.chat-widget {
  background: linear-gradient(135deg, rgba(10, 17, 44, .85), rgba(6, 10, 30, .9)) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(34, 211, 238, .1) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, .3), 0 0 0 1px rgba(34, 211, 238, .04) !important;
  border-radius: 20px !important;
}

/* --- Onboarding v5 --- */
.onboarding-overlay {
  background: radial-gradient(ellipse at center, rgba(10, 17, 44, .7), rgba(3, 8, 26, .85)) !important;
  backdrop-filter: blur(4px);
}

/* --- Notif badge v5 --- */
.notif-badge .el-badge__content {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, .4);
}

/* --- Hamburger v5 --- */
.hamburger-container {
  color: #7c8db5 !important;
  transition: color .3s ease, text-shadow .3s ease;
}
.hamburger-container:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, .3);
}

/* ===== End Tech Enhancement v5.0 ===== */