:root {
  --color-primary: #00e6e4;
  --color-primary-dark: #00a5a3;
  --color-primary-light: #8ffffd;
  --color-accent: #ff2a6d;
  --color-bg-dark: #0a1219;
  --color-surface-dark: #141e26;
  --color-bg-light: #f1fafa;
  --color-surface-light: #ffffff;
  --color-text-inverse: #ffffff;
  --color-text-main: #112233;
  --color-text-secondary: #5a7a8a;
  --color-text-secondary-dark: #a0c0d0;
  --radius-lg: 16px;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 350ms;

  /* 拆分 RGB 以支持 tailwind alpha utilities */
  --color-primary-rgb: 0 230 228;
  --color-accent-rgb: 255 42 109;
  --color-layer-1-rgb: 10 18 25;
  --color-layer-2: #141e26; /* 保留旧命名兼容 */
  --color-layer-3: rgba(255, 255, 255, 0.04);
}
body.dark {
  --mode-bg: var(--color-bg-dark);
  --mode-surface: var(--color-surface-dark);
  --mode-text: var(--color-text-inverse);
  --mode-text-secondary: var(--color-text-secondary-dark);
}
body:not(.dark) {
  --mode-bg: var(--color-bg-light);
  --mode-surface: var(--color-surface-light);
  --mode-text: var(--color-text-main);
  --mode-text-secondary: var(--color-text-secondary);
}
body {
  background: var(--mode-bg);
  color: var(--mode-text);
  transition: background var(--speed) var(--easing),
    color var(--speed) var(--easing);
}

/* Buttons */
/* 修改：改为 inline-flex，保证图标与文字水平垂直对齐，并增加 gap */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all 300ms var(--easing);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--button-primary-text, #000);
  box-shadow: 0 0 20px rgba(0, 230, 228, 0.6);
}
.btn-primary:focus-visible {
  outline: none;
}
body:not(.dark) .btn-primary {
  --button-primary-text: #000;
}
body.dark .btn-primary {
  --button-primary-text: #fff;
}
.btn-primary:hover {
  box-shadow: 0 0 30px rgba(0, 230, 228, 0.9);
  transform: translateY(-3px);
}
.btn-ghost {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-ghost:hover {
  background: var(--color-primary);
  color: #000;
}
.btn-accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 42, 109, 0.55);
}
.btn-accent:hover {
  box-shadow: 0 0 28px rgba(255, 42, 109, 0.85);
  transform: translateY(-3px);
}

/* Card */
.surface-card {
  background: var(--mode-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform var(--speed), box-shadow var(--speed);
  color: var(--card-text-color, var(--mode-text));
}
body:not(.dark) .surface-card {
  --card-text-color: #000;
}
body.dark .surface-card {
  --card-text-color: #fff;
}
.surface-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 230, 228, 0.25);
}
.surface-interactive {
  background: var(--mode-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: background var(--speed), box-shadow var(--speed),
    transform var(--speed);
}
.surface-interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 230, 228, 0.25);
}
/* 通用卡片与焦点 */
.card-base {
  background: var(--mode-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: var(--speed) var(--easing);
}
.card-base:hover {
  box-shadow: 0 12px 30px rgba(0, 230, 228, 0.28);
  transform: translateY(-4px);
}
.focus-ring {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 230, 228, 0.55);
}
.focus-ring:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 230, 228, 0.75);
}

/* Logo glow */
.logo-glow {
  color: var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}
.glow-primary {
  text-shadow: 0 0 8px var(--color-primary), 0 0 16px var(--color-primary);
}

/* Underline hover */
.nav-underline {
  position: relative;
}
.nav-underline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--color-primary);
  box-shadow: 0 0 4px var(--color-primary);
  transition: width var(--speed) var(--easing);
}
.nav-underline:hover:after {
  width: 100%;
}

/* Text and headings */
.text-secondary {
  color: var(--mode-text-secondary);
}
.heading-gradient {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Dividers and separators */
.divider-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    var(--color-primary),
    rgba(255, 255, 255, 0)
  );
  opacity: 0.4;
}

/* Statistics */
.stat-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-primary);
  text-shadow: 0 0 10px var(--color-primary);
}

/* 滚动条隐藏 */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 动画辅助 */
.animate-glow-pulse {
  animation: glowPulse 2.8s ease-in-out infinite;
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-shimmer {
  animation: shimmer 3.2s linear infinite;
}
.animate-pulse-ring {
  animation: pulseRing 2.4s ease-out infinite;
}

/* 渐变骨架 shimmer 用例 */
.skeleton-shimmer {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.05) 8%,
    rgba(255, 255, 255, 0.18) 18%,
    rgba(255, 255, 255, 0.05) 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: 8px;
}