:root{
  --zop-panel:#0d0f13;
  --zop-header:#11141a;
  --zop-line:rgba(255,255,255,.09);
  --zop-text:#f7f8fb;
  --zop-muted:#929baa;
  --zop-danger:#ff4d4f;
  --zop-radius:10px;
}


/* =========================================================
   下载区域
   =========================================================
   
   最终布局：
   
   [ 百度网盘 ][ 提取码 ]
   [ 在线播放 ]
   
   ========================================================= */

body .zop-download-row{
  display:flex!important;
  flex-flow:row wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:100%!important;
}


/* =========================================================
   在线播放所在第二行
   ========================================================= */

body .zop-download-row > .zop-online-download{
  display:flex!important;

  flex:0 0 100%!important;

  width:100%!important;
  max-width:100%!important;

  align-items:center!important;
  justify-content:flex-start!important;

  margin:10px 0 0 0!important;
  padding:0!important;

  transform:none!important;

  box-sizing:border-box!important;
}


/* =========================================================
   在线播放按钮
   =========================================================
   
   JS 必须是：
   
   btn.className = 'but b-theme zop-play-button';
   
   这里尽量不覆盖子比 .but / .b-theme 的原生样式
   ========================================================= */

body .zop-online-download > .zop-play-button{
  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:auto!important;

  min-width:0!important;
  max-width:none!important;

  height:auto!important;

  min-height:0!important;
  max-height:none!important;

  margin:0!important;

  /*
   * 接近子比原生 .but 尺寸
   * 不再做超大按钮
   */
  padding:6px 12px!important;

  font-size:inherit!important;
  font-weight:inherit!important;

  line-height:1.4!important;

  border-radius:4px!important;

  white-space:nowrap!important;

  text-decoration:none!important;

  box-shadow:none!important;

  transform:none!important;

  vertical-align:middle!important;
}


/* 播放图标 */

body .zop-online-download > .zop-play-button i{
  display:inline-block!important;

  margin:0 5px 0 0!important;
  padding:0!important;

  font-size:inherit!important;

  line-height:1!important;

  vertical-align:middle!important;
}


/* 在线播放文字 */

body .zop-play-button .zop-play-button-text{
  display:inline-block!important;

  margin:0!important;
  padding:0!important;

  color:inherit!important;

  font:inherit!important;

  line-height:inherit!important;

  vertical-align:middle!important;
}


/* =========================================================
   兜底区域
   ========================================================= */

body .zop-fallback-wrap{
  display:flex!important;

  align-items:center!important;
  justify-content:flex-start!important;

  width:100%!important;

  margin:10px 0 0!important;

  padding:0!important;
}


/* =========================================================
   打开播放器后禁止页面滚动
   ========================================================= */

html.zop-no-scroll,
html.zop-no-scroll body{
  overflow:hidden!important;
}


/* =========================================================
   播放器弹窗
   ========================================================= */

.zop-modal{
  position:fixed;

  inset:0;

  z-index:999999;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:20px;

  box-sizing:border-box;

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .18s ease,
    visibility .18s ease;
}


/* 打开 */

.zop-modal.is-open{
  opacity:1;
  visibility:visible;

  pointer-events:auto;
}


/* =========================================================
   遮罩
   ========================================================= */

.zop-backdrop{
  position:absolute;

  inset:0;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}


/* =========================================================
   弹窗主体
   ========================================================= */

.zop-dialog{
  position:relative;

  z-index:2;

  display:flex;
  flex-direction:column;

  width:min(960px,94vw);

  max-height:92vh;

  margin:auto;

  overflow:hidden;

  background:var(--zop-panel);

  border:1px solid var(--zop-line);

  border-radius:var(--zop-radius);

  box-shadow:
    0 18px 60px rgba(0,0,0,.48);

  box-sizing:border-box;
}


/* =========================================================
   标题栏
   ========================================================= */

.zop-header{
  position:relative;

  display:flex;

  align-items:center;
  justify-content:space-between;

  flex:0 0 auto;

  min-height:48px;

  padding:0 14px 0 16px;

  background:var(--zop-header);

  border-bottom:1px solid var(--zop-line);

  box-sizing:border-box;
}


.zop-heading{
  display:flex;

  align-items:center;

  min-width:0;

  flex:1 1 auto;
}


.zop-title-wrap{
  display:flex;

  align-items:center;

  min-width:0;

  max-width:100%;
}


/* 播放标题 */

.zop-title{
  display:block;

  min-width:0;

  max-width:100%;

  overflow:hidden;

  color:var(--zop-text);

  font-size:15px;

  font-weight:600;

  line-height:1.3;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* =========================================================
   关闭按钮
   ========================================================= */

.zop-header-actions{
  display:flex;

  align-items:center;

  flex:0 0 auto;

  margin-left:12px;
}


.zop-close{
  appearance:none;
  -webkit-appearance:none;

  display:flex;

  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  margin:0;
  padding:0;

  border:0;

  border-radius:6px;

  background:transparent;

  color:#aab2bf;

  cursor:pointer;

  transition:
    background-color .18s ease,
    color .18s ease;
}


.zop-close svg{
  display:block;

  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;

  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.zop-close:hover,
.zop-close:focus{
  background:rgba(255,255,255,.08);

  color:#fff;

  outline:none;
}


/* =========================================================
   播放区域
   ========================================================= */

.zop-stage{
  position:relative;

  flex:1 1 auto;

  width:100%;

  min-height:320px;

  overflow:hidden;

  background:#000;

  box-sizing:border-box;
}


/* =========================================================
   子比播放器容器
   ========================================================= */

.zop-player-host{
  position:relative;

  width:100%;

  background:#000;
}


.zop-native-dplayer,
.zop-player-host .new-dplayer{
  position:relative!important;

  width:100%!important;

  min-height:320px!important;

  background:#000!important;
}


/* =========================================================
   DPlayer
   ========================================================= */

.zop-player-host .dplayer{
  width:100%!important;

  background:#000!important;
}


.zop-player-host .dplayer-video-wrap{
  width:100%!important;

  background:#000!important;
}


.zop-player-host video{
  width:100%!important;

  max-width:100%!important;

  background:#000!important;
}


/* =========================================================
   播放器加载前占位
   ========================================================= */

.zop-player-host .graphic{
  position:relative;

  width:100%;

  min-height:320px;

  background:#000;
}


.zop-player-host .graphic .abs-center{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);
}


/* =========================================================
   加载状态
   ========================================================= */

.zop-status{
  position:absolute;

  inset:0;

  z-index:30;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:9px;

  padding:30px;

  box-sizing:border-box;

  background:#000;

  color:var(--zop-text);

  text-align:center;
}


/* 加载圈 */

.zop-spinner{
  display:block;

  width:30px;
  height:30px;

  margin-bottom:4px;

  border:3px solid rgba(255,255,255,.18);

  border-top-color:#fff;

  border-radius:50%;

  animation:zop-spin .75s linear infinite;
}


@keyframes zop-spin{
  to{
    transform:rotate(360deg);
  }
}


.zop-status-text{
  display:block;

  color:#f5f6f8;

  font-size:14px;

  font-weight:500;

  line-height:1.5;
}


.zop-status-sub{
  display:block;

  color:var(--zop-muted);

  font-size:12px;

  line-height:1.5;
}


/* =========================================================
   错误状态
   ========================================================= */

.zop-status.is-error .zop-spinner{
  display:none;
}


.zop-status.is-error .zop-status-text{
  color:var(--zop-danger);
}


.zop-status.is-error .zop-status-sub{
  display:none;
}


/* =========================================================
   DPlayer兼容
   ========================================================= */

.zop-player-host .dplayer-controller{
  box-sizing:border-box;
}


.zop-player-host .dplayer.dplayer-fulled{
  z-index:9999999!important;
}


/* =========================================================
   桌面端
   ========================================================= */

@media (min-width:769px){

  body .zop-download-row > .zop-online-download{
    margin-top:10px!important;
  }


  .zop-stage,
  .zop-native-dplayer,
  .zop-player-host .new-dplayer,
  .zop-player-host .graphic{
    min-height:420px;
  }
}


/* =========================================================
   手机端
   ========================================================= */

@media (max-width:768px){

  /* 下载区域 */

  body .zop-download-row{
    display:flex!important;

    flex-flow:row wrap!important;

    align-items:center!important;

    justify-content:flex-start!important;

    width:100%!important;
  }


  /* 在线播放固定第二行 */

  body .zop-download-row > .zop-online-download{
    display:flex!important;

    flex:0 0 100%!important;

    width:100%!important;

    max-width:100%!important;

    align-items:center!important;

    justify-content:flex-start!important;

    margin:8px 0 0 0!important;

    padding:0!important;
  }


  /* 在线播放保持子比原生大小 */

  body .zop-online-download > .zop-play-button{
    width:auto!important;

    min-width:0!important;

    max-width:none!important;

    height:auto!important;

    min-height:0!important;

    padding:6px 12px!important;

    margin:0!important;

    font-size:inherit!important;

    line-height:1.4!important;

    border-radius:4px!important;
  }


  /* 弹窗 */

  .zop-modal{
    padding:8px;
  }


  .zop-dialog{
    width:100%;

    max-width:none;

    max-height:94vh;

    border-radius:9px;
  }


  /* 标题 */

  .zop-header{
    min-height:48px;

    padding:
      0 8px
      0 13px;
  }


  .zop-title{
    font-size:15px;
  }


  .zop-close{
    width:36px;

    height:36px;
  }


  /* 播放器 */

  .zop-stage{
    min-height:0;

    background:#000;
  }


  .zop-native-dplayer,
  .zop-player-host .new-dplayer{
    min-height:0!important;

    aspect-ratio:16 / 9;
  }


  .zop-player-host .graphic{
    min-height:0;

    aspect-ratio:16 / 9;
  }


  .zop-player-host .dplayer{
    width:100%!important;

    aspect-ratio:16 / 9;
  }


  .zop-player-host .dplayer-video-wrap{
    width:100%!important;

    height:100%!important;
  }


  .zop-player-host video{
    width:100%!important;

    height:100%!important;

    object-fit:contain!important;
  }


  /* 加载层 */

  .zop-status{
    padding:20px 15px;
  }


  .zop-spinner{
    width:27px;

    height:27px;
  }


  .zop-status-text{
    font-size:13px;
  }


  .zop-status-sub{
    font-size:11px;
  }
}


/* =========================================================
   超小屏
   ========================================================= */

@media (max-width:380px){

  .zop-modal{
    padding:5px;
  }


  .zop-header{
    padding-left:11px;
  }


  .zop-title{
    font-size:14px;
  }
}


/* =========================================================
   手机横屏
   ========================================================= */

@media
(max-height:520px)
and
(orientation:landscape){

  .zop-modal{
    padding:4px;
  }


  .zop-dialog{
    max-height:98vh;
  }


  .zop-header{
    min-height:42px;
  }


  .zop-close{
    width:32px;

    height:32px;
  }


  .zop-native-dplayer,
  .zop-player-host .new-dplayer,
  .zop-player-host .dplayer{
    max-height:
      calc(98vh - 42px);
  }
}
/* =========================================================
   子比原生下载区最终版
   第一行：[ 百度网盘 ][ 提取码 ]
   第二行：[ 在线播放 ]
   ========================================================= */


/*
 * 整个下载区继续使用子比 flex.hh
 */
.pay-box .zop-download-row{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
}


/*
 * 在线播放固定第二行
 *
 * 重点：
 * 保留子比原生 .but-download 的
 * padding: 10px 10px 5px 10px
 *
 * 所以会和百度网盘天然左对齐
 */
.pay-box .zop-download-row > .zop-online-download{
    flex:0 0 100%!important;

    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;

    /*
     * 这就是子比原生 .but-download 的值
     * 不要再设成 0
     */
    padding:10px 10px 5px 10px!important;

    margin:0!important;

    box-sizing:border-box!important;
}


/*
 * 在线播放按钮
 *
 * 完全交给子比 .but + .b-theme
 * 不再写死宽、高、字号、圆角
 */
.pay-box .zop-online-download .zop-play-button{
    width:auto!important;

    /*
     * 和百度网盘一样，
     * 子比原生 .but-download .but
     * 默认 min-width:130px
     */
    min-width:130px!important;
    max-width:none!important;

    height:auto!important;
    min-height:0!important;

    margin:0!important;

    /*
     * 子比原生 .but 是：
     * padding: .3em .6em
     */
    padding:.3em .6em!important;

    border-radius:4px!important;

    font-size:inherit!important;
    font-weight:normal!important;
    line-height:1.44!important;

    text-align:center!important;
    white-space:nowrap!important;

    box-shadow:var(--this-shadow)!important;
}


/*
 * 使用子比自己的图标间距
 */
.pay-box .zop-play-button > .fa{
    margin-right:.25em!important;
}


/*
 * 在线播放文字继承按钮
 */
.pay-box .zop-play-button .zop-play-button-text{
    margin:0!important;
    padding:0!important;

    color:inherit!important;

    font:inherit!important;
    line-height:inherit!important;
}


/*
 * 手机端同样使用原生结构
 */
@media (max-width:768px){

    .pay-box .zop-download-row > .zop-online-download{
        flex:0 0 100%!important;

        width:100%!important;
        min-width:100%!important;

        padding:10px 10px 5px 10px!important;

        margin:0!important;
    }

    .pay-box .zop-online-download .zop-play-button{
        width:auto!important;
        min-width:130px!important;

        height:auto!important;
        min-height:0!important;

        padding:.3em .6em!important;

        font-size:inherit!important;
        line-height:1.44!important;
    }
}
/* =========================================================
   横屏 / 竖屏视频自适应最终修复
   直接追加到 player-v19.css 最底部

   不修改：
   - 百度网盘按钮
   - 提取码
   - 在线播放按钮
   ========================================================= */


/* ---------------------------------------------------------
   通用播放器窗口
   --------------------------------------------------------- */

.zop-dialog{
    max-width:94vw!important;
    max-height:92vh!important;
}


/*
 * 取消旧 CSS 中桌面端强制的 420px 最小高度
 * 否则竖屏视频容易被强行撑大。
 */
.zop-stage,
.zop-native-dplayer,
.zop-player-host .new-dplayer,
.zop-player-host .graphic{
    min-height:0!important;
}


/* 播放区域 */
.zop-stage{
    position:relative!important;

    width:100%!important;

    /* 默认横屏，JS 检测完成以后会写入真实比例 */
    aspect-ratio:16 / 9;

    max-height:calc(92vh - 48px)!important;

    overflow:hidden!important;

    background:#000!important;

    box-sizing:border-box!important;
}


/* 播放器 HOST */
.zop-player-host{
    position:absolute!important;

    inset:0!important;

    width:100%!important;
    height:100%!important;

    background:#000!important;
}


/* 子比 DPlayer */
.zop-native-dplayer,
.zop-player-host .new-dplayer,
.zop-player-host .dplayer{
    position:relative!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;
    max-height:100%!important;

    background:#000!important;
}


/* DPlayer 视频容器 */
.zop-player-host .dplayer-video-wrap{
    position:absolute!important;

    inset:0!important;

    width:100%!important;
    height:100%!important;

    max-width:100%!important;
    max-height:100%!important;

    background:#000!important;
}


/* 真正的视频 */
.zop-player-host video,
.zop-player-host .dplayer-video{
    display:block!important;

    width:100%!important;
    height:100%!important;

    max-width:100%!important;
    max-height:100%!important;

    margin:0 auto!important;

    object-fit:contain!important;

    background:#000!important;
}


/* 初始化前的播放占位 */
.zop-player-host .graphic{
    position:absolute!important;

    inset:0!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;

    aspect-ratio:auto!important;

    background:#000!important;
}


/* =========================================================
   横屏视频
   1920×1080 / 1280×720 / 3840×2160
   ========================================================= */

.zop-dialog.zop-landscape{
    width:min(960px,94vw)!important;

    max-width:94vw!important;
    max-height:92vh!important;
}


.zop-dialog.zop-landscape .zop-stage{
    max-height:calc(92vh - 48px)!important;
}


/* =========================================================
   竖屏视频
   1080×1920 / 1081×1920 / 720×1280

   关键：
   宽度同时由浏览器高度决定，
   所以不可能再高出当前屏幕。
   ========================================================= */

.zop-dialog.zop-portrait{

    /*
     * 430px：
     *   防止桌面端竖屏播放器太宽
     *
     * 92vw：
     *   防止超过浏览器宽度
     *
     * calc((88vh - 48px) * 0.5625)：
     *   按 9:16 根据浏览器高度反算宽度
     */
    width:min(
        430px,
        92vw,
        calc((88vh - 48px) * 0.5625)
    )!important;

    max-width:92vw!important;

    max-height:88vh!important;
}


.zop-dialog.zop-portrait .zop-stage{
    width:100%!important;

    min-height:0!important;

    max-height:calc(88vh - 48px)!important;

    overflow:hidden!important;
}


.zop-dialog.zop-portrait .zop-player-host,
.zop-dialog.zop-portrait .zop-native-dplayer,
.zop-dialog.zop-portrait .new-dplayer,
.zop-dialog.zop-portrait .dplayer,
.zop-dialog.zop-portrait .dplayer-video-wrap{
    width:100%!important;
    height:100%!important;

    min-height:0!important;
    max-height:100%!important;
}


.zop-dialog.zop-portrait video,
.zop-dialog.zop-portrait .dplayer-video{
    width:100%!important;
    height:100%!important;

    max-width:100%!important;
    max-height:100%!important;

    object-fit:contain!important;
}


/* =========================================================
   方形 / 接近方形视频
   ========================================================= */

.zop-dialog.zop-square{
    width:min(
        720px,
        90vw,
        calc(88vh - 48px)
    )!important;

    max-width:90vw!important;
    max-height:88vh!important;
}


.zop-dialog.zop-square .zop-stage{
    max-height:calc(88vh - 48px)!important;
}


/* =========================================================
   手机端
   ========================================================= */

@media (max-width:768px){

    /*
     * 这里只调整播放器弹窗。
     * 不碰 .zop-play-button。
     */

    .zop-modal{
        padding:8px!important;
    }


    .zop-dialog{
        max-height:94vh!important;
    }


    /* --------------------------
       手机横屏视频
       -------------------------- */

    .zop-dialog.zop-landscape{
        width:calc(100vw - 16px)!important;

        max-width:calc(100vw - 16px)!important;

        max-height:94vh!important;
    }


    .zop-dialog.zop-landscape .zop-stage{
        /*
         * 覆盖你旧 CSS 中手机固定 16:9 的子元素限制，
         * stage 最终比例由 JS 的真实视频尺寸决定。
         */
        max-height:calc(94vh - 48px)!important;
    }


    /* --------------------------
       手机竖屏视频
       -------------------------- */

    .zop-dialog.zop-portrait{

        /*
         * 手机同样根据屏幕高度反算播放器宽度。
         *
         * 这样即使手机浏览器地址栏占了一部分空间，
         * 播放器也不会冲出屏幕。
         */
        width:min(
            calc(100vw - 16px),
            calc((92vh - 48px) * 0.5625)
        )!important;

        max-width:calc(100vw - 16px)!important;

        max-height:92vh!important;
    }


    .zop-dialog.zop-portrait .zop-stage{
        min-height:0!important;

        max-height:calc(92vh - 48px)!important;
    }


    /* --------------------------
       手机方形视频
       -------------------------- */

    .zop-dialog.zop-square{
        width:min(
            calc(100vw - 16px),
            calc(92vh - 48px)
        )!important;

        max-width:calc(100vw - 16px)!important;

        max-height:92vh!important;
    }


    .zop-dialog.zop-square .zop-stage{
        max-height:calc(92vh - 48px)!important;
    }


    /*
     * 很重要：
     *
     * 你的旧 CSS 在手机端给这些元素写死了：
     *
     * aspect-ratio:16 / 9;
     *
     * 这里把它取消。
     *
     * 视频比例由 .zop-stage + JS 控制。
     */
    .zop-native-dplayer,
    .zop-player-host .new-dplayer,
    .zop-player-host .graphic,
    .zop-player-host .dplayer{
        aspect-ratio:auto!important;
    }


    .zop-player-host .dplayer-video-wrap{
        width:100%!important;
        height:100%!important;
    }


    .zop-player-host video{
        width:100%!important;
        height:100%!important;

        object-fit:contain!important;
    }
}


/* =========================================================
   手机横屏
   ========================================================= */

@media
(max-height:520px)
and
(orientation:landscape){

    .zop-modal{
        padding:4px!important;
    }


    .zop-dialog{
        max-height:98vh!important;
    }


    .zop-header{
        min-height:42px!important;
    }


    /* 横屏视频 */
    .zop-dialog.zop-landscape{
        width:min(
            900px,
            calc(100vw - 8px)
        )!important;

        max-height:98vh!important;
    }


    .zop-dialog.zop-landscape .zop-stage{
        max-height:calc(98vh - 42px)!important;
    }


    /*
     * 如果视频本身是竖屏，
     * 手机横过来以后播放器必须更窄，
     * 否则高度肯定超出屏幕。
     */
    .zop-dialog.zop-portrait{
        width:min(
            300px,
            calc((98vh - 42px) * 0.5625)
        )!important;

        max-width:90vw!important;

        max-height:98vh!important;
    }


    .zop-dialog.zop-portrait .zop-stage{
        max-height:calc(98vh - 42px)!important;
    }
}