/* =====================================================
   ★ 首页 · 喜马拉雅风格（基于 style.css 叠加覆盖）
   顶部导航 v2 · 轮播 · 分类带 · 猜你喜欢+侧栏 · 有声书·三榜单(热播/新品/免费)
   ===================================================== */

/* 头部 v2：更高、搜索居中、右侧功能图标 */
.site-header { position: relative; background: #fff; border-bottom: 1px solid #f0f0f0; box-shadow: 0 2px 10px -6px rgba(0,0,0,.06); }
.site-header .hdr-in { height: 80px; gap: 18px; flex-wrap: nowrap; }
.site-header .lg-ic { width: 38px; height: 38px; font-size: 21px; border-radius: 10px; }
.site-header .lg-img { height: 38px; width: auto; max-width: 168px; object-fit: contain; display: block; }
.site-header .lg-tx { font-size: 21px; }
.site-header .hdr-nav { gap: 16px; flex: 0 0 auto; }
.site-header .hdr-nav a { position: relative; font-size: 15.5px; color: #555; font-weight: 500; white-space: nowrap; }
.site-header .hdr-nav a:hover, .site-header .hdr-nav a.on { color: var(--primary); font-weight: 700; }
.site-header .hdr-nav a.on { border-bottom: 3px solid var(--primary); padding-bottom: 3px; }

/* 搜索框：输入框 + 橙色圆角搜索钮 */
.site-header .hdr-search { flex: 1 1 auto; max-width: 320px; justify-content: flex-end; }
.hdr-search { position: relative; display: flex; align-items: stretch; height: 38px; }
.hdr-search input,
.hdr-search button { height: 38px; }
.hdr-search input {
  flex: 1; min-width: 0; border: 1px solid #eee; border-right: 0; border-radius: 19px 0 0 19px;
  background: #fff; padding: 0 14px; font-size: 13.5px; color: var(--tx);
}
.hdr-search input::placeholder { color: #aaa; }
.hdr-search button {
  padding: 0 16px; border: 0; border-radius: 0 19px 19px 0; color: #fff; font-size: 14px;
  background: var(--primary); transition: background .15s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hdr-search button:hover { background: var(--primary-d); }

/* 头部右侧功能图标（图标+文字纵排） */
.site-header .hdr-right { gap: 4px; height: 68px; flex: 0 0 auto; }
.hri { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px;
  padding: 0 6px; color: #555; font-size: 11.5px; text-align: center; transition: color .15s; }
.hri:hover { color: var(--primary); }
.hri svg { width: 19px; height: 19px; display: block; }
/* 「开通会员」「兑换」：与其他入口一致 —— 图标在上、文字在下（仅会员保留主题橙强调） */
.hri-vip, .hri-redeem { flex-direction: column; gap: 4px; min-width: 52px; padding: 0 6px;
  border: 0; border-radius: 0; background: none; box-shadow: none; height: auto; white-space: normal;
  font-size: 11.5px; font-weight: 500; transform: none; }
.hri-vip svg, .hri-redeem svg { width: 19px; height: 19px; }
.hri-vip, .hri-vip:hover { color: var(--primary); font-weight: 700; }
.hri-redeem:hover { color: var(--primary); }

/* ============ 轮播图（居中+两侧露出，参考图 1:1） ============ */
.banner-zone { margin-top: 18px; }
.banner-view { position: relative; width: 100%; height: 300px; overflow: hidden; }
.banner-track { display: flex; height: 100%; transition: transform .6s ease; will-change: transform; }
.banner-slide { flex: 0 0 var(--bn-w, 816px); height: 100%; position: relative; border-radius: 14px; overflow: hidden;
  margin-right: var(--bn-gap, 22px); transform: scale(.92); opacity: .5; transition: opacity .5s, transform .5s; }
.banner-slide.on { transform: scale(1); opacity: 1; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-slide .bn-text { position: absolute; left: 34px; bottom: 30px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.bn-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.24); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center;
  justify-content: center; z-index: 4; transition: background .15s; }
.bn-arrow:hover { background: rgba(0,0,0,.45); }
.bn-prev { left: 10px; }
.bn-next { right: 10px; }
.bn-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.bn-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d6d6d6; cursor: pointer; transition: all .2s; }
.bn-dots i.on { width: 22px; border-radius: 5px; background: var(--primary); }

/* ============ 分类带：左侧按钮 + 右侧分类格 ============ */
.cat-band { display: flex; gap: 26px; align-items: stretch; margin: 26px 0 4px; }
.cat-func { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.cat-func .cf-btn { width: 88px; padding: 12px 0; border-radius: 12px; border: 1px solid #eee; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 7px; color: #666; font-size: 13px;
  transition: all .15s; }
.cat-func .cf-btn:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 8px 18px -12px rgba(248,100,66,.6); }
.cat-func .cf-ic { width: 40px; height: 40px; border-radius: 10px; background: #fff2ec; color: var(--primary);
  font-size: 20px; display: flex; align-items: center; justify-content: center; font-style: normal; }
.cat-function-grid {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 26px; align-content: start; padding-top: 2px;
}
.cat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ci-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.cat-item em { font-style: normal; font-size: 15px; font-weight: 700; color: #333; white-space: nowrap; }
.ci-tag { font-style: normal; font-size: 10px; line-height: 1.4; color: #b3770a; background: #fff6e3;
  border: 1px solid #ffe3ae; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.cat-item span { color: #999; font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.cat-item:hover em { color: var(--primary); }

/* ============ 栏目页二级分类条 / 通用分类 chip ============ */
.col-catbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 14px; }
.cat-chip { padding: 5px 15px; border-radius: 999px; font-size: 13px; color: #555;
  border: 1px solid #e2e2e2; background: #fff; transition: all .15s; white-space: nowrap; }
.cat-chip:hover { color: var(--primary); border-color: var(--primary); }
.cat-chip.on { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 700; }

/* ============ 排行榜页 ============ */
.rank-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 16px; }
.rk-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px; cursor: pointer; transition: box-shadow .15s; }
.rk-row:hover { box-shadow: 0 8px 22px -12px rgba(0,0,0,.25); }
.rk-row .rk-no { flex: 0 0 40px; width: 40px; text-align: center; font-size: 22px; font-weight: 800;
  font-style: italic; color: #d6d6d6; }
.rk-row .rk-no.top { color: #fa3b3b; }
.rk-row:nth-of-type(2) .rk-no.top { color: #ff7f2a; }
.rk-row:nth-of-type(3) .rk-no.top { color: #ffb400; }
.rk-cv { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #ececec; }
.rk-cv img { width: 100%; height: 100%; object-fit: cover; }
.rk-info { flex: 1; min-width: 0; }
.rk-title { font-size: 16px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-row:hover .rk-title { color: var(--primary); }
.rk-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rk-sub .col-tag { color: var(--primary); font-size: 12.5px; }
.rk-dur { color: var(--tx3); font-size: 12px; }
.rk-cnt { flex: 0 0 auto; text-align: right; color: var(--tx3); font-size: 12px; }
.rk-cnt b { font-size: 17px; color: var(--primary); margin-right: 3px; }

/* ============ 分类页（全栏目 + 二级分类） ============ */
.cat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 6px; }
@media (max-width: 900px) { .cat-cards { grid-template-columns: 1fr; } }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  transition: box-shadow .15s; }
.cat-card:hover { box-shadow: 0 10px 24px -14px rgba(0,0,0,.28); }
.cat-card-hd { display: flex; align-items: center; gap: 12px; }
.cat-badge { width: 42px; height: 42px; border-radius: 10px; background: var(--primary-grad); color: #fff;
  font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.cat-card-t { min-width: 0; flex: 1; }
.cat-card-t b { font-size: 17px; color: #222; display: block; }
.cat-card-t span { font-size: 12px; color: var(--tx3); }
.cat-enter { flex: 0 0 auto; color: var(--primary); font-size: 13px; border: 1px solid var(--primary);
  padding: 5px 13px; border-radius: 999px; transition: all .15s; }
.cat-enter:hover { background: var(--primary); color: #fff; }
.cat-desc { color: var(--tx2); font-size: 12.5px; margin: 8px 0 10px; line-height: 1.6;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cat-card-cats { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed #efefef; }
.cat-none { color: var(--tx3); font-size: 12.5px; }

/* ============ 通用卡片网格（内容页相关推荐等） ============ */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; }
@media (max-width: 1080px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ 首页分栏（主区 + 侧栏） ============ */
.home-columns { display: grid; grid-template-columns: 1fr 320px; gap: 26px; }
@media (max-width: 1080px) { .home-columns { grid-template-columns: 1fr; } }

/* 分区大标题（猜你喜欢 / 有声书） */
.gh-hd { display: flex; align-items: center; gap: 10px; margin: 30px 0 18px; }
.gh-hd .gh-bar { width: 5px; height: 20px; border-radius: 3px; background: var(--primary); }
.gh-hd h2 { font-size: 21px; font-weight: 800; }
.gh-hd .gh-shuffle { margin-left: auto; border: 1px solid #eee; background: #fff; color: #666; height: 30px;
  padding: 0 16px; border-radius: 15px; font-size: 13px; transition: .15s; }
.gh-hd .gh-shuffle:hover { color: var(--primary); border-color: var(--primary); }

/* 猜你喜欢卡片网格（5 列） */
.guess-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 16px; }
@media (max-width: 1080px) { .guess-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .guess-grid { grid-template-columns: repeat(2, 1fr); } }
.guess-grid .album-card { width: auto; flex: none; position: relative; }

/* 侧栏：推荐内容（后台内容管理勾选「推荐」标记 is_recommend=1 的内容） */
.home-side { display: flex; flex-direction: column; gap: 16px; }
.side-panel { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 16px 16px 8px; }
.sp-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sp-hd h3 { font-size: 16px; font-weight: 800; color: #222; }
.sp-more { margin-left: auto; color: #999; font-size: 12px; }
.sp-more:hover { color: var(--primary); }
.sp-list { list-style: none; }
.sp-li { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; border-bottom: 1px dashed #f4f4f4; }
.sp-li:last-child { border-bottom: none; }
.sp-no { width: 18px; flex: 0 0 18px; text-align: center; font-size: 13px; font-weight: 800;
  font-style: italic; color: #c9c9c9; }
.sp-no.top { color: var(--primary); }
.sp-cv { position: relative; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px;
  overflow: hidden; background: #f2f2f2; }
.sp-cv img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.sp-li:hover .sp-cv img { transform: scale(1.06); }
.sp-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: #c8c8c8; font-size: 20px; font-style: normal; }
.sp-tag { position: absolute; left: 3px; top: 3px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; line-height: 15px; color: #fff; background: rgba(248,100,66,.92); }
.sp-tag.free { background: rgba(5,162,108,.92); }
.sp-dur { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px;
  font-size: 10px; line-height: 15px; color: #fff; background: rgba(0,0,0,.58); }
.sp-tx { min-width: 0; flex: 1; }
.sp-name { font-size: 13.5px; color: #333; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-li:hover .sp-name { color: var(--primary); }
.sp-sub { color: #a5a5a5; font-size: 11.5px; margin-top: 3px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.sp-empty { color: #aaa; font-size: 12.5px; text-align: center; padding: 26px 0; }

/* ============ 首页有声书 · 三榜单（热播榜/新品榜/免费榜，1:1 参考图） ============ */
.rk3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 26px 0 4px; }
@media (max-width: 1000px) { .rk3 { grid-template-columns: 1fr; gap: 20px; } }
.rk3-col { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 18px 20px; }
.rk3-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rk3-title { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.rk3-title.rk3-hot  { background: linear-gradient(90deg, #ff5b4d, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk3-title.rk3-new  { background: linear-gradient(90deg, #ffb03a, #ff8600); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk3-title.rk3-free { background: linear-gradient(90deg, #2f96ff, #4cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk3-all { margin-left: auto; color: #999; font-size: 12.5px; }
.rk3-all:hover { color: var(--primary); }
.rk3-ol { list-style: none; margin: 0; padding: 0; }
.rk3-li { cursor: pointer; }
/* 前 3 名：封面 + 标题 + 副标题 */
.rk3-top { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
.rk3-cv { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #ececec; position: relative; }
.rk3-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk3-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 24px; font-style: normal; background: var(--primary-grad); }
.rk3-tx { min-width: 0; flex: 1; padding-top: 2px; }
.rk3-tx .rk3-name { font-size: 14px; font-weight: 700; line-height: 1.45; color: #222;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rk3-tx .rk3-sub { font-size: 12px; color: #999; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk3-top:hover .rk3-name { color: var(--primary); }
/* 4~10 名：序号 + 标题 */
.rk3-txt { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f4f4; }
.rk3-txt:last-child { border-bottom: 0; }
.rk3-num { flex: 0 0 22px; width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: #bdbdbd; font-style: italic; }
.rk3-txt .rk3-name { font-size: 13.5px; color: #333; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk3-txt:hover .rk3-name { color: var(--primary); }
.rk3-empty { color: #999; font-size: 13px; padding: 22px 0; list-style: none; }

/* ============ 会员开通页 / 兑换页 / 扫码登录与支付弹层 ============ */
.vip-hero, .rd-hero { border-radius: 14px; color: #fff; padding: 28px 30px; margin-bottom: 20px;
  background: linear-gradient(120deg, #ff9a5c, #f86442 60%, #e6542e);
  box-shadow: 0 12px 26px -14px rgba(248, 100, 66, .7); position: relative; overflow: hidden; }
.vip-hero::after, .rd-hero::after { content: '♪'; position: absolute; right: -16px; bottom: -60px; font-size: 220px; opacity: .12; }
.vip-hero h1, .rd-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.vip-hero p, .rd-hero p { font-size: 13.5px; opacity: .92; }
.vip-owned { background: #e8f9f0; border: 1px solid #b7ecd2; color: #0a7d4f; border-radius: 10px;
  padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.vip-owned b { font-weight: 800; }
/* 会员模块切换：音视频栏目会员 / 图文（新闻）栏目会员 分开 */
.vip-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .vip-mods { grid-template-columns: 1fr; } }
.vip-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 18px; border-radius: 12px; cursor: pointer; text-align: left;
  background: #fff; border: 1.5px solid #ececec; transition: all .16s; }
.vip-mod:hover:not([disabled]) { border-color: var(--primary); box-shadow: 0 8px 18px -12px rgba(248, 100, 66, .5); }
.vip-mod.on { border-color: var(--primary); background: linear-gradient(180deg, #fff6f1, #fff);
  box-shadow: 0 10px 22px -14px rgba(248, 100, 66, .6); }
.vip-mod[disabled] { opacity: .5; cursor: not-allowed; }
.vm-t { font-size: 15.5px; font-weight: 800; color: #333; }
.vip-mod.on .vm-t { color: var(--primary); }
.vm-s { font-size: 12px; color: #999; }
.vip-empty { text-align: center; color: #8a94a6; font-size: 14px; line-height: 2; padding: 46px 16px;
  background: #fff; border: 1px dashed #e4e8ee; border-radius: 14px; }
.vip-empty span { font-size: 12.5px; color: #a8b1bf; }
.vip-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vip-tab { padding: 7px 18px; border-radius: 999px; font-size: 14px; color: #555; background: #fff;
  border: 1px solid #e4e4e4; transition: all .15s; cursor: pointer; }
.vip-tab:hover { color: var(--primary); border-color: var(--primary); }
.vip-tab.on { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 700; }
.vip-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.vip-plan { position: relative; background: #fff; border: 1.5px solid #ececec; border-radius: 14px;
  padding: 20px 18px 16px; text-align: center; cursor: pointer; transition: all .18s; overflow: hidden; }
.vip-plan:hover { border-color: var(--primary); box-shadow: 0 10px 22px -14px rgba(248, 100, 66, .5); transform: translateY(-2px); }
.vip-plan.on { border-color: var(--primary); box-shadow: 0 12px 26px -12px rgba(248, 100, 66, .55); }
.vip-plan.perm { background: linear-gradient(180deg, #fff7f2, #fff); }
.vp-tag { position: absolute; right: -24px; top: 10px; transform: rotate(38deg); background: linear-gradient(120deg, #ffb25c, #f86442);
  color: #fff; font-size: 11px; padding: 3px 26px; font-weight: 700; letter-spacing: .5px; }
.vp-name { font-size: 16px; font-weight: 800; color: #333; }
.vp-days { font-size: 12.5px; color: #999; margin: 6px 0 12px; }
.vp-price { font-size: 24px; font-weight: 800; color: var(--primary); }
.vp-buy { display: inline-block; margin-top: 12px; padding: 5px 22px; border-radius: 999px; font-size: 12.5px;
  color: var(--primary); border: 1px solid var(--primary); background: #fff6f1; transition: all .15s; }
.vip-plan.on .vp-buy, .vip-plan:hover .vp-buy { background: var(--primary); color: #fff; }
.vip-cta { text-align: center; margin: 26px 0 10px; }
.vip-cta .btn-lg { height: 46px; padding: 0 44px; font-size: 15px; border-radius: 23px; color: #fff;
  background: linear-gradient(120deg, #ff8a5c, #f86442); box-shadow: 0 10px 24px -10px rgba(248, 100, 66, .8); transition: all .15s; }
.vip-cta .btn-lg:hover { transform: translateY(-1px); }
.vip-safe { color: #999; font-size: 12px; margin-top: 10px; }

/* 扫码弹层（登录/支付二维码） */
.pc-qr-box { text-align: center; padding: 4px 0; }
.pc-qr-img { width: 216px; height: 216px; border: 1px solid #f0f0f0; border-radius: 12px; padding: 8px; background: #fff; margin: 0 auto; display: block; }
.pc-qr-tip { font-size: 12.5px; color: #888; line-height: 2; margin-top: 12px; text-align: left; }
.pc-qr-tip b { color: var(--primary); }
.pc-qr-refresh { margin-top: 8px; font-size: 12px; color: #999; }
.pc-qr-refresh a { color: var(--primary); }
.pc-pay-amt { margin-top: 14px; font-size: 13.5px; color: #666; }
.pc-pay-amt .amt { color: var(--primary); font-size: 20px; font-weight: 800; }
.pc-pay-fallback { width: 100%; height: 64px; font-size: 12px; color: #555; padding: 8px; border: 1px dashed #ddd; border-radius: 8px; }

/* 兑换页 */
.rd-form { background: #fff; border-radius: 14px; padding: 22px; margin-bottom: 18px; box-shadow: 0 6px 18px -14px rgba(0,0,0,.12); }
/* 未登录兑换时的手机号输入行（与兑换码输入框同宽） */
.rd-mob { max-width: 560px; margin-bottom: 12px; }
.rd-input-full { width: 100%; flex: none; }
.rd-input-w { display: flex; gap: 10px; max-width: 560px; }
.rd-input { flex: 1; height: 44px; border: 1.5px solid #e4e4e4; border-radius: 10px; padding: 0 16px;
  font-size: 15px; letter-spacing: 1px; color: #333; background: #fafbfc; transition: border .15s; }
.rd-input:focus { border-color: var(--primary); background: #fff; }
.rd-input-w .btn { height: 44px; padding: 0 26px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 14.5px; white-space: nowrap; }
.rd-input-w .btn:hover { background: var(--primary-d); }
.rd-tip { color: #999; font-size: 12px; margin-top: 10px; }
.rd-logs h3 { font-size: 16px; margin-bottom: 12px; position: relative; padding-left: 12px; }
.rd-logs h3::before { content: ''; position: absolute; left: 0; top: 3px; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.rd-log { background: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.rd-l-name { font-size: 14.5px; font-weight: 700; color: #333; }
/* 兑换记录的模块标识（音视频 / 图文） */
.rd-mod {
  display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 6px; background: #e0e7ff; color: #4338ca; vertical-align: 1px;
}
.rd-mod.art { background: #ccfbf1; color: #0f766e; }
.rd-l-meta { display: flex; gap: 14px; font-size: 12px; color: #999; }
.rd-empty { color: #999; font-size: 13px; padding: 26px 0; text-align: center; }

/* ============ 栏目页内容 · 6 列卡片网格 ============ */
.col-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
@media (max-width: 1200px) { .col-cards { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1080px) { .col-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .col-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .col-cards { grid-template-columns: repeat(2, 1fr); } }

.col-card { cursor: pointer; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid #f0f0f0; transition: all .2s;
  box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .18); }
.col-card:hover { transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 16px 30px -14px rgba(248, 100, 66, .45); }
.cc-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ececec; }
.cc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.col-card:hover .cc-cover img { transform: scale(1.08); }
.cc-play { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .96); color: var(--primary); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22); opacity: 0; transform: scale(.8); transition: all .18s; }
.col-card:hover .cc-play { opacity: 1; transform: scale(1); }
.cc-dur { position: absolute; left: 8px; bottom: 8px; font-size: 10.5px; color: #fff;
  background: rgba(0, 0, 0, .62); padding: 1px 7px; border-radius: 999px; letter-spacing: .3px; }
.cc-tx { padding: 10px 12px 12px; }
.cc-tx h3 { font-size: 13.5px; font-weight: 600; color: #333; line-height: 1.45; height: 39px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.col-card:hover h3 { color: var(--primary); }
.cc-meta { display: flex; align-items: center; margin-top: 7px; font-size: 11.5px; color: #999; }
.cc-meta .cc-v { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cc-type { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: #5564e8; background: #eef1ff; }
.cc-type.audio { color: var(--primary); background: #fff0ea; }
.col-cards .err-box { grid-column: 1 / -1; }

/* ============ 账号注册/登录弹窗（手机号+密码） ============ */
.acc-box { min-height: 300px; }
.acc-tabs { display: flex; gap: 10px; margin-bottom: 18px; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
.acc-tab { padding: 6px 4px; font-size: 15px; color: #999; font-weight: 700; position: relative; transition: color .15s; }
.acc-tab + .acc-tab { margin-left: 22px; }
.acc-tab.on { color: var(--primary); }
.acc-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 3px;
  border-radius: 2px; background: var(--primary); }
.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-input { height: 44px; border: 1.5px solid #e6e6ea; border-radius: 10px; padding: 0 16px;
  font-size: 15px; color: #333; background: #fafbfc; transition: border .15s; letter-spacing: .5px; }
.acc-input:focus { border-color: var(--primary); background: #fff; }
.acc-btn { height: 46px; border-radius: 23px; font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: 6px;
  background: linear-gradient(120deg, #ff8a5c, #f86442); box-shadow: 0 8px 20px -8px rgba(248, 100, 66, .75); transition: all .15s; }
.acc-btn:hover { transform: translateY(-1px); }
.acc-btn[disabled] { opacity: .6; }
.acc-note { font-size: 12px; color: #999; line-height: 1.9; background: #fff8f4; border: 1px dashed #ffd9c4;
  border-radius: 8px; padding: 8px 12px; }
.acc-note b { color: var(--primary); }
.acc-tip { font-size: 11.5px; color: #b0b0b6; line-height: 1.8; text-align: center; }

/* 验证码输入行 + 获取按钮 / 忘记密码链接 */
.acc-code-row { display: flex; gap: 10px; }
.acc-code-row .acc-input { flex: 1; min-width: 0; }
.acc-code-btn { flex: 0 0 132px; height: 44px; border-radius: 10px; border: 1px solid var(--primary);
  color: var(--primary); background: #fff6f1; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.acc-code-btn:hover { background: var(--primary); color: #fff; }
.acc-code-btn[disabled] { border-color: #ddd; color: #aaa; background: #f5f5f5; cursor: default; }
.acc-link { text-align: right; margin-top: 2px; }
.acc-link a { font-size: 13px; color: var(--primary); }
.acc-link a:hover { text-decoration: underline; }

/* 强制修改密码锁定层（默认密码登录后，未改密前不可关闭） */
.pwd-lock { position: fixed; inset: 0; z-index: 500; background: rgba(15, 20, 30, .72);
  display: none; align-items: center; justify-content: center; padding: 20px; }
.pwd-lock-card { width: 420px; max-width: 94vw; background: #fff; border-radius: 16px;
  padding: 30px 30px 24px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); }
.pwd-lock-card h3 { font-size: 18px; font-weight: 800; color: #1f2937; margin-bottom: 8px; }
.pwd-lock-tip { font-size: 13px; color: #888; line-height: 1.9; margin-bottom: 18px; }
.pwd-lock-tip b { color: var(--primary); }
.pwd-lock-card .acc-input { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.pwd-lock-card .acc-btn { width: 100%; }
.pwd-lock-err { min-height: 18px; font-size: 12.5px; color: #ef4444; margin-top: 8px; text-align: center; }
.acc-check { min-height: 16px; font-size: 12px; margin: -6px 0 0 2px; }
.acc-check.ok { color: #0a8f5c; }
.acc-check.err { color: #ef4444; }

/* ============ 频道条 v2：栏目磁贴导航（栏目页/内容页等非首页） ============ */
.cols-bar { border-top: 1px solid #f0f0f0; background: linear-gradient(180deg, #fff, #fbfbfc); }
.cols-in { max-width: 1200px; margin: 0 auto; padding: 12px 16px 14px; display: flex; gap: 10px;
  align-items: center; overflow-x: auto; scrollbar-width: thin; }
.cols-in .cb-tip { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #999;
  background: #f3f4f6; padding: 6px 10px; border-radius: 8px; }
.cnav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
  background: #fff; border: 1px solid #eeeeee; border-radius: 999px; transition: all .16s;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .06); }
.cnav:hover { border-color: rgba(248, 100, 66, .45); box-shadow: 0 6px 14px -6px rgba(248, 100, 66, .35); transform: translateY(-1px); }
.cnav.on { border-color: var(--primary); background: #fff4ee; }
.cnav-i { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; font-style: normal;
  font-size: 13px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffb25c, #f86442); }
.cnav-i.hm { background: linear-gradient(135deg, #4ade80, #10b981); }
.cnav.srch .cnav-i { background: linear-gradient(135deg, #93c5fd, #3b82f6); }
.cnav-t { font-size: 13.5px; color: #333; font-weight: 600; white-space: nowrap; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; }
.cnav-c { font-style: normal; font-size: 10.5px; color: #bbb; font-weight: 600; white-space: nowrap; }
.cnav.on .cnav-t { color: var(--primary); }

/* ============ PC 个人中心页 ============ */
.mine-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #ff9a5c, #f86442 65%, #e6542e);
  border-radius: 14px; padding: 22px 26px; color: #fff; box-shadow: 0 12px 26px -14px rgba(248, 100, 66, .7); }
.mc-ava { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mc-info { flex: 1; min-width: 0; }
.mc-name { font-size: 20px; font-weight: 800; }
.mc-sub { font-size: 12.5px; opacity: .92; margin-top: 4px; }
.mc-logout { border: 1px solid rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .12);
  border-radius: 999px; padding: 7px 18px; font-size: 12.5px; cursor: pointer; }
.mc-logout:hover { background: rgba(255, 255, 255, .25); }
.mine-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 16px 0; }
.ms { background: #fff; border-radius: 12px; text-align: center; padding: 14px 6px; box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .15); }
.ms-n { font-size: 22px; font-weight: 800; color: var(--primary); }
.ms-k { font-size: 12px; color: #999; margin-top: 3px; }
.mine-quick { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.mq { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .14); transition: all .16s; }
.mq:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(248, 100, 66, .4); }
.mq-ic { font-style: normal; font-size: 20px; color: var(--primary); }
.mq span { font-size: 14px; font-weight: 700; color: #333; }
.mine-sec-h { display: flex; align-items: center; margin: 6px 0 12px; position: relative; }
.mine-sec-h h3 { font-size: 17px; font-weight: 800; padding-left: 12px; }
.mine-sec-h h3::before { content: ''; position: absolute; left: 0; top: 5px; width: 4px; height: 16px;
  border-radius: 2px; background: var(--primary); }
.mh-tip { margin-left: auto; font-size: 12px; color: #bbb; }
.mine-vips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.mv { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .12); }
.mv-n { font-size: 14px; font-weight: 700; color: #333; }
.mv-e { font-size: 12px; color: #999; }
.mv-perm { color: #b3770a; background: #fff3d6; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.mine-empty { background: #fff; border: 1px dashed #e2e2e6; color: #999; font-size: 13px;
  border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 18px; }
.mine-empty a { color: var(--primary); }
.mine-hists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.mh { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 10px 12px;
  cursor: pointer; box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .12); transition: all .16s; }
.mh:hover { box-shadow: 0 10px 22px -12px rgba(248, 100, 66, .5); transform: translateY(-2px); }
.mh-cv { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #eee; flex: 0 0 52px; }
.mh-cv img { width: 100%; height: 100%; object-fit: cover; }
.mh-tx { flex: 1; min-width: 0; }
.mh-t { font-size: 13.5px; font-weight: 700; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mh-m { display: flex; gap: 12px; font-size: 11.5px; color: #999; margin-top: 4px; }
.mh-play { border: 0; border-radius: 999px; background: #fff0ea; color: var(--primary); font-size: 12px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.mh-play:hover { background: var(--primary); color: #fff; }
/* 个人中心快捷项图标（SVG 线性，随主题橙） */
.mq-ic svg { width: 20px; height: 20px; display: block; }

/* =====================================================
   ★ 头部 v3 优化：与内容区同宽(1200)自适应、导航下划线动效、搜索框宽度协调、图标悬浮效果
   ===================================================== */
.site-header .hdr-in { max-width: 1200px; height: 74px; padding: 0 20px; display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.site-header .logo { flex: 0 0 auto; margin-right: 30px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.site-header .logo:hover .lg-tx { color: var(--primary); }

/* 导航：占据中间弹性区(靠左对齐)，下划线 hover/on 动效，不跳动(恒定字重) */
.site-header .hdr-nav { flex: 1 1 auto; display: flex; align-items: center; gap: 32px; min-width: 0; margin-right: 20px; }
.site-header .hdr-nav a { font-size: 16px; font-weight: 500; padding: 26px 0 24px; }
.site-header .hdr-nav a::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 0; height: 3px; border-radius: 3px; background: var(--primary); transition: width .22s ease; }
.site-header .hdr-nav a:hover::after, .site-header .hdr-nav a.on::after { width: 100%; }
.site-header .hdr-nav a.on { border-bottom: 0; padding-bottom: 24px; font-weight: 500; }

/* 搜索框：固定弹性宽(与导航同区不越界)，聚焦描边高亮 */
.site-header .hdr-search { flex: 0 1 400px; max-width: 440px; min-width: 230px; justify-content: flex-end; margin: 0 22px 0 0; }
.hdr-search { height: 40px; transition: box-shadow .15s, border-color .15s; }
.hdr-search input, .hdr-search button { height: 40px; }
.hdr-search input { border-color: #ececec; font-size: 14px; }
.hdr-search:focus-within { box-shadow: 0 6px 18px -8px rgba(248, 100, 66, .45); border-radius: 20px; }
.hdr-search:focus-within input { border-color: var(--primary); }

/* 右侧功能图标：hover 圆底 + 图标轻浮 */
.site-header .hdr-right { gap: 6px; height: 68px; flex: 0 0 auto; padding-left: 4px; }
.hri { position: relative; border-radius: 12px; min-width: 58px; padding: 4px 8px; gap: 5px; transition: color .15s, background .15s, transform .15s; }
.hri svg { transition: transform .16s ease; }
.hri:hover { color: var(--primary); background: #fff3ec; transform: translateY(-1px); }
.hri:hover svg { transform: translateY(-1px) scale(1.07); }
.hri-vip, .hri-redeem { min-width: 56px; padding: 4px 8px; border: 0; border-radius: 12px; background: none; height: auto; }
.hri-vip:hover, .hri-redeem:hover { background: #fff3ec; }

/* ============ 小程序二维码弹窗：内容绝对居中 ============ */
.mpqr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2px 4px 0; }
.mpqr-img { width: 200px; height: 200px; border: 1px solid #f0f0f0; border-radius: 16px; padding: 8px;
  background: #fff; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .28); margin: 0 auto; display: block; }
.mpqr-box .mpqr-t { font-size: 14px; color: #333; font-weight: 800; margin-top: 16px; }
.mpqr-box .mpqr-s { font-size: 12px; color: #999; margin-top: 7px; line-height: 1.9; }

/* =====================================================
   ★ 头部 v4：搜索框贴近左侧导航（排行等），右侧图标组仍贴最右
   ===================================================== */
.site-header .hdr-nav { flex: 0 1 auto; margin-right: 22px; gap: 26px; }
.site-header .hdr-search { flex: 0 1 420px; max-width: 460px; margin: 0; }
.site-header .hdr-right { margin-left: auto; }

/* ============ 视频内容 · PC 端视频播放页（视频播放器 + 选集） ============ */
.vd-page { max-width: 880px; margin: 0 auto; }
.vd-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .45); }
.vd-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vd-play-ic {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; font-size: 26px; line-height: 1; padding: 0 0 0 6px;
  background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center;
  transition: .2s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vd-play-ic:hover { background: var(--primary); }
.vd-locked { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.vd-lock-bg { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.55); display: block; }
.vd-lock-mask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; padding: 16px; }
.vd-lock-ic { font-size: 40px; line-height: 1; }
.vd-lock-tx { font-size: 15px; line-height: 1.7; }
.vd-head { margin-top: 22px; background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 22px 26px; }
.vd-head .dt-title { font-size: 22px; }
.vd-intro-bar { margin-top: 16px; display: flex; align-items: center; }
.vd-dir { margin-bottom: 30px; }
/* 视频选集「正在播放」标记用 ▶（音频目录用的是 ♪） */
.vd-list li.playing .di-no i::before { content: '▶'; font-size: 11px; }

/* ============ 内容页 · 操作栏（目录 / 点赞 / 评论 / 收藏） ============ */
.ct-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 18px;
  background: var(--card); border-radius: 14px; padding: 10px 14px;
}
.ct-act {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 62px; padding: 7px 12px; border-radius: 10px;
  color: var(--tx2); transition: background .15s, color .15s;
}
.ct-act:hover { background: #faf7f6; color: var(--primary); }
.ct-act.on { color: var(--primary); background: #fff2ed; }
.ct-ico { font-size: 19px; line-height: 1; font-style: normal; }
.ct-ico-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.ct-cnt {
  position: absolute; top: -6px; right: -18px;
  font-size: 11px; font-weight: 700; color: var(--primary); line-height: 1.2;
}
.ct-txt { font-size: 12px; line-height: 1.2; }
/* 评论：简洁气泡图标（描边气泡 + 左下角尾巴），颜色跟随 currentColor 以支持选中态 */
.ct-cmtico { position: relative; width: 17px; height: 14px; border: 2px solid currentColor; border-radius: 5px; }
.ct-cmtico::after {
  content: ''; position: absolute; left: 3px; bottom: -6px;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 6px solid currentColor;
}
.ct-act.off { opacity: .45; cursor: default; }
.ct-act.off:hover { background: none; color: var(--tx2); }

/* ============ 内容页 · 目录展开/收起 ============ */
.dir-ol.is-collapsed li:nth-child(n+9) { display: none; }
.dir-foot { margin-top: 10px; text-align: center; }
.dir-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 22px; border-radius: 999px; font-size: 13px;
  color: var(--primary); background: #fff4f0; border: 1px solid #ffd9cd;
  transition: background .15s;
}
.dir-toggle:hover { background: #ffe9e1; }
.dir-toggle em { font-style: normal; color: var(--tx3); font-size: 12px; }
.dir-toggle .dt-arrow { font-style: normal; font-size: 12px; transition: transform .2s; display: inline-block; }
.dir-toggle.open .dt-arrow { transform: rotate(180deg); }

/* ============ 内容页 · 评论弹层 ============ */
.cmt-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 190;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cmt-panel {
  width: 580px; max-width: 94vw; max-height: 76vh; background: #fff;
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .5);
}
.cmt-hd { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f2f2f2; }
.cmt-hd-t { font-size: 15.5px; font-weight: 800; color: var(--tx); }
.cmt-close { margin-left: auto; font-style: normal; color: #b6b6b6; font-size: 17px; cursor: pointer; padding: 0 4px; }
.cmt-close:hover { color: var(--primary); }
.cmt-list { flex: 1; min-height: 120px; overflow-y: auto; padding: 6px 20px 10px; }
.cmt { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px dashed #f2f2f2; }
.cmt:last-child { border-bottom: none; }
.cmt-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; overflow: hidden;
  background: #f0f0f0; display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 15px;
}
.cmt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: center; gap: 10px; }
.cmt-nick { font-size: 13px; color: #333; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 220px; }
.cmt-time { font-size: 11.5px; color: var(--tx3); margin-left: auto; flex: 0 0 auto; }
.cmt-content { font-size: 13.5px; color: var(--tx2); line-height: 1.75; margin-top: 4px; word-break: break-word; }
.cmt-empty { text-align: center; color: var(--tx3); font-size: 13px; padding: 34px 0; }
.cmt-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #f2f2f2; background: #fcfcfc; }
.cmt-input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; font-size: 13.5px;
  border: 1px solid #e6e6e6; border-radius: 10px; background: #fff; color: var(--tx);
}
.cmt-input:focus { border-color: var(--primary); }
.cmt-submit { flex: 0 0 auto; padding: 9px 20px; border-radius: 10px; }

/* ============ 内容页 · 续播条 & 目录进度标注（每个内容独立进度） ============ */
.resume-row {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  background: #fff6f2; border: 1px solid #ffdccf; border-radius: 12px;
  padding: 12px 16px; cursor: pointer; transition: background .15s;
}
.resume-row:hover { background: #ffeee7; }
.resume-row .rs-ico { color: var(--primary); font-size: 15px; }
.resume-row .rs-tx { font-size: 13.5px; color: #7a4a38; }
.resume-row .rs-tx b { color: var(--primary); font-weight: 800; margin: 0 2px; }
.resume-row .rs-tx i { font-style: normal; color: #bd8f7b; font-size: 12px; margin-left: 8px; }
.resume-row .rs-go { margin-left: auto; color: var(--primary); font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }

/* 目录每集进度百分比 / 最近播放章节标记 */
.dir-ol .di-prog {
  flex: 0 0 auto; margin-left: 6px; font-size: 11.5px; color: var(--primary);
  background: #fff2ed; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.dir-ol .di-last {
  flex: 0 0 auto; margin-left: 6px; font-size: 11px; color: #fff;
  background: var(--primary); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.dir-ol li.last { background: #fff8f5; }
.dir-ol li.last .di-name { color: var(--primary); font-weight: 600; }