/* =====================================================================
 *  learn.css —— 学习园地（专栏 / 课程 / 播放器 / 时长排名）
 *  手机优先，响应式适配电脑端；配合 style.css 使用
 * ===================================================================== */

/* ---------- 通用 ---------- */
.ln { max-width: 860px; margin: 0 auto; padding: 14px 14px 30px; }
.ln-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: #667; margin-bottom: 12px; cursor: pointer;
  padding: 6px 12px 6px 6px; border-radius: 20px; background: #f4f5f7;
}
.ln-back:active { background: #e9eaee; }
.ln-card {
  background: #fff; border-radius: 16px; padding: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05); margin-bottom: 12px;
}
.ln-sub { font-size: 12px; color: #98a; }

/* ---------- 首页：我的学习 + 专栏列表 ---------- */
.ln-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.ln-stats .num { font-size: 17px; font-weight: 700; color: #FF6B35; }
.ln-stats .lbl { font-size: 11px; color: #98a; margin-top: 2px; }
.ln-rank-entry { width: 100%; margin-top: 12px; }

.ln-series { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.ln-series:active { opacity: .85; }
.ln-cover {
  width: 118px; height: 66px; border-radius: 10px; object-fit: cover; flex: 0 0 118px;
  background: linear-gradient(135deg, #ffb27a, #ff6b35);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ln-series h3 { margin: 0 0 4px; font-size: 15px; }
.ln-intro { font-size: 12px; color: #98a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-meta { font-size: 11px; color: #b3bac4; margin-top: 4px; }
.ln-arrow { margin-left: auto; color: #ccd; font-size: 18px; flex: 0 0 auto; }

/* ---------- 课程列表 ---------- */
.ln-course { display: flex; gap: 12px; cursor: pointer; }
.ln-course:active { opacity: .85; }
.ln-course h4 { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.ln-prog { height: 5px; background: #eef0f4; border-radius: 4px; overflow: hidden; margin: 7px 0 5px; }
.ln-prog i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a5a, #ff6b35); }
.ln-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ln-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 9px; background: #f2f3f6; color: #8791a0; }
.ln-tag.done { background: #e7f7ee; color: #22a45d; }
.ln-tag.trial { background: #eaf1fd; color: #3b7ce0; }
.ln-tag.live { background: #fff1e8; color: #ff6b35; }
.ln-tag.lock { background: #fff4dc; color: #d98a00; }

/* ---------- 播放器 ---------- */
.lp { user-select: none; -webkit-user-select: none; }
.lp-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
.lp-wrap:fullscreen { border-radius: 0; aspect-ratio: auto; }
.lp-wrap:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; }
.lp-video, .lp-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; background: #000; }

/* 水印层：始终盖在画面与控制条之上，不拦截任何触摸 */
.lp-wm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; }
.lp-wm span { position: absolute; white-space: nowrap; will-change: left, top; }

/* 播放/中央大按钮 */
.lp-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 20; background: transparent; border: 0; cursor: pointer;
}
.lp-center b {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.45);
  color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}

/* 控制条 */
.lp-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 12px;
}
.lp-ctrl button { background: transparent; border: 0; color: #fff; font-size: 16px; padding: 2px 4px; cursor: pointer; }
.lp-bar { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; }
.lp-bar i { position: relative; display: block; width: 100%; height: 4px; background: rgba(255,255,255,.28); border-radius: 3px; }
.lp-bar i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: #ff6b35; border-radius: 3px; }
.lp-bar b { position: absolute; left: var(--p, 0%); top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lp-bar.noseek { cursor: not-allowed; opacity: .75; }
.lp-menu {
  position: absolute; right: 8px; bottom: 44px; z-index: 26; background: rgba(20,22,28,.92);
  border-radius: 10px; overflow: hidden; display: none; min-width: 76px;
}
.lp-menu.show { display: block; }
.lp-menu button { display: block; width: 100%; text-align: center; padding: 9px 14px; font-size: 13px; color: #fff; background: transparent; border: 0; cursor: pointer; }
.lp-menu button.on { color: #ff9a5a; font-weight: 700; }

/* 全屏锁定遮罩：挡住控制条与手势 */
.lp-shield { position: absolute; inset: 0; z-index: 28; background: transparent; }
.lp-unlock {
  position: absolute; top: 12px; right: 12px; z-index: 29; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 17px; cursor: pointer;
}
.lp-unlock.holding { background: rgba(255,107,53,.85); }

/* 试看结束遮罩 */
.lp-trial {
  position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(0,0,0,.78); color: #fff; text-align: center; padding: 20px;
}
.lp-trial h4 { margin: 0; font-size: 17px; }
.lp-trial p { margin: 0; font-size: 13px; color: #cdd3dc; }
.lp-trial button { padding: 9px 22px; border: 0; border-radius: 20px; background: #ff6b35; color: #fff; font-size: 14px; cursor: pointer; }

/* 课程信息 */
.lp-info h3 { margin: 2px 0 6px; font-size: 16px; line-height: 1.45; }
.lp-detail { font-size: 14px; color: #556; line-height: 1.75; margin-top: 10px; word-break: break-word; }
.lp-detail img { max-width: 100%; height: auto; border-radius: 8px; }
.lp-anti { user-select: none !important; -webkit-user-select: none !important; }

/* 下一节 */
.lp-next { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.lp-next:active { opacity: .85; }

/* ---------- 时长排名 ---------- */
.ln-rank-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ln-rank-tabs button {
  flex: 1; padding: 9px 0; border: 1px solid #eceef2; border-radius: 20px;
  background: #fff; font-size: 13.5px; color: #667; cursor: pointer;
}
.ln-rank-tabs button.on { background: #ff6b35; border-color: #ff6b35; color: #fff; font-weight: 700; }
.ln-rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f2f3f6; font-size: 14px; }
.ln-rank-row:last-child { border-bottom: 0; }
.ln-rank-row.me { background: #fff6f2; border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.ln-rank-no { width: 30px; text-align: center; font-weight: 700; color: #98a; flex: 0 0 30px; }
.ln-rank-no.top { font-size: 18px; }
.ln-rank-name { flex: 1; min-width: 0; }
.ln-rank-name b { display: block; font-size: 14px; }
.ln-rank-name span { font-size: 11.5px; color: #98a; }
.ln-rank-sec { font-weight: 700; color: #ff6b35; font-variant-numeric: tabular-nums; }
.ln-rank-ellipsis { text-align: center; color: #ccd; letter-spacing: 4px; padding: 4px 0; }
.ln-meband {
  position: sticky; bottom: 0; margin-top: 10px; padding: 11px 14px;
  background: #fff; border-radius: 14px; box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  display: flex; align-items: center; gap: 12px; font-size: 13.5px;
}

/* ---------- 电脑端适配 ---------- */
@media (min-width: 720px) {
  .ln { padding: 24px 0 50px; }
  .ln-card { padding: 18px; border-radius: 16px; }
  .ln-cover { width: 168px; height: 94px; flex-basis: 168px; }
  .ln-course h4 { font-size: 15.5px; }
  .ln-stats .num { font-size: 22px; }
}