/* ── 页面容器 ─────────────────────────────────── */
.nf-page {
  min-height: 100vh;
  background: var(--bg);
}

/* ── 页头 ─────────────────────────────────────── */
.nf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.067vw 6.4vw 3.733vw;
}
.nf-h-l {
  display: flex;
  align-items: baseline;
  gap: 2.667vw;
}
.nf-h-t {
  font-size: 5.6vw;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.nf-h-s {
  font-size: 3.2vw;
  color: var(--meta);
}
.icon-btn {
  width: 10.133vw;
  height: 10.133vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-icon {
  width: 5.6vw;
  height: 5.6vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.dk .search-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEAE4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E");
}

/* ── 信息流容器 ──────────────────────────────── */
.nf-feed {
  padding: 0 6.4vw 7.467vw;
}

/* ── 卡片基础 ──────────────────────────────────── */
.nf-card {
  padding: 5.867vw 0;
  border-bottom: 0.133vw solid var(--line);
}
.nf-card:last-child {
  border-bottom: none;
}

/* ── nf-top：标签行 ──────────────────────────── */
.nf-top {
  display: flex;
  align-items: center;
  gap: 2.4vw;
  margin-bottom: 3.2vw;
}
.nf-tag {
  font-size: 2.933vw;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 0.8vw 2.133vw;
  border-radius: 1.067vw;
  color: var(--info);
  background: var(--info-ghost);
  flex-shrink: 0;
}
.nf-topic {
  font-size: 3.2vw;
  font-weight: 500;
  color: var(--meta);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
}
.nf-hot {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 3.067vw;
  font-weight: 600;
  color: var(--aha);
  letter-spacing: .02em;
  flex-shrink: 0;
}

/* ── 衬线标题 ─────────────────────────────────── */
.nf-title {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  margin: 0;
}
.serif {
  font-family: 'Noto Serif SC', 'STSong', 'Songti SC', Georgia, serif;
}

/* ── 摘要 ─────────────────────────────────────── */
.nf-prev {
  font-size: 3.6vw;
  line-height: 1.78;
  color: var(--sub);
  letter-spacing: .01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── meta 行 ──────────────────────────────────── */
.nf-meta {
  display: flex;
  align-items: center;
  gap: 2.4vw;
  font-size: 3.2vw;
  color: var(--meta);
  font-weight: 500;
  white-space: nowrap;
}
.nf-meta .by {
  color: var(--sub);
}
.nf-msep {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  background: var(--meta);
  opacity: .55;
  flex-shrink: 0;
}

/* ── 图片占位块 ───────────────────────────────── */
.nf-img {
  background: var(--avatar);
  border-radius: 3.2vw;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

/* ── 大图卡 nf-hero ─────────────────────────── */
.nf-cover {
  width: 100%;
  height: 48vw;
  margin-bottom: 4vw;
  border-radius: 3.2vw;
}
.nf-hero .nf-title {
  font-size: 5.6vw;
  line-height: 1.5;
  margin-bottom: 2.667vw;
}
.nf-hero .nf-prev {
  -webkit-line-clamp: 2;
  margin-bottom: 3.733vw;
}

/* ── 左文右图卡 nf-lr ────────────────────────── */
.nf-lr {
  display: flex;
  gap: 4.267vw;
  align-items: flex-start;
}
.nf-lr-txt {
  flex: 1;
  min-width: 0;
}
.nf-lr .nf-title {
  font-size: 4.533vw;
  line-height: 1.5;
  margin-bottom: 2.4vw;
}
.nf-lr .nf-prev {
  -webkit-line-clamp: 2;
  margin-bottom: 3.2vw;
}
.nf-thumb {
  width: 27.733vw;
  height: 27.733vw;
  border-radius: 3.2vw;
}

/* ── 纯文字卡 nf-text ────────────────────────── */
.nf-text .nf-title {
  font-size: 4.533vw;
  line-height: 1.5;
  margin-bottom: 2.4vw;
}
.nf-text .nf-prev {
  -webkit-line-clamp: 2;
  margin-bottom: 3.2vw;
}

/* ── 三图卡 nf-tri ───────────────────────────── */
.nf-tri .nf-title {
  font-size: 4.533vw;
  line-height: 1.5;
  margin-bottom: 3.467vw;
}
.nf-imgs {
  display: flex;
  gap: 2.133vw;
  margin-bottom: 3.467vw;
}
.nf-sq {
  flex: 1;
  height: 28vw;
  border-radius: 2.4vw;
}

/* ── 加载 / 空态 ──────────────────────────────── */
.nf-loading {
  text-align: center;
  padding: 10.667vw 0;
  color: var(--meta);
  font-size: 3.733vw;
}

/* 分类 Tab */
.nf-tabs {
  display: flex;
  gap: 1.867vw;
  padding: 0.533vw 4.267vw 2.667vw;
}
.nf-tab {
  font-size: 3.467vw;
  color: #8A8578;
  padding: 1.333vw 4vw;
  border-radius: 133.2vw;
  background: rgba(0, 0, 0, 0.045);
  transition: all 0.2s;
}
.nf-tab.on {
  color: #FFFFFF;
  background: #1A1915;
  font-weight: 600;
}
.dk .nf-tab { background: rgba(255, 255, 255, 0.08); color: #999; }
.dk .nf-tab.on { background: #E8C97A; color: #1A1915; }

/* 加载更多 / 到底提示 */
.nf-more {
  margin: 1.067vw 5.333vw 0;
  padding: 3.2vw 0;
  text-align: center;
  font-size: 3.733vw;
  font-weight: 600;
  color: var(--aha);
  background: var(--aha-ghost);
  border-radius: 2.133vw;
}
.nf-end {
  text-align: center;
  font-size: 3.2vw;
  color: var(--meta);
  padding: 3.733vw 0;
}

@media (max-width: 1199px) {
  .nf-head {
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
  }

  .nf-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 12px);
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
  }

  .nf-tab {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    white-space: nowrap;
  }

  .nf-feed {
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
    padding-bottom: calc(86px + var(--h5-safe-bottom));
  }

  .nf-card {
    padding: clamp(16px, 4.8vw, 22px);
    margin-bottom: clamp(12px, 3.2vw, 18px);
    background: var(--surface);
    border: 0.133vw solid var(--line);
    border-radius: var(--h5-card-radius);
  }

  .nf-card:last-child {
    margin-bottom: 0;
    border-bottom: 0.133vw solid var(--line);
  }

  .nf-cover {
    height: clamp(178px, 50vw, 220px);
    border-radius: clamp(14px, 3.6vw, 18px);
  }

  .nf-thumb {
    width: clamp(96px, 28vw, 122px);
    height: clamp(96px, 28vw, 122px);
    border-radius: clamp(12px, 3.2vw, 16px);
  }

  .nf-title {
    text-align: left;
  }

  .nf-prev {
    text-align: left;
  }
}