/* ============================================================
   课程回播 · 奢华杂志风
   字体: Fraunces (展示衬线) + Instrument Sans (正文) + JetBrains Mono
   ============================================================ */
:root{
  --bg:#080604;
  --bg2:#0e0b08;
  --card:#12100c;
  --card2:#171410;
  --line:rgba(232,196,90,.10);
  --line2:rgba(232,196,90,.20);
  --txt:#f2ece0;
  --sub:#a89d8c;
  --dim:#6d6355;
  --gold:#e0b95c;
  --gold2:#c99a35;
  --gold-glow:rgba(224,185,92,.28);
  --acc:#4fd1a0;
  --red:#e0655f;
  --r:16px;
  --disp:'Fraunces',Georgia,'Songti SC',serif;
  --body:'Instrument Sans','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font:15px/1.68 var(--body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
/* 纸质颗粒质感 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(8,6,4,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-ico{width:27px;height:27px;color:var(--gold)}
/* ★ 阿奇 logo（图片版，圆角 + 微光） */
.brand-logo{
  width:28px;height:28px;
  border-radius:8px;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
  box-shadow:0 2px 8px -2px rgba(224,185,92,.45);
  border:1px solid rgba(224,185,92,.28);
}
.brand span{
  font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:.4px;
  background:linear-gradient(135deg,#f0d78f,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topnav{display:flex;gap:3px}
.topnav a{
  padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--sub);transition:.18s;letter-spacing:.2px;
}
.topnav a:hover{color:var(--txt);background:rgba(224,185,92,.06)}
.topnav a.active{color:var(--gold);background:rgba(224,185,92,.09)}
.searchbox{
  margin-left:auto;display:flex;align-items:center;gap:9px;
  background:rgba(224,185,92,.045);border:1px solid var(--line2);
  border-radius:11px;padding:9px 13px;min-width:260px;transition:.2s;
}
.searchbox:focus-within{
  border-color:rgba(224,185,92,.5);
  box-shadow:0 0 0 3px rgba(224,185,92,.07);background:rgba(224,185,92,.07);
}
.searchbox svg{width:16px;height:16px;color:var(--dim);flex:0 0 16px}
.searchbox input{background:none;border:0;outline:none;color:var(--txt);width:100%;font-size:13.5px}
.searchbox input::placeholder{color:var(--dim)}

/* ============ 列表区 ============ */
main{padding:54px 0 80px}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:26px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.sec-head h2{
  font-family:var(--disp);font-size:23px;font-weight:600;letter-spacing:-.2px;
}
.sec-head h2::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);vertical-align:middle;margin-right:11px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 17px;border-radius:30px;font-size:12.5px;font-weight:600;
  color:var(--sub);background:rgba(224,185,92,.04);
  border:1px solid var(--line2);transition:.18s;letter-spacing:.2px;
}
.chip:hover{color:var(--txt);border-color:rgba(224,185,92,.42)}
.chip.on{
  color:#1d1400;background:linear-gradient(135deg,#f0d78f,var(--gold2));
  border-color:transparent;font-weight:700;
}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;
}

/* ============ 课程卡 ============ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.24s;
  display:flex;flex-direction:column;position:relative;
}
.card::after{
  content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  border:1px solid transparent;transition:.24s;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.9);
}
.card:hover::after{border-color:rgba(224,185,92,.4)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0806}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.5s;opacity:1}
.card:hover .thumb img{transform:scale(1.05);opacity:1}
.thumb-layer{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,4,2,.42),transparent 40%)}
.card:hover .card:hover .dur{
  position:absolute;left:10px;bottom:10px;
  font-size:11px;font-weight:700;font-family:var(--mono);
  background:rgba(6,4,2,.86);border-radius:6px;padding:3px 8px;
  color:#e8d7ac;letter-spacing:.4px;border:1px solid var(--line);
}
.cat-tag{
  position:absolute;left:10px;top:10px;
  font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:5px;padding:3px 9px;
  background:rgba(6,4,2,.8);backdrop-filter:blur(5px);
  color:var(--gold);border:1px solid rgba(224,185,92,.35);
}
.card-body{padding:17px 19px 19px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-title{
  font-family:var(--disp);font-size:16.5px;font-weight:600;line-height:1.42;
  letter-spacing:-.1px;
}
.card-desc{
  font-size:12.5px;color:var(--sub);line-height:1.68;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:11px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
}
.card-meta .who{display:flex;align-items:center;gap:7px;color:var(--sub);font-weight:600}
.avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:11px;font-weight:700;color:#1d1400;
  background:linear-gradient(135deg,#f0d78f,var(--gold2));
}
.card-meta .date{margin-left:auto;font-family:var(--mono);font-size:10.5px}

/* ============ 空状态 ============ */
.empty{text-align:center;padding:80px 20px;color:var(--dim)}
.empty svg{width:46px;height:46px;opacity:.42;margin:0 auto 16px}
.empty p{font-family:var(--disp);font-size:17px;color:var(--sub);margin-bottom:7px}
.empty span{font-size:12.5px}

/* ============ 播放弹层 ============ */
.player-mask{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,3,2,.93);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:fadeIn .24s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.player-card{
  position:relative;width:min(96vw,960px);max-height:94vh;overflow:auto;
  background:var(--card);border:1px solid rgba(224,185,92,.24);border-radius:20px;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.98);
  animation:popIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.982)}to{opacity:1;transform:none}}
.player-close{
  position:absolute;right:14px;top:14px;z-index:5;
  width:36px;height:36px;border-radius:10px;
  background:rgba(8,6,4,.7);border:1px solid var(--line2);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:.18s;
}
.player-close:hover{background:rgba(224,101,95,.2);border-color:rgba(224,101,95,.55)}
.player-close svg{width:17px;height:17px;color:var(--sub)}
.player-close:hover svg{color:var(--red)}

.player-body{background:#000}
.player-body video{width:100%;max-height:58vh;display:block;background:#000;object-fit:contain}

/* ★ 全屏：交給瀏覽器原生處理，不強制尺寸（避免渲染異常/黑屏） */
.player-body video:fullscreen,
.player-body video:-webkit-full-screen{
  max-height:none !important;
  max-width:none !important;
  object-fit:contain !important;
  background:#000;
}

/* ---- 视频下方：课程信息 ---- */
.player-info{padding:24px 28px 28px}

.pi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.pi-main{min-width:0;flex:1}
.pi-main h3{
  font-family:var(--disp);font-size:20px;font-weight:600;
  line-height:1.4;letter-spacing:-.3px;margin-bottom:10px;
}
.pi-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}
.pi-meta .dot{opacity:.35}
.pi-meta .who{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--txt)}
.pi-avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:11px;font-weight:700;color:#1d1400;
  background:linear-gradient(135deg,#f0d78f,var(--gold2));
}
.pi-cat{
  flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 13px;border-radius:20px;
  color:var(--gold);background:rgba(224,185,92,.1);
  border:1px solid rgba(224,185,92,.34);
}

.pi-stats{
  display:flex;gap:30px;flex-wrap:wrap;
  padding:15px 19px;margin-bottom:20px;
  background:rgba(224,185,92,.035);border:1px solid var(--line);border-radius:12px;
}
.pi-stats>div{display:flex;flex-direction:column;gap:3px}
.pi-stats b{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold)}
.pi-stats span{font-size:10.5px;color:var(--dim);letter-spacing:.4px}

.pi-label{
  display:block;font-size:11px;font-weight:700;color:var(--sub);
  letter-spacing:1.6px;text-transform:uppercase;margin-bottom:11px;
}
.pi-label::after{
  content:'';display:block;width:22px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);margin-top:7px;
}
.pi-desc{font-size:13.5px;color:var(--sub);line-height:1.82}
.pi-desc-wrap{margin-bottom:22px}

.chapters{list-style:none;display:flex;flex-direction:column;gap:3px}
.chapters li{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:10px;font-size:13.5px;
  color:var(--sub);transition:.16s;border:1px solid transparent;
}
.chapters li:hover{
  background:rgba(224,185,92,.05);color:var(--txt);
  border-color:var(--line2);
}
.chapters .idx{
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--gold);flex:0 0 28px;
}
.chapters .ct{flex:1}
.chapters .ctime{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ============ 页脚 ============ */
.foot{
  border-top:1px solid var(--line);padding:28px 0;
  background:rgba(224,185,92,.015);
}
.foot .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.foot-brand{font-family:var(--disp);font-size:14px;color:var(--gold);letter-spacing:.3px}
.foot .dot{opacity:.4}

/* ============================================================
   响应式适配（按断点从小到大排列，后者覆盖前者）
   xs<380 | sm 380-639 | md 640-899 | lg 900-1199 | xl>=1200 | xxl>=1600
   ============================================================ */
@media (max-width:379px){
  .wrap{padding:0 12px}
  .topbar .wrap{padding:10px 12px;gap:9px}
  .brand span{font-size:15px}
  .brand-ico{width:26px;height:26px}
  .brand-logo{width:26px;height:26px;border-radius:7px}
.sec-head h2{font-size:17px}
  .chip{padding:5px 12px;font-size:11.5px}
  .card-title{font-size:15px}
  .pi-main h3{font-size:15.5px}
  .pi-stats b{font-size:12px}
  .chapters li{font-size:12.5px;padding:9px 10px}
}
@media (max-width:639px){
  .wrap{padding:0 15px}

  /* 顶栏换行 */
  .topbar .wrap{
    height:auto;flex-wrap:wrap;gap:11px;
    padding:12px 15px;
  }
  .brand span{font-size:16px}
  .searchbox{
    order:3;width:100%;flex:1 0 100%;
    padding:8px 12px;
  }

  /* 主推区紧凑 */
  
  
  
  /* 按钮全宽堆叠 */
/* 列表区 */
  main{padding:30px 0 54px}
  .sec-head{margin-bottom:18px;padding-bottom:13px;gap:12px}
  .sec-head h2{font-size:18px}
  .sec-head h2::before{width:4px;height:4px;margin-right:9px}
  .filters{gap:6px}
  .chip{padding:6px 14px;font-size:12px}
  .grid{grid-template-columns:1fr;gap:15px}

  /* 卡片 */
  .card-body{padding:15px 16px 16px}
  .card-title{font-size:15.5px}
  .card-desc{font-size:12.5px}
    
  /* 播放器 */
  .player-mask{padding:8px}
  .player-card{max-height:97vh;border-radius:14px}
  .player-body video{max-height:42vh}
  .player-close{width:32px;height:32px;right:10px;top:10px}
  .player-close svg{width:15px;height:15px}
  .player-info{padding:16px 16px 20px}
  .pi-top{flex-direction:column;gap:9px;margin-bottom:14px}
  .pi-main h3{font-size:16.5px;line-height:1.36}
  .pi-cat{align-self:flex-start;font-size:10px;padding:4px 11px}
  .pi-stats{
    gap:0;justify-content:space-between;padding:12px 14px;margin-bottom:16px;
  }
  .pi-stats>div{flex:1;align-items:center;text-align:center}
  .pi-stats b{font-size:13px}
  .pi-stats span{font-size:10px}
  .pi-desc{font-size:13px;line-height:1.76}
  .pi-desc-wrap{margin-bottom:18px}
  .pi-label{font-size:10.5px;letter-spacing:1.4px;margin-bottom:9px}
  .chapters li{padding:10px 11px;font-size:13px;gap:10px}
  .chapters .idx{flex:0 0 24px;font-size:10.5px}
  .chapters .ctime{font-size:10.5px}

  /* 页脚 */
  .foot{padding:22px 0}
  .foot .wrap{font-size:12px;gap:8px}
}
@media (max-width:899px){
  /* 主推区改单列，封面在上 */
  /* 顶栏：保留音频库入口，隐藏「全部课程」（当前页就是它） */
  .topnav{display:flex}
  .topnav a.active{display:none}       /* 隐藏「全部课程」 */
  .topnav a{padding:6px 11px;font-size:12.5px}
  .searchbox{min-width:0;flex:1;margin-left:auto}

  /* 列表 2 列 */
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}

  /* 播放器信息区 */
  .pi-main h3{font-size:18px}
  .player-card{width:min(98vw,820px)}
}
@media (max-width:1199px){
  .wrap{max-width:100%;padding:0 22px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
}
@media (min-width:1200px){
  .wrap{max-width:1240px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px}
}
@media (min-width:1600px){
  .wrap{max-width:1360px}
  }
@media (max-height:500px) and (orientation:landscape){
  .player-body video{max-height:64vh}
}
@media (hover:none){
  /* 触摸屏：去掉 hover 效果，避免点击残留 */
  .card:hover{transform:none}
  .card:hover .thumb img{transform:none}
  .card:hover::after{border-color:transparent}
  .card:hover   .card:hover   
  

  /* 触摸目标至少 44px */
  .chip{min-height:36px;display:inline-flex;align-items:center}
  .chapters li{padding:12px}
}
@media print{
  .topbar,.filters,.searchbox,.player-mask{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   ★ 推荐课程大卡片
   ============================================================ */
#featureHero{padding:28px 0 4px}

.feat-wrap{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(224,185,92,.26);
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9);
  cursor:pointer;transition:.26s;
  background:#0a0806;
}
.feat-wrap:hover{
  transform:translateY(-3px);
  border-color:rgba(224,185,92,.45);
  box-shadow:0 38px 90px -34px rgba(0,0,0,.95);
}
.feat-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;min-height:330px;
}
.feat-left{
  position:relative;z-index:2;padding:36px 34px;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(6,4,2,.97) 0%,rgba(6,4,2,.86) 55%,rgba(6,4,2,.35) 100%);
}
.feat-badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:#1d1400;background:linear-gradient(135deg,#f2d98f,#c99a35);
  border-radius:20px;padding:5px 13px;margin-bottom:16px;
  box-shadow:0 4px 16px -4px rgba(224,185,92,.8);
}
.feat-badge svg{width:12px;height:12px}
.feat-title{
  font-family:var(--disp);font-size:clamp(20px,2.6vw,29px);font-weight:700;
  line-height:1.3;letter-spacing:-.3px;margin-bottom:13px;
  background:linear-gradient(160deg,#fff9ec,#e8d7ac 50%,#e0b95c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feat-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin-bottom:14px}
.feat-meta .av{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#1d1400;
  background:linear-gradient(135deg,#f0d78f,#c99a35);
}
.feat-meta .nm{color:var(--txt);font-weight:700}
.feat-meta .sp{opacity:.35}
.feat-desc{
  font-size:13px;color:var(--sub);line-height:1.75;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.feat-go{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:11px 24px;border-radius:30px;font-size:13.5px;font-weight:700;
  color:#1d1400;background:linear-gradient(135deg,#f2d98f,#c99a35);
  box-shadow:0 8px 26px -8px rgba(224,185,92,.8);transition:.2s;
}
.feat-wrap:hover .feat-go{transform:translateX(2px);box-shadow:0 12px 32px -8px rgba(224,185,92,.95)}
.feat-go svg{width:16px;height:16px}

.feat-right{position:relative;overflow:hidden;background:#080604}
.feat-right img{width:100%;height:100%;object-fit:cover;transition:.5s;opacity:.95}
.feat-wrap:hover .feat-right img{transform:scale(1.05);opacity:1}
.feat-right::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,4,2,.9),transparent 42%);
}
.feat-play{
  position:absolute;right:18px;bottom:18px;z-index:3;
  width:52px;height:52px;border-radius:50%;
  background:rgba(8,6,4,.6);backdrop-filter:blur(7px);
  border:1.5px solid rgba(224,185,92,.6);
  display:flex;align-items:center;justify-content:center;transition:.22s;
}
.feat-wrap:hover .feat-play{
  background:linear-gradient(135deg,#f2d98f,#c99a35);
  border-color:transparent;transform:scale(1.08);
}
.feat-play svg{width:20px;height:20px;color:#e0b95c;margin-left:2px}
.feat-wrap:hover .feat-play svg{color:#1d1400}

/* 响应式 */
@media (max-width:899px){
  .feat-inner{grid-template-columns:1fr;min-height:0}
  .feat-right{order:-1;aspect-ratio:16/9}
  .feat-left{padding:24px 22px 26px;background:linear-gradient(to top,rgba(6,4,2,.97),rgba(6,4,2,.7))}
  .feat-title{font-size:20px}
  .feat-desc{-webkit-line-clamp:3}
}
@media (max-width:639px){
  #featureHero{padding:16px 0 0}
  .feat-wrap{border-radius:15px}
  .feat-left{padding:18px 16px 20px}
  .feat-title{font-size:18px;margin-bottom:10px}
  .feat-badge{font-size:9.5px;padding:4px 10px;margin-bottom:12px}
  .feat-meta{font-size:12px;margin-bottom:11px}
  .feat-desc{font-size:12.5px;margin-bottom:16px}
  .feat-go{padding:10px 20px;font-size:13px}
  .feat-play{width:44px;height:44px;right:13px;bottom:13px}
  .feat-play svg{width:17px;height:17px}
}


/* 分享按钮 */
.pi-share{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(224,185,92,.08);border:1px solid rgba(224,185,92,.32);
  color:#e0b95c;cursor:pointer;transition:.18s;
}
.pi-share:hover{background:rgba(224,185,92,.18);border-color:rgba(224,185,92,.6);transform:scale(1.05)}
.pi-share:active{transform:scale(.96)}
.pi-share svg{width:16px;height:16px}
@media (max-width:639px){
  .pi-share{width:32px;height:32px;flex:0 0 32px}
  .pi-share svg{width:15px;height:15px}
}


/* 卡片分享按钮（左下角） */
.card-share{
  position:absolute;left:10px;bottom:10px;z-index:3;
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,2,.82);border:1px solid rgba(224,185,92,.35);
  color:#c9a24a;cursor:pointer;transition:.18s;
  backdrop-filter:blur(4px);
}
.card-share:hover{background:rgba(224,185,92,.9);color:#1d1400;border-color:transparent;transform:scale(1.08)}
.card-share:active{transform:scale(.94)}
.card-share svg{width:13px;height:13px}
/* 时长标签右移，避免和分享按钮重叠 */
.dur{left:44px !important}
@media (max-width:639px){
  .card-share{width:26px;height:26px}
  .card-share svg{width:12px;height:12px}
  .dur{left:42px !important}
}


/* 元信息行内的分类 + 分享按钮 */
.pi-cat-inline{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.5px;
  color:#e0b95c;background:rgba(224,185,92,.1);
  border:1px solid rgba(224,185,92,.3);
  border-radius:16px;padding:2px 10px;
  line-height:1.5;
}
.pi-share-inline{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;
  color:#c9a24a;background:transparent;
  border:1px solid rgba(224,185,92,.3);
  border-radius:16px;padding:3px 10px;
  cursor:pointer;transition:.16s;line-height:1.4;
}
.pi-share-inline:hover{
  background:rgba(224,185,92,.14);
  border-color:rgba(224,185,92,.6);
  color:#e0b95c;
}
.pi-share-inline:active{transform:scale(.96)}
.pi-share-inline svg{width:12px;height:12px;flex:0 0 12px}
.pi-share-inline span{white-space:nowrap}

/* pi-meta：单行不换行，内容可收缩 */
.pi-meta{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
.pi-meta > span{flex:0 0 auto}
.pi-meta .who{flex:0 1 auto;min-width:0}
.pi-meta .pi-share-inline{flex:0 0 auto;margin-left:2px}




/* ============================================================
   音频条（课程简介上方）
   ============================================================ */
.audio-strip{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin-bottom:16px;
  background:linear-gradient(100deg,rgba(224,185,92,.09),rgba(224,185,92,.02));
  border:1px solid rgba(224,185,92,.28);
  border-radius:13px;
}

.as-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.as-title{font-size:12.5px;font-weight:700;color:#e0b95c;letter-spacing:.3px}
.as-sub{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-bar{
  position:relative;
  height:5px;
  background:rgba(255,255,255,.12);
  border-radius:3px;
  margin-top:6px;
  cursor:pointer;
  touch-action:none;
  transition:height .16s;
}
.as-bar:hover{ height:7px; }
.as-bar i{
  display:block;
  height:100%;
  width:var(--pct,0%);
  background:linear-gradient(90deg,#e0b95c,#f2d98f);
  border-radius:3px;
  transition:width .08s linear;
  position:relative;
}
/* 拖动圆点 */
.as-bar i::after{
  content:'';
  position:absolute;
  right:-5px; top:50%;
  width:11px; height:11px;
  margin-top:-5.5px;
  border-radius:50%;
  background:#f4d77a;
  box-shadow:0 0 0 2px rgba(10,8,6,.9), 0 0 8px rgba(224,185,92,.7);
  opacity:0;
  transition:opacity .16s;
  pointer-events:none;
}
.as-bar:hover i::after,
.as-bar.dragging i::after{ opacity:1; }
.as-bar.dragging{ height:7px; }

.as-btn{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);
  color:#c9a24a;cursor:pointer;transition:.18s;
}
.as-btn:hover{background:rgba(224,185,92,.16);border-color:rgba(224,185,92,.55);color:#e0b95c;transform:translateY(-1px)}
.as-btn:active{transform:scale(.94)}
.as-btn svg{width:16px;height:16px}
.as-btn:disabled{opacity:.4;cursor:not-allowed}

@media (max-width:639px){
  .audio-strip{gap:10px;padding:10px 12px;border-radius:11px}
      .as-title{font-size:12px}
  .as-sub{font-size:10.5px}
  .as-btn{flex:0 0 34px;width:34px;height:34px}
  .as-btn svg{width:15px;height:15px}
}


/* ============================================================
   分享面板
   ============================================================ */
.sp-mask{
  position:fixed;inset:0;z-index:400;
  background:rgba(4,3,2,.82);backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;animation:spIn .22s ease;
}
@media (min-width:640px){
  .sp-mask{align-items:center;padding:20px}
}
@keyframes spIn{from{opacity:0}to{opacity:1}}

.sp-card{
  width:100%;max-width:420px;
  background:linear-gradient(170deg,#16120b,#0c0a07);
  border:1px solid rgba(224,185,92,.26);
  border-radius:20px 20px 0 0;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.95);
  padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));
  animation:spUp .28s cubic-bezier(.22,1,.36,1);
}
@media (min-width:640px){
  .sp-card{border-radius:18px;padding-bottom:22px;animation:spPop .28s cubic-bezier(.22,1,.36,1)}
}
@keyframes spUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes spPop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}

.sp-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:13px;
}
.sp-head span{font-size:15px;font-weight:800;color:var(--txt)}
.sp-close{
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);
  color:var(--sub);cursor:pointer;
}
.sp-close:hover{color:#e0655f;border-color:rgba(224,101,95,.5)}
.sp-close svg{width:15px;height:15px}

.sp-title{
  font-size:13.5px;font-weight:700;color:#e0b95c;
  margin-bottom:7px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sp-url{
  font-family:var(--mono);font-size:11px;color:var(--dim);
  background:rgba(0,0,0,.35);border-radius:8px;padding:8px 10px;
  margin-bottom:16px;word-break:break-all;line-height:1.5;
  max-height:48px;overflow:hidden;
}

.sp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:12px;
}
.sp-item{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 4px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  cursor:pointer;transition:.16s;color:var(--sub);font-size:11.5px;font-weight:600;
}
.sp-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.sp-item:active{transform:scale(.96)}
.sp-ico{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.sp-ico svg{width:22px;height:22px}
.sp-wx{background:linear-gradient(135deg,#4ecb71,#1aad19)}
.sp-qq{background:linear-gradient(135deg,#3ab6ff,#0a84ff)}
.sp-wb{background:linear-gradient(135deg,#ff6b5a,#e6162d)}
.sp-cp{background:rgba(224,185,92,.16);color:#e0b95c;border:1px solid rgba(224,185,92,.4)}

.sp-more{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:12px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);
  color:var(--sub);cursor:pointer;transition:.16s;
}
.sp-more:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.sp-more svg{width:16px;height:16px}

@media (max-width:379px){
  .sp-grid{gap:6px}
  .sp-item{padding:10px 2px;font-size:11px}
  .sp-ico{width:38px;height:38px}
  .sp-ico svg{width:20px;height:20px}
}

/* ============ 详情页顶栏（独立一行，不遮挡） ============ */
.pd-bar{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  background:rgba(12,10,7,.96);
  border-bottom:1px solid var(--line2);
  border-radius:20px 20px 0 0;
}
/* 返回首页：明显按钮 */

/* 品牌 */
.pd-brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pd-brand svg{width:22px;height:22px;color:var(--gold)}
.pd-brand span{
  font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.3px;
  background:linear-gradient(135deg,#f0d78f,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 搜索 */
.pd-search{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);
  border-radius:10px;padding:7px 12px;max-width:260px;flex:1;
}
.pd-search svg{width:15px;height:15px;color:var(--dim);flex:0 0 auto}
.pd-search input{
  border:0;background:transparent;outline:0;color:var(--txt);
  font-size:13px;width:100%;min-width:0;
}
.pd-search input::placeholder{color:var(--dim)}
/* 关闭按钮：正常流式，在顶栏内 */


@media (max-width:640px){
  .pd-bar{border-radius:14px 14px 0 0;padding:10px 12px;gap:9px}
  .pd-brand span{display:none}
  .pd-search{max-width:none}
  .pd-search input{font-size:12.5px}
}

/* ============================================================
   音频唱片播放按钮 —— 封面图版（播放旋转 / 暂停停止）
   ============================================================ */
.as-play{
  position:relative;
  flex:0 0 48px;
  width:48px;height:48px;
  border-radius:50%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s;
}
.as-play:hover{ transform:scale(1.06); }
.as-play:active{ transform:scale(.95); }

/* ---- 唱片本体 = 封面图 ---- */
.disc{
  position:absolute; inset:0;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-image:url('images/disc-1.png');   /* 回退 */
  background-image:image-set(url('images/disc-1.webp') type('image/webp'),
                             url('images/disc-1.png') type('image/png'));
  box-shadow:
    0 0 0 1px rgba(224,185,92,.45),
    0 3px 10px rgba(0,0,0,.75),
    0 0 14px rgba(224,185,92,.18);
  will-change:transform;
}
/* 唱片旋转：动画常驻，用 play-state 控制播放/暂停，暂停时保留当前角度不跳变 */
.as-play .disc{
  animation:discSpin 4s linear infinite;
  animation-play-state:paused;
}
.as-play.playing .disc{
  animation-play-state:running;
}
@keyframes discSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ---- 唱片反光（增强立体感，随唱片一起转）---- */
.disc-shine{
  position:absolute; inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.03) 22%,
    rgba(255,255,255,0) 48%,
    rgba(255,255,255,.04) 72%,
    rgba(255,255,255,.12) 100%);
  pointer-events:none;
}

/* ---- 中心孔（黑胶轴孔）---- */
.disc-hole{
  position:absolute;
  left:50%; top:50%;
  width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#0a0806;
  box-shadow:
    inset 0 0 2px rgba(0,0,0,.95),
    0 0 0 1.5px rgba(224,185,92,.35);
}

/* ---- 播放三角（暂停时居中显示）---- */
.disc-play-ico{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:1;
  transition:opacity .2s;
}
.disc-play-ico svg{
  width:17px; height:17px;
  color:#fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.95))
         drop-shadow(0 0 6px rgba(224,185,92,.6));
  margin-left:2px;
}
.disc-play-ico-play{ display:block !important; }
.disc-play-ico-pause{ display:none !important; }
.as-play.playing .disc-play-ico-play{ display:none !important; }
.as-play.playing .disc-play-ico-pause{ display:block !important; }

/* 旧的纹路/标签元素隐藏（保留 DOM 兼容）*/
.disc-groove, .disc-label{ display:none; }

/* ---- 手机端适配 ---- */
@media (max-width:640px){
  .as-play{ flex:0 0 44px; width:44px; height:44px; }
  .disc-play-ico svg{ width:15px; height:15px; }
  .disc-hole{ width:8px; height:8px; margin:-4px 0 0 -4px; }
}

/* ---- 唱片封面：自定义图 ---- */
.disc.cover-custom,
.ma-disc.cover-custom{ background-size:cover !important; background-position:center !important; }

/* ---- 唱片封面：随机轮流 ---- */
.disc.cover-1{ background-image:url('images/disc-1.png'); }
.disc.cover-2{ background-image:url('images/disc-2.png'); }
.disc.cover-3{ background-image:url('images/disc-3.png'); }

/* ---- 视频卡片播放按钮（原始样式）---- */
.play-btn{
  position:absolute;right:10px;bottom:10px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(8,6,4,.62);border:1.5px solid rgba(224,185,92,.62);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:.24s;
  box-shadow:0 4px 20px -6px rgba(0,0,0,.75);
}
.card:hover .play-btn{
  background:linear-gradient(135deg,#f2d98f,var(--gold2));
  border-color:transparent;transform:scale(1.08);
}
.play-btn svg{width:17px;height:17px;color:var(--gold);margin-left:1px;transition:.24s}
.card:hover .play-btn svg{color:#1d1400}
@media (max-width:640px){
  .play-btn{width:48px;height:48px}
  .play-btn svg{width:18px;height:18px}
}

/* ---- 详情页「返回」按钮（替换原 ✕）---- */
.pd-bar .player-close.pd-back{
  position:static;
  flex:0 0 auto;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  padding:8px 18px;
  border-radius:20px;
  background:rgba(224,185,92,.12);
  border:1px solid rgba(224,185,92,.38);
  color:var(--gold);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  transition:.18s;
  backdrop-filter:blur(6px);
}
.pd-bar .player-close.pd-back:hover{
  background:linear-gradient(135deg,#f2d98f,#c99a35);
  border-color:transparent;
  color:#1d1400;
  transform:translateX(-2px);
}
.pd-bar .player-close.pd-back:active{ transform:scale(.96) translateX(-1px); }

@media (max-width:640px){
  .pd-bar .player-close.pd-back{ padding:7px 15px; font-size:12.5px; }
}

/* ============================================================
   视频加载指示器
   ============================================================ */
.player-body{ position:relative; }
.vid-loading{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(4,3,2,.72);
  backdrop-filter:blur(6px);
  z-index:5;
  pointer-events:none;
}
.vid-loading[hidden]{ display:none !important; }
.vld-spinner{
  width:44px; height:44px;
  border-radius:50%;
  border:3px solid rgba(224,185,92,.18);
  border-top-color:#e0b95c;
  animation:vldSpin .8s linear infinite;
}
@keyframes vldSpin{ to{ transform:rotate(360deg); } }
.vld-text{
  font-size:13px; color:#e0b95c;
  font-weight:600; letter-spacing:.4px;
}
@media (max-width:640px){
  .vld-spinner{ width:36px; height:36px; }
  .vld-text{ font-size:12px; }
}

/* ---------- 推荐轮播 ---------- */
.feat-fade{ opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; }
.feat-fade.in{ opacity:1; transform:none; }

.feat-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; align-items:center; gap:7px;
  z-index:3; pointer-events:auto;
}
.feat-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.28);
  cursor:pointer; transition:.25s;
}
.feat-dot:hover{ background:rgba(255,255,255,.55); }
.feat-dot.on{
  width:18px; border-radius:4px;
  background:linear-gradient(90deg,#f4d77a,#c99a35);
  box-shadow:0 0 8px rgba(224,185,92,.6);
}
/* 卡片需要相对定位承载圆点 */
.feat-wrap{ position:relative; }

@media (max-width:640px){
  .feat-dots{ bottom:8px; gap:6px; }
  .feat-dot{ width:5px; height:5px; }
  .feat-dot.on{ width:15px; }
}

/* 圆点加大（移动端更明显） */
.feat-dot{ width:8px !important; height:8px !important; }
.feat-dot.on{ width:22px !important; height:8px !important; }
.feat-dots{ bottom:14px !important; gap:8px !important; }
@media (max-width:640px){
  .feat-dot{ width:7px !important; height:7px !important; }
  .feat-dot.on{ width:20px !important; height:7px !important; }
  .feat-dots{ bottom:12px !important; }
}

/* ========== 前台列表分页加载 ========== */
.pg-sentinel{ width:100%; height:1px; grid-column:1/-1; }
.pg-foot{
  display:flex; flex-direction:column; align-items:center;
  padding:22px 0 6px; gap:8px;
}
.pg-more{
  padding:11px 32px; border-radius:11px;
  font-size:13.5px; font-weight:700;
  background:rgba(224,185,92,.09);
  border:1px solid rgba(224,185,92,.32);
  color:var(--gold,#e0b95c);
  cursor:pointer; transition:.16s;
  -webkit-tap-highlight-color:transparent;
}
.pg-more:hover{
  background:rgba(224,185,92,.16);
  border-color:rgba(224,185,92,.55);
  transform:translateY(-1px);
}
.pg-more:active{ transform:none; }
.pg-done{
  font-size:12.5px; color:var(--dim,#6d6355);
  letter-spacing:.5px;
}

/* ========== 详情页推荐（同类 + 相关） ========== */
.pd-rec{ margin-top:20px; }
.pd-rec .pi-label{ display:flex; align-items:center; gap:5px; }
.pd-rec .pi-label i{
  font-style:normal; font-weight:400;
  color:var(--gold,#e0b95c); opacity:.85;
}
.pd-rec-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin-top:10px;
}
@media (max-width:520px){
  .pd-rec-list{ grid-template-columns:1fr; gap:8px; }
}
.pd-rec-item{
  display:flex; gap:10px; align-items:center;
  padding:8px; border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(224,185,92,.13);
  text-decoration:none; transition:.16s;
  min-width:0;
}
.pd-rec-item:hover{
  background:rgba(224,185,92,.07);
  border-color:rgba(224,185,92,.32);
  transform:translateY(-1px);
}
.pd-rec-thumb{
  position:relative; flex:0 0 92px;
  width:92px; height:52px; border-radius:7px;
  overflow:hidden; background:#0a0806;
}
.pd-rec-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pd-rec-dur{
  position:absolute; right:3px; bottom:3px;
  font-size:10px; padding:1px 5px; border-radius:4px;
  background:rgba(0,0,0,.72); color:#e8e0d0;
  letter-spacing:.2px;
}
.pd-rec-info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.pd-rec-t{
  font-size:12.5px; font-weight:600; line-height:1.38;
  color:var(--txt,#f2ece0);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.pd-rec-m{
  font-size:11px; color:var(--dim,#6d6355);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 详情页推荐：加载更多按钮 */
.pd-rec-list{ position:relative; }
.pd-rec-more-btn{
  grid-column:1/-1;                   /* 横跨整行 */
  width:100%; margin-top:4px;
  padding:10px 16px; border-radius:10px;
  font-size:12.5px; font-weight:600;
  background:rgba(224,185,92,.07);
  border:1px dashed rgba(224,185,92,.3);
  color:var(--gold,#e0b95c);
  cursor:pointer; transition:.16s;
  -webkit-tap-highlight-color:transparent;
}
.pd-rec-more-btn:hover{
  background:rgba(224,185,92,.14);
  border-color:rgba(224,185,92,.55);
}
.pd-rec-more-btn:active{ transform:scale(.99); }

/* ========== 弹窗内分类标签（切换不关弹窗） ========== */
.pd-cats{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:9px 16px;
  border-bottom:1px solid rgba(224,185,92,.13);
  background:rgba(255,255,255,.015);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex:0 0 auto;
}
.pd-cats::-webkit-scrollbar{ display:none; }
.pd-chip{
  flex:0 0 auto;
  padding:5px 12px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(224,185,92,.16);
  color:var(--dim,#6d6355);
  cursor:pointer;
  transition:.15s;
  -webkit-tap-highlight-color:transparent;
}
.pd-chip:hover{ border-color:rgba(224,185,92,.4); color:var(--txt); }
.pd-chip.on{
  background:rgba(224,185,92,.14);
  border-color:rgba(224,185,92,.55);
  color:var(--gold,#e0b95c);
  font-weight:700;
}

/* ========== 音频库引导横幅（方案 A：简洁文字条） ========== */
.ab-audio{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 15px;
  margin-bottom:16px;
  border-radius:13px;
  text-decoration:none;
  background:linear-gradient(120deg, rgba(224,185,92,.13), rgba(224,185,92,.04) 60%, rgba(224,185,92,.08));
  border:1px solid rgba(224,185,92,.3);
  transition:.18s;
  -webkit-tap-highlight-color:transparent;
}
.ab-audio:hover{
  border-color:rgba(224,185,92,.55);
  transform:translateY(-1px);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.9);
}
.ab-ico{
  flex:0 0 36px; width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f4d77a,#c99a35);
  color:#1d1400;
  box-shadow:0 4px 14px -5px rgba(224,185,92,.8);
}
.ab-ico svg{ width:20px; height:20px; }
.ab-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ab-t1{
  font-size:14.5px; font-weight:800; color:var(--gold,#e0b95c);
  letter-spacing:.2px; line-height:1.3;
}
.ab-t2{
  font-size:11.5px; color:var(--sub,#a89d8c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ab-btn{
  flex:0 0 auto;
  padding:7px 14px; border-radius:9px;
  font-size:12.5px; font-weight:700;
  background:linear-gradient(135deg,#f4d77a,#c99a35);
  color:#1d1400;
  white-space:nowrap;
}
@media (max-width:480px){
  .ab-audio{ padding:11px 13px; gap:10px; margin-bottom:13px; }
  .ab-ico{ flex-basis:32px; width:32px; height:32px; }
  .ab-ico svg{ width:17px; height:17px; }
  .ab-t1{ font-size:13.5px; }
  .ab-t2{ font-size:11px; }
  .ab-btn{ padding:6px 12px; font-size:12px; }
}

/* ★ 视频加载进度条 */
.vld-bar{
  width:160px; height:4px; border-radius:99px;
  background:rgba(224,185,92,.16); overflow:hidden;
}
.vld-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#f4d77a,#c99a35);
  border-radius:99px; transition:width .25s ease;
}

/* ---------- 轻提示 toast ---------- */
.toastx{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);
  z-index:99999;max-width:86vw;padding:11px 18px;border-radius:12px;
  background:rgba(18,16,12,.96);border:1px solid rgba(224,185,92,.32);
  color:#f2ece0;font-size:13.5px;font-weight:600;line-height:1.45;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  text-align:center;white-space:pre-wrap;word-break:break-word;
}
.toastx.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toastx.err{border-color:rgba(224,101,95,.5);color:#ffd9d6}
.toastx.ok{border-color:rgba(79,209,160,.45)}
.toastx[hidden]{display:none !important}

/* ---------- 广告位（图片） ---------- */
.pr-slot{ margin: 14px 0 18px; }
.pr-slot[hidden]{ display:none !important; }
.pr-slot .pr-img{ display:block; border-radius:14px; overflow:hidden;
  border:1px solid rgba(224,185,92,.2); transition:.18s; }
.pr-slot .pr-img:hover{ transform:translateY(-2px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9); border-color:rgba(224,185,92,.45); }
.pr-slot .pr-img img{ display:block; width:100%; height:auto; max-height:63px; object-fit:cover; }

/* ---------- 标题行：标题 + 分享按钮同一行 ---------- */
.pi-title-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.pi-title-row h3{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0 !important;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.pi-title-row .pi-share-inline{
  flex:0 0 auto;
  margin-top:3px;
}
/* meta 行的分享按钮：跟在分类后面 */
.pi-meta .pi-share-inline{
  flex:0 0 auto;
  margin-left:2px;
}

/* ---------- 讲师/嘉宾名字：窄屏截断 ---------- */
.pi-meta .who{ flex:1 1 auto; min-width:0; }
.pi-meta .who-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pi-meta .who-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
@media (max-width: 480px){
  .pi-meta{ gap:5px; font-size:11.5px; }
  .pi-meta .who-name{ max-width:none; }   /* 不限制，占满剩余空间 */
  .pi-meta .pi-share-inline{ font-size:11px; padding:2px 8px; }
  .pi-title-row h3{ font-size:18px; }
}
@media (max-width: 360px){
  .pi-meta .who-name{ max-width:none; }
  .pi-meta .pi-cat-inline{ font-size:10px; padding:2px 7px; }
}
/* ---------- meta 行：分类+分享靠右 ---------- */
.pi-meta .pi-meta-right{
  margin-left:auto;        /* 推到最右 */
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
/* ---------- meta 行：姓名占左，日期+分类+分享靠右 ---------- */
.pi-meta .who{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.pi-meta .who-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.pi-meta .pi-meta-right{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.pi-meta .pi-date{ white-space:nowrap; }

/* ---------- ★ 日期筛选 ---------- */
.date-filter{ position:relative; display:flex; align-items:center; gap:6px; margin-left:10px; }
.df-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12.5px; font-weight:600;
  border-radius:20px; cursor:pointer; transition:.15s;
  border:1px solid rgba(224,185,92,.3);
  background:rgba(224,185,92,.06); color:var(--gold,#e0b95c);
}
.df-btn svg{ width:14px; height:14px; }
.df-btn:hover{ background:rgba(224,185,92,.15); border-color:rgba(224,185,92,.5); }
.df-btn.on{
  background:linear-gradient(135deg,#e0b95c,#c99a35);
  color:#1a1200; border-color:transparent;
}
.df-clear{
  width:24px; height:24px; padding:0; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; border:1px solid rgba(224,185,92,.3);
  background:rgba(224,185,92,.08); color:var(--gold,#e0b95c);
}
.df-clear svg{ width:12px; height:12px; }
.df-clear:hover{ background:rgba(224,92,92,.18); border-color:rgba(224,92,92,.5); color:#ff9a9a; }

.df-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  width:min(262px, calc(100vw - 44px)); padding:14px;
  background:var(--card,#14161c); border:1px solid rgba(224,185,92,.25);
  border-radius:12px; box-shadow:0 18px 40px -12px rgba(0,0,0,.9);
}
.df-head{ font-size:12.5px; font-weight:700; color:var(--gold,#e0b95c); margin-bottom:10px; }
.df-quick{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:11px; }
.df-q{
  padding:7px 8px; font-size:12px; cursor:pointer; border-radius:7px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035);
  color:var(--sub,#a89d8c);
}
.df-q:hover{ border-color:rgba(224,185,92,.45); color:#e0b95c; }
.df-range{ display:flex; flex-direction:column; gap:6px; margin-bottom:11px; }
.df-range label{ font-size:11.5px; color:var(--dim,#6d6355); }
.df-range input[type="date"]{
  width:100%; padding:7px 9px; font-size:12.5px; border-radius:7px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--txt,#e8e3d8);
}
.df-acts{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.df-a{
  padding:8px; font-size:12.5px; font-weight:600; cursor:pointer;
  border-radius:7px; border:1px solid transparent;
  background:linear-gradient(135deg,#e0b95c,#c99a35); color:#1a1200;
}
.df-a.ghost{
  background:transparent; border-color:rgba(255,255,255,.14);
  color:var(--sub,#a89d8c);
}
.df-a.ghost:hover{ border-color:rgba(255,255,255,.3); }

@media (max-width:640px){
  .date-filter{ margin-left:0; margin-top:8px; }
  .sec-head{ flex-wrap:wrap; }
  .df-panel{ right:auto; left:0; width:min(262px, 88vw); }
}

/* ---------- ★ 标题行：标题 + 按日期 + 分类 同一行 ---------- */
.sec-head{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap;
  gap:8px 10px;
}
.sec-head h2{ flex:0 0 auto; margin:0; }
.sec-head .date-filter{ flex:0 0 auto; margin:0; }
.sec-head .filters{
  flex:1 1 auto;
  justify-content:flex-end;
}

@media (max-width:520px){
  .sec-head .date-filter{ margin-left:8px; }
  .sec-head .filters{
    flex:0 1 auto;
    margin-left:0;
    margin-top:2px;
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sec-head .filters::-webkit-scrollbar{ display:none; }
  .sec-head .filters .chip{ flex:0 0 auto; }
}

/* ---------- ★ 强制：标题行布局（标题 | 按日期 | 分类）---------- */
.sec-head{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; justify-content:flex-start !important; }
.sec-head h2{ flex:0 0 auto !important; order:1; }
.sec-head .date-filter{ flex:0 0 auto !important; order:2; margin-left:10px !important; }
.sec-head .filters{ flex:0 1 auto !important; order:3; margin-left:auto !important; justify-content:flex-end !important; }
@media (min-width:521px){
  .sec-head .filters{ max-width:calc(100% - 200px); }
}
@media (max-width:520px){
  /* 移动端：标题 + 按日期 同一行，分类栏换行到下一行 */
  .sec-head{ justify-content:flex-start !important; }
  .sec-head .filters{
    flex:1 1 100% !important;
    margin-left:0 !important;
    margin-top:4px;
    order:9;
    justify-content:flex-start !important;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sec-head .filters::-webkit-scrollbar{ display:none; }
  .sec-head .filters .chip{ flex:0 0 auto; }
}

/* ---------- ★ 日期面板：防止超出屏幕 ---------- */
.df-panel{
  left:0 !important; right:auto !important;
  width:min(262px, calc(100vw - 44px)) !important;
  max-width:calc(100vw - 44px) !important;
}
@media (max-width:520px){
  /* 面板贴着按钮下方，右对齐但夹紧屏幕内 */
  .df-panel{
    position:absolute !important;
    top:calc(100% + 6px) !important;
    right:auto !important;
    left:auto !important;
    width:min(260px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    z-index:999 !important;
    /* 用 transform 把面板往左拉，避免超出右边界 */
    transform:translateX(calc(-1 * min(0px, 100vw - 100% - 24px)));
  }
}

/* ---------- ★ 音频横幅：标题+副标题 同一行 ---------- */
.ab-audio .ab-txt{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0;
}
.ab-audio .ab-t1{
  font-size:17px !important;
  font-weight:800 !important;
  flex:0 0 auto;
  line-height:1.25;
}
.ab-audio .ab-t2{
  font-size:13.5px !important;
  font-weight:600 !important;
  color:var(--sub,#a89d8c) !important;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.25;
}
@media (max-width:400px){
  .ab-audio .ab-t1{ font-size:15.5px !important; }
  .ab-audio .ab-t2{ font-size:12.5px !important; }
  .ab-audio .ab-txt{ gap:7px !important; }
}

/* ---------- ★ 音频横幅：标题 + 文案同行，数量靠右 ---------- */
.ab-audio .ab-txt{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-width:0;
}
.ab-audio .ab-t1{
  font-size:17px !important;
  font-weight:800 !important;
  flex:0 0 auto;
  color:var(--gold,#e0b95c);
  line-height:1.25;
}
.ab-audio .ab-t2{
  display:inline !important;
  font-size:13.5px !important;
  line-height:1.25;
  min-width:0;
}
/* 「我最优秀 我最牛」紧跟标题 */
.ab-audio .ab-base{
  color:var(--sub,#a89d8c);
  font-weight:600;
  white-space:nowrap;
}
/* 分隔符：靠右前 */
.ab-audio .ab-sep{
  color:var(--dim,#6d6355);
  margin-left:auto;
  padding-left:8px;
}
/* 「N 个音频」靠右（位置不变） */
.ab-audio .ab-cnt{
  color:var(--dim,#6d6355);
  font-weight:600;
  white-space:nowrap;
}
@media (max-width:400px){
  .ab-audio .ab-t1{ font-size:15.5px !important; }
  .ab-audio .ab-t2{ font-size:12.5px !important; }
}

/* ---------- ★ 音频横幅：文案紧跟标题，数量靠右 ---------- */
/* 让 ab-txt 成为 flex 容器，base 紧跟标题，cnt 靠右 */
.ab-audio .ab-txt{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-width:0;
}
.ab-audio .ab-t2{
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0;
  align-items:baseline !important;
}
.ab-audio .ab-base{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--sub,#a89d8c);
  font-weight:600;
}
.ab-audio .ab-cnt{
  flex:0 0 auto;
  margin-left:auto;      /* ★ 推到最右 */
  padding-left:10px;
  white-space:nowrap;
  color:var(--dim,#6d6355);
  font-weight:600;
}
.ab-audio .ab-sep{ display:none !important; }

/* ---------- ★ 音频横幅：恢复两行结构（标题在上，文案在下）---------- */
.ab-audio .ab-txt{
  display:flex !important;
  flex-direction:column !important;    /* ★ 竖排：标题在上，副标题在下 */
  align-items:flex-start !important;
  gap:2px !important;
  flex:1 1 auto !important;
  min-width:0;
}
.ab-audio .ab-t1{
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.25;
  color:var(--gold,#e0b95c);
}
.ab-audio .ab-t2{
  display:inline !important;
  font-size:13.5px !important;
  line-height:1.3;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 数量：保持原样 */
.ab-audio .ab-cnt{
  color:var(--dim,#6d6355) !important;
  font-weight:600;
  margin-left:0 !important;
}
/* 分隔符 */
.ab-audio .ab-sep{
  display:inline !important;
  color:var(--dim,#6d6355);
  margin-left:0 !important;
  padding-left:0 !important;
}
/* 后台文案：放大、变亮、加粗 */
.ab-audio .ab-base{
  color:var(--sub,#cfc7b5) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
}
@media (max-width:400px){
  .ab-audio .ab-t1{ font-size:15.5px !important; }
  .ab-audio .ab-t2, .ab-audio .ab-base{ font-size:12.5px !important; }
}

/* ---------- ★ 音频横幅：标题行 + 数量行 ---------- */
.ab-audio .ab-txt{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
  flex:1 1 auto !important;
  min-width:0;
}
/* 第一行：音频库 + 我最优秀 我最牛（同行） */
.ab-audio .ab-line1{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0;
  max-width:100%;
}
.ab-audio .ab-t1{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--gold,#e0b95c);
  flex:0 0 auto;
  line-height:1.25;
}
.ab-audio .ab-base{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:var(--sub,#cfc7b5) !important;
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
}
/* 第二行：N 个音频 */
.ab-audio .ab-t2{
  font-size:12.5px !important;
  color:var(--dim,#6d6355) !important;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}
@media (max-width:400px){
  .ab-audio .ab-t1{ font-size:15.5px !important; }
  .ab-audio .ab-base{ font-size:12.5px !important; }
  .ab-audio .ab-t2{ font-size:11.5px !important; }
}

/* ---------- ★ 数量后缀文案 ---------- */
.ab-audio .ab-cnt-suffix{
  color:var(--dim,#6d6355);
  font-weight:600;
}

/* ---------- ★ 日期面板：单选一天 ---------- */
.df-single{ margin-bottom:12px; }
.df-single input[type="date"]{
  width:100%; padding:10px 12px; font-size:14px;
  border-radius:9px; background:rgba(255,255,255,.05);
  border:1px solid rgba(224,185,92,.28); color:var(--txt,#e8e3d8);
  font-family:var(--mono,monospace);
}
.df-single input[type="date"]:focus{
  outline:none; border-color:var(--gold,#e0b95c);
  box-shadow:0 0 0 3px rgba(224,185,92,.12);
}
.df-quick, .df-range, .df-sep{ display:none !important; }

/* ---------- ★ 原生日期输入：透明覆盖在按钮上，一点就弹系统日历 ---------- */
.df-native{
  position:absolute !important;
  left:0; top:0; width:100%; height:100%;
  opacity:0 !important;
  cursor:pointer;
  z-index:5;
  border:0; padding:0; margin:0;
  -webkit-appearance:none; appearance:none;
  background:transparent;
}
/* 面板已废弃 */
.df-panel{ display:none !important; }

/* ---------- ★ 列表模式（日期筛选时）：横向紧凑列表 ---------- */
.grid.list-mode{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  grid-template-columns:none !important;
}
.grid.list-mode .card{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch;
  gap:12px;
  padding:9px;
  border-radius:12px;
  min-height:0;
}
/* 左侧缩略图 */
.grid.list-mode .card .thumb{
  flex:0 0 128px; width:128px;
  aspect-ratio:16/9;
  border-radius:9px;
  overflow:hidden;
  position:relative;
}
.grid.list-mode .card .thumb img{
  width:100%; height:100%; object-fit:cover;
}
/* 隐藏列表模式下不必要的元素 */
.grid.list-mode .card .play-btn{ transform:scale(.7); }
.grid.list-mode .card .dur,
.grid.list-mode .card .card-desc{ display:none !important; }
/* 右侧信息 */
.grid.list-mode .card .card-body{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:0;
}
.grid.list-mode .card .card-title{
  font-size:14px !important;
  -webkit-line-clamp:2;
  line-height:1.35;
  margin:0 !important;
}
.grid.list-mode .card .card-meta{
  margin:0 !important;
  gap:8px !important;
  font-size:11.5px;
}
.grid.list-mode .card .card-meta .date{
  margin-left:auto;
  font-family:var(--mono,monospace);
  color:var(--dim,#6d6355);
}
.grid.list-mode .card .cat-tag{
  top:5px; left:5px;
  font-size:9.5px; padding:1px 6px;
}
.grid.list-mode .card .card-share{
  width:26px; height:26px; top:5px; right:5px;
}
@media (max-width:400px){
  .grid.list-mode .card .thumb{ flex:0 0 108px; width:108px; }
  .grid.list-mode .card .card-title{ font-size:13px !important; }
}

/* ---------- ★ 列表模式：元素重新定位 ---------- */
/* 分享按钮：移到卡片右上角（不压图） */
.grid.list-mode .card{ position:relative; padding-right:44px; }
.grid.list-mode .card .card-share{
  position:absolute !important;
  top:50% !important;
  right:10px !important;
  left:auto !important;
  transform:translateY(-50%);
  width:30px !important; height:30px !important;
  background:rgba(224,185,92,.08);
  border:1px solid rgba(224,185,92,.22);
  border-radius:8px;
}
.grid.list-mode .card .card-share svg{ width:15px; height:15px; }
.grid.list-mode .card .card-share:hover{
  background:rgba(224,185,92,.2);
  border-color:rgba(224,185,92,.5);
}
/* 分类标签：缩略图右下角（不压左上文字） */
.grid.list-mode .card .cat-tag{
  top:auto !important;
  left:auto !important;
  bottom:5px !important;
  right:5px !important;
}
/* 播放按钮：居中 */
.grid.list-mode .card .play-btn{
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) scale(.75) !important;
}
/* 日期不换行 */
.grid.list-mode .card .card-meta .date{
  white-space:nowrap !important;
  flex:0 0 auto;
}
.grid.list-mode .card .card-meta{
  display:flex; align-items:center;
  flex-wrap:nowrap;
  overflow:hidden;
}
.grid.list-mode .card .card-meta .who{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grid.list-mode .card .card-title{
  padding-right:0 !important;
}

/* ---------- ★ 分享按钮：改为卡片直接子元素后的定位 ---------- */
.card{ position:relative; }
/* 网格模式：右下角 */
.card > .card-share{
  position:absolute;
  right:10px; bottom:10px;
  z-index:4;
}
/* 列表模式：垂直居中右侧 */
.grid.list-mode .card > .card-share{
  top:50% !important;
  bottom:auto !important;
  right:11px !important;
  transform:translateY(-50%);
  width:32px; height:32px;
  background:rgba(224,185,92,.1);
  border:1px solid rgba(224,185,92,.28);
  border-radius:9px;
}
.grid.list-mode .card{ padding-right:52px; }

/* ---------- ★ 列表模式：缩略图缩小 1/3（128 → 85）---------- */
.grid.list-mode .card{
  padding:8px !important;
  padding-right:50px !important;
  gap:11px !important;
}
.grid.list-mode .card .thumb{
  flex:0 0 85px !important;
  width:85px !important;
  aspect-ratio:16/9;
  border-radius:8px !important;
}
/* 缩略图上的图标等比缩小 */
.grid.list-mode .card .cat-tag{
  font-size:8.5px !important;
  padding:1px 5px !important;
  bottom:3px !important; right:3px !important;
}
.grid.list-mode .card .play-btn{
  transform:translate(-50%,-50%) scale(.55) !important;
}
/* 右侧信息区：更紧凑，充分利用空间 */
.grid.list-mode .card .card-body{
  gap:6px !important;
  padding:0 !important;
}
.grid.list-mode .card .card-title{
  font-size:14px !important;
  line-height:1.35 !important;
  -webkit-line-clamp:2;
  margin:0 !important;
}
.grid.list-mode .card .card-meta{
  gap:8px !important;
  font-size:11.5px !important;
  padding-top:0 !important;
  margin-top:0 !important;
  border-top:0 !important;
}
.grid.list-mode .card .card-meta .avatar{
  width:18px !important; height:18px !important;
  font-size:10px !important;
}
.grid.list-mode .card .card-meta .date{
  font-size:11px !important;
}
@media (max-width:400px){
  .grid.list-mode .card .thumb{ flex:0 0 78px !important; width:78px !important; }
  .grid.list-mode .card .card-title{ font-size:13px !important; }
}

/* ---------- ★ 列表模式：精致排版 v2 ---------- */
/* 卡片：统一圆角 + 微渐变背景 + 悬停反馈 */
.grid.list-mode .card{
  padding:8px !important;
  padding-right:46px !important;
  gap:12px !important;
  border-radius:11px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.028), rgba(255,255,255,.012)) !important;
  border:1px solid rgba(255,255,255,.055) !important;
  transition:border-color .18s, background .18s, transform .18s;
}
.grid.list-mode .card:hover{
  border-color:rgba(224,185,92,.32) !important;
  background:linear-gradient(135deg, rgba(224,185,92,.07), rgba(224,185,92,.02)) !important;
}
.grid.list-mode .card:active{ transform:scale(.995); }

/* 缩略图：圆角与卡片协调 */
.grid.list-mode .card .thumb{
  flex:0 0 85px !important;
  width:85px !important;
  border-radius:8px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* 标题：两行，行距舒适，省略号 */
.grid.list-mode .card .card-title{
  font-size:13.5px !important;
  font-weight:650 !important;
  line-height:1.45 !important;
  letter-spacing:.1px;
  margin:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}

/* 信息行：讲师左、日期右，中间弹性 */
.grid.list-mode .card .card-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  font-size:11.5px !important;
  min-width:0;
}
.grid.list-mode .card .card-meta .who{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto; min-width:0;
  overflow:hidden;
}
.grid.list-mode .card .card-meta .who .avatar{
  flex:0 0 18px;
  width:18px !important; height:18px !important;
  font-size:9.5px !important;
  line-height:18px;
}
.grid.list-mode .card .card-meta .who span:not(.avatar),
.grid.list-mode .card .card-meta .who{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grid.list-mode .card .card-meta .who::after{ content:''; }
.grid.list-mode .card .card-meta .date{
  flex:0 0 auto;
  font-family:var(--mono,monospace);
  font-size:10.5px !important;
  color:rgba(160,150,130,.75) !important;
  letter-spacing:.3px;
}

/* 分享按钮：降低视觉权重 */
.grid.list-mode .card > .card-share{
  width:30px !important; height:30px !important;
  right:9px !important;
  background:transparent !important;
  border:1px solid rgba(224,185,92,.14) !important;
  border-radius:8px !important;
  opacity:.6;
  transition:.18s;
}
.grid.list-mode .card > .card-share svg{ width:14px !important; height:14px !important; }
.grid.list-mode .card:hover > .card-share{
  opacity:1;
  background:rgba(224,185,92,.1) !important;
  border-color:rgba(224,185,92,.35) !important;
}

/* 分类标签：半透明描边（不压图） */
.grid.list-mode .card .cat-tag{
  bottom:4px !important; right:4px !important;
  top:auto !important; left:auto !important;
  font-size:8.5px !important;
  padding:2px 6px !important;
  letter-spacing:.6px;
  background:rgba(6,4,2,.72) !important;
  border:1px solid rgba(224,185,92,.3) !important;
  backdrop-filter:blur(4px);
  border-radius:4px !important;
}
/* 播放按钮：更低调 */
.grid.list-mode .card .play-btn{
  transform:translate(-50%,-50%) scale(.5) !important;
  opacity:.75;
}

/* ---------- ★ 讲师名省略号 ---------- */
.who-name{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
.grid.list-mode .card .card-meta .who{ flex:1 1 auto; min-width:0; }
.grid.list-mode .card .card-meta .who-name{ flex:1 1 auto; min-width:0; }

/* ---------- ★ 分享按钮：移到日期后面（信息行内）---------- */
/* 取消绝对定位，作为 meta 行内元素 */
.card > .card-share{ position:static !important; }
.card .card-meta > .card-share{
  position:static !important;
  flex:0 0 auto;
  width:26px !important; height:26px !important;
  margin-left:8px;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:1px solid rgba(224,185,92,.16) !important;
  border-radius:7px !important;
  opacity:.55;
  transition:.18s;
}
.card .card-meta > .card-share svg{
  width:13px !important; height:13px !important;
}
.card:hover .card-meta > .card-share{
  opacity:1;
  background:rgba(224,185,92,.1) !important;
  border-color:rgba(224,185,92,.38) !important;
}
/* 列表模式：卡片不再需要右侧留白（分享已入行） */
.grid.list-mode .card{ padding-right:8px !important; }
/* 标题更宽 */
.grid.list-mode .card .card-title{ padding-right:0 !important; }
/* 信息行：讲师(弹性) + 日期 + 分享 */
.grid.list-mode .card .card-meta{
  justify-content:flex-start !important;
  gap:6px !important;
}
.grid.list-mode .card .card-meta .who{ flex:1 1 auto; min-width:0; }
.grid.list-mode .card .card-meta .date{ margin-left:auto; }
/* 网格模式：meta 行内也生效 */
.card .card-meta{ align-items:center; }
.card .card-meta .date{ margin-left:auto; }

/* ---------- ★ 强制：分享按钮行内显示 ---------- */
.card .card-meta .card-share,
.grid.list-mode .card .card-share,
.grid.list-mode .card > .card-share,
.card > .card-share{
  position:static !important;
  top:auto !important; bottom:auto !important;
  left:auto !important; right:auto !important;
  transform:none !important;
  float:none !important;
  margin:0 0 0 7px !important;
  flex:0 0 auto !important;
  width:26px !important;
  height:26px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle;
  opacity:.55;
  background:transparent !important;
  border:1px solid rgba(224,185,92,.16) !important;
  border-radius:7px !important;
}
.card .card-meta .card-share svg,
.grid.list-mode .card .card-share svg{
  width:13px !important; height:13px !important;
}
.card:hover .card-meta .card-share{
  opacity:1;
  background:rgba(224,185,92,.1) !important;
  border-color:rgba(224,185,92,.38) !important;
}
/* 缩略图不用再给 share 留位 */
.grid.list-mode .card .thumb .card-share{ display:none !important; }

/* ---------- ★ 信息行：左（讲师/嘉宾截断）｜右（日期+分享）---------- */
.grid.list-mode .card .card-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-width:0;
  overflow:hidden;
}
/* 左侧：讲师/嘉宾（弹性收缩 + 截断） */
.grid.list-mode .card .card-meta .who{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100%;
  display:flex !important;
  align-items:center;
  gap:6px;
  overflow:hidden;
}
.grid.list-mode .card .card-meta .who-name{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  display:block;
}
/* 右侧：日期 + 分享（固定，不收缩） */
.grid.list-mode .card .card-meta .date{
  flex:0 0 auto !important;
  margin-left:auto !important;
  white-space:nowrap;
}
.grid.list-mode .card .card-meta .card-share{
  flex:0 0 auto !important;
  margin-left:0 !important;
}

/* 网格模式同样规则 */
.card .card-meta{
  display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden;
}
.card .card-meta .who{ flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center; gap:6px; }
.card .card-meta .who-name{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
.card .card-meta .date{ flex:0 0 auto; margin-left:auto; white-space:nowrap; }
.card .card-meta .card-share{ flex:0 0 auto; margin-left:0; }

/* 窄屏：嘉宾名最多显示 6 个字符宽 */
@media (max-width:420px){
  .grid.list-mode .card .card-meta .who-name{ max-width:7em; }
  .card .card-meta .who-name{ max-width:7em; }
}

/* ---------- ★ 标题字号微调 ---------- */
.grid.list-mode .card .card-title{
  font-size:12.5px !important;
  line-height:1.42 !important;
  font-weight:600 !important;
}
/* 卡片高度同步收紧 */
.grid.list-mode .card{
  padding-top:7px !important;
  padding-bottom:7px !important;
}
@media (max-width:400px){
  .grid.list-mode .card .card-title{ font-size:12px !important; }
}

/* ---------- ★ 日期筛选按钮：样式优化 ---------- */
.df-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:7px 13px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  border-radius:11px !important;
  cursor:pointer;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(224,185,92,.28) !important;
  background:linear-gradient(135deg, rgba(224,185,92,.075), rgba(224,185,92,.025)) !important;
  color:var(--gold,#e0b95c) !important;
  letter-spacing:.2px;
  box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  -webkit-tap-highlight-color:transparent;
}
.df-btn svg{
  width:14px !important; height:14px !important;
  flex:0 0 auto;
  opacity:.92;
  transition:transform .2s;
}
.df-btn:hover{
  background:linear-gradient(135deg, rgba(224,185,92,.16), rgba(224,185,92,.06)) !important;
  border-color:rgba(224,185,92,.5) !important;
  box-shadow:0 2px 8px rgba(224,185,92,.14), inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(-1px);
}
.df-btn:active{ transform:translateY(0) scale(.97); }

/* 已选中：金色实心 + 微光 */
.df-btn.on{
  background:linear-gradient(135deg, #f0c869, #c99a35) !important;
  border-color:transparent !important;
  color:#1d1400 !important;
  font-weight:700 !important;
  box-shadow:0 3px 11px rgba(224,185,92,.34), inset 0 1px 0 rgba(255,255,255,.25);
}
.df-btn.on svg{ opacity:1; transform:scale(1.05); }
.df-btn.on:hover{
  background:linear-gradient(135deg, #f7d47e, #d4a843) !important;
  box-shadow:0 4px 14px rgba(224,185,92,.42);
}

/* 清除按钮：与按钮同高，圆形 + 描边 */
.df-clear{
  width:31px !important; height:31px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  border-radius:11px !important;
  border:1px solid rgba(224,185,92,.28) !important;
  background:linear-gradient(135deg, rgba(224,185,92,.075), rgba(224,185,92,.025)) !important;
  color:var(--gold,#e0b95c) !important;
  cursor:pointer;
  transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.df-clear svg{ width:13px !important; height:13px !important; }
.df-clear:hover{
  background:rgba(224,92,92,.16) !important;
  border-color:rgba(224,92,92,.5) !important;
  color:#ff9a9a !important;
  transform:rotate(90deg);
}
.df-clear:active{ transform:rotate(90deg) scale(.93); }

/* 容器对齐 */
.date-filter{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}

@media (max-width:400px){
  .df-btn{ padding:6px 11px !important; font-size:12px !important; }
  .df-clear{ width:29px !important; height:29px !important; }
}

/* ---------- ★ 自定义日历弹窗（黑金风格）---------- */
.df-calendar{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:80;
  width:min(300px, calc(100vw - 32px));
  padding:14px 13px 12px;
  background:linear-gradient(165deg, #1a1c22, #12141a 60%);
  border:1px solid rgba(224,185,92,.28);
  border-radius:14px;
  box-shadow:0 20px 46px -14px rgba(0,0,0,.94), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(14px);
  animation:dfcIn .18s cubic-bezier(.34,1.4,.64,1);
}
@keyframes dfcIn{
  from{ opacity:0; transform:translateY(-6px) scale(.97); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
/* 头部：年月 + 翻页 */
.dfc-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:11px;
}
.dfc-title{
  font-size:14px; font-weight:700;
  color:var(--gold,#e0b95c);
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
}
.dfc-nav{
  width:28px; height:28px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
  background:rgba(224,185,92,.06);
  border:1px solid rgba(224,185,92,.2);
  color:var(--gold,#e0b95c);
  transition:.15s;
}
.dfc-nav svg{ width:15px; height:15px; }
.dfc-nav:hover{ background:rgba(224,185,92,.16); border-color:rgba(224,185,92,.45); }
.dfc-nav:active{ transform:scale(.92); }

/* 星期栏 */
.dfc-week{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px; margin-bottom:6px;
}
.dfc-week span{
  text-align:center; font-size:10.5px; font-weight:700;
  color:rgba(160,150,130,.65); letter-spacing:.5px;
  padding:3px 0;
}

/* 日期网格 */
.dfc-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px; margin-bottom:11px;
}
.dfc-day{
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600;
  color:rgba(232,227,216,.86);
  border-radius:8px; cursor:pointer;
  transition:.13s;
  border:1px solid transparent;
  -webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums;
}
.dfc-day:hover{
  background:rgba(224,185,92,.12);
  border-color:rgba(224,185,92,.28);
}
/* 非本月 */
.dfc-day.other{ color:rgba(120,113,102,.38); }
/* 今天 */
.dfc-day.today{
  color:var(--gold,#e0b95c);
  border-color:rgba(224,185,92,.45);
  font-weight:800;
}
/* 已选中 */
.dfc-day.sel{
  background:linear-gradient(135deg,#f0c869,#c99a35) !important;
  color:#1d1400 !important;
  font-weight:800 !important;
  border-color:transparent !important;
  box-shadow:0 2px 9px rgba(224,185,92,.38);
}
.dfc-day.has-course::after{
  content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:rgba(224,185,92,.7);
}
.dfc-day{ position:relative; }

/* 底部按钮 */
.dfc-foot{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.055);
}
.dfc-btn{
  padding:9px; font-size:12.5px; font-weight:700;
  border-radius:9px; cursor:pointer;
  border:1px solid transparent;
  background:linear-gradient(135deg,#f0c869,#c99a35);
  color:#1d1400;
  transition:.15s;
}
.dfc-btn:hover{ filter:brightness(1.08); }
.dfc-btn:active{ transform:scale(.97); }
.dfc-btn.ghost{
  background:transparent;
  border-color:rgba(255,255,255,.12);
  color:var(--sub,#a89d8c);
}
.dfc-btn.ghost:hover{
  border-color:rgba(224,92,92,.45);
  color:#ff9a9a;
  background:rgba(224,92,92,.08);
}
/* 隐藏原生输入 */
.df-native{ display:none !important; }
@media (max-width:400px){
  .df-calendar{ width:min(280px, calc(100vw - 28px)); padding:12px 11px 10px; }
  .dfc-day{ font-size:12px; }
}

/* ---------- ★ 详情页推荐：与列表模式统一样式 ---------- */
.pd-rec-item.list-style{
  display:flex !important;
  align-items:center !important;
  gap:12px;
  padding:8px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.055);
  transition:border-color .18s, background .18s, transform .18s;
  text-decoration:none;
}
.pd-rec-item.list-style:hover{
  border-color:rgba(224,185,92,.32);
  background:linear-gradient(135deg, rgba(224,185,92,.07), rgba(224,185,92,.02));
}
.pd-rec-item.list-style:active{ transform:scale(.995); }

/* 左侧缩略图（与首页列表一致 85px） */
.pd-rec-item.list-style > .thumb{
  position:relative;
  flex:0 0 85px; width:85px;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  display:block;
}
.pd-rec-item.list-style > .thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.pd-rec-item.list-style > .thumb .cat-tag{
  position:absolute; right:4px; bottom:4px;
  font-size:8.5px; font-weight:700; padding:2px 6px;
  border-radius:4px; letter-spacing:.6px;
  background:rgba(6,4,2,.72);
  color:var(--gold,#e0b95c);
  border:1px solid rgba(224,185,92,.3);
  backdrop-filter:blur(4px);
}

/* 右侧信息区 */
.pd-rec-item.list-style > .card-body{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:6px;
  padding:0;
}
.pd-rec-item.list-style .card-title{
  font-size:12.5px; font-weight:600; line-height:1.42;
  color:var(--txt,#e8e3d8);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.pd-rec-item.list-style .card-meta{
  display:flex; align-items:center; gap:7px;
  min-width:0; overflow:hidden;
  font-size:11.5px; color:var(--dim,#6d6355);
  padding:0; margin:0; border:0;
}
.pd-rec-item.list-style .card-meta .who{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:6px;
  overflow:hidden;
}
.pd-rec-item.list-style .card-meta .avatar{
  flex:0 0 18px;
  width:18px; height:18px; line-height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(224,185,92,.22), rgba(224,185,92,.08));
  color:var(--gold,#e0b95c);
  font-size:9.5px; font-weight:700; text-align:center;
}
.pd-rec-item.list-style .card-meta .who-name{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-rec-item.list-style .card-meta .date{
  flex:0 0 auto; margin-left:auto;
  font-family:var(--mono,monospace);
  font-size:10.5px; color:rgba(160,150,130,.75);
}
.pd-rec-item.list-style .rec-go{
  flex:0 0 auto; width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(160,150,130,.5);
}
.pd-rec-item.list-style .rec-go svg{ width:14px; height:14px; }

@media (max-width:400px){
  .pd-rec-item.list-style > .thumb{ flex:0 0 78px; width:78px; }
  .pd-rec-item.list-style .card-title{ font-size:12px; }
  .pd-rec-item.list-style .card-meta .who-name{ max-width:7em; }
}

/* ---------- ★ 分享面板：新渠道图标配色 ---------- */
.sp-ico.sp-pyq{ background:linear-gradient(135deg,#2eb872,#1a8f52); color:#fff; }
.sp-ico.sp-tg { background:linear-gradient(135deg,#37aee2,#1e96c8); color:#fff; }
.sp-ico.sp-fox{ background:linear-gradient(135deg,#ff9020,#e0740a); color:#fff; }
.sp-ico.sp-tw { background:linear-gradient(135deg,#2c2c2e,#000); color:#fff; }
/* 分享面板网格：6 列自适应（3 行 × 3 列） */
.sp-grid{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:10px 8px !important;
}
@media (max-width:400px){
  .sp-grid{ grid-template-columns:repeat(4, 1fr) !important; }
  .sp-item span{ font-size:11px !important; }
}

/* ============================================================
   ★ 安卓 APP 下载入口
   ============================================================ */
/* 页脚链接 */
.foot-app{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--gold, #e0b95c);
  text-decoration:none; font-weight:700;
  transition:.18s;
}
.foot-app:hover{ color:#f4d77a; text-decoration:underline; }
.foot-app svg{ width:14px; height:14px; flex:0 0 auto; }

/* 首页横幅 */
.ab-app{
  position:relative;
  margin:14px 0 16px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(224,185,92,.14), rgba(224,185,92,.055));
  border:1px solid rgba(224,185,92,.3);
  overflow:hidden;
  animation:abAppIn .4s cubic-bezier(.22,1,.36,1);
}
.ab-app[hidden]{ display:none !important; }
@keyframes abAppIn{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}
.ab-app::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#f4d77a,#c99a35);
}
.ab-app-main{
  display:flex; align-items:center; gap:13px;
  padding:14px 44px 14px 17px;
  text-decoration:none; color:inherit;
  transition:.18s;
}
.ab-app-main:hover{ background:rgba(224,185,92,.07); }
.ab-app-main:active{ transform:scale(.995); }

.ab-app-ico{
  flex:0 0 40px; width:40px; height:40px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f4d77a,#c99a35);
  box-shadow:0 5px 15px -5px rgba(224,185,92,.65);
}
.ab-app-ico svg{ width:21px; height:21px; color:#1d1400; }

.ab-app-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ab-app-t1{
  font-size:14.5px; font-weight:800; color:#f0e2bc;
  letter-spacing:.2px;
}
.ab-app-t2{
  font-size:11.5px; color:#8a8072;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ab-app-btn{
  flex:0 0 auto;
  padding:8px 14px; border-radius:20px;
  font-size:12.5px; font-weight:800;
  background:linear-gradient(135deg,#f4d77a,#c99a35);
  color:#1d1400;
  white-space:nowrap;
  box-shadow:0 4px 12px -4px rgba(224,185,92,.6);
}

/* 关闭按钮 */
.ab-app-x{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  color:#8a8072;
  transition:.15s;
  z-index:2;
}
.ab-app-x:hover{ background:rgba(255,255,255,.14); color:#f0e2bc; }
.ab-app-x svg{ width:13px; height:13px; }

@media (max-width:420px){
  .ab-app-main{ padding:12px 40px 12px 14px; gap:11px; }
  .ab-app-ico{ flex-basis:36px; width:36px; height:36px; }
  .ab-app-ico svg{ width:19px; height:19px; }
  .ab-app-t1{ font-size:13.5px; }
  .ab-app-t2{ font-size:11px; }
  .ab-app-btn{ padding:7px 12px; font-size:12px; }
}