/* ============================================================
 * apps/vidplayer.css —— 波站播放器（科技树的 video 通道）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 内容与切分前逐字节一致 —— 只换了存放位置，没动一个字符。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============================================================
 * 波站播放器（科技树的 video 通道）
 *
 * 视频没有真素材，进度条是"压缩播放"的可视化：整条 9 秒走完，
 * 玩家看到的是进度在动、时间在涨。标记点告诉玩家"看到这儿会学到东西"。
 * ============================================================ */
.vid-cover .bili-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, .28);
}
.vid-cover .bp-fill {
  height: 100%; width: 0; background: #FB7299;
  transition: width .1s linear;
}
.vid-cover .bp-t {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 11px; color: #FFFDFB; opacity: 0; font-variant-numeric: tabular-nums;
  transition: opacity .2s ease;
}
.vid-cover .bili-prog[style*="block"] ~ .bp-t { opacity: 1; }

/* 关键段落标记：一根竖线 + 小圆点 */
.vid-cover .bili-mark {
  position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: rgba(255, 253, 251, .7);
  box-shadow: 0 0 4px rgba(255, 253, 251, .5);
}
.vid-cover .bili-mark::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #FFFDFB;
}

/* UP 主简介里的提示条：贴着"这条视频跟技术有关" */
.bili-tip {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 10px 12px; padding: 10px 12px;
  background: #FDF8EE; border-left: 3px solid var(--md-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px; color: #8A6A22; line-height: 1.6;
}
.bili-tip .ic-svg { flex: none; margin-top: 2px; opacity: .8; }