/* =====================================================================
   听书（音频模块）样式 —— 仿喜马拉雅 PC 官网
   结构：分类导航条 / 横幅 / 双栏（主栏重磅推荐+网格、侧栏收听榜）
         专辑页：面包屑 + 大封面头部 + 目录 / 底部播放条
   ===================================================================== */
:root{
    --au-red:#f86442;          /* 喜马拉雅主色 */
    --au-red-deep:#e94e2b;
    --au-bg:#f6f6f8;
    --au-line:#ececf0;
    --au-t1:#24262e;
    --au-t2:#6b7280;
    --au-t3:#9aa0ab;
}
.au-wrap{max-width:1200px;margin:0 auto;padding:0 16px 80px}

/* ---------- 分类导航条（频道栏） ---------- */
.au-nav{background:#fff;border-radius:12px 12px 0 0;border:1px solid var(--au-line);border-bottom:none;margin-top:12px}
.au-nav .inner{display:flex;align-items:stretch;padding:0 8px;overflow-x:auto;scrollbar-width:none}
.au-nav .inner::-webkit-scrollbar{display:none}
.au-nav .item{flex:1 1 auto;min-width:-moz-max-content;min-width:max-content;display:flex;align-items:center;justify-content:center;
    padding:13px 18px;font-size:15px;color:var(--au-t1);text-decoration:none;
    position:relative;white-space:nowrap;transition:color .15s}
.au-nav .item:hover{color:var(--au-red)}
.au-nav .item.on{color:var(--au-red);font-weight:700}
.au-nav .item.on::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:24px;height:3px;border-radius:2px;background:var(--au-red)}

/* ---------- 横幅 ---------- */
.au-banner{background:linear-gradient(120deg,#ff8a63 0%,var(--au-red) 55%,#d94a2b 100%);
    border-radius:0 0 12px 12px;color:#fff;padding:26px 32px;display:flex;align-items:center;
    justify-content:space-between;overflow:hidden;position:relative}
.au-banner h1{margin:0;font-size:26px;font-weight:800;letter-spacing:1px}
.au-banner p{margin:8px 0 0;font-size:13px;opacity:.92}
.au-banner .art{font-size:96px;line-height:1;opacity:.22;font-style:normal;user-select:none;
    transform:translateY(6px)}

/* ---------- 双栏 ---------- */
.au-cols{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:20px;align-items:start}
.au-colmain{min-width:0}
.au-colside{min-width:0;position:sticky;top:12px}

/* ---------- 区块标题 ---------- */
.au-sec{margin:0 0 14px;display:flex;align-items:baseline;justify-content:space-between}
.au-sec h2{margin:0;font-size:20px;font-weight:700;color:var(--au-t1)}
.au-sec h2::before{content:'';display:inline-block;width:4px;height:16px;border-radius:2px;
    background:var(--au-red);margin-right:9px;vertical-align:-2px}
.au-sec .more{font-size:12px;color:var(--au-t3)}
.au-block{margin-bottom:26px}

/* ---------- 重磅推荐（大卡横排） ---------- */
.au-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feat{text-decoration:none;display:block}
.feat .cv{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#e9e9ee}
.feat .cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.feat:hover .cv img{transform:scale(1.04)}
.feat .cv .tag{position:absolute;left:0;top:0;padding:3px 10px;font-size:12px;border-radius:12px 0 12px 0;
    background:linear-gradient(120deg,var(--au-red),var(--au-red-deep));color:#fff;font-weight:600}
.feat .cv .play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.9);color:var(--au-red);display:flex;align-items:center;justify-content:center;
    font-size:13px;padding-left:2px;opacity:0;transform:translateY(6px);transition:.2s}
.feat:hover .cv .play{opacity:1;transform:translateY(0)}
.feat h3{margin:9px 0 3px;font-size:15px;color:var(--au-t1);font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.feat .meta,.card .meta{margin:0;font-size:12px;color:var(--au-t3);display:flex;justify-content:space-between;gap:8px}
.feat .nick,.card .nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 专辑网格 ---------- */
.au-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:10px;
    text-decoration:none;display:flex;flex-direction:column;transition:.15s}
.card:hover{box-shadow:0 6px 18px rgba(248,100,66,.12);transform:translateY(-2px)}
.card .cv{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:#e9e9ee}
.card .cv img{width:100%;height:100%;object-fit:cover;display:block}
.card .cv .price{position:absolute;right:0;bottom:0;padding:2px 10px;font-size:12px;border-radius:8px 0 0 0;
    background:linear-gradient(120deg,var(--au-red),var(--au-red-deep));color:#fff;font-weight:600}
.card .cv .price.free{background:linear-gradient(120deg,#21ba72,#0ea35f)}
.card h3{margin:8px 0 4px;font-size:14px;color:var(--au-t1);font-weight:600;line-height:1.35;height:38px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 兜底封面 */
.ph{width:100%;height:100%}
.ph-warm{background:linear-gradient(135deg,#ffb199,#f86442)}
.ph-cool{background:linear-gradient(135deg,#a8c8ff,#5f7cf9)}
.ph-mini{width:46px;height:46px;border-radius:8px;flex:0 0 46px}

/* ---------- 侧栏：收听榜 / 贴士 ---------- */
.au-side{background:#fff;border:1px solid var(--au-line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.au-side .hd{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 10px;
    border-bottom:1px solid #f4f4f6}
.au-side .hd h3{margin:0;font-size:16px;font-weight:700;color:var(--au-t1)}
.au-side .hd h3::before{content:'';display:inline-block;width:4px;height:13px;border-radius:2px;
    background:var(--au-red);margin-right:8px;vertical-align:-1px}
.au-side .hd span{font-size:12px;color:var(--au-t3)}
.au-side .rank{list-style:none;margin:0;padding:4px 0}
.au-side .rank a{display:flex;align-items:center;gap:10px;padding:10px 16px;text-decoration:none;transition:background .12s}
.au-side .rank a:hover{background:#fff8f6}
.au-side .no{flex:0 0 20px;text-align:center;font-style:italic;font-weight:800;font-size:15px;color:#d8dbe2}
.au-side .rank li:nth-child(1) .no{color:var(--au-red)}
.au-side .rank li:nth-child(2) .no{color:#ff8f1f}
.au-side .rank li:nth-child(3) .no{color:#ffb800}
.au-side .rt{flex:1;min-width:0}
.au-side .rt b{display:block;font-size:13px;color:var(--au-t1);font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.au-side .rt span{font-size:11px;color:var(--au-t3)}
.au-side .cnt{flex:0 0 auto;font-size:11px;color:var(--au-t3)}
.au-side.tip ul{margin:0;padding:12px 16px 14px;list-style:none}
.au-side.tip li{font-size:12px;color:var(--au-t2);line-height:1.7;padding-left:14px;position:relative}
.au-side.tip li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
    background:var(--au-red);opacity:.55}

/* ---------- 空态 ---------- */
.au-empty{text-align:center;color:var(--au-t3);padding:50px 0;font-size:14px;
    background:#fff;border:1px dashed var(--au-line);border-radius:12px}
.au-empty .lnk{color:var(--au-red);text-decoration:none}

/* ---------- 面包屑 ---------- */
.au-crumb{margin:14px 0 12px;font-size:13px;color:var(--au-t3);display:flex;align-items:center;gap:8px}
.au-crumb a{color:var(--au-t2);text-decoration:none}
.au-crumb a:hover{color:var(--au-red)}
.au-crumb i{font-style:normal;color:#d0d3da}
.au-crumb span{color:var(--au-t1)}

/* ---------- 专辑详情头部 ---------- */
.au-detail{max-width:1000px}
.au-head{background:#fff;border:1px solid var(--au-line);border-radius:14px;padding:26px;
    display:flex;gap:24px}
.au-head .cv{flex:0 0 200px;width:200px;height:200px;border-radius:12px;overflow:hidden;background:#e9e9ee}
.au-head .cv img{width:100%;height:100%;object-fit:cover;display:block}
.au-head .info{flex:1;min-width:0;display:flex;flex-direction:column}
.au-head h1{margin:2px 0 6px;font-size:24px;font-weight:800;color:var(--au-t1);line-height:1.3}
.au-head .sub{margin:0 0 8px;font-size:13px;color:var(--au-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-head .anchor{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--au-t2);margin-bottom:auto}
.au-head .anchor img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#eee}
.au-head .stats{display:flex;gap:26px;font-size:12px;color:var(--au-t3);margin-top:12px}
.au-head .stats b{font-size:15px;color:var(--au-t1);font-weight:700;margin-right:3px;
    font-variant-numeric:tabular-nums}
.au-head .ops{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;align-items:center}
.au-btn{border:none;cursor:pointer;border-radius:999px;padding:10px 28px;font-size:14px;font-weight:600;
    display:inline-flex;align-items:center;gap:6px;transition:.15s}
.au-btn-play{background:var(--au-red);color:#fff}
.au-btn-play:hover{background:var(--au-red-deep)}
.au-btn-buy{background:#fff;color:var(--au-red);border:1px solid var(--au-red)}
.au-btn-buy:hover{background:#fff5f2}
.au-btn-earn{background:linear-gradient(135deg,#ffb02e,#ff7a1a);color:#fff;box-shadow:0 4px 12px rgba(255,122,26,.28)}
.au-btn-earn:hover{filter:brightness(1.05)}
.au-badge{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;font-size:13px;
    background:#eefaf3;color:#0ea35f;font-weight:600}

/* 简介 */
.au-intro{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:16px 18px;
    font-size:14px;color:var(--au-t2);line-height:1.8}
.au-intro.folded{max-height:78px;overflow:hidden;position:relative}
.au-intro.folded::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;
    background:linear-gradient(rgba(255,255,255,0),#fff)}
.au-intro-toggle{border:none;background:none;color:var(--au-red);font-size:13px;cursor:pointer;
    padding:6px 0 0;margin:0;font-weight:600}

/* ---------- 目录 ---------- */
.au-tracks{background:#fff;border:1px solid var(--au-line);border-radius:12px;overflow:hidden}
.au-track{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #f4f4f6;
    cursor:pointer;transition:background .12s}
.au-track:last-child{border-bottom:none}
.au-track:hover{background:#fff8f6}
.au-track.playing{background:#fff3ef}
.au-track.loading .tt b{color:var(--au-red)}
.au-track .idx{flex:0 0 28px;height:28px;position:relative}
.au-track .idx .no{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-style:normal;color:var(--au-t3)}
.au-track .idx .go{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-style:normal;color:var(--au-red);opacity:0;transition:opacity .12s}
.au-track:hover .idx .no,.au-track.playing .idx .no,.au-track.loading .idx .no{opacity:0}
.au-track:hover .idx .go,.au-track.playing .idx .go,.au-track.loading .idx .go{opacity:1}
.au-track .tt{flex:1;min-width:0}
.au-track .tt b{display:block;font-size:14px;font-weight:500;color:var(--au-t1);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.au-track .tt span{font-size:12px;color:var(--au-t3)}
.au-track .tt .prog{display:block;height:3px;border-radius:2px;background:#f86442;margin-top:5px;overflow:hidden}
.au-track .dur{flex:0 0 auto;font-size:12px;color:var(--au-t3);font-variant-numeric:tabular-nums}
.au-track .trial{flex:0 0 auto;font-size:11px;color:#0ea35f;border:1px solid #bfe8d2;border-radius:4px;
    padding:1px 6px;background:#f2fbf6}
.au-track .lock{flex:0 0 auto;font-size:13px;filter:grayscale(0)}

/* ---------- 底部播放条（仿喜马拉雅 PC 播放器） ---------- */
.au-player{position:fixed;left:0;right:0;bottom:0;z-index:960;display:none;
    background:rgba(255,255,255,.98);box-shadow:0 -4px 20px rgba(20,20,30,.10);
    backdrop-filter:blur(8px);border-top:1px solid var(--au-line)}
.au-player.on{display:block}
.au-player .bar{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px}
.au-player .cv{flex:0 0 46px;width:46px;height:46px;border-radius:9px;overflow:hidden;background:#eee;
    position:relative;cursor:pointer}
.au-player .cv img{width:100%;height:100%;object-fit:cover;display:block}
.au-player .cv.spin img{animation:au-spin 14s linear infinite}
@keyframes au-spin{to{transform:rotate(360deg)}}
.au-player .ops{display:flex;align-items:center;gap:2px}
.au-player .pbtn{border:none;background:none;cursor:pointer;width:36px;height:36px;border-radius:50%;
    color:var(--au-t2);font-size:15px;display:flex;align-items:center;justify-content:center;transition:.12s}
.au-player .pbtn:hover{background:#f4f4f6;color:var(--au-red)}
.au-player .pbtn.main{width:44px;height:44px;background:var(--au-red);color:#fff;font-size:18px}
.au-player .pbtn.main:hover{background:var(--au-red-deep)}
.au-player .ctr{flex:1;min-width:0}
.au-player .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.au-player .row1 b{font-size:13px;color:var(--au-t1);font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.au-player .times{font-size:11px;color:var(--au-t3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.au-player .times i{font-style:normal}
.au-player .track{height:4px;border-radius:2px;background:#ecedef;margin-top:7px;cursor:pointer;position:relative}
.au-player .track i{display:block;height:100%;border-radius:2px;background:var(--au-red);width:0%}
.au-player .track::after{content:'';position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
    background:var(--au-red);transform:translate(-50%,-50%) scale(0);transition:transform .12s}
.au-player .track:hover::after{transform:translate(-50%,-50%) scale(1)}
.au-player .rs{display:flex;align-items:center;gap:10px}
.au-player .vol{display:flex;align-items:center;gap:4px}
.au-player .vol button{border:none;background:none;cursor:pointer;font-size:15px;color:var(--au-t2)}
.au-player .vol input[type=range]{width:74px;accent-color:var(--au-red);height:4px;cursor:pointer}
.au-player .speed{border:none;background:none;cursor:pointer;font-size:12px;color:var(--au-t2);
    padding:4px 6px;border-radius:6px;flex:0 0 auto}
.au-player .speed:hover{color:var(--au-red)}

/* ---------- 购买弹层 ---------- */
.au-mask{position:fixed;inset:0;background:rgba(15,17,25,.55);z-index:980;display:none;
    align-items:center;justify-content:center;padding:20px}
.au-mask.on{display:flex}
.au-modal{background:#fff;border-radius:18px;width:360px;max-width:100%;padding:24px 24px 20px;position:relative}
.au-modal .x{position:absolute;right:14px;top:12px;border:none;background:none;font-size:18px;
    color:var(--au-t3);cursor:pointer}
.au-modal h3{margin:0 0 4px;font-size:17px;color:var(--au-t1)}
.au-modal .sub{font-size:12px;color:var(--au-t3);margin:0 0 14px}
.au-modal .price{font-size:30px;font-weight:800;color:var(--au-red);margin:6px 0 2px}
.au-modal .price s{font-size:14px;font-weight:400;color:var(--au-t3);margin-left:8px}
.au-modal .bal{font-size:13px;color:var(--au-t2);margin-bottom:14px}
.au-modal .bal b{color:#0ea35f}
.au-modal input[type=password]{width:100%;box-sizing:border-box;border:1px solid var(--au-line);
    border-radius:10px;padding:11px 12px;font-size:14px;margin-bottom:14px;outline:none}
.au-modal input[type=password]:focus{border-color:var(--au-red)}
.au-modal .go{width:100%;background:var(--au-red);color:#fff;border:none;border-radius:999px;
    padding:12px;font-size:15px;font-weight:700;cursor:pointer}
.au-modal .go:hover{background:var(--au-red-deep)}
.au-modal .go[disabled]{opacity:.6;cursor:not-allowed}
.au-modal .tip{font-size:12px;color:var(--au-t3);text-align:center;margin:10px 0 0;line-height:1.7}

/* 分享赚弹层 */
.au-share-modal .hl{font-size:13.5px;color:#c2410c;background:#fff6ed;border:1px solid #ffd9bd;
    border-radius:10px;padding:9px 12px;margin:0 0 12px;line-height:1.7}
.au-share-modal .sub{line-height:1.8}
.au-share-modal input[type=text]{width:100%;box-sizing:border-box;border:1px solid var(--au-line);
    border-radius:10px;padding:11px 12px;font-size:12.5px;color:var(--au-t2);background:#fafbfc;
    margin-bottom:12px;outline:none}
.au-share-modal input[type=text]:focus{border-color:#ff9a4d}

/* ---------- 我的听书 ---------- */
.au-minegrid{margin-top:20px}
.au-order,.au-hrow{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:13px 16px;
    margin-bottom:10px;display:flex;align-items:center;gap:12px}
.au-hrow img{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#eee;flex:0 0 46px}
.au-hrow .tt,.au-order .tt{flex:1;min-width:0}
.au-hrow .tt b,.au-order .tt b{display:block;font-size:14px;color:var(--au-t1);font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.au-hrow .tt span,.au-order .tt span{font-size:12px;color:var(--au-t3)}
.au-hrow .go{flex:0 0 auto;border:1px solid var(--au-red);color:var(--au-red);background:none;
    border-radius:999px;padding:5px 14px;font-size:12px;cursor:pointer;text-decoration:none}
.au-hrow .go:hover,.au-order .go:hover{background:#fff5f2}
.au-order .go{flex:0 0 auto;border:1px solid var(--au-red);color:var(--au-red);background:none;
    border-radius:999px;padding:5px 14px;font-size:12px;cursor:pointer;text-decoration:none}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
    .au-cols{grid-template-columns:1fr}
    .au-colside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .au-feats,.au-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
    .au-feats,.au-grid{grid-template-columns:repeat(2,1fr)}
    .au-colside{grid-template-columns:1fr}
    .au-head{flex-direction:column;align-items:center;text-align:center}
    .au-head .info{align-items:center}
    .au-head .ops{justify-content:center}
    .au-head .cv{width:150px;height:150px;flex-basis:150px}
    .au-head .stats{justify-content:center}
    .au-player .vol input[type=range]{display:none}
    .au-banner{padding:20px 22px}
    .au-banner .art{font-size:64px}
    .au-track .tt span{display:none}
    .au-nav .item{flex:0 0 auto;padding:12px 14px;font-size:14px}
}