/*
  ==============================================================================
  电视大屏 EPG 样式表 (frontend-design 现代浅色质感系统)
  设计标准：1920px × 1080px (FHD)
  设计原则：冰川瓷白漫反射底色（防眩光）、纯白浮雕卡片、深曜石高对比度文字
  ==============================================================================
*/

/*
  【意图】：基础盒模型重置与大屏交互锁定
  【核心点】：消除浏览器默认边缘并开启平滑字体抗锯齿
  【性能】：根节点开启合成图层隔离
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none !important; /* 核心：严禁浏览器出现生硬原生黑蓝外框 */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #07090e;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #f1f5f9;
}

/*
  【意图】：全屏视口居中适配器
  【核心点】：在大屏周围投射深邃大景深极光暗影
*/
.screen-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #0d121f 0%, #040508 100%);
}

/*
  【意图】：固定 1920x1080 核心舞台 (深邃电影级高阶模糊渐变玻璃质感)
  - 彻底告别浅白底色，采用类似参考图的高奢微暗流光背景
  - 多层极光光斑弥散折射，为半透明毛玻璃控件与彩色玻璃图标提供绝佳舞台
*/
.app-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  min-width: 1920px;
  min-height: 1080px;
  display: flex;
  flex-direction: row !important; /* 确保侧边栏与内容区横向并排联动推开，防止被第三方样式误覆盖为 column */
  overflow: hidden;
  /* 核心：深海深邃夜幕 + 冷海极光青蓝 + 电影级暗紫红流光的高阶模糊渐变玻璃舞台 */
  background: 
    radial-gradient(1200px 750px at 86% 18%, rgba(147, 51, 234, 0.18), transparent 60%),
    radial-gradient(1100px 700px at 12% 28%, rgba(14, 165, 233, 0.22), transparent 55%),
    radial-gradient(1300px 900px at 50% 92%, rgba(30, 27, 75, 0.42), transparent 65%),
    radial-gradient(circle at 50% 40%, #0c1220 0%, #060912 100%);
  transform-origin: center center;
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.9);
  color: #f8fafc;
}

/* 
  【核心高光】：电影级大景深模糊渐变氛围光晕层 (Ambient Glass Blur Glow)
  - 还原参考图中的深紫微红、极光冷蓝与深海暗调交融的多重光斑
  - 超大 130px~150px 高斯模糊流体弥散，通透晶莹的折射玻璃底质
*/
.ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* 光斑 1: 左侧深海青蓝通透光晕 */
.ambient-glow::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -100px;
  width: 1200px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, rgba(2, 132, 199, 0.12) 40%, rgba(6, 9, 17, 0) 70%);
  filter: blur(140px);
}

/* 光斑 2: 右侧参考图同款暗紫红电影弥散漫射光 */
.ambient-glow::after {
  content: '';
  position: absolute;
  top: 2%;
  right: -120px;
  width: 1150px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 38, 211, 0.2) 0%, rgba(126, 34, 206, 0.14) 35%, rgba(6, 9, 17, 0) 70%);
  filter: blur(150px);
}

/*
  ==============================================================================
  左侧主导航栏 - 参考图同款深色极简胶囊药丸 (Dark Glass Capsule Dock)
  - 默认未落焦：参考图同款竖向深色高透胶囊药丸 (54px 宽)，纯白极简无底色线条图标，宛如空气般悬浮在深色模糊背景上
  - 落焦状态：平滑变大拉宽 (242px)，自然物理推开右侧内容区 (Push Canvas)
  - 视觉高光：落焦后图标瞬间绽放为【精致彩色玻璃质感】(Stained Glassmorphism & Liquid Crystal Glow)
  - 包含三主核 (发现 · 首页 · 推荐)，推荐展开时抽屉平滑手风琴延展
  ==============================================================================
*/
.sidebar.glass-dock-pill {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin: auto 0 auto 52px;
  width: 78px;
  height: auto;
  max-height: 360px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 6px;
  box-sizing: border-box;
  /* 参考图深色高透磨砂胶囊质感 + 幽蓝渐变背景与边缘微光 */
  background: radial-gradient(circle at 50% 18%, rgba(0, 110, 255, 0.22) 0%, rgba(4, 12, 28, 0.72) 72%);
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  border: 1.5px solid rgba(0, 140, 255, 0.45);
  border-radius: 9999px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 
              0 0 24px rgba(0, 115, 255, 0.22),
              inset 0 0 14px rgba(0, 115, 255, 0.1);
  overflow: visible;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* 子菜单展开状态：药丸整体平滑向下延伸 */
.sidebar.glass-dock-pill.has-sub-open,
.sidebar.glass-dock-pill:has(#nav-group-recommend.open) {
  max-height: 820px;
  border-color: rgba(0, 160, 255, 0.65);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 
              0 0 36px rgba(0, 140, 255, 0.35),
              inset 0 0 16px rgba(0, 140, 255, 0.18);
  overflow: visible;
}

.sidebar.glass-dock-pill.expanded {
  width: 78px;
}

.dock-pill-body {
  width: 100%;
}

/* 竖向导航菜单 */
.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.nav-group-more {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 导航单项：纵向图文居中对齐 */
.nav-item.nav-main-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 2px;
  border-radius: 20px;
  color: #ffffff;
  background-color: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}

.nav-item.nav-main-item:hover,
.nav-item.nav-main-item.focused {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.08);
  position: relative !important;
  z-index: 50 !important;
}

/* 1. 发现项：圆形高亮蓝色微标 (对齐用户截图) */
.dock-icon-circle.icon-discover-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0ea5e9 0%, #0077ff 55%, #0052cc 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-item.active .icon-discover-badge,
.nav-item.focused .icon-discover-badge,
.nav-item:hover .icon-discover-badge {
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.95), inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
  transform: scale(1.06);
}

.svg-icon-compass {
  width: 24px;
  height: 24px;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 2. 看电视与更多项的图标容器 */
.dock-icon-box {
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* 看电视图标：可爱复古电视带双天线与眼神 */
.svg-icon-tv-cute {
  width: 32px;
  height: 30px;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.22s ease, filter 0.22s ease;
}

/* 更多图标：空心四圆角格 */
.svg-icon-more-hollow {
  width: 26px;
  height: 26px;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.22s ease, filter 0.22s ease;
}

.nav-item.focused .svg-icon-tv-cute,
.nav-item.focused .svg-icon-more-hollow,
.nav-item:hover .svg-icon-tv-cute,
.nav-item:hover .svg-icon-more-hollow {
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
  transform: scale(1.06);
}

/* 导航标签文案：垂直居中在图标正下方 */
.nav-item .nav-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 6px;
  margin-left: 0;
  white-space: nowrap;
  opacity: 1;
  max-width: none;
  overflow: visible;
  transform: none;
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  transition: color 0.2s ease;
}

.nav-item.focused .nav-label,
.nav-item:hover .nav-label {
  color: #38bdf8 !important;
  font-weight: 800;
}

#nav-more-main.active,
[data-id="nav-tv"].active {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 18px rgba(0, 119, 255, 0.35);
  color: #38bdf8;
}

#nav-more-main.active .nav-label,
[data-id="nav-tv"].active .nav-label {
  color: #38bdf8 !important;
  font-weight: 800;
}

#nav-more-main.active .dock-icon-box svg,
[data-id="nav-tv"].active .dock-icon-box svg {
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85));
  color: #38bdf8;
}

/*
  ==============================================================================
  【二级品类展开抽屉】：落焦「更多」时在胶囊内部竖向顺滑展开
  - 影视 · 少儿 · 动漫 · 体育 · 综艺
  - 图标在上，文字在下，极度纯粹克制
  ==============================================================================
*/
.sub-nav-drawer {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              margin-top 0.3s ease,
              padding-top 0.3s ease,
              border-color 0.3s ease;
}

#nav-group-recommend.open .sub-nav-drawer {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
  margin-top: 14px;
  padding-top: 14px;
  border-color: rgba(255, 255, 255, 0.12);
  overflow: visible;
}

/* 二级子菜单单项 */
.nav-item.nav-sub-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 2px;
  border-radius: 18px;
  color: #f1f5f9;
  background-color: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

.nav-item.nav-sub-item:hover,
.nav-item.nav-sub-item.focused {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: scale(1.08);
  position: relative !important;
  z-index: 50 !important;
}

.sub-icon-box {
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-icon-box .svg-icon-sub {
  width: 24px;
  height: 24px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item.nav-sub-item.focused .svg-icon-sub,
.nav-item.nav-sub-item:hover .svg-icon-sub {
  color: #38bdf8;
  transform: scale(1.1);
}

.nav-sub-item .nav-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 4px;
  margin-left: 0;
  white-space: nowrap;
  letter-spacing: 0.5px;
  line-height: 1;
  text-align: center;
  transition: color 0.2s ease;
}

.nav-item.nav-sub-item.focused .nav-label,
.nav-item.nav-sub-item:hover .nav-label {
  color: #38bdf8 !important;
}

.nav-item.nav-sub-item.active {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
}

.nav-item.nav-sub-item.active .nav-label {
  color: #38bdf8 !important;
  font-weight: 800;
}

.nav-item.nav-sub-item.active .svg-icon-sub {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}



/* 
  ==============================================================================
  右侧全画幅沉浸视区 (Content Area) - 联动推开容器 (Push Canvas)
  - 与 .sidebar 在 .app-stage 内呈 flex 横向排版
  - 侧边栏从 88px 展开到 260px 时，内容区自然平滑向右避让 172px，大屏绝不遮挡！
  ==============================================================================
*/
/* 
  【核心大屏规范 - 真实物理推开画布 (True Canvas Push Translation)】：
  - 绝对固定内容主舞台的真实物理像素宽度 (1786px)，严禁在侧边栏展开时压缩卡片！
  - 当左侧 Dock 展开（74px -> 268px）时，右侧内容区作为不可压缩的整体被真正物理推向右外侧
  - 内部推荐位与卡片尺寸比例分毫不变，绝不发生压扁变形！
*/
.content-container {
  position: relative;
  width: 1786px;
  min-width: 1786px;
  max-width: 1786px;
  flex: 0 0 1786px; /* 绝对禁止收缩！确保卡片绝对固定宽度零畸变 */
  height: 1080px;
  display: flex;
  flex-direction: column;
  padding: 36px 108px 36px 66px; /* 页面整体往下移一些：顶部由 32px 调至 36px */
  overflow: hidden;
  z-index: 2;
  box-sizing: border-box;
}

/* 顶部独立系统信息栏 (独占顶部整行，右对齐天气/时间/规格原型，绝不与页面内容同行) */
.top-system-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 44px;
  margin-bottom: 22px; /* 与下方页面拉开舒适呼吸间隔 */
  flex-shrink: 0;
}

.top-system-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 页面主体元信息栏：角色头像栏 (整体下移，独立一行，右侧向下滚动超三行平滑隐藏) */
.page-meta-header {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
  flex-shrink: 0;
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.26s ease,
              transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              margin-bottom 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible; /* 核心：默认必须为 visible，杜绝角色胶囊 focus 放大与外发光被削平 */
  padding: 10px 0;
  margin-top: -10px;
  box-sizing: content-box;
  position: relative;
  z-index: 10;
}

/* 滚动超过三行时自动收缩隐藏角色列 */
.page-meta-header.hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-16px);
  pointer-events: none;
  overflow: hidden; /* 收起态才开启 hidden 防止内容露出 */
}

/* 角色兴趣流切换时卡片与大标题的丝滑渐入动效 */
@keyframes streamRoleFadeIn {
  0% {
    opacity: 0.25;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.stream-switching {
  animation: streamRoleFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 顶通服务条兼容定义 */
.content-header {
  display: flex;
  align-items: center;
}

.category-title {
  display: none;
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* 
  【意图】：顶部角色头像栏 (家庭成员角色定制信息流)
  【核心点】：遵循大屏 10-Foot UI 规范，头像饱满、标签清晰、暗色通透玻璃质感、获焦高光浮动、激活微动效
*/
.user-profile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
  padding: 8px 6px;
  margin: -8px -6px;
  position: relative;
}

.profile-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.2px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.role-svg {
  width: 18px;
  height: 18px;
}

/* 各角色专属品牌质感微渐变 */
.avatar-family {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}
.avatar-grandma,
.avatar-elder {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}
.avatar-baby,
.avatar-kids {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}
.avatar-movie {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}
.avatar-add {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
}

.profile-name {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.5px;
}

/* 激活选中角色状态 (全家默认) */
.profile-chip.active {
  background: rgba(2, 132, 199, 0.28);
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.profile-chip.active .profile-name {
  color: #ffffff;
  font-weight: 800;
}
.profile-chip.active .active-indicator {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  background: #38bdf8;
  border-radius: 2px;
  box-shadow: 0 0 8px #38bdf8;
}

/* 添加角色虚线胶囊 */
.profile-chip.add-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1.2px dashed rgba(255, 255, 255, 0.28);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-chip.add-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.profile-chip.add-chip:hover .profile-name {
  color: #ffffff;
}
.profile-chip.add-chip .profile-name {
  color: #94a3b8;
  transition: color 0.2s ease;
}

/* 电视端空间焦点高光浮动 (D-Pad Focused) */
.profile-chip.focused {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border-color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  position: relative !important;
  z-index: 50 !important;
}
.profile-chip.focused .profile-name {
  color: #ffffff !important;
}
.profile-chip.focused.add-chip {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border-style: solid !important;
  border-color: #ffffff !important;
}
.profile-chip.focused.add-chip .avatar-add {
  background: #ffffff !important;
  color: #0284c7 !important;
  border: 1.5px solid #ffffff !important;
  transform: scale(1.05);
}

/* 
  ==============================================================================
  家庭角色管理右侧浮层 (Role Management Right Drawer)
  【意图】：大屏 10-Foot 极简玻璃右滑出浮层，支持新增与删除家庭角色
  ==============================================================================
*/
.role-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 9, 20, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  justify-content: flex-end;
}
.role-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.role-drawer-panel {
  width: 580px;
  height: 100vh;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border-left: 1.2px solid rgba(255, 255, 255, 0.16);
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-drawer-backdrop.open .role-drawer-panel {
  transform: translateX(0);
}

/* 浮层头部 */
.role-drawer-header {
  padding: 30px 34px 18px 34px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.role-drawer-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-drawer-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(2, 132, 199, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: fit-content;
}
.role-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}
.role-tag-en {
  opacity: 0.65;
  font-size: 11px;
}
.role-drawer-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 4px 0 0 0;
  letter-spacing: 0.5px;
}
.role-drawer-desc {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}
.role-drawer-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.role-drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.08);
}
.role-drawer-close-btn.focused {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  transform: scale(1.12);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

/* 浮层主体 (垂直滚动) */
.role-drawer-body {
  flex: 1;
  padding: 22px 34px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.role-drawer-body::-webkit-scrollbar {
  width: 6px;
}
.role-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* 模块容器与头部标题 */
.role-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.role-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-section-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.role-section-badge.preset-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}
.role-section-badge.custom-badge {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.3);
}
.role-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.role-section-sub {
  font-size: 12px;
  color: #64748b;
}

/* 模块 1: 已有角色列表与卡片 */
.role-manage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-manage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-manage-card.active-card {
  background: rgba(2, 132, 199, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.role-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.role-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.role-card-avatar svg {
  width: 20px;
  height: 20px;
}
.role-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.role-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.role-card-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.role-active-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.role-card-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 角色卡片操作按钮 */
.role-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}
.btn-role-action {
  padding: 7px 13px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.2px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-switch-role {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
}
.btn-switch-role:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.btn-switch-role.focused {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.5) !important;
}

.btn-delete-role {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.32);
  color: #f87171;
}
.btn-delete-role:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
}
.btn-delete-role.focused {
  background: #ef4444 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65) !important;
}

.role-locked-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: rgba(255, 255, 255, 0.04);
}

/* 模块 2: 推荐预设网格 */
.role-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.preset-role-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  min-width: 0;
  overflow: hidden;
}
.preset-role-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}
.preset-role-card.focused {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border-color: #ffffff !important;
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.5) !important;
}
.preset-role-card.focused .preset-role-name,
.preset-role-card.focused .preset-role-desc {
  color: #ffffff !important;
}
.preset-role-card.already-added {
  opacity: 0.45;
  pointer-events: none;
  border-style: dashed;
}
.preset-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.preset-avatar svg {
  width: 17px;
  height: 17px;
}
.preset-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.preset-role-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.preset-role-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
.preset-role-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.preset-role-desc {
  font-size: 11px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 角色头像微渐变 */
.avatar-father { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.avatar-mother { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.avatar-movie { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.avatar-gaming { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.avatar-grandpa { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.avatar-custom { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

/* 模块 3: 自定义成员添加表单 */
.role-custom-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-custom-input-box {
  flex: 1;
}
.role-custom-input {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.2px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 0 16px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.role-custom-input:focus,
.role-custom-input.focused {
  border-color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}
.role-custom-submit-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1.2px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.role-custom-submit-btn svg {
  width: 16px;
  height: 16px;
}
.role-custom-submit-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
}
.role-custom-submit-btn.focused {
  transform: scale(1.06);
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.6) !important;
}

/* 浮层底部按键提示 */
.role-drawer-footer {
  padding: 16px 34px 22px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer-hints-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dhint {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dkey {
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  color: #ffffff;
  font-size: 11px;
}

/* 顶部系统胶囊 */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sys-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  font-size: 15px;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  border: 1.2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.capsule-svg {
  width: 18px;
  height: 18px;
  color: #38bdf8;
}

.sys-capsule.focused {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.6), inset 0 1px 1.5px rgba(255, 255, 255, 0.5) !important;
}

.sys-capsule.focused .capsule-svg {
  color: #ffffff;
}

/* macOS 风格时间胶囊 (极简半透水晶) */
.time-capsule {
  cursor: default;
  font-variant-numeric: tabular-nums;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.2px solid rgba(255, 255, 255, 0.12);
}

.status-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  flex-shrink: 0;
}

.time-text {
  font-weight: 700;
  font-size: 15px;
  color: #f1f5f9;
}

/* 天气胶囊 (极简半透水晶 · 温度与城市状态) */
.weather-capsule {
  cursor: default;
  font-variant-numeric: tabular-nums;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.2px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.weather-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.weather-city {
  color: #94a3b8;
  font-size: 14px;
}

.weather-condition {
  color: #e2e8f0;
  font-size: 14px;
}

.weather-temp {
  color: #38bdf8;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* 
  【意图】：视口滚动轨道与边缘防剪切安全缓冲槽 (Anti-Clipping Safe Buffer)
  【核心点】：通过负外边距 + 内边距外扩 16px，给落焦 scale 放大的卡片提供充裕光晕与立体外浮空间
  【警示】：严禁让 overflow: hidden 紧贴卡片物理边缘，否则获焦高光必被切断
*/
.scroll-viewport {
  position: relative;
  flex: 1;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-top: -20px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 20px;
  padding-bottom: 40px;
  overflow: hidden;
}

/*
  ==============================================================================
  【电视种草流】大屏专属全品类混排瀑布流视觉系统 (TV Seed Stream)
  核心规范：
  1. 绝不照搬手机端竖屏小红书，全面采用 16:9 横版大画幅高光微动效卡片
  2. 3米视距 10-Foot UI：大字号标题 (20px-22px)、大动作行动标签 (免费试看/直接看全集)
  3. 场景化内容包与智能连播防倦怠机制
  ==============================================================================
*/
.stream-scroll-track {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 48px; /* 间距放大 2 倍：由 26px 调整为 48px，与横向列间距保持 1:1 统一呼吸节奏 */
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 80px;
  overflow: visible;
}

/* 场景化内容聚合导视条 (Scene Bar) - 用户要求：这行不出现了 */
.stream-scene-bar {
  display: none !important;
}

/* ==============================================================================
   【种草流楼层标题 (Stream Floor Header)】主题总结与间隔编排规范
   - 适配大屏视距：22px 纯白加粗大标题 + 渐变高光微标 + 精致微胶囊主题标签
   - 律动留白：利用 48px gap 形成 56px 上距与 28px 下距亲密性，清晰归属下方卡片
   - 纯视觉层级导视：不截获遥控器焦点，遥控器 D-Pad 上下键在卡片间自然平滑跨越
   ============================================================================== */
.stream-floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 2px;
  margin-top: 12px;
  margin-bottom: -20px;
  user-select: none;
  pointer-events: none;
}

.stream-floor-header:first-child {
  margin-top: -6px;
}

/* 首屏迎宾大标题 (单行排版 · 纯净通透无冗余小字 · 上下充裕呼吸留白) */
.stream-floor-header.hero-greeting-header {
  margin-top: 14px;
  margin-bottom: 6px;
  align-items: center;
  padding: 8px 0;
}

.hero-greeting-wrap {
  display: flex;
  align-items: center;
}

.hero-greeting-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-moon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.7)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: moonPulse 4s ease-in-out infinite alternate;
}

.svg-hero-moon {
  width: 34px;
  height: 34px;
}

@keyframes moonPulse {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.65)); }
  100% { transform: scale(1.06) rotate(3deg); filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.85)); }
}

.hero-greeting-title {
  margin: 0;
  padding: 0;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.floor-title-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.floor-badge-icon {
  font-size: 26px; /* 同步加大2号至 26px */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.4));
}

.floor-title-text {
  font-size: 26px; /* 其他行标题字号加大2号：由 22px 放大至 26px */
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.4px;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.floor-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.floor-pill-tag.tag-orange {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.28);
}

.floor-pill-tag.tag-purple {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.28);
}

.floor-pill-tag.tag-emerald {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.28);
}

.floor-pill-tag.tag-pink {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.12);
  border-color: rgba(244, 114, 182, 0.28);
}

.floor-title-right {
  display: flex;
  align-items: center;
}

.floor-count-hint {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

/* 智能连播呼吸指示器 */
.auto-play-capsule .capsule-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGreen 1.8s infinite;
}
@keyframes pulseGreen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* 种草流横向卡片行 (每排 3 个标准 16:9 大画幅笔记卡) */
.feed-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px; /* 卡片间距放大 2 倍：由 24px 放大为 48px */
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.feed-row.has-focused,
.feed-row:has(.focused),
.feed-row:focus-within {
  z-index: 25 !important;
}

/* 全宽整行创新控件专用行 (焦点大图组合 / 竖屏短片6联排 / 文字主题跑马灯) */
.feed-row.feed-row-hero {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px !important; /* 卡片间距放大 2 倍：由 24px 放大为 48px */
  width: 100% !important;
}

.feed-row.feed-row-hero .card-hero-spotlight {
  width: 100%;
  height: 288px;
}

.feed-row.feed-row-hero .card-creator-style-a {
  width: 100%;
  height: 288px;
}

.feed-row.feed-row-shorts,
.feed-row.feed-row-marquee,
.feed-row.feed-row-fullwidth {
  display: block !important;
  width: 100% !important;
}

.feed-note-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(20, 27, 44, 0.72);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

/* 视觉主体封面：舒适精致的大屏黄金比例 */
/* 
  【大屏比例核心规范】：
  - 锁定电视工业视网膜舒适高度 215px（原 16:9 自适应撑至 307px 过大过重）
  - 视频容器通过 object-fit: cover 满格自适应播放，绝无黑边畸变
  - 整卡高收敛至 ~315px，为视口留出通透呼吸空间
*/
.note-cover {
  position: relative;
  width: 100%;
  height: 200px; /* 卡片等比微缩：由 215px 微调至 200px，完美匹配缩小后的卡片宽度，保持大屏黄金视觉比例 */
  background-size: cover;
  background-position: center;
  background-color: #0c1222;
  overflow: hidden;
}

.note-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

/* 核心：卡片内置动态高光视频播放容器 */
.note-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: #000000;
}

.note-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 当卡片处于动态起播状态 (preview-playing) 时 */
.feed-note-card.preview-playing .note-video-wrap {
  opacity: 1;
}

/* 播放中呼吸高光微徽标 (Live Highlighting) */
.live-stream-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s ease;
}

.feed-note-card.preview-playing .live-stream-badge {
  opacity: 1;
  transform: translateY(0);
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

.audio-waves {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.audio-bar {
  width: 2px;
  background: #38bdf8;
  border-radius: 1px;
  animation: waveMotion 0.8s ease infinite alternate;
}
.audio-bar:nth-child(1) { height: 4px; animation-delay: 0.1s; }
.audio-bar:nth-child(2) { height: 9px; animation-delay: 0.25s; }
.audio-bar:nth-child(3) { height: 6px; animation-delay: 0.4s; }

@keyframes waveMotion {
  from { height: 3px; }
  to { height: 10px; }
}

.note-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 7px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.badge-film { background: linear-gradient(135deg, #0284c7, #0369a1); }
.badge-shortplay { background: linear-gradient(135deg, #ea580c, #c2410c); }
.badge-life { background: linear-gradient(135deg, #d97706, #b45309); }
.badge-kids { background: linear-gradient(135deg, #10b981, #047857); }
.badge-game { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.badge-opera { background: linear-gradient(135deg, #ec4899, #be185d); }

.note-duration {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.6);
  padding: 2px 7px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}

.feed-note-card.preview-playing .note-duration {
  opacity: 0;
}

.note-play-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
.note-play-icon svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.feed-note-card.preview-playing .note-play-icon {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
  animation: playPulse 2s infinite;
}

@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.note-preview-cue {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(2, 132, 199, 0.85);
  padding: 3px 8px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
}

/* 卡片文字与元信息区 (1:1 对齐用户参考图：纯白温润背景、左侧大头像、右侧标题与点赞时间) */
.note-body {
  flex: 1; /* 核心：自动撑满卡片剩余空间，彻底杜绝单行标题导致卡片底部露出黑色底边！ */
  width: 100%;
  padding: 10px 14px 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  box-sizing: border-box;
}

/* 博主圆形头像 */
.note-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
  overflow: hidden;
}

.note-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卡片主内容列 */
.note-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 100%; /* 垂直方向充满，保持底部元信息齐平 */
}

.note-title {
  font-size: 17.5px; /* 卡片标题字号大2号：由 15px 提升至 17.5px，大屏 3 米视距更易辩识 */
  font-weight: 800;
  color: #0f172a;
  line-height: 1.34;
  margin: 0 0 5px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  min-height: 46px; /* 核心：锁定两行标准基线高度，无论单行或双行标题整排所有卡片完全对齐 */
  transition: color 0.2s ease;
}

.note-meta,
.note-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: auto; /* 保证点赞与时间稳稳沉底水平对齐 */
}

.note-meta-likes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-weight: 700;
}

.note-meta-divider,
.note-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  vertical-align: middle;
}

.note-meta-time {
  color: #94a3b8;
}

/* 电视端获焦立体高光浮动 (Focused Note Card) - 精致克制，避免压迫感 */
.feed-note-card.focused {
  border-color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.42), 0 0 24px rgba(56, 189, 248, 0.32) !important;
  position: relative !important;
  z-index: 50 !important;
}
.feed-note-card.focused .note-play-icon {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.6);
}
.feed-note-card.focused .note-preview-cue {
  opacity: 1;
  transform: translateY(0);
}
.feed-note-card.focused .note-title {
  color: #0284c7 !important;
}

/* ==============================================================================
   【骨架屏 (Skeleton Screen)】系统：微光呼吸扫光占位效果
   ============================================================================== */
.feed-note-card.is-skeleton {
  pointer-events: none;
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  height: 288px !important;
  min-height: 288px !important;
}

.is-skeleton .note-cover {
  height: 200px !important;
  background: #1e293b !important;
  position: relative !important;
  overflow: hidden !important;
}

.is-skeleton .note-cover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%) !important;
  animation: skeletonWave 1.5s infinite !important;
  transform: translateX(-100%) !important;
  z-index: 3 !important;
}

.is-skeleton .note-body {
  height: 88px !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: #e2e8f0;
}

.skeleton-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
  animation: skeletonWave 1.5s infinite;
  transform: translateX(-100%);
  z-index: 2;
}

@keyframes skeletonWave {
  100% {
    transform: translateX(100%);
  }
}

.is-skeleton .skeleton-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #cbd5e1;
}

.is-skeleton .skeleton-line {
  border-radius: 6px;
  margin-bottom: 8px;
  background: #cbd5e1;
}

.is-skeleton .skeleton-line-title {
  width: 90%;
  height: 16px;
}

.is-skeleton .skeleton-line-title-sub {
  width: 65%;
  height: 16px;
}

.is-skeleton .skeleton-line-meta {
  width: 45%;
  height: 12px;
  margin-top: 4px;
  margin-bottom: 0;
}

/* 无限流容器：包含动态追加的行组 */
.feed-infinite-container {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
}

/* 预加载微加载状态条 (可选大屏提示) */
.stream-loading-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

.stream-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* 
  ==============================================================================
  大屏沉浸试看体验弹窗 (Trial Player Modal - 先体验，后订阅)
  ==============================================================================
*/
.trial-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 2000;
}

.trial-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.trial-modal-dialog {
  width: 1180px;
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transform: scale(0.92);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.trial-modal-backdrop.open .trial-modal-dialog {
  transform: scale(1);
}

.trial-player-box {
  position: relative;
  width: 100%;
  height: 460px;
  background: #000000;
}

.trial-video-sim {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?q=80&w=1200&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}
.trial-video-sim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

.trial-live-tag {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 3;
  color: #38bdf8;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(15, 23, 42, 0.7);
  padding: 6px 16px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
}

.trial-controls {
  position: absolute;
  bottom: 24px;
  left: 28px;
  right: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #0284c7;
}
.time-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.trial-info-panel {
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.trial-meta-head {
  max-width: 600px;
}

.trial-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
  margin-bottom: 8px;
}

.trial-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.trial-desc {
  font-size: 15px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.trial-action-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 320px;
}

.trial-btn {
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.trial-btn .btn-svg {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-secondary {
  background: #f1f5f9;
  color: #334155;
}

.btn-tertiary {
  background: transparent;
  color: #64748b;
}

.trial-btn.focused {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
  border: 2px solid #0284c7;
}
.btn-primary.focused {
  background: #0369a1;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.45);
}

/* 
  ==============================================================================
  【文字模版笔记】PRD 规划的核心模版形态 (高信息密度 / 爆款金句 / 惊悚合集)
  ==============================================================================
*/
.text-template-cover {
  background: #090d16 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
}

.text-template-bg {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.thriller-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.45) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: breatheCrimson 3s ease-in-out infinite alternate;
}
@keyframes breatheCrimson {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

.badge-thriller {
  background: linear-gradient(135deg, #e11d48, #9f1239) !important;
}

.text-lead {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f43f5e;
  margin-bottom: 5px;
}

.text-big-title {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.highlight-crimson {
  color: #fb7185;
  text-shadow: 0 0 14px rgba(244, 63, 94, 0.5);
}

.text-sub-tags {
  display: flex;
  gap: 8px;
}
.text-sub-tags span {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.thriller-play-icon {
  background: #e11d48 !important;
  color: #ffffff !important;
}

.thriller-pill {
  background: rgba(225, 29, 72, 0.12) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
}

/* 
  ==============================================================================
  【落焦起播】卡片获焦 0.3s 后自动激发动态高光视频流微预览 (Focus Playback)
  ==============================================================================
*/
.feed-note-card.preview-playing .note-cover::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.5) 100%) !important;
}

.feed-note-card.preview-playing .note-play-icon {
  animation: pulsePlay 1.2s infinite;
}
@keyframes pulsePlay {
  0%, 100% { transform: scale(1.12); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.6); }
  50% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); }
}

.feed-note-card.preview-playing.note-template-text .note-play-icon {
  animation: pulseThriller 1.2s infinite;
}
@keyframes pulseThriller {
  0%, 100% { transform: scale(1.12); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
  50% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); }
}

/* 
  【楼层编排】：第3排（data-row="2"）恢复展示，作为“三个一组”独立主题楼层
*/
.feed-row[data-row="2"] {
  display: grid;
}

/* 全局鼠标交互与指针增强 */
.focusable, 
.feed-note-card, 
.nav-item, 
.scene-pill, 
.sys-capsule, 
.action-btn, 
.note-play-icon,
.theme-enter-capsule {
  cursor: pointer;
  user-select: none;
}

/* 
  ==============================================================================
  【主题流模版卡片】严格还原手绘草图规范：
  - 整卡一体化温润灰底容器 (无下部白色分割，符合草图纯色底)
  - 顶部横通栏：左侧主题名称 + 右侧纯白“进入”胶囊药丸按钮
  - 核心主视区：3 张竖向电影海报平铺，左右对称，中间 Hero 海报高高突出
  - 获焦与落焦微动效：大屏专属视觉沉浸交互
  ==============================================================================
*/
.feed-note-card.note-template-theme {
  background: #edf2f7;
  border: 2px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  height: 360px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.theme-card-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 18px 20px 16px 20px;
  box-sizing: border-box;
}

/* 顶部通栏：左侧主题名称 + 右侧纯白胶囊按钮 (100% 贴合草图) */
.theme-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  z-index: 3;
}

.theme-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}

.theme-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.theme-main-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

/* 纯白圆角进入胶囊 (对齐草图右侧按钮) */
.theme-enter-capsule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  color: #0f172a;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-enter-capsule .enter-arrow {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

/* 核心主视区：3 张竖向海报舞台 (严格 300*444 等比缩小 · 中间 Hero 锁定焦点位) */
.theme-canvas-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: 100%;
  flex: 1;
  margin-top: 8px;
  box-sizing: border-box;
}

.theme-poster-frame {
  position: relative;
  aspect-ratio: 300 / 444; /* 严格按照用户指令：300*444 等比缩小 */
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease,
              opacity 0.28s ease;
}

/* 左右两侧海报：等比缩小 (高 216px，按 300:444 宽约 146px) */
.theme-poster-frame.poster-slot-left,
.theme-poster-frame.poster-slot-right {
  height: 216px;
  width: 146px;
  opacity: 0.85;
  z-index: 1;
  transform: scale(0.96);
}

/* 中间 Hero 主海报：高 248px，按 300:444 宽约 168px (落焦锁定于此，高光突出) */
.theme-poster-frame.poster-slot-center.poster-center-hero {
  height: 248px;
  width: 168px;
  z-index: 3;
  opacity: 1;
  border: 2.5px solid #0284c7;
  box-shadow: 0 14px 32px rgba(2, 132, 199, 0.32);
}

/* 轮播滑动过渡效果 */
.theme-poster-frame.slide-anim {
  animation: posterShift 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes posterShift {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* 左右切换指示箭头 (获焦时亮起，提示用户可用遥控器左右键切换) */
.carousel-nav-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 4;
}
.carousel-nav-indicator.nav-left { left: 4px; }
.carousel-nav-indicator.nav-right { right: 4px; }
.feed-note-card.note-template-theme.focused .carousel-nav-indicator {
  opacity: 0.9;
}
.carousel-nav-indicator.disabled {
  opacity: 0.2 !important;
}

/* 计数角标 (如 2 / 5) */
.carousel-counter-pill {
  position: absolute;
  bottom: 6px;
  right: 12px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  z-index: 4;
}

/* 海报底部半透明渐变暗层与片名信息 */
.poster-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.25) 50%, rgba(15, 23, 42, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  box-sizing: border-box;
}

.poster-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.75);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
}

.poster-badge.badge-hot {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
}

.poster-text {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-text-large {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-desc {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* 
  获焦状态动效 (Focused State):
  - 焦点锁死在中间大海报，卡片整体上浮并带外发光
  - 中间 Hero 海报高光加强为极光蓝 (#00d2ff)
*/
.feed-note-card.note-template-theme.focused {
  border-color: #0284c7 !important;
  box-shadow: 0 16px 40px rgba(2, 132, 199, 0.35) !important;
  transform: translateY(-8px) scale(1.02) !important;
  background: #e2e8f0;
}

.feed-note-card.note-template-theme.focused .theme-enter-capsule {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
  transform: scale(1.05);
}

.feed-note-card.note-template-theme.focused .poster-center-hero {
  transform: translateY(-6px) scale(1.04);
  border-color: #00d2ff;
  box-shadow: 0 18px 42px rgba(0, 210, 255, 0.45);
}

/* 落焦起播预览动效 (Focus Play Preview) */
.feed-note-card.note-template-theme.preview-playing .poster-center-hero {
  animation: heroPulse 1.8s ease-in-out infinite alternate;
}
@keyframes heroPulse {
  0% { box-shadow: 0 14px 32px rgba(2, 132, 199, 0.35); }
  100% { box-shadow: 0 20px 46px rgba(0, 210, 255, 0.65); }
}

/* 
  ==============================================================================
  【卡片 8: 16:9 三个小横图片状重叠样式】(Pin-Style 16:9 Overlap Trio)
  - 汉字“品”字排布：上方 1 个大 16:9，下方 2 个小 16:9 错落重叠
  - 同样遵循 480×360px 统一大屏组件规格
  - 具有层叠立体景深与焦点交互效果
  ==============================================================================
*/
.feed-note-card.note-template-pin {
  background: #edf2f7;
  border: 2px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  height: 360px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pin-card-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 16px 18px 12px 18px;
  box-sizing: border-box;
}

.dot-cyan {
  background: #00d2ff !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.6) !important;
}

/* 
  ==============================================================================
  【卡片 8: 16:9 三横图居中覆盖重叠样式】(严格对齐草图 media_1788929194451.png)
  - 水平排列：中间 16:9 大横图居中置顶 (z-index: 3，带黑框实线和下沉深阴影)
  - 左右两侧 16:9 横图靠后 (z-index: 1)，内侧被中间大图覆盖压住，左右露出
  - 焦点锁死在中间大横图，左右切时横图轮换到中间！
  ==============================================================================
*/
.horizontal-overlap-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  margin-top: 6px;
  overflow: visible;
}

/* 通用 16:9 横图框架 */
.h-poster-frame {
  position: absolute;
  aspect-ratio: 16 / 9; /* 严格 16:9 比例 */
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease,
              border-color 0.28s ease,
              opacity 0.28s ease;
}

/* 左右两侧 16:9 横图 (退后层，内侧被中间大图压住覆盖，左右露出) */
.h-poster-frame.h-frame-left {
  left: 0;
  width: 250px;
  height: 140px;
  z-index: 1;
  opacity: 0.85;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  transform: scale(0.96);
}

.h-poster-frame.h-frame-right {
  right: 0;
  width: 250px;
  height: 140px;
  z-index: 1;
  opacity: 0.85;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  transform: scale(0.96);
}

/* 中间 Hero 大横图：严格 16:9 (宽 324px，高 182px)，置顶居中盖住左右两翼，黑框+立体投影 */
.h-poster-frame.h-frame-center.h-frame-hero {
  position: relative;
  width: 324px;
  height: 182px;
  z-index: 3;
  opacity: 1;
  border: 2.5px solid #0f172a; /* 还原草图中的明显边框 */
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);
}

/* 获焦态：中间 Hero 边框变成极光蓝 (#00d2ff)，光晕扩展 */
.feed-note-card.note-template-pin.focused .h-frame-hero {
  border-color: #00d2ff !important;
  box-shadow: 0 18px 42px rgba(0, 210, 255, 0.5) !important;
  transform: scale(1.03);
}

/* 左右切海报时的平滑过渡动画 */
.h-poster-frame.h-slide-anim {
  animation: hShift 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hShift {
  0% { transform: scale(0.94); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* 浮层暗部与文本 */
.h-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  box-sizing: border-box;
}
.h-overlay-hero {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.3) 40%, rgba(15, 23, 42, 0.92) 100%);
  padding: 10px 14px;
}

.h-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.75);
  padding: 2px 6px;
  border-radius: 4px;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
}

.h-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-title-large {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.h-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片获焦状态与落焦起播 */
.feed-note-card.note-template-pin.focused {
  border-color: #00d2ff !important;
  box-shadow: 0 16px 40px rgba(0, 210, 255, 0.35) !important;
  transform: translateY(-8px) scale(1.02) !important;
  background: #e2e8f0;
}
.feed-note-card.note-template-pin.focused .theme-enter-capsule {
  background: linear-gradient(135deg, #00d2ff, #0284c7);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.45);
  transform: scale(1.05);
}
.feed-note-card.note-template-pin.focused .carousel-nav-indicator {
  opacity: 0.9;
}
.feed-note-card.note-template-pin.preview-playing .h-frame-hero {
  animation: heroPulse 1.8s ease-in-out infinite alternate;
}

/* 
  ==============================================================================
  【1920×1080 震撼全屏播放器】大屏特辑连放 (10分钟多部惊悚高光连放)
  ==============================================================================
*/
.fullscreen-player-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 3000;
}

.fullscreen-player-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.fullscreen-video-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.fs-video-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1509248961158-e54f6934749c?q=80&w=1920&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}

.fs-video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.85) 100%),
              linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 20%, rgba(0, 0, 0, 0.85) 100%);
}

.fs-playing-badge {
  position: absolute;
  top: 48px;
  left: 56px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.85);
  padding: 10px 24px;
  border-radius: 30px;
  border: 1px solid rgba(225, 29, 72, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.fs-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 10px #f43f5e;
  animation: pulseCrimson 1.5s infinite;
}
@keyframes pulseCrimson {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.fs-badge-text {
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.fs-chapter-cue {
  position: absolute;
  top: 110px;
  left: 56px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.fs-ch-num {
  font-size: 15px;
  font-weight: 800;
  color: #f43f5e;
  background: rgba(225, 29, 72, 0.15);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(225, 29, 72, 0.3);
}

.fs-ch-name {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.fs-playback-hud {
  position: absolute;
  bottom: 56px;
  left: 56px;
  right: 56px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fs-progress-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.fs-progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  overflow: hidden;
}

.fs-progress-current {
  height: 100%;
  background: linear-gradient(90deg, #f43f5e, #e11d48);
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.8);
}

.fs-time {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.fs-control-pills {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fs-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.fs-pill svg {
  width: 18px;
  height: 18px;
}

.fs-pill.focused {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.5) !important;
}

.scroll-track {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  padding-bottom: 90px;
}

/*
  ==============================================================================
  核心大展位：CCTV-1 画中画与侧边卡 (浅色底下的高对比度视觉焦点)
  ==============================================================================
*/
.live-hero-section {
  display: flex;
  gap: 24px;
  width: 100%;
  height: 420px;
  position: relative;
}

/* CCTV-1 画中画播放卡片 (天然视觉重心) */
.pip-player-card {
  position: relative;
  flex: 6.8;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000000;
  border: 3px solid transparent;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease;
}

.pip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #172554 0%, #030712 100%);
  background-image: url('https://images.unsplash.com/photo-1585829365295-ab7cd400c167?q=80&w=1200&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}

.tv-channel-badge {
  position: absolute;
  top: 24px;
  left: 30px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  z-index: 5;
}

.cctv-logo {
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.cctv-sub {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 6px;
  border-radius: 4px;
}

.live-clock {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 22px;
  font-family: monospace;
  color: #e2e8f0;
  opacity: 0.9;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.play-triangle {
  color: #ffffff;
  font-size: 28px;
  margin-left: 4px;
}

.news-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.95) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(185, 28, 28, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  color: #ffffff;
  border-top: 2px solid #fbbf24;
}

.anchor-name {
  font-size: 19px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: 4px;
}

.ticker-center {
  text-align: center;
}

.ticker-title {
  font-size: 15px;
  color: #fde047;
  letter-spacing: 1px;
}

.ticker-desc {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
}

.ticker-date {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
}

/* 画中画获焦高亮环 (内聚高亮边框，防止外扩切边) */
.pip-player-card.focused {
  transform: scale(1.018);
  border-color: #0284c7;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.32), 0 0 0 2px #0284c7;
  z-index: 10;
}

/* 右侧叠放卡片 */
.hero-side-cards {
  position: relative;
  flex: 3.2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.side-card {
  position: relative;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid transparent;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease;
}

.side-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
}

.dram-badge {
  display: inline-block;
  background: #e11d48;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.side-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.side-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.progress-fill {
  height: 100%;
  background: #f59e0b;
}

.side-card.focused {
  transform: scale(1.025);
  border-color: #0284c7;
  box-shadow: 0 14px 30px rgba(2, 132, 199, 0.3);
  z-index: 10;
}

/*
  ==============================================================================
  五大金刚区：浅色通透陶瓷质感微卡片
  ==============================================================================
*/
.quick-tiles-section {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 88px;
}

.quick-tile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease;
}

.tile-svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
  stroke-width: 2.2;
  transition: transform 0.2s ease;
}

/* 经过调和的高级马卡龙微饱和渐变（浅色风格专属） */
.tile-history {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.tile-search {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.tile-settings {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.tile-channel {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.tile-free {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.quick-tile.focused {
  transform: scale(1.08);
  border-color: #0f172a;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25);
  z-index: 6;
}

.quick-tile.focused .tile-svg {
  transform: scale(1.12);
}

/*
  ==============================================================================
  横向行组与白瓷影视卡片排版
  ==============================================================================
*/
.content-row {
  width: 100%;
}

.row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.row-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}

.row-more {
  font-size: 16px;
  font-weight: 600;
  color: #64748b;
}

.row-cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

/* 通用白玉卡片底壳 */
.card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-color: #ffffff;
  border: 3px solid transparent;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  padding-bottom: 14px;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease;
}

.poster-card {
  width: 350px;
}

.poster-card .poster-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background-color: #e2e8f0;
}

.poster-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.quality-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.7);
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.score-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  color: #fbbf24;
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 14px;
}

.card-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 14px;
}

/* 横版大卡片 */
.landscape-card {
  width: 480px;
}

.landscape-card .poster-wrapper {
  position: relative;
  width: 100%;
  height: 230px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background-color: #e2e8f0;
}

.vip-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.vip-tag.highlight {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
}

/*
  【意图】：浅色模式下的旗舰卡片获焦效果 (浮雕浮起 + 蔚蓝高光边框 + 漫反射柔光)
  【核心点】：在白玉背景上形成明确的景深反差
*/
.card.focused {
  transform: scale(1.06);
  z-index: 5;
  border-color: #0284c7;
  box-shadow: 0 18px 40px rgba(2, 132, 199, 0.26), 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.card.focused .poster-img {
  transform: scale(1.04);
}

.card.focused .card-title {
  color: #0284c7;
}

/*
  ==============================================================================
  底栏操作指引与 Toast
  ==============================================================================
*/
.remote-hints {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 32px;
  z-index: 20;
}

.hint-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.key-pill {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.scale-hint {
  margin-left: auto;
  color: #0284c7;
  font-weight: 700;
}

/* 浅色 Toast 提示 */
.tv-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 14px 34px;
  border-radius: 30px;
  font-size: 19px;
  font-weight: 600;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  z-index: 99;
}

.tv-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==============================================================================
   兴趣流 EPG 产品专属：多样化卡片混合排版与整行通栏适配器
   ============================================================================== */
.stream-scroll-track {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-bottom: 80px;
}

/* 重点大卡在 3 列网格中跨 2 列 */
.feed-row .card-hero-spotlight {
  grid-column: span 2;
  height: 288px;
}

/* 博主卡与有声卡在 3 列网格中占 1 列，高度与大卡等高 */
.feed-row .card-creator-style-a,
.feed-row .card-audio-spotlight,
.feed-row .card-editorial-quote {
  grid-column: span 1;
  height: 288px;
}

/* 跨全宽整行容器（1824px 宽幅 · 破除 feed-row 的 3 列 grid 限制） */
.feed-row.stream-row-full,
.stream-row-full {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
}

/* 竖屏短剧楼层：严格 300×444 黄金比例等比缩小 (告别原310px矮小扁平问题) */
.stream-row-shorts .row-vertical-shorts,
.row-vertical-shorts {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.shorts-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  padding: 12px 6px;
  margin: -12px -6px;
  position: relative;
  z-index: 1;
}

.shorts-cards-grid.has-focused,
.shorts-cards-grid:has(.focused),
.shorts-cards-grid:focus-within {
  z-index: 25 !important;
}

.card-vertical-short {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 444; /* 严格遵循 300*444 院线竖版海报黄金比例等比缩小 */
  height: auto;
  min-height: 414px; /* 对应 1920 大屏单卡约 280px 宽度时的等比高度 */
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background-color: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* 顶部模式切换微胶囊控制器 (兴趣流全景 ⇋ 创新控件评审台) */
.view-mode-switcher {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px 4px;
  gap: 4px;
  margin-right: 12px;
}

.mode-tab-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.mode-tab-btn .mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
}

.mode-tab-btn.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(14, 165, 233, 0.35));
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.45);
}

.mode-tab-btn.focused,
.mode-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
  transform: scale(1.05);
}

/* 评审台内嵌视窗遮罩层 */
.showcase-overlay-drawer {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: #07090e;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.showcase-overlay-drawer.open {
  display: block;
  opacity: 1;
}

.showcase-overlay-header {
  height: 56px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  box-sizing: border-box;
}

.showcase-overlay-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.showcase-back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.showcase-back-btn:hover,
.showcase-back-btn.focused {
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.5);
  transform: scale(1.04);
}

.showcase-iframe-wrap {
  width: 100%;
  height: calc(1080px - 56px);
  border: none;
}

/* ==============================================================================
   种草流策略模拟实验室浮层 (Strategy Simulation Modal - 1920×1080 适配)
   ============================================================================== */
.strategy-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 9, 20, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3000;
}

.strategy-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.strategy-modal-dialog {
  width: 1360px;
  max-height: 860px;
  background: linear-gradient(145deg, rgba(18, 26, 48, 0.95) 0%, rgba(10, 15, 30, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 28px;
  box-shadow: 0 36px 96px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(16px);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.strategy-modal-backdrop.open .strategy-modal-dialog {
  transform: scale(1) translateY(0);
}

/* 顶部标题区 */
.strategy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 36px 18px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.strategy-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.strategy-modal-title {
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin: 0 0 4px 0;
}

.strategy-modal-sub {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
}

.strategy-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.strategy-close-btn:hover,
.strategy-close-btn.focused {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

/* 主体内容区 */
.strategy-modal-body {
  padding: 22px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.strategy-section-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 策略预设卡片四宫格 */
.strategy-presets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.strategy-preset-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.strategy-preset-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.strategy-preset-card.active {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.16) 0%, rgba(99, 102, 241, 0.12) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.25), inset 0 0 16px rgba(56, 189, 248, 0.1);
}

.strategy-preset-card.focused {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.28) 0%, rgba(99, 102, 241, 0.28) 100%) !important;
  border-color: #ffffff !important;
  transform: scale(1.035) translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(14, 165, 233, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.8) !important;
  z-index: 10;
}

.preset-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.preset-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
}
.tag-recommended { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.tag-cinema { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.tag-shorts { background: linear-gradient(135deg, #ec4899, #f43f5e); color: #fff; }
.tag-standard { background: rgba(255, 255, 255, 0.15); color: #cbd5e1; }

.preset-cadence {
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
}

.preset-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.preset-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preset-flow-mini {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-step {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.flow-step.highlight-hero {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.flow-step.highlight-shorts {
  background: rgba(236, 72, 153, 0.25);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.flow-step.highlight-marquee {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.flow-step.highlight-theme {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.flow-arrow {
  color: #64748b;
  font-size: 11px;
}

/* 规则微调面板 */
.strategy-rules-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strategy-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.strategy-rule-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.rule-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

.rule-hint {
  font-size: 11.5px;
  color: #94a3b8;
}

.rule-toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1.2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rule-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
}

.rule-btn.active {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.rule-btn.focused {
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6), 0 0 0 2px #ffffff !important;
  z-index: 5;
}

/* 弹窗底部操作栏 */
.strategy-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.strategy-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-tip-icon {
  font-size: 17px;
}

.footer-tip-text {
  font-size: 13px;
  color: #94a3b8;
}

.strategy-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strategy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
}

.strategy-btn.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1.2px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}

.strategy-btn.btn-secondary:hover,
.strategy-btn.btn-secondary.focused {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.strategy-btn.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  border: 1.2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}

.strategy-btn.btn-primary:hover,
.strategy-btn.btn-primary.focused {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  border-color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.6), 0 0 0 2px #ffffff;
}

/* 天气胶囊落焦与交互强化 */
.weather-capsule {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer !important;
}

.weather-capsule:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(56, 189, 248, 0.5);
  transform: scale(1.04);
}

.weather-capsule.focused {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.6), rgba(14, 165, 233, 0.7)) !important;
  border-color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 8px 28px rgba(2, 132, 199, 0.7), inset 0 1px 1.5px rgba(255, 255, 255, 0.6) !important;
}

.strategy-gear-hint {
  font-size: 11px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  margin-left: 2px;
  font-weight: 700;
}

/* ==============================================================================
   【全局焦点无遮挡 & 防剪切核心引擎】(Universal Focus Layering & Anti-Clipping)
   1. 保证页面所有焦点放大的元素永不被切边削平 (Anti-Clipping)
   2. 保证焦点放大元素在空间层级上始终位于最前方 (Stay in Front)
   ============================================================================== */
.focusable.focused,
.focused,
.feed-note-card.focused,
.card-hero-spotlight.focused,
.card-creator-style-a.focused,
.card-audio-spotlight.focused,
.card-vertical-short.focused,
.card-editorial-quote.focused,
.note-template-text.focused,
.note-template-theme.focused,
.note-template-pin.focused,
.shorts-card.focused,
.discover-card-item.focused,
.profile-chip.focused,
.nav-item.focused,
.topic-pill.focused,
.scene-pill.focused,
.header-capsule.focused,
.role-badge-item.focused,
.preset-candidate-card.focused,
.preset-role-card.focused,
.category-nav-item.focused,
.account-card-item.focused,
.trial-btn.focused {
  position: relative !important;
  z-index: 50 !important;
}

/* 提升获焦行 / 父容器的堆叠层级，杜绝下排或相邻容器压盖获焦卡片 */
.feed-row.has-focused,
.feed-row:has(.focused),
.feed-row:focus-within,
.shorts-cards-grid.has-focused,
.shorts-cards-grid:has(.focused),
.shorts-cards-grid:focus-within,
.role-preset-grid.has-focused,
.role-preset-grid:has(.focused),
.role-preset-grid:focus-within,
.page-meta-header.has-focused,
.page-meta-header:has(.focused),
.page-meta-header:focus-within,
.top-system-bar.has-focused,
.top-system-bar:has(.focused),
.top-system-bar:focus-within {
  z-index: 30 !important;
}