/**
 * 船说CMS (ShipSay) 现代极致前端设计系统
 * 专为现代高质感阅读体验、顶尖 SEO 搜索引擎优化与 GEO 生成式AI引擎优化定制
 * 采用原生纯 Vanilla CSS3，支持 CSS 变量、微交互动效与多端自适应响应式布局
 */

/* ==========================================================================
   1. 设计系统全局变量 (Design Tokens)
   ========================================================================== */
:root {
    /* 核心色彩系统 */
    --color-primary: #ed4259;
    --color-primary-hover: #d9374d;
    --color-primary-light: #fff0f2;
    --color-primary-gradient: linear-gradient(135deg, #ed4259 0%, #ff6b81 100%);
    
    --color-accent: #3b82f6;
    --color-accent-light: #eff6ff;
    
    /* 文本与中性色 */
    --color-text-main: #1e293b;
    --color-text-regular: #475569;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    
    /* 背景色体系 */
    --color-bg-body: #f8fafc;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #f1f5f9;
    
    /* 边框与分割线 */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    
    /* 阴影层次系统 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.09), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    
    /* 几何圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;
    
    /* 动效过渡 */
    --transition-fast: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 字体栈 */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    --font-family-reader: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", serif, sans-serif;
    
    /* 阅读器护眼主题预设 (暖黄纸书质感) */
    --reader-bg: #f5eedf;
    --reader-text: #2c251e;
    --reader-card: #fbf6ec;
    --reader-border: #e8decc;
}

/* ==========================================================================
   2. 基础重置与排版规范
   ========================================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-regular);
    background-color: var(--color-bg-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

ul, ol, li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

/* 工具样式类 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.w100 {
    width: 100%;
}

.dsno {
    display: none !important;
}

/* 屏幕阅读器与 SEO 无障碍友好隐藏 (避免被搜索引擎判定为 Cloaking) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.badge-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.badge-accent {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

/* ==========================================================================
   3. 头部导航 (Header & Navigation)
   ========================================================================== */
header {
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 20px;
}

#logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

#logo span {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

#logo p {
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* 现代即时搜索框 */
.search-form-wrap {
    flex: 1;
    max-width: 500px;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 4px 6px 4px 16px;
    transition: var(--transition-fast);
}

.search-box:focus-within {
    border-color: var(--color-primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(237, 66, 89, 0.12);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-text-main);
    font-size: 14px;
}

.search-btn {
    background: var(--color-primary-gradient);
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.search-btn:hover {
    opacity: 0.92;
    transform: scale(1.02);
}

/* 右侧工具快捷链接 */
.header_right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header_right a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.header_right a i {
    font-size: 18px;
    margin-bottom: 2px;
}

.header_right a:hover {
    color: var(--color-primary);
}

/* 导航栏 (Navigation Bar) */
.navigation {
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
}

.navigation nav {
    display: flex;
    align-items: center;
    height: 46px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.navigation nav a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-regular);
    position: relative;
    transition: var(--transition-fast);
}

.navigation nav a:hover,
.navigation nav a.active {
    color: var(--color-primary);
}

.navigation nav a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

#user_panel {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-left: 16px;
}

/* ==========================================================================
   4. 首页现代化排版 (Home Grid & Cards)
   ========================================================================== */
.home-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border-light);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--color-primary-gradient);
    border-radius: 2px;
}

.section-more {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* 大神小说精选网格 (2列响应式大卡片) */
.commend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.novel-card {
    display: flex;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.novel-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border);
}

.novel-cover-wrap {
    width: 100px;
    height: 136px;
    flex-shrink: 0;
    margin-right: 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    position: relative;
    background-color: var(--color-bg-subtle);
}

.novel-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.novel-card:hover .novel-cover-wrap img {
    transform: scale(1.05);
}

.novel-meta-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.novel-meta-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.novel-meta-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: auto;
}

.novel-meta-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border-light);
    font-size: 12px;
}

.novel-meta-author {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 热门排行榜榜单 (Sidebar Rank) */
.rank-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.rank-item:hover {
    background-color: var(--color-bg-subtle);
}

.rank-num {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    margin-right: 10px;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.rank-item:nth-child(1) .rank-num { background-color: #ff4757; color: #ffffff; }
.rank-item:nth-child(2) .rank-num { background-color: #ffa502; color: #ffffff; }
.rank-item:nth-child(3) .rank-num { background-color: #2ed573; color: #ffffff; }

.rank-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-author {
    font-size: 12px;
    color: var(--color-text-light);
    margin-left: 8px;
    flex-shrink: 0;
}

/* 分类瀑布流与聚合 (Category Sections) */
.category-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.category-block {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.category-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}

.category-block-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
}

.category-top-novel {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--color-border-light);
}

.category-top-novel img {
    width: 72px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.category-sub-list li {
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.category-sub-list li a.title {
    color: var(--color-text-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.category-sub-list li a.title:hover {
    color: var(--color-primary);
}

.category-sub-list li span.author {
    color: var(--color-text-light);
    font-size: 12px;
}

/* ==========================================================================
   5. 面包屑与通用工具栏 (Breadcrumb)
   ========================================================================== */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
}

.breadcrumb-nav a {
    color: var(--color-text-regular);
}

.breadcrumb-nav a:hover {
    color: var(--color-primary);
}

.breadcrumb-nav .sep {
    margin: 0 8px;
    color: var(--color-text-light);
}

.breadcrumb-nav .current {
    color: var(--color-primary);
    font-weight: 600;
}

/* ==========================================================================
   6. 小说详情页 (Info Page & GEO Factsheet)
   ========================================================================== */
.book-detail-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
}

.book-detail-main {
    display: flex;
    gap: 28px;
}

.book-detail-cover {
    width: 170px;
    height: 226px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    position: relative;
    background-color: var(--color-bg-subtle);
}

.book-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-detail-info {
    flex: 1;
    min-width: 0;
}

.book-detail-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.25;
    margin-bottom: 12px;
}

/* GEO 核心实体速查档案盒 (Entity Factsheet) */
.book-factsheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

.book-factsheet-item {
    display: flex;
    align-items: center;
}

.book-factsheet-item dt {
    color: var(--color-text-muted);
    margin-right: 6px;
    flex-shrink: 0;
}

.book-factsheet-item dd {
    color: var(--color-text-main);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-detail-intro {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-regular);
    margin-bottom: 20px;
    text-align: justify;
}

.book-actions-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-read-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-gradient);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(237, 66, 89, 0.3);
    transition: var(--transition-fast);
}

.btn-read-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(237, 66, 89, 0.4);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--color-text-main) !important;
    border: 1px solid var(--color-border);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-text-muted);
}

/* 章节目录列表抽屉 (Chapter Index Box) */
.chapter-box-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
}

.chapter-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.chapter-grid-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 18px;
}

.chapter-grid-list li {
    border-bottom: 1px dashed var(--color-border-light);
    padding: 8px 0;
}

.chapter-grid-list li a {
    display: block;
    font-size: 14px;
    color: var(--color-text-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chapter-grid-list li a:hover {
    color: var(--color-primary);
    padding-left: 4px;
}

/* GEO 结构化 FAQ 问答区块 (For AI Search Citation) */
.geo-faq-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
}

.geo-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.geo-faq-item {
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.geo-faq-q {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.geo-faq-q::before {
    content: 'Q:';
    color: var(--color-primary);
    font-weight: 800;
}

.geo-faq-a {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-regular);
}

/* ==========================================================================
   7. 沉浸式阅读器 (Reader Experience & Themes)
   ========================================================================== */
.reader-page-body {
    background-color: var(--reader-bg) !important;
    color: var(--reader-text) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 顶部阅读进度指示条 */
#read_progress_bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-primary-gradient);
    z-index: 1000;
    width: 0%;
    transition: width 0.1s linear;
}

/* 阅读器主容器 */
.reader-container {
    max-width: 860px;
    margin: 20px auto 40px;
    padding: 0 16px;
}

.reader-paper {
    background-color: var(--reader-card);
    border: 1px solid var(--reader-border);
    border-radius: var(--radius-md);
    padding: 36px 44px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.reader-header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--reader-border);
}

.reader-chapter-title {
    font-size: 24px;
    font-weight: 700;
    color: inherit;
    line-height: 1.35;
    margin-bottom: 10px;
}

.reader-meta-bar {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* 沉浸式工具控制面板 (护眼主题与字号控制) */
.reader-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.03);
    border: 1px solid var(--reader-border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-bottom: 24px;
    font-size: 13px;
}

.theme-switch-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-pill {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-fast);
}

.theme-pill:hover,
.theme-pill.active {
    transform: scale(1.15);
    border-color: var(--color-primary);
}

.theme-pill-yellow { background-color: #f5eedf; }
.theme-pill-green  { background-color: #dcecd6; }
.theme-pill-white  { background-color: #ffffff; }
.theme-pill-dark   { background-color: #1e1e1e; }

.font-size-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-font-control {
    background-color: rgba(0,0,0,0.05);
    border: 1px solid var(--reader-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    color: inherit;
}

/* 正文段落排版 (SEO/GEO 关键 Article Body) */
.novel-content-body {
    font-family: var(--font-family-reader);
    font-size: 19px;
    line-height: 2.1;
    letter-spacing: 0.5px;
    text-align: justify;
    word-break: break-word;
}

.novel-content-body p {
    text-indent: 2em;
    margin-bottom: 1.25em;
}

/* 翻页导航栏 (Next / Prev Page Navigation) */
.reader-pager-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--reader-border);
}

.reader-pager-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: var(--color-bg-card);
    border: 1px solid var(--reader-border);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.reader-pager-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.reader-pager-btn.btn-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ==========================================================================
   8. 页脚与悬浮工具箱 (Footer & Float Toolbar)
   ========================================================================== */
footer {
    margin-top: auto;
    background-color: #ffffff;
    border-top: 1px solid var(--color-border);
    padding: 32px 0 24px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.footer-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav a {
    color: var(--color-text-regular);
}

.footer-nav a:hover {
    color: var(--color-primary);
}

.footer-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-bg-subtle);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--color-text-muted);
}

/* 悬浮回顶控制球 */
.float-toolbox {
    position: fixed;
    right: 24px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99;
}

.float-btn {
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-regular);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.float-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}



@media (max-width: 1024px) {
    .home-layout {
        grid-template-columns: 1fr;
    }
    .category-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .chapter-grid-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 移动端专属常驻底栏：电脑端大屏严格隐藏 */
.mobile-bottom-bar {
    display: none !important;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 56px !important; /* 预留底部沉浸导航栏高度 */
    }

    .container {
        padding: 0 8px !important;
    }

    /* 顶部导航极致紧凑化 (高度压缩至46px，杜绝占屏) */
    .head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 46px !important;
        padding: 0 8px !important;
        gap: 8px !important;
    }

    #logo {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #logo span {
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -0.3px !important;
    }

    #logo p {
        display: none !important; /* 手机端强制隐藏网址域名小字 */
    }

    /* 手机端彻底隐藏顶部重复的5个链接图标，全部由底部常驻底栏接管 */
    .header_right {
        display: none !important;
    }

    .search-form-wrap {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .search-box {
        height: 32px !important;
        padding: 2px 4px 2px 10px !important;
        background-color: var(--color-bg-subtle) !important;
        border-radius: var(--radius-full) !important;
        border: 1px solid var(--color-border) !important;
    }

    .search-input {
        font-size: 12px !important;
    }

    .search-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
        height: 26px !important;
        border-radius: var(--radius-full) !important;
    }

    /* 分类横滑导航条 (单行丝滑滑动，杜绝折行与横向滚动条) */
    .navigation {
        height: 38px !important;
        border-bottom: 1px solid var(--color-border-light) !important;
        background: var(--color-bg-card) !important;
    }

    .navigation nav {
        height: 38px !important;
        padding: 0 4px !important;
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .navigation nav::-webkit-scrollbar {
        display: none !important;
    }

    .navigation nav a {
        padding: 0 10px !important;
        font-size: 13px !important;
        line-height: 38px !important;
        flex-shrink: 0 !important;
    }

    #user_panel {
        display: none !important; /* 手机端隐藏导航条右侧挤压登录文字 */
    }

    /* 首页精选小说与榜单自适应布局 */
    .home-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .section-header {
        margin-bottom: 8px !important;
    }

    .section-title {
        font-size: 15px !important;
    }

    .section-more {
        font-size: 12px !important;
    }

    .commend-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* 核心痛点解决：小说卡片极致紧凑 (一屏浏览4~5部好书) */
    .novel-card {
        padding: 8px 10px !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid var(--color-border-light) !important;
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .novel-card:hover {
        transform: none !important;
    }

    .novel-cover-wrap {
        width: 66px !important;
        height: 88px !important;
        margin-right: 0 !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    .novel-meta-content {
        flex: 1 !important;
        min-width: 0 !important;
        height: 88px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .novel-meta-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .novel-meta-desc {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: var(--color-text-muted) !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 2px !important;
    }

    .novel-meta-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: auto !important;
        padding-top: 0 !important;
        border: none !important;
        font-size: 11px !important;
    }

    .novel-meta-author {
        font-size: 11px !important;
        color: var(--color-text-light) !important;
        max-width: 110px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .badge {
        font-size: 10px !important;
        padding: 1px 5px !important;
        border-radius: 3px !important;
    }

    /* 排行榜单自适应 */
    .rank-sidebar {
        margin-top: 4px !important;
    }

    .rank-card {
        padding: 10px 12px !important;
        border-radius: var(--radius-sm) !important;
    }

    .rank-item {
        padding: 6px 2px !important;
        font-size: 13px !important;
    }

    .category-flow-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .breadcrumb-nav {
        margin-top: 6px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* 详情页在 H5 上的图文并列黄金排版 */
    .book-detail-card {
        padding: 12px 10px !important;
        margin-top: 6px !important;
        border-radius: var(--radius-sm) !important;
    }

    .book-detail-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 10px !important;
    }

    .book-detail-cover {
        width: 80px !important;
        height: 108px !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .book-detail-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .book-detail-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .book-factsheet {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 6px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        background: var(--color-bg-subtle) !important;
        border-radius: 4px !important;
    }

    .book-detail-intro {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    .book-actions-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .btn-read-now {
        flex: 1.5 !important;
        min-width: 110px !important;
        height: 38px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    .btn-secondary {
        flex: 1 !important;
        min-width: 80px !important;
        height: 38px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        justify-content: center !important;
    }

    .chapter-box-card {
        padding: 10px !important;
        margin-top: 8px !important;
        border-radius: var(--radius-sm) !important;
    }

    .chapter-grid-list {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .chapter-grid-list li {
        padding: 0 4px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--color-border-light) !important;
    }

    /* 阅读器在 H5 上的全屏沉浸护眼排版 */
    .reader-container {
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .reader-paper {
        padding: 16px 12px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    .reader-chapter-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }

    .reader-meta-bar {
        font-size: 11px !important;
        gap: 8px !important;
    }

    .reader-controls-bar {
        padding: 6px 8px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .theme-switch-group, .font-size-group {
        justify-content: space-between !important;
    }

    .novel-content-body {
        font-size: 17px !important;
        line-height: 1.85 !important;
        letter-spacing: 0 !important;
    }

    .novel-content-body p {
        margin-bottom: 0.85em !important;
        text-indent: 2em !important;
    }

    .reader-pager-nav {
        gap: 6px !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
    }

    .reader-pager-btn {
        height: 40px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }

    /* 移动端专属常驻毛玻璃快捷底栏 */
    .mobile-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid var(--color-border) !important;
        z-index: 999 !important;
        align-items: center !important;
        justify-content: space-around !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-bottom-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-text-muted) !important;
        font-size: 10px !important;
        flex: 1 !important;
        height: 100% !important;
        text-decoration: none !important;
        transition: var(--transition-fast) !important;
    }

    .mobile-bottom-item i {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    .mobile-bottom-item.active,
    .mobile-bottom-item:active,
    .mobile-bottom-item:hover {
        color: var(--color-primary) !important;
    }

    /* 手机端悬浮回顶按钮位置避让底栏 */
    .float-toolbox {
        bottom: 62px !important;
        right: 10px !important;
    }

    .float-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   10. 专属长尾词与标签微交互 (SEO & Tag Micro-interactions)
   ========================================================================== */
.longtail-keyword-pill {
    transition: var(--transition-fast) !important;
}
.longtail-keyword-pill:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-color: rgba(237, 66, 89, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(237, 66, 89, 0.12);
}
.tag-pill {
    transition: var(--transition-fast) !important;
}
.tag-pill:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(237, 66, 89, 0.18);
}
/* ============================================================
   站群链轮互链（farmlink.php 输出，未开启站群时无对应 DOM）
   ============================================================ */
.ss-farm-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 10px 0 4px;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.6;
}
.ss-farm-links-title {
    color: var(--color-text-light, #94a3b8);
    font-weight: 600;
    margin-right: 2px;
}
.ss-farm-links a {
    color: var(--color-text-light, #64748b);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.ss-farm-links a:hover {
    color: var(--color-primary, #2563eb);
    border-bottom-color: var(--color-primary, #2563eb);
}

@media (max-width: 768px) {
    .ss-farm-links {
        gap: 6px 10px;
        font-size: 12px;
    }
}

/* ============================================================
   书级站群链轮（farmbook.php 详情页 / farmhits.php 首页输出）
   两套内置模板共用同一个关键词墙类名，外层容器类名按主题分支，
   新增自定义主题时只需补外层容器样式即可复用本区块。
   注意: 不要改用 longtail-keyword-pill —— 该类的基础样式是内联在
   模板里的，脱离模板上下文引用会渲染成没有底色的裸链接。
   ============================================================ */
.ss-farm-booklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.ss-farm-booklinks a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--color-bg-subtle, #f1f5f9);
    color: var(--color-text-main, #334155);
    border: 1px solid var(--color-border-light, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.2s ease;
}
.ss-farm-booklinks a:hover {
    background: var(--color-primary-light, #fff0f2);
    color: var(--color-primary, #ed4259);
    border-color: rgba(237, 66, 89, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(237, 66, 89, 0.12);
}

@media (max-width: 768px) {
    .ss-farm-booklinks {
        gap: 6px 8px;
    }
    .ss-farm-booklinks a {
        padding: 5px 11px;
        font-size: 12px;
    }
}

/* 详情页最新章节试读与内嵌跨站链轮 (完美对标 800小说网实战标杆) */
.info-preview-text p {
    text-indent: 2em;
    margin-bottom: 10px;
}
.ss-farm-booklinks-inline {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border-light, #eee);
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-regular, #555);
    word-break: break-all;
}
.ss-farm-inline-label {
    font-weight: 700;
    color: var(--color-text-main, #333);
    margin-right: 4px;
}
.ss-farm-booklinks-inline a {
    color: var(--color-text-regular, #444);
    text-decoration: none;
    margin-right: 10px;
    display: inline-block;
    transition: color 0.2s ease;
}
.ss-farm-booklinks-inline a:hover {
    color: var(--color-primary, #ed4259);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .ss-farm-booklinks-inline {
        font-size: 12px;
        line-height: 1.7;
    }
}