/* PC 听书首页（/tingshu），2026-10 改版 */
.sd-page {
    --sd-ink: #1F1D3A;
    --sd-sub: #6B6880;
    --sd-mute: #75728C;
    --sd-brand: #5B57E8;
    --sd-brand-ink: #4B47D6;
    --sd-brand-soft: #EEEDFD;
    --sd-line: #ECEAF5;
    width: 1200px;
    margin: 0 auto;
    padding: 24px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--sd-ink);
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    text-align: left;
}
.sd-page *, .sd-page *::before, .sd-page *::after { box-sizing: border-box; }
.sd-page a { color: inherit; text-decoration: none; }
.sd-page button { font-family: inherit; cursor: pointer; }
.sd-serif { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif; }
.sd-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-item:hover .sd-title { color: var(--sd-brand-ink); }
.sd-card { background: #FFFFFF; border: 1px solid var(--sd-line); border-radius: 16px; }
.sd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sd-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.sd-head .sd-desc { font-size: 12px; color: var(--sd-sub); }
.sd-head .sd-grow { flex: 1; }
.sd-more { font-size: 13px; color: var(--sd-brand-ink) !important; }
.sd-more:hover { color: #2F2BB0 !important; }
.sd-chip { font-size: 12px; color: var(--sd-brand-ink); background: var(--sd-brand-soft); border-radius: 10px; padding: 1px 9px; }

/* 封面：图片加载失败时隐藏，露出下面的书名占位 */
.sd-cover { position: relative; display: block; flex: none; overflow: hidden; background: #E9E7F8; }
.sd-cover > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-ph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--sd-brand-ink); font-weight: 700; line-height: 1.4; overflow: hidden; word-break: break-all; }
.sd-sq { aspect-ratio: 1 / 1; border-radius: 10px; }

/* ===== 轮播（唱片样式） ===== */
.sd-top { display: flex; gap: 24px; align-items: stretch; }
.sd-hero { flex: 1; min-width: 0; position: relative; border-radius: 18px; overflow: hidden; min-height: 380px; background: #17133A; color: #FFFFFF; }
.sd-hero-bg { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(26px) saturate(1.2); opacity: 0.75; transition: opacity 0.4s; }
.sd-hero-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(18, 14, 46, 0.62); }
.sd-slide { position: relative; display: none; align-items: center; gap: 28px; padding: 30px 34px 0; min-height: 290px; }
.sd-slide.sd-on { display: flex; animation: sdFade 0.5s ease; }
@keyframes sdFade { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.sd-slide-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sd-badge-line { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #D9D7FF; }
.sd-badge { background: #A7A4FF; color: #17133A; font-weight: 700; border-radius: 4px; padding: 2px 8px; }
.sd-slide-no { font-weight: 700; letter-spacing: 1px; }
.sd-slide-title { font-size: 38px; font-weight: 900; line-height: 1.2; letter-spacing: 1px; }
.sd-slide-meta { font-size: 14px; color: #E4E2F7; }
.sd-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-tags span { font-size: 12px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; padding: 2px 10px; }
.sd-slide-act { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.sd-listen-btn { flex: none; display: flex !important; align-items: center; gap: 8px; background: #FFFFFF; color: var(--sd-brand-ink) !important; border-radius: 24px; height: 48px; padding: 0 24px; font-size: 15px; font-weight: 700; }
.sd-listen-btn:hover { background: #F1F0FF; }
.sd-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.sd-wave i { display: block; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.sd-wave i.sd-lit { background: #FFFFFF; }
.sd-slide.sd-on .sd-wave i { animation: sdWave 1.2s ease-in-out infinite; transform-origin: center; }
.sd-wave i:nth-child(3n) { animation-delay: -0.4s !important; }
.sd-wave i:nth-child(3n+1) { animation-delay: -0.8s !important; }
@keyframes sdWave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
.sd-record { flex: none; position: relative; width: 300px; height: 230px; display: block; }
.sd-disc { position: absolute; right: 0; top: 10px; width: 210px; height: 210px; border-radius: 50%; background: repeating-radial-gradient(circle at center, #111018 0, #111018 3px, #1E1C2A 4px, #111018 6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }
.sd-slide.sd-on .sd-disc { animation: sdSpin 14s linear infinite; }
@keyframes sdSpin { to { transform: rotate(360deg); } }
.sd-disc-label { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 3px solid #2A2840; background: #3A3660; position: relative; }
.sd-disc-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-disc-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #D9D7FF; }
.sd-sleeve { position: absolute; left: 0; top: 0; width: 210px; height: 210px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.sd-sleeve .sd-ph { font-size: 22px; background: #E9E7F8; }
.sd-hero-nav { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 34px 22px; }
.sd-arrow { flex: none; width: 36px; height: 36px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.sd-arrow:hover { background: rgba(255, 255, 255, 0.12); }
.sd-thumbs { display: flex; gap: 10px; flex: 1; min-width: 0; overflow: hidden; }
.sd-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; border: 2px solid transparent; opacity: 0.6; padding: 0; background: #3A3660; overflow: hidden; position: relative; }
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-thumb.sd-on { border-color: #FFFFFF; opacity: 1; }
/* 当前这张的缩略图底部进度条：走满就切下一部作品（时长和 JS 里的 sdDelay 一致） */
.sd-thumb::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #A7A4FF; }
.sd-thumb.sd-on::after { animation: sdProg 5s linear forwards; }
@keyframes sdProg { from { width: 0; } to { width: 100%; } }
.sd-thumb:hover { opacity: 1; }

/* 新作入库 */
.sd-latest { flex: none; width: 376px; padding: 20px 20px 12px; display: flex; flex-direction: column; }
.sd-latest .sd-head { margin-bottom: 6px; }
.sd-latest-list { display: flex; flex-direction: column; flex: 1; justify-content: space-around; }
.sd-latest-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #F2F1F8; }
.sd-latest-row:last-child { border-bottom: 0; }
.sd-latest-row .sd-cover { width: 72px; height: 72px; border-radius: 8px; }
.sd-latest-row .sd-ph { font-size: 20px; padding: 2px; }
.sd-latest-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sd-latest-info .sd-title { font-size: 15px; font-weight: 700; }
.sd-latest-info .sd-a { font-size: 12px; color: var(--sd-sub); }
.sd-latest-info .sd-m { font-size: 12px; color: var(--sd-mute); }
.sd-playdot { flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--sd-brand-soft); color: var(--sd-brand-ink); display: flex; align-items: center; justify-content: center; }
.sd-latest-row:hover .sd-playdot { background: var(--sd-brand); color: #FFFFFF; }

/* ===== 书架 + 右栏 ===== */
.sd-mid { display: flex; gap: 24px; align-items: flex-start; }
.sd-shelves { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sd-shelf { padding: 20px 22px 22px; }
.sd-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sd-book { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sd-book .sd-cover { box-shadow: 0 6px 14px rgba(55, 48, 140, 0.16); }
.sd-book .sd-ph { font-size: 16px; }
.sd-full { position: absolute; left: 8px; top: 8px; font-size: 11px; color: #FFFFFF; background: rgba(31, 110, 70, 0.92); border-radius: 4px; padding: 1px 6px; z-index: 1; }
.sd-count { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); color: #FFFFFF; font-size: 12px; display: flex; align-items: center; gap: 4px; z-index: 1; }
.sd-hover-play { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 18px; background: var(--sd-brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.sd-book:hover .sd-hover-play { opacity: 1; }
.sd-book .sd-title { font-size: 15px; font-weight: 700; }
.sd-book .sd-sub { font-size: 12px; color: var(--sd-mute); margin-top: -4px; }

.sd-side { flex: none; width: 376px; display: flex; flex-direction: column; gap: 24px; }
.sd-end { padding: 20px 20px 10px; }
.sd-end .sd-head { margin-bottom: 8px; }
.sd-end-top { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F2F1F8; }
.sd-end-top .sd-cover { width: 64px; height: 64px; border-radius: 8px; }
.sd-end-top .sd-ph { font-size: 18px; padding: 2px; }
.sd-num { flex: none; width: 22px; text-align: center; font-weight: 900; font-size: 22px; }
.sd-n1 { color: #9A6514; } .sd-n2 { color: #5F6878; } .sd-n3 { color: #9A4F24; }
.sd-end-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sd-end-info .sd-title { font-size: 15px; font-weight: 700; }
.sd-end-info .sd-a { font-size: 12px; color: var(--sd-sub); }
.sd-end-info .sd-m { font-size: 12px; color: var(--sd-mute); }
.sd-end-row { display: flex; align-items: center; gap: 12px; height: 38px; border-bottom: 1px solid #F4F3F8; }
.sd-end-row:last-child { border-bottom: 0; }
.sd-end-row .sd-num { font-size: 15px; font-weight: 700; color: var(--sd-mute); }
.sd-end-row .sd-title { flex: 1; min-width: 0; font-size: 14px; }

.sd-trial { background: #1F1B47; border-radius: 16px; padding: 20px; color: #FFFFFF; }
.sd-trial .sd-head { margin-bottom: 12px; }
.sd-trial .sd-desc { color: #C9C6F4; }
.sd-trial-list { display: flex; flex-direction: column; gap: 10px; }
.sd-trial-row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 10px; }
.sd-trial-row.sd-playing { background: rgba(255, 255, 255, 0.12); }
.sd-trial-row .sd-cover { width: 52px; height: 52px; border-radius: 8px; }
.sd-trial-row .sd-ph { font-size: 16px; padding: 2px; }
.sd-trial-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sd-trial-info .sd-title { font-size: 14px; font-weight: 700; color: #FFFFFF !important; }
.sd-trial-info .sd-a { font-size: 12px; color: #C9C6F4; }
.sd-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.sd-bar i { display: block; height: 3px; width: 0; background: #A7A4FF; }
.sd-trial-btn, .sd-page a.sd-trial-btn { flex: none; width: 40px; height: 40px; border-radius: 20px; border: 0; background: #FFFFFF; color: var(--sd-brand-ink); display: flex; align-items: center; justify-content: center; }
.sd-trial-btn .sd-ic-pause { display: none; }
.sd-playing .sd-trial-btn .sd-ic-play { display: none; }
.sd-playing .sd-trial-btn .sd-ic-pause { display: block; }

/* ===== 最近更新 ===== */
.sd-updates { padding: 20px 22px 22px; }
.sd-grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sd-date { position: absolute; left: 0; top: 0; font-size: 11px; color: #FFFFFF; background: var(--sd-brand); border-radius: 0 0 8px 0; padding: 2px 8px; z-index: 1; }
.sd-updates .sd-title { font-size: 14px; }

/* ===== 有声专题 ===== */
.sd-topics-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sd-topics-head h2 { margin: 0; font-size: 24px; font-weight: 900; }
.sd-topics-head span { font-size: 13px; color: var(--sd-sub); }
.sd-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sd-topic { padding: 20px 22px 22px; }
.sd-topic-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.sd-topic-head h3 { margin: 0; font-size: 19px; font-weight: 700; }
.sd-topic-head .sd-desc { font-size: 13px; color: var(--sd-sub); margin-top: 4px; }
.sd-topic-body { display: flex; gap: 14px; }
.sd-topic-img { flex: none; width: 150px; min-height: 124px; border-radius: 10px; overflow: hidden; display: block; }
.sd-topic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-topic-list { flex: 1; min-width: 0; display: grid; gap: 12px; }
.sd-topic-list.sd-c1 { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 150px; }
.sd-topic-list.sd-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-topic-list.sd-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-topic-list.sd-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sd-topic .sd-book { gap: 6px; }
.sd-topic .sd-sq { border-radius: 8px; }
.sd-topic .sd-count { padding: 14px 8px 6px; font-size: 11px; }
.sd-topic .sd-title { font-size: 13px; }
.sd-topic .sd-sub { margin-top: 0; }