.bg-gradient-animate {
  background: linear-gradient(120deg, #0F172A, #1E293B, #0F172A);
  background-size: 400% 400%;
  animation: gradient 20s ease infinite;
}
.card-hover {
  transition: all 300ms ease;
}
.card-hover:hover {
  transform: scale(1.01);
  box-shadow: 0 20px 25px -5px rgb(59 130 246 / 0.1), 0 8px 10px -6px rgb(59 130 246 / 0.1);
}
.number-pulse {
  animation: pulse 2s infinite;
}
.up-flash {
  animation: upFlash 1.5s infinite alternate;
}
.down-flash {
  animation: downFlash 1.5s infinite alternate;
}
.news-hover {
  transition: all 300ms ease;
  cursor: pointer;
}
.news-hover:hover {
  background-color: rgb(15 23 42 / 0.5);
  transform: translateX(0.25rem);
}
.modal-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}
.modal-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}
.drag-handle {
  cursor: move;
}
/* 隐藏滚动条 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ==================== 动画定义 ==================== */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}
@keyframes upFlash {
  0% { color: #10B981; }
  100% { color: #34D399; }
}
@keyframes downFlash {
  0% { color: #EF4444; }
  100% { color: #F87171; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==================== 基础组件样式 ==================== */
#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
}

/* ==================== 热门币种列表（核心修复头像大小） ==================== */
.hot-coin-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(100 116 139 / 0.1);
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition: background-color 300ms ease;
  cursor: pointer;
}
.hot-coin-item:hover {
  background-color: rgb(15 23 42 / 0.3);
}
/* ✅ 核心修复：头像固定宽高32px，不会再变大 */
.hot-coin-icon {
  width: 2rem;   /* 对应Tailwind w-8 = 32px */
  height: 2rem;  /* 对应Tailwind h-8 = 32px */
  border-radius: 9999px; /* 圆形圆角 */
  object-fit: contain; /* 图片不变形 */
  background-color: rgb(255 255 255 / 0.1); /* 半透明白底 */
  padding: 0.25rem; /* 内边距 */
}
.hot-coin-name {
  font-weight: 500;
}
.hot-coin-fullname {
  color: #64748B;
  font-size: 0.75rem;
  line-height: 1rem;
}
.hot-coin-price {
  grid-column: span 2 / span 2;
  text-align: right;
  font-weight: 500;
  animation: pulse 2s infinite;
}
.hot-coin-change {
  grid-column: span 2 / span 2;
  text-align: right;
}
.hot-coin-volume {
  grid-column: span 3 / span 3;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.25rem;
}