/* ===== 教程页 ===== */
#tutorialPage {
  position: fixed; left:0; right:0; top:0; bottom:0; z-index: 90;
  background: #fff; display: none; flex-direction: column;
}
#tutorialPage.show { display: flex; }
.tut-header {
  flex-shrink:0; height:48px; background:linear-gradient(135deg,#FC6C3C,#F8A83C);
  color:#fff; display:flex; align-items:center; padding:0 10px; gap:6px;
}
.tut-header h2 { flex:1; font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tut-back, .tut-ic {
  width:36px; height:36px; border:0; background:rgba(255,255,255,.2); color:#fff;
  border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.tut-ic.on { background:#FF6B3D; }

.tut-frame-wrap { flex:1; min-height:0; }
#tutFrame { width: 100%; height: 100%; border: none; display: block; }

/* ===== v3.4 md图文详情头部（封面 + 板块角标 + 分类 + 时间/平台/阅读量） ===== */
#mdCover { position: relative; height: 240px; overflow: hidden; background: #F5EEE6; flex-shrink: 0; }
#mdCoverImg { width: 100%; height: 100%; object-fit: cover; display: block; }
#mdCoverBg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
#mdCoverChar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 58px; font-weight: 800; color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.12); }
/* v3.5 封面圆钮：无圆框，图标直接显示（白色+投影保证图上可见） */
.md-cover-top { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; align-items: center; gap: 14px; z-index: 2; }
.md-cover-top .md-spacer { flex: 1; }
.md-cbtn { width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: #fff; font-size: 21px; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: 1; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* v8.12: 视频模式 —— 顶部栏白底，按钮变深色 */
#mdCover.video-mode { height: auto; min-height: 44px; background: #fff; overflow: visible; }
#mdCover.video-mode #mdCoverImg,
#mdCover.video-mode #mdCoverBg,
#mdCover.video-mode #mdCoverChar { display: none !important; }
#mdCover.video-mode .md-cover-top { position: relative; top: auto; left: auto; right: auto; padding: 6px 10px; background: #fff; }
#mdCover.video-mode .md-cbtn { color: #241E18; text-shadow: none; }
#mdCover.video-mode .md-cbtn.on { color: #FF6B3D; }

/* v8.19 视频吸顶时 mdCover 顶栏也一起吸顶（最高 z-index，不被视频盖住） */
#mdCover.md-cover-float {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
/* v8.37 非视频图文：封面滚走后按钮排（返回/活力值/点赞/收藏/分享）固定顶部，始终可见可用 */
#mdCover:not(.video-mode) .md-cover-top.md-topbar-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 8px 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  z-index: 900;
}
#mdCover:not(.video-mode) .md-cover-top.md-topbar-fixed .md-cbtn { color: #241E18; text-shadow: none; }
#mdCover:not(.video-mode) .md-cover-top.md-topbar-fixed .md-cbtn.on { color: #FF6B3D; text-shadow: none; }

/* v5.5 图文封面右上角活力值徽标（问号小圆圈 + 实时总数，点击看规则） */
.md-cbtn.vit-cover { width: auto; border-radius: 20px; background: rgba(0,0,0,.32); padding: 0 11px 0 5px; gap: 5px; text-shadow: none; }
.md-cbtn.vit-cover .vit-q { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #FC6C3C; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0; }
.md-cbtn.vit-cover .vit-n { font-size: 13px; font-weight: 700; color: #fff; }
.md-cbtn:active { transform: scale(.9); }
.md-cbtn.on { color: #FF6B3D; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.md-board { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); color: #D9541F; font-size: 12px; font-weight: 700; border-radius: 14px; padding: 5px 12px; z-index: 2; }

.md-head { padding: 16px 18px 0; flex-shrink: 0; }
.md-head h1 { font-size: 20px; line-height: 1.4; color: #241E18; margin: 0 0 10px; font-weight: 800; }
.md-cat { display: inline-block; background: #FFF1E6; color: #C2571F; font-size: 12px; border-radius: 12px; padding: 4px 12px; margin-bottom: 12px; }
.md-meta { display: flex; gap: 8px; margin-bottom: 6px; }
.md-mi { flex: 1; background: #F5F6F7; border-radius: 10px; padding: 8px 4px; text-align: center; min-width: 0; }
.md-mi span { display: block; font-size: 10.5px; color: #A89C90; margin-bottom: 3px; white-space: nowrap; }
.md-mi b { font-size: 12.5px; color: #241E18; font-weight: 700; word-break: break-all; }

/* v8.19 视频滚动吸顶：向下翻页时 biliPlayerWrap 滚出屏幕顶部则变成 fixed 吸顶，
   视频继续播放；同时 mdCover 顶栏也一起吸顶（在最上面），互不遮挡；
   原位置用占位撑住避免跳动；滚回原位置附近自动取消吸顶恢复原貌 */
#biliPlayerWrap.bili-float {
  position: fixed !important;
  top: 44px !important;   /* mdCover 顶栏高度 44px，视频在它下面 */
  left: 0 !important;
  right: 0 !important;
  z-index: 9998 !important;   /* 比 mdCover 吸顶 (9999) 低一层 */
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
#biliPlayerWrap.bili-float.float-hidden { visibility: hidden; }

/* 观看历史 / 收藏列表页 */
#myListPage {
  position: fixed; left:0; right:0; top:0; bottom:0; z-index: 92;
  background: #fff; display: none; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  overflow-y: auto;
}
/* v8.27 列表页关闭按钮：圆形半透明底 + 白色X图标，与详情页圆形按钮风格统一 */
.ml-close {
  width:36px; height:36px; flex-shrink:0; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ml-close:active { background:rgba(255,255,255,.35); }

/* v8.29 视频区下方按钮行：直播课程预约 + 课程列表（位于视频与图文标题之间） */
#tutVidBtns {
  display: flex; gap: 10px;
  padding: 10px 14px 4px;
  background: #fff;
}
#tutVidBtns button {
  flex: 1; min-width: 0; height: 38px;
  border-radius: 19px; font-size: 14px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tutVidBtns .tvb-live {
  border: 0; color: #fff;
  background: linear-gradient(135deg, #FC6C3C, #F8A83C);
  box-shadow: 0 2px 8px rgba(252,108,60,.35);
}
#tutVidBtns .tvb-live.living { animation: livePulse 1.2s ease-in-out infinite; }
#tutVidBtns .tvb-course {
  background: #fff; color: #FC6C3C;
  border: 1px solid #FC6C3C;
}
#tutVidBtns button:active { transform: scale(.97); }
#myListBody { flex: 1; padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
.myli { background:#F5F6F7; border-radius:16px; padding:13px 15px; margin-bottom:10px; cursor:pointer; -webkit-tap-highlight-color: transparent; }
.myli:active { background:#ECEDEC; }
.myli-t { font-size:15px; color:#241E18; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.myli-d { font-size:12px; color:#A89C90; margin-top:5px; }
.my-empty { text-align:center; color:#A89C90; font-size:13px; padding:60px 20px; line-height:1.9; }