/* ============================================================
   BP Player — 类 B 站视频播放器（学员端 / 教师端共用）
   仅使用原生 video 元素，自绘控制层
   ============================================================ */
.bp-player{
  position:relative; width:100%; background:#000; overflow:hidden;
  --bp-a1:#8b7cf8; --bp-a2:#ff6699;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
.bp-stage{
  position:relative; width:100%;
  aspect-ratio:var(--bp-ratio, 1.7778);
  max-height:min(62vh, 560px);
  background:#000; overflow:hidden;
}
.bp-stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:transparent; display:block;
  max-height:none;   /* 防止宿主页面的全局 video{max-height} 把画面压扁 */
}
/* 竖屏视频的模糊背景，避免大片死黑 */
.bp-backdrop{
  position:absolute; inset:-10%;
  background-size:cover; background-position:center;
  filter:blur(26px) saturate(1.25) brightness(.42);
  transform:scale(1.12); opacity:.85; pointer-events:none;
}

/* ---------- 中央大播放键 ---------- */
.bp-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; transition:opacity .2s; opacity:1;
}
.bp-player.bp-hide .bp-center{ opacity:0; }
.bp-player:not(.bp-paused) .bp-center{ opacity:0; }
.bp-bigplay{
  width:66px; height:66px; border-radius:50%;
  background:rgba(0,0,0,.34);
  border:1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 6px 26px rgba(0,0,0,.45);
}

/* ---------- 底部控制条 ---------- */
.bp-bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 10px 7px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.88) 100%);
  opacity:1; transition:opacity .22s;
}
.bp-player.bp-hide .bp-bottom{ opacity:0; pointer-events:none; }

/* 进度条 */
.bp-progress{
  position:relative; height:20px; display:flex; align-items:center;
  cursor:pointer; touch-action:none;
}
.bp-track{
  position:absolute; left:0; right:0; height:3px; border-radius:99px;
  background:rgba(255,255,255,.22); overflow:visible;
  transition:height .14s;
}
.bp-progress.bp-drag .bp-track, .bp-progress:hover .bp-track{ height:5px; }
.bp-buf, .bp-played{
  position:absolute; left:0; top:0; bottom:0; border-radius:99px; width:0;
}
.bp-buf{ background:rgba(255,255,255,.36); }
.bp-played{ background:linear-gradient(90deg, var(--bp-a1), var(--bp-a2)); }
.bp-knob{
  position:absolute; left:0; top:50%; width:11px; height:11px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); box-shadow:0 1px 5px rgba(0,0,0,.5);
  transition:width .12s, height .12s;
}
.bp-progress.bp-drag .bp-knob, .bp-progress:hover .bp-knob{ width:14px; height:14px; }
.bp-tick{
  position:absolute; top:-3px; width:2px; height:11px; border-radius:2px;
  background:rgba(255,214,102,.9); transform:translateX(-1px);
}
/* AB 循环区间（课程练习室用） */
.bp-range{
  position:absolute; top:50%; transform:translateY(-50%);
  height:5px; border-radius:99px; display:none;
  background:rgba(240,165,0,.5);
  box-shadow:inset 0 0 0 1px rgba(240,165,0,.85);
  pointer-events:none;
}
.bp-bubble{
  position:absolute; bottom:26px; transform:translateX(-50%);
  background:rgba(0,0,0,.82); color:#fff; font-size:11px; line-height:1;
  padding:5px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; transition:opacity .12s; pointer-events:none;
}
.bp-progress.bp-drag .bp-bubble{ opacity:1; }

/* 控制行 */
.bp-ctl{ display:flex; align-items:center; gap:8px; height:34px; padding:0 2px; }
.bp-btn{
  background:none; border:0; padding:5px; margin:0; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:8px; line-height:1;
}
.bp-btn:active{ background:rgba(255,255,255,.14); }
.bp-time{
  font-size:12.5px; color:rgba(255,255,255,.62); letter-spacing:.4px;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
.bp-time b{ color:#fff; font-weight:600; }
.bp-grow{ flex:1; }
.bp-speed{
  font-size:11.5px; color:#fff; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  border-radius:11px; padding:2px 9px; line-height:16px; white-space:nowrap;
  font-family:inherit; cursor:pointer;
}
.bp-speed:active{ background:rgba(255,255,255,.14); }

/* 倍速菜单 */
.bp-menu{
  position:absolute; right:8px; bottom:46px; z-index:4; display:none;
  background:rgba(20,20,26,.96); border-radius:11px; padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.55); min-width:82px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.bp-menu.on{ display:block; }
.bp-menu i{
  display:block; font-style:normal; padding:8px 14px; border-radius:7px;
  font-size:12.5px; color:rgba(255,255,255,.78); text-align:center;
}
.bp-menu i.on{ color:var(--bp-a2); font-weight:700; background:rgba(255,255,255,.07); }

/* 手势提示 / 加载 / 报错 */
.bp-toast{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7); color:#fff; font-size:12.5px; padding:9px 16px;
  border-radius:20px; opacity:0; transition:opacity .16s; pointer-events:none; z-index:3;
}
.bp-toast.on{ opacity:1; }
.bp-ripple{
  position:absolute; top:0; bottom:0; width:34%; pointer-events:none;
  background:radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  opacity:0; transition:opacity .4s;
}
.bp-ripple.l{ left:0; border-radius:0 50% 50% 0; }
.bp-ripple.r{ right:0; border-radius:50% 0 0 50%; }
.bp-ripple.on{ opacity:1; transition:opacity .06s; }
.bp-spin{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; }
.bp-spin.on{ display:flex; }
.bp-spin i{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); border-top-color:#fff;
  animation:bp-rotate .8s linear infinite;
}
@keyframes bp-rotate{ to{ transform:rotate(360deg); } }
.bp-err{
  position:absolute; inset:0; display:none; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; color:#c9d2ee; font-size:12.5px;
  background:rgba(0,0,0,.86); text-align:center; padding:20px; z-index:5;
}
.bp-err.on{ display:flex; }
.bp-err span{ color:#8b93b8; font-size:11px; line-height:1.6; }
.bp-err button{
  margin-top:2px; background:linear-gradient(135deg,#6c5ce7,#8b7cf8); color:#fff;
  border:0; border-radius:9px; padding:8px 18px; font-size:12.5px; font-weight:700;
}
.bp-err-acts{ display:flex; gap:9px; align-items:center; margin-top:2px; }
.bp-err .bp-open{
  color:#b9aefc; font-size:12px; text-decoration:none; border:1px solid rgba(139,124,248,.5);
  border-radius:9px; padding:7px 14px;
}

/* 全屏（CSS 级，跨 iOS/安卓一致，保留自绘控件） */
.bp-player.bp-fs{
  position:fixed; inset:0; z-index:99999; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; background:#000;
}
.bp-player.bp-fs .bp-stage{
  position:absolute; inset:0; width:100%; height:100%;
  max-height:none; aspect-ratio:auto;
}
.bp-player.bp-fs .bp-bottom{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
html.bp-lock, html.bp-lock body{ overflow:hidden !important; height:100%; }

/* 教师端卡片内小圆角 */
.card .bp-player{ border-radius:10px; }