/* ================= 磨耳朵（#/ear）独立样式 =================
   单列一份文件，避免与并行会话共同维护的 style.css 相互覆盖。
   引入：index.html 的 <link href="assets/css/ear.css?v=N"> */
.ear-hero{display:flex;align-items:center;gap:20px;
  background:linear-gradient(120deg,#fffdf7,#f6ecdb);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:18px}
.ear-hero .eh-img{display:block;flex:0 1 56%;max-width:560px;min-width:0;height:auto;border-radius:12px;
  box-shadow:0 6px 20px rgba(31,42,68,.10)}
.eh-meta{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start;
  flex:1 1 auto;min-width:0;padding:0 2px}
.eh-lead{display:flex;flex-direction:column;gap:5px;min-width:0;flex:0 1 auto}
.eh-kicker{font-size:12.5px;font-weight:800;color:var(--cta);letter-spacing:.6px}
/* 原横幅烙在图上的标语改用真实文字承标题层级（磨耳朵「翻开课本，听见原声」；
   练嘴巴 .mh-h1 同款，两处样式保持一致） */
.eh-h1{margin:0;font-size:26px;line-height:1.28;font-weight:900;color:var(--ink);
  letter-spacing:.5px}
.eh-h1::after{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,#2f6bff,#7c4dff)}
.ear-hero p{margin:0;color:var(--ink2);font-size:14px;line-height:1.8;max-width:760px}
.eh-stats{display:flex;flex-wrap:wrap;gap:10px;flex:0 1 auto}
.ehs{background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:12.5px;color:var(--ink2)}
.ehs b{color:var(--brand-d);font-weight:800;font-size:14px;margin:0 2px}

.ear-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start;padding-bottom:96px}
.ear-side{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;position:sticky;top:78px}
.ear-stabs{display:flex;gap:6px;margin-bottom:12px}
.ear-stab{flex:1;padding:8px 4px;border:1px solid var(--line);background:#fff;border-radius:9px;
  cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);font-family:inherit}
.ear-stab:hover{border-color:var(--brand);color:var(--brand-d)}
.ear-stab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ear-side-h{font-size:12.5px;margin:4px 4px 8px;color:var(--ink2)}
.ear-books{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.ear-book{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:9px;text-decoration:none;
  border:1px solid transparent;cursor:pointer}
.ear-book:hover{background:var(--soft)}
.ear-book.on{background:#eef4ff;border-color:#cfe0ff}
.ear-book .eb-t{font-size:13.5px;font-weight:700;color:var(--ink)}
.ear-book.on .eb-t{color:var(--brand-d)}
.ear-book .eb-m{font-size:11.5px;color:var(--ink2)}

.ear-main{min-width:0}
.ear-loading{font-size:13px;color:var(--ink2);padding:26px 8px;text-align:center}
.ear-loading::before{content:'⏳ '}
.ear-empty{font-size:13.5px;color:var(--ink2);padding:22px 16px;text-align:center;background:#fff;
  border:1px dashed var(--line);border-radius:12px}
.ear-main-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.emh-t{font-size:18px;font-weight:900;color:var(--ink)}
.emh-sub{font-size:12.5px;font-weight:600;color:var(--ink2);margin-left:8px}
.ear-zipbtn{white-space:nowrap}

.ear-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin-bottom:12px}
.eb-lab{font-size:12.5px;color:var(--ink2);font-weight:700}
.eb-sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.ear-mbtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font-size:13px;
  font-weight:700;color:var(--ink2);cursor:pointer;font-family:inherit;white-space:nowrap}
.ear-mbtn:hover{border-color:var(--brand);color:var(--brand-d)}
.ear-mbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ear-mbtn.ear-playall{background:linear-gradient(135deg,#ff8a5c,#ff5a3c);border:none;color:#fff}
/* 「每句 N 遍」选择器（工具条处）：与 .ear-mbtn 同款外观 */
.ear-rep{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;
  border-radius:9px;padding:5px 10px;font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap;cursor:pointer}
.ear-rep:hover{border-color:var(--brand);color:var(--brand-d)}
.ear-rep select{font-size:13px;font-weight:700;color:var(--brand-d);border:1px solid var(--line);
  border-radius:7px;background:#fff;padding:2px 4px;cursor:pointer;font-family:inherit}
.eb-hint{font-size:11.5px;color:#9aa3b2;margin-left:auto}

.ear-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ear-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;font-family:inherit}
.ear-chip:hover{border-color:var(--brand);color:var(--brand-d)}
.ear-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ear-chip i{font-style:normal;font-size:11px;background:rgba(0,0,0,.08);border-radius:10px;padding:0 6px}
.ear-chip.on i{background:rgba(255,255,255,.25)}

.ear-track{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:12px;background:#fff}
.ear-track.playing{border-color:var(--brand);box-shadow:0 4px 18px rgba(47,107,255,.12)}
.et-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.et-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:none;background:var(--brand);color:#fff;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.et-play:hover{background:var(--brand-d)}
.ear-track.playing .et-play{background:var(--cta)}
.et-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.et-tt b{font-size:15px;color:var(--ink)}
.et-meta{font-size:11.5px;color:var(--ink2);margin-top:1px}
.et-dl{flex:0 0 auto;font-size:15px;color:var(--ink2);text-decoration:none;border:1px solid var(--line);
  border-radius:9px;padding:6px 11px}
.et-dl:hover{border-color:var(--brand);color:var(--brand-d);background:#eef4ff}
.et-lines{padding:2px 0}
.et-line{display:flex;gap:10px;align-items:flex-start;padding:7px 16px;border-top:1px dashed var(--line);cursor:pointer}
.et-line:first-child{border-top:none}
.et-line:hover{background:var(--soft)}
.et-line.playing{background:#eef4ff}
.et-sp{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--brand-d);min-width:56px}
.et-en{flex:1;font-size:14px;color:var(--ink);line-height:1.7}
.et-zh{flex:0 0 auto;max-width:42%;font-size:12.5px;color:var(--ink2)}

/* 宽度对齐「上面的内容框架」：正文容器 main 为 max-width:1180px + 左右 padding:22px，
   故内容框宽 = min(1180px, 视口) − 44px，水平居中。
   播放条用同样口径（width:calc(100% − 44px) 上限 1136px + margin:0 auto 居中），
   左/右边缘即可与 .ear-wrap / .ear-tracks 正文框严格对齐（不再铺满整屏）。 */
.ear-player{position:fixed;left:0;right:0;bottom:0;margin:0 auto;width:calc(100% - 44px);max-width:1136px;
  z-index:40;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(20,30,60,.10);padding:9px 22px;display:flex;align-items:center;gap:16px}
.ep-now{flex:0 0 auto;max-width:46%;display:flex;flex-direction:column;gap:2px;line-height:1.35;min-width:0}
.epn-b{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epn-u{font-size:11px;color:#9aa3b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epn-t{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epn-i{font-size:11px;color:var(--brand-d);font-weight:700}
/* 「第 k/N 句 · 第 p/M 遍」徽标：独占一行、完整可见（句数变多后徽标变长，不能被挤压裁切） */
#earNowPass{margin-left:0;align-self:flex-start;max-width:100%;font-size:12px;line-height:1.5;
  white-space:nowrap;overflow:visible}
.ear-player audio{flex:1;min-width:0;height:38px}
.ep-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:8px}
/* 「每句 N 遍」选择器（底部播放条处） */
.ep-opt{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink2);
  white-space:nowrap;cursor:pointer}
.ep-opt select{font-size:12.5px;font-weight:700;color:var(--brand-d);border:1px solid var(--line);
  border-radius:7px;background:#fff;padding:3px 5px;cursor:pointer;font-family:inherit}
.ep-opt select:hover{border-color:var(--brand)}
.ep-b{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 11px;font-size:13px;
  cursor:pointer;font-family:inherit;color:var(--ink2);font-weight:700;white-space:nowrap}
.ep-b:hover{border-color:var(--brand);color:var(--brand-d)}
.ep-b.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ep-b.ep-stop{color:#c0392b;border-color:#f0c8c0}
.ep-b.ep-stop:hover{background:#fff3f0;border-color:#e08e7c}

.ear-dl-mask{position:fixed;inset:0;z-index:60;background:rgba(20,26,40,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.ear-dl-box{background:#fff;border-radius:14px;padding:22px 26px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.28);text-align:center}
.ear-dl-box b{font-size:16px;color:var(--ink)}
.ear-dl-bar{height:10px;background:var(--soft);border-radius:6px;overflow:hidden;margin:16px 0 10px}
.ear-dl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5b9bff,#2f6bff);transition:width .2s}
.ear-dl-box p{margin:4px 0;font-size:13px;color:var(--ink2)}
.ear-dl-box .ear-dl-tip{font-size:11.5px;color:#9aa3b2}

@media(max-width:900px){
  .ear-wrap{grid-template-columns:1fr;padding-bottom:120px}
  .ear-side{position:static}
  .ear-books{max-height:none;flex-direction:row;flex-wrap:wrap}
  .ear-book{flex:1 1 44%;border:1px solid var(--line)}
  .ear-hero{display:block;padding:12px}
  .ear-hero .eh-img{width:100%;max-width:none}
  .eh-meta{align-items:stretch;margin-top:14px}
  .eh-lead{flex:1 1 100%}
  .eh-h1{font-size:21px}
  .eh-stats{flex:1 1 100%;min-width:0}
  .ear-player{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .ep-now{max-width:100%;flex:1 1 100%;flex-direction:row;gap:8px;align-items:baseline}
  .epn-u{display:none}
  .ear-player audio{flex:1 1 100%;order:3}
  .ep-ctrl{margin-left:auto}
  .et-zh{display:none}
  .eb-hint{display:none}
}