/* ============================================================
   每日一听(需求 AU · 2026-10-18)
   学习页顶部「今日一听」卡 + 音频页 + 底部播放条
   视觉沿用全站规矩:iOS 浅色、大圆角、毛玻璃、蓝紫粉;
   ★ 所有 fixed 元素一律让开底部栏:calc(var(--tabbar-h) + var(--tabbar-gap) + N)
   ★ 删掉 index.html 里 audio.css 那一行 = 完全回退(功能还在,只是没样式)
   ============================================================ */

/* ---------- 学习页顶部:今日一听大卡 ---------- */
.au-hero {
  position: relative;
  overflow: hidden;
  margin: 4px 0 14px;
  padding: 18px 18px 16px;
  border-radius: 26px;
  color: #fff;
  background: var(--grad, linear-gradient(135deg, #6d5efc, #f06aae));
  box-shadow: 0 14px 32px rgba(60, 70, 140, .20);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 装饰:两个柔光圆 + 一圈"声波" */
.au-hero::after {
  content: "";
  position: absolute;
  right: -46px; top: -54px;
  width: 168px; height: 168px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  pointer-events: none;
}
.au-hero::before {
  content: "";
  position: absolute;
  right: 26px; bottom: -60px;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  pointer-events: none;
}
.au-hero > * { position: relative; z-index: 1; }
.au-hero .au-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  background: rgba(255, 255, 255, .22);
  padding: 4px 10px; border-radius: 999px;
}
.au-hero .au-title {
  font-size: 17px; font-weight: 700; line-height: 1.45;
  margin: 11px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.au-hero .au-sub {
  font-size: 12.5px; opacity: .88; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.au-hero .au-row {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
/* 圆形播放键 */
.au-hero .au-play {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; color: var(--primary, #6d5efc);
  display: grid; place-items: center; border: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(30, 25, 80, .22);
}
.au-hero .au-play svg { width: 20px; height: 20px; }
.au-hero .au-meta { font-size: 12px; opacity: .9; line-height: 1.5; }
.au-hero .au-more {
  margin-left: auto; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .2);
  padding: 7px 12px; border-radius: 999px;
}
/* 今天没音频时的低调提示(不抢戏) */
.au-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; margin: 4px 0 14px;
  border-radius: 20px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #ECEEF5);
  color: var(--text3, #8B90A0); font-size: 13px;
}

/* ---------- 音频页(渲染在 #tab-study 里,和课程详情一个套路) ---------- */
.au-page { padding-bottom: calc(var(--tabbar-h, 86px) + var(--tabbar-gap, 0px) + 96px); }
.au-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.au-head .au-back {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: var(--card, #fff); border: 1px solid var(--line, #ECEEF5);
  color: var(--text2, #4A4D59);
}
.au-head h2 { font-size: 17px; margin: 0; font-weight: 700; }
.au-head .au-cnt { margin-left: auto; font-size: 12px; color: var(--text3, #8B90A0); }

/* 顶部现在这条:大卡 + 波形 */
.au-now {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 20px;
  color: #fff; background: var(--grad, linear-gradient(135deg, #6d5efc, #f06aae));
  box-shadow: 0 16px 36px rgba(60, 70, 140, .22);
  cursor: pointer;
}
.au-now::after {
  content: ""; position: absolute; left: -40px; bottom: -70px;
  width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.au-now > * { position: relative; z-index: 1; }
.au-now .au-kicker { font-size: 11.5px; letter-spacing: .8px; opacity: .86; font-weight: 700; }
.au-now h3 { font-size: 18px; line-height: 1.5; margin: 8px 0 6px; font-weight: 700; }
.au-now p { font-size: 12.5px; opacity: .88; margin: 0 0 14px; line-height: 1.6; }
.au-now .au-bigplay {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; border: none;
  color: var(--primary, #6d5efc); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(30, 25, 80, .24);
}
.au-now .au-bigplay svg { width: 23px; height: 23px; }
/* 声波条(纯装饰,播放时动) */
.au-wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-left: auto; }
.au-wave i {
  display: block; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .55);
  height: 8px;
}
.au-now.playing .au-wave i { animation: auWave .9s ease-in-out infinite; }
.au-now .au-wave i:nth-child(2) { animation-delay: .12s }
.au-now .au-wave i:nth-child(3) { animation-delay: .24s }
.au-now .au-wave i:nth-child(4) { animation-delay: .36s }
.au-now .au-wave i:nth-child(5) { animation-delay: .48s }
@keyframes auWave { 0%, 100% { height: 7px } 50% { height: 24px } }

/* 列表 */
.au-list { margin-top: 16px; }
.au-sec { display: flex; align-items: center; margin: 18px 2px 8px; }
.au-sec h2 { font-size: 15px; margin: 0; font-weight: 700; }
.au-sec span { margin-left: auto; font-size: 12px; color: var(--text3, #8B90A0); }
.au-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 10px;
  border-radius: 20px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #ECEEF5);
  box-shadow: 0 6px 18px rgba(40, 36, 90, .05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.au-item.on { border-color: rgba(122, 92, 240, .55); box-shadow: 0 10px 26px rgba(122, 92, 240, .16); }
.au-item .au-ico {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(135deg, #f2eeff, #ffeef6);
  color: var(--primary, #6d5efc);
}
.au-item .au-txt { min-width: 0; flex: 1; }
.au-item .au-txt b {
  display: block; font-size: 14px; font-weight: 650; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.au-item .au-txt .m {
  font-size: 11.5px; color: var(--text3, #8B90A0); margin-top: 3px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.au-item .au-done {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #E9F7EE; color: #16794A; font-weight: 600;
}
.au-item .au-pbar { height: 3px; border-radius: 3px; background: #EFF0F6; margin-top: 7px; overflow: hidden; }
.au-item .au-pbar i { display: block; height: 100%; background: var(--grad, #6d5efc); border-radius: 3px; }
.au-item .au-state { font-size: 11.5px; color: var(--text3, #8B90A0); flex: 0 0 auto; }

/* ---------- 底部播放条 ---------- */
.au-bar {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--tabbar-h, 86px) + var(--tabbar-gap, 0px) + 10px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 14px 34px rgba(40, 36, 90, .16);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .2s;
  pointer-events: none;
}
.au-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.au-bar .au-bico {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: var(--grad, linear-gradient(135deg, #6d5efc, #f06aae));
  box-shadow: 0 6px 16px rgba(109, 94, 252, .28);
}
.au-bar .au-bico svg { width: 19px; height: 19px; }
.au-bar .au-btxt { min-width: 0; flex: 1; }
.au-bar .au-btxt b {
  display: block; font-size: 13px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.au-bar .au-bprog {
  position: relative; height: 3px; border-radius: 3px; background: #E7E8F1; margin-top: 7px;
}
.au-bar .au-bprog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--grad, #6d5efc); }
.au-bar .au-bprog span {
  position: absolute; right: 0; top: 9px; font-size: 10.5px; color: var(--text3, #8B90A0);
}
.au-bar .au-rate {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--primary, #6d5efc);
  background: #F2EEFF; padding: 5px 8px; border-radius: 999px; border: none; cursor: pointer;
}
.au-bar .au-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: #F2F3F8; color: var(--text3, #8B90A0); display: grid; place-items: center; font-size: 14px;
}

/* ---- 深色皮肤(银河系 / 科技霓虹) ----
   ★ 全站的深色皮肤走 body.theme-galaxy / body.theme-tech,并**没有** body.dark 这个类!
     播放条这里是写死的白色毛玻璃,而文字跟着 var(--text) 变白 →
     不补这一段的话,深色皮肤下就是「白底白字」,标题直接看不见。 */
body.theme-galaxy .au-bar,
body.theme-tech .au-bar {
  background: rgba(26, 30, 46, .86);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
body.theme-galaxy .au-item,
body.theme-tech .au-item,
body.theme-galaxy .au-empty,
body.theme-tech .au-empty {
  background: rgba(38, 40, 54, .72);
  border-color: rgba(255, 255, 255, .08);
}
body.theme-galaxy .au-item .au-pbar,
body.theme-tech .au-item .au-pbar,
body.theme-galaxy .au-bar .au-bprog,
body.theme-tech .au-bar .au-bprog { background: rgba(255, 255, 255, .12); }
body.theme-galaxy .au-bar .au-x,
body.theme-tech .au-bar .au-x { background: rgba(255, 255, 255, .10); }
body.theme-galaxy .au-bar .au-rate,
body.theme-tech .au-bar .au-rate { background: rgba(139, 92, 246, .22); }