/* ============================================================
   语音朗读器 · 全站共用
   不依赖任何站点 CSS 变量，供主站与 academy 子站共用同一份
   ============================================================ */

/* ---- 右下角悬浮启动按钮 ---- */
.sp-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9997;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(243,217,164,.35);
  background:#8B0000; color:#F3D9A4;
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(90,10,10,.26);
  transition:transform .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.sp-launcher:hover{ transform:translateY(-2px); box-shadow:0 11px 26px rgba(90,10,10,.34) }
.sp-launcher:active{ transform:translateY(0) }
.sp-launcher svg{ width:24px; height:24px; fill:#F3D9A4; display:block }
.sp-launcher.sp-playing{ background:#6D4C0F }
.sp-launcher.sp-playing svg{ fill:#F3D9A4 }

/* 朗读中的呼吸光点 */
.sp-launcher .sp-dot{
  position:absolute; top:-1px; right:-1px;
  width:13px; height:13px; border-radius:50%;
  background:#B8862F; border:2px solid #fff;
  display:none;
}
.sp-launcher.sp-playing .sp-dot{ display:block; animation:sp-pulse 1.4s ease-in-out infinite }
@keyframes sp-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.78)} }

/* ---- 控制面板 ---- */
.sp-panel{
  position:fixed; right:20px; bottom:82px; z-index:9998;
  width:340px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid #E5DCD0; border-radius:12px;
  box-shadow:0 16px 40px rgba(60,40,20,.17);
  padding:0; display:none; overflow:hidden;
}
.sp-panel.sp-open{ display:block }

.sp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 12px; border-bottom:1px solid #EFE8DE;
  background:linear-gradient(180deg,#FBF7F2,#fff);
}
.sp-head b{ font-size:15.5px; color:#2B2622; letter-spacing:.03em }
.sp-head .sp-sub{ font-size:11.5px; color:#8A8178; margin-top:2px; letter-spacing:.02em }
.sp-close{
  border:none; background:none; cursor:pointer; color:#8A8178;
  font-size:19px; line-height:1; padding:2px 4px; border-radius:4px;
}
.sp-close:hover{ background:#F2ECE3; color:#2B2622 }

.sp-body{ padding:14px 16px 15px }

.sp-note{
  font-size:12px; line-height:1.7; color:#8A6416;
  background:#FDF6E9; border:1px solid #EFE0BE; border-radius:6px;
  padding:8px 10px; margin-bottom:12px;
}
.sp-note:empty{ display:none }

/* 分段选择 */
.sp-segsel{ display:flex; gap:6px; margin-bottom:12px }
.sp-segsel select{
  flex:1; min-width:0; font-size:13px; padding:7px 8px;
  border:1px solid #DDD3C6; border-radius:6px; background:#fff;
  color:#3A342E; font-family:inherit;
}
.sp-navbtn{
  width:34px; flex:none; border:1px solid #DDD3C6; background:#fff;
  border-radius:6px; cursor:pointer; color:#5A524A;
  display:flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none;
}
.sp-navbtn:hover{ border-color:#B8862F; color:#8B0000 }
.sp-navbtn svg{ width:14px; height:14px; fill:currentColor }

/* 主操作按钮 */
.sp-main{ display:flex; gap:8px; margin-bottom:12px }
.sp-btn{
  flex:1; padding:9px 10px; font-size:13.5px; border-radius:7px;
  border:1px solid #DDD3C6; background:#fff; color:#3A342E;
  cursor:pointer; font-family:inherit; letter-spacing:.02em;
  transition:all .16s;
}
.sp-btn:hover{ border-color:#B8862F; color:#8B0000 }
.sp-btn.sp-primary{
  background:#8B0000; border-color:#8B0000; color:#F3D9A4;
}
.sp-btn.sp-primary:hover{ background:#6D0000; border-color:#6D0000; color:#F3D9A4 }

/* 整站听（一键学习） */
.sp-site{ margin-bottom:12px }
.sp-site-btn{
  flex:1 0 100%; width:100%;
  padding:11px 12px; font-size:14px; border-radius:8px; font-weight:600; letter-spacing:.02em;
  border:1.5px solid #B8862F; background:linear-gradient(180deg,#FFF7E6,#FBEED2);
  color:#7A4E12; cursor:pointer; font-family:inherit;
  transition:all .16s;
}
.sp-site-btn:hover{ background:linear-gradient(180deg,#FFEFC9,#F7E3B6); color:#5A3A0E; box-shadow:0 3px 10px rgba(184,134,47,.22) }
.sp-site-btn:active{ transform:translateY(1px) }
.sp-siteprog{ font-size:11.5px; color:#8A6416; margin-top:7px; min-height:15px; line-height:1.5 }

/* 播放控制 */
.sp-ctrl{ display:flex; align-items:center; gap:8px; margin-bottom:12px }
.sp-play{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid #C9BFAF; background:#8B0000; cursor:pointer;
  color:#F3D9A4; display:flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none;
}
.sp-play:hover{ background:#6D0000 }
.sp-play svg{ width:18px; height:18px; fill:#F3D9A4 }
.sp-mini{
  height:36px; padding:0 12px; border:1px solid #DDD3C6; background:#fff;
  border-radius:18px; cursor:pointer; color:#5A524A; font-size:13px;
  font-family:inherit; display:inline-flex; align-items:center; gap:5px;
}
.sp-mini:hover{ border-color:#B8862F; color:#8B0000 }
.sp-mini svg{ width:13px; height:13px; fill:currentColor }

/* 进度条 */
.sp-bar{
  height:4px; background:#EFE8DE; border-radius:2px; overflow:hidden; margin-bottom:10px;
}
.sp-bar i{ display:block; height:100%; width:0; background:#B8862F; transition:width .3s }

/* 状态文本 */
.sp-status{
  font-size:12.5px; color:#6B6258; line-height:1.65; margin-bottom:11px;
  min-height:21px;
}
.sp-status b{ color:#8B0000; font-weight:600 }

/* 语速 */
.sp-speed{ display:flex; align-items:center; gap:10px; margin-bottom:11px }
.sp-speed label{ font-size:12.5px; color:#6B6258; flex:none; letter-spacing:.02em }
.sp-speed input[type=range]{ flex:1; accent-color:#8B0000; min-width:0 }
.sp-speed .sp-val{
  font-size:12.5px; color:#8B0000; flex:none; width:38px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* 开关 */
.sp-toggles{ display:flex; flex-wrap:wrap; gap:12px; padding-top:2px }
.sp-toggles label{
  font-size:12.5px; color:#6B6258; display:inline-flex;
  align-items:center; gap:5px; cursor:pointer;
}
.sp-toggles input{ accent-color:#8B0000; margin:0 }

/* ---- 标题旁的分段朗读按钮 ---- */
.sp-seg{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:8px; padding:0;
  border:1px solid #DCD2C4; border-radius:50%;
  background:#fff; color:#8B0000; cursor:pointer;
  vertical-align:middle; -webkit-appearance:none; appearance:none;
  transition:all .16s;
}
.sp-seg:hover{ background:#8B0000; border-color:#8B0000; color:#F3D9A4 }
.sp-seg svg{ width:10px; height:10px; fill:currentColor }
.sp-hide-seg .sp-seg{ display:none }

/* ---- 正在朗读的元素高亮 ---- */
.sp-active{
  background:#FFF8E9 !important;
  border-radius:3px;
  box-shadow:0 0 0 2px #FFF8E9;
}

/* 移动端 */
@media (max-width:640px){
  .sp-launcher{ right:14px; bottom:14px; width:48px; height:48px }
  .sp-launcher svg{ width:21px; height:21px }
  .sp-panel{ right:12px; left:12px; bottom:70px; width:auto; max-width:none }
  .sp-main{ flex-wrap:wrap }
  .sp-btn{ flex:1 0 100% }
}

/* 打印时不显示 */
@media print{
  .sp-launcher, .sp-panel, .sp-seg{ display:none !important }
}