.rainbow-text {
  background-image: linear-gradient(
    to right,
    #ff3b30,
    #ff9500,
    #ffcc00,
    #34c759,
    #007aff,
    #5856d6,
    #af52de
  );
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-flow 8s linear infinite;
  background-size: 300% 100%;
  font-weight: 600;
}

@keyframes rainbow-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pro-tip {
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0.9rem 1.5rem; max-width: 700px; margin: 0 auto 2rem;
  background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd, #c2e9fb);
  background-size: 300% 300%; animation: gradientBG 10s ease infinite alternate;
  color: var(--text-color-primary); font-size: 0.95rem; line-height: 1.5;
  border-radius: var(--border-radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pro-tip > * { flex-shrink: 0; }
.pro-tip .icon { color: var(--primary-color); font-size: 1.3rem; margin-right: 0.75rem; }
.pro-tip strong { color: var(--primary-color); font-weight: 600; margin-right: 0.4rem; }
.pro-tip .mp3-text { color: var(--mp3-text-color, #e67e22); font-weight: 600; margin: 0 0.25rem; }
.pro-tip .mp4-text { color: var(--mp4-text-color, #3498db); font-weight: 600; margin: 0 0.25rem; }

@keyframes gradientBG { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }