#template-chroma {
  font-family: "Inter", sans-serif;
  box-shadow: none;
}

#template-chroma .link-bio-preview {
  background-color: #0a0a0a !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(236, 72, 153, 0.28), transparent 60%),
    radial-gradient(ellipse 55% 35% at 90% 10%, rgba(99, 102, 241, 0.32), transparent 65%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(20, 184, 166, 0.2), transparent 70%) !important;
  padding-top: 32px !important;
}

#template-chroma .link-bio-preview:not(:has(.avatar)) {
  padding-top: 60px !important;
}

#template-chroma .profile-info,
#template-chroma .text {
  color: #ffffff !important;
  letter-spacing: -0.26px;
}

#template-chroma .profile-section span {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.35), 0 8px 32px rgba(99, 102, 241, 0.4) !important;
}

#template-chroma .button {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  letter-spacing: -0.16px !important;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#template-chroma .button:hover {
  background-image: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(99, 102, 241, 0.25)) !important;
  border-color: rgba(236, 72, 153, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

#template-chroma .card {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: all 0.3s ease;
}

#template-chroma .card:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(236, 72, 153, 0.4) !important;
  transform: translateY(-2px);
}

#template-chroma .divider {
  border: none !important;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.6), rgba(99, 102, 241, 0.6), transparent) !important;
}

#template-chroma .icon-grid button {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

#template-chroma .icon-grid button:hover {
  color: #ffffff !important;
  background-image: linear-gradient(135deg, #ec4899, #6366f1) !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45) !important;
}

#template-chroma .link-bio-footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Thumbnail fix — must come after all other .link-bio-preview rules */
#template-chroma.template .link-bio-preview,
#template-chroma.template .link-bio-preview:not(:has(.avatar)) {
  padding-top: 0 !important;
}