/* ============================================================
   现代播放器皮肤 player-modern.css  v=20261006
   仅改 MediaElement.js 外观，功能/引擎不变
   ============================================================ */

/* ---------- 容器与控制栏：悬浮渐变 ---------- */
.mejs__container{background:#000;}
.mejs__controls{
  background:transparent !important;
  height:48px; padding:0 6px !important;
  align-items:center;
}
.mejs__controls::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events:none; z-index:-1;
}

/* ---------- 通用按钮 ---------- */
.mejs__button{
  width:40px; height:40px; margin:0 1px;
  display:flex; align-items:center; justify-content:center;
}
.mejs__button > button{
  width:40px; height:40px; padding:0; margin:0;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:24px 24px !important;
  border-radius:8px; cursor:pointer; border:none;
}
.mejs__button:hover > button{background-color:rgba(255,255,255,.14) !important;}

/* 播放/暂停 */
.mejs__playpause-button.mejs__play > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M8%205v14l11-7z'%2F%3E%3C%2Fsvg%3E") !important;}
.mejs__playpause-button.mejs__pause > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M6%205h4v14H6zm8%200h4v14h-4z'%2F%3E%3C%2Fsvg%3E") !important;}
/* 快退/快进 */
.mejs__skipback-button > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M14.4%205.3%2012%204V1L6%205.2%2012%209V6.7c.3%200%20.6%200%20.9.1a6.5%206.5%200%201%201-5.4%206.2h-2.1a8.6%208.6%200%201%200%209-7.7z'%2F%3E%3Ctext%20x%3D'11.4'%20y%3D'15.6'%20font-size%3D'8'%20fill%3D'%23fff'%20text-anchor%3D'middle'%3E10%3C%2Ftext%3E%3C%2Fsvg%3E") !important;}
.mejs__jump-forward-button > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M9.6%205.3%2012%204V1l6%204.2L12%209V6.7c-.3%200-.6%200-.9.1A6.5%206.5%200%201%200%2016.5%2013h2.1a8.6%208.6%200%201%201-9-7.7z'%2F%3E%3Ctext%20x%3D'12.6'%20y%3D'15.6'%20font-size%3D'8'%20fill%3D'%23fff'%20text-anchor%3D'middle'%3E10%3C%2Ftext%3E%3C%2Fsvg%3E") !important;}
/* 音量 */
.mejs__volume-button > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M3%209v6h4l5%205V4L7%209H3zm13.5%203a4.5%204.5%200%200%200-2.5-4v8a4.5%204.5%200%200%200%202.5-4zM14%203.2v2.1a7%207%200%200%201%200%2013.4v2.1a9%209%200%200%200%200-17.6z'%2F%3E%3C%2Fsvg%3E") !important;}
/* 全屏 */
.mejs__fullscreen-button > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M7%2014H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12%207h-3v2h5v-5h-2zM14%205v2h3v3h2V5z'%2F%3E%3C%2Fsvg%3E") !important;}
.mejs__container-fullscreen .mejs__fullscreen-button > button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M5%2016h3v3h2v-5H5zm3-8H5v2h5V5H8zm6%2011h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z'%2F%3E%3C%2Fsvg%3E") !important;}

/* ---------- 时间文字 ---------- */
.mejs__time.mejs__currenttime-container,
.mejs__time.mejs__duration-container{background:transparent; height:40px; display:flex; align-items:center;}
.mejs__currenttime, .mejs__duration{
  color:#fff !important; background:transparent !important;
  font-size:13px; font-variant-numeric:tabular-nums; padding:0 4px;
}

/* ---------- 进度条 ---------- */
.mejs__time-rail{height:22px; flex:1; padding:0 10px; min-width:40px;}
.mejs__time-total{
  position:absolute; left:10px; right:10px; top:50%; transform:translateY(-50%);
  height:4px; border:none; border-radius:2px;
  background:rgba(255,255,255,.22); cursor:pointer;
}
.mejs__time-buffering{display:none;}
.mejs__time-loaded{background:rgba(255,255,255,.28); border-radius:2px; height:100%;}
.mejs__time-current{background:#fb7299; border-radius:2px; height:100%;}
.mejs__time-hovered{background:rgba(255,255,255,.16); border-radius:2px; height:100%;}
.mejs__time-handle, .mejs__time-handle-content{display:none;}
/* 拖动提示气泡 */
.mejs__time-float{
  background:#1f2024; border:none; border-radius:6px;
  height:auto; padding:3px 8px; bottom:14px; margin:0 0 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.4); white-space:nowrap;
}
.mejs__time-float-current{color:#fff; font-size:11px; margin:0; float:none; width:auto;}
.mejs__time-float-corner{display:none;}

@media(min-width:768px){
  .mejs__time-total{height:3px; transition:height .15s;}
  .mejs__time-rail:hover .mejs__time-total{height:6px;}
}

/* ---------- 倍速 / 画质 文字按钮 ---------- */
.mejs__speed-button, .mejs__qualities-button{width:auto; min-width:52px;}
.mejs__speed-button > button, .mejs__qualities-button > button{position:static; width:48px !important;}
.mejs__speed-button > button, .mejs__qualities-button > button{
  width:auto; min-width:44px; padding:0 8px;
  background-image:none !important;
  color:#fff; font-size:13px; font-weight:500;
}

/* ---------- 倍速 / 画质 菜单 ---------- */
.mejs__speed-selector, .mejs__qualities-selector{
  position:absolute !important; bottom:46px; right:4px; left:auto !important; top:auto !important;
  background:#1f2024; border:1px solid #2c2d30; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  min-width:104px; padding:6px; margin:0;
}
.mejs__speed-selector-list, .mejs__qualities-selector-list{
  background:transparent; list-style:none; margin:0; padding:0; display:block;
}
.mejs__speed-selector-list-item, .mejs__qualities-selector-list-item{
  background:transparent !important; border:none !important; border-radius:6px;
  height:38px; list-style:none; display:flex; align-items:center; justify-content:center;
  color:#e3e5e7 !important; font-size:13px; cursor:pointer; padding:0 8px;
}
.mejs__speed-selector-list-item:hover, .mejs__qualities-selector-list-item:hover{
  background:rgba(255,255,255,.1) !important;
}
.mejs__speed-selector-list-item.mejs__speed-selected,
.mejs__qualities-selector-list-item.mejs__qualities-selected{color:#fb7299 !important;}

/* ---------- 中央大播放键 ---------- */
.mejs__overlay-play{background:transparent;}
.mejs__overlay-button{
  width:68px; height:68px; border-radius:50%; border:none;
  background-color:rgba(0,0,0,.55) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23ffffff'%20d%3D'M8%205v14l11-7z'%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:34px 34px !important;
  transition:background-color .15s, transform .15s;
}
.mejs__overlay-button:hover{background-color:rgba(0,0,0,.72) !important; transform:scale(1.05);}

/* ---------- 手机端触控适配 ---------- */
@media(max-width:767px){
  .mejs__controls{flex-wrap:wrap; height:auto; padding:0 6px 6px !important; align-content:flex-end;}
  /* 按钮行 */
  .mejs__playpause-button{order:1;}
  .mejs__currenttime-container{order:2;}
  .mejs__speed-button{order:10; margin-left:auto;}
  .mejs__qualities-button{order:11;}
  .mejs__fullscreen-button{order:12;}
  /* 进度条独立成行，置于最底部 */
  .mejs__time-rail{order:20; flex:0 0 100%; width:100%; height:26px; padding:0 10px; margin-bottom:4px;}
  .mejs__time-total{left:10px; right:10px; height:4px;}
  /* 手机隐藏：时长、音量、快进快退（减少拥挤） */
  .mejs__duration-container,
  .mejs__volume-button,
  .mejs__jump-forward-button,
  .mejs__skipback-button{display:none !important;}
  /* 菜单位置与触控高度 */
  .mejs__speed-selector, .mejs__qualities-selector{bottom:52px; min-width:120px;}
  .mejs__speed-selector-list-item, .mejs__qualities-selector-list-item{height:44px; font-size:14px;}
}