header.sticky,
header.sticky.top-0,
header.sticky.top-0.z-40 {
    background-color: rgba(15, 23, 42, 0%) !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* =====================
   play_sp 专用：让导航/搜索在大屏也遵循“小屏逻辑”，并且宽度不超过视频宽度
   说明：base.html 的 header 在桌面端默认 max-w-6xl，会比竖屏视频更宽。
   这里把 header 的内容区域(logo/搜索/按钮/分类条/抽屉)约束到视频实际宽度。
   ===================== */

/* 让 header 内部容器可以被我们用 JS 动态设置宽度 */
header.sticky .max-w-6xl {
  width: var(--sp-video-w, 100%) !important;
  max-width: var(--sp-video-w, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 桌面端显示的搜索框也不允许超过视频宽度（避免 max-w-xl 变大后仍溢出） */
header.sticky form[action="/search"].hidden.md\:flex {
  max-width: var(--sp-video-w, 100%) !important;
}

/* 分类横向条的容器与渐变遮罩宽度也对齐视频宽度 */
header.sticky .fade-x,
header.sticky .fade-x > div {
  max-width: var(--sp-video-w, 100%) !important;
}

/* base.html 的分类抽屉 overlay/panel：限制抽屉最大宽度不超过视频宽度 */
#cat-panel {
  max-width: min(320px, var(--sp-video-w, 100%)) !important;
}

/* 移动端 header 的第二行搜索框：同样限制宽度 */
header.sticky form[action="/search"].md\:hidden {
  max-width: var(--sp-video-w, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* play_sp：完全模拟小屏 header 布局
   - 隐藏桌面端第一行搜索（base.html: .hidden.md:flex）
   - 强制显示第二行搜索（base.html: .md:hidden）
*/
html.sp-play header form[action="/search"].hidden.md\:flex{ display:none !important; }
html.sp-play header form[action="/search"].md\:hidden{ display:block !important; }

/* play_sp：桌面端分類横向条不使用（小屏逻辑是抽屉），避免占空间/宽度超视频 */
html.sp-play header .fade-x.hidden.md\:block{ display:none !important; }

/* base.html 的分类按钮（btn-cat）在 desktop 被 md:hidden 隐藏；在 play_sp 强制显示，保证“导航=抽屉” */
html.sp-play header #btn-cat{ display:inline-flex !important; }

header input[name="q"],
header input[placeholder],
header .max-w-6xl input,
header .relative input {
    background-color: rgba(17, 24, 39, 0%) !important;
    border-color: rgba(255, 255, 255, 0%) !important;
}
@media (min-width: 1024px) {
  #sp_viewport, html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  #sp_viewport::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 0px; height: 0px; background: transparent; display: none;
  }
}
:root{ --vh:100vh; }
html, body { height:100%; margin:0; padding:0; overflow-x: hidden !important; }
.container{position:relative;height:calc(var(--vh)) !important;width:100% !important;background:#000;color:#fff;overflow:hidden !important}
#sp_viewport{height:calc(var(--vh)) !important;width:100% !important;overflow-y:auto;scroll-snap-type:y mandatory}
.ep-card{width:100% !important;height:calc(var(--vh)) !important;position:relative;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;overflow:hidden}
.ep-card > .bg{position:absolute;inset:0;background:#000;pointer-events:none}
#sp_player_wrap{position:fixed;left:0;right:0;top:0;height:calc(var(--vh)) !important;z-index:0;pointer-events:none;margin:0 auto;max-width:100vw;overflow:hidden;width:100vw}
#sp_player_wrap video{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  height:calc(var(--vh)) !important;
  width:auto !important;
  max-width:100vw !important;
  max-height:100vh !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  pointer-events:none !important;
  display:block !important;
}
#sp_player_wrap > * { box-sizing: border-box; }
#danmu_layer{position:fixed;inset:0;z-index:15;pointer-events:none}
#sp_toolbar{position:fixed;right:1rem;bottom:25%;z-index:60;display:flex;flex-direction:column;gap:0.75rem;pointer-events:auto}
#sp_toolbar button{pointer-events:auto}
.like-icon{ color: #ff4d6d !important; }
#sp_start_overlay{position:fixed;inset:0;z-index:70;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.2));display:none;align-items:center;justify-content:center}
#sp_start_overlay .box{background:rgba(0,0,0,.6);padding:18px;border-radius:8px;color:#fff}

/* 目录抽屉（Table of Contents） */
#sp_toc_drawer{
  position:fixed;
  left:0;
  right:auto;
  /* top/bottom/height 由 JS 根据视频位置动态设置 */
  top:0;
  bottom:0;
  /* 使用自动宽度并限制最大值，避免固定 300px 导致在窄视频上无法完全隐藏 */
  width:auto;
  max-width:50vw;
  box-sizing: border-box;
  /* 默认强制移出视口（确保在宽屏也完全隐藏），JS 会覆盖 inline transform 为打开/关闭态 */
  transform: translateX(-120%);
  /* 设为透明背景（仍保留阴影以便分离层次） */
  background: rgba(0,0,0,0.0);
  color:#fff;
  z-index:108;
  box-shadow: 2px 0 18px rgba(0,0,0,0.6);
  transition: transform 240ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
  padding:12px 8px;
  /* 隐藏滚动条（WebKit/Chromium/Edge/Firefox/IE）但保留滚动能力 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

#sp_toc_drawer::-webkit-scrollbar{ width: 0 !important; height: 0 !important; }

#sp_toc_drawer .toc-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; font-weight:600; }
#sp_toc_drawer .toc-list{ display:flex; flex-direction:column; gap:6px; padding:6px 4px 40px 4px; }
#sp_toc_drawer .toc-item{ padding:10px 12px; border-radius:8px; background:rgba(255,255,255,0.02); cursor:pointer; color:#fff; font-size:14px; text-align:left; }
#sp_toc_drawer .toc-item.active{ background:rgba(255,255,255,0.10); color:#fff; }
#sp_toc_drawer .toc-item:hover{ background:rgba(255,255,255,0.04); }
#sp_toc_drawer .toc-sub{ font-size:12px; color:rgba(255,255,255,0.7); margin-top:6px; }

/* small screens: slightly wider drawer */
@media (max-width: 640px){
  #sp_toc_drawer{ width:78vw; }
}

.fly-heart {
  position: fixed;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #ff4d6d;
  z-index: 120;
  pointer-events: none;
  transition: transform 1000ms cubic-bezier(.2,.9,.2,1), opacity 1000ms linear;
  will-change: transform, opacity;
}
.fly-heart.small { width:28px; height:28px; font-size:18px; }

/* =====================
   play_sp：分类导航抽屉（base.html: #cat-overlay/#cat-panel）
   - 抽屉贴视频右边内边界（right 由 JS 写入）
   - 背景透明
   - 宽度不超过视频宽度
   ===================== */
html.sp-play #cat-overlay #cat-panel{
  background: rgba(0,0,0,0.0) !important;
  /* 右边界对齐由 JS 动态设置 panel.style.right */
  right: var(--sp-cat-right, 0px);
  max-width: min(320px, var(--sp-video-w, 100%)) !important;
  border-left-color: rgba(148,163,184,0.10) !important;
}

/* play_sp：分类抽屉的遮罩透明（仍可点关闭） */
html.sp-play #cat-backdrop{
  background: rgba(0,0,0,0.0) !important;
}

/* ============ 分类抽屉按钮：只保留一个 ============ */
/* 小屏：隐藏 base header 右侧的 #btn-cat（避免与小屏其它入口重叠） */
@media (max-width: 767px){
  html.sp-play header #btn-cat{ display:inline-flex !important; }
}
/* 大屏：显示 #btn-cat，并把按钮改成透明 */
@media (min-width: 768px){
  html.sp-play header #btn-cat{ display:inline-flex !important; }
}
html.sp-play header #btn-cat{
  background: rgba(0,0,0,0.0) !important;
  border-color: rgba(255,255,255,0.0) !important;
}

/* =====================
   play_sp：底部左右滑动快进/后退 UI（进度条 + 时间）
   ===================== */
#sp_seek_gesture{ pointer-events:auto; }

#sp_seek_ui{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px 12px 18px 12px;
  box-sizing:border-box;
  opacity:0;
  transform:translateY(10px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events:none; /* UI 不吃事件，事件由 #sp_seek_gesture 接收 */
}

#sp_seek_gesture.seeking #sp_seek_ui{
  opacity:1;
  transform:translateY(0);
}

#sp_seek_time_row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:rgba(255,255,255,0.92);
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}

#sp_seek_time_row span{
  font-variant-numeric: tabular-nums;
}

#sp_seek_bar{
  position:relative;
  margin-top:8px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.22);
  overflow:hidden;
}

#sp_seek_bar_played{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius:999px;
  background:rgba(255,255,255,0.45);
}

#sp_seek_bar_preview{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius:999px;
  background:rgba(59,130,246,0.95); /* 蓝色预览 */
}

#sp_seek_knob{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:12px;
  height:12px;
  border-radius:999px;
  background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  left:0%;
}