:root {
    --bg-black: #000000;
    --primary-pink: #ff3399;
    --text-white: #ffffff;
    --text-gray: #999999;
    --container-max: 1200px; /* PC端最大显示宽度 */
}
.back-link {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    margin-bottom: 40px;
    padding: 20px;
}
body {
    background-color: #000;
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* 顶部导航：全屏背景，内容限宽 */
.header-wrapper {
    width: 100%;
    background-color: var(--primary-pink);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}
.logo-box { display: flex; align-items: center; text-decoration: none; color: white; }
.logo-box b { font-size: 24px; }
.user-avatar { width: 35px; height: 35px; background: white; border-radius: 50%; }

/* 主体内容容器 */
.content-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 20px 0;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 15px;
}
.section-title h2 { font-size: 22px; margin: 0; }
.view-all-link { color: var(--text-gray); text-decoration: none; font-size: 14px; }

/* --- 头部横向滑动列表 --- */
.horizontal-scroll {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 18px;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
}
/* 隐藏滚动条 */
.horizontal-scroll::-webkit-scrollbar { display: none; }
.horizontal-scroll { scrollbar-width: none; }

.book-item-link {
    flex: 0 0 130px; /* PC端推荐宽度 */
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}
.book-item-link:hover { transform: translateY(-8px); }

.book-cover {
    width: 100%;
    aspect-ratio: 3/4;
    background: #222;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}
.book-title {
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- 推荐垂直列表 --- */
.picks-wrapper { padding: 0 20px; }
.pick-card-link {
    display: flex;
    gap: 20px;
    background: #111;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s;
}
.pick-card-link:hover { background: #1a1a1a; }

.pick-img {
    width: 100px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.pick-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pick-info h3 { margin: 0 0 10px 0; font-size: 18px; color: #fff; }
.pick-desc {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pick-footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    color: var(--primary-pink);
    font-weight: bold;
    font-size: 15px;
}

/* 移动端适配：缩小卡片 */
@media (max-width: 600px) {
    .book-item-link { flex: 0 0 100px; }
    .pick-img { width: 80px; height: 110px; }
    .pick-info h3 { font-size: 15px; }
}