/* Hero My Button Styles */
.hero-my-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 2px solid #409eff !important;
  padding: 8px 12px !important;
  color: var(--text-primary, #ffffff) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero-my-button img {
  width: auto !important;
  height: 16px !important;
  max-width: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

.hero-my-button:disabled,
.hero-my-button[aria-disabled="true"],
.hero-my-button[data-lock-indicator="true"] {
  border-color: var(--border-color, #333333) !important;
  color: var(--text-muted, #666666) !important;
  opacity: 0.65 !important;
}

.hero-my-button:disabled img,
.hero-my-button[aria-disabled="true"] img,
.hero-my-button[data-lock-indicator="true"] img {
  filter: grayscale(100%) brightness(1.05) !important;
  opacity: 0.6 !important;
}

/* Hover/Focus/Active 状态（图2）：黄红样式 */
.hero-my-button:hover,
.hero-my-button:focus,
.hero-my-button:active {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  border-style: solid !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 增强权重的 Selected/Active 状态样式（图1，需与图2一致）：黄红样式 */
body .hero-my-button.my-active {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  border-style: solid !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6) !important;
  opacity: 1 !important;
}

/* 增强权重的 Active Hover 状态样式（保持一致）：黄红样式 */
body .hero-my-button.my-active:hover,
body .hero-my-button.my-active:focus,
body .hero-my-button.my-active:active {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  border-style: solid !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6) !important;
  opacity: 1 !important;
  transform: none !important;
}