/* —— 推荐区整体强调：轻微背景与分隔线 —— */
.hot-tools .row.io-mx-n2,
.hot-tools-row {
  position: relative;
  padding: 10px 8px 2px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 238, 200, .25), rgba(255, 238, 200, .06));
  border: 1px solid rgba(255, 165, 0, .25);
}

/* 暗色模式适配（你的站点用 .dark 切换） */
.dark .hot-tools .row.io-mx-n2,
.dark .hot-tools-row {
  background: linear-gradient(180deg, rgba(255, 180, 0, .08), rgba(255, 180, 0, .02));
  border-color: rgba(255, 180, 0, .25);
}

/* 顶部细色条（更“推荐”感） */
.hot-tools .row.io-mx-n2::before,
.hot-tools-row::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #ffb703 0%, #fb8500 60%, #ffb703 100%);
  opacity: .55;
}

/* 热门工具卡片：默认橙色阴影 + 边框高亮 */
.hot-tools .url-card .card,
.hot-tools-row .url-card .card {
  box-shadow: 0 6px 16px rgba(251, 133, 0, .25); /* 橙色阴影 */
  border: 1px solid rgba(251, 133, 0, .5);      /* 边框高亮 */
}


/* —— 角标“推荐”：不改模板，伪元素叠加 —— */
.hot-tools .url-card .url-body,
.hot-tools-row .url-card .url-body {
  position: relative;
}

.hot-tools .url-card .url-body::after,
.hot-tools-row .url-card .url-body::after {
  content: "推荐";
  position: absolute;
  top: 6px;
  right: -4px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(90deg, #ff7a00, #ff3d00);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(255, 100, 0, .25);
  transform: rotate(0deg);
  pointer-events: none;
  opacity: .95;
}

.dark .hot-tools .url-card .url-body::after,
.dark .hot-tools-row .url-card .url-body::after {
  box-shadow: 0 4px 10px rgba(255, 140, 0, .35);
}

/* —— 图标容器更显眼（你的模板里是 .url-img） —— */
.hot-tools .url-card .url-img,
.hot-tools-row .url-card .url-img {
  box-shadow: 0 2px 10px rgba(251, 133, 0, .18);
}

/* —— 列间距微调，让“更密实但不拥挤” —— */
.hot-tools .row.io-mx-n2 > [class*="col-"],
.hot-tools-row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* —— 小屏时角标避免遮挡标题 —— */
@media (max-width: 575.98px) {
  .hot-tools .url-card .url-body::after,
  .hot-tools-row .url-card .url-body::after {
    top: 4px;
    right: 2px;
    transform: scale(.92);
  }
}