/* ═════════════════════════════════════════
   BinUI Common Styles - 共用样式表
   支持深浅主题切换 (通过 CSS 变量控制)
   ═════════════════════════════════════════ */

/* --- 基础样式 --- */
body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  overflow-x: hidden;
}

::selection {
  background-color: var(--selection-bg);
  color: #ffffff;
}

/* --- 玻璃拟态卡片 --- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* --- 科技感网格背景 --- */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}

/* --- 炫酷渐变文字 --- */
.text-gradient {
  background: linear-gradient(135deg, var(--gradient-text-1, #818cf8) 0%, var(--gradient-text-2, #c084fc) 50%, var(--gradient-text-3, #2dd4bf) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 按钮流光边框 --- */
.btn-glow {
  position: relative;
}
.btn-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--glow-1, #6366f1), var(--glow-2, #2dd4bf), var(--glow-3, #c084fc), var(--glow-1, #6366f1));
  z-index: -1;
  border-radius: inherit;
  background-size: 400%;
  animation: glow 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.btn-glow:hover::before {
  opacity: 1;
}
@keyframes glow {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* --- 滚动条美化 --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* --- 动画关键帧 --- */
@keyframes blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* --- 动画延迟工具类 --- */
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }