/* 配色方案定义 */
:root {
    --bg: #f2e9d2; --text: #3e2e1e; --accent: #8b572a;
    --card: rgba(255, 255, 255, 0.4); --border: rgba(62, 46, 30, 0.1);
    --tag-bg: rgba(139, 87, 42, 0.1); --white: #fff;
}

:root {
    --bg-color: #f2e9d2;
    --text-color: #3e2e1e;
    --accent-color: #8b572a;
    --card-bg: rgba(255, 255, 255, 0.35);
    --border-color: rgba(62, 46, 30, 0.1);
    --input-bg: #fff;
}

body.theme-white {
    --bg: #f8f9fa; --text: #333; --accent: #2d3436;
    --card: #fff; --border: #eee; --tag-bg: #f1f1f1;
}
body.theme-green {
    --bg: #dcebd0; --text: #2f4f4f; --accent: #2d8a4e;
    --card: rgba(255, 255, 255, 0.6); --border: rgba(0,0,0,0.05); --tag-bg: #e8f5e9;
}
body.theme-night {
    --bg: #1a1c23; --text: #cbd5e0; --accent: #63b3ed;
    --card: #2d3748; --border: #4a5568; --tag-bg: #4a5568;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0; font-family: -apple-system, system-ui, "Microsoft YaHei", sans-serif;
    background-color: var(--bg); color: var(--text); line-height: 1.6;


    /* 替换为你自己的图片路径 */

    /* 关键属性 */
    background-attachment: fixed; /* 背景固定，不随滚动条滚动 */
    background-size: cover;      /* 自动拉伸铺满全屏 */
    background-position: center;  /* 居中展示 */
    background-repeat: no-repeat;
}

/* 为了保证内容可读，给主容器加一个微弱的半透明遮罩 */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding:0 15px;
}

/* Header & Top Bar */
.top-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 0; position: sticky; top: 0; background: var(--bg); z-index: 100;
}
.logo { font-size: 1.5rem; font-weight: 900; text-decoration: none; color: var(--accent); }
.theme-select { border: 1px solid var(--border); padding: 5px; border-radius: 8px; background: var(--card); color: var(--text); outline: none; }
.btn-search { background: none; border: none; font-size: 20px; cursor: pointer; }

/* 导航入口 */
.main-nav { display: flex; justify-content: space-around; padding: 10px 0; margin: 0 0; background: var(--card); border-radius: 15px; border: 1px solid var(--border); }
.nav-item { text-decoration: none; color: var(--text); display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: bold; }
.nav-item i { font-style: normal; font-size: 22px; margin-bottom: 4px; }

/* 轮播图 */
.banner { margin: 20px 0; position: relative; height: 220px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.banner-slide { width: 100%; height: 100%; position: relative; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 20px 20px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #fff; }
.banner-tag { background: var(--accent); font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; display: inline-block; }
.banner-text h2 { margin: 0 0 8px 0; font-size: 1.3rem; }
.banner-text p { margin: 0; font-size: 13px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-dots { position: absolute; top: 15px; right: 20px; display: flex; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.dot.active { background: #fff; width: 20px; border-radius: 4px; }

/* 标签条 */
.tag-bar { padding: 10px 0; overflow-x: auto; }
.tag-scroll { display: flex; gap: 10px; }

.tag-scroll {
    display: flex;
    flex-wrap: wrap;      /* 关键：允许子元素换行 */
    gap: 10px;            /* 标签之间的间距（横向和纵向） */
    padding: 10px 0;      /* 给上下留出一点呼吸空间 */

    /* 如果之前为了滚动设置了这些，请删除或覆盖掉 */
    overflow-x: visible;  /* 确保不需要横向溢出隐藏 */
    white-space: normal;  /* 确保文本允许正常折行 */
}

.tag-link {
    white-space: nowrap;
    text-decoration: none;
    color: var(--text);
    padding: 5px 10px;
    background: var(--card);
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid var(--border);

    flex-shrink: 0;       /* 防止在 flex 布局中被挤压变形 */
}

.tag-link.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 布局 */
.content-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; padding: 15px 0; }

/* 封面和简介的容器：保持横向排布 */
.book-main-content {
    display: flex; /* 内部的封面和信息还是左右排 */
    gap: 15px;
    margin-bottom: 12px; /* 给下方的标签留点空隙 */
    text-decoration: none;
    color: inherit;
}

/* 书籍卡片 */
.book-card {
    display: flex;
    flex-direction: column; /* 关键：子元素上下排列 */
    background: var(--card);
    padding: 15px;
    border-radius: 18px;
    margin-bottom: 15px;
    border: 1px solid var(--border);
}
.book-card:hover { transform: translateY(-3px); }
.book-cover {
    width: 80px;
    height: 110px;
    flex-shrink: 0;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-info h3 { margin: 0 0 5px 0; font-size: 1.1rem; }

/* 确保书籍信息内的链接颜色一致 */
.book-info a {
    color: inherit;
    text-decoration: none;
    display: inline-block; /* 修复点击范围 */
}

.author { font-size: 13px; opacity: 0.6; margin: 0; }
/* 标签行：确保占满一行并自动换行 */
.badge-row {
    display: flex;
    flex-wrap: wrap; /* 标签多了自动换到下一行 */
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border); /* 可选：加一条虚线分割感更好 */
}

/* 标签样式微调 */
.badge {
    font-size: 11px;
    background: var(--tag-bg);
    color: var(--accent);

    padding: 2px 5px;
    border-radius: 100px; /* 胶囊形状 */
    border: none; /* 去掉边框可能更干净 */
}
/* 假设你的标签类名是 .badge */
.badge::before {
    content: "#";
    margin-right: 2px;
    color: var(--accent); /* 使用你主题里的强调色 */
    opacity: 0.7;         /* 稍微透明一点，不抢文字戏 */
    font-weight: bold;
}

/* 专门处理简介文字，防止溢出挤乱排版 */
.summary {
    font-size: 13px;
    line-height: 1.5;
    height: 3em; /* 固定两行高度，防止书名长短不一时卡片对不齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
}

/* 侧边栏榜单 */
.side-panel { background: var(--card); border-radius: 18px; padding: 20px; border: 1px solid var(--border); }
.side-title { margin: 0 0 20px 0; font-size: 1.1rem; }
.rank-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; cursor: pointer; }
.rank-idx { width: 22px; height: 22px; background: var(--tag-bg); display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; font-weight: bold; }
.rank-idx.top { background: var(--accent); color: #fff; }
.rank-item p { margin: 0; flex: 1; font-size: 14px; font-weight: 600; }
.rank-item small { opacity: 0.5; font-size: 11px; }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { margin: 0; font-size: 1.2rem; }
.more-link { font-size: 13px; text-decoration: none; color: var(--accent); }

@media (max-width: 768px) {
    .hot-keywords {
        display: flex !important; /* 强制显示 */
        max-width: 150px; /* 限制宽度，不挤压Logo */
        overflow-x: auto; /* 允许横向滚动 */
        white-space: nowrap;
        mask-image: linear-gradient(to right, black 80%, transparent 100%); /* 右侧淡出效果 */
        -webkit-overflow-scrolling: touch;
    }
    .hot-item { font-size: 11px; margin-right: 8px; }

    .content-layout { grid-template-columns: 1fr; }
    .side-column { margin-top: 10px; }
    .banner { height: 180px; }
}

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

/* 分类区块整体容器 */
.category-section {
    padding: 20px 0;
    margin-top: 10px;
}

/* 分类网格布局：PC端4列，手机端2列 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 单个书籍容器 */
.cat-book {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s;
}

.cat-book:hover {
    transform: translateY(-5px);
}

/* 封面图片：保持 3:4 比例，增加质感阴影 */
.cat-book img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    margin-bottom: 10px;
}

/* 书名：加粗，限制单行 */
.cat-book h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 作者：字号缩小，半透明 */
.cat-book .cat-author {
    font-size: 12px;
    opacity: 0.6;
    margin: 4px 0;
}

/* 分类书籍中的标签 */
.cat-tag {
    display: inline-block;
    align-self: flex-start; /* 靠左对齐 */
    font-size: 10px;
    color: var(--accent);
    background: var(--tag-bg);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    max-width: 100%;       /* 防止文字太长超出 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文字太长显示省略号 */
    white-space: nowrap;
}

.cat-author{
    color: var(--text);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .cat-book h5 { font-size: 13px; }
}

/* 顶部搜索热词 */
.search-hot-keys {
    font-size: 12px; margin-top: 8px; opacity: 0.7;
}
.hot-key { margin-right: 12px; cursor: pointer; color: var(--accent); }

/* 侧边栏神评模块 */
.side-comment-card {
    background: var(--card); border-radius: 12px; padding: 15px; margin-top: 20px;
}
.comment-item { border-bottom: 1px solid var(--border); padding: 8px 0; }
.comment-content { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 搜索区域容器 */
.search-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 热词容器 */
.hot-keywords {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* “热搜”字样 */
.hot-label {
    font-size: 12px;
    opacity: 0.5;
    color: var(--text);
}

/* 单个热词样式 */
.hot-item {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    padding: 2px 4px;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.hot-item:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* 搜索行总容器 */
.search-bar-row {
    padding: 10px 0;
    background: transparent;
}

/* 输入框包装器 */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 25px; /* 圆角输入框更现代 */
    padding: 5px 5px 5px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

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

/* 搜索图标按钮 */
.search-icon-btn {
    background: var(--accent); /* 使用主题色作为按钮背景 */
    color: #fff;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s;
}

.search-icon-btn:active {
    transform: scale(0.9);
}

/* 热搜词条：紧贴输入框下方 */
.search-hot-line {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding: 0 5px;
}

.search-hot-line .hot-label {
    font-size: 11px;
    opacity: 0.5;
    margin-right: 8px;
    white-space: nowrap;
}

.hot-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none; /* 隐藏火狐滚动条 */
}

.hot-list::-webkit-scrollbar { display: none; } /* 隐藏 Chrome 滚动条 */

.hot-list a {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
}

/* 移动端适配补丁 */
@media (max-width: 768px) {
    /* 之前的 top-bar 里的 search-container 记得删掉或隐藏 */
    .top-bar .header-right .search-container { display: none; }

    .search-bar-row {
        margin-top: 0;
    }
}









/* --- 首页阅读历史小贴片样式 --- */
.history-bar {
    margin: 15px 0 10px 0;
}

.history-empty {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.4;
    padding: 7px 5px;
    font-style: italic;
}

.history-bar-header {
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center;
    margin-bottom: 10px;
}

.section-header-hot {
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center;
    margin-bottom: 10px;
}

.history-more {
    font-size: 12px;
    text-decoration: none;
    color: var(--accent-color);
    opacity: 0.7;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.history-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 2px 0 10px 0;
    /* 隐藏移动端滚动条但保持滑动 */
    -webkit-overflow-scrolling: touch;
}

/* 悬停或点击效果 */
.history-more:active {
    opacity: 1;
    background: var(--accent-color);
    color: #fff;
}

/* 适配移动端：如果标题太挤，可以微调 */
@media screen and (max-width: 480px) {
    .header-left-title { font-size: 12px; }
    .history-more { font-size: 11px; }
}

/* 隐藏所有浏览器的滚动条 */
.history-scroll::-webkit-scrollbar { display: none; }
.history-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.history-tag {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    font-size: 12px;
    color: var(--text-color);
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

/* 激活状态效果 */
.history-tag:active {
    transform: scale(0.95);
    background: var(--accent-color);
    color: #fff;
}

.history-tag span {
    opacity: 0.5;
    margin-left: 6px;
    font-size: 10px;
    background: rgba(0,0,0,0.05);
    padding: 1px 5px;
    border-radius: 4px;
}

/* 夜间模式微调：让标签里的进度文字稍微亮一点 */
body.theme-night .history-tag span {
    background: rgba(255,255,255,0.1);
}

/* --- 首页书架栏增量样式 --- */
.shelf-bar {
    margin-top: 5px; /* 紧贴历史记录下方 */
}

.shelf-tag {
    /* 默认使用主题强调色作为微弱边框，区分于普通历史 */
    border-color: var(--accent-color);
    opacity: 0.9;
}

/* 针对不同主题的书架标签背景微调 */
.history-tag.shelf-tag span {
    background: var(--accent-color);
    color: #fff;
    opacity: 0.8;
}

/* 适配夜间模式 */
body.theme-night .shelf-tag {
    background: rgba(212, 167, 106, 0.05); /* 淡淡的金棕色背景 */
}

/* 适配护眼模式 */
body.theme-green .shelf-tag {
    background: rgba(74, 124, 74, 0.05);
}

/* 鼠标悬停/点击书架标签效果 */
.history-tag.shelf-tag:active {
    background: var(--accent-color);
    color: #fff;
}