/* ============================================================
   MXTU MAX 响应式优化样式 v1.0 (移动端 + 桌面端)
   加载顺序:置于 style.css / 主题色 css / user.css 之后
   说明:全部为增强型覆盖,不改动原模板文件,可随时整体移除
   ============================================================ */

/* ------------------------------------------------------------
   0. 通用基础优化(两端通用)
   ------------------------------------------------------------ */
:root {
  /* 主色变量,与原模板按钮主色一致,方便统一调整 */
  --mx-primary: #00b7ff;
  --mx-primary-deep: #0095d8;
  --mx-radius: 8px;
  --mx-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.18);
  --mx-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  /* 去除移动端点击灰色高亮(安卓/iOS) */
  -webkit-tap-highlight-color: transparent;
}

html {
  /* 桌面端锚点/回顶平滑滚动;iOS 原生已带动量滚动不受影响 */
  scroll-behavior: smooth;
  /* Safari 字体抗锯齿,文字更清晰 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* 双端:防止意外横向溢出产生白边 */
  overflow-x: hidden;
  /* 文本选中色统一品牌化 */
  text-rendering: optimizeSpeed;
}

::selection {
  background: var(--mx-primary);
  color: #fff;
}

/* 图片懒加载占位底色,减少加载时布局跳动(CLS) */
.module-item-pic img.lazyload,
img.lazy,
img[data-original] {
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;
  animation: mx-shimmer 1.4s linear infinite;
}

@keyframes mx-shimmer {
  to { background-position-x: -200%; }
}

/* 深色模式下占位底色跟随变暗
   主题值由 include.html 的切换脚本写入 data-mx-theme 属性 */
html[data-mx-theme="black"] img.lazyload {
  background: linear-gradient(110deg, #1a1a1a 8%, #262626 18%, #1a1a1a 33%);
  background-size: 200% 100%;
}

/* 键盘 Tab 聚焦可见性(无障碍,桌面端受益) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.footer-item:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   1. 桌面端优化(≥1025px)
   ------------------------------------------------------------ */
@media (min-width: 1025px) {

  /* 1.1 自定义滚动条(WebKit) */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.6);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
  }

  /* Firefox 滚动条 */
  * {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
  }

  /* 1.2 tab 项底部指示条动画过渡 */
  .module-tab-item {
    transition: color 0.2s ease, background 0.2s ease;
  }

  /* 1.3 播放列表链接悬停底色平滑 */
  .module-play-list-link {
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* 1.4 超宽屏(≥1789px)内容区防过度拉伸已由原模板处理,
     此处仅约束正文区块最大宽度保护阅读体验 */
  .footer-content {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   1b. 桌面端悬停增强(仅限支持悬停的输入设备)
   @media (hover:hover) + (pointer:fine):触屏设备(平板/触屏本)
   上 tap 触发的 :hover 会"粘滞"不消失,隔离后触屏不再出现
   卡片悬浮/按钮上浮等假悬停状态
   ------------------------------------------------------------ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {

  /* 1b.1 海报卡片悬停:整体上浮 + 图片放大,纯 GPU transform 不触发重排 */
  .module-card-item,
  .module-poster-item,
  .module-item {
    transition: transform 0.28s var(--mx-ease);
    will-change: transform;
  }
  .module-card-item:hover,
  .module-poster-item:hover {
    transform: translateY(-6px);
    z-index: 5;
  }

  .module-item-pic {
    overflow: hidden;
  }
  .module-item-pic img {
    transition: transform 0.45s var(--mx-ease), opacity 0.3s ease;
  }
  .module-item-cover:hover .module-item-pic img {
    transform: scale(1.06);
  }

  /* 1b.2 卡片悬停投影(放在 cover 上避免被 overflow 裁剪) */
  .module-item-cover {
    transition: box-shadow 0.28s var(--mx-ease);
  }
  .module-item-cover:hover {
    box-shadow: var(--mx-shadow-hover);
  }

  /* 1b.3 导航/标题链接悬停过渡 */
  .navbar a,
  .module-title a,
  .footer-content a {
    transition: color 0.2s ease, opacity 0.2s ease;
  }
  .navbar a:hover,
  .module-title a:hover {
    opacity: 0.75;
  }

  /* 1b.4 浮动按钮组(深色切换/留言/回顶)悬停增强 */
  .fixedGroup-item {
    transition: transform 0.25s var(--mx-ease), opacity 0.25s ease;
  }
  .fixedGroup-item:hover {
    transform: translateY(-3px);
  }

  /* 1b.5 搜索按钮悬停 */
  .search-btn {
    transition: opacity 0.2s ease;
  }
  .search-btn:hover {
    opacity: 0.85;
  }
}

/* ------------------------------------------------------------
   2. 平板端优化(560px - 1024px)
   ------------------------------------------------------------ */
@media (min-width: 560px) and (max-width: 1024px) {
  /* 平板触控目标比鼠标大,间隔适当放宽 */
  .module-tab-item {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* 平板横滑列表隐藏滚动条但保留滑动 */
  .navbar .swiper-wrapper::-webkit-scrollbar,
  .module-tab-items::-webkit-scrollbar {
    display: none;
  }
}

/* ------------------------------------------------------------
   3. 移动端优化(≤559px)
   ------------------------------------------------------------ */
@media (max-width: 559px) {

  /* 3.1 全局触控:消除双击缩放延迟,允许浏览器原生手势 */
  a, button, .footer-item, .module-tab-item,
  .module-play-list-link, .header-op-list-btn {
    touch-action: manipulation;
  }

  /* 3.2 底部固定导航(仅移动端显示):iPhone 刘海屏安全区适配,
     原 55px 高度不变,通过安全区内边距避开 Home 指示条;
     背景色不在此声明:浅色沿用 style.css 的 #fff,
     深色由 black.css 的 !important 接管,避免覆盖 */
  .footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: constant(safe-area-inset-bottom, 0px); /* iOS 11.0-11.2 */
    /* 底部导航渐隐分隔,视觉更轻 */
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.06);
    /* 层级提到横向滚动组件之上,避免被遮挡 */
    z-index: 999;
  }

  /* 3.3 底部导航条目:点击反馈 + 增大触控热区 */
  .footer-item {
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.12s ease;
  }
  .footer-item:active {
    opacity: 0.55;
  }

  /* 3.4 正文底部留出底部导航高度 + 安全区,防内容被遮挡 */
  .page .main,
  .homepage .main {
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }

  /* 3.5 横滑组件(导航/标签):启用 iOS 动量滚动 */
  .navbar .swiper-wrapper,
  .module-tab-items,
  .module-tab-items-box,
  .module-play-list-content,
  .search-tag {
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条但保留横滑能力 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .navbar .swiper-wrapper::-webkit-scrollbar,
  .module-tab-items::-webkit-scrollbar,
  .module-play-list-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* 3.6 iOS 输入框聚焦自动放大问题:字体≥16px 即不触发 */
  .search-input,
  input[type="text"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 3.7 悬浮按钮组(右侧回顶等)避开底部导航,整体上移 */
  .fixedGroup {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }

  /* 3.8 卡片圆角与信息截断,小屏更紧凑 */
  .module-item-cover {
    border-radius: var(--mx-radius);
    overflow: hidden;
  }
  .module-card-item .module-item-title,
  .module-poster-item .module-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
  }

  /* 3.9 播放按钮触控热区增大(剧情页"立即播放") */
  .module-info-play .main-btn,
  .module-mobile-play .main-btn {
    min-height: 44px;
  }

  /* 3.10 减少移动端重绘成本:关闭非必要阴影 */
  .module-blocklist {
    box-shadow: none;
  }

  /* 3.9 横屏(手机横向)时隐藏底部导航压缩留白,靠顶部导航操作 */
  @media (orientation: landscape) and (max-height: 500px) {
    .footer {
      display: none;
    }
    .page .main,
    .homepage .main {
      padding-bottom: 20px;
    }
  }
}

/* ------------------------------------------------------------
   4. 播放页双端优化
   ------------------------------------------------------------
   集数排版修复:此前误将 grid 加到 .module-play-list(滚动容器)上,
   导致其唯一子元素 .module-play-list-content 被塞进单个 ~110px 网格
   单元,集数标签塌缩变窄、"第01集"被截断为"第..."。
   原生 style.css 已按断点定义了完善的每行列数,此处不再覆盖:
     ≥1550px        base 10/行  large 7/行  larger 5/行
     ≤1549px        base  8/行  large 5/行  larger 4/行
     播放页侧栏(≥1025px 且 .player)  base 3/行 large 2/行 larger 1/行
     ≤1024px        base  5/行  large 3/行  larger 3/行
     ≤559px(手机)   base  4/行  large 2/行  larger 2/行
   ------------------------------------------------------------ */

/* 播放器容器上方留出呼吸空间,视频区域圆角 */
@media (min-width: 1025px) {
  .player .player-box,
  #playleft,
  #playleft iframe,
  #playleft video {
    border-radius: 10px;
  }
}

/* ============================================================
   7. 播放源选择改为一排平铺显示(两端统一)
   原:桌面端 Swiper 横滑需滑动切换 / 移动端点击弹底部面板选择
   改:所有播放源直接一排展示,active 高亮当前源,点击即切源
   涉及模板:mxpro/html/vod/play_list.html(播放页)、playlist.html(详情页)
   ============================================================ */

/* 7.1 一排容器:单行不换行,源多时可横向滑动(隐藏滚动条保持整洁) */
.module-tab.play-source-tab {
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.module-tab.play-source-tab::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 7.2 集数角标:由原绝对定位悬浮改为内联小徽章,一排内不遮挡相邻源 */
.play-source-tab .module-tab-item small {
  position: static;
  display: inline-block;
  transform: none;
  margin-left: 5px;
  padding: 0 5px;
  height: 17px;
  line-height: 17px;
  font-size: 11px;
  border-radius: 4px;
  box-shadow: none;
  vertical-align: 1px;
}

/* 当前源角标加深底色,黄底/白底/深色主题下均清晰可读 */
.play-source-tab .module-tab-item.active small {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* 7.3 桌面端(≥560px) */
@media (min-width: 560px) {

  /* 播放页选集区容器放宽,让一排 tab 有足够空间 */
  .player .player-heading .module-tab {
    max-width: 100%;
    white-space: nowrap;
  }

  /* 详情页:源一排放入浅灰胶囊容器,与原下拉标签观感统一 */
  .view .play-source-tab {
    width: auto;
    background: #e9ecef;
    border-radius: 8px;
    padding: 3px;
  }

  /* 深色主题下胶囊容器换深色底 */
  html[data-mx-theme="black"] .view .play-source-tab {
    background: #16161a;
  }

  /* 详情页标题高度自适应(原 33px 固定高放不下一排源) */
  .view .module-heading.player-heading {
    height: auto;
  }

  /* 详情页激活源为圆角胶囊,不做文件夹式拼接 */
  .view .play-source-tab .module-tab-item.active {
    border-radius: 6px;
  }

  /* 少量源时整排靠右(与标题同行);首项用 margin-left:auto
     而非 justify-content:flex-end,避免溢出滚动时丢首源 */
  .play-source-tab > .module-tab-item:first-child {
    margin-left: auto;
  }

  .view .play-source-tab > .module-tab-item:first-child {
    margin-left: 0;
  }

  /* 相邻源间距 */
  .play-source-tab .module-tab-item + .module-tab-item {
    margin-left: 4px;
  }

  /* 源名过长省略号,保证单排不换行 */
  .play-source-tab .module-tab-item {
    flex: 0 0 auto;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 7.4 移动端(<560px):播放源独占标题下一整行,等分自适应,
   覆盖原底部弹出面板与 33.33% 网格下拉样式 */
@media (max-width: 559px) {

  /* 标题与播放源分行 */
  .player-heading {
    flex-wrap: wrap;
  }

  .player-heading .module-tab {
    width: 100%;
    margin-top: 10px;
  }

  /* 每个源:自适应一排,源多时收缩并保持横滑 */
  .play-source-tab .module-tab-item {
    width: auto;
    flex: 1 1 auto;
    min-width: 56px;
    max-width: none;
    margin: 0;
    padding: 0 8px;
    line-height: 32px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .play-source-tab .module-tab-item + .module-tab-item {
    margin-left: 6px;
  }

  /* 覆盖原移动端 span 撑满网格 hack,允许省略号截断 */
  .play-source-tab .module-tab-item span {
    width: auto;
    height: auto;
    display: inline;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------
   5. 减少动画偏好用户(prefers-reduced-motion)
   尊重系统设置,关闭所有过渡与动画,防止眩晕
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  img.lazyload,
  img.lazy,
  img[data-original] {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   6. 打印样式(细节加分项)
   ------------------------------------------------------------ */
@media print {
  .footer,
  .fixedGroup,
  .header,
  .sidebar,
  .player {
    display: none !important;
  }
  body {
    overflow: visible;
  }
}

/* ============================================================
   8. 电脑端分类导航复刻移动端样式:header 下方顶部一排(≥560px)
   原:桌面端为左侧 200px 垂直侧栏导航(带图标)
   改:与移动端完全一致的顶部横向一排:
      纯文字导航 / 44px 高 / 16px 500 字重
      选中态 17px 黄字 + 文字下方黄色圆角短条(.current)
   ============================================================ */
@media (min-width: 560px) {

  /* 8.1 侧栏 → 顶部横向导航条(位于 64px header 之下,同移动端 top:50px 布局) */
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 5px 0;
    display: flex;
    align-items: center;
    background: #fff;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    z-index: 8;
    box-sizing: border-box;
  }

  /* 8.2 导航列表横向滑动(同移动端 overflow:auto + 触摸滚动) */
  .sidebar .navbar {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .navbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* 8.3 解除 Swiper 垂直布局,恢复移动端同款横向一排 */
  .navbar .swiper-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    transform: none !important;
    transition: none !important;
    width: auto !important;
    padding: 0 5px !important;
  }
  .navbar .swiper-slide {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .navbar-hr {
    display: none !important;
  }

  /* 8.4 导航项:移动端同款(inline-block 纯文字项,清除垂直侧栏装饰) */
  .navbar-item {
    display: inline-block !important;
    white-space: nowrap;
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  /* 8.5 链接:移动端同款参数(16px/500/44px 高/左右10px内边距) */
  .navbar-item a {
    position: relative;
    display: inline-block !important;
    width: auto !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 10px !important;
    font-size: 16px;
    font-weight: 500;
    color: #474747;
    background: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
  }
  .navbar-item a:hover {
    color: #f8cf03;
    opacity: 1;
  }

  /* 8.6 图标全部隐藏(含箭头),与移动端 .navbar-item i{display:none} 一致 */
  .navbar-item i {
    display: none !important;
  }
  .navbar-item span {
    margin-left: 0 !important;
  }

  /* 8.7 选中态:移动端同款(17px 黄字 + .current 黄色圆角短条) */
  .navbar-item.active {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .navbar-item.active::before,
  .navbar-item.active::after,
  .navbar-item.active .links::before,
  .navbar-item.active .links::after {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    border: none !important;
  }
  .navbar-item.active a {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #f8cf03 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* .current 黄色圆角短条:移动端同款定位参数 */
  .navbar-item .current {
    position: absolute;
    background: #f8cf03;
    width: 40%;
    height: 10%;
    bottom: 3px;
    left: 30%;
    z-index: -1;
    border-radius: 20px;
  }

  /* 8.8 header 占满整行,logo 从侧栏归位到 header 左侧 */
  .header {
    width: 100% !important;
    margin: 0 !important;
  }
  .logo {
    position: static !important;
    left: auto !important;
    width: auto !important;
    padding-left: 20px !important;
    margin: 0 !important;
  }
  .logo a {
    height: 40px;
  }

  /* 8.9 内容区不再避让侧栏,顶部为 header(64px)+导航(54px)留位 */
  .main {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  .main {
    padding-top: 128px !important;
  }

  /* 8.10 底部导航电脑端强制隐藏(仅移动端 <560px 显示;
     平板区间(560-1024px)原为静态展示,统一按电脑端隐藏保持整洁) */
  .footer {
    display: none !important;
  }
}

/* ============================================================
   9. 双端导航细节增强
   ============================================================ */
@media (min-width: 560px) {
  /* 桌面端:滚动后导航条吸顶阴影(配合 head.html 的 sidebar-bg 切换) */
  .sidebar.sidebar-bg {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }
  /* 导航条吸顶时背景更实,避免透明漏字 */
  .sidebar.sidebar-bg {
    background: rgba(255, 255, 255, 0.98);
  }
}

@media (max-width: 559px) {
  /* 移动端:导航链接去除点击灰色高亮 */
  .navbar-item a {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================
   10. 深色主题下一排导航适配(桌面端)
   跟随 include.html 写入的 data-mx-theme 属性切换配色
   ============================================================ */
@media (min-width: 560px) {
  html[data-mx-theme="black"] .sidebar {
    background: #16161a;
    border-bottom: 1px solid #25252b;
  }
  html[data-mx-theme="black"] .navbar-item a {
    color: #d4d6d8;
  }
  html[data-mx-theme="black"] .navbar-item a:hover,
  html[data-mx-theme="black"] .navbar-item.active a {
    color: #f8cf03;
  }
  html[data-mx-theme="black"] .sidebar.sidebar-bg {
    background: rgba(22, 22, 26, 0.98);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   11. 电脑端 logo 显示修复(≥560px)
   问题1:平板/窄桌面区间(560-1024px)残留旧图标式侧栏样式
         .logo a{width:32px;overflow:hidden}(style.css 平板媒体查询),
         宽版 logo(如 468x137)被裁成 32px 宽竖条,仅可见约 23%
   问题2:header-box 用固定 40px 边距,而内容区 .content 为 92% 居中,
         logo 与内容左边缘错位约 49px
   修复:解除裁剪恢复完整显示;header-box 与导航条内容统一纳入
         92% 居中容器,logo/搜索框/导航/内容严格左对齐;
         限制 logo 最大宽度,防止上传超大图挤压搜索框
   ============================================================ */
@media (min-width: 560px) {

  /* 11.1 清除平板区间残留的 32px 图标裁剪,logo 完整等比显示 */
  .logo a {
    width: auto !important;
    overflow: visible !important;
    height: 40px;
  }

  /* 11.2 logo 等比缩放;超大图限宽防溢出挤压搜索框 */
  .logo img {
    width: auto;
    max-width: 220px;
    height: 100%;
    object-fit: contain;
  }

  /* 11.3 header-box 与内容区共用 92% 居中容器,
     覆盖原 40px/25px 固定边距,logo 与 .content 左对齐 */
  .header .header-box {
    width: 92%;
    margin: 0 auto;
  }

  /* 11.4 logo 贴容器左缘(覆盖第 8.8 节的 20px 内衬),与内容严格对齐 */
  .logo {
    padding-left: 0 !important;
  }

  /* 11.5 顶部导航条内容同样纳入 92% 容器,与 logo/内容对齐 */
  .sidebar .navbar {
    width: 92%;
    margin: 0 auto;
  }

  /* 11.6 内容区去掉 .main 的左右内边距,与 header 共用视口级 92% 容器,
     logo/导航/内容左边缘严格对齐(原 .main padding 40/25px 造成约 38px 错位) */
  .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   12. 双端自适应增强(移动端 + 平板 + 电脑端 + 超宽屏)
   基于多视口实测(320~1920px 十档)逐项补强
   ============================================================ */

/* 12.1 全局图片自适应安全网
   原模板仅 img{border:none},剧情简介/留言板等内容图一旦
   超过容器宽度会撑破布局;此规则保证任何图片不超容器,
   height:auto 配合等比缩放(海报等已有 width:100% 规则不受影响) */
img {
  max-width: 100%;
  height: auto;
}

/* 12.2 横滑容器滚动链隔离
   顶部导航/快捷菜单/选集列表横向滑动到边缘时,继续滑动会
   "链式"触发页面横向滚动或浏览器返回手势;
   overscroll-behavior-x:contain 后滑动被容器吸收(渐进增强,
   旧浏览器忽略) */
.navbar,
.ttnavbar,
.module-play-list-content,
.play-source-tab,
.module-tab-items {
  overscroll-behavior-x: contain;
}

/* 12.3 平板过渡断点(560-820px):标题字号阶梯
   原:≤1024px 标题 24px、≤559px 18px,在 560px 断点处跳变明显;
   增加中间档 20px,窄平板(大屏手机横屏/小平板竖屏)更协调。
   注意限定 min-width:560px,避免渗入手机断点覆盖 18px */
@media (min-width: 560px) and (max-width: 820px) {
  .module-heading-tab-link,
  .module-title {
    font-size: 20px;
  }
}

/* 12.4 超小屏(≤350px)紧凑化
   320px 档海报仅约 87px 宽,压缩列表内边距与标题字号,
   给海报多留约 10px 空间,排版不显拥挤 */
@media (max-width: 350px) {
  .module-list {
    padding: 10px;
  }
  .module-title {
    font-size: 16px;
  }
  .module-heading-tab-link {
    font-size: 16px;
  }
}

/* 12.5 超宽屏(≥2044px)内容区限宽
   原模板仅靠 nth-child 隐藏控制行尾,内容区 92% 在 2K/带鱼屏
   上无限拉伸,海报过大破坏视觉密度;
   上限 1880px(92% 宽度在 2044px 视口达到该值)后居中,
   播放器/详情页同步受益 */
@media (min-width: 2044px) {
  .content {
    max-width: 1880px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 12.6 移动端视口高度渐进增强(100dvh)
   移动浏览器地址栏收展导致 100vh 抖动;支持 dvh 的浏览器
   改用动态视口(旧浏览器忽略本声明,回退 style.css 的 vh 值) */
@media (max-width: 559px) {
  .homepage .main {
    min-height: calc(100dvh - 323px);
  }
  .page .main {
    min-height: calc(100dvh - 196px);
  }
}

/* ============================================================
   13. 双主题颜色搭配适配(配合 white.css / black.css 的色板优化)
   html[data-mx-theme] 由 include.html 首屏内联脚本与 home.js 的
   Style.Css() 同步维护,与实际样式表始终一致
   ============================================================ */

/* 13.1 文本选区:品牌黄底 + 深字(双主题统一,替代浏览器默认蓝) */
::selection {
  background: #f8cf03;
  color: #1f1f1f;
}

/* 13.2 桌面导航文字按主题适配
   §8 的 .navbar-item a{color:#474747} 为浅色调试值,深色模式下
   深灰字落在 #161922 深底上对比度仅约 1.9:1 几乎不可读 */
html[data-mx-theme="black"] .navbar-item a {
  color: #e1e3e5 !important;
}
html[data-mx-theme="black"] .navbar-item.active a {
  color: #f8cf03 !important;
}
html[data-mx-theme="black"] .navbar-item a:hover {
  color: #ffd34d !important;
}

/* 浅色模式:激活/悬停由品牌黄(1.6:1)改深金(3.0:1),
   下方 .current 黄色指示条保持亮黄不变,由色条承载品牌感 */
html[data-mx-theme="white"] .navbar-item.active a {
  color: #cf9800 !important;
}
html[data-mx-theme="white"] .navbar-item a:hover {
  color: #cf9800 !important;
}

/* 13.3 键盘焦点环:替代默认 outline: none 造成焦点不可见的问题,
   1px 半透明主色描边,双主题下均与底色形成区分 */
a:focus-visible,
.module-play-list-link:focus-visible,
.page-link:focus-visible,
.search-btn:focus-visible,
.fixedGroup-item:focus-visible {
  outline: 2px solid rgba(248, 207, 3, .75);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   14. 登录/注册/个人中心页美化(2026-09)
   优先级说明:用户页 CSS 加载顺序为 style.css → 主题 css →
   optimize.css → user.css(user/include),user.css 后加载会
   覆盖同权重规则,故本节选择器统一加 .page 前缀提权;
   按钮与输入框颜色带 !important,用于压过 user.css 框架层
   的 .mxui-btns-gules/.mxui-btns-green(!important)与
   black.css 深色表单(!important)
   ============================================================ */

/* 14.1 登录/注册卡片:大圆角 + 双层柔和投影 + 品牌黄标题装饰条 */
.page .mxui-user-login.mxui-part-core-bg {
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 34px 32px 26px;
  margin: 48px auto;
  border: 1px solid rgba(31, 37, 49, .06);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(31, 37, 49, .10), 0 2px 8px rgba(31, 37, 49, .05);
}
.page .mxui-user-login .mxui-list-head h2 {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 0 0 16px;
}
.page .mxui-user-login .mxui-list-head h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  transform: translateX(-50%);
  background: #f8cf03;
}

/* 14.2 输入框:44px 触控高度、聚焦品牌黄光环
   (原 35px 高 + 灰色#999 文字 + 灰底,偏小偏暗) */
.page .mxui-user-form .mxui-user-text,
.page .mxui-user-form .mxui-user-yzm {
  margin-top: 14px;
  height: 44px;
  border: 1px solid #dce0e6;
  border-radius: 8px;
  background: #f7f8fa;
  color: #333;
  font-size: 14px;
  padding: 0 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.page .mxui-user-form .mxui-user-text::placeholder,
.page .mxui-user-form .mxui-user-yzm::placeholder { color: #9aa3ad; }
.page .mxui-user-form .mxui-user-text:focus,
.page .mxui-user-form .mxui-user-yzm:focus {
  border-color: #f8cf03 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(248, 207, 3, .25);
  outline: none;
}
/* 图形验证码:与输入框同高同圆角 */
.page .mxui-user-form img.mxui-user-code {
  height: 44px;
  border-radius: 8px;
  border: 1px solid #dce0e6;
  cursor: pointer;
}
/* 短信/邮箱验证码按钮:淡金胶囊 */
.page .mxui-user-form .mxui-yzm {
  height: 44px;
  border-radius: 8px;
  color: #b8860b;
  background: #fff8e1;
  border: 1px solid #e8cf8e;
  transition: filter .2s ease;
}
.page .mxui-user-form .mxui-yzm:hover { filter: brightness(.97); }
/* 修改资料等页的表单控件(info.html) */
.page .mxui-user-form .mxui-form-control {
  height: 40px;
  border: 1px solid #dce0e6;
  border-radius: 8px;
  background: #f7f8fa;
  color: #333;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.page .mxui-user-form .mxui-form-control:focus {
  border-color: #f8cf03;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(248, 207, 3, .25);
}

/* 14.3 提交按钮:红(mxui-btns-gules)/绿(mxui-btns-green)改品牌黄底深字
   (黄底 #f8cf03 + 深字 #1f1f1f 对比 12.6:1,与全站色彩体系一致) */
.page .mxui-user-form .mxui-subm-login,
.page .mxui-user-form .mxui-subm-regis {
  height: 44px;
  line-height: 44px;
  margin: 20px 0 10px;
  border-radius: 8px;
  background: #f8cf03 !important;
  color: #1f1f1f !important;
  border: none !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 6px;
  text-indent: 6px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(248, 207, 3, .38);
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.page .mxui-user-form .mxui-subm-login:hover,
.page .mxui-user-form .mxui-subm-regis:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(248, 207, 3, .45);
}
.page .mxui-user-form .mxui-subm-login:active,
.page .mxui-user-form .mxui-subm-regis:active { transform: translateY(0); }

/* 14.4 表单底部链接(注册账号/QQ登录/忘记密码等) */
.page .mxui-user-form > a {
  color: #6f7885;
  font-size: 13px;
  line-height: 26px;
  transition: color .2s ease;
}
.page .mxui-user-form > a:hover { color: #b8860b; }

/* 14.5 个人中心:横幅圆角裁剪、头像金色描边放大、统计数字金/黄色 */
.page .mxui-user-head .mxui-list-pics {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.page .mxui-user-head .mxui-user-avat {
  width: 78px;
  height: 78px;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.page .mxui-user-brief .mxui-text-gules {
  color: #cf9800 !important;
  font-weight: 600;
}

/* 14.6 侧栏菜单与资料列表:悬停高亮 */
.page .mxui-user-list li a.mxui-tabs-title {
  transition: background-color .18s ease, color .18s ease;
}
.page .mxui-user-list li a.mxui-tabs-title:hover {
  background: #f7f8fa;
  color: #b8860b;
}
.page .mxui-user-list li:hover .mxui-user-input { background: #f7f8fa; }

/* 14.7 深色模式适配 */
html[data-mx-theme="black"] .page .mxui-user-login.mxui-part-core-bg {
  border-color: #25252b;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}
html[data-mx-theme="black"] .page .mxui-user-form .mxui-user-text,
html[data-mx-theme="black"] .page .mxui-user-form .mxui-user-yzm {
  border-color: #32323c !important;
  background: #1a1d23 !important;
  color: #e1e3e5 !important;
}
html[data-mx-theme="black"] .page .mxui-user-form .mxui-user-text:focus,
html[data-mx-theme="black"] .page .mxui-user-form .mxui-user-yzm:focus {
  border-color: #f8cf03 !important;
  background: #1d2026 !important;
  box-shadow: 0 0 0 3px rgba(248, 207, 3, .16);
}
html[data-mx-theme="black"] .page .mxui-user-form .mxui-user-text::placeholder { color: #7a828e; }
html[data-mx-theme="black"] .page .mxui-user-form img.mxui-user-code {
  border-color: #32323c;
  background: #fff;
}
html[data-mx-theme="black"] .page .mxui-user-form .mxui-yzm {
  background: #25252b;
  border-color: #32323c;
  color: #f8cf03;
}
html[data-mx-theme="black"] .page .mxui-user-form .mxui-form-control {
  border-color: #32323c !important;
  background: #1a1d23 !important;
  color: #e1e3e5 !important;
}
html[data-mx-theme="black"] .page .mxui-user-form > a { color: #a9aeb8; }
html[data-mx-theme="black"] .page .mxui-user-form > a:hover { color: #ffd34d; }
html[data-mx-theme="black"] .page .mxui-user-brief .mxui-text-gules { color: #f8cf03 !important; }
html[data-mx-theme="black"] .page .mxui-user-list li a.mxui-tabs-title:hover {
  background: #25252b;
  color: #ffd34d;
}
html[data-mx-theme="black"] .page .mxui-user-list li:hover .mxui-user-input { background: #1d2026; }

/* 14.8 移动端:卡片贴边距收紧 */
@media (max-width: 559px) {
  .page .mxui-user-login.mxui-part-core-bg {
    margin: 20px auto;
    padding: 26px 20px 18px;
    box-shadow: 0 6px 20px rgba(31, 37, 49, .08);
  }
}

/* ============================================================
   15. 界面体验增强(2026-09):空状态引导 / 播放控制条与剧场模式 /
   移动端浮动换集 / 卡片 hover 上浮 / 海报骨架屏
   ============================================================ */

/* 15.1 空状态引导(收藏/播放记录为空时) */
.page .mxui-empty-state {
  padding: 64px 20px;
  text-align: center;
}
.page .mxui-empty-state-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #f8cf03;
}
.page .mxui-empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 8px;
}
.page .mxui-empty-state-sub {
  font-size: 14px;
  color: #6f7885;
  margin-bottom: 26px;
}
.page .mxui-empty-state-btn {
  display: inline-block;
  padding: 10px 26px;
  background: #f8cf03;
  color: #1f1f1f;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .16s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 12px rgba(248, 207, 3, .35);
}
.page .mxui-empty-state-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(248, 207, 3, .45);
}
html[data-mx-theme="black"] .page .mxui-empty-state-icon {
  background: #25252b;
  color: #ffd34d;
}
html[data-mx-theme="black"] .page .mxui-empty-state-title { color: #e1e3e5; }
html[data-mx-theme="black"] .page .mxui-empty-state-sub { color: #8a919c; }

/* 15.2 播放控制条(上一集/宽屏/下一集) */
.player-ctrl-bar {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  margin-top: 12px;
}
/* 桌面端:右侧 355px 为绝对定位选集面板区域,控制条与播放器同宽避免被遮挡 */
@media (min-width: 1025px) {
  .player-ctrl-bar {
    width: calc(100% - 360px);
    border-radius: 0 0 0 18px;
    box-sizing: border-box;
  }
}
.player-ctrl-btn {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  border-radius: 6px;
  background: #f7f8fa;
  color: #1f2329;
  font-size: 14px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
a.player-ctrl-btn { text-decoration: none; }
.player-ctrl-btn:hover:not(.is-disabled) {
  background: #f8cf03;
  color: #1f1f1f;
}
.player-ctrl-btn:active:not(.is-disabled) { transform: scale(.97); }
.player-ctrl-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.player-ctrl-theater.active {
  background: #f8cf03;
  color: #1f1f1f;
}
html[data-mx-theme="black"] .player-ctrl-bar {
  background: #1a1d23;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
html[data-mx-theme="black"] .player-ctrl-btn {
  background: #25252b;
  color: #e1e3e5;
}
html[data-mx-theme="black"] .player-ctrl-btn:hover:not(.is-disabled),
html[data-mx-theme="black"] .player-ctrl-theater.active {
  background: #f8cf03;
  color: #1f1f1f;
}

/* 15.3 剧场(宽屏)模式:桌面端隐藏右侧选集信息,播放器占满内容区 */
@media (min-width: 1025px) {
  .page.player.theater .module-player-side { display: none; }
  .page.player.theater .player-box-main { width: 100%; }
  .page.player.theater .player-box {
    border-radius: 18px;
    margin-top: 0;
  }
  .page.player.theater .player-box::after { border-radius: 18px; }
  .page.player.theater .player-ctrl-bar {
    width: 100%;
    border-radius: 0 0 18px 18px;
  }
}
/* 移动端剧场模式:播放器贴边全宽,去掉圆角 */
@media (max-width: 1024px) {
  .page.player.theater .player-box {
    margin: -14px -10px 0;
    border-radius: 0;
  }
  .page.player.theater .player-ctrl-bar {
    border-radius: 0;
    margin-top: 0;
  }
}

/* 15.4 移动端浮动换集按钮(<560px 显示,不遮挡底部导航) */
.player-float-eps {
  display: none;
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  gap: 18px;
}
.player-float-ep {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1f2329;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease;
}
.player-float-ep:active { transform: scale(.9); }
.player-float-ep.prev { padding-right: 3px; }
.player-float-ep.next { padding-left: 3px; }
html[data-mx-theme="black"] .player-float-ep {
  background: rgba(37, 37, 43, .95);
  color: #f8cf03;
}
@media (max-width: 559px) {
  .player-float-eps { display: flex; }
}

/* 15.5 卡片 hover 上浮(仅精确指针设备,触屏不受影响) */
@media (hover: hover) and (pointer: fine) {
  .module-item,
  .module-item .module-item-cover {
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
  }
  .module-item:hover {
    transform: translateY(-4px);
    z-index: 2;
  }
  .module-item:hover .module-item-cover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
  }
  .module-item-pic img {
    transition: transform .28s ease;
  }
  .module-item:hover .module-item-pic img {
    transform: scale(1.05);
  }
}

/* 15.6 海报骨架屏(纯 CSS 渐进增强):
   微光动画常驻封面背景 —— 占位图/真图不透明时完全覆盖不可见;
   lazyload 插件隐藏占位图拉取真图并以 fadeIn 淡入期间,
   微光透过半透明图片露出,形成加载占位效果,真图淡入后自然覆盖;
   图片加载失败时微光持续,提示加载中而非空白 */
.module-item-cover {
  background: linear-gradient(100deg,
    #eef0f3 30%, #e2e5ea 45%, #eef0f3 60%) 0 0 / 300% 100%;
  animation: mx-skeleton-shimmer 1.4s ease-in-out infinite;
}
html[data-mx-theme="black"] .module-item-cover {
  background-image: linear-gradient(100deg,
    #212127 30%, #2a2a31 45%, #212127 60%);
}
@keyframes mx-skeleton-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* 15.7 减少动画偏好:关闭骨架屏微光与卡片上浮 */
@media (prefers-reduced-motion: reduce) {
  .module-item-cover { animation: none; }
  .module-item:hover,
  .module-item:hover .module-item-cover,
  .module-item:hover .module-item-pic img {
    transform: none;
  }
}