.bai-reco {
  --bai-bg: #ffffff;
  --bai-soft: #f5f6fa;
  --bai-text: #171a21;
  --bai-muted: #7a8194;
  --bai-line: #e9ebf2;
  --bai-accent: #6d5cff;
  --bai-accent-soft: rgba(109, 92, 255, 0.1);
  --bai-shadow: 0 10px 30px rgba(23, 26, 33, 0.08);
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--bai-line);
  border-radius: 18px;
  background: var(--bai-bg);
  color: var(--bai-text);
  font-size: 14px;
  line-height: 1.5;
}

.bai-reco *,
.bai-reco *::before,
.bai-reco *::after {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .bai-reco {
    --bai-bg: #161922;
    --bai-soft: #1e2230;
    --bai-text: #eef0f7;
    --bai-muted: #97a0b5;
    --bai-line: #2a3040;
    --bai-accent: #8f82ff;
    --bai-accent-soft: rgba(143, 130, 255, 0.16);
    --bai-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
}

.bai-reco-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.bai-reco-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.bai-reco-mark {
  width: 6px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #7c5cff, #22d3ee);
  align-self: center;
  flex: none;
}

.bai-reco-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.bai-reco-sub {
  color: var(--bai-muted);
  font-size: 12px;
}

.bai-reco-refresh {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--bai-line);
  border-radius: 999px;
  background: var(--bai-soft);
  color: var(--bai-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bai-reco-refresh:hover {
  color: var(--bai-accent);
  border-color: var(--bai-accent);
  background: var(--bai-accent-soft);
}

.bai-reco-refresh.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.bai-reco-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.bai-reco-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--bai-line);
  border-radius: 14px;
  background: var(--bai-bg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bai-reco-card:hover {
  transform: translateY(-2px);
  border-color: var(--bai-accent);
  box-shadow: var(--bai-shadow);
}

.bai-reco-cover {
  position: relative;
  flex: none;
  width: 108px;
  height: 82px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bai-soft);
}

.bai-reco-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bai-reco-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.16));
}

.bai-reco-letter {
  font-size: 30px;
  font-weight: 800;
  color: var(--bai-accent);
  opacity: 0.8;
}

.bai-reco-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.66);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 18px;
  backdrop-filter: blur(4px);
}

.bai-reco-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.bai-reco-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  word-break: break-word;
}

.bai-reco-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bai-muted);
  font-size: 12px;
  word-break: break-word;
}

.bai-reco-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bai-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.bai-reco-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bai-reco-author img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.bai-reco-author span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bai-reco-nums {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  flex: none;
}

.bai-reco-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 12px;
  border: 1px dashed var(--bai-line);
  border-radius: 14px;
  color: var(--bai-muted);
  font-size: 13px;
}

.bai-reco-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bai-accent-soft);
  color: var(--bai-accent);
  font-weight: 700;
}

.bai-reco-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--bai-line);
  border-top-color: var(--bai-accent);
  border-radius: 50%;
  animation: bai-reco-spin 0.8s linear infinite;
}

@keyframes bai-reco-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 560px) {
  .bai-reco {
    padding: 12px;
    border-radius: 14px;
  }

  .bai-reco-list {
    grid-template-columns: 1fr;
  }

  .bai-reco-cover {
    width: 96px;
    height: 74px;
  }

  .bai-reco-refresh {
    padding: 4px 10px;
  }
}

/* ------------------------------------------------ 内容推广页与上热门按钮 */

body.bai-boost-lock {
  overflow: hidden;
}

/* 详情页徽章行里的「上热门」按钮 */
.bai-hot-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin-left: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d5cff, #22d3ee);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 4px 12px rgba(76, 66, 200, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.bai-hot-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(76, 66, 200, 0.38);
}

.bai-hot-btn-icon {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.bai-hot-btn-text {
  letter-spacing: 0.3px;
}

/* 按钮槽：站外配置的页面接管与自定义 HTML 共用 */
.bai-hot-slot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* 可视化编辑器保存的位置：坐标是参照元素宽高的百分比 */
.bai-hot-slot-float {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
}

.bai-hot-slot-float .bai-hot-btn {
  margin: 0;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
}

/* 内容推广窗口：整页只铺一层半透明背板，推广页本体是居中的圆角窗口 */
.bai-boost-page {
  position: fixed;
  inset: 0;
  z-index: 2147482100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  box-sizing: border-box;
}

.bai-boost-page.is-open {
  display: flex;
}

.bai-boost-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, 94vw);
  height: min(760px, 88vh);
  overflow: hidden;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
}

.bai-boost-page-chrome {
  flex: 0 1 auto;
  overflow: auto;
  background: #fff;
}

.bai-boost-page-chrome[hidden] {
  display: none;
}

.bai-boost-page-header {
  max-height: 26vh;
}

.bai-boost-page-footer {
  max-height: 20vh;
}

.bai-boost-page-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #f8fafc;
}

.bai-boost-page-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
  -webkit-appearance: none;
  appearance: none;
}

.bai-boost-page-close:hover {
  background: #ffffff;
  color: #0f172a;
}

@media (max-width: 768px) {
  .bai-hot-btn {
    margin: 8px 0 12px;
    height: 28px;
    padding: 0 12px;
  }

  .bai-hot-slot-float .bai-hot-btn {
    margin: 0;
  }

  .bai-boost-page {
    padding: 10px;
  }

  .bai-boost-window {
    width: 96vw;
    height: 92vh;
    border-radius: 12px;
  }

  .bai-boost-page-header {
    max-height: 22vh;
  }

  .bai-boost-page-footer {
    max-height: 16vh;
  }

  .bai-boost-page-close {
    top: 8px;
    right: 8px;
  }
}