.site-list-thumb {
  align-items: center !important;
  background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 12px 24px rgba(15, 23, 42, .08) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 116px !important;
  height: 116px !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 116px !important;
}

.site-list-thumb .site-list-image {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: 88px !important;
  max-height: 88px !important;
  max-width: 88px !important;
  object-fit: contain !important;
  padding: 0 !important;
  width: 88px !important;
}

.site-list-thumb .site-list-letter-icon {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 36%), var(--bg) !important;
  border-radius: 26px !important;
  box-shadow: inset 0 -18px 30px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .62), 0 10px 22px rgba(15, 23, 42, .14) !important;
  color: var(--fg) !important;
  display: grid !important;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  height: 88px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  place-items: center !important;
  position: relative !important;
  text-decoration: none !important;
  text-shadow: 0 2px 0 var(--shadow), 0 10px 18px rgba(15, 23, 42, .20) !important;
  width: 88px !important;
  -webkit-text-fill-color: var(--fg) !important;
}

.site-list-thumb .site-list-letter-icon::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .42)) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 28px !important;
  left: 13px !important;
  opacity: var(--shine) !important;
  position: absolute !important;
  right: 13px !important;
  top: 10px !important;
}

.site-list-thumb .site-list-letter-icon::after {
  animation: none !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .58) 48%, rgba(255, 238, 166, .18) 58%, transparent 100%) !important;
  content: "" !important;
  height: 138% !important;
  left: 0 !important;
  opacity: .58 !important;
  position: absolute !important;
  top: -20% !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  width: 22px !important;
}

.webdir-card:hover .site-list-letter-icon::after,
.vip-list-item:hover .site-list-letter-icon::after {
  animation: webdirLetterSweep .86s ease forwards !important;
}

@media (max-width: 900px) {
  .site-list-thumb {
    flex-basis: 88px !important;
    height: 88px !important;
    width: 88px !important;
  }

  .site-list-thumb .site-list-image,
  .site-list-thumb .site-list-letter-icon {
    border-radius: 20px !important;
    font-size: 37px !important;
    height: 66px !important;
    max-height: 66px !important;
    max-width: 66px !important;
    width: 66px !important;
  }

  .site-list-thumb .site-list-letter-icon::before {
    height: 20px !important;
    left: 10px !important;
    right: 10px !important;
    top: 8px !important;
  }
}

@media (max-width: 560px) {
  .site-list-thumb {
    flex-basis: 68px !important;
    height: 68px !important;
    width: 68px !important;
  }

  .site-list-thumb .site-list-image,
  .site-list-thumb .site-list-letter-icon {
    border-radius: 16px !important;
    font-size: 28px !important;
    height: 50px !important;
    max-height: 50px !important;
    max-width: 50px !important;
    width: 50px !important;
  }

  .site-list-thumb .site-list-letter-icon::before {
    height: 16px !important;
    left: 8px !important;
    right: 8px !important;
    top: 6px !important;
  }
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback.site-list-thumb.site-list-thumb-fallback {
  border-radius: 18px !important;
  height: 116px !important;
  max-height: none !important;
  max-width: none !important;
  width: 116px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon {
  border-radius: 26px !important;
  font-size: 48px !important;
  height: 88px !important;
  width: 88px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon::before {
  height: 28px !important;
  left: 13px !important;
  right: 13px !important;
  top: 10px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon::after {
  animation: none !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .58) 48%, rgba(255, 238, 166, .18) 58%, transparent 100%) !important;
  content: "" !important;
  height: 138% !important;
  left: 0 !important;
  opacity: .58 !important;
  position: absolute !important;
  top: -20% !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  width: 22px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card:hover > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon::after {
  animation: webdirLetterSweep .86s ease forwards !important;
}

@media (max-width: 900px) {
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback.site-list-thumb.site-list-thumb-fallback {
    height: 88px !important;
    width: 88px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon {
    border-radius: 20px !important;
    font-size: 37px !important;
    height: 66px !important;
    width: 62px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon::before {
    height: 20px !important;
    left: 10px !important;
    right: 10px !important;
    top: 8px !important;
  }
}

@media (max-width: 560px) {
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback.site-list-thumb.site-list-thumb-fallback {
    height: 68px !important;
    width: 68px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon {
    border-radius: 16px !important;
    font-size: 28px !important;
    height: 50px !important;
    width: 42px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .vip-thumb.vip-thumb-fallback .vip-letter-icon.vip-letter-main.site-list-letter-icon::before {
    height: 16px !important;
    left: 8px !important;
    right: 8px !important;
    top: 6px !important;
  }
}

/* VIP has legacy high-specificity rules; map the shared component over them. */
html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb {
  align-items: center !important;
  background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 12px 24px rgba(15, 23, 42, .08) !important;
  display: flex !important;
  flex: 0 0 116px !important;
  height: 116px !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 116px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-image {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  height: 88px !important;
  max-height: 88px !important;
  max-width: 88px !important;
  object-fit: contain !important;
  width: 88px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 36%), var(--bg) !important;
  border-radius: 26px !important;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif !important;
  font-size: 48px !important;
  height: 88px !important;
  text-shadow: 0 2px 0 var(--shadow), 0 10px 18px rgba(15, 23, 42, .20) !important;
  width: 88px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .42)) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 28px !important;
  left: 13px !important;
  opacity: var(--shine) !important;
  position: absolute !important;
  right: 13px !important;
  top: 10px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon::after {
  animation: none !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .58) 48%, rgba(255, 238, 166, .18) 58%, transparent 100%) !important;
  content: "" !important;
  height: 138% !important;
  left: 0 !important;
  opacity: .58 !important;
  position: absolute !important;
  top: -20% !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  width: 22px !important;
}

html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card:hover > .site-list-thumb .site-list-letter-icon::after {
  animation: webdirLetterSweep .86s ease forwards !important;
}

@media (max-width: 900px) {
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb {
    flex-basis: 88px !important;
    height: 88px !important;
    width: 88px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-image,
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon {
    border-radius: 20px !important;
    font-size: 37px !important;
    height: 66px !important;
    max-height: 66px !important;
    max-width: 62px !important;
    width: 62px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon::before {
    height: 20px !important;
    left: 10px !important;
    right: 10px !important;
    top: 8px !important;
  }
}

@media (max-width: 560px) {
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb {
    flex-basis: 68px !important;
    height: 68px !important;
    width: 68px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-image,
  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon {
    border-radius: 16px !important;
    font-size: 28px !important;
    height: 50px !important;
    max-height: 50px !important;
    max-width: 42px !important;
    width: 42px !important;
  }

  html[data-front-theme] #mainbox.vip-page .vip-list-item.vip-card.vip-floating-card > .site-list-thumb .site-list-letter-icon::before {
    height: 16px !important;
    left: 8px !important;
    right: 8px !important;
    top: 6px !important;
  }
}