/* 科技感增强样式 */

/* 网格背景 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* 扫描线效果 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 242, 254, 0.8) 50%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.8),
              0 0 40px rgba(0, 242, 254, 0.4);
  z-index: 9999;
  pointer-events: none;
  animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
  0% {
    top: 0;
    opacity: 1;
  }
  80% {
    top: 100%;
    opacity: 0.8;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 霓虹发光文字 */
.header h1,
.login-title,
.setup-title,
.view-title {
  text-shadow:
    0 0 10px rgba(99, 102, 241, 0.8),
    0 0 20px rgba(139, 92, 246, 0.6),
    0 0 30px rgba(236, 72, 153, 0.4),
    0 0 40px rgba(99, 102, 241, 0.3);
  animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(99, 102, 241, 0.8),
      0 0 20px rgba(139, 92, 246, 0.6),
      0 0 30px rgba(236, 72, 153, 0.4),
      0 0 40px rgba(99, 102, 241, 0.3);
  }
  50% {
    text-shadow:
      0 0 15px rgba(99, 102, 241, 1),
      0 0 30px rgba(139, 92, 246, 0.8),
      0 0 45px rgba(236, 72, 153, 0.6),
      0 0 60px rgba(99, 102, 241, 0.4);
  }
}

/* 霓虹边框卡片 */
.card,
.login-card,
.setup-card,
.k-card {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.card::before,
.login-card::before,
.setup-card::before,
.k-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
    #00f2fe 0%,
    #4facfe 25%,
    #667eea 50%,
    #764ba2 75%,
    #f093fb 100%
  );
  border-radius: inherit;
  z-index: -1;
  opacity: 0.3;
  animation: borderRotate 4s linear infinite;
  filter: blur(2px);
}

@keyframes borderRotate {
  0% {
    filter: blur(2px) hue-rotate(0deg);
  }
  100% {
    filter: blur(2px) hue-rotate(360deg);
  }
}

.card:hover::before,
.login-card:hover::before,
.setup-card:hover::before,
.k-card:hover::before {
  opacity: 0.6;
  filter: blur(4px);
}

/* 数据流动画 */
.card::after,
.k-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 242, 254, 0.1) 25%,
    rgba(0, 242, 254, 0.3) 50%,
    rgba(0, 242, 254, 0.1) 75%,
    transparent 100%
  );
  pointer-events: none;
  animation: dataFlow 3s ease-in-out infinite;
}

@keyframes dataFlow {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* 霓虹按钮 */
.btn,
.login-btn,
.ui-btn-primary {
  position: relative;
  border: 2px solid rgba(0, 242, 254, 0.5);
  box-shadow:
    0 0 10px rgba(0, 242, 254, 0.5),
    0 0 20px rgba(99, 102, 241, 0.3),
    0 0 30px rgba(139, 92, 246, 0.2),
    inset 0 0 10px rgba(0, 242, 254, 0.2);
  transition: all 0.3s ease;
}

.btn:hover:not(:disabled),
.login-btn:hover:not(:disabled),
.ui-btn-primary:hover:not(:disabled) {
  border-color: rgba(0, 242, 254, 1);
  box-shadow:
    0 0 20px rgba(0, 242, 254, 0.8),
    0 0 40px rgba(99, 102, 241, 0.6),
    0 0 60px rgba(139, 92, 246, 0.4),
    inset 0 0 20px rgba(0, 242, 254, 0.3);
  transform: translateY(-2px) scale(1.02);
}

/* 输入框科技感 */
.input,
.login-input,
.k-input {
  position: relative;
  border: 2px solid rgba(99, 102, 241, 0.3);
  box-shadow:
    0 0 5px rgba(99, 102, 241, 0.2),
    inset 0 0 10px rgba(99, 102, 241, 0.05);
  transition: all 0.3s ease;
}

.input:focus,
.login-input:focus,
.k-input:focus {
  border-color: rgba(0, 242, 254, 0.8);
  box-shadow:
    0 0 15px rgba(0, 242, 254, 0.6),
    0 0 30px rgba(99, 102, 241, 0.3),
    inset 0 0 20px rgba(0, 242, 254, 0.1);
}

/* 角标装饰 */
.card,
.login-card,
.setup-card,
.k-card,
.stat-item {
  --corner-size: 15px;
  --corner-width: 2px;
  --corner-color: rgba(0, 242, 254, 0.6);
}

.card::before,
.login-card::before,
.setup-card::before,
.k-card::before,
.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--corner-size);
  height: var(--corner-size);
  border-top: var(--corner-width) solid var(--corner-color);
  border-left: var(--corner-width) solid var(--corner-color);
  z-index: 10;
  pointer-events: none;
}

.card::after,
.login-card::after,
.setup-card::after,
.k-card::after,
.stat-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--corner-size);
  height: var(--corner-size);
  border-top: var(--corner-width) solid var(--corner-color);
  border-right: var(--corner-width) solid var(--corner-color);
  z-index: 10;
  pointer-events: none;
}

/* 底部角标 */
.stat-item {
  position: relative;
}

.stat-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--corner-size);
  height: var(--corner-size);
  border-bottom: var(--corner-width) solid var(--corner-color);
  border-left: var(--corner-width) solid var(--corner-color);
  border-top: none;
  border-right: none;
  top: auto;
  right: auto;
}

/* 数字跳动效果 */
.stat-number,
.cute-stat-number,
.cute-donut-value {
  animation: numberGlow 3s ease-in-out infinite;
}

@keyframes numberGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(99, 102, 241, 0.8),
                 0 0 25px rgba(139, 92, 246, 0.4);
  }
}

/* 表格行扫描效果 */
tbody tr {
  position: relative;
}

tbody tr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 242, 254, 0.1) 50%,
    transparent 100%
  );
  transition: width 0.4s ease;
}

tbody tr:hover::before {
  width: 100%;
}

/* 侧边栏科技装饰 */
.sidebar {
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 242, 254, 0.6) 50%,
    transparent 100%
  );
  animation: sidebarPulse 2s ease-in-out infinite;
}

@keyframes sidebarPulse {
  0%, 100% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(0, 242, 254, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
  }
}

/* 状态点脉冲 */
.status-dot,
.version-dot,
.cute-dot {
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 10px 3px currentColor;
    transform: scale(1.1);
  }
}

/* 进度条霓虹效果 */
.usage-meter-fill,
.k-progress-fill {
  position: relative;
  box-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 加载动画增强 */
.spinner,
.turnstile-spinner,
.modal-spinner {
  border-color: rgba(99, 102, 241, 0.2);
  border-top-color: rgba(0, 242, 254, 1);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

/* 徽章发光 */
.k-badge-success,
.account-tag,
.account-subscription-tag {
  box-shadow: 0 0 10px currentColor;
  animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor;
  }
  50% {
    box-shadow: 0 0 15px currentColor;
  }
}

/* 导航项激活效果 */
.nav-item.active {
  box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.2);
  border-left: 3px solid rgba(0, 242, 254, 0.8);
}

/* 账号卡片悬停扫描 */
.account-card {
  position: relative;
  overflow: hidden;
}

.account-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 242, 254, 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: top 0.6s ease;
}

.account-card:hover::after {
  top: 100%;
}

/* 下拉菜单科技边框 */
.k-dropdown-menu {
  border: 2px solid rgba(0, 242, 254, 0.3);
  box-shadow:
    0 0 20px rgba(99, 102, 241, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.2);
}

/* 模态框入场动画增强 */
@keyframes modalIn {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 复制按钮成功效果 */
.copy-btn.copied,
.field-copy-btn.copied {
  box-shadow:
    0 0 20px rgba(16, 185, 129, 0.6),
    inset 0 0 10px rgba(16, 185, 129, 0.2);
  animation: successPulse 0.6s ease;
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 版本更新提示动画 */
.sidebar-version.has-update {
  animation: updateAlert 2s ease-in-out infinite;
}

@keyframes updateAlert {
  0%, 100% {
    box-shadow: 0 0 10px rgba(251, 146, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(251, 146, 60, 0.8);
  }
}

/* 粒子效果背景 */
.login-page {
  position: relative;
}

.login-page::before,
.login-page::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(0, 242, 254, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(0, 242, 254, 0.8),
    100px 50px 0 rgba(99, 102, 241, 0.6),
    -100px 80px 0 rgba(139, 92, 246, 0.6),
    50px -120px 0 rgba(236, 72, 153, 0.6),
    -80px -150px 0 rgba(0, 242, 254, 0.6),
    120px 100px 0 rgba(99, 102, 241, 0.6);
  animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(100px, -500px);
    opacity: 0;
  }
}

/* 科技感文本选择 */
::selection {
  background: rgba(0, 242, 254, 0.3);
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 242, 254, 0.8);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card::before,
  .login-card::before,
  .setup-card::before,
  .k-card::before {
    opacity: 0.2;
  }

  body::before {
    height: 1px;
  }
}

/* 禁用动画（低性能设备） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 清晰模式：去掉会让文字发虚的发光、滤镜和覆盖动画。 */
html,
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body {
  background: #eef3fb;
  background-size: auto;
  animation: none;
}

body::before,
body::after,
.login-page::before,
.login-page::after,
.sidebar::before,
.card::before,
.card::after,
.login-card::before,
.login-card::after,
.setup-card::before,
.setup-card::after,
.k-card::before,
.k-card::after,
.stat-item::before,
.stat-item::after,
tbody tr::before {
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body,
body * {
  text-shadow: none !important;
}

.header h1,
.login-title,
.setup-title,
.view-title,
.stat-number,
.cute-stat-number,
.cute-donut-value,
.status-dot,
.version-dot,
.cute-dot,
.k-badge-success,
.account-tag,
.account-subscription-tag {
  animation: none !important;
}

.login-title,
.setup-title,
.view-title {
  background: none !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0;
}

.stat-number,
.cute-stat-number,
.cute-donut-value {
  letter-spacing: 0;
}

.sidebar,
.k-card,
.stat-item,
.login-card,
.setup-card,
.modal-content,
.k-dropdown-menu {
  background: #ffffff;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
}

.app-container.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.k-card,
.stat-item {
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.k-card:hover,
.stat-item:hover,
.login-card:hover,
.btn:hover:not(:disabled),
.login-btn:hover:not(:disabled),
.ui-btn-primary:hover:not(:disabled) {
  transform: none !important;
}

@media (max-width: 1024px) {
  .sidebar,
  .app-container.sidebar-collapsed .sidebar {
    width: 260px;
  }

  .main-wrapper,
  .app-container.sidebar-collapsed .main-wrapper {
    margin-left: 0;
    width: 100%;
  }
}