/* ============================================================
   novel8 小说聚合站主题 · 统一样式
   配色参考上传的「书海阁」预览页：主色 indigo #4f46e5，单栏 1100px
   所有颜色集中用 CSS 变量管理，不写死十六进制（除变量定义处）
   ============================================================ */
:root {
  --primary: #4f46e5;
  --primary-light: #eef2ff;
  --text: #1e293b;
  --text-light: #64748b;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --container: 1100px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 15px; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ============ 公共：头部 ============ */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--primary); flex-shrink: 0; }
.logo-mark { width: 36px; height: 36px; background: var(--primary); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.logo-text em { font-size: 11px; font-style: normal; color: var(--text-light); display: block; font-weight: 400; letter-spacing: 1px; }
/* 导航栏：调用 Z-Blog 的 navbar 模块（后台「链接管理（导航栏）」维护） */
.main-nav { flex: 1; min-width: 0; }
.main-nav ul { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 6px 12px; border-radius: 6px; font-size: 14px; color: var(--text-light); }
.main-nav a:hover, .main-nav a.active { background: var(--primary-light); color: var(--primary); }
/* 二级菜单（LinksManage 的「二级」开关） */
.main-nav li > ul { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; align-items: stretch; gap: 2px; min-width: 140px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 200; }
.main-nav li:hover > ul { display: flex; }
.main-nav li > ul a { white-space: nowrap; }
.search { display: flex; gap: 6px; flex-shrink: 0; }
.search input { border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 14px; outline: none; width: 200px; }
.search input:focus { border-color: var(--primary); }
.search button { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 14px; cursor: pointer; }

/* ============ 公共：页脚 ============ */
.site-footer { background: #fff; border-top: 1px solid var(--border); padding: 32px 0; margin-top: 24px; }
/* 页脚：导航已去除（与顶部导航重复），只留简介 + 版权行 */
.footer-bottom { text-align: center; font-size: 13px; color: var(--text-light); display: flex; flex-direction: column; gap: 4px; }

/* ============ 首页专属 ============ */
.hero { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); padding: 44px 0 36px; text-align: center; }
.hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.hero p { color: var(--text-light); margin-bottom: 22px; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-search { display: flex; justify-content: center; gap: 8px; max-width: 520px; margin: 0 auto 18px; }
.hero-search input { flex: 1; padding: 13px 18px; border: 2px solid var(--border); border-radius: 10px; font-size: 15px; outline: none; }
.hero-search input:focus { border-color: var(--primary); }
.hero-search button { background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 0 28px; font-size: 15px; font-weight: 600; cursor: pointer; }
.hot-words { max-width: 720px; margin: 0 auto; font-size: 14px; }
.hot-words .label { color: var(--text-light); margin-right: 6px; }
.hot-words a { display: inline-block; padding: 4px 12px; margin: 4px 4px; background: #fff; border-radius: 20px; color: var(--primary); border: 1px solid #e0e7ff; font-size: 13px; transition: all .2s; }
.hot-words a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.page { padding: 36px 0; }
.section { margin-bottom: 36px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.section-head h2 { font-size: 20px; font-weight: 700; }
.section-head .count { font-size: 14px; color: var(--text-light); }
.section-head .more { font-size: 13px; color: var(--text-light); }
.section-head .more:hover { color: var(--primary); }

.kw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kw-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: block; transition: all .2s; }
.kw-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.kw-card .kw-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: block; }
.kw-card:hover .kw-title { color: var(--primary); }
.kw-card .kw-desc { font-size: 12px; color: var(--text-light); }

.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.book-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all .2s; display: block; }
.book-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,0.1); }
.book-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.book-card:hover h3 { color: var(--primary); }
.book-card .intro { font-size: 14px; color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.hot-search-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.hot-search-list a { font-size: 14px; color: var(--text-light); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.hot-search-list a:hover { color: var(--primary); }
.hot-search-list a::before { content: "🔍"; font-size: 12px; opacity: .6; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.faq-item p { font-size: 14px; color: var(--text-light); }

.kw-footer { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.kw-footer h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.kw-footer .kw-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.kw-footer .kw-links a { color: var(--text-light); }
.kw-footer .kw-links a:hover { color: var(--primary); }

/* ============ 分页（含 pagebar 模板输出的 .now-page / .m / .next-page） ============ */
.pagination { display: flex; justify-content: center; gap: 6px; padding: 24px 0; flex-wrap: wrap; }
.pagination a, .pagination .now-page, .pagination .m { padding: 8px 14px; border-radius: 6px; font-size: 14px; border: 1px solid var(--border); background: #fff; color: var(--text); }
.pagination a:hover, .pagination .m:hover { border-color: var(--primary); color: var(--primary); }
.pagination .now-page { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============ 分类页专属 ============ */
.breadcrumb { font-size: 14px; color: var(--text-light); margin-bottom: 20px; }
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 6px; }

.filter-bar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
.filter-bar .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--border); }
.filter-bar .filter-row:last-child { border-bottom: none; }
.filter-bar .filter-row .label { color: var(--text-light); min-width: 60px; flex-shrink: 0; }
.filter-bar .filter-row a { padding: 3px 12px; border-radius: 4px; color: var(--text); }
.filter-bar .filter-row a.active, .filter-bar .filter-row a:hover { background: var(--primary-light); color: var(--primary); }

.book-list { display: flex; flex-direction: column; gap: 16px; }
.book-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); transition: all .2s; display: block; }
.book-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,0.1); }
.book-item h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.book-item:hover h2 { color: var(--primary); }
.book-item .intro { font-size: 14px; color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-item .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.book-item .tags span { font-size: 12px; color: var(--primary); background: var(--primary-light); padding: 2px 10px; border-radius: 20px; }

.related-search { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); margin-top: 32px; }
.related-search h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.related-search .kw-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.related-search .kw-links a { color: var(--text-light); }
.related-search .kw-links a:hover { color: var(--primary); }

/* ============ 文章页专属 ============ */
.post-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 40px; }
.post-card h1 { font-size: 26px; font-weight: 700; margin-bottom: 14px; line-height: 1.4; }
.post-meta { font-size: 13px; color: var(--text-light); padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 16px; }
.post-meta a { color: var(--primary); }
.post-info { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-light); padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.post-tags a { font-size: 13px; color: var(--primary); background: var(--primary-light); padding: 3px 12px; border-radius: 20px; }
.post-tags a:hover { background: var(--primary); color: #fff; }
/* 正文排版：长文阅读用——字号放大、行高放宽、段落间距加大、中文首行缩进两字 */
.post-content { font-size: 16px; color: var(--text); line-height: 2; }
.post-content p { margin-bottom: 18px; text-indent: 2em; }
.post-content img { max-width: 100%; height: auto; }
.post-actions { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; gap: 12px; }
.btn { display: inline-block; padding: 10px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-outline { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.related-section { margin-top: 32px; }
.related-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.related-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); transition: all .2s; display: block; }
.related-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.related-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.related-card:hover h3 { color: var(--primary); }
.related-card .intro { font-size: 13px; color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.also-search { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 24px; box-shadow: var(--shadow); margin-top: 32px; }
.also-search h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.also-search .kw-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.also-search .kw-links a { color: var(--text-light); }
.also-search .kw-links a:hover { color: var(--primary); }

/* 上一本 / 下一本（用 Z-Blog 原生 $article.Prev / $article.Next，零额外查询） */
.chapter-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.chapter-nav a, .chapter-nav span { flex: 1; min-width: 0; padding: 14px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 14px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chapter-nav a:hover { border-color: var(--primary); color: var(--primary); }
.chapter-nav .chapter-next { text-align: right; }
.chapter-nav .chapter-none { color: var(--text-light); }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .kw-grid { grid-template-columns: repeat(2, 1fr); }
  .hot-search-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px; }
  .main-nav { order: 3; width: 100%; }
  .search { order: 2; margin-left: auto; }
  .search input { width: 140px; }
  .book-grid { grid-template-columns: 1fr; }
  .kw-grid { grid-template-columns: 1fr; }
  .hot-search-list { grid-template-columns: 1fr; }
  .hero h1 { font-size: 22px; }
  .post-card { padding: 24px 20px; }
  .post-card h1 { font-size: 22px; }
  .related-grid { grid-template-columns: 1fr; }
  .chapter-nav { flex-direction: column; gap: 10px; }
  .chapter-nav .chapter-next { text-align: left; }
}

/* ============ 列表页 / 搜索页 / 404 / 模块挂载位（2026-09-18 SEO 改造新增） ============ */
.page-title { font-size: 24px; font-weight: 700; line-height: 1.4; }
.book-card h2 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.book-card:hover h2 { color: var(--primary); }
.empty-tip { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; color: var(--text-light); box-shadow: var(--shadow); }
.empty-tip p { margin-bottom: 12px; }
.empty-tip .kw-links { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 14px; }
.empty-tip .kw-links a { color: var(--primary); }

/* hero 热搜：模块输出的是 li，需要把 ul/li 展平成行内 */
.hot-words-list { list-style: none; display: inline; margin: 0; padding: 0; }
.hot-words-list li { display: inline; }

/* 标签云 / 友情链接：模块输出 li，统一成横向词条 */
.tag-cloud, .friend-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; font-size: 13px; }
.tag-cloud a, .friend-links a { color: var(--text-light); }
.tag-cloud a:hover, .friend-links a:hover { color: var(--primary); }
.kw-footer + .kw-footer { margin-top: 16px; }

/* 搜索页 */
.search .hero-search { margin-bottom: 24px; }

/* 404 */
.err404 { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px 32px; text-align: center; }
.err404-num { font-size: 64px; font-weight: 700; color: var(--primary); line-height: 1; }
.err404-title { font-size: 20px; font-weight: 700; margin: 12px 0 8px; }
.err404-desc { color: var(--text-light); margin-bottom: 20px; }
.err404 .hero-search { max-width: 480px; margin: 0 auto 24px; }
.err404-block { text-align: left; max-width: 720px; margin: 0 auto 20px; }
.err404-block h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.err404-block .kw-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.err404-block .kw-links a { color: var(--text-light); }
.err404-block .kw-links a:hover { color: var(--primary); }
.err404-back { margin-top: 8px; }

@media (max-width: 700px) {
  .page-title { font-size: 20px; }
  .err404 { padding: 32px 20px; }
  .err404-num { font-size: 48px; }
}