/* v2.16.32 热榜性能 + 6h SWR 缓存 + 小工具低饱和透明视觉。 */

/* 屏幕外卡片不参与绘制。卡片固定 500px，高度提示与真实高度一致，减少滚动中的布局跳动。 */
.wpnav-hotlist-wall-item {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
  contain: layout paint style;
}

/* 延迟卡片只保留外壳，避免 20~80 个来源同时创建列表 DOM / loading 动画。 */
.wpnav-hotlist-card--deferred {
  background: var(--hot-card-base) !important;
  box-shadow: inset 0 0 0 1px var(--hot-button-border) !important;
}

/* 每张榜单不再成为独立纵向滚动容器，鼠标滚轮始终滚整个页面。 */
.wpnav-hotlist-page .wpnav-hotlist-listbox {
  overflow: hidden !important;
  overscroll-behavior: auto;
}

/* 固定为紧凑单行，12 条完整落在卡片内，不需要内部滚动。 */
.wpnav-hotlist-page .wpnav-hotlist-items { gap: 7px; }
.wpnav-hotlist-page .wpnav-hotlist-item-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  line-height: 1.2;
  padding-top: 0;
}
.wpnav-hotlist-page .wpnav-hotlist-item-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpnav-hotlist-page .wpnav-hotlist-item-meta {
  flex: 0 0 auto;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多张骨架同时 shimmer 会持续触发合成，热榜页改成静态骨架。 */
.wpnav-hotlist-page .wpnav-hotlist-loading b { animation: none !important; }

.wpnav-hotlist-page .wpnav-hotlist-action:disabled,
.wpnav-hotlist-page .wpnav-hotlist-error button:disabled {
  opacity: .28;
  cursor: default;
}

/* 热榜页本身已经很长，减少 hover/背景过渡造成的无意义重绘。 */
.wpnav-hotlist-page .wpnav-hotlist-card,
.wpnav-hotlist-page .wpnav-hotlist-listbox {
  transition: none !important;
}

@media (max-width: 900px) {
  .wpnav-hotlist-page .wpnav-hotlist-card,
  .wpnav-hotlist-page .wpnav-hotlist-card::before,
  .wpnav-hotlist-page .wpnav-hotlist-card::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}

/* ===== v2.16.25 OmniTrends 原版卡片配色 =====
 * 对齐 OmniTrends / NewsNow 的 UnoCSS 规则：
 * - 浅色外卡：来源色 500 / 40% 透明度；
 * - 深色外卡：来源色默认值（即 400）/ 40% 透明度；
 * - 内层：bg-base / 70%，并叠加来源色 400 / 30% 的顶部径向 sprinkle；
 * - 排名块与 hover 使用 neutral-400/10，不再给前三名额外高饱和颜色。
 * 护眼模式由前端继续直接复用 dark UI。
 */
.wpnav-hotlist-page[data-hot-theme="light"] {
  --hot-list-bg: rgba(228,228,231,.70); /* zinc-200 / 70% */
  --hot-list-hover: rgba(163,163,163,.10); /* neutral-400 / 10% */
  --hot-rank-bg: rgba(163,163,163,.10);
  --hot-rank-text: #52525b;
  --hot-tag-bg: rgba(228,228,231,.50);
}
.wpnav-hotlist-page[data-hot-theme="dark"] {
  --hot-list-bg: rgba(28,28,30,.70); /* dark-600 / 70% */
  --hot-list-hover: rgba(163,163,163,.10);
  --hot-rank-bg: rgba(163,163,163,.10);
  --hot-rank-text: rgba(228,228,231,.90);
  --hot-tag-bg: rgba(28,28,30,.50);
}

/* OmniTrends CardWrapper: bg-{source}-500 / 40% in light, source DEFAULT(400) / 40% in dark. */
.wpnav-hotlist-page[data-hot-theme="light"] .wpnav-hotlist-card {
  background: color-mix(in srgb,var(--wpnav-hot-source) 40%,transparent) !important;
  box-shadow: none !important;
}
.wpnav-hotlist-page[data-hot-theme="dark"] .wpnav-hotlist-card {
  background: color-mix(in srgb,var(--wpnav-hot-source-400,var(--wpnav-hot-source)) 40%,transparent) !important;
  box-shadow: none !important;
}

/* OmniTrends inner bg-base + sprinkle-{source}. */
.wpnav-hotlist-page .wpnav-hotlist-listbox {
  background-color: var(--hot-list-bg) !important;
  background-image: radial-gradient(
    ellipse 80% 80% at 50% -30%,
    color-mix(in srgb,var(--wpnav-hot-source-400,var(--wpnav-hot-source)) 30%,transparent),
    rgba(255,255,255,0)
  ) !important;
  box-shadow: none !important;
}

/* 标题标签也按 OmniTrends：来源 400 色 + bg-base/50 + 80% opacity。 */
.wpnav-hotlist-page .wpnav-hotlist-tag {
  color: var(--wpnav-hot-source-400,var(--wpnav-hot-source)) !important;
  background: var(--hot-tag-bg) !important;
  border: 0 !important;
  opacity: .8 !important;
  font-weight: 400 !important;
}

/* 原站刷新按钮是 neutral，而不是继续加来源色。 */
.wpnav-hotlist-page[data-hot-theme="light"] .wpnav-hotlist-refresh { color:#71717a !important; }
.wpnav-hotlist-page[data-hot-theme="dark"] .wpnav-hotlist-refresh { color:#a3a3a3 !important; }

/* 原站排名块全部 neutral-400/10；不单独染红橙黄前三名。 */
.wpnav-hotlist-page .wpnav-hotlist-rank,
.wpnav-hotlist-page .wpnav-hotlist-items li:nth-child(1) .wpnav-hotlist-rank,
.wpnav-hotlist-page .wpnav-hotlist-items li:nth-child(2) .wpnav-hotlist-rank,
.wpnav-hotlist-page .wpnav-hotlist-items li:nth-child(3) .wpnav-hotlist-rank {
  background: rgba(163,163,163,.10) !important;
  color: var(--hot-rank-text) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

/* 原站 hover 同样是 neutral-400/10，不跟着来源色变。 */
.wpnav-hotlist-page .wpnav-hotlist-items li:hover {
  background: rgba(163,163,163,.10) !important;
}

/* 延迟外壳也使用与真实卡片相同的来源色，避免进入视口时颜色突然跳变。 */
.wpnav-hotlist-page[data-hot-theme="light"] .wpnav-hotlist-card--deferred {
  background: color-mix(in srgb,var(--wpnav-hot-source) 40%,transparent) !important;
  box-shadow: none !important;
}
.wpnav-hotlist-page[data-hot-theme="dark"] .wpnav-hotlist-card--deferred {
  background: color-mix(in srgb,var(--wpnav-hot-source-400,var(--wpnav-hot-source)) 40%,transparent) !important;
  box-shadow: none !important;
}

/* ===== v2.16.32 榜单来源图标：完整显示、透明背景、不裁切 ===== */
.wpnav-hotlist-page .wpnav-hotlist-source-icon{
  width:32px;height:32px;flex:0 0 32px;padding:2px;box-sizing:border-box;
  overflow:visible!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:var(--wpnav-hot-source-400,var(--wpnav-hot-source));
}
.wpnav-hotlist-page .wpnav-hotlist-source-icon img{
  position:relative!important;inset:auto!important;display:block;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center;
  border-radius:0!important;background:transparent!important;
}
.wpnav-hotlist-page .wpnav-hotlist-source-icon img + .wpnav-hotlist-source-fallback{display:none}
.wpnav-hotlist-page .wpnav-hotlist-source-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:transparent;color:inherit}

/* ===== v2.16.32 热榜小工具：同体系但降低来源色透明度，避免侧栏过于抢眼 ===== */
.wpnav-widget-hotlist{--wpnav-hot-source:#3b82f6;--wpnav-hot-source-400:#60a5fa;--hot-widget-list-bg:rgba(28,28,30,.70);--hot-widget-heading:#f4f4f5;--hot-widget-text:rgba(244,244,245,.92);--hot-widget-muted:#a1a1aa;--hot-widget-rank:rgba(228,228,231,.90);--hot-widget-tag:rgba(28,28,30,.50);min-width:0;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--wpnav-hot-source-400) 22%,transparent);box-shadow:none;color:var(--hot-widget-text)}
body.io-grey-mode .wpnav-widget-hotlist{--hot-widget-list-bg:rgba(228,228,231,.70);--hot-widget-heading:#1e2228;--hot-widget-text:#2e333a;--hot-widget-muted:#737983;--hot-widget-rank:#52525b;--hot-widget-tag:rgba(228,228,231,.50);background:color-mix(in srgb,var(--wpnav-hot-source) 22%,transparent)}
/* 默认夜间 + io-black-mode 简约护眼：热榜小工具统一使用夜间热榜 UI。 */
body:not(.io-grey-mode) .wpnav-widget-hotlist{background:color-mix(in srgb,var(--wpnav-hot-source-400) 22%,transparent)}
.wpnav-widget-hotlist--red{--wpnav-hot-source:#ef4444;--wpnav-hot-source-400:#f87171}.wpnav-widget-hotlist--blue{--wpnav-hot-source:#3b82f6;--wpnav-hot-source-400:#60a5fa}.wpnav-widget-hotlist--green{--wpnav-hot-source:#22c55e;--wpnav-hot-source-400:#4ade80}.wpnav-widget-hotlist--gray{--wpnav-hot-source:#6b7280;--wpnav-hot-source-400:#9ca3af}.wpnav-widget-hotlist--orange{--wpnav-hot-source:#f97316;--wpnav-hot-source-400:#fb923c}.wpnav-widget-hotlist--yellow{--wpnav-hot-source:#eab308;--wpnav-hot-source-400:#facc15}.wpnav-widget-hotlist--teal{--wpnav-hot-source:#14b8a6;--wpnav-hot-source-400:#2dd4bf}.wpnav-widget-hotlist--purple{--wpnav-hot-source:#a855f7;--wpnav-hot-source-400:#c084fc}.wpnav-widget-hotlist--slate{--wpnav-hot-source:#64748b;--wpnav-hot-source-400:#94a3b8}
.wpnav-widget-hotlist-head{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 8px}.wpnav-widget-hotlist-source{display:flex;align-items:center;gap:8px;min-width:0}.wpnav-widget-hotlist-source-icon{position:relative;width:30px;height:30px;flex:0 0 30px;padding:2px;box-sizing:border-box;display:grid;place-items:center;overflow:visible;border-radius:0;background:transparent;color:var(--wpnav-hot-source-400)}.wpnav-widget-hotlist-source-icon img{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:0;background:transparent}.wpnav-widget-hotlist-source-icon img + .wpnav-widget-hotlist-source-fallback{display:none}.wpnav-widget-hotlist-source-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:inherit;font-size:12px;font-weight:700;background:transparent}.wpnav-widget-hotlist-source-copy{display:flex;flex-direction:column;min-width:0}.wpnav-widget-hotlist-source-line{display:flex;align-items:center;gap:6px;min-width:0}.wpnav-widget-hotlist-source-line strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hot-widget-heading);font-size:15px;line-height:1.15;font-weight:750}.wpnav-widget-hotlist-tag{flex:0 0 auto;padding:0 4px;border-radius:4px;background:var(--hot-widget-tag);color:var(--wpnav-hot-source-400);font-size:10px;line-height:1.5;opacity:.65;font-weight:400}.wpnav-widget-hotlist-updated{margin-top:2px;color:var(--hot-widget-muted);font-size:10px;line-height:1.15}.wpnav-widget-hotlist-more{flex:0 0 auto;padding:4px 6px;border-radius:6px;color:var(--hot-widget-muted)!important;font-size:11px;line-height:1;text-decoration:none!important}.wpnav-widget-hotlist-more:hover{background:rgba(163,163,163,.10);color:var(--hot-widget-heading)!important}
.wpnav-widget-hotlist-listbox{padding:7px;border-radius:13px;background-color:var(--hot-widget-list-bg);background-image:radial-gradient(ellipse 80% 80% at 50% -30%,color-mix(in srgb,var(--wpnav-hot-source-400) 14%,transparent),rgba(255,255,255,0));overflow:hidden}.wpnav-widget-hotlist-list{display:flex;flex-direction:column;gap:5px;list-style:none!important;margin:0!important;padding:0!important}.wpnav-widget-hotlist-list>li{list-style:none!important;margin:0!important;padding:0!important}.wpnav-widget-hotlist-list>li::marker{content:""}.wpnav-widget-hotlist-item{border-radius:6px}.wpnav-widget-hotlist-item:hover{background:rgba(163,163,163,.10)}.wpnav-widget-hotlist-item-link{display:flex;align-items:stretch;gap:7px;min-width:0;padding:0 3px 0 0;border-radius:6px;color:var(--hot-widget-text)!important;text-decoration:none!important}.wpnav-widget-hotlist-rank{width:23px;min-width:23px;min-height:25px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(163,163,163,.10);color:var(--hot-widget-rank);font-size:11px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums}.wpnav-widget-hotlist-item-copy{display:flex;align-items:center;gap:6px;min-width:0;flex:1;line-height:1.2}.wpnav-widget-hotlist-link{display:block;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:12.5px;line-height:1.25}.wpnav-widget-hotlist-item-meta{flex:0 0 auto;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hot-widget-muted);font-size:10px}.wpnav-widget-hotlist-status{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 4px;color:var(--hot-widget-muted);font-size:11.5px}.wpnav-widget-hotlist-retry{appearance:none;border:1px solid rgba(163,163,163,.18);border-radius:7px;background:rgba(163,163,163,.08);color:var(--hot-widget-text);padding:4px 7px;font:inherit;font-size:10.5px;cursor:pointer}.wpnav-widget-hotlist-retry:hover{background:rgba(163,163,163,.14)}