/* ============================================================
 * 晓林影视 XIAOLIN-TV · 腾讯TV极光风格 (云视听极光) 终端大屏 UI
 * 严格作用域: 仅当 body.tv 激活时生效，100% 不影响手机端与电脑端默认样式
 * ============================================================ */

body.tv {
  --tv-bg: #060a14;
  --tv-bg-soft: #0d1528;
  --tv-panel: rgba(16, 25, 48, 0.92);
  --tv-panel-strong: rgba(12, 19, 38, 0.96);
  --tv-border: rgba(255, 255, 255, 0.1);
  --tv-cyan: #00e5ff;
  --tv-cyan-glow: rgba(0, 229, 255, 0.68);
  --tv-blue: #12b7f5;
  --tv-txt: #f2f6ff;
  --tv-dim: #8fa4c9;
  background: radial-gradient(circle at 75% 18%, #102042 0%, #070c18 52%, #050811 100%) !important;
  color: var(--tv-txt) !important;
  font-size: 18px;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 永久隐藏公告栏、播放页多余提示条、手机/网页端冗余按钮 ---------- */
body.tv #announceBar,
body.tv .announce,
body.tv #tvPlayHint,
body.tv #tvPlayerOsd,
body.tv .searchbox,
body.tv #voiceBtn,
body.tv #searchMBtn,
body.tv #themeBtn,
body.tv #tvModeBtn,
body.tv #colorModeBtn,
body.tv .fs-hero-rail,
body.tv .fs-quick-bar,
body.tv #fsTop10Row,
body.tv #userBox,
body.tv #backTop,
body.tv #bottomTabBar,
body.tv #pullRefreshBar,
body.tv #tvLegend,
body.tv .footer,
body.tv .row-more,
body.tv #yearChips,
body.tv .hist-del,
body.tv #view > .container > .hero,
body.tv #mainNav a[href="#/sources"],
body.tv #mainNav a[href="#/download"],
body.tv #liveFilterBox {
  display: none !important;
}

/* ---------- 全局遥控器强焦点光圈 ---------- */
body.tv :focus {
  outline: none !important;
}

body.tv .tv-f {
  outline: none !important;
  box-shadow: 0 0 0 3.5px var(--tv-cyan), 0 0 24px var(--tv-cyan-glow), 0 10px 26px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.04);
  z-index: 30 !important;
  position: relative;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

/* ---------- 顶栏: 全局 position: fixed 永久固定在电视屏幕最上方，下拉 50 个影片也绝不消失 ---------- */
body.tv .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 68px !important;
  z-index: 900 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: rgba(6, 10, 20, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important;
}

/* 为固定顶栏预留顶部空间 */
body.tv #view {
  padding-top: 74px !important;
}

body.tv .topbar-inner {
  max-width: 1720px !important;
  width: 100% !important;
  height: 68px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

body.tv .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
}

body.tv .brand-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

body.tv .brand-name,
body.tv #brandName {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}

body.tv #brandName::after {
  content: 'XIAOLIN-TV';
  font-size: 9.5px;
  font-weight: 700;
  color: var(--tv-cyan);
  letter-spacing: 1.5px;
  margin-top: 2px;
}

body.tv .nav {
  flex: 0 1 auto !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(16, 25, 48, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

body.tv .nav a {
  padding: 7px 18px !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  color: #c5d2eb !important;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.14s ease;
}

body.tv .nav a.active {
  background: rgba(0, 229, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 229, 255, 0.45);
}

body.tv .nav a.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #041022 !important;
  font-weight: 900 !important;
}

/* 顶栏右侧: 「👤 我的 | 14:23」一体胶囊 */
body.tv .topbar-right {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

#tvTopRight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 25, 48, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

#tvMyEntry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #eef4ff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

#tvMyEntry.active {
  background: rgba(0, 229, 255, 0.2);
  color: var(--tv-cyan);
}

#tvMyEntry.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #041022 !important;
}

#tvClock {
  font-size: 17px;
  font-weight: 800;
  color: #dce6fa;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- 主容器宽度 ---------- */
body.tv .container {
  max-width: 1700px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* ---------- 首页/频道页: 极光联动巨幕舞台 (#tvAuroraHero) ---------- */
#tvAuroraHero {
  position: relative;
  width: 100%;
  height: 310px;
  border-radius: 22px;
  overflow: hidden;
  margin: 4px 0 20px;
  background: #081022;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

#tvAuroraHero .tah-bg-blur {
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(32px) brightness(0.42) saturate(1.3);
  transform: scale(1.08);
}

#tvAuroraHero .tah-bg-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
  background-size: cover;
  background-position: center 20%;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 24%, #000 58%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 24%, #000 58%);
}

#tvAuroraHero .tah-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(90deg, #060a14 0%, rgba(6, 10, 20, 0.94) 36%, rgba(6, 10, 20, 0.32) 72%, rgba(6, 10, 20, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 10, 20, 0.12) 0%, rgba(6, 10, 20, 0) 50%, #060a14 100%);
  pointer-events: none;
}

#tvAuroraHero .tah-content {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: 58%;
  padding: 22px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

#tvAuroraHero .tah-title {
  font-size: 34px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#tvAuroraHero .tah-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#tvAuroraHero .tah-tag {
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  color: #dce6fa;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#tvAuroraHero .tah-tag.tah-4k {
  background: rgba(0, 229, 255, 0.22);
  color: var(--tv-cyan);
  border-color: rgba(0, 229, 255, 0.45);
}

#tvAuroraHero .tah-desc {
  font-size: 15.5px;
  line-height: 1.5;
  color: #b9c9e8;
  max-width: 640px;
  height: 46px;
  overflow: hidden;
}

#tvAuroraHero .tah-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

#tvAuroraHero .tah-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 17.5px;
  font-weight: 900;
  color: #031022;
  background: linear-gradient(135deg, #00e5ff 0%, #1794ff 100%);
  border: none;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 229, 255, 0.4);
  cursor: pointer;
}

#tvAuroraHero .tah-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: #e4edff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  cursor: pointer;
}

/* ============================================================
 * 全站 TV 影片海报网格: 严格一排 4 个 (repeat(4, 1fr)) + 100% 统一等高盒模型
 * ============================================================ */
body.tv .row {
  margin-bottom: 24px !important;
}

body.tv .row-head {
  margin-bottom: 12px !important;
}

body.tv .row-head .row-title,
body.tv .page-title {
  font-size: 23px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.tv .row-head .row-title::before,
body.tv .page-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00e5ff, #1278ff);
}

body.tv #rows .grid,
body.tv #browseGrid,
body.tv #uBody .grid,
body.tv .tv-direct-grid,
body.tv #relSec .grid,
body.tv #tvPlayRelGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-gap: 20px !important;
  gap: 20px !important;
  padding: 10px 6px 26px !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
}

body.tv #rows .card,
body.tv .card {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 16px !important;
  background: rgba(15, 24, 46, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  padding: 8px 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.tv .card-poster {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 132% !important;
  aspect-ratio: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #162447 0%, #0a1224 100%) !important;
  flex-shrink: 0 !important;
}

body.tv .card-poster img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.tv .card-badge {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  background: rgba(6, 12, 26, 0.88) !important;
  color: var(--tv-cyan) !important;
  border: 1px solid rgba(0, 229, 255, 0.35);
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.tv .card-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  margin-top: 9px !important;
  color: #f0f5ff !important;
  text-align: center !important;
  height: 24px !important;
  line-height: 24px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

body.tv .card-sub,
body.tv .card-src {
  font-size: 13px !important;
  text-align: center !important;
  color: var(--tv-dim) !important;
  height: 19px !important;
  line-height: 19px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

body.tv .card.tv-f {
  transform: scale(1.04) translateY(-3px) !important;
  background: rgba(20, 36, 70, 0.98) !important;
  border-color: var(--tv-cyan) !important;
}

body.tv .card.tv-f .card-name {
  color: var(--tv-cyan) !important;
}

/* ============================================================
 * 【问题 3 核心修复】TV 搜索页 (#/search):
 * 左栏 (输入框 + A~Z 键盘 + 手机扫码二维码) 与 中栏 (拼音联想) 采用 position: fixed 绝对锁死！
 * justify-content: flex-start 紧凑堆叠（总高度仅 340px），彻底消除图三中的中间大空白与下拉顶走二维码问题！
 * ============================================================ */
body.tv.tv-search-lock {
  overflow: hidden !important;
  height: 100vh !important;
}

.tvs-aurora-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  overflow: hidden;
}

/* 左栏: position: fixed 锁死在屏幕左侧，justify-content: flex-start 紧凑排列，绝不拉伸、绝不滚动 */
.tvs-left-panel {
  position: fixed !important;
  top: 76px !important;
  left: 24px !important;
  width: 356px !important;
  height: auto !important;
  max-height: calc(100vh - 88px) !important;
  background: var(--tv-panel) !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 60 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

.tvs-input-box {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  background: rgba(6, 10, 20, 0.92);
  border: 2px solid rgba(0, 229, 255, 0.5);
  border-radius: 11px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 40px !important;
}

.tvs-input-ico {
  font-size: 16px;
  color: var(--tv-cyan);
}

.tvs-input-text {
  flex: 1;
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvs-input-text.is-placeholder {
  font-size: 13.5px;
  font-weight: 600;
  color: #7c92ba;
  letter-spacing: 0.3px;
}

/* 紧凑 6列×5行 A-Z 全键盘 (总高仅 5*34 + 4*5 = 190px)，紧贴输入框下方 */
.tvs-kb-full {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: 34px !important;
  grid-gap: 5px !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  height: auto !important;
  margin: 0 !important;
}

.tvs-kb-full button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #152240 !important;
  color: #f0f5ff !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  cursor: pointer;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvs-kb-full button.tvs-fn-inline {
  grid-column: span 2 !important;
  background: #1e315c !important;
  color: #dce8ff !important;
  font-size: 13.5px !important;
}

.tvs-kb-full button.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
  border-color: transparent !important;
}

/* 紧贴在 Z 键正下方的手机扫码同步卡片 (绝不被顶出屏幕) */
.tvs-qr-card {
  margin-top: 2px !important;
  background: linear-gradient(135deg, rgba(16, 30, 62, 0.98), rgba(10, 18, 38, 0.98)) !important;
  border: 1.5px solid rgba(0, 229, 255, 0.4) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

.tvs-qr-box {
  width: 66px !important;
  height: 66px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 3px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvs-qr-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.tvs-qr-info {
  flex: 1;
  min-width: 0;
}

.tvs-qr-title {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: var(--tv-cyan) !important;
}

.tvs-qr-desc {
  font-size: 11px !important;
  color: #b8c7e6 !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

.tvs-qr-status {
  font-size: 11px !important;
  color: #34d399 !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中栏: 猜你想搜 / 拼音首字母联想 (position: fixed 锁死在左栏右侧) */
.tvs-mid-panel {
  position: fixed !important;
  top: 76px !important;
  left: 392px !important;
  width: 222px !important;
  bottom: 14px !important;
  background: rgba(13, 21, 40, 0.85) !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 18px !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 60 !important;
}

.tvs-col-title {
  font-size: 17.5px;
  font-weight: 900;
  color: #ffffff;
  padding: 0 4px;
}

.tvs-col-sub {
  font-size: 11.5px;
  color: var(--tv-dim);
  padding: 0 4px;
  margin-top: -2px;
}

.tvs-sug-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  flex: 1;
  overflow: hidden;
  padding: 2px;
}

.tvs-sug-btn {
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(22, 34, 62, 0.72);
  color: #edf3ff;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.tvs-sug-btn.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
}

.tvs-sug-btn.tv-f .tvs-sug-py {
  color: #042244 !important;
}

.tvs-sug-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.12);
  color: #9cb0d6;
  flex-shrink: 0;
}

.tvs-sug-rank.r1 { background: #ff6b3d; color: #fff; }
.tvs-sug-rank.r2 { background: #ffb400; color: #1a1200; }
.tvs-sug-rank.r3 { background: #12b7f5; color: #fff; }

.tvs-sug-info {
  flex: 1;
  min-width: 0;
}

.tvs-sug-name {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvs-sug-py {
  font-size: 10.5px;
  color: #7c93bd;
  letter-spacing: 0.8px;
}

/* 右栏: position: fixed 独立容器，仅内部的 #tvsResultGrid 可以上下滚动查看影片 */
.tvs-right-panel {
  position: fixed !important;
  top: 76px !important;
  left: 626px !important;
  right: 24px !important;
  bottom: 14px !important;
  background: rgba(13, 21, 40, 0.55) !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 50 !important;
}

.tvs-right-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.tvs-right-stat {
  font-size: 13px;
  color: var(--tv-dim);
}

#tvsResultGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-gap: 14px !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 6px 24px !important;
  flex: 1 !important;
  align-content: start !important;
}

#tvsResultGrid::-webkit-scrollbar {
  width: 6px;
}

#tvsResultGrid::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.35);
  border-radius: 999px;
}

/* ============================================================
 * TV 端专属播放页 (#/play/...):
 * 已彻底移除遥控器使用说明浮层与进度条浮层
 * ============================================================ */
body.tv.tv-playing .play-head,
body.tv.tv-playing .play-actions,
body.tv.tv-playing #relRail,
body.tv.tv-playing .play-below,
body.tv.tv-playing #mCtrl,
body.tv.tv-playing #ppBtn,
body.tv.tv-playing #fsTopBar,
body.tv.tv-playing #gestHud {
  display: none !important;
}

body.tv.tv-playing .play-top-row {
  display: grid !important;
  grid-template-columns: 58% minmax(0, 42%) !important;
  grid-gap: 22px !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 4px !important;
}

body.tv.tv-playing .play-col {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body.tv.tv-playing #videoWrap {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  border-radius: 18px !important;
  background: #000 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7) !important;
}

body.tv.tv-playing #videoEl {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* 隐藏 WebKit 默认 video 封面播放按钮伪元素 */
body.tv video::-webkit-media-controls-start-playback-button,
body.tv video::-webkit-media-controls-overlay-play-button,
body.tv video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

#tvPlayCtrlBar {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  background: var(--tv-panel);
  border: 1px solid var(--tv-border);
  border-radius: 16px;
  padding: 10px 12px;
}

.tv-pctrl-btn {
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #162445;
  color: #eef4ff;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tv-pctrl-btn.primary {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(18, 131, 255, 0.35));
  border-color: rgba(0, 229, 255, 0.55);
  color: #ffffff;
}

.tv-pctrl-btn.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
  border-color: transparent !important;
}

/* 右侧 TV 专属选集/换源/简介控制台 */
#tvPlayRightPanel {
  background: var(--tv-panel);
  border: 1px solid var(--tv-border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 486px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

.tvp-meta-head {
  flex-shrink: 0;
}

.tvp-vod-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tvp-vod-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.tvp-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.16);
  color: var(--tv-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.tvp-vod-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #a9bce0;
  margin-top: 6px;
  max-height: 38px;
  overflow: hidden;
}

.tvp-sec-label {
  font-size: 14.5px;
  font-weight: 800;
  color: #dce8ff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tvp-src-list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  flex-shrink: 0;
}

.tvp-src-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #152342;
  color: #dce8ff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.tvp-src-btn.current {
  background: rgba(0, 229, 255, 0.2);
  border-color: var(--tv-cyan);
  color: #ffffff;
  font-weight: 900;
}

.tvp-src-btn.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
}

.tvp-ep-ranges {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.tvp-range-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #9cb0d6;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.tvp-range-btn.on {
  background: rgba(0, 229, 255, 0.22);
  border-color: var(--tv-cyan);
  color: #fff;
}

.tvp-range-btn.tv-f {
  background: var(--tv-cyan) !important;
  color: #031022 !important;
}

.tvp-ep-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  overflow-y: auto;
  padding: 2px;
  flex: 1;
  align-content: start;
}

.tvp-ep-btn {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #162445;
  color: #eef4ff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}

.tvp-ep-btn.current {
  background: rgba(0, 229, 255, 0.24);
  border-color: var(--tv-cyan);
  color: var(--tv-cyan);
  font-weight: 900;
}

.tvp-ep-btn.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
}

#tvPlayRelWrap {
  margin-top: 22px;
}

/* ---------- 当点击「🖥 全屏播放」进入真全屏模式 (body.tv-fs-mode) ---------- */
body.tv.tv-playing.tv-fs-mode {
  overflow: hidden !important;
  background: #000 !important;
}

body.tv.tv-playing.tv-fs-mode #topbar,
body.tv.tv-playing.tv-fs-mode #tvPlayCtrlBar,
body.tv.tv-playing.tv-fs-mode #tvPlayRightPanel,
body.tv.tv-playing.tv-fs-mode #tvPlayRelWrap {
  display: none !important;
}

body.tv.tv-playing.tv-fs-mode #videoWrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9990 !important;
  border-radius: 0 !important;
  border: none !important;
}

#tvPlayCenterHud {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 97;
  background: rgba(6, 11, 24, 0.88);
  border: 1.5px solid rgba(0, 229, 255, 0.5);
  border-radius: 16px;
  padding: 14px 28px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#tvPlayCenterHud.show {
  opacity: 1;
}

/* ============================================================
 * 全局 TV 遥控器软键盘弹窗 (#tvModalKbMask - 供会员登录/注册输入数字与字母)
 * ============================================================ */
#tvModalKbMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: rgba(3, 6, 14, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

#tvModalKbMask.hidden {
  display: none !important;
}

.tmk-box {
  width: min(92vw, 740px);
  background: #0e1830;
  border: 2px solid rgba(0, 229, 255, 0.48);
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tmk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tmk-title {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}

.tmk-preview {
  height: 52px;
  border-radius: 12px;
  background: #060b18;
  border: 1.5px solid rgba(0, 229, 255, 0.42);
  padding: 0 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--tv-cyan);
  display: flex;
  align-items: center;
}

.tmk-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.tmk-key {
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #172647;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.tmk-key.fn {
  background: #20335e;
  font-size: 15px;
}

.tmk-key.ok {
  background: linear-gradient(135deg, #00e5ff, #1283ff);
  color: #031022;
  font-weight: 900;
}

.tmk-key.tv-f {
  background: linear-gradient(135deg, #00e5ff, #1283ff) !important;
  color: #031022 !important;
}

/* ---------- TV 端电视直播 (#/live) 大屏增强样式 ---------- */
body.tv .live-cockpit {
  grid-template-columns: 200px 310px minmax(0, 1fr) !important;
  height: calc(100vh - 90px) !important;
  max-height: calc(100vh - 90px) !important;
}

body.tv .live-col-groups,
body.tv .live-col-channels,
body.tv .live-col-stage {
  background: var(--tv-panel) !important;
  border-color: var(--tv-border) !important;
}

body.tv .live-group-btn {
  font-size: 17px !important;
  padding: 13px 16px !important;
}

body.tv .lch-name {
  font-size: 16.5px !important;
}

body.tv .live-line-pill,
body.tv .live-act-btn {
  font-size: 15px !important;
  padding: 8px 16px !important;
}