/* 充值额度卡片：hover 渐变边框 + 彩色背景 + 外发光 */

.preset-amount-card {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  padding: 1.5px;
  background: var(--semi-color-border);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

/* 外圈光晕（hover 时扩散） */
.preset-amount-card::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  background: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgba(96, 165, 250, 0.45) 0%,
    rgba(167, 139, 250, 0.2) 45%,
    transparent 72%
  );
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.35s ease;
}

.preset-amount-card:hover {
  background: linear-gradient(
    135deg,
    #3b82f6 0%,
    #8b5cf6 48%,
    #22d3ee 100%
  );
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.65),
    0 6px 22px rgba(59, 130, 246, 0.38),
    0 0 36px rgba(139, 92, 246, 0.32),
    0 0 56px rgba(34, 211, 238, 0.18);
  transform: translateY(-2px);
}

.preset-amount-card:hover::before {
  opacity: 1;
}

.preset-amount-card__inner.semi-card {
  border: none !important;
  border-radius: 10.5px !important;
  height: 100%;
  width: 100%;
  background: var(--semi-color-bg-1) !important;
  box-shadow: none !important;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease !important;
}

.preset-amount-card:hover .preset-amount-card__inner {
  background: linear-gradient(
    155deg,
    #eff6ff 0%,
    #eef2ff 42%,
    #ecfeff 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* 深色模式 */
.dark .preset-amount-card:hover .preset-amount-card__inner {
  background: linear-gradient(
    155deg,
    rgba(30, 64, 175, 0.55) 0%,
    rgba(67, 56, 202, 0.48) 42%,
    rgba(14, 116, 144, 0.42) 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.dark .preset-amount-card:hover {
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.5),
    0 6px 24px rgba(37, 99, 235, 0.45),
    0 0 40px rgba(124, 58, 237, 0.38),
    0 0 64px rgba(34, 211, 238, 0.22);
}

.dark .preset-amount-card::before {
  background: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgba(59, 130, 246, 0.55) 0%,
    rgba(124, 58, 237, 0.28) 45%,
    transparent 72%
  );
}
