/* ============================================================
   FitLab · 健身视频库
   明亮 / 现代 / 移动优先
   ============================================================ */

:root {
  --bg: #f5f6fa;
  --card: #ffffff;
  --ink: #151a23;
  --ink-2: #737b8c;
  --ink-3: #a2a9b8;
  --line: #e9ecf3;
  --accent: #ff5a3c;
  --accent-2: #ff2e63;
  --grad: linear-gradient(135deg, #ff8a4c 0%, #ff3d77 100%);
  --cat: #ff5a3c; /* 由各卡片覆盖 */
  --radius: 20px;
  --radius-s: 14px;
  --shadow: 0 10px 30px rgba(21, 26, 35, .08);
  --shadow-s: 0 4px 14px rgba(21, 26, 35, .06);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dur: .22s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
img, video { display: block; max-width: 100%; }
::selection { background: rgba(255, 90, 60, .25); }

/* ---------- 应用列（桌面居中手机宽） ---------- */
.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
}
@media (min-width: 560px) {
  body { background: #eceef4; }
  .app { box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(21, 26, 35, .10); }
}

/* ---------- 启动屏 ---------- */
.boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.boot-logo { font-size: 52px; animation: pulse 1.2s var(--ease) infinite; }
.boot-txt { color: var(--ink-2); font-size: 14px; letter-spacing: .05em; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }

/* ---------- 视图过渡 ---------- */
.view { animation: viewIn .3s var(--ease) both; padding-bottom: calc(28px + var(--safe-b)); }
.view.is-player { animation-name: viewInRight; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes viewInRight { from { opacity: .4; transform: translateX(26px); } to { opacity: 1; transform: none; } }

/* ============================================================
   首页
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--safe-t)) 20px 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.logo-mark {
  width: 40px; height: 40px; border-radius: 13px; background: var(--grad);
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 6px 16px rgba(255, 61, 119, .35);
}
.logo-mark svg { width: 22px; height: 22px; }
.logo-name { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.logo-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .14em; margin-top: -2px; }

.hero {
  padding: 22px 20px 6px;
}
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 4px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 16px; border-radius: 999px; background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-s); transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur);
}
.chip:active { transform: scale(.94); }
.chip.on { background: var(--ink); color: #fff; }

.group { padding: 18px 20px 2px; }
.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.group-badge {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--cat) 14%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 25%, transparent);
}
.group-name { font-size: 16.5px; font-weight: 800; }
.group-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--ink-3); margin-top: -1px; }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 16px 16px 14px;
  background: var(--card); box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
  animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
.cat-card::after {
  content: ""; position: absolute; inset: auto -20% -55% auto; width: 120px; height: 120px;
  border-radius: 50%; background: color-mix(in srgb, var(--cat) 16%, transparent);
}
.cat-card:active { transform: scale(.96); box-shadow: var(--shadow); }
.cat-ico {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--cat) 18%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 22%, transparent);
}
.cat-name { font-size: 15.5px; font-weight: 800; }
.cat-desc { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cat-meta { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, white); padding: 3px 9px; border-radius: 999px; }

/* ---------- 视频卡片 ---------- */
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v-list { display: grid; gap: 12px; }
.v-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
  animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 55ms);
}
.v-card:active { transform: scale(.97); box-shadow: var(--shadow); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.v-thumb { position: relative; background: #10131a; overflow: hidden; }
.v-thumb.is-h { aspect-ratio: 16 / 9; }
.v-thumb.is-v { aspect-ratio: 9 / 16; }
.v-list .v-thumb.is-v { aspect-ratio: 16 / 9; } /* 列表里竖版缩略图统一用横版比例，封面 contain 展示 */
.v-list .v-thumb.is-v img { object-fit: contain; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-thumb.is-v img { object-fit: cover; }
.v-dur {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(10, 12, 18, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 2px 7px; border-radius: 7px;
}
.v-thumb.pend {
  display: grid; place-content: center; justify-items: center; gap: 4px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cat, #ff5a3c) 12%, #fff) 0%, #f2f4f9 100%);
}
.v-thumb.pend span { font-size: 30px; filter: grayscale(.15); }
.v-thumb.pend i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }

.v-body { padding: 11px 12px 12px; }
.v-title {
  font-size: 14px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.v-list .v-title { min-height: 0; }
.v-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.badge-cat {
  font-size: 10.5px; font-weight: 700; color: var(--cat);
  background: color-mix(in srgb, var(--cat) 12%, white);
  padding: 2.5px 8px; border-radius: 999px;
}
.badge-pend {
  font-size: 10.5px; font-weight: 700; color: #b98a00;
  background: #fff6dc; padding: 2.5px 8px; border-radius: 999px;
}
.tag { font-size: 10.5px; color: var(--ink-3); background: var(--bg); padding: 2.5px 8px; border-radius: 999px; font-weight: 600; }

/* ---------- 科目页头部 ---------- */
.cat-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--card);
  box-shadow: var(--shadow-s); transition: transform var(--dur) var(--ease);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 20px; height: 20px; }
.cat-head-title { font-size: 16.5px; font-weight: 800; }
.cat-head-sub { font-size: 11px; color: var(--ink-3); margin-top: -2px; }

.cat-hero { margin: 16px 20px 4px; border-radius: var(--radius); padding: 18px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 88%, #000 0%), color-mix(in srgb, var(--cat) 55%, #ff5a3c)); box-shadow: 0 14px 30px color-mix(in srgb, var(--cat) 35%, transparent); }
.cat-hero h2 { font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.cat-hero h2 b { font-size: 26px; }
.cat-hero p { margin-top: 6px; font-size: 12.5px; opacity: .92; }

.section-label { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; font-size: 14px; font-weight: 800; }
.section-label span { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* ============================================================
   播放器页
   ============================================================ */
.player-shell { user-select: none; -webkit-user-select: none; }

.stage-wrap { padding: calc(10px + var(--safe-t)) 14px 0; }
.stage-wrap.is-vertical { display: flex; justify-content: center; }

.stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 22px; overflow: hidden; background: #0c0f16;
  box-shadow: 0 18px 44px rgba(12, 15, 22, .28);
  touch-action: manipulation;
}
.is-vertical .stage {
  aspect-ratio: 9 / 16;
  height: min(74dvh, 700px);
  width: auto;
  max-width: 100%;
}
.stage video { width: 100%; height: 100%; object-fit: contain; }
.backdrop {
  position: absolute; inset: -8%; background-size: cover; background-position: center;
  filter: blur(34px) brightness(.8) saturate(1.2); transform: scale(1.1);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.backdrop.show { opacity: .9; }
.stage-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 10, 16, .55), transparent 26%, transparent 62%, rgba(8, 10, 16, .66));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.stage.ui-show .stage-mask { opacity: 1; }

/* 桌面/大屏 */
@media (min-width: 560px) {
  .is-vertical .stage { height: min(70dvh, 640px); }
}

/* 控件 */
.ctrl-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 12px 14px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ctrl-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 6px 12px calc(10px + var(--safe-b));
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stage.ui-show .ctrl-top, .stage.ui-show .ctrl-bottom { opacity: 1; transform: none; pointer-events: auto; }

.ct-btn {
  width: 36px; height: 36px; border-radius: 12px; flex: none; color: #fff;
  display: grid; place-items: center; background: rgba(16, 19, 27, .42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.ct-btn:active { transform: scale(.88); background: rgba(16, 19, 27, .6); }
.ct-btn svg { width: 19px; height: 19px; }
.ct-btn.on { color: #ffd0a6; }
.ct-title {
  flex: 1; min-width: 0; color: #fff; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.big-btn {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(14, 17, 24, .5); border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.big-btn:active { transform: scale(.9); }
.big-btn svg { width: 30px; height: 30px; margin-left: 2px; }
.big-btn.playing svg { margin-left: 0; }
.big-btn.hide { opacity: 0; pointer-events: none; transform: scale(.8); }

/* 进度条 */
.scrub { position: relative; padding: 10px 0 8px; touch-action: none; cursor: pointer; }
.scrub-rail {
  position: relative; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .24); overflow: visible;
  transition: height var(--dur) var(--ease);
}
.scrub.scrubbing .scrub-rail { height: 6px; }
.scrub-buf { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: rgba(255, 255, 255, .34); width: 0; }
.scrub-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px;
  background: var(--grad);
}
.scrub-thumb {
  position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transform: translateY(-50%) scale(.72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform var(--dur) var(--ease);
}
.scrub.scrubbing .scrub-thumb { transform: translateY(-50%) scale(1.18); }
.scrub-bubble {
  position: absolute; bottom: 30px; left: 0; transform: translateX(-50%) translateY(4px);
  background: rgba(12, 15, 22, .85); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 9px; opacity: 0; pointer-events: none;
  transition: opacity .16s var(--ease); white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scrub-bubble::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.scrub.scrubbing .scrub-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

.ctrl-row { display: flex; align-items: center; gap: 6px; }
.time { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .92); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.time.dur { color: rgba(255, 255, 255, .55); }
.time-sep { color: rgba(255, 255, 255, .35); font-size: 11px; }
.ctrl-sp { flex: 1; }
.row-btn {
  width: 36px; height: 36px; border-radius: 11px; color: #fff; flex: none;
  display: grid; place-items: center; transition: transform var(--dur) var(--ease), background var(--dur);
}
.row-btn:active { transform: scale(.85); background: rgba(255, 255, 255, .14); }
.row-btn svg { width: 20px; height: 20px; }
.row-btn.txt { width: auto; min-width: 36px; padding: 0 8px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.row-btn.on { color: #ffc59f; }

/* 双击区域提示 / 长按倍速徽标 */
.seek-hint {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  color: #fff; font-size: 12.5px; font-weight: 800;
  background: rgba(14, 17, 24, .5); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
}
.seek-hint svg { width: 20px; height: 20px; }
.seek-hint.left { left: 8%; } .seek-hint.right { right: 8%; }
.seek-hint.pop { animation: hintPop .6s var(--ease); }
@keyframes hintPop { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 25% { opacity: 1; transform: translateY(-50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(.92); } }
.rate-badge {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: var(--grad); padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255, 61, 119, .45);
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.rate-badge.show { opacity: 1; transform: scale(1); }

/* 浮层 pill */
.pill {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 6px;
  background: rgba(12, 15, 22, .78); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 9px 16px; border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.pill.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.pill:active { transform: translateX(-50%) scale(.95); }
.sound-pill { bottom: calc(78px + var(--safe-b)); }
.resume-pill { bottom: calc(78px + var(--safe-b)); }

/* 待上传 / 错误层 */
.center-layer[hidden] { display: none; }
.center-layer {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: linear-gradient(160deg, #131722, #0c0f16); color: #fff; text-align: center;
  padding: 24px;
}
.center-layer .cl-ico { font-size: 44px; }
.center-layer .cl-t { font-size: 16px; font-weight: 800; }
.center-layer .cl-s { font-size: 12.5px; color: rgba(255, 255, 255, .6); max-width: 240px; }
.center-layer .cl-btn {
  margin-top: 6px; padding: 9px 22px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(255, 61, 119, .4);
}
.center-layer .cl-btn:active { transform: scale(.94); }

/* 播放器下方信息区 */
.p-info { padding: 16px 20px 0; }
.p-title-row { display: flex; align-items: flex-start; gap: 10px; }
.p-title-row h1 { font-size: 19px; font-weight: 800; line-height: 1.35; flex: 1; }
.p-orient {
  flex: none; font-size: 10.5px; font-weight: 800; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--card);
  padding: 3px 9px; border-radius: 999px; margin-top: 3px;
}
.p-desc { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }

.p-chips { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.p-chips::-webkit-scrollbar { display: none; }
.p-chip {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--card); color: var(--ink-2); box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur), box-shadow var(--dur);
}
.p-chip:active { transform: scale(.93); }
.p-chip svg { width: 15px; height: 15px; }
.p-chip.on { color: #fff; background: var(--grad); box-shadow: 0 8px 20px rgba(255, 61, 119, .35); }

.tips-card {
  margin-top: 14px; background: var(--card); border-radius: var(--radius);
  padding: 15px 16px; box-shadow: var(--shadow-s);
}
.tips-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; }
.tips-h svg { width: 16px; height: 16px; color: var(--accent); }
.tips-card ul { margin: 9px 0 0; padding: 0; font-size: 12.8px; color: var(--ink-2); display: grid; gap: 6px; list-style: none; }
.tips-card li { display: flex; align-items: baseline; }
.tips-card p { margin-top: 8px; font-size: 12.8px; color: var(--ink-2); }

.p-more { padding: 20px 20px 0; }
.p-more-h { font-size: 14px; font-weight: 800; margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; }
.p-more-h span { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.more-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.p-more::-webkit-scrollbar { display: none; }
.more-card {
  flex: none; width: 132px; background: var(--card); border-radius: 15px; overflow: hidden;
  box-shadow: var(--shadow-s); transition: transform var(--dur) var(--ease);
}
.more-card:active { transform: scale(.94); }
.more-card.now { box-shadow: 0 0 0 2px var(--accent), var(--shadow-s); }
.more-thumb { position: relative; aspect-ratio: 16 / 9; background: #10131a; }
.more-thumb img { width: 100%; height: 100%; object-fit: cover; }
.more-thumb.pend { display: grid; place-items: center; font-size: 20px; background: linear-gradient(150deg, #f2f4f9, #e8ebf2); }
.more-t { font-size: 11.5px; font-weight: 700; padding: 8px 9px 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 底部说明 ---------- */
.foot { text-align: center; color: var(--ink-3); font-size: 11px; padding: 26px 20px 10px; }
.foot b { font-weight: 800; color: var(--ink-2); }

/* ---------- 倍速面板 ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(12, 15, 22, .42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s var(--ease);
}
.sheet-mask.show { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 105%); z-index: 91;
  width: 100%; max-width: 520px;
  background: var(--card); border-radius: 24px 24px 0 0;
  padding: 14px 20px calc(18px + var(--safe-b));
  transition: transform .32s var(--ease);
  box-shadow: 0 -12px 40px rgba(12, 15, 22, .2);
}
.sheet.show { transform: translate(-50%, 0); }
.sheet-grip { width: 40px; height: 4.5px; border-radius: 99px; background: var(--line); margin: 0 auto 12px; }
.sheet-h { font-size: 15px; font-weight: 800; text-align: center; margin-bottom: 14px; }
.rate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rate-opt {
  padding: 13px 0; border-radius: 14px; text-align: center;
  font-size: 14.5px; font-weight: 800; color: var(--ink-2);
  background: var(--bg); transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur);
}
.rate-opt:active { transform: scale(.94); }
.rate-opt.on { color: #fff; background: var(--grad); box-shadow: 0 8px 18px rgba(255, 61, 119, .35); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(64px + var(--safe-b)); transform: translateX(-50%) translateY(14px);
  z-index: 120; max-width: 78vw;
  background: rgba(20, 24, 33, .92); color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; text-align: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 演示模式横幅 ---------- */
.demo-banner {
  position: fixed; top: calc(52px + var(--safe-t)); right: 12px; z-index: 80;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  background: rgba(20, 24, 33, .82); color: #ffd48a; padding: 6px 12px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ---------- 错误页 ---------- */
.boot.err { gap: 8px; }
.boot.err .boot-txt { color: var(--ink-2); }
.boot.err button { margin-top: 10px; padding: 10px 26px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; }

/* ---------- 继续观看 ---------- */
.cw { padding: 16px 20px 0; }
.cw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cw-title { font-size: 14px; font-weight: 800; }
.cw-clear { font-size: 11.5px; color: var(--ink-3); font-weight: 600; padding: 4px 10px; border-radius: 999px; transition: background var(--dur), color var(--dur); }
.cw-clear:active { background: var(--line); color: var(--ink-2); }
.cw-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cw-scroll::-webkit-scrollbar { display: none; }
.cw-card {
  flex: none; width: 150px; background: var(--card); border-radius: 15px; overflow: hidden;
  box-shadow: var(--shadow-s); transition: transform var(--dur) var(--ease);
  animation: rise .4s var(--ease) both; animation-delay: calc(var(--i) * 55ms);
}
.cw-card:active { transform: scale(.95); }
.cw-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #131722, #1c2230); display: grid; place-items: center; color: rgba(255, 255, 255, .85); font-size: 17px; }
.cw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cw-bar { height: 3px; background: var(--line); }
.cw-bar i { display: block; height: 100%; background: var(--grad); }
.cw-body { padding: 8px 9px 10px; }
.cw-t { font-size: 11.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cw-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ---------- 要点时间戳 ---------- */
.tip-jump {
  flex: none; display: inline-flex; align-items: center; margin-right: 8px; padding: 1.5px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--cat, #ff5a3c) 12%, white);
  color: var(--cat, #ff5a3c);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat, #ff5a3c) 22%, transparent);
  transition: transform var(--dur) var(--ease);
}
.tip-jump:active { transform: scale(.9); }

/* 尊重系统减动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}