/* PC 首页 2026-10 改版测试版（方案 B）。颜色同作品详情页 detail.css */
/* 内容宽度随屏幕变：常见屏 1200，宽屏（≥1600）1400，窄屏（<1280）铺满留边，最窄按 1000 算 */
:root { --hv-w: 1200px; --hv-hero-h: 356px; }
@media (min-width: 1600px) { :root { --hv-w: 1400px; --hv-hero-h: 416px; } }
@media (max-width: 1279px) { :root { --hv-w: calc(100vw - 80px); --hv-hero-h: 320px; } }
@media (max-width: 1047px) { :root { --hv-w: 952px; } }
/* 旧 layout 里写死的 min-width: 1280px，这几页放开 */
body { min-width: 1000px !important; }
#app, #app2, #app2 + div { min-width: 0 !important; }
/* 搜索引擎和读屏用的标题，不占位置 */
.hv-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hv-page {
    --hv-ink: #1F1D3A;
    --hv-sub: #6B6880;
    --hv-mute: #75728C;
    --hv-brand: #7E7CFB;
    --hv-brand-hover: #6C69F2;
    --hv-brand-ink: #5B57E8;
    --hv-brand-soft: #EEEDFD;
    --hv-line: #ECEAF5;
    width: 100%;
    min-width: 1000px;
    background: #F5F4FA;
    color: var(--hv-ink);
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    text-align: left;
    padding-bottom: 48px;
}
.hv-page *, .hv-page *::before, .hv-page *::after { box-sizing: border-box; }
.hv-page a { color: inherit; text-decoration: none; }
.hv-page button { font-family: inherit; cursor: pointer; }
.hv-serif { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif; }
.hv-card { background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 16px; }
.hv-grow { flex: 1; }
.hv-meta { font-size: 12px; color: var(--hv-mute); }

/* ===== 首屏通栏 ===== */
.hv-hero { position: relative; overflow: hidden; padding: 32px 0 96px; background: #2A2550; }
.hv-hero-bgs { position: absolute; left: -80px; top: -80px; right: -80px; bottom: -80px; }
.hv-hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.3); opacity: 0; transition: opacity .8s ease; }
.hv-hero-bg.is-on { opacity: .9; }
.hv-hero-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 24, 56, 0.55) 0%, rgba(40, 34, 80, 0.45) 60%, #F5F4FA 100%); }
.hv-hero-in { position: relative; width: var(--hv-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }

.hv-slider { position: relative; height: var(--hv-hero-h); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px rgba(10, 8, 30, 0.35); background: #1E1A3C; }
.hv-slider .swiper-container { width: 100%; height: 100%; }
.hv-slide { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.hv-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv-slide-mask { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(14, 12, 32, 0) 0%, rgba(14, 12, 32, 0.72) 100%); }
.hv-slide-info { position: absolute; left: 28px; right: 200px; bottom: 34px; display: flex; flex-direction: column; gap: 6px; color: #FFFFFF; }
.hv-slide-info b { font-size: 30px; font-weight: 900; letter-spacing: 1px; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-slide-info span { font-size: 14px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-slide-btn { position: absolute; right: 28px; bottom: 36px; height: 40px; padding: 0 22px; border-radius: 20px; background: var(--hv-brand); color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 40px; box-shadow: 0 8px 18px rgba(126, 124, 251, 0.35); transition: background .15s; }
.hv-slide:hover .hv-slide-btn { background: var(--hv-brand-hover); }

.hv-arrow { position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.88); color: var(--hv-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20, 18, 40, 0.22); opacity: 0; transition: opacity .2s, background .15s; }
.hv-arrow-prev { left: 16px; }
.hv-arrow-next { right: 16px; }
.hv-slider:hover .hv-arrow { opacity: 1; }
.hv-arrow:hover { background: #FFFFFF; color: var(--hv-brand-ink); }
.hv-arrow.swiper-button-disabled { opacity: 0 !important; }

/* 分段进度条：当前段在 --hv-delay 内走满 */
.hv-progress { position: absolute; left: 28px; right: 28px; bottom: 12px; z-index: 5; display: flex; gap: 6px; }
.hv-progress button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: transparent; }
.hv-progress button i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; position: relative; }
.hv-progress button i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #FFFFFF; }
.hv-progress button.is-done i::after { width: 100%; }
.hv-progress button.is-on i::after { animation: hv-fill var(--hv-delay, 5000ms) linear forwards; }
.hv-progress.is-paused button.is-on i::after { animation-play-state: paused; }
@keyframes hv-fill { from { width: 0; } to { width: 100%; } }

/* 右侧轮播目录 */
.hv-list { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); height: var(--hv-hero-h); color: #FFFFFF; }
.hv-list-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 6px; }
.hv-list-head b { font-size: 16px; }
.hv-list-head span { font-size: 12px; opacity: .75; }
.hv-list-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; }
.hv-list-items::-webkit-scrollbar { display: none; }
.hv-page a.hv-thumb { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: #FFFFFF; transition: background .15s; }
.hv-page a.hv-thumb:hover { background: rgba(255, 255, 255, 0.12); }
.hv-page a.hv-thumb.is-on { background: rgba(255, 255, 255, 0.22); }
.hv-thumb img { flex: none; width: 92px; height: 50px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, 0.15); }
.hv-thumb.is-on img { box-shadow: 0 0 0 2px #FFFFFF; }
.hv-thumb span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hv-thumb b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-thumb em { font-style: normal; font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 首屏下沿浮起的一条 ===== */
.hv-float { position: relative; z-index: 2; width: var(--hv-w); margin: -64px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px 250px; gap: 16px; }
.hv-float > .hv-card { box-shadow: 0 14px 34px rgba(31, 29, 58, 0.1); }
.hv-mini-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 6px; }
.hv-mini-head b { font-size: 16px; }
.hv-page .hv-mini-head a { font-size: 12px; color: var(--hv-brand-ink); }
.hv-cats { padding: 14px 16px; }
.hv-cats-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.hv-page .hv-cats-grid a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0 6px; border-radius: 12px; font-size: 13px; color: #3A3850; transition: background .15s; }
.hv-page .hv-cats-grid a:hover { background: #F6F5FD; color: var(--hv-brand-ink); }
.hv-cats-grid i { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: 0 6px 14px rgba(110, 100, 230, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform .2s; }
.hv-cats-grid a:hover i { transform: translateY(-3px) rotate(-4deg); }
.hv-c1 i { background: linear-gradient(140deg, #F9C4DC 0%, #E58AB6 100%); }
.hv-c2 i { background: linear-gradient(140deg, #B4CCFF 0%, #7C9DF2 100%); }
.hv-c3 i { background: linear-gradient(140deg, #CDBDFF 0%, #9A82F0 100%); }
.hv-c4 i { background: linear-gradient(140deg, #A9D6EE 0%, #6AA6D6 100%); }
.hv-c5 i { background: linear-gradient(140deg, #BFC3FF 0%, #8389F0 100%); }
.hv-c6 i { background: linear-gradient(140deg, #FBCFD8 0%, #EC97AE 100%); }
.hv-c7 i { background: linear-gradient(140deg, #E6BEF2 0%, #BB84DA 100%); }
.hv-c8 i { background: linear-gradient(140deg, #A9A7FF 0%, #6E6BF0 100%); }
.hv-float > .hv-notice { padding: 14px 18px; background: linear-gradient(150deg, #F3F1FF 0%, #FFFFFF 62%); border-color: #E4E1FA; }
.hv-notice .hv-mini-head b { display: inline-flex; align-items: center; gap: 6px; color: var(--hv-brand-ink); }
.hv-notice-ico { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #A9A7FF 0%, #6E6BF0 100%); color: #FFFFFF; box-shadow: 0 4px 10px rgba(110, 100, 230, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.hv-notice ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-notice li { position: relative; padding-left: 12px; }
.hv-notice li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #C9C6F4; }
.hv-notice li:first-child::before { background: var(--hv-brand); }
.hv-notice li a, .hv-notice li span { display: block; font-size: 13px; line-height: 21px; color: #3A3850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-page .hv-notice li a:hover { color: var(--hv-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.hv-notice li span { cursor: default; color: #5A576E; }
.hv-acts { display: flex; flex-direction: column; gap: 10px; }
.hv-page a.hv-act { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 84px; border-radius: 14px; background-size: cover; background-position: left center; background-repeat: no-repeat; box-shadow: 0 14px 34px rgba(31, 29, 58, 0.08); transition: transform .15s; }
.hv-page a.hv-act:hover { transform: translateY(-2px); }
.hv-act span { display: flex; flex-direction: column; gap: 2px; }
.hv-act b { font-size: 15px; }
.hv-act em { font-style: normal; font-size: 12px; }
.hv-act i { font-style: normal; font-size: 16px; }
.hv-act-1 { background-color: #FFF3EA; border: 1px solid #F8E3D0; color: #8A4A0A; }
.hv-act-1 em { color: #9A6A3A; }
.hv-act-2 { background-color: #F1ECFC; border: 1px solid #E2DFFA; color: #4B47D6; }
.hv-act-2 em { color: var(--hv-sub); }

/* ===== 主体 ===== */
.hv-main { width: var(--hv-w); margin: 24px auto 0; display: flex; flex-direction: column; gap: 20px; }
.hv-sec { padding: 22px 24px 24px; }
.hv-head { display: flex; align-items: center; gap: 12px; }
.hv-h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--hv-ink); }
.hv-head-sm .hv-h2 { font-size: 18px; }
.hv-sub { font-size: 13px; color: var(--hv-sub); }
.hv-page a.hv-more { font-size: 13px; color: var(--hv-brand-ink); }
.hv-page a.hv-more:hover { color: #4B47D6; }
.hv-page a.hv-more-c { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--hv-brand-ink); }
.hv-empty { padding: 40px 0; text-align: center; font-size: 14px; color: var(--hv-mute); }

.hv-cover-box { position: relative; display: block; }
.hv-cover { display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 6px; object-fit: cover; background: #E9E7F8; box-shadow: 0 8px 18px rgba(31, 29, 58, 0.16); }
.hv-cover.hv-framed { border: 2px solid transparent; }
.hv-mark { position: absolute; right: -8px; top: -8px; width: 40px; height: 40px; }
/* 完结折扣：封面左上角 */
.hv-off { position: absolute; left: 0; top: 0; z-index: 1; height: 20px; padding: 0 7px; border-radius: 6px 0 10px 0; background: linear-gradient(90deg, #FF7A2F 0%, #FFB13B 100%); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 20px; box-shadow: 0 2px 6px rgba(255, 122, 47, 0.35); }
.hv-mini-intro { font-size: 12px; line-height: 1.6; color: #5A576E; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* 本期主打：小书卡，按本数自动排（5 本一行排 5 个） */
.hv-grid4 { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.hv-page a.hv-mini-book { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: #FAFAFE; transition: background .15s, box-shadow .15s; }
.hv-page a.hv-mini-book:hover { background: #FFFFFF; box-shadow: 0 10px 24px rgba(31, 29, 58, 0.08); }
.hv-mini-book .hv-cover-box { flex: none; width: 76px; }
.hv-mini-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hv-mini-info b { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hv-mini-book:hover b { color: var(--hv-brand-ink); }
/* 按本数排（模板给 hv-pick-n{本数}）：宽屏下 auto-fit 会排成 6 个一行，7 本时剩 1 本落单，这里按本数固定列数 */
.hv-grid4.hv-pick-n5 { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.hv-grid4.hv-pick-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hv-grid4.hv-pick-n7 { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.hv-grid4.hv-pick-n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 5 / 7 本时的第一本：两行高的大卡 */
.hv-page a.hv-mini-book.hv-pick-lead { grid-row: span 2; gap: 18px; padding: 18px; background: var(--hv-brand-soft); }
.hv-page a.hv-mini-book.hv-pick-lead:hover { background: #E6E5FD; box-shadow: none; }
.hv-pick-lead .hv-cover-box { width: 132px; align-self: flex-start; }
.hv-pick-lead .hv-mini-info { gap: 8px; padding-top: 2px; }
.hv-pick-lead .hv-mini-info b { font-size: 19px; line-height: 1.35; }
.hv-pick-lead .hv-mini-intro { font-size: 13px; line-height: 1.75; -webkit-line-clamp: 5; }
.hv-pick-go { margin-top: auto; align-self: flex-start; height: 32px; padding: 0 16px; border-radius: 16px; background: var(--hv-brand); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 32px; box-shadow: 0 6px 14px rgba(126, 124, 251, 0.3); transition: background .15s; }
.hv-pick-lead:hover .hv-pick-go { background: var(--hv-brand-hover); }

/* 封面推荐位：主推大卡 + 封面翻页 */
.hv-row-nav { display: flex; gap: 8px; margin-left: 6px; }
.hv-arrow-sm { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid #DCDAEA; background: #FFFFFF; color: #4A475C; display: flex; align-items: center; justify-content: center; }
.hv-arrow-sm:hover:not([disabled]) { border-color: #B9B5EC; color: var(--hv-brand-ink); }
.hv-arrow-sm[disabled] { opacity: .4; cursor: default; }
.hv-row-single .hv-row-nav { display: none; }
.hv-row-body { margin-top: 16px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; }
.hv-feats { position: relative; }
.hv-page a.hv-feat { display: none; height: 100%; gap: 18px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #F1F0FE 0%, #FBF6FF 100%); }
.hv-page a.hv-feat.is-on { display: flex; animation: hv-in .25s ease-out; }
@keyframes hv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hv-feat .hv-cover-box { flex: none; width: 132px; }
.hv-feat-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hv-feat-info b { font-size: 19px; line-height: 1.35; }
.hv-feat:hover .hv-feat-info b { color: var(--hv-brand-ink); }
.hv-feat-intro { font-size: 13px; line-height: 1.7; color: #5A576E; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.hv-sale { align-self: flex-start; font-size: 12px; font-weight: 700; color: #D2551C; background: #FFEDE3; border-radius: 4px; padding: 1px 7px; }
.hv-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.hv-tags i { font-style: normal; font-size: 12px; line-height: 18px; border-radius: 12px; padding: 1px 9px; color: #4A475C; border: 1px solid #DCDAEA; }
.hv-tags i:first-child { background: var(--hv-brand-soft); border-color: var(--hv-brand-soft); color: var(--hv-brand-ink); }
.hv-track { --hv-per: 6; display: flex; gap: 14px; overflow: hidden; padding: 6px 4px 4px; margin: -6px -4px -4px; }
.hv-page a.hv-book { flex: 0 0 calc((100% - (var(--hv-per) - 1) * 14px) / var(--hv-per)); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hv-book b { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hv-book > span:last-child { font-size: 12px; color: var(--hv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-book .hv-cover { transition: transform .2s, box-shadow .2s; }
.hv-book:hover .hv-cover { transform: translateY(-3px); }
.hv-book.is-on .hv-cover { box-shadow: 0 0 0 2px var(--hv-brand), 0 8px 18px rgba(31, 29, 58, 0.16); }
.hv-book.is-on b { color: var(--hv-brand-ink); }
.hv-dots { margin-top: 16px; display: flex; justify-content: center; gap: 6px; }
.hv-dots:empty { display: none; }
.hv-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #DCDAEA; transition: width .2s, background .2s; }
.hv-dots button.is-on { width: 20px; background: var(--hv-brand); }

/* 横幅广告位 */
.hv-ads { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.hv-ads a { display: block; border-radius: 14px; overflow: hidden; cursor: pointer; }
.hv-ads img { display: block; width: 100%; aspect-ratio: 780 / 240; object-fit: cover; transition: transform .3s; }
.hv-ads a:hover img { transform: scale(1.03); }

/* 单本特推 */
.hv-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv-page a.hv-trio-item { position: relative; overflow: hidden; display: flex; gap: 16px; padding: 18px; transition: box-shadow .15s; }
.hv-page a.hv-trio-item:hover { box-shadow: 0 12px 28px rgba(31, 29, 58, 0.08); }
.hv-trio-item::before { content: ""; position: absolute; inset: 0; }
.hv-page .hv-trio-item { border-color: transparent; }
.hv-tint-1::before { background: linear-gradient(160deg, #F7DCC0 0%, #FBEBDB 55%, #FDF5EC 100%); }
.hv-tint-2::before { background: linear-gradient(160deg, #D9D6FB 0%, #E9E7FD 55%, #F4F3FE 100%); }
.hv-tint-0::before { background: linear-gradient(160deg, #F3D1EA 0%, #F8E3F2 55%, #FCF1F8 100%); }
.hv-trio-item .hv-cover-box { position: relative; flex: none; width: 86px; }
.hv-trio-info { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-trio-info b { font-size: 17px; line-height: 1.35; }
.hv-trio-item:hover .hv-trio-info b { color: var(--hv-brand-ink); }
.hv-trio-intro { font-size: 13px; line-height: 1.7; color: #4F4C63; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* 排名数字 */
.hv-rank { flex: none; width: 20px; height: 20px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #F2F1F9; color: var(--hv-mute); }
.hv-rank.top { background: var(--hv-brand); color: #FFFFFF; }

/* 四列书单 */
.hv-cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hv-list-card { padding: 18px 18px 14px; }
.hv-page a.hv-list-top { margin-top: 14px; display: flex; gap: 12px; }
.hv-list-top .hv-cover-box { flex: none; width: 64px; }
.hv-list-top > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hv-list-top b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-list-top:hover b { color: var(--hv-brand-ink); }
.hv-list-ol { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--hv-line); display: flex; flex-direction: column; gap: 10px; }
.hv-page .hv-list-ol a { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hv-list-ol span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-list-ol em { flex: none; max-width: 76px; font-style: normal; font-size: 12px; color: var(--hv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-list-ol a:hover span { color: var(--hv-brand-ink); }

/* 三列分区 */
.hv-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv-pick { padding: 18px 18px 16px; }
.hv-pick-body { margin-top: 14px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
.hv-page a.hv-pick-feat { display: none; flex-direction: column; gap: 6px; }
.hv-page a.hv-pick-feat.is-on { display: flex; animation: hv-in .25s ease-out; }
.hv-pick-feat b { font-size: 14px; line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hv-pick-feat .hv-mini-intro { -webkit-line-clamp: 3; }
.hv-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hv-page .hv-pick-list a { display: block; padding: 5px 8px; border-radius: 8px; font-size: 13px; color: #3A3850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s; }
.hv-page .hv-pick-list a.is-on { background: var(--hv-brand-soft); color: var(--hv-brand-ink); font-weight: 700; }

/* 底部：榜单 + 最近更新 */
.hv-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hv-tabs { display: flex; background: #F2F1F9; border-radius: 10px; padding: 3px; }
.hv-tabs button { border: 0; background: transparent; color: #4A475C; border-radius: 8px; padding: 5px 14px; font-size: 13px; }
.hv-tabs button.on { background: #FFFFFF; color: var(--hv-brand-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(31, 29, 58, 0.12); }
.hv-page a.hv-rank-top { margin-top: 16px; display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #F1F0FE 0%, #FBF6FF 100%); }
.hv-rank-top .hv-cover-box { flex: none; width: 68px; }
.hv-rank-top .hv-rank { position: absolute; left: -6px; top: -6px; }
.hv-rank-top-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hv-rank-top-info b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-rank-top:hover b { color: var(--hv-brand-ink); }
.hv-rank-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 11px 20px; }
.hv-page .hv-rank-list a { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hv-rank-list span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-rank-list a:hover span { color: var(--hv-brand-ink); }
.hv-recent-list { list-style: none; margin: 16px 0 0; padding: 0; }
.hv-page .hv-recent-list a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px 44px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #F2F1F8; font-size: 14px; }
.hv-recent-list li:last-child a { border-bottom: 0; }
.hv-recent-list b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-recent-list span { font-size: 13px; color: var(--hv-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-recent-list em { justify-self: center; font-style: normal; font-size: 11px; font-weight: 700; color: #9A6514; background: #FDF0DA; border-radius: 4px; padding: 1px 5px; }
.hv-recent-list em.hv-free { color: #2470A6; background: #E4F1FA; }
.hv-recent-list time { font-size: 12px; color: var(--hv-mute); text-align: right; }
.hv-recent-list a:hover b { color: var(--hv-brand-ink); }

/* 封面轮转（样式 6）：左侧书籍介绍 + 右侧封面扇形排开，当前那本居中放大 */
.hv-flow { position: relative; overflow: hidden; display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 340px; }
.hv-flow-bgs { position: absolute; inset: 0; pointer-events: none; }
.hv-flow-bg { position: absolute; right: -40px; top: -40px; width: 70%; height: calc(100% + 80px); object-fit: cover; filter: blur(46px) saturate(1.2); opacity: 0; transition: opacity .6s; }
.hv-flow-bg.is-on { opacity: .35; }
.hv-flow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FFFFFF 30%, rgba(255, 255, 255, 0.55) 70%, rgba(255, 255, 255, 0.2) 100%); pointer-events: none; }
.hv-flow-side { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 22px 0 20px 24px; }
.hv-flow-infos { flex: 1; position: relative; margin-top: 18px; }
.hv-flow-info { display: none; flex-direction: column; gap: 8px; }
.hv-flow-info.is-on { display: flex; animation: hv-in .3s ease-out; }
.hv-flow-info b { font-size: 22px; line-height: 1.35; }
.hv-flow-info p { margin: 2px 0 0; font-size: 13px; line-height: 1.75; color: #5A576E; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hv-flow-info .hv-tags { margin-top: 2px; }
.hv-page a.hv-flow-btn { align-self: flex-start; margin-top: 8px; height: 38px; padding: 0 22px; border-radius: 19px; background: var(--hv-brand); color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 38px; box-shadow: 0 8px 18px rgba(126, 124, 251, 0.3); }
.hv-page a.hv-flow-btn:hover { background: var(--hv-brand-hover); color: #FFFFFF; }
.hv-flow-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.hv-flow-nav .hv-dots { margin: 0; }
.hv-flow-stage { position: relative; z-index: 1; min-height: 340px; }
.hv-flow-item { position: absolute; left: 50%; top: 50%; width: 156px; margin: -109px 0 0 -78px; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s, filter .5s; cursor: pointer; }
.hv-flow-item .hv-cover { box-shadow: 0 14px 30px rgba(31, 29, 58, 0.28); }
.hv-flow-item.p0 { transform: translateX(0) scale(1); z-index: 5; }
.hv-flow-item.pl1 { transform: translateX(-150px) scale(.82); z-index: 4; filter: brightness(.92); }
.hv-flow-item.pr1 { transform: translateX(150px) scale(.82); z-index: 4; filter: brightness(.92); }
.hv-flow-item.pl2 { transform: translateX(-262px) scale(.66); z-index: 3; opacity: .75; filter: brightness(.86); }
.hv-flow-item.pr2 { transform: translateX(262px) scale(.66); z-index: 3; opacity: .75; filter: brightness(.86); }
.hv-flow-item.ph { transform: scale(.5); opacity: 0; z-index: 1; pointer-events: none; }
.hv-flow-item.p0:hover .hv-cover { box-shadow: 0 0 0 3px var(--hv-brand), 0 16px 34px rgba(31, 29, 58, 0.3); }

/* 样式 5：4 本一行（完结页等用到） */
.hv-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hv-quad-item { display: flex; gap: 16px; min-width: 0; padding: 16px; border-radius: 14px; background: #FAFAFE; border: 1px solid #F0EFF8; transition: background .15s, border-color .15s; }
.hv-quad-item:hover { background: #F4F3FF; border-color: #E4E1FA; }
.hv-quad-item .hv-cover-box { flex: none; width: 92px; }
.hv-quad-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-quad-info b { font-size: 16px; line-height: 1.4; color: var(--hv-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hv-quad-item:hover .hv-quad-info b { color: var(--hv-brand-ink); }
.hv-quad-intro { font-size: 12px; line-height: 1.65; color: #5A576E; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* 首屏让出胶囊的位置：胶囊下沿在横幅下方 46px */
.hv-hero { padding-top: 74px; }
.hv-h1 + .hv-float { margin-top: 70px; }

/* ===== 随屏幕宽度调整 ===== */
/* 右侧悬浮的下载 / 回顶部：贴着内容区右边；屏幕放不下就靠窗口右边 */
#meun { margin-left: calc(var(--hv-w) / 2 + 16px) !important; }
/* 右侧固定入口 */
.hv-side { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 30px; background: rgba(255, 255, 255, 0.94); border: 1px solid #E4E1FA; box-shadow: 0 12px 30px rgba(31, 29, 58, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.hv-side-btn { position: relative; width: 48px; padding: 9px 0 7px; border: 0; border-radius: 24px; background: transparent; color: #5A576E; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.hv-side-btn:hover { background: #EEEDFD; color: #5B57E8; text-decoration: none; }
.hv-side a.hv-side-btn:first-child { background: linear-gradient(140deg, #A9A7FF 0%, #6E6BF0 100%); color: #FFFFFF; box-shadow: 0 6px 14px rgba(110, 100, 230, 0.3); }
.hv-side a.hv-side-btn:first-child:hover { filter: brightness(1.06); color: #FFFFFF; }
.hv-side-top { display: none; }
.hv-side-top.on { display: flex; }
.hv-side-qr { position: absolute; right: calc(100% + 14px); top: 50%; width: 132px; padding: 10px 10px 8px; border-radius: 14px; background: #FFFFFF; border: 1px solid #ECEAF5; box-shadow: 0 14px 34px rgba(31, 29, 58, 0.18); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; visibility: hidden; transform: translate(6px, -50%); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.hv-side-qr img { display: block; width: 112px; height: 112px; }
.hv-side-qr em { font-style: normal; font-size: 12px; color: #4A475C; }
.hv-side a.hv-side-btn:hover .hv-side-qr { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (max-width: 1359px) { #meun { left: auto !important; right: 8px; margin-left: 0 !important; } }

/* 宽屏 1400：封面推荐位一页 7 本 */
@media (min-width: 1600px) {
    .hv-hero-in { grid-template-columns: minmax(0, 1fr) 340px; }
    .hv-track { --hv-per: 7; }
    .hv-row-body { grid-template-columns: 420px minmax(0, 1fr); }
    .hv-flow { grid-template-columns: 400px minmax(0, 1fr); }
}

/* 窄屏（内容区 952～1199）：右侧栏收窄、多列改少列、页头导航收紧 */
@media (max-width: 1279px) {
    /* 本期主打：窄屏下大卡封面缩小，7 本时大卡少占一点 */
    .hv-grid4.hv-pick-n7 { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
    .hv-pick-lead .hv-cover-box { width: 108px; }
    .hv-hero-in { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
    .hv-thumb img { width: 76px; height: 42px; }
    .hv-float { grid-template-columns: minmax(0, 1fr) 250px; }
    .hv-float > .hv-cats { grid-column: 1 / -1; }
    .hv-track { --hv-per: 5; }
    .hv-row-body { grid-template-columns: 330px minmax(0, 1fr); gap: 20px; }
    .hv-feat .hv-cover-box { width: 112px; }
    .hv-flow { grid-template-columns: 320px minmax(0, 1fr); }
    .hv-flow-item.pl2, .hv-flow-item.pr2 { opacity: 0; pointer-events: none; }
    .hv-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hv-cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv-pick-body { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
    .hv-trio-item .hv-cover-box { width: 72px; }
    .hv-page .hv-recent-list a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px 40px; gap: 8px; }

    .hvh-bar { gap: 14px; padding-left: 14px; }
    .hvh-logo b { display: none; }
    .hvh-nav { gap: 2px; }
    .hvh-nav a { padding: 0 10px; }
    .hvh-search { width: 180px; }

    .hvf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 270px; row-gap: 28px; }
    .hvf-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: start; }
    .hvf-brand p { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
    .hvf-pills { margin-top: 12px; }
}
@media (max-width: 1099px) {
    .hv-track { --hv-per: 4; }
    .hvh-nav a { padding: 0 8px; font-size: 14px; }
    .hvh-search { width: 160px; }
}

/* ===== 包月页首屏下沿：会员特权 / 即将入库 / 包月书库入口 ===== */
.hv-float.hv-vip { grid-template-columns: minmax(0, 1fr) 300px 232px; }
.hv-perks { display: flex; flex-direction: column; padding: 16px 18px; background: linear-gradient(150deg, #FFF6E4 0%, #FFFFFF 46%); border-color: #F4E6C8; }
.hv-perks-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.hv-perks-head > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hv-perks-head b { font-size: 16px; }
.hv-perks-head em { font-style: normal; font-size: 12px; color: #A0742A; }
.hv-perks-grid { list-style: none; flex: 1; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv-perks-grid li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.8); border: 1px solid #F0ECFA; }
.hv-perks-grid i { flex: none; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: 0 6px 14px rgba(110, 100, 230, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.hv-perks-grid li > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hv-perks-grid li b { font-size: 14px; color: #2A2840; }
.hv-perks-grid li em { font-style: normal; font-size: 12px; color: var(--hv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-page button.hv-perks-go { flex: none; height: 34px; padding: 0 20px; border: 0; border-radius: 17px; background: linear-gradient(90deg, #FFE697 0%, #FFA12C 100%); color: #723800; font-size: 14px; font-weight: 700; letter-spacing: 1px; cursor: pointer; box-shadow: 0 6px 14px rgba(255, 161, 44, 0.28); transition: filter .15s, transform .15s; }
.hv-page button.hv-perks-go:hover { filter: brightness(1.04); transform: translateY(-1px); }
.hv-coming { padding: 14px 16px 12px; }
.hv-coming ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hv-page .hv-coming a { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 10px; transition: background .15s; }
.hv-page .hv-coming a:hover { background: #F6F5FD; }
.hv-coming .hv-cover { flex: none; width: 40px; height: 56px; overflow: hidden; font-size: 0; border-radius: 4px; box-shadow: 0 4px 10px rgba(31, 29, 58, 0.14); }
.hv-coming a > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hv-coming b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-coming a:hover b { color: var(--hv-brand-ink); }
.hv-coming em { font-style: normal; font-size: 12px; color: var(--hv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-coming i { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: #E2453A; background: #FDE7E5; border-radius: 10px; padding: 2px 8px; }
.hv-coming-empty { padding: 40px 0; text-align: center; font-size: 14px; color: var(--hv-mute); }
.hv-vip-libs { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.hv-page .hv-vip-libs a { flex: none; display: block; aspect-ratio: 253 / 126; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 14px 34px rgba(31, 29, 58, 0.08); transition: transform .15s; }
.hv-page .hv-vip-libs a:hover { transform: translateY(-2px); }
.hv-vip-libs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== 有声推荐位：样式 13 宫格 / 样式 14 横滑 ===== */
.hv-snd-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; }
.hv-page a.hv-snd { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-snd-cover { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #E9E7F8; box-shadow: 0 8px 18px rgba(31, 29, 58, 0.14); }
.hv-snd-cover img { display: block; width: 100%; aspect-ratio: 20 / 13; object-fit: cover; transition: transform .3s; }
.hv-snd-sq .hv-snd-cover img { aspect-ratio: 1 / 1; }
.hv-snd:hover .hv-snd-cover img { transform: scale(1.04); }
.hv-snd-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--hv-brand-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20, 18, 40, 0.25); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.hv-snd:hover .hv-snd-play { opacity: 1; transform: none; }
.hv-snd-visit { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 16px 10px 6px; background: linear-gradient(180deg, rgba(14, 12, 32, 0) 0%, rgba(14, 12, 32, 0.6) 100%); color: #FFFFFF; font-size: 12px; }
.hv-snd-visit:empty { display: none; }
.hv-snd-line { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.hv-snd-line b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-snd:hover .hv-snd-line b { color: var(--hv-brand-ink); }
.hv-snd-line em { flex: none; font-style: normal; font-size: 12px; color: var(--hv-brand-ink); }
.hv-snd-last { font-size: 12px; color: var(--hv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-snd-row { margin: 10px -4px -4px; padding: 6px 4px 4px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hv-snd-row::-webkit-scrollbar { display: none; }
.hv-page .hv-snd-row a.hv-snd { flex: 0 0 calc((100% - 6 * 18px) / 7); scroll-snap-align: start; }
@media (max-width: 1279px) {
    .hv-float.hv-vip { grid-template-columns: minmax(0, 1fr) 232px; }
    .hv-float.hv-vip > .hv-perks { grid-column: 1 / -1; }
    .hv-perks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hv-page .hv-snd-row a.hv-snd { flex-basis: calc((100% - 5 * 18px) / 6); }
}