/* ============================================================
   文章 / 圣经「语音朗读」播放器
   独立命名空间 ht-*，不改动站内任何既有布局。
   主题跟站点纸质感与金色主色协调，支持 5 套配色与手机紧凑形态。
   ============================================================ */
#hnTts{
  --ht-accent:#b8924a;
  --ht-accent-deep:#8a6a2c;
  --ht-accent-pale:rgba(184,146,74,.12);
  --ht-bg:rgba(255,253,248,.94);
  --ht-ink:#2f2a22;
  --ht-ink-2:#6f6555;
  --ht-line:rgba(138,106,44,.22);
  --ht-soft:rgba(184,146,74,.08);
  --ht-shadow:0 18px 48px rgba(58,44,20,.16),0 2px 10px rgba(58,44,20,.08);
  color:var(--ht-ink);
  font-family:inherit;
  box-sizing:border-box;
}
#hnTts[data-theme="ink"]{ --ht-accent:#4a5568;--ht-accent-deep:#2d3748;--ht-accent-pale:rgba(74,85,104,.12);--ht-bg:rgba(250,251,252,.96);--ht-line:rgba(45,55,72,.2);--ht-soft:rgba(74,85,104,.07) }
#hnTts[data-theme="green"]{ --ht-accent:#4f7d5f;--ht-accent-deep:#315c42;--ht-accent-pale:rgba(79,125,95,.12);--ht-bg:rgba(247,251,247,.96);--ht-line:rgba(49,92,66,.2);--ht-soft:rgba(79,125,95,.07) }
#hnTts[data-theme="blue"]{ --ht-accent:#4a6fa5;--ht-accent-deep:#2c4d7d;--ht-accent-pale:rgba(74,111,165,.12);--ht-bg:rgba(248,251,255,.96);--ht-line:rgba(44,77,125,.2);--ht-soft:rgba(74,111,165,.07) }
#hnTts[data-theme="glass"]{ --ht-accent:#c8a763;--ht-accent-deep:#96763a;--ht-accent-pale:rgba(200,167,99,.14);--ht-bg:rgba(32,30,27,.82);--ht-ink:#f6f1e6;--ht-ink-2:#c7bda9;--ht-line:rgba(240,225,190,.24);--ht-soft:rgba(255,255,255,.06);--ht-shadow:0 18px 48px rgba(0,0,0,.34) }

#hnTts *{ box-sizing:border-box }
#hnTts.ht-dock{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  width:min(760px,calc(100vw - 28px));z-index:92;
}
#hnTts.ht-inline{ position:relative;width:100%;max-width:100%;margin:18px 0;z-index:1 }
#hnTts.ht-inline.ht-top{ margin-top:0 }
#hnTts.ht-inline.ht-bottom{ margin-bottom:0 }
/* 滚动吸顶：内联播放器滚到视口上边缘后固定悬浮，不再随正文滚走；
   悬浮型播放器开启后改停在上方边缘（后台 / 前台按钮均可开关）。 */
#hnTts.ht-inline.ht-sticky{ position:sticky;top:8px;z-index:60 }
#hnTts.ht-dock.ht-sticky{ top:8px;bottom:auto }

.ht-card{
  background:var(--ht-bg);
  border:1px solid var(--ht-line);
  border-radius:18px;
  box-shadow:var(--ht-shadow);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease;
}
#hnTts.is-playing .ht-card{ border-color:var(--ht-accent);box-shadow:var(--ht-shadow),0 0 0 3px var(--ht-accent-pale) }
.ht-card::before{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,transparent,var(--ht-accent),transparent);
  opacity:.65;
}

/* —— 顶行 —— */
.ht-main{ display:flex;align-items:center;gap:14px;padding:13px 16px 11px }
.ht-play{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(145deg,var(--ht-accent),var(--ht-accent-deep));
  color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(138,106,44,.3),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s ease,box-shadow .18s ease;position:relative;
}
.ht-play:hover{ transform:scale(1.06);box-shadow:0 8px 22px rgba(138,106,44,.42) }
.ht-play:active{ transform:scale(.96) }
.ht-play:focus-visible,.ht-i:focus-visible,.ht-more:focus-visible{ outline:2px solid var(--ht-accent);outline-offset:3px }
#hnTts.is-playing .ht-play::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--ht-accent);
  animation:htRipple 1.9s ease-out infinite;opacity:.6;
}
@keyframes htRipple{ 0%{transform:scale(.88);opacity:.7} 100%{transform:scale(1.28);opacity:0} }

.ht-mid{ flex:1 1 auto;min-width:0 }
.ht-head{ display:flex;align-items:center;gap:9px;margin-bottom:3px }
.ht-title{ font-size:13px;font-weight:700;letter-spacing:.6px;color:var(--ht-ink);white-space:nowrap }
.ht-badge{
  font-size:10px;letter-spacing:.4px;padding:2px 7px;border-radius:20px;
  background:var(--ht-accent-pale);color:var(--ht-accent-deep);border:1px solid var(--ht-line);white-space:nowrap;
  max-width:min(280px,44vw);overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom;
}
.ht-badge.ht-natural{ background:linear-gradient(90deg,rgba(184,146,74,.18),rgba(184,146,74,.06));font-weight:700 }
.ht-now{
  font-size:12px;color:var(--ht-ink-2);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

/* 波形 */
.ht-wave{ display:flex;align-items:flex-end;gap:2px;height:22px;flex:0 0 auto }
.ht-wave i{
  display:block;width:3px;height:5px;border-radius:3px;background:var(--ht-accent);opacity:.4;
  transition:height .25s ease;
}
#hnTts.is-playing .ht-wave i{ animation:htWave 1.05s ease-in-out infinite;opacity:.85 }
#hnTts.is-playing .ht-wave i:nth-child(2){ animation-delay:.12s }
#hnTts.is-playing .ht-wave i:nth-child(3){ animation-delay:.24s }
#hnTts.is-playing .ht-wave i:nth-child(4){ animation-delay:.36s }
#hnTts.is-playing .ht-wave i:nth-child(5){ animation-delay:.48s }
#hnTts.is-playing .ht-wave i:nth-child(6){ animation-delay:.6s }
#hnTts.is-playing .ht-wave i:nth-child(7){ animation-delay:.72s }
#hnTts.is-playing .ht-wave i:nth-child(8){ animation-delay:.84s }
@keyframes htWave{ 0%,100%{height:5px} 50%{height:20px} }

/* 图标按钮 */
.ht-acts{ display:flex;align-items:center;gap:5px;flex:0 0 auto }
.ht-i{
  width:31px;height:31px;border-radius:9px;border:1px solid var(--ht-line);
  background:var(--ht-soft);color:var(--ht-ink-2);cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.18s ease;
}
.ht-i:hover{ color:var(--ht-accent-deep);border-color:var(--ht-accent);transform:translateY(-1px) }
.ht-i:disabled{ opacity:.35;cursor:default;transform:none }

/* —— 进度条 —— */
.ht-prog-row{ display:flex;align-items:center;gap:10px;padding:0 16px 11px }
.ht-time{ font-size:10.5px;color:var(--ht-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:34px }
.ht-track{
  flex:1;height:5px;border-radius:5px;background:var(--ht-soft);position:relative;cursor:pointer;
  border:1px solid var(--ht-line);
}
.ht-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--ht-accent-deep),var(--ht-accent));transition:width .25s linear;
}
.ht-fill::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--ht-accent);box-shadow:0 0 0 3px var(--ht-bg);
}
.ht-count{ font-size:10.5px;color:var(--ht-ink-2);white-space:nowrap }

/* —— 展开的设置区 —— */
.ht-panel{
  border-top:1px dashed var(--ht-line);background:var(--ht-soft);
  padding:12px 16px 14px;display:none;
}
#hnTts.ht-open .ht-panel{ display:block;animation:htSlide .22s ease }
@keyframes htSlide{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.ht-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px }
/* 前台两个设置按钮：跟随滚屏 / 滚动吸顶 */
.ht-toggles{ display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;padding-top:10px;border-top:1px dashed var(--ht-line) }
.ht-switch{ display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--ht-line);background:var(--ht-bg);color:var(--ht-ink-2);
  font-size:11px;line-height:1.3;cursor:pointer;transition:border-color .18s,color .18s }
.ht-switch i{ position:relative;flex:none;width:24px;height:13px;border-radius:999px;
  background:var(--ht-line);transition:background .18s }
.ht-switch i::after{ content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;
  border-radius:50%;background:var(--ht-bg);transition:transform .18s }
.ht-switch[data-on="1"]{ color:var(--ht-accent-deep);border-color:var(--ht-accent) }
.ht-switch[data-on="1"] i{ background:var(--ht-accent) }
.ht-switch[data-on="1"] i::after{ transform:translateX(11px) }
.ht-switch:hover{ border-color:var(--ht-accent) }
.ht-switch:focus-visible{ outline:2px solid var(--ht-accent);outline-offset:2px }
.ht-field{ min-width:0 }
.ht-field label{ display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;color:var(--ht-ink-2);margin-bottom:6px;letter-spacing:.3px }
.ht-field output{ color:var(--ht-accent-deep);font-weight:700;font-variant-numeric:tabular-nums }
.ht-field input[type=range]{
  width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:4px;
  background:var(--ht-line);outline:none;margin:0;
}
.ht-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ht-accent);border:2px solid var(--ht-bg);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;
}
.ht-field input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--ht-accent);
  border:2px solid var(--ht-bg);cursor:pointer;
}
.ht-field select{
  width:100%;height:29px;padding:0 8px;font-size:11.5px;border-radius:8px;
  border:1px solid var(--ht-line);background:var(--ht-bg);color:var(--ht-ink);outline:none;
}
.ht-field select:focus{ border-color:var(--ht-accent) }
.ht-voice-tip{ grid-column:1/-1;font-size:10.5px;color:var(--ht-ink-2);line-height:1.6;margin-top:-2px }
.ht-voice-tip b{ color:var(--ht-accent-deep) }
.ht-more{
  border:0;background:transparent;color:var(--ht-ink-2);cursor:pointer;font-size:11px;
  padding:4px 6px;border-radius:7px;white-space:nowrap;
}
.ht-more:hover{ color:var(--ht-accent-deep);background:var(--ht-accent-pale) }

/* 收起为小胶囊：只留播放键与展开键，避免悬浮播放器挡住正文 */
#hnTts.ht-mini.ht-dock{ width:auto;left:auto;right:22px;transform:none }
#hnTts.ht-mini.ht-inline{ width:auto;display:inline-block }
#hnTts.ht-mini .ht-card{ border-radius:16px }
#hnTts.ht-mini .ht-main{ padding:8px;gap:8px }
#hnTts.ht-mini .ht-play{ width:44px;height:44px;font-size:15px }
#hnTts.ht-mini .ht-mid,
#hnTts.ht-mini .ht-wave,
#hnTts.ht-mini .ht-prog-row,
#hnTts.ht-mini .ht-panel,
#hnTts.ht-mini .ht-acts .ht-i:not([data-act="min"]),
#hnTts.ht-mini .ht-more{ display:none !important }
#hnTts.ht-mini .ht-acts .ht-i[data-act="min"]{ display:flex }
@media (max-width:767px){ #hnTts.ht-mini.ht-dock{ right:12px;bottom:12px } }

/* —— 正文当前朗读高亮 —— */
.ht-active{
  background:linear-gradient(90deg,var(--ht-accent-pale),transparent) !important;
  box-shadow:inset 3px 0 0 var(--ht-accent) !important;
  border-radius:4px;transition:background .25s ease,box-shadow .25s ease;
}
.article-body .ht-active>p,.article-body p.ht-active{ padding-left:8px;margin-left:-8px }
.bb-v.ht-active{ border-radius:6px }

/* —— 圣经工具条的朗读按钮 —— */
.ht-bible-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--bb-accent,rgba(138,106,44,.4));border-radius:8px;
  background:rgba(184,146,74,.1);color:var(--bb-accent,#8a6a2c);
  padding:7px 12px;font-size:12px;font-weight:600;letter-spacing:.4px;transition:.2s ease;
}
.ht-bible-btn:hover{ background:rgba(184,146,74,.2);transform:translateY(-1px) }
.ht-bible-btn.is-on{ background:rgba(184,146,74,.24);box-shadow:0 0 0 2px rgba(184,146,74,.15) }

/* —— 手机端：默认收成轻巧胶囊 —— */
@media (max-width:767px){
  #hnTts.ht-dock{ bottom:12px;width:calc(100vw - 20px) }
  .ht-card{ border-radius:15px }
  .ht-main{ gap:10px;padding:10px 12px 8px }
  .ht-play{ width:44px;height:44px;font-size:16px }
  .ht-title{ font-size:12px }
  .ht-now{ font-size:11px }
  .ht-wave{ display:none }
  .ht-acts .ht-i[data-act="prev"],.ht-acts .ht-i[data-act="next"]{ display:none }
  .ht-prog-row{ padding:0 12px 9px }
  .ht-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px }
  .ht-panel{ padding:10px 12px 12px }
  #hnTts.ht-compact:not(.ht-open) .ht-prog-row{ display:none }
  #hnTts.ht-compact:not(.ht-open) .ht-badge{ display:none }
}
@media (prefers-reduced-motion:reduce){
  #hnTts *{ animation:none !important;transition:none !important }
}
@media print{ #hnTts{ display:none !important } }

/* ---- 从选中经文开始朗读：小气泡 ---- */
.ht-from{
  position:fixed;z-index:9999;box-sizing:border-box;
  padding:13px 14px 12px;border-radius:14px;
  background:rgba(255,253,248,.98);
  border:1px solid rgba(184,146,74,.35);
  box-shadow:0 18px 40px rgba(58,44,20,.22),0 2px 8px rgba(58,44,20,.1);
  font-family:inherit;color:#2f2a22;
  animation:htFrom .18s ease-out;
}
@keyframes htFrom{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ht-from-h{font-size:13px;font-weight:700;letter-spacing:.02em}
.ht-from-t{margin-top:4px;font-size:11.5px;color:#6f6555}
.ht-from-b{display:flex;gap:8px;margin-top:11px}
.ht-from-b button{
  flex:1;height:34px;border-radius:9px;font-size:12.5px;cursor:pointer;
  border:1px solid rgba(184,146,74,.4);background:#fff;color:#6b5530;font-family:inherit;
  transition:filter .16s,transform .16s;
}
.ht-from-b button:hover{filter:brightness(1.03);transform:translateY(-1px)}
.ht-from-b button:active{transform:translateY(0)}
.ht-from-go{
  background:linear-gradient(145deg,#c9a55e,#a37f36)!important;
  color:#fff!important;border:0!important;font-weight:600;
  box-shadow:0 6px 14px rgba(163,127,54,.32);
}
@media (max-width:520px){.ht-from{width:calc(100vw - 24px)!important;left:12px!important}}