/* ═══════════════════════════════════════════════════════════
   韦清言TV · 前端样式
   规格取自 film.video.qq.com 实测：
     主色 #ff650f / 头部 84px 透明叠加 / PingFang SC
     次要文字 #999 #666 / 主体文字 #222 / 分隔 #ebebeb
   ═══════════════════════════════════════════════════════════ */
:root {
  --orange: #ff650f;
  --orange-d: #e85800;
  --bg: #ffffff;
  --bg2: #f5f6f7;
  --bg3: #ececec;
  --t1: #222222;
  --t2: #666666;
  --t3: #999999;
  --line: #ebebeb;
  --card: #ffffff;
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-h: 0 8px 24px rgba(0, 0, 0, .14);
  --hdh: 84px;
}

/* 夜间 */
html.dark {
  --bg: #16181d;
  --bg2: #1c1f26;
  --bg3: #23262e;
  --t1: #f2f4f8;
  --t2: #a8adb8;
  --t3: #737884;
  --line: rgba(255, 255, 255, .10);
  --card: #1c1f26;
  --shadow: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-h: 0 8px 24px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: PingFangSC-Regular, Tahoma, "Microsoft Yahei", sans-serif, Arial, "Hiragino Sans GB";
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { display: block; }

/* ═══════════ 顶部导航 ═══════════ */
.hd {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--hdh);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s;
}

/* 首页顶部叠在 banner 上：不用渐变底（会在 header 底边留一道黑线），
   改由文字投影 + 半透明胶囊保证可读性 */
body.on-home .hd:not(.solid) {
  background: transparent;
  border-bottom-color: transparent;
}
body.on-home .hd:not(.solid) .nav a,
body.on-home .hd:not(.solid) .logo {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .45);
}
body.on-home .hd:not(.solid) .search {
  background: rgba(18, 20, 26, .42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
body.on-home .hd:not(.solid) .search input { color: #fff; }
body.on-home .hd:not(.solid) .search input::placeholder { color: rgba(255,255,255,.65); }
body.on-home .hd:not(.solid) .search .ic path,
body.on-home .hd:not(.solid) .iconbtn svg path { fill: #fff; }
body.on-home .hd:not(.solid) .iconbtn { background: rgba(18, 20, 26, .34); }

.hd.solid {
  background: var(--bg);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(180%) blur(20px);
}

.hd-in {
  max-width: 1680px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* logo */
.logo {
  display: flex; align-items: baseline; gap: 2px;
  font-size: 24px; font-weight: 800; letter-spacing: -.5px;
  white-space: nowrap;
  color: var(--orange);
}
.logo-tv {
  font-size: 15px; font-weight: 800; letter-spacing: 0;
  background: var(--orange); color: #fff;
  padding: 2px 6px; border-radius: 4px; margin-left: 2px;
  transform: translateY(-1px);
}

/* 频道导航 */
.nav { display: flex; align-items: center; gap: 30px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav a {
  font-size: 15px; font-weight: 500; color: var(--t2);
  white-space: nowrap; padding: 6px 0;
  transition: color .18s ease;
  position: relative;
}
.nav a:hover { color: var(--orange); }
.nav a.on { color: var(--orange); font-weight: 600; }
.nav a.on::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 2px; background: var(--orange);
}

/* 右侧 */
.hd-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.search {
  display: flex; align-items: center; gap: 8px;
  width: 260px; height: 40px; padding: 0 14px;
  border-radius: 20px; background: var(--bg3);
  transition: background .2s ease, box-shadow .2s ease, width .25s ease;
}
.search:focus-within {
  background: var(--bg);
  box-shadow: 0 0 0 2px rgba(255,101,15,.35);
  width: 320px;
}
.search .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.search .ic path { fill: var(--t3); }
.search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  font-size: 14px; color: var(--t1);
}
.search input::placeholder { color: var(--t3); }

.iconbtn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .2s ease;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn svg path { fill: var(--t2); }
.iconbtn:hover { background: var(--bg3); }
.iconbtn:active { transform: scale(.92); }

/* ═══════════ 首页 Banner ═══════════ */
.banner {
  position: relative;
  margin-top: calc(-1 * var(--hdh));
  height: 560px;
  overflow: hidden;
  background: var(--bg2);
}
.banner-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.banner-mask {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,0) 58%);
}
.banner-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 1680px; margin: 0 auto; padding: 0 32px 48px;
}
.banner-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: var(--orange); border-radius: 4px; margin-bottom: 14px;
}
.banner-title {
  font-size: 44px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; text-shadow: 0 2px 20px rgba(0,0,0,.5);
  margin-bottom: 12px;
}
.banner-desc {
  font-size: 15px; color: rgba(255,255,255,.78);
  max-width: 640px; line-height: 1.6; margin-bottom: 22px;
}
.banner-btns { display: flex; gap: 12px; }
.btn-play {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 30px;
  background: var(--orange); color: #fff;
  font-size: 16px; font-weight: 600; border-radius: 23px;
  transition: background .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-play:hover { background: var(--orange-d); transform: translateY(-2px); }
.btn-play:active { transform: scale(.95); }
.btn-play svg { width: 18px; height: 18px; }
.btn-play svg path { fill: #fff; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 26px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 15px; font-weight: 600; border-radius: 23px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28);
  transition: background .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }
.btn-ghost:active { transform: scale(.95); }

/* ═══════════ 内容区 ═══════════ */
.wrap { max-width: 1680px; margin: 0 auto; padding: 40px 32px 80px; }

/* 搜索结果的源分组（全部模式） */
.src-group { margin-bottom: 30px; }
.src-group-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.src-group-hd .cnt { font-size: 12px; color: var(--t3); }
.src-group .grid { margin-bottom: 0; }
.empty.sm { padding: 22px 0; font-size: 13px; }

/* 卡片上的来源小标 */
.src-tag {
  display: inline-block;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
}
.src-tag.s-gf  { background: rgba(255, 101, 15, .85); }
.src-tag.s-ff  { background: rgba(38, 132, 255, .85); }
.src-tag.s-xg  { background: rgba(0, 190, 120, .85); }
.src-tag.multi { background: linear-gradient(90deg, rgba(255,101,15,.9), rgba(38,132,255,.9)); }

/* 搜索源切换（全部 / 官方 / FF / XG） */
.src-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.src-tabs button {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--t2);
  background: transparent;
  border: 1px solid var(--line);
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.src-tabs button:hover {
  color: var(--orange);
  background: rgba(255, 101, 15, .08);
  border-color: rgba(255, 101, 15, .35);
}
.src-tabs button.on {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  font-weight: 600;
}

.sec-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sec-title {
  display: flex; align-items: baseline; gap: 12px;
}
.sec-title h2 { font-size: 24px; font-weight: 750; letter-spacing: -.3px; }
.sec-title .sub { font-size: 13px; color: var(--t3); }
.sec-act { display: flex; align-items: center; gap: 10px; }

.btn-sq {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px;
  font-size: 13px; font-weight: 600; color: var(--t2);
  border-radius: 8px; background: var(--bg2);
  transition: background .18s ease, color .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-sq:hover { background: var(--orange); color: #fff; }
.btn-sq:active { transform: scale(.93); }
.btn-sq svg { width: 14px; height: 14px; }
.btn-sq svg path { fill: currentColor; }

/* 筛选栏 */
.filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 16px 0 22px; border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.filter .f-label { font-size: 13px; color: var(--t3); margin-right: 6px; }
.filter button {
  height: 30px; padding: 0 14px; font-size: 13px;
  color: var(--t2); border-radius: 15px;
  transition: all .16s ease;
}
.filter button:hover { color: var(--orange); background: rgba(255,101,15,.08); }
.filter button.on { color: #fff; background: var(--orange); font-weight: 600; }

/* ═══════════ 卡片网格 ═══════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 26px 18px;
}
.card { cursor: pointer; }
.card-pic {
  position: relative;
  width: 100%; aspect-ratio: 2 / 3;
  border-radius: 8px; overflow: hidden;
  background: var(--bg3);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.card:hover .card-pic { transform: translateY(-6px); box-shadow: var(--shadow-h); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-pic img { transform: scale(1.05); }

.card-rate {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 13px; font-weight: 800; color: var(--orange);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  font-style: italic;
}
.card-badge {
  position: absolute; left: 8px; top: 8px;
  height: 20px; padding: 0 7px;
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(255,101,15,.92); border-radius: 4px;
}
.card-mask {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 42%);
  opacity: 0; transition: opacity .25s ease;
}
.card:hover .card-mask { opacity: 1; }
.card-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.8);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,101,15,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .28s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.card-play svg { width: 20px; height: 20px; }
.card-play svg path { fill: #fff; }

.card-title {
  margin-top: 10px; font-size: 14px; font-weight: 550; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .18s ease;
}
.card:hover .card-title { color: var(--orange); }
.card-sub {
  margin-top: 4px; font-size: 12px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════ 加载与空态 ═══════════ */
.loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 46px 0; color: var(--t3); font-size: 14px;
}
.spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--bg3); border-top-color: var(--orange);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 70px 0; color: var(--t3); font-size: 14px; }

/* ═══════════ 详情页 ═══════════ */
.detail-top {
  display: flex; gap: 40px; padding: 40px 0;
}
.detail-pic {
  width: 280px; flex: 0 0 auto;
  aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.detail-pic img { width: 100%; height: 100%; object-fit: cover; }
.detail-info { flex: 1 1 auto; min-width: 0; }
.detail-info h1 { font-size: 34px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 14px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--t2); margin-bottom: 20px; }
.detail-meta b { color: var(--orange); font-weight: 700; }
.detail-blurb {
  font-size: 14px; line-height: 1.85; color: var(--t2);
  max-width: 900px; margin-bottom: 26px;
}
.eps {
  /* 等宽网格：flex + padding 会让每个按钮跟着文字长短变形，排出来参差不齐 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.eps button {
  height: 38px; padding: 0 8px; font-size: 14px;
  color: var(--t2); border-radius: 8px; background: var(--bg2);
  transition: all .16s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.eps button:hover { color: #fff; background: var(--orange); }

/* ═══════════ 详情页操作区 ═══════════ */
.detail-actions {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.btn-play-lg {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 32px;
  background: var(--orange); color: #fff;
  font-size: 16px; font-weight: 650; border-radius: 23px;
  transition: background .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-play-lg svg { width: 19px; height: 19px; }
.btn-play-lg svg path { fill: #fff; }
.btn-play-lg:hover { background: var(--orange-d); transform: translateY(-2px); }
.btn-play-lg:active { transform: scale(.95); }

.btn-fav-lg {
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 24px;
  background: var(--bg2); color: var(--t2);
  font-size: 15px; font-weight: 600; border-radius: 23px;
  transition: all .18s ease;
}
.btn-fav-lg svg { width: 17px; height: 17px; }
.btn-fav-lg svg path { fill: currentColor; }
.btn-fav-lg:hover { background: var(--bg3); color: var(--t1); }
.btn-fav-lg.on { background: rgba(255,101,15,.12); color: var(--orange); }

/* ═══════════ 历史抽屉 ═══════════ */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px;
  background: var(--bg); z-index: 200;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.25,.46,.45,.94);
  box-shadow: -8px 0 40px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 22px; border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.drawer-hd button { font-size: 18px; color: var(--t3); }
.drawer-bd { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; }
.hist-item {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: opacity .16s ease;
}
.hist-item:hover { opacity: .75; }
.hist-item img { width: 76px; height: 106px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--bg3); }
.hist-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hist-meta b { font-size: 14.5px; font-weight: 600; }
.hist-meta span { font-size: 12.5px; color: var(--t3); }
.hist-bar { height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.hist-bar i { display: block; height: 100%; background: var(--orange); }

.mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 190; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.mask.on { opacity: 1; pointer-events: auto; }

/* ═══════════ 页脚 ═══════════ */
.ft {
  padding: 40px 32px 56px; text-align: center;
  font-size: 12.5px; color: var(--t3);
  border-top: 1px solid var(--line);
}

/* ═══════════ 响应式（Win / Mac / 平板 / 手机） ═══════════ */
@media (max-width: 1400px) {
  .hd-in, .wrap, .banner-info { padding-left: 24px; padding-right: 24px; }
  .nav { gap: 22px; }
  .search { width: 220px; }
}
@media (max-width: 1100px) {
  .nav { gap: 16px; }
  .nav a { font-size: 14px; }
  .banner { height: 440px; }
  .banner-title { font-size: 34px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
}
@media (max-width: 820px) {
  /* 两行：上行 logo + 搜索 + 按钮，下行分类导航（可横滑） */
  :root { --hdh: 100px; }
  /* 状态栏留白修复：header 高度含安全区并自己吃掉 padding-top，
     背景色一路铺到屏幕顶端 */
  .hd {
    height: calc(var(--hdh) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .hd-in {
    height: var(--hdh);
    padding: 0 16px;
    flex-wrap: wrap;
    align-content: center;
    gap: 0 12px;
  }
  .hd-right { margin-left: auto; }
  .logo { font-size: 19px; }
  .logo-tv { font-size: 12px; padding: 1px 5px; }

  /* ★ 分类导航：移动端不再藏起来，独占第二行，横向可滑 */
  .nav {
    display: flex;
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    height: 40px;
    gap: 20px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 14px; padding: 8px 0; flex-shrink: 0; }

  /* 移动端搜索框聚焦时不许变宽。
     一变宽第一行就装不下，flex-wrap 会把整块挤下去，
     导航被顶到第三行、logo 孤立在上头 —— 就是那个「跳上去」。 */
  .search { width: 146px; flex: 0 0 auto; }
  .search:focus-within { width: 146px; }
  .logo { flex: 0 0 auto; }
  .iconbtn { width: 36px; height: 36px; }
  .banner {
    height: 380px;
    margin-top: calc(-1 * (var(--hdh) + env(safe-area-inset-top, 0px)));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .banner-info { padding: 0 16px 32px; }
  .banner-title { font-size: 26px; }
  .banner-desc { font-size: 13px; }
  .wrap { padding: 24px 16px 60px; }
  .sec-title h2 { font-size: 16px; }
  .sec-title .sub { font-size: 12px; line-height: 1.5; }
  /* 源切换条：窄屏折到标题下面一行 */
  .sec-hd { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .sec-title { flex-wrap: wrap; gap: 4px 10px; }
  .src-tabs { width: 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .src-tabs::-webkit-scrollbar { display: none; }
  .src-tabs button { font-size: 12px; padding: 6px 12px; flex-shrink: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 10px; }
  .card-title { font-size: 13px; }
  .detail-top { flex-direction: column; gap: 22px; padding: 20px 0; }
  .detail-pic { width: 180px; }
  .detail-info h1 { font-size: 24px; }
  .detail-actions { gap: 10px; margin-bottom: 20px; }
  .btn-play-lg { flex: 1 1 auto; justify-content: center; padding: 0 20px; height: 44px; }
  .btn-fav-lg { padding: 0 18px; height: 44px; }
  .drawer { width: 88%; }
}

/* 刘海屏 / 灵动岛 */
@supports (padding: env(safe-area-inset-top)) {
  .hd-in { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .ft { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* 首屏淡入 */
.fade { animation: fade .42s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════
   播放器 —— 规格照 mv.qz520.top 原站
   .custom-controls inset:0 + pointer-events:none，只有子元素吃事件
   底部条 padding 8px/12px、gap 6px；按钮 32px 圆形；进度条 4px 白
   ═══════════════════════════════════════════════════════════ */
.player-layer {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
.player-layer.open { opacity: 1; pointer-events: auto; }

/* 浮层关闭时必须彻底放行点击：
   .pl-ctrl > * 带 pointer-events:auto，会穿透父级的 none，
   结果浮层透明了却还在吃事件，页面看起来像「回不去站点」。 */
.player-layer:not(.open),
.player-layer:not(.open) * { pointer-events: none !important; }

.pl {
  position: relative;
  width: 100%; max-width: 1320px;
  background: #000;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  transform: scale(.98);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.player-layer.open .pl:not(.is-fullscreen) { transform: scale(1); }

.pl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  /* 视频按原始比例缩放后必须居中，否则全屏（尤其移动端旋转后）会偏到一边 */
  display: flex;
  align-items: center;
  justify-content: center;
}
#pvVideo {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

/* ── 弹幕 / 手势 ── */
.pl-danmu {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 10;
  transition: opacity .3s ease;
}
.dm-item {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font-size: 17px; font-weight: 500;
  color: #fff;
  text-shadow: rgba(0, 0, 0, .5) 1px 1px 2px;
  will-change: transform;
}
.dm-item.me { color: #ffd36b; }

.pl-gesture {
  position: absolute; inset: 0;
  z-index: 10; background: transparent;
  touch-action: none;
}
.pl.playing .pl-gesture { cursor: none; }

/* ── 控制层（inset:0 覆盖，本身不吃事件） ── */
.pl-ctrl {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 35;
  transition: opacity .3s, visibility .3s;
  visibility: visible;
}
.pl-ctrl > * { pointer-events: auto; }
.pl.controls-hidden .pl-ctrl { opacity: 0; visibility: hidden; }
.pl.controls-hidden .pl-ctrl > * { pointer-events: none !important; }

/* 中央播放键（仅暂停时出现） */
.pl-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  border: 2px solid rgba(255, 255, 255, .55);
  cursor: pointer; z-index: 25;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .24s cubic-bezier(.34,1.56,.64,1);
}
.pl-center svg { width: 26px; height: 26px; margin-left: 3px; }
.pl-center svg path { fill: #fff; }
.pl:not(.playing) .pl-center { opacity: 1; pointer-events: auto; }
.pl:not(.playing) .pl-center:hover { transform: translate(-50%,-50%) scale(1.06); }

/* 底部条 */
.pl-bar {
  position: absolute; bottom: 0; left: 0;
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
  display: flex; align-items: center; gap: 6px;
  z-index: 15;
}

.pl-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
  transition: background .2s;
  flex-shrink: 0;
  color: #fff;
  user-select: none;
}
.pl-btn svg { width: 20px; height: 20px; }
.pl-btn svg path { fill: #fff; }
.pl-btn.pl-txt { width: auto; padding: 0 12px; border-radius: 16px; font-size: 13px; font-weight: 600; }
@media (hover: hover) {
  .pl-btn:hover { background: rgba(255, 255, 255, .15); }
}
.pl-btn:active { transform: scale(.94); }

/* 播放/暂停图标切换 */
#pvPlay .i-pause { display: none; }
.pl.playing #pvPlay .i-play { display: none; }
.pl.playing #pvPlay .i-pause { display: block; }

/* 时间 */
.pl-time {
  color: #fff; font-size: 14px;
  min-width: 40px; flex-shrink: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 进度条：20px 命中区，条 4px */
.pl-progress {
  flex: 1 1 0%;
  height: 20px;
  display: flex; align-items: center;
  position: relative; cursor: pointer;
}
.pl-pbg, .pl-pbuf, .pl-pplay {
  position: absolute; height: 4px; border-radius: 2px;
  transition: height .14s ease;
}
.pl-pbg { width: 100%; background: rgba(255, 255, 255, .3); }
.pl-pbuf { background: rgba(255, 255, 255, .5); }
.pl-pplay { background: #fff; }
.pl-progress:hover .pl-pbg,
.pl-progress:hover .pl-pbuf,
.pl-progress:hover .pl-pplay { height: 6px; }
.pl-pdot {
  position: absolute;
  width: 10px; height: 10px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%) scale(0);
  box-shadow: 0 0 4px rgba(0,0,0,.3);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.pl-progress:hover .pl-pdot { transform: translate(-50%) scale(1); }

/* 弹幕开关状态 */
#pvDmOn.off svg path { fill: rgba(255,255,255,.4); }
#pvDmOn.off::after {
  content: ''; position: absolute;
  width: 22px; height: 2px; background: rgba(255,255,255,.75);
  transform: rotate(-45deg); border-radius: 1px;
}
#pvDmOn { position: relative; }


/* 顶部：标题 + 选集/线路/关闭 */
.pl-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent);
  z-index: 16;
}
.pl-name {
  color: #fff; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  padding-right: 8px;
}
.pl-spacer { flex: 1 1 auto; }

.pl-epnow {
  position: absolute; left: 12px; bottom: 54px;
  color: rgba(255,255,255,.72); font-size: 12.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  pointer-events: none;
  z-index: 16;
}

/* 倍速菜单 */
.pl-menu {
  position: absolute; right: 12px; bottom: 54px;
  background: rgba(20, 20, 20, .92);
  border-radius: 10px; padding: 6px;
  display: none; flex-direction: column; gap: 4px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  min-width: 92px;
  z-index: 40;
}
.pl-menu.open { display: flex; }
.pl-menu button {
  padding: 10px 14px; border-radius: 8px;
  color: rgba(255,255,255,.8); font-size: 14px; text-align: left;
  transition: background .2s, color .2s;
}
.pl-menu button:hover { background: rgba(255,255,255,.1); }
.pl-menu button.on { color: #00c853; background: rgba(0,200,83,.15); }

/* 加载 / 错误 */
.pl-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: none; z-index: 30;
}
.pl.loading .pl-loading { display: block; }
.pl-spin {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  animation: plspin .8s linear infinite;
}
@keyframes plspin { to { transform: rotate(360deg); } }

.pl-error {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: none; padding: 12px 22px; border-radius: 10px;
  background: rgba(20,22,28,.92); color: #ffb4a4;
  font-size: 14px; z-index: 40; max-width: 82%; text-align: center;
}
.pl.error .pl-error { display: block; }
.pl.error .pl-loading { display: none; }

/* ═══ 全屏：逐条照抄原站 ═══
   .player.is-fullscreen      → fixed + 100dvw/100dvh
   .player.ios-fullscreen     → transition .4s
   .player.force-landscape    → 移动端旋转 90° 强制横屏（尺寸对调）
   ═══════════════════════════ */
.pl.is-fullscreen {
  position: fixed; top: 0; left: 0;
  width: 100dvw; height: 100dvh;
  max-width: none; border-radius: 0;
  z-index: 9999; background: #000;
  transform: none;
}
.pl.ios-fullscreen { transition: .4s; }

/* ★ 移动端盖满屏幕的关键：旋转 90°，宽高对调 */
.pl.force-landscape {
  transform: translate(-50%, -50%) rotate(90deg) !important;
  width: 100dvh !important;
  height: 100dvw !important;
  top: 50% !important;
  left: 50% !important;
  max-width: none;
  border-radius: 0;
}

.pl.is-fullscreen .pl-stage {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.pl.is-fullscreen .pl-panel { max-height: 62vh; }

/* 控制层隐藏（原站命名 controls-hidden） */
.pl.controls-hidden .pl-ctrl { opacity: 0; visibility: hidden; }
.pl.hide-cursor,
.pl.hide-cursor * { cursor: none !important; }
#pvFull .i-fs-exit { display: none; }
.pl.is-fullscreen #pvFull .i-fs { display: none; }
.pl.is-fullscreen #pvFull .i-fs-exit { display: block; }

/* 选集 / 线路面板 */
.pl-panel {
  position: absolute; top: 0; left: 0; right: 0;
  max-height: 300px; overflow-y: auto;
  background: rgba(14, 16, 21, .97);
  backdrop-filter: blur(16px);
  padding: 60px 16px 18px;
  display: none;
  z-index: 50;
}
.pl-panel.open { display: block; }
.pl-panel-hd { font-size: 13px; color: #8b92a0; margin-bottom: 12px; font-weight: 600; }
.pv-eps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.pv-eps-grid button {
  height: 34px; border-radius: 7px; font-size: 12.5px;
  background: rgba(255,255,255,.07); color: #c1c7d2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.pv-eps-grid button:hover { background: rgba(255,255,255,.14); color: #fff; }
.pv-eps-grid button.on { background: #fff; color: #111; font-weight: 700; }

.pv-route button.pv-route {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 9px; background: rgba(255,255,255,.06);
  color: #c8cdd6; font-size: 13.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.pv-route button.pv-route:hover { background: rgba(255,255,255,.12); color: #fff; }
.pv-route button.pv-route.on { background: rgba(0,200,83,.15); color: #00c853; }
.pv-route button.pv-route span { font-size: 12px; font-weight: 400; color: #7d8492; }
.pv-empty { font-size: 13px; color: #6b7280; padding: 8px 0; }

/* 移动端 */
@media (max-width: 820px) {
  .player-layer { padding: 0; }
  .pl { border-radius: 0; max-width: none; width: 100%; }
  .pl-stage { aspect-ratio: 16 / 9; }
  .pl-bar { padding: 6px 8px; gap: 4px; }
  .pl-btn { width: 30px; height: 30px; }
  .pl-btn svg { width: 18px; height: 18px; }
  .pl-btn.pl-txt { padding: 0 9px; font-size: 12px; }
  .pl-time { font-size: 12px; min-width: 34px; }
  .pl-epnow { display: none; }
  .pl-center { width: 54px; height: 54px; }
  .pl-center svg { width: 22px; height: 22px; }
  .dm-item { font-size: 15px; }
  .pv-eps-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .eps { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .eps button { height: 36px; font-size: 13px; }
  .pl-panel { padding: 56px 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   搜索入口按钮 + 头像（header 右侧）
   头像绝不能挤压搜索：两者都定宽，搜索框弹性吃掉剩余空间
   ═══════════════════════════════════════════════════════════ */
.hd-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.search-entry {
  display: flex; align-items: center; gap: 9px;
  width: 260px; height: 38px; padding: 0 14px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 19px; color: var(--t3); font-size: 13.5px;
  transition: border-color .18s, background .18s, color .18s;
  flex: 0 1 auto; min-width: 0;
}
.search-entry:hover { border-color: #39435a; color: var(--t2); }
.search-entry .ic { width: 17px; height: 17px; flex: 0 0 auto; }
.search-entry .ic path { fill: currentColor; }
.search-entry input { white-space: nowrap; }
body.on-home .hd:not(.solid) .search-entry {
  background: rgba(18,20,26,.34); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.7);
}
body.on-home .hd:not(.solid) .search-entry:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* 头像 */
.avatar {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  flex: 0 0 36px; overflow: hidden; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, transform .2s;
}
.avatar:hover { border-color: var(--orange); transform: scale(1.05); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
.avatar .avatar-fb {
  font-size: 14px; font-weight: 700; color: var(--orange); line-height: 1;
  display: block; user-select: none;
}
.avatar .avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green, #00be78); border: 2px solid var(--bg);
  display: none;
}
body.on-home .hd:not(.solid) .avatar {
  background: rgba(18,20,26,.34); border-color: rgba(255,255,255,.18);
}
body.on-home .hd:not(.solid) .avatar .avatar-fb { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   搜索页（搜索框在最上面）
   ═══════════════════════════════════════════════════════════ */
.search-page { padding-top: 6px; }
.sp-top {
  position: sticky; top: var(--hdh); z-index: 30;
  display: flex; align-items: center; gap: 12px;
  max-width: 1680px; margin: 0 auto; padding: 16px 32px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.sp-input {
  flex: 1; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 23px; transition: border-color .18s;
}
.sp-input:focus-within { border-color: var(--orange); }
.sp-input .ic { width: 19px; height: 19px; flex: 0 0 auto; }
.sp-input .ic path { fill: var(--t3); }
.sp-input input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--t1); font-size: 15px;
}
.sp-input input::placeholder { color: var(--t3); }
.sp-clear {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
}
.sp-clear:hover { background: rgba(255,255,255,.18); }
.sp-clear svg { width: 13px; height: 13px; }
.sp-clear svg path { fill: var(--t2); }
.sp-cancel {
  flex: 0 0 auto; height: 46px; padding: 0 6px;
  color: var(--t2); font-size: 14px; font-weight: 600;
}
.sp-cancel:hover { color: var(--orange); }
.sp-body { padding-top: 26px; }

.sp-sec { margin-bottom: 30px; }
.sp-sec-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sp-sec-hd b { font-size: 14px; font-weight: 700; }
.sp-sec-act { font-size: 12.5px; color: var(--t3); }
.sp-sec-act:hover { color: var(--orange); }

.kw-list { display: flex; flex-wrap: wrap; gap: 10px; }
.kw-item {
  height: 34px; padding: 0 16px; border-radius: 17px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--t2); font-size: 13.5px;
  transition: all .16s;
}
.kw-item:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
.kw-item.hot { color: var(--orange); border-color: rgba(255,101,15,.35); }
.kw-item.hot:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   登入 / 注册
   ═══════════════════════════════════════════════════════════ */
.auth-page { display: flex; align-items: center; justify-content: center; padding: 60px 24px; min-height: 60vh; }
.auth-box {
  width: 100%; max-width: 400px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 18px; padding: 38px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.auth-box h1 { font-size: 22px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.3px; }
.auth-box h1 i { color: var(--orange); font-style: normal; }
.auth-sub { font-size: 12.5px; color: var(--t3); margin-bottom: 26px; line-height: 1.6; }
.auth-f { margin-bottom: 16px; }
.auth-f label { display: block; font-size: 12px; color: var(--t3); margin-bottom: 7px; letter-spacing: .3px; }
.auth-f input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 11px; color: var(--t1); font-size: 14px; outline: none;
  transition: border-color .16s;
}
.auth-f input:focus { border-color: var(--orange); }
.auth-err { color: #ff7b7d; font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
.auth-btn {
  width: 100%; height: 46px; border-radius: 11px;
  background: var(--orange); color: #fff; font-size: 15px; font-weight: 650;
  transition: filter .16s, transform .12s;
}
.auth-btn:hover { filter: brightness(1.1); }
.auth-btn:active { transform: scale(.99); }
.auth-btn:disabled { opacity: .6; }
.auth-foot { text-align: center; font-size: 13px; color: var(--t3); margin-top: 20px; }
.auth-foot a { color: var(--orange); font-weight: 600; margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════
   用户中心
   ═══════════════════════════════════════════════════════════ */
.me-page { padding-top: 26px; }
.me-hd {
  display: flex; align-items: center; gap: 18px;
  padding: 24px; margin-bottom: 24px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
}
.me-av {
  width: 68px; height: 68px; border-radius: 50%; flex: 0 0 68px;
  background: var(--bg3); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.me-av img { width: 100%; height: 100%; object-fit: cover; }
.me-av span { font-size: 26px; font-weight: 800; color: var(--orange); }
.me-info { flex: 1; min-width: 0; }
.me-info h1 { font-size: 20px; font-weight: 800; margin-bottom: 5px; }
.me-meta { font-size: 12.5px; color: var(--t3); }
.me-hd .btn-ghost.sm { height: 34px; padding: 0 14px; font-size: 12.5px; }

.me-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.me-tabs button {
  height: 38px; padding: 0 18px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--t2); font-size: 13.5px; font-weight: 600;
  transition: all .16s;
}
.me-tabs button:hover { color: var(--t1); }
.me-tabs button.on { background: var(--orange); border-color: var(--orange); color: #fff; }

.me-form { max-width: 440px; }

.me-hist { display: flex; flex-direction: column; gap: 14px; }
.mh-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 13px;
  cursor: pointer; transition: border-color .16s, transform .16s;
}
.mh-item:hover { border-color: #39435a; transform: translateX(3px); }
.mh-pic {
  position: relative; width: 96px; height: 60px; flex: 0 0 96px;
  border-radius: 8px; overflow: hidden; background: var(--bg3);
}
.mh-pic img { width: 100%; height: 100%; object-fit: cover; }
.mh-mask {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.4), transparent 60%);
}
.mh-meta { flex: 1; min-width: 0; }
.mh-meta b { display: block; font-size: 14.5px; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-meta span { font-size: 12.5px; color: var(--t2); }
.mh-meta em { font-size: 11.5px; color: var(--t3); font-style: normal; margin-left: 8px; }
.mh-bar { height: 3px; background: var(--bg3); border-radius: 2px; margin: 8px 0 4px; overflow: hidden; }
.mh-bar i { display: block; height: 100%; background: var(--orange); border-radius: 2px; }
.mh-play {
  flex: 0 0 auto; height: 34px; padding: 0 16px; border-radius: 17px;
  background: var(--orange); color: #fff; font-size: 13px; font-weight: 650;
}
.mh-play:hover { filter: brightness(1.1); }
.me-kw { max-width: 720px; }

/* 提示条 */
.wqy-toast {
  position: fixed; left: 50%; bottom: 42px;
  transform: translateX(-50%) translateY(70px);
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 22px; font-size: 13.5px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  opacity: 0; transition: all .28s cubic-bezier(.34,1.3,.64,1);
  z-index: 999; pointer-events: none;
}
.wqy-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 移动端适配 ── */
@media (max-width: 820px) {
  /* 搜索入口收成图标+短字，绝不挤压 */
  .search-entry { width: auto; flex: 1 1 auto; min-width: 90px; padding: 0 12px; }
  .avatar { width: 32px; height: 32px; flex: 0 0 32px; }
  .avatar .avatar-fb { font-size: 13px; }

  .sp-top { top: var(--hdh); padding: 12px 16px; gap: 10px; }
  .sp-input { height: 42px; padding: 0 14px; }
  .sp-input input { font-size: 15px; }
  .sp-cancel { font-size: 13.5px; }
  .sp-body { padding-top: 18px; }

  .auth-page { padding: 30px 16px; min-height: 50vh; }
  .auth-box { padding: 30px 22px; border-radius: 16px; }

  .me-hd { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .me-av { width: 56px; height: 56px; flex: 0 0 56px; }
  .me-av span { font-size: 22px; }
  .me-info h1 { font-size: 18px; }
  .mh-pic { width: 78px; height: 50px; flex: 0 0 78px; }
  .mh-meta b { font-size: 13.5px; }
  .mh-play { height: 30px; padding: 0 12px; font-size: 12px; }
}

/* ── header 防挤压收口（移动端实测：logo 文字会溢出自己的 flex 盒，压到搜索入口）──
   规则：logo 定住不吃不缩不换行；搜索入口允许收缩；两者之和必须放得下 ── */
.logo { flex: 0 0 auto; white-space: nowrap; }
.search-entry { flex: 0 1 auto; min-width: 0; }

@media (max-width: 820px) {
  /* wrap 必须保留：.nav 是 flex:0 0 100%，nowrap 下它会被摁在第一行把布局撑歪 */
  .hd-in { flex-wrap: wrap; align-content: center; gap: 0 8px; }
  /* 不要 margin-left:auto —— wrap 容器里 auto margin 会把这整块挤下去换行，
     让搜索入口跑到最左边压住 logo。flex:1 1 auto 自己就吃满剩余宽度了 */
  .hd-right { flex: 1 1 0; min-width: 0; margin-left: 0; justify-content: flex-end; gap: 8px; }
  .logo { font-size: 15px !important; letter-spacing: -.3px; }
  .logo i { font-size: 15px !important; }
  /* 搜索入口吃掉剩余宽度，但至少留 84px，不至于变成一条线 */
  .search-entry { flex: 1 1 0; min-width: 84px; width: auto; padding: 0 11px; gap: 7px; }
  .search-entry input { font-size: 12.5px; }
  .search-entry .ic { width: 15px; height: 15px; }
  /* 移动端 header 图标紧凑一点，给搜索让位 */
  .iconbtn { width: 32px; height: 32px; }
  .iconbtn svg { width: 19px; height: 19px; }
  .avatar { width: 32px; height: 32px; flex: 0 0 32px; }
  /* 导航独占第二行，可横向滚动 */
  .nav { order: 10; flex: 0 0 100%; height: 40px; overflow-x: auto; }
}
@media (max-width: 400px) {
  .logo { font-size: 14px !important; }
  .logo i { font-size: 14px !important; }
  .search-entry { min-width: 74px; padding: 0 10px; }
}

/* ═══════════════════════════════════════════════════════════
   全站唯一的搜索框（顶栏）+ 搜索历史下拉
   ═══════════════════════════════════════════════════════════ */
.search-entry { position: relative; }
.search-entry input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--t1); font-size: 13.5px; font-family: inherit;
}
.search-entry input::placeholder { color: var(--t3); }
body.on-home .hd:not(.solid) .search-entry input { color: #fff; }
body.on-home .hd:not(.solid) .search-entry input::placeholder { color: rgba(255,255,255,.62); }
.search-entry:focus-within { border-color: var(--orange); background: var(--bg2); }
body.on-home .hd:not(.solid) .search-entry:focus-within {
  background: rgba(18,20,26,.86); border-color: var(--orange);
}

.se-clear {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,.13);
}
.se-clear.show { display: flex; }
.se-clear svg { width: 11px; height: 11px; }
.se-clear svg path { fill: var(--t2); }

.se-drop {
  position: absolute; top: calc(100% + 9px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 13px; padding: 8px;
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .18s; z-index: 60; max-height: 340px; overflow-y: auto;
}
.se-drop.open { opacity: 1; visibility: visible; transform: none; }
.se-drop-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 9px 8px; font-size: 11.5px; color: var(--t3);
}
.se-drop-clr { font-size: 11.5px; color: var(--t3); }
.se-drop-clr:hover { color: var(--orange); }
.se-drop-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px;
  color: var(--t2); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s, color .14s;
}
.se-drop-item:hover { background: var(--bg3); color: var(--t1); }

/* 搜索页标题（输入框已在顶栏） */
.sp-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.sp-head h2 { font-size: 15px; font-weight: 700; color: var(--t3); letter-spacing: .3px; }
.sp-kw { font-size: 17px; font-weight: 800; color: var(--t1); }
.sp-back {
  margin-left: auto; height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--t2); font-size: 12.5px;
}
.sp-back:hover { color: var(--t1); border-color: #39435a; }
.sp-body { padding-top: 22px; }

/* ═══════════════════════════════════════════════════════════
   移动端左右滑动快进 / 快退 的浮层提示
   ═══════════════════════════════════════════════════════════ */
.pl-swipe {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.88);
  min-width: 132px; padding: 15px 24px;
  background: rgba(0,0,0,.74);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 14px; text-align: center; color: #fff;
  opacity: 0; visibility: hidden; transition: all .18s cubic-bezier(.34,1.3,.64,1);
  z-index: 60; pointer-events: none;
}
.pl-swipe.on { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.pl-swipe .pl-sw-d {
  display: block; font-size: 23px; font-weight: 800;
  letter-spacing: -.5px; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.pl-swipe .pl-sw-t {
  font-size: 12px; color: rgba(255,255,255,.68);
  font-variant-numeric: tabular-nums;
}
/* 滑动时把控制层压下去，别挡视线 */
.pl.swiping .pl-ctrl { opacity: .25; }
.pl.swiping { cursor: grabbing; }

@media (max-width: 820px) {
  .se-drop { max-height: 260px; }
  .sp-head { margin-bottom: 16px; gap: 9px; }
  .sp-kw { font-size: 15.5px; }
  .sp-body { padding-top: 16px; }
  .pl-swipe { min-width: 116px; padding: 13px 20px; }
  .pl-swipe .pl-sw-d { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   头像上传（手机相册选择，不再填 URL）
   ═══════════════════════════════════════════════════════════ */
.av-up { display: flex; align-items: center; gap: 16px; }
.av-prev {
  width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%;
  overflow: hidden; background: var(--bg3); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.av-prev img { width: 100%; height: 100%; object-fit: cover; }
.av-prev span { font-size: 27px; font-weight: 800; color: var(--orange); }
.av-up-r { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.av-pick {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 650;
  cursor: pointer; transition: filter .16s, transform .12s;
  align-self: flex-start;
}
.av-pick:hover { filter: brightness(1.09); }
.av-pick:active { transform: scale(.98); }
.av-pick svg { width: 16px; height: 16px; }
.av-pick svg path { fill: #fff; }
.av-del {
  align-self: flex-start; height: 32px; padding: 0 13px; border-radius: 9px;
  background: rgba(255,77,79,.13); border: 1px solid rgba(255,77,79,.3);
  color: #ff7b7d; font-size: 12.5px; font-weight: 600;
}
.av-del:hover { background: rgba(255,77,79,.22); }
.av-tip { font-size: 11.5px; color: var(--t3); }

/* ═══════════════════════════════════════════════════════════
   我的收藏
   ═══════════════════════════════════════════════════════════ */
.me-fav-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: 13px; color: var(--t3);
}
.fav-del {
  position: absolute; right: 7px; top: 7px; z-index: 3;
  width: 27px; height: 27px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .16s;
}
.fav-del svg { width: 13px; height: 13px; }
.fav-del svg path { fill: #fff; }
.fav-del:hover { background: var(--rd, #ff4d4f); }
#meBody .card:hover .fav-del { display: flex; }
/* 触屏没有 hover，直接常驻 */
@media (hover: none) {
  #meBody .card .fav-del { display: flex; }
}
/* 详情页收藏按钮选中态 */
.btn-fav-lg.on {
  color: var(--orange);
  border-color: rgba(255,101,15,.5);
  background: rgba(255,101,15,.1);
}
.btn-fav-lg.on svg path { fill: var(--orange); }

@media (max-width: 820px) {
  .av-prev { width: 60px; height: 60px; flex: 0 0 60px; }
  .av-prev span { font-size: 23px; }
  .av-up { gap: 13px; }
  .av-pick { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   用户中心：tab 等宽（不再各按文字长度参差）
   ═══════════════════════════════════════════════════════════ */
.me-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: nowrap; }
.me-tabs button {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 0 8px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--t2); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all .16s;
}
.me-tabs::-webkit-scrollbar { display: none; }
/* 移动端 5 个 tab 平分太窄，改成横滑 */
@media (max-width: 820px) {
  .me-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .me-tabs button { flex: 0 0 auto; padding: 0 15px; font-size: 13px; }
}

/* 安全中心 */
.sec-hd {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--t1);
}
.sec-hd svg { width: 19px; height: 19px; }
.sec-hd svg path { fill: var(--orange); }
.sec-tip { margin-top: 12px; font-size: 12px; color: var(--t3); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   上次观看
   ═══════════════════════════════════════════════════════════ */
.last-watch {
  position: relative; margin-bottom: 24px; border-radius: 15px;
  overflow: hidden; border: 1px solid var(--line);
  background: var(--bg2); cursor: pointer;
  transition: border-color .18s, transform .18s;
}
.last-watch:hover { border-color: rgba(255,101,15,.45); transform: translateY(-2px); }
.lw-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; font-size: 12px; color: var(--t3);
  border-bottom: 1px solid var(--line);
}
.lw-hd b { font-size: 12.5px; color: var(--orange); font-weight: 700; letter-spacing: .4px; }
.lw-in { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px; }
.lw-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.3); opacity: .2; transform: scale(1.25);
}
.lw-cover {
  position: relative; z-index: 1;
  width: 108px; height: 68px; flex: 0 0 108px;
  border-radius: 9px; overflow: hidden; background: var(--bg3);
}
.lw-cover img { width: 100%; height: 100%; object-fit: cover; }
.lw-meta { position: relative; z-index: 1; flex: 1; min-width: 0; }
.lw-meta h3 {
  font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lw-meta p { font-size: 12.5px; color: var(--t3); margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.lw-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.13); overflow: hidden; }
.lw-bar i { display: block; height: 100%; background: var(--orange); border-radius: 2px; }
.lw-pct { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--t3); }
.lw-go {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px; border-radius: 20px;
  background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 650;
  transition: filter .16s, transform .12s;
}
.lw-go:hover { filter: brightness(1.09); }
.lw-go:active { transform: scale(.97); }
.lw-go svg { width: 15px; height: 15px; }
.lw-go svg path { fill: #fff; }

/* ═══════════════════════════════════════════════════════════
   观看记录：横向拖动排列
   ═══════════════════════════════════════════════════════════ */
.me-hist-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 12.5px; color: var(--t3);
}
.me-hist {
  display: flex; flex-direction: row; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  cursor: grab;
}
.me-hist.dragging { cursor: grabbing; scroll-snap-type: none; }
.me-hist.dragging .mh-item { pointer-events: none; }
.me-hist::-webkit-scrollbar { height: 6px; }
.me-hist::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 3px; }
.me-hist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.me-hist::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

.mh-item {
  flex: 0 0 208px; width: 208px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  padding: 11px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 13px;
  cursor: pointer; transition: border-color .16s, transform .16s;
  user-select: none;
}
.mh-item:hover { border-color: rgba(255,101,15,.45); transform: translateY(-3px); }
.mh-pic {
  position: relative; width: 100%; height: 117px;
  border-radius: 9px; overflow: hidden; background: var(--bg3);
}
.mh-pic img { width: 100%; height: 100%; object-fit: cover; }
.mh-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 62%);
}
.mh-play-ic {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s;
}
.mh-play-ic svg { width: 19px; height: 19px; }
.mh-play-ic svg path { fill: #fff; }
.mh-item:hover .mh-play-ic { opacity: 1; }
.mh-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.2);
}
.mh-bar i { display: block; height: 100%; background: var(--orange); }
.mh-meta { min-width: 0; }
.mh-meta b {
  display: block; font-size: 13.5px; font-weight: 650; color: var(--t1);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-meta span { display: block; font-size: 11.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.mh-meta em { display: block; margin-top: 3px; font-size: 11px; color: var(--t3); opacity: .75; font-style: normal; }

@media (max-width: 820px) {
  .lw-in { gap: 12px; padding: 13px; flex-wrap: wrap; }
  .lw-cover { width: 88px; height: 56px; flex: 0 0 88px; }
  .lw-meta h3 { font-size: 15px; }
  .lw-go { height: 36px; padding: 0 16px; font-size: 13px; width: 100%; justify-content: center; }
  .mh-item { flex: 0 0 172px; width: 172px; }
  .mh-pic { height: 97px; }
  .last-watch { margin-bottom: 18px; }
}

/* 播完自动接下一集时的浮层提示 */
.pl-next {
  position: absolute; left: 50%; bottom: 16%; transform: translate(-50%, 10px);
  padding: 13px 26px; border-radius: 13px; text-align: center;
  background: rgba(0,0,0,.76);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; opacity: 0; visibility: hidden;
  transition: all .22s cubic-bezier(.34,1.3,.64,1);
  z-index: 62; pointer-events: none; white-space: nowrap;
}
.pl-next.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pl-next b { display: block; font-size: 15px; font-weight: 700; }
.pl-next span { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.7); }
.pl-next span:empty { display: none; }

/* ═══════════════════════════════════════════════════════════
   播放器：跳过片头 / 片尾设置面板
   ═══════════════════════════════════════════════════════════ */
.pv-skip { max-height: 340px; }
.pv-skip .ps-hd {
  font-size: 13px; color: #8b92a0; margin-bottom: 14px; font-weight: 600;
}
.pv-skip .ps-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 14px; margin-bottom: 9px;
  border-radius: 10px; background: rgba(255,255,255,.055);
}
.pv-skip .ps-row label { font-size: 13.5px; color: #c8cdd6; font-weight: 600; }
.pv-skip .ps-in { display: inline-flex; align-items: center; gap: 7px; }
.pv-skip .ps-in input {
  width: 78px; height: 34px; padding: 0 10px; text-align: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35); color: #fff;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  outline: none; transition: border-color .16s;
  -moz-appearance: textfield;
}
.pv-skip .ps-in input::-webkit-outer-spin-button,
.pv-skip .ps-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pv-skip .ps-in input:focus { border-color: rgba(255,101,15,.7); }
.pv-skip .ps-in em { font-size: 12.5px; color: #8b92a0; font-style: normal; }
.pv-skip .ps-tip {
  margin: 4px 2px 14px; font-size: 11.5px; color: #6b7280; line-height: 1.7;
}
.pv-skip .ps-btns { display: flex; gap: 10px; }
.pv-skip .ps-btns button {
  flex: 1; height: 38px; border-radius: 9px;
  font-size: 13.5px; font-weight: 650; transition: all .16s;
}
.pv-skip .ps-reset {
  background: rgba(255,255,255,.07); color: #aeb4c0;
  border: 1px solid rgba(255,255,255,.1);
}
.pv-skip .ps-reset:hover { background: rgba(255,255,255,.13); color: #fff; }
.pv-skip .ps-save { background: var(--orange); color: #fff; }
.pv-skip .ps-save:hover { filter: brightness(1.09); }

@media (max-width: 820px) {
  .pv-skip .ps-in input { width: 68px; height: 32px; font-size: 13.5px; }
  .pv-skip .ps-row { padding: 10px 12px; }
}