/**
 * 合并后的应用主样式文件
 * 包含所有功能模块样式（common.css + app.css + user.css）
 * 
 * 文件合并顺序：
 * 1. common.css - 全局基础样式和CSS变量
 * 2. app.css - 视频模块样式
 * 3. user.css - 用户中心模块样式
 */


/* ============================================================================
   区域一：全局基础样式和CSS变量 (common.css)
   ============================================================================ */

/* ============================================
   VideoSystem Common CSS - 全局基础样式
   使用命名空间 .vs- 前缀避免冲突
   ============================================ */

/* ============================================
   VideoSystem 统一CSS变量定义
   所有模块共享的变量，避免硬编码和冲突
   ============================================ */

:root {
  /* ========== 颜色系统 ========== */
  
  /* 主色调 - 暖色系（淡粉红/淡桔红） */
  --vs-color-primary: #ff9f9f;
  --vs-color-primary-hover: #ffb3b3;
  --vs-color-primary-light: #ffe8e8;
  --vs-color-primary-lighter: #fff5f5;
  
  /* 视频模块主色调（更淡） */
  --vs-video-color-primary: #ffcccc;
  --vs-video-color-primary-hover: #ffd6d6;
  
  /* 功能色 */
  --vs-color-success: #52c41a;
  --vs-color-success-bg: #f6ffed;
  --vs-color-success-border: #b7eb8f;
  --vs-color-error: #ff4d4f;
  --vs-color-error-hover: #ff7875;
  --vs-color-error-bg: #fff2f0;
  --vs-color-error-border: #ffccc7;
  --vs-color-warning: #fa8c16;
  --vs-color-warning-bg: #fff7e6;
  
  /* 文本颜色 - 统一为白色 */
  --vs-color-text-primary: #ffffff;
  --vs-color-text-secondary: #e0e0e0;
  --vs-color-text-tertiary: #b0b0b0;
  
  /* 背景色 - 统一为黑灰色 */
  --vs-color-bg-body: #2a2a2a; /* 主背景色：黑灰色 */
  --vs-color-bg-white: #2a2a2a; /* 白色背景改为黑灰色，统一整站背景 */
  --vs-color-bg-light: #333333; /* 浅色背景改为深灰色 */
  --vs-color-bg-lighter: #3a3a3a; /* 更浅背景改为稍浅的灰色 */
  --vs-color-bg-hover: #3a3a3a; /* 悬停背景改为灰色 */
  
  /* 边框颜色 - 调整为适合深色背景 */
  --vs-color-border: #404040;
  --vs-color-border-light: #505050;
  --vs-color-border-lighter: #454545;
  
  /* 遮罩层颜色 */
  --vs-color-overlay: rgba(0, 0, 0, 0.5);
  
  /* 悬停背景色 */
  --vs-color-hover-bg: #3a3a3a;
  
  /* ========== 间距系统 ========== */
  --vs-spacing-xs: 5px;
  --vs-spacing-sm: 10px;
  --vs-spacing-md: 15px;
  --vs-spacing-lg: 20px;
  --vs-spacing-xl: 30px;
  --vs-spacing-xxl: 40px;
  
  /* ========== 圆角系统 ========== */
  --vs-radius-sm: 4px;
  --vs-radius-md: 8px;
  --vs-radius-lg: 12px;
  --vs-radius-circle: 50%;
  --vs-radius-input: 20px;
  
  /* ========== 字体系统 ========== */
  --vs-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, 'Microsoft YaHei', sans-serif;
  --vs-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  --vs-font-size-xs: 12px;
  --vs-font-size-sm: 14px;
  --vs-font-size-md: 16px;
  --vs-font-size-lg: 18px;
  --vs-font-size-xl: 20px;
  --vs-font-size-xxl: 24px;
  
  --vs-font-weight-normal: 400;
  --vs-font-weight-medium: 500;
  --vs-font-weight-bold: 600;
  
  /* ========== 阴影系统 ========== */
  --vs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --vs-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --vs-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --vs-shadow-nav: 0 -2px 8px rgba(0, 0, 0, 0.05);
  --vs-shadow-focus: 0 0 0 2px rgba(255, 159, 159, 0.1);
  
  /* ========== 过渡时间 ========== */
  --vs-transition-fast: 0.2s;
  --vs-transition-normal: 0.3s;
  --vs-transition-slow: 0.6s;
  
  /* ========== 布局系统 ========== */
  --vs-container-max-width: 1200px;
  --vs-top-bar-height: 64px; /* 从48px增加到64px，更高更舒适 */
  --vs-header-container-height: var(--vs-top-bar-height); /* 头部容器总高度，由JS动态更新 */
  --vs-bottom-nav-height: 26px;
  --vs-search-max-width: 500px;
  
  /* ========== Z-Index 层级系统（从低到高） ========== */
  /* 基础层：固定导航 */
  --vs-z-index-nav-sticky: 98;        /* 二级/三级导航栏 */
  --vs-z-index-top-bar: 99;            /* 顶部栏 */
  --vs-z-index-bottom-nav: 100;        /* 底部导航栏 */
  
  /* 下拉层：相对定位的下拉菜单 */
  --vs-z-index-dropdown: 110;          /* 搜索下拉框等（相对头部容器，需高于导航栏） */
  
  /* 遮罩层：移动端搜索 */
  --vs-z-index-mobile-search-overlay: 199;  /* 移动端搜索遮罩 */
  --vs-z-index-mobile-search-popup: 200;    /* 移动端搜索弹窗 */
  
  /* 遮罩层：通用遮罩和弹窗 */
  --vs-z-index-overlay: 1000;         /* 通用遮罩层（筛选面板、支付弹窗等） */
  --vs-z-index-filter-popup: 1001;    /* 筛选面板 */
  --vs-z-index-pay-popup: 1002;       /* 支付弹窗 */
  --vs-z-index-announcement: 1003;    /* 公告弹窗（最高优先级） */
  
  /* ========== 图标尺寸 ========== */
  --vs-icon-size-sm: 24px;
  --vs-icon-size-md: 28px;
  --vs-icon-size-lg: 36px;
  
  /* ========== 视频模块特定 ========== */
  --vs-video-item-border-radius: 8px;
  --vs-video-cover-height: 280px;
  --vs-video-list-gap: 20px;
  --vs-video-list-min-width: 200px;
  
  /* ========== 用户模块特定 ========== */
  --vs-user-form-max-width: 400px;
  --vs-user-page-max-width: 1200px;
}

/* ========== 基础样式 ========== */
/* 使用组合选择器保持向后兼容 */
html {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

body,
.vs-body {
  font-family: var(--vs-font-family);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  position: static;
  background-color: var(--vs-color-bg-body); /* 黑灰色背景 */
  box-sizing: border-box;
}

/* 确保所有元素不会超出视口 */
* {
  box-sizing: border-box;
}

/* 有底部导航栏时，为 body 添加底部 padding */
body.has-bottom-nav,
.vs-body.has-bottom-nav {
  padding-bottom: var(--vs-bottom-nav-height);
}

ul,
.vs-list {
  list-style: none;
  padding: 0;
}

li,
.vs-list-item {
  padding: 6px 0;
}

/* ========== 顶部栏和导航栏统一容器 ========== */
/* 使用 fixed 定位确保整个头部区域始终固定 */
.vs-header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vs-z-index-top-bar);
  width: 100%;
  box-sizing: border-box;
  /* 确保不创建额外的堆叠上下文（避免transform、opacity等属性） */
}

/* ========== 顶部栏样式 ========== */
.vs-top-bar {
  background: var(--vs-color-bg-body); /* 使用统一的背景色 */
  border-bottom: 1px solid var(--vs-color-border); /* 添加分隔线，增强层次感 */
  padding: 8px 0; /* 优化：从14px减少到8px，更紧凑 */
  position: relative; /* 改为相对定位，由父容器控制固定 */
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 优化：更精细的阴影 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果，更现代 */
  z-index: 2; /* 确保顶部栏在导航栏之上 */
}

.vs-top-bar-container {
  max-width: var(--vs-container-max-width);
  margin: 0; /* 默认靠左（<= 1200px时） */
  padding: 0 16px; /* 优化：从12px增加到16px */
  display: flex;
  align-items: center;
  gap: 12px; /* 优化：从lg(20px)减少到12px，更紧凑 */
  min-width: 0;
  position: relative;
  line-height: 1; /* 确保行高为1 */
}

.vs-top-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease; /* 从opacity改为all，更流畅 */
  padding: 4px 8px; /* 添加内边距，增加点击区域 */
  border-radius: var(--vs-radius-md); /* 添加圆角 */
}

.vs-top-logo:hover {
  opacity: 0.85;
  transform: translateY(-1px); /* 添加轻微上浮效果 */
  background: rgba(255, 204, 204, 0.1); /* 添加背景色 */
}

.vs-logo-icon {
  flex-shrink: 0;
  height: 32px; /* 优化：从36px减少到32px，更精致 */
  width: auto; /* 宽度自适应，保持原始比例 */
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(255, 204, 204, 0.3)); /* 添加图标阴影 */
  display: block; /* 确保图片是块级元素 */
}

.vs-top-logo:hover .vs-logo-icon {
  transform: scale(1.05); /* hover时轻微放大，移除旋转效果 */
}

.vs-logo-text {
  margin-left: 8px;
  font-size: 14px;
  color: #0ee782;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: normal;
}

.vs-logo-text {
  display: inline-block;
}

.vs-top-search {
  flex: 1;
  min-width: 0;
  max-width: var(--vs-search-max-width);
  position: relative;
  margin: 0 auto;
  z-index: 1; /* 确保搜索框及其下拉框在导航栏之上 */
}

.vs-top-search-input {
  width: 100%;
  padding: 6px 36px 6px 12px; /* 优化：从10px减少到6px，更紧凑 */
  border: 1.5px solid var(--vs-color-border);
  border-radius: 16px; /* 优化：使用固定值16px，更精致 */
  font-size: 13px; /* 优化：从14px减少到13px */
  outline: none;
  transition: all 0.15s; /* 优化：从normal改为0.15s，更灵敏 */
  box-sizing: border-box;
  background: var(--vs-color-bg-light); /* 添加背景色，更有层次 */
  color: var(--vs-color-text-primary);
}

.vs-top-search-input:focus {
  border-color: var(--vs-video-color-primary);
  box-shadow: 0 0 0 3px rgba(255, 204, 204, 0.15), var(--vs-shadow-focus); /* 增强聚焦效果 */
  background: var(--vs-color-bg-lighter); /* 聚焦时背景更亮 */
  transform: translateY(-1px); /* 轻微上浮 */
}

.vs-top-search-input::placeholder {
  color: var(--vs-color-text-tertiary);
  opacity: 0.7;
}

.vs-top-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; /* 优化：从28px减少到24px，更精致 */
  height: 24px;
  border: none;
  background: var(--vs-video-color-primary);
  color: var(--vs-color-bg-white);
  border-radius: var(--vs-radius-circle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 优化：从14px减少到12px */
  flex-shrink: 0;
  transition: all 0.15s; /* 优化：从fast改为0.15s */
  box-shadow: 0 2px 6px rgba(255, 204, 204, 0.3); /* 添加阴影 */
  padding: 0;
}

.vs-top-search-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.vs-top-search-btn:hover {
  background: var(--vs-video-color-primary-hover);
  transform: translateY(-50%) scale(1.1); /* 放大效果 */
  box-shadow: 0 3px 8px rgba(255, 204, 204, 0.4); /* 增强阴影 */
}

.vs-top-search-btn:active {
  transform: translateY(-50%) scale(0.95); /* 点击缩小效果 */
}

.vs-search-type-wrap {
  padding: 5px;
}
.vs-search-type-label {
  margin-right: 6px;
  color: #10f0bf;
  font-size: 12px;
  font-weight: 500;
}

.vs-top-search-select,
.vs-search-type-select {
  height: 30px;
  border: 1px solid var(--vs-color-border);
  border-radius: 14px;
  background: var(--vs-color-bg-light);
  color: var(--vs-color-text-primary);
  font-size: 12px;
  padding: 0 8px;
  margin-right: 6px;
  outline: none;
}
.vs-top-search-select:focus,
.vs-search-type-select:focus {
  border-color: var(--vs-video-color-primary);
  box-shadow: 0 0 0 2px rgba(255, 204, 204, 0.15);
}

.vs-top-actions {
  display: flex;
  align-items: center;
  gap: 8px; /* 优化：从sm减少到8px，更紧凑 */
  flex-shrink: 0;
  margin-left: auto;
}

/* PC端隐藏移动端按钮组 */
.top-bar-right-group {
  display: none;
}

/* PC端隐藏移动端搜索按钮 */
.mobile-search-btn {
  display: none;
}

.vs-top-action-btn {
  width: 32px; /* 优化：从36px减少到32px，更精致 */
  height: 32px;
  border: 1.5px solid var(--vs-color-border); /* 添加边框，更有层次 */
  background: var(--vs-color-bg-lighter);
  border-radius: var(--vs-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px; /* 优化：使用固定值16px */
  text-decoration: none;
  color: var(--vs-color-text-primary);
  transition: all 0.15s; /* 优化：从fast改为0.15s */
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; /* 确保边框包含在宽度内，防止华为浏览器重叠 */
  margin-right: var(--vs-spacing-sm); /* 添加右边距，补充gap，防止华为浏览器重叠 */
  padding: 0;
}

.vs-top-action-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: all 0.2s ease;
}

.vs-top-action-btn:last-child {
  margin-right: 0; /* 最后一个按钮不需要右边距 */
}

.vs-top-action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 204, 204, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.vs-top-action-btn:hover {
  background: var(--vs-color-bg-hover);
  border-color: var(--vs-video-color-primary);
  color: var(--vs-video-color-primary);
  transform: translateY(-2px); /* 上浮效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 添加阴影 */
}

.vs-top-action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.vs-top-action-btn:active {
  transform: translateY(0); /* 点击时回到原位 */
}

.vs-main-content {
  min-height: calc(100vh - 180px);
  padding: 0;
  padding-top: var(--vs-header-container-height); /* 使用CSS变量，由JS动态更新 */
  background: transparent; /* 改为透明，让body的背景色显示出来 */
  position: relative;
  overflow-x: hidden; /* 禁止横向滚动 */
  overflow-y: visible;
}

/* ========== 导航区域容器（二级+三级） ========== */
/* 改为相对定位，由父容器统一管理固定定位 */
.vs-nav-section {
  position: relative; /* 改为相对定位，由父容器控制固定 */
  width: 100%;
  box-sizing: border-box;
  min-height: 1px;
  margin: 0;
  padding: 0;
  z-index: 1; /* 确保导航栏在顶部栏之下 */
}

.vs-nav-sticky-container {
  background: var(--vs-color-bg-white);
  width: 100%;
  box-sizing: border-box;
  min-height: 1px;
  margin: 0;
  padding: 0; /* 移除所有padding，让二级导航紧贴标题栏 */
  line-height: 1; /* 确保行高为1 */
  border-top: none !important; /* 移除顶部横切线 */
  border: none !important; /* 移除所有边框 */
}

/* ========== 抽屉菜单样式 ========== */
.vs-drawer-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--vs-color-text-primary);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  margin-right: 12px;
  padding: 0;
}

.vs-drawer-menu-btn:hover {
  background: var(--vs-color-bg-hover);
}

.vs-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.vs-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.vs-drawer-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: auto; /* 由 top/bottom 控制高度 */
  min-height: 0;
  max-height: none;
  background: var(--vs-color-bg-body);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vs-drawer-menu.open {
  transform: translateX(0);
}

@supports (height: 100dvh) {
  .vs-drawer-menu {
    height: 100dvh;
  }
}

@supports (height: 100svh) {
  .vs-drawer-menu {
    height: 100svh;
  }
}

.vs-drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--vs-color-border);
}

.vs-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--vs-color-text-primary);
}

.vs-drawer-close {
  background: transparent;
  border: none;
  color: var(--vs-color-text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-drawer-close:hover {
  background: var(--vs-color-bg-hover);
  color: var(--vs-color-text-primary);
}

.vs-drawer-content {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 0; /* 修改：由 12px 0 改为 0，因为内部项自带 padding */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  overscroll-behavior: contain; /* 防止滚动链，避免滚动穿透到背景 */
}

.vs-drawer-actions {
  padding: 12px 0;
}

.vs-drawer-action-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: var(--vs-color-text-primary);
  text-decoration: none;
  transition: all 0.2s;
  gap: 12px;
}

.vs-drawer-action-item:hover {
  background: var(--vs-color-bg-hover);
}

.vs-drawer-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--vs-color-text-secondary);
}

.vs-drawer-action-text {
  font-size: 16px;
  font-weight: 500;
}

.vs-drawer-divider {
  height: 1px;
  background: var(--vs-color-border);
  margin: 8px 20px;
  opacity: 0.6;
}

.vs-drawer-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--vs-color-text-primary);
  text-decoration: none;
  transition: all 0.2s;
}

.vs-drawer-nav-item:hover {
  background: var(--vs-color-bg-hover);
}

.vs-drawer-nav-item.active {
  background: var(--vs-color-bg-hover);
  border-left: 4px solid #10f0bf;
  padding-left: 16px;
}

.vs-drawer-nav-text {
  font-size: 16px;
  font-weight: bold;
}

/* 抽屉菜单底部版权信息区域 */
.vs-drawer-footer {
  border-top: 1px solid var(--vs-color-border);
  background: rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  padding: 16px 20px;
  margin-top: auto; /* 确保在底部 */
}

.vs-drawer-footer-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vs-drawer-footer-item {
  font-size: 12px;
  line-height: 1.5;
  color: var(--vs-color-text-secondary);
  text-align: center;
}

.vs-drawer-footer-link {
  color: var(--vs-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.vs-drawer-footer-link:hover {
  color: #10f0bf;
  text-decoration: underline;
}

.vs-drawer-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding-top: 4px;
}

.vs-drawer-footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.vs-drawer-footer-contact-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* 防止body滚动的辅助样式（不使用 overflow:hidden，以免影响抽屉内部滚动） */
body.drawer-open,
body.filter-open {
  position: fixed !important;
  width: 100% !important;
  /* 不设置 overflow: hidden，让抽屉菜单和筛选面板内部可以正常滚动 */
}

/* 隐藏原有底部导航相关样式 */
.vs-bottom-nav {
  display: none !important;
}

body.has-bottom-nav {
  padding-bottom: 0 !important;
}

/* 适配移动端 logo 间距 */
@media (max-width: 768px) {
  .vs-top-bar-container {
    padding-left: 10px;
  }
}

/* ========== 统一的导航Canvas基础样式 ========== */
/* 确保所有导航的Canvas样式一致 */
.vs-secondary-nav-item .anti-ocr-canvas,
.vs-secondary-nav-item canvas,
.vs-default-level3-item .anti-ocr-canvas,
.vs-default-level3-item canvas {
  display: block;
  /* max-width: 100%; */ /* 移除最大宽度限制，让canvas完全自适应 */
  width: auto; /* 宽度自适应 */
  height: auto; /* 高度自适应 */
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: top;
  object-fit: contain; /* 保持比例，防止变形 */
}

/* 一级导航Canvas特殊样式（保持原有样式） */
.vs-bottom-nav-item canvas {
  width: 100%;
}

/* ========== 二级导航样式 ========== */
.vs-secondary-nav {
  background: var(--vs-color-bg-body); /* 使用统一的背景色 */
  padding: 0; /* 移除上下padding，让卡片文字紧贴标题栏文字 */
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  position: relative; /* 相对定位，自然堆叠 */
  margin-top: 0;
  line-height: 1.5; /* 调整行高 */
  border-top: none; /* 移除顶部横切线 */
}

.vs-secondary-nav-wrapper {
  max-width: var(--vs-container-max-width, 1200px);
  margin: 0; /* 默认靠左（<= 1200px时） */
  padding: 0; /* 紧靠左边界，移除左右padding */
  box-sizing: border-box;
  border-top: none; /* 移除顶部横切线 */
}

.vs-secondary-nav-container {
  display: flex;
  align-items: stretch; /* 改为stretch，让所有项目等高 */
  gap: 0; /* 移除gap，使用边框分隔 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: var(--vs-color-border) transparent;
  padding: 0; /* 移除上下padding */
  border: 1px solid var(--vs-color-border); /* 外边框 */
  border-radius: 6px;
  background: var(--vs-color-bg-body);
}

.vs-secondary-nav-container::-webkit-scrollbar {
  height: 4px;
}

.vs-secondary-nav-container::-webkit-scrollbar-track {
  background: transparent;
}

.vs-secondary-nav-container::-webkit-scrollbar-thumb {
  background: var(--vs-color-border);
  border-radius: 2px;
}

.vs-secondary-nav-container::-webkit-scrollbar-thumb:hover {
  background: var(--vs-color-text-tertiary);
}

/* ========== 统一的导航A标签基础样式 ========== */
.vs-secondary-nav-item,
.vs-default-level3-item {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-right: 0; /* 移除margin，使用边框分隔 */
}

/* 二级导航特定样式 - 表格单元格样式 */
.vs-secondary-nav-item {
  color: var(--vs-color-text-primary);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 10px; /* 减少左右间距：从14px改为10px */
  border-right: 1px solid var(--vs-color-border); /* 右边框分隔 */
  border-radius: 0; /* 移除圆角，表格样式 */
  transition: all 0.2s ease;
  min-height: 36px; /* 稍微增加高度 */
  background: var(--vs-color-bg-body);
  position: relative;
}

/* 第一个和最后一个项目的圆角处理 */
.vs-secondary-nav-item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.vs-secondary-nav-item:last-child {
  border-right: none; /* 最后一个不需要右边框 */
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* 三级导航特定样式 */
.vs-default-level3-item {
  color: var(--vs-color-text-primary);
  font-size: 12px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--vs-color-bg-light);
  border: 1px solid var(--vs-color-border);
  transition: all 0.2s ease;
  min-height: 22px;
  line-height: 1.3;
}

.vs-secondary-nav-item span,
.vs-default-level3-item span {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.vs-secondary-nav-item:last-child,
.vs-default-level3-item:last-child,
.vs-filter-trigger-btn:last-child {
  margin-right: 0;
}

/* 悬停效果 - 表格单元格样式 */
.vs-secondary-nav-item:hover {
  background-color: var(--vs-color-bg-lighter);
  color: var(--vs-video-color-primary);
  transform: none; /* 移除位移效果 */
}

/* 激活状态 - 表格单元格样式（高亮边框） */
.vs-secondary-nav-item.active {
  background: transparent; /* 透明背景 */
  border: 2px solid var(--vs-video-color-primary); /* 高亮边框 */
  border-right: 2px solid var(--vs-video-color-primary); /* 确保右边框也是高亮 */
  color: var(--vs-video-color-primary); /* 激活时文字使用主题色 */
  font-weight: 600; /* 加粗字体，更清晰 */
  box-shadow: 0 2px 8px rgba(255, 204, 204, 0.3); /* 轻微阴影，增强视觉效果 */
  transform: none; /* 移除位移效果 */
  position: relative;
  z-index: 1; /* 确保选中项在上层 */
}

/* 激活状态下的伪元素，添加底部指示条（可选，如果不需要可以删除） */
.vs-secondary-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整位置，与边框对齐 */
  left: -2px;
  right: -2px;
  height: 3px;
  background: var(--vs-video-color-primary);
  border-radius: 0;
  z-index: -1;
}

.vs-secondary-nav-item.active:hover {
  background: transparent; /* 保持透明背景 */
  border-color: var(--vs-video-color-primary);
  color: var(--vs-video-color-primary);
  box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4); /* 悬停时阴影稍强 */
}

/* ========== 三级导航样式 ========== */
.level3-nav-section,
.vs-level3-nav-section {
  background: var(--vs-color-bg-body); /* 使用统一的背景色 */
  padding: 0; /* 移除上下padding，让卡片文字紧贴二级导航 */
  position: relative; /* 相对定位，自然堆叠 */
  margin-top: 0; /* 移除margin-top，紧贴二级导航 */
  line-height: 1.5; /* 调整行高 */
}

.default-level3-preview,
.vs-default-level3-preview {
  max-width: var(--vs-container-max-width);
  margin: 0;
  padding: 4px 12px 6px 12px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
}

/* ========== 大屏幕样式（> 1200px时容器居中，内容靠左） ========== */
@media (min-width: 1201px) {
  .vs-top-bar-container {
    margin: 0 auto; /* 容器居中 */
    padding: 0; /* 容器内内容靠左 */
  }
  
  .vs-secondary-nav-wrapper {
    margin: 0 auto; /* 容器居中 */
    padding: 0; /* 容器内内容靠左 */
  }
  
  .default-level3-preview,
  .vs-default-level3-preview {
    margin: 0 auto;
    padding: 4px 0 6px 0;
  }
}

.vs-default-level3-item:hover {
  background: var(--vs-color-bg-lighter);
  border-color: var(--vs-video-color-primary);
  transform: translateY(-1px) scale(1.02);
}

.vs-default-level3-item.active {
  background: #ff9999;
  border-color: #ff9999;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 153, 153, 0.35);
  transform: translateY(-1px);
}

.vs-default-level3-item.active:hover {
  box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4);
}

.vs-filter-trigger-btn {
  padding: 5px 12px;
  background: var(--vs-video-color-primary);
  color: #2a2a2a;
  border: 1px solid var(--vs-video-color-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  box-sizing: border-box;
}

.vs-filter-trigger-btn:hover {
  background: var(--vs-video-color-primary-hover);
  border-color: var(--vs-video-color-primary-hover);
  transform: translateY(-1px);
}

.vs-filter-trigger-btn:active {
  transform: scale(0.95);
}

/* ========== 筛选面板样式 ========== */
/* ID选择器保持原样，但添加变量 */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* 增强遮罩透明度 */
  backdrop-filter: blur(4px); /* 添加模糊效果 */
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--vs-z-index-overlay);
  transition: opacity var(--vs-transition-normal);
  opacity: 0;
}

#overlay.show {
  opacity: 1;
}

#filterPopup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--vs-color-bg-white);
  border-radius: 20px 20px 0 0; /* 更大的圆角 */
  z-index: var(--vs-z-index-filter-popup);
  max-height: 75vh; /* 稍微增加高度 */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 -8px 40px rgba(0, 0, 0, 0.2); /* 增强阴影 */
  transform: translateY(100%); /* 初始位置在屏幕外 */
  transition: transform var(--vs-transition-normal) cubic-bezier(0.4, 0, 0.2, 1); /* 平滑动画 */
}

#filterPopup.show {
  transform: translateY(0); /* 滑入显示 */
}

/* 顶部拖拽指示条 */
#filterPopup::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: var(--vs-color-border);
  border-radius: 2px;
  opacity: 0.6;
}

.vs-filter-popup-header {
  padding: 12px 16px; /* 优化：从lg减少到12px 16px */
  border-bottom: 1px solid var(--vs-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--vs-color-bg-white);
  position: sticky;
  top: 0;
  z-index: 1;
}

.vs-filter-popup-title {
  font-size: 16px; /* 优化：从md减少到16px */
  font-weight: var(--vs-font-weight-bold);
  color: var(--vs-color-text-primary);
  letter-spacing: 0.3px; /* 减小字间距 */
}

/* ========== 支付弹窗样式 ========== */
#payPopupOverlay {
  display: none; /* 默认隐藏，显示时改为flex */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--vs-z-index-pay-popup);
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

#payPopupOverlay[style*="display: flex"],
#payPopupOverlay.show {
  display: flex !important; /* 显示时使用flex布局居中 */
}

#payPopup {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;
}

#pay-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  padding: 0;
  transition: color 0.2s;
}

#pay-popup-close:hover {
  color: #fff;
}

/* ========== 公告弹窗样式 ========== */
#announcement-overlay {
  display: none; /* 默认隐藏，显示时改为flex */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--vs-z-index-announcement);
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

#announcement-overlay[style*="display: flex"],
#announcement-overlay.show {
  display: flex !important; /* 显示时使用flex布局居中 */
}

#announcement-popup {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 0;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#announcement-popup .announcement-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#announcement-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#announcement-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  padding: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}

#announcement-close:hover {
  color: #fff;
}

#announcement-content {
  padding: 20px 16px;
  overflow-y: auto;
  flex: 1;
  color: #ccc;
  line-height: 1.6;
  font-size: 15px;
  min-height: 0;
}

#announcement-popup .announcement-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: #2a2a2a;
}

#announcement-popup .announcement-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

#announcement-popup .announcement-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  flex: 1;
  min-width: 0;
}

#announcement-dont-show {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

#announcement-confirm {
  padding: 10px 20px;
  background: #4a9eff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

#announcement-confirm:hover {
  background: #5aaeff;
}

.vs-filter-popup-close {
  width: 28px; /* 减小尺寸 */
  height: 28px;
  border: none;
  background: var(--vs-color-bg-lighter);
  border-radius: var(--vs-radius-circle);
  cursor: pointer;
  font-size: 18px; /* 优化：从16px增加到18px */
  color: var(--vs-color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s; /* 优化：从fast改为0.15s */
  position: relative;
}

.vs-filter-popup-close:hover {
  background: var(--vs-video-color-primary);
  color: var(--vs-color-text-primary);
  transform: scale(1.1) rotate(90deg); /* 旋转动画 */
}

.vs-filter-popup-close:active {
  transform: scale(0.95) rotate(90deg);
}

.vs-filter-categories-container {
  padding: 20px; /* 增加内边距，避免华为浏览器显示拥挤 */
  max-height: calc(75vh - 60px); /* 调整最大高度，适配更小的标题栏 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--vs-color-border) var(--vs-color-bg-white);
}

.vs-filter-categories-container::-webkit-scrollbar {
  width: 6px;
}

.vs-filter-categories-container::-webkit-scrollbar-track {
  background: var(--vs-color-bg-white);
}

.vs-filter-categories-container::-webkit-scrollbar-thumb {
  background: var(--vs-color-border);
  border-radius: 3px;
}

.vs-filter-categories-container::-webkit-scrollbar-thumb:hover {
  background: var(--vs-video-color-primary);
}

.vs-filter-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vs-filter-item {
  /* 复用顶部导航的基础样式 */
  padding: 3px 8px;
  font-size: 12px;
  min-height: 22px;
  border-radius: 6px;
  background: var(--vs-color-bg-light);
  border: 1px solid var(--vs-color-border);
  
  /* 保留筛选面板特有的布局属性 */
  text-decoration: none;
  color: var(--vs-color-text-primary);
  font-weight: 400;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  
  /* 筛选面板特有的间距（换行布局需要） */
  margin-right: 4px;
  margin-bottom: 4px;
}

.vs-filter-item span {
  display: inline-block;
}

.vs-filter-item .anti-ocr-canvas {
  display: inline-block;
  height: auto;
  vertical-align: middle;
}

/* 复用顶部导航的 hover 效果 */
.vs-filter-item:hover {
  background: var(--vs-color-bg-lighter);
  border-color: var(--vs-video-color-primary);
  color: var(--vs-video-color-primary);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 2px 8px rgba(255, 204, 204, 0.3);
}

/* 复用顶部导航的 active 效果 */
.vs-filter-item.active {
  background: #ff9999;
  border-color: #ff9999;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 153, 153, 0.35);
  transform: translateY(-1px);
}

.vs-filter-item.active:hover {
  box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4);
  transform: translateY(-1px) scale(1.02);
}

/* ========== 移动端搜索样式 ========== */
@media (max-width: 768px) {
  /* 防止移动端水平滚动，确保 sticky 正常工作 */
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body,
  .vs-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 确保所有容器不会超出视口 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* 确保所有导航容器不会超出视口 */
  .vs-top-bar,
  .vs-top-bar-container,
  .vs-secondary-nav,
  .vs-secondary-nav-wrapper,
  .vs-secondary-nav-container,
  .vs-level3-nav-section,
  .vs-default-level3-preview,
  .vs-main-content,
  .vs-site-main {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 导航容器的横向滚动只影响自身，不影响页面 */
  .vs-secondary-nav-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .vs-secondary-nav-container::-webkit-scrollbar {
    display: none;
    height: 2px !important; /* 更精细的滚动条 */
  }
  
  .vs-default-level3-preview {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .vs-default-level3-preview::-webkit-scrollbar {
    display: none;
    height: 2px !important; /* 更精细的滚动条 */
  }
  
  /* 移动端隐藏 mega menu */
  .nav-mega-menu {
    display: none !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  /* 确保导航栏在移动端也保持固定 */
  /* 使用更强的选择器和 !important 确保优先级 */
  body .vs-header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--vs-z-index-top-bar) !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  body .vs-top-bar {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important; /* 与PC端一致：2px */
  }
  
  body .vs-nav-section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* 确保 main-content 有足够的 padding-top 避免内容被导航栏遮挡 */
  body .vs-main-content {
    /* padding-top 由 JavaScript 动态设置 */
    position: relative !important;
  }
  
  .vs-nav-sticky-container {
    width: 100% !important;
    border-top: none !important; /* 移除顶部横切线 */
    border: none !important; /* 移除所有边框 */
  }
  
  /* 确保 main-content 不影响 sticky，但禁止横向滚动 */
  .vs-main-content {
    overflow-x: hidden !important; /* 禁止横向滚动 */
    overflow-y: visible !important;
  }
  
  /* 确保所有主要容器禁止横向滚动 */
  .vs-site-main,
  .vs-video-site-main,
  .vs-video-content,
  .vs-user-content-wrapper,
  .vs-user-page-container {
    overflow-x: hidden !important;
    overflow-y: visible;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 禁止整个页面的横向滑动 */
  html,
  body,
  .vs-body {
    touch-action: pan-y; /* 只允许垂直滑动，禁止横向滑动 */
  }
  
  /* 主要容器禁止横向滑动 */
  .vs-main-content,
  .vs-site-main,
  .vs-video-content,
  .vs-user-content-wrapper {
    touch-action: pan-y; /* 只允许垂直滑动 */
  }
}

.mobile-search-overlay,
.vs-mobile-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vs-color-overlay);
  z-index: var(--vs-z-index-mobile-search-overlay);
}

.mobile-search-popup,
.vs-mobile-search-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--vs-color-bg-white);
  padding: var(--vs-spacing-sm) var(--vs-spacing-md);
  z-index: var(--vs-z-index-mobile-search-popup);
  box-shadow: var(--vs-shadow-md);
}

.mobile-search-popup.show,
.vs-mobile-search-popup.show {
  display: block;
}

.mobile-search-container,
.vs-mobile-search-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-search-input,
.vs-mobile-search-input {
  flex: 1;
  padding: var(--vs-spacing-sm) var(--vs-spacing-md);
  border: 1px solid var(--vs-color-border);
  border-radius: var(--vs-radius-input);
  font-size: var(--vs-font-size-md);
  outline: none;
}

.mobile-search-cancel,
.vs-mobile-search-cancel {
  padding: var(--vs-spacing-xs) var(--vs-spacing-sm);
  background: transparent;
  border: none;
  color: var(--vs-video-color-primary);
  font-size: var(--vs-font-size-md);
  cursor: pointer;
}

/* ========== 搜索历史样式 ========== */

/* PC端搜索下拉框 */
/* 使用fixed定位，脱离头部容器的堆叠上下文，确保显示在导航栏之上 */
.vs-search-dropdown {
  position: fixed; /* 改为fixed，脱离backdrop-filter创建的堆叠上下文 */
  /* top 和 left 值由JS动态计算（基于搜索框位置） */
  width: auto; /* 宽度由JS动态设置，匹配搜索框宽度 */
  min-width: 300px; /* 最小宽度 */
  max-width: var(--vs-search-max-width); /* 最大宽度 */
  background: var(--vs-color-bg-white);
  border: 1px solid var(--vs-color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--vs-z-index-dropdown); /* 使用变量，确保层级正确 */
  padding: 16px;
}

/* 确保搜索框容器在导航栏之上（头部容器内的层级关系） */
.vs-header-container .vs-top-search {
  position: relative;
  z-index: 10; /* 搜索框容器在导航栏之上 */
}

/* 移动端搜索建议区域 */
.vs-search-suggestions {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 16px;
  background: var(--vs-color-bg-white);
}

/* 搜索区块 */
.vs-search-section {
  margin-bottom: 20px;
}

.vs-search-section:last-child {
  margin-bottom: 0;
}

.vs-search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vs-search-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--vs-color-text-secondary);
}

.vs-search-clear-btn {
  background: none;
  border: none;
  color: var(--vs-color-text-tertiary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.vs-search-clear-btn:hover {
  background: var(--vs-color-bg-lighter);
  color: var(--vs-color-text-primary);
}

/* 标签容器（搜索历史） */
.vs-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 搜索历史标签包装器 */
.vs-search-tag-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.vs-search-tag {
  display: inline-block;
  padding: 6px 12px;
  padding-right: 28px;
  background: var(--vs-color-bg-lighter);
  border: 1px solid var(--vs-color-border);
  border-radius: 16px;
  font-size: 13px;
  color: var(--vs-color-text-primary);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.vs-search-tag:hover {
  background: var(--vs-video-color-primary);
  border-color: var(--vs-video-color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* 删除按钮 */
.vs-search-tag-delete {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  opacity: 0.7;
}

.vs-search-tag-wrapper:hover .vs-search-tag-delete {
  opacity: 1;
  background: rgba(0, 0, 0, 0.4);
}

.vs-search-tag-delete:hover {
  background: rgba(255, 0, 0, 0.6) !important;
  opacity: 1;
}

/* 空状态提示 */
.vs-search-empty {
  text-align: center;
  padding: 12px 0;
  color: var(--vs-color-text-tertiary);
  font-size: 13px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .vs-search-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 20px 20px 0 0;
    margin-top: 0;
  }
  
  .vs-search-tag {
    font-size: 12px;
    padding: 5px 10px;
    padding-right: 26px; /* 为删除按钮留出空间 */
  }
  
  .vs-search-tag-delete {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    right: 5px;
  }
}

/* ========== 视频列表样式 ========== */
.vod-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--vs-video-list-min-width), 1fr));
  gap: 10px;                      /* 减小间距：从20px改为10px */
  padding: var(--vs-spacing-lg) 0;
}

.vod-item {
  border: 1px solid var(--vs-color-border-lighter);
  border-radius: var(--vs-video-item-border-radius);
  overflow: hidden;
  transition: transform var(--vs-transition-fast);
}

.vod-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--vs-shadow-lg);
}

.vod-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.vod-cover {
  width: 100%;
  /* 高度由 JavaScript 根据分类比例动态设置 */
  background: var(--vs-color-bg-lighter);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.vod-cover canvas {
  display: block;
  /* 尺寸完全由 JavaScript 的 style.width 和 style.height 控制，避免与 CSS 冲突 */
}

.vod-info {
  padding: var(--vs-spacing-sm) var(--vs-spacing-sm) 0 var(--vs-spacing-sm);  /* 上、右、左：10px，下：0 */
}

.vod-title {
  margin: 0;                      /* 无外边距，紧挨上下 */
  padding-left: 0;                /* 紧挨左边 */
  font-size: 14px;                /* 字体大小：14px */
  font-weight: var(--vs-font-weight-medium);
  white-space: normal;            /* 允许换行 */
  word-wrap: break-word;          /* 允许单词内换行 */
  line-height: 1.4;               /* 行高 */
  color: var(--vs-color-text-primary); /* 白色文字 */
}

.vod-title canvas {
  max-width: 100%;
  height: auto;
}

.vod-remarks {
  font-size: var(--vs-font-size-xs);
  color: var(--vs-color-text-tertiary);
}

/* ========== 加载和错误状态 ========== */
.loading-state, .error-state, .empty-state {
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  text-align: center;
  color: var(--vs-color-text-secondary);
}

.loading-state {
  color: var(--vs-color-text-tertiary);
}

.error-state {
  color: var(--vs-color-error);
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.error-message {
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--vs-color-text-primary);
  line-height: 1.5;
}

.error-action {
  margin-top: 20px;
}

.retry-btn {
  padding: 10px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.retry-btn:hover {
  background: #0056b3;
}

.retry-btn:active {
  background: #004085;
}

.empty-state {
  color: #909399;
}

/* ========== 播放器相关样式 ========== */
/* VideoJS 播放器容器 */
.video-js {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ========== 播放器样式（初始化 - 暂时注释，使用 VideoJS 默认样式） ========== */
/* 以下样式已注释，用于一步步调试 */

/*
.video-js .vjs-control-bar {
  // 控制栏样式
}

.video-js .vjs-big-play-button {
  // 大播放按钮样式
}

.video-js .vjs-progress-control {
  // 进度条容器样式
}

.video-js .vjs-progress-holder {
  // 进度条轨道样式
}

.video-js .vjs-control {
  // 控制按钮样式
}

.video-js .vjs-volume-control {
  // 音量控制样式
}

.video-js .vjs-fullscreen-control {
  // 全屏按钮样式
}

.video-js .vjs-playback-rate {
  // 播放速度控制样式
}
*/

/* ========== 分页样式 ========== */
.pagination,
.vs-video-pagination {
  margin-top: 0 !important; /* 紧挨视频列表 */
  text-align: center;
  padding-top: 20px !important;
  /* 当有底部导航时，添加足够的底部间距避免被遮挡 */
  /* 分页器底部padding + body底部padding = 总间距，确保分页器文字在底部导航上方 */
  padding-bottom: calc(20px + var(--vs-bottom-nav-height)) !important; /* 20px基础 + 60px导航高度 = 80px */
}

/* 如果有底部导航，强制应用底部间距 */
body.has-bottom-nav .pagination,
body.has-bottom-nav .vs-video-pagination {
  padding-bottom: calc(20px + var(--vs-bottom-nav-height)) !important; /* 80px */
}

/* 如果没有底部导航，使用默认底部间距 */
body:not(.has-bottom-nav) .pagination,
body:not(.has-bottom-nav) .vs-video-pagination {
  padding-bottom: 20px !important;
}

.pagination a, .pagination span,
.vs-video-pagination a, .vs-video-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid var(--vs-color-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--vs-color-text-primary);
  background: var(--vs-color-bg-body);
  transition: all 0.2s;
}

.pagination a:hover,
.vs-video-pagination a:hover {
  background: var(--vs-color-bg-lighter);
  border-color: var(--vs-video-color-primary);
  color: var(--vs-video-color-primary);
}

/* .pagination .active 样式已移除 - 新分页器不再显示页码列表 */

.pagination .disabled,
.vs-video-pagination .disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== 分页器新样式（上一页 1/200 下一页 [输入框]跳转） ========== */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-info {
  padding: 8px 14px;
  color: var(--vs-color-text-primary);
  font-weight: 500;
}

.page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-jump-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--vs-color-border);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  background: var(--vs-color-bg-body);
  color: var(--vs-color-text-primary);
  transition: border-color 0.2s;
  /* 移除 number 输入框的增减按钮 */
  -moz-appearance: textfield;
}

.page-jump-input::-webkit-inner-spin-button,
.page-jump-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-jump-input:focus {
  outline: none;
  border-color: var(--vs-video-color-primary);
}

.page-jump-btn {
  padding: 6px 14px;
  border: 1px solid var(--vs-video-color-primary);
  border-radius: 4px;
  background: var(--vs-video-color-primary);
  color: #000000;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  font-weight: 500;
}

.page-jump-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.page-jump-btn:active {
  transform: translateY(0);
}

/* ========== Mega Menu 大屏弹窗式导航菜单样式 ========== */
.site-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vs-color-border-lighter);
  margin-bottom: 16px;
  background: var(--vs-color-bg-body);
}

.header-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 一级菜单 */
.nav-menu-level1 {
  position: relative;
  display: inline-block;
}

.nav-menu-level1-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 15px;
  font-weight: 500;
}

.nav-menu-level1-link:hover {
  background-color: var(--vs-color-bg-lighter);
  color: var(--vs-video-color-primary);
}

.nav-submenu-indicator {
  font-size: 10px;
  margin-left: 4px;
  color: var(--vs-color-text-tertiary);
  transition: transform 0.2s;
}

.nav-menu-level1:hover .nav-submenu-indicator {
  transform: rotate(180deg);
}

.nav-menu-text {
  display: inline-flex;
  align-items: center;
}

.nav-menu-text canvas {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.nav-separator {
  margin: 0 4px;
  color: #ccc;
  flex-shrink: 0;
}

.nav-home,
.nav-user {
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.nav-home:hover,
.nav-user:hover {
  background-color: #f5f5f5;
}

.nav-error {
  color: #999;
  font-size: 14px;
}

.site-main {
  width: 100%;
  max-width: var(--vs-container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ========== PC端 Mega Menu 弹窗样式 ========== */
.nav-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--vs-color-bg-body);
  border: 1px solid var(--vs-color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 600px;
  max-width: 900px;
  padding: 0;
  display: none;
  z-index: 1000;
  margin-top: 8px;
  overflow: hidden;
}

.nav-menu-level1:hover .nav-mega-menu {
  display: flex;
}

/* 左侧：二级菜单列 */
.mega-menu-level2-column {
  width: 180px;
  background: #fafafa;
  border-right: 1px solid #e8e8e8;
  padding: 12px 0;
  max-height: 500px;
  overflow-y: auto;
}

.mega-menu-level2-item {
  padding: 0;
}

.mega-menu-level2-link {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--vs-color-text-primary);
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.mega-menu-level2-link:hover,
.mega-menu-level2-item.active .mega-menu-level2-link {
  background-color: var(--vs-color-bg-lighter);
  border-left-color: #1890ff;
  color: var(--vs-video-color-primary);
}

/* 右侧：三级菜单多列区域 */
.mega-menu-level3-area {
  flex: 1;
  padding: 16px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

.mega-menu-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.mega-menu-level3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  column-gap: 16px;
}

.mega-menu-level3-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega-menu-level3-link {
  display: block;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--vs-color-text-secondary);
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-menu-level3-link:hover {
  background-color: #f0f0f0;
  color: #ffcccc;
}

/* ========== 响应式样式 ========== */
@media (max-width: 768px) {
  .top-bar,
  .vs-top-bar {
    padding: 6px 0 !important; /* 优化：从12px减少到6px，更紧凑 */
    position: sticky !important;
    top: 0 !important;
    z-index: var(--vs-z-index-top-bar) !important;
    line-height: 1.6 !important;
    border-bottom: 1px solid var(--vs-color-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; /* 优化：更精细的阴影 */
  }
  
  .top-bar-container,
  .vs-top-bar-container {
    padding: 0 10px !important; /* 优化：从12px减少到10px */
    gap: 8px !important; /* 优化：从md(15px)减少到8px */
    justify-content: flex-start;
    line-height: 1 !important;
    margin: 0 !important;
  }
  
  /* 移动端隐藏 PC 端的搜索框 */
  .vs-top-search {
    display: none !important;
  }
  
  /* 移动端隐藏 PC 端的个人中心、APP下载（不在 top-bar-right-group 内的） */
  .vs-top-bar-container > .vs-top-actions {
    display: none !important;
  }
  
  /* 移动端显示右侧组合按钮组 */
  .top-bar-right-group {
    display: flex !important;
    align-items: center;
    gap: 6px !important; /* 优化：从10px减少到6px */
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* 移动端显示右侧组合按钮组内的搜索按钮 */
  .top-bar-right-group .mobile-search-btn {
    display: flex !important;
  }
  
  /* 移动端显示右侧组合按钮组内的个人中心、APP下载 */
  .top-bar-right-group .vs-top-actions {
    display: flex !important;
    gap: 6px !important; /* 优化：从10px减少到6px */
  }
  
  .vs-top-logo {
    padding: 4px 8px !important; /* 添加内边距 */
  }
  
  .vs-logo-icon {
    height: 28px !important; /* 优化：从32px减少到28px，更精致 */
    width: auto !important; /* 宽度自适应 */
  }
  
  .mobile-search-btn {
    display: flex !important;
    width: 32px !important; /* 优化：从40px减少到32px，更精致 */
    height: 32px !important;
    border: 1.5px solid var(--vs-color-border) !important; /* 添加边框 */
    background: var(--vs-color-bg-lighter) !important;
    border-radius: var(--vs-radius-md) !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important; /* 优化：从18px减少到14px */
    cursor: pointer;
    padding: 0 !important;
  }
  
  .mobile-search-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
  }
  
  .vs-top-action-btn {
    flex-shrink: 0 !important;
    transition: all 0.15s !important; /* 优化：从fast改为0.15s */
    box-sizing: border-box !important; /* 确保边框包含在宽度内，防止华为浏览器重叠 */
    margin-right: 6px !important; /* 优化：从10px减少到6px */
  }
  
  .vs-top-action-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
  }
  
  .mobile-search-btn:hover {
    background: var(--vs-color-bg-hover) !important;
    border-color: var(--vs-video-color-primary) !important;
    transform: scale(1.05) !important;
  }
  
  .vs-top-action-btn {
    width: 32px !important; /* 优化：从40px减少到32px */
    height: 32px !important;
    font-size: 14px !important; /* 优化：从16px减少到14px */
    border: 1.5px solid var(--vs-color-border) !important; /* 添加边框 */
    border-radius: var(--vs-radius-md) !important;
    box-sizing: border-box !important; /* 确保边框包含在宽度内，防止华为浏览器重叠 */
    margin-right: 6px !important; /* 优化：从10px减少到6px */
  }
  
  .vs-top-action-btn:last-child {
    margin-right: 0 !important; /* 最后一个按钮不需要右边距 */
  }
  
  .vs-secondary-nav {
    -webkit-overflow-scrolling: touch;
    line-height: 1.5 !important; /* 调整行高 */
  }
  
  .vs-secondary-nav-wrapper {
    padding: 0 0px !important; /* 优化：从0改为0 10px */
    margin: 0 !important; /* 靠左对齐 */
    border-top: none !important; /* 移除顶部横切线 */
  }
  
  /* 移动端三级导航preview也靠左对齐 */
  .default-level3-preview,
  .vs-default-level3-preview {
    margin: 0 !important;
    gap: 4px !important;
    padding: 4px 8px 6px 8px !important;
  }
  
  .vs-secondary-nav-container {
    gap: 0 !important; /* 移除gap，使用边框分隔 */
    padding: 0 !important; /* 移除上下padding */
    border: 1px solid var(--vs-color-border) !important; /* 外边框 */
    border-radius: 6px !important;
    align-items: stretch !important; /* 让所有项目等高 */
  }
  
  .vs-secondary-nav-item {
    padding: 8px 8px !important; /* 减少左右间距：从14px改为8px */
    font-size: 14px !important;
    min-height: 36px !important;
    border-radius: 0 !important; /* 移除圆角，表格样式 */
    margin-right: 0 !important; /* 移除margin */
    margin-left: 0 !important;
    border-right: 1px solid var(--vs-color-border) !important; /* 右边框分隔 */
    background: var(--vs-color-bg-body) !important;
    transition: all 0.2s ease !important;
  }
  
  /* 第一个和最后一个项目的圆角处理 */
  .vs-secondary-nav-item:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
  }
  
  .vs-secondary-nav-item:last-child {
    margin-right: 0 !important;
    border-right: none !important; /* 最后一个不需要右边框 */
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }
  
  /* 激活状态 - 移动端表格样式（高亮边框） */
  .vs-secondary-nav-item.active {
    background: transparent !important; /* 透明背景 */
    border: 2px solid var(--vs-video-color-primary) !important; /* 高亮边框 */
    border-right: 2px solid var(--vs-video-color-primary) !important;
    color: var(--vs-video-color-primary) !important; /* 主题色文字 */
    font-weight: 600 !important; /* 加粗字体 */
    box-shadow: 0 2px 8px rgba(255, 204, 204, 0.3) !important;
    transform: none !important;
    z-index: 1 !important;
  }
  
  .vs-secondary-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -2px;
    right: -2px;
    height: 3px;
    background: var(--vs-video-color-primary);
    border-radius: 0;
    z-index: -1;
  }
  
  .vs-secondary-nav-item.active:hover {
    background: transparent !important;
    box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4) !important;
  }
  
  .vs-secondary-nav-item:hover {
    transform: none !important; /* 移除位移效果 */
  }
  
  .vs-default-level3-item {
    padding: 3px 8px !important;
    font-size: 12px !important;
    min-height: 22px !important;
    border-radius: 6px !important;
    border: 1px solid var(--vs-color-border) !important;
    margin-right: 4px !important;
    margin-left: 0 !important;
    transition: all 0.2s ease !important;
  }
  
  .vs-default-level3-item:last-child,
  .vs-filter-trigger-btn:last-child {
    margin-right: 0 !important;
  }
  
  .vs-secondary-nav-item span,
  .vs-default-level3-item span {
    display: inline-block;
  }
  
  /* 移动端Canvas样式保持一致 */
  .vs-secondary-nav-item canvas,
  .vs-default-level3-item canvas,
  .vs-secondary-nav-item .anti-ocr-canvas,
  .vs-default-level3-item .anti-ocr-canvas {
    width: auto !important; /* 确保宽度自适应 */
    height: auto !important; /* 确保高度自适应 */
    max-width: none !important; /* 移除最大宽度限制 */
  }
  
  .bottom-nav {
    height: 60px !important;
    gap: 0 !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
  
  .bottom-nav-item {
    flex: 1 !important;
    padding: 8px 4px !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    max-width: none !important;
  }
  
  .bottom-nav-item-icon {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  
  .bottom-nav-item-text {
    font-size: 12px !important;
  }
  
  .vs-filter-popup-header {
    padding: 10px 14px !important; /* 优化：从lg减少到10px 14px */
  }
  
  .vs-filter-popup-title {
    font-size: 15px !important; /* 优化：从md减少到15px */
  }
  
  .vs-filter-popup-close {
    width: 28px !important; /* 减小移动端尺寸 */
    height: 28px !important;
    font-size: 16px !important; /* 优化：从20px减少到16px */
  }
  
  .vs-filter-categories-container {
    padding: 16px !important; /* 增加内边距，避免华为浏览器显示拥挤 */
    max-height: calc(75vh - 70px); /* 调整最大高度 */
  }
  
  .vs-filter-categories {
    gap: 4px !important;
  }
  
  .vs-filter-item {
    padding: 3px 8px !important;
    font-size: 12px !important;
    min-height: 22px !important;
    border-radius: 6px !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
  }
  
  .vs-filter-trigger-btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    min-height: 26px !important;
    margin-right: 6px !important;
    margin-left: 0 !important;
  }
  
  /* 视频列表在移动端 */
  .vod-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 12px 0;
  }
  
  .vod-cover {
    /* 移除 min-height，高度完全由 JavaScript 根据比例动态设置 */
  }
  
  /* Mega Menu 移动端样式 */
  .site-header {
    padding: 10px 12px;
  }
  
  .header-container {
    gap: 6px;
  }
  
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
  }
  
  .nav-menu-level1 {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  
  .nav-menu-level1-link {
    width: 100%;
    padding: 14px 16px;
    justify-content: space-between;
    font-size: 15px;
  }
  
  /* 移动端：手风琴式展开 */
  .nav-menu-level2-container {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: #f9f9f9;
    padding: 0;
    margin-top: 0;
  }
  
  .nav-menu-level1.active .nav-menu-level2-container {
    display: block;
  }
  
  .nav-menu-level2 {
    border-top: 1px solid #eee;
  }
  
  .nav-menu-level2-link {
    padding: 12px 16px 12px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }
  
  /* 移动端三级菜单：2列网格显示 */
  .nav-menu-level3-container {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: #f5f5f5;
    padding: 8px;
    margin-left: 0;
  }
  
  .nav-menu-level2.active .nav-menu-level3-container {
    display: block;
  }
  
  .nav-menu-level3-grid-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .nav-menu-level3-link {
    padding: 8px 12px;
    font-size: 13px;
    background: var(--vs-color-bg-body);
    border-radius: 4px;
    text-align: center;
    border: 1px solid var(--vs-color-border-lighter);
  }
  
  .nav-menu-level3-link:hover {
    background-color: var(--vs-color-bg-lighter);
    border-color: var(--vs-video-color-primary);
  }
  
  .nav-separator {
    display: none;
  }
  
  .nav-home,
  .nav-user {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .site-main {
    padding: 0 12px;
  }
}

@media (max-width: 480px) {
  .top-bar-container,
  .vs-top-bar-container {
    padding: 0 8px !important; /* 优化：从10px减少到8px */
    gap: 6px !important; /* 优化：从sm(10px)减少到6px */
    margin: 0 !important;
  }
  
  .vs-top-logo {
    padding: 4px 6px !important; /* 超小屏稍微减少内边距 */
  }
  
  .vs-logo-icon {
    height: 24px !important; /* 优化：从28px减少到24px */
    width: auto !important; /* 宽度自适应 */
  }
  
  .mobile-search-btn,
  .vs-top-action-btn {
    width: 28px !important; /* 优化：从36px减少到28px */
    height: 28px !important;
    font-size: 12px !important; /* 优化：从16px减少到12px */
    border: 1.5px solid var(--vs-color-border) !important;
    border-radius: var(--vs-radius-md) !important;
    box-sizing: border-box !important; /* 确保边框包含在宽度内，防止华为浏览器重叠 */
  }
  
  .mobile-search-btn {
    margin-right: 6px !important; /* 优化：从10px减少到6px */
  }
  
  .vs-top-action-btn {
    margin-right: 6px !important; /* 优化：从10px减少到6px */
  }
  
  .vs-top-action-btn:last-child {
    margin-right: 0 !important; /* 最后一个按钮不需要右边距 */
  }
  
  .vs-secondary-nav-wrapper {
    padding: 0 0px !important; /* 优化：从0改为0 8px */
    margin: 0 !important; /* 靠左对齐 */
    border-top: none !important; /* 移除顶部横切线 */
  }
  
  .default-level3-preview,
  .vs-default-level3-preview {
    margin: 0 !important;
    gap: 3px !important;
    padding: 3px 6px 5px 6px !important;
  }
  
  .vs-secondary-nav-container {
    gap: 0 !important; /* 移除gap，使用边框分隔 */
    padding: 0 !important; /* 移除上下padding */
    border: 1px solid var(--vs-color-border) !important; /* 外边框 */
    border-radius: 6px !important;
    align-items: stretch !important; /* 让所有项目等高 */
  }
  
  .vs-secondary-nav-item {
    padding: 6px 6px !important; /* 减少左右间距：从12px改为6px */
    font-size: 13px !important;
    min-height: 32px !important;
    border-radius: 0 !important; /* 移除圆角，表格样式 */
    margin-right: 0 !important; /* 移除margin */
    margin-left: 0 !important;
    border-right: 1px solid var(--vs-color-border) !important; /* 右边框分隔 */
    background: var(--vs-color-bg-body) !important;
  }
  
  /* 第一个和最后一个项目的圆角处理 */
  .vs-secondary-nav-item:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
  }
  
  .vs-secondary-nav-item:last-child {
    margin-right: 0 !important;
    border-right: none !important; /* 最后一个不需要右边框 */
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }
  
  /* 激活状态 - 小屏幕表格样式（高亮边框） */
  .vs-secondary-nav-item.active {
    background: transparent !important; /* 透明背景 */
    border: 2px solid var(--vs-video-color-primary) !important; /* 高亮边框 */
    border-right: 2px solid var(--vs-video-color-primary) !important;
    color: var(--vs-video-color-primary) !important; /* 主题色文字 */
    font-weight: 600 !important; /* 加粗字体 */
    box-shadow: 0 2px 8px rgba(255, 204, 204, 0.3) !important;
    transform: none !important;
    z-index: 1 !important;
  }
  
  .vs-secondary-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -2px;
    right: -2px;
    height: 3px;
    background: var(--vs-video-color-primary);
    border-radius: 0;
    z-index: -1;
  }
  
  .vs-secondary-nav-item.active:hover {
    background: transparent !important;
    box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4) !important;
  }
  
  .vs-secondary-nav-item:hover {
    transform: none !important; /* 移除位移效果 */
  }
  
  .vs-secondary-nav-item:last-child {
    margin-right: 0 !important;
  }
  
  .vs-default-level3-item {
    padding: 3px 8px !important;
    font-size: 11px !important;
    min-height: 20px !important;
    border-radius: 6px !important;
    margin-right: 3px !important;
    margin-left: 0 !important;
  }
  
  .vs-default-level3-item:last-child,
  .vs-filter-trigger-btn:last-child {
    margin-right: 0 !important;
  }
  
  .bottom-nav {
    justify-content: space-between !important;
    padding: 0 !important;
  }
  
  .bottom-nav-item {
    flex: 1 !important;
    max-width: none !important;
  }
  
  .bottom-nav-item-icon {
    font-size: 22px !important;
  }
  
  .bottom-nav-item-text {
    font-size: 12px !important;
  }
  
  .vs-filter-item {
    padding: 3px 8px !important;
    font-size: 11px !important;
    min-height: 20px !important;
    border-radius: 6px !important;
    margin-right: 3px !important;
    margin-bottom: 3px !important;
    margin-left: 0 !important;
  }
  
  .vs-filter-trigger-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 24px !important;
    margin-right: 5px !important;
    margin-left: 0 !important;
  }
  
  .filter-item {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  /* Mega Menu 超小屏幕样式 */
  .site-header {
    padding: 8px 10px;
  }
  
  .nav-menu-level1-link {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .nav-menu-level2-link {
    padding: 10px 14px 10px 28px;
    font-size: 13px;
  }
  
  .nav-menu-level3-grid-mobile {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .nav-menu-level3-link {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .nav-home,
  .nav-user {
    padding: 4px 8px;
    font-size: 13px;
  }
  
  .vod-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .vod-cover {
    /* 移除 min-height，高度完全由 JavaScript 根据比例动态设置 */
  }
}




/* ============================================================================
   区域二：视频模块样式 (app.css)
   ============================================================================ */

/* ============================================
   VideoSystem App CSS - 视频模块样式
   使用命名空间 .vs-video- 前缀避免冲突
   ============================================ */

/* 基础样式已在 common.css 中定义，这里只保留视频相关样式 */

/* ========== 视频列表样式 ========== */
.vs-video-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 全站统一 4 列 */
  gap: 10px;                      /* 减小间距：从20px改为10px */
  padding: 2px 0 0 0; /* padding-top: 2px，移除左右和底部padding */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* >992px：保持4列 */
@media (min-width: 992px) {
  .vs-video-list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 768px < x < 992px：3列 */
@media (min-width: 768px) and (max-width: 991px) {
  .vs-video-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 360px < x < 768px：2列 */
@media (min-width: 360px) and (max-width: 767px) {
  .vs-video-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--vs-spacing-sm);
  }
}

/* <360px：1列 */
@media (max-width: 359px) {
  .vs-video-list {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: var(--vs-spacing-sm);
  }
}

.vs-video-item {
  border: 1px solid var(--vs-color-border-lighter);
  border-radius: var(--vs-video-item-border-radius);
  overflow: hidden;
  transition: transform var(--vs-transition-fast);
}

.vs-video-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--vs-shadow-lg);
}

.vs-video-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.vs-video-cover {
  width: 100%;
  background: var(--vs-color-bg-lighter);
  overflow: hidden;
  position: relative; /* 改为relative以支持绝对定位的canvas */
  display: block; /* 改为block */
}

/* 全站固定 1:1（含不支持 aspect-ratio 的回退） */
.vs-video-item .vs-video-cover {
  padding-top: 100%;
  height: 0;
}

@supports (aspect-ratio: 1 / 1) {
  .vs-video-item .vs-video-cover {
    aspect-ratio: 1 / 1;
    padding-top: 0;
    height: auto;
  }
}


/* Canvas 绝对定位填充容器，尺寸由CSS控制 */
.vs-video-cover canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0;
  padding: 0;
}

.vs-video-info {
  /* padding: var(--vs-spacing-sm) var(--vs-spacing-sm) 0 var(--vs-spacing-sm);   上、右、左：10px，下：0 */
  padding: var(--vs-spacing-xs) 0 0 0;
}

.vs-video-title {
  margin: 0;                      /* 无外边距，紧挨上下 */
  padding-left: 0;                /* 紧挨左边 */
  font-size: 12px;                /* 字体大小：14px */
  font-weight: var(--vs-font-weight-medium);
  display: -webkit-box;           /* 使用 flexbox 布局 */
  -webkit-box-orient: vertical;   /* 垂直方向 */
  -webkit-line-clamp: 2;         /* 最多显示两行 */
  line-clamp: 2;                 /* 标准属性，兼容性更好 */
  overflow: hidden;               /* 隐藏溢出 */
  word-wrap: break-word;          /* 允许单词内换行 */
  line-height: 1.4;              /* 行高 */
  color: var(--vs-color-text-primary); /* 文字颜色 */
}

.vs-video-title canvas {
  max-width: 100%;
  height: auto;
  display: block;                  /* 确保Canvas是块级元素 */
  margin: 0 !important;            /* 添加：强制移除外边距 */
  padding: 0 !important;           /* 添加：强制移除内边距 */
}

.vs-video-remarks {
  font-size: var(--vs-font-size-xs);
  color: var(--vs-color-text-tertiary);
}

/* 视频元信息（分类名称、观看时间等） */
.vs-video-meta {
  font-size: var(--vs-font-size-xs);
  color: var(--vs-color-text-secondary); /* 浅灰色 #e0e0e0，介于视频名称和观看时间之间 */
  margin-top: 4px;
}

/* 观看时间使用更暗的颜色 */
.vs-video-meta.vs-video-meta-time {
  color: #999999; /* 与原来的 #999 保持一致 */
}

/* 加载和错误状态 */
.vs-video-loading-state,
.vs-video-error-state,
.vs-video-empty-state {
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  text-align: center;
  color: var(--vs-color-text-secondary);
}

.vs-video-loading-state {
  color: var(--vs-color-text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.vs-video-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--vs-color-primary, #1890ff);
  border-radius: 50%;
  animation: vs-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes vs-spin {
  to { transform: rotate(360deg); }
}

.vs-video-loading-text {
  font-size: 14px;
  color: var(--vs-color-text-tertiary);
}

.vs-video-error-state {
  position: absolute; /* 绝对定位，填充整个#player容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 填充父容器的100%高度 */
  color: var(--vs-color-error);
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.vs-video-empty-state {
  color: var(--vs-color-text-tertiary);
}

/* ========== Mega Menu 大屏弹窗式导航菜单样式 ========== */
.site-header,
.vs-video-site-header {
  padding: var(--vs-spacing-sm) var(--vs-spacing-md);
  border-bottom: 1px solid var(--vs-color-border-lighter);
  margin-bottom: var(--vs-spacing-md);
  background: var(--vs-color-bg-white);
}

.header-container,
.vs-video-header-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--vs-container-max-width);
  margin: 0 auto;
}

.nav-menu,
.vs-video-nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 一级菜单 */
.nav-menu-level1,
.vs-video-nav-menu-level1 {
  position: relative;
  display: inline-block;
}

.nav-menu-level1-link,
.vs-video-nav-menu-level1-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px var(--vs-spacing-sm);
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
  font-size: 15px;
  font-weight: var(--vs-font-weight-medium);
}

.nav-menu-level1-link:hover,
.vs-video-nav-menu-level1-link:hover {
  background-color: var(--vs-color-bg-lighter);
  color: var(--vs-video-color-primary);
}

.nav-submenu-indicator,
.vs-video-nav-submenu-indicator {
  font-size: 10px;
  margin-left: var(--vs-spacing-xs);
  color: var(--vs-color-text-tertiary);
  transition: transform var(--vs-transition-fast);
}

.nav-menu-level1:hover .nav-submenu-indicator,
.vs-video-nav-menu-level1:hover .vs-video-nav-submenu-indicator {
  transform: rotate(180deg);
}

.nav-menu-text,
.vs-video-nav-menu-text {
  display: inline-flex;
  align-items: center;
}

.nav-menu-text canvas,
.vs-video-nav-menu-text canvas {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.nav-separator,
.vs-video-nav-separator {
  margin: 0 var(--vs-spacing-xs);
  color: #ccc;
  flex-shrink: 0;
}

.nav-home,
.nav-user,
.vs-video-nav-home,
.vs-video-nav-user {
  text-decoration: none;
  color: inherit;
  padding: var(--vs-spacing-xs) 8px;
  border-radius: var(--vs-radius-sm);
  transition: background-color var(--vs-transition-fast);
  white-space: nowrap;
}

.nav-home:hover,
.nav-user:hover,
.vs-video-nav-home:hover,
.vs-video-nav-user:hover {
  background-color: var(--vs-color-bg-lighter);
}

.nav-error,
.vs-video-nav-error {
  color: var(--vs-color-text-tertiary);
  font-size: var(--vs-font-size-sm);
}

.site-main,
.vs-site-main,
.vs-video-site-main {
  width: 100%;
  max-width: var(--vs-container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 1px; /* 只保留左右padding，移除顶部padding，让视频列表紧贴三级导航 */
  box-sizing: border-box;
  overflow-x: hidden; /* 禁止横向滚动 */
  overflow-y: visible;
}

/* ========== PC端 Mega Menu 弹窗样式 ========== */
.nav-mega-menu,
.vs-video-nav-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--vs-color-bg-white);
  border: 1px solid var(--vs-color-border);
  border-radius: var(--vs-radius-md);
  box-shadow: var(--vs-shadow-lg);
  min-width: 600px;
  max-width: 900px;
  padding: 0;
  display: none;
  z-index: var(--vs-z-index-overlay);
  margin-top: 8px;
  overflow: hidden;
}

/* 移动端隐藏 mega menu（使用手风琴式菜单） */
@media (max-width: 768px) {
  .nav-mega-menu,
  .vs-video-nav-mega-menu {
    display: none !important;
    min-width: auto;
    max-width: 100%;
  }
}

.nav-menu-level1:hover .nav-mega-menu,
.vs-video-nav-menu-level1:hover .vs-video-nav-mega-menu {
  display: flex;
}

/* 左侧：二级菜单列 */
.mega-menu-level2-column,
.vs-video-mega-menu-level2-column {
  width: 180px;
  background: var(--vs-color-bg-light);
  border-right: 1px solid var(--vs-color-border);
  padding: var(--vs-spacing-sm) 0;
  max-height: 500px;
  overflow-y: auto;
}

.mega-menu-level2-item,
.vs-video-mega-menu-level2-item {
  padding: 0;
}

.mega-menu-level2-link,
.vs-video-mega-menu-level2-link {
  display: block;
  padding: var(--vs-spacing-sm) var(--vs-spacing-md);
  text-decoration: none;
  color: var(--vs-color-text-primary);
  transition: all var(--vs-transition-fast);
  border-left: 3px solid transparent;
}

.mega-menu-level2-link:hover,
.mega-menu-level2-item.active .mega-menu-level2-link,
.vs-video-mega-menu-level2-link:hover,
.vs-video-mega-menu-level2-item.active .vs-video-mega-menu-level2-link {
  background-color: var(--vs-color-bg-white);
  border-left-color: var(--vs-video-color-primary);
  color: var(--vs-video-color-primary);
}

/* 右侧：三级菜单多列区域 */
.mega-menu-level3-area,
.vs-video-mega-menu-level3-area {
  flex: 1;
  padding: var(--vs-spacing-md);
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

.mega-menu-placeholder,
.vs-video-mega-menu-placeholder {
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  text-align: center;
  color: var(--vs-color-text-tertiary);
  font-size: var(--vs-font-size-sm);
}

.mega-menu-level3-grid,
.vs-video-mega-menu-level3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  column-gap: var(--vs-spacing-md);
}

.mega-menu-level3-column,
.vs-video-mega-menu-level3-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega-menu-level3-link,
.vs-video-mega-menu-level3-link {
  display: block;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--vs-color-text-secondary);
  font-size: 13px;
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-menu-level3-link:hover,
.vs-video-mega-menu-level3-link:hover {
  background-color: #f0f0f0;
  color: var(--vs-video-color-primary);
}

/* ========== 移动端样式 ========== */
@media (max-width: 768px) {
  /* 防止移动端水平滚动 */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  .site-header,
  .vs-video-site-header {
    padding: var(--vs-spacing-sm) var(--vs-spacing-sm);
  }
  
  .header-container,
  .vs-video-header-container {
    gap: 6px;
  }
  
  .nav-menu,
  .vs-video-nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vs-color-border-lighter);
  }
  
  .nav-menu-level1,
  .vs-video-nav-menu-level1 {
    width: 100%;
    border-bottom: 1px solid var(--vs-color-border-lighter);
  }
  
  .nav-menu-level1-link,
  .vs-video-nav-menu-level1-link {
    width: 100%;
    padding: 14px var(--vs-spacing-md);
    justify-content: space-between;
    font-size: 15px;
  }
  
  /* 移动端：手风琴式展开 */
  .nav-menu-level2-container,
  .vs-video-nav-menu-level2-container {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: #f9f9f9;
    padding: 0;
    margin-top: 0;
  }
  
  .nav-menu-level1.active .nav-menu-level2-container,
  .vs-video-nav-menu-level1.active .vs-video-nav-menu-level2-container {
    display: block;
  }
  
  .nav-menu-level2,
  .vs-video-nav-menu-level2 {
    border-top: 1px solid var(--vs-color-border-lighter);
  }
  
  .nav-menu-level2-link,
  .vs-video-nav-menu-level2-link {
    padding: var(--vs-spacing-sm) var(--vs-spacing-md) var(--vs-spacing-sm) 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--vs-font-size-sm);
  }
  
  /* 移动端三级菜单：2列网格显示 */
  .nav-menu-level3-container,
  .vs-video-nav-menu-level3-container {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: var(--vs-color-bg-lighter);
    padding: 8px;
    margin-left: 0;
  }
  
  .nav-menu-level2.active .nav-menu-level3-container,
  .vs-video-nav-menu-level2.active .vs-video-nav-menu-level3-container {
    display: block;
  }
  
  .nav-menu-level3-grid-mobile,
  .vs-video-nav-menu-level3-grid-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .nav-menu-level3-link,
  .vs-video-nav-menu-level3-link {
    padding: 8px var(--vs-spacing-sm);
    font-size: 13px;
    background: var(--vs-color-bg-white);
    border-radius: var(--vs-radius-sm);
    text-align: center;
    border: 1px solid var(--vs-color-border-lighter);
  }
  
  .nav-menu-level3-link:hover,
  .vs-video-nav-menu-level3-link:hover {
    background-color: #f0f0f0;
    border-color: var(--vs-video-color-primary);
  }
  
  .nav-separator,
  .vs-video-nav-separator {
    display: none;
  }
  
  .nav-home,
  .nav-user,
  .vs-video-nav-home,
  .vs-video-nav-user {
    padding: 6px var(--vs-spacing-sm);
    font-size: var(--vs-font-size-sm);
  }
  
  .site-main,
  .vs-site-main,
  .vs-video-site-main {
    padding: 0 1px; /* 只保留左右padding，移除顶部padding */
  }
  
  /* 视频列表在移动端 - 已由上面的媒体查询处理，这里只调整padding */
  .vs-video-list {
    padding: 2px 0 0 0 !important; /* padding-top: 2px，移除左右和底部padding */
  }

}

/* 超小屏幕（手机竖屏） */
@media (max-width: 480px) {
  .site-header,
  .vs-video-site-header {
    padding: 8px var(--vs-spacing-sm);
  }
  
  .nav-menu-level1-link,
  .vs-video-nav-menu-level1-link {
    padding: var(--vs-spacing-sm) 14px;
    font-size: var(--vs-font-size-sm);
  }
  
  .nav-menu-level2-link,
  .vs-video-nav-menu-level2-link {
    padding: var(--vs-spacing-sm) 14px var(--vs-spacing-sm) 28px;
    font-size: 13px;
  }
  
  .nav-menu-level3-grid-mobile,
  .vs-video-nav-menu-level3-grid-mobile {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .nav-menu-level3-link,
  .vs-video-nav-menu-level3-link {
    padding: var(--vs-spacing-sm) var(--vs-spacing-sm);
    font-size: var(--vs-font-size-xs);
  }
  
  .nav-home,
  .nav-user,
  .vs-video-nav-home,
  .vs-video-nav-user {
    padding: var(--vs-spacing-xs) 8px;
    font-size: 13px;
  }
  
  /* 视频列表列数已由上面的媒体查询处理（360px-767px: 2列，<360px: 1列） */

  .vod-cover,
  .vs-video-cover {
    min-height: unset; /* 移除 min-height，高度由 JS 动态设置 */
  }
}

/* ========== 视频页面容器样式 ========== */
.vs-video-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2px 0 0 0; /* padding-top: 2px，移除左右和底部padding */
  overflow-x: hidden; /* 禁止横向滚动 */
  overflow-y: visible;
}

@media (max-width: 768px) {
  .vs-video-content {
    padding: 2px 0 0 0; /* padding-top: 2px，移除左右和底部padding */
  }
}

@media (max-width: 480px) {
  .vs-video-content {
    padding: 2px 0 0 0; /* padding-top: 2px，移除左右和底部padding */
  }
}

/* ========== 视频详情页样式 ========== */
.vs-video-detail-container {
  max-width: var(--vs-container-max-width, 1200px);
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ========== 播放器容器 ========== */
/* 播放器容器 - 使用 padding-top 技巧保持 16:9 宽高比 */
#player {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 10px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  box-sizing: border-box;
  /* 使用 padding-top 技巧作为 aspect-ratio 的后备方案（华为浏览器兼容） */
  padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
  height: 0; /* 关键：设置高度为0，让padding-top生效 */
  z-index: 1;
  isolation: isolate;
}

/* 播放器封面样式（用于VIP提示时显示封面，使用Canvas渲染） */
.vs-video-player-poster-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 如果支持 aspect-ratio，使用它（更现代） */
@supports (aspect-ratio: 16 / 9) {
  #player {
    padding-top: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* VideoJS 播放器样式 - 填充容器 */
#player .video-js {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  outline: none !important;
  border: none !important;
}

/* DPlayer 播放器样式 - 填充容器 */
#player .dplayer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 移除所有 VideoJS 元素的焦点边框 */
#player .video-js:focus,
#player .video-js:focus-within,
#player .video-js *:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 移除控制按钮的焦点边框 */
#player .video-js .vjs-control:focus,
#player .video-js .vjs-play-control:focus,
#player .video-js .vjs-button:focus,
#player .video-js button:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 移除自定义样式，使用 VideoJS 默认样式 */

/* 全屏时的播放器样式 - 尽量让原生全屏功能处理 */
.video-js.vjs-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  background-color: #000 !important;
  outline: none !important; /* 移除焦点轮廓 */
  border: none !important; /* 移除边框 */
}

/* 移除全屏模式下所有元素的焦点边框 */
.video-js.vjs-fullscreen:focus,
.video-js.vjs-fullscreen:focus-within,
.video-js.vjs-fullscreen *:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 移除全屏模式下控制按钮的焦点边框 */
.video-js.vjs-fullscreen .vjs-control:focus,
.video-js.vjs-fullscreen .vjs-play-control:focus,
.video-js.vjs-fullscreen .vjs-button:focus,
.video-js.vjs-fullscreen button:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.video-js.vjs-fullscreen .vjs-tech,
.video-js.vjs-fullscreen video {
  /* 不强制 object-fit，让原生全屏功能处理 */
  width: 100% !important;
  height: 100% !important;
}

/* 横屏视频全屏时的样式优化 */
body.video-landscape .video-js.vjs-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  outline: none !important;
  border: none !important;
}

/* 竖屏视频全屏时的样式优化 */
body.video-portrait .video-js.vjs-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  outline: none !important;
  border: none !important;
}

/* 方案3：横屏视频全屏旋转样式（CSS类控制）- 已禁用，使用方案V1 */
/*
.video-js.vjs-fullscreen.vjs-rotated-landscape {
  transform: rotate(90deg) scale(var(--rotate-scale, 1.714)) !important;
  transform-origin: center center !important;
  width: 100vw !important;
  height: 100vh !important;
}

.video-js.vjs-fullscreen.vjs-rotated-landscape video,
.video-js.vjs-fullscreen.vjs-rotated-landscape .vjs-tech {
  transform: none !important;
  transform-origin: unset !important;
}
*/

/* ========== 播放器控制栏样式（初始化 - 使用 VideoJS 默认样式） ========== */
/* 暂时注释掉所有自定义样式，使用 VideoJS 默认样式进行调试 */

/*
#player .video-js .vjs-control-bar {
  // 控制栏样式
}

#player .video-js .vjs-progress-control {
  // 进度条容器样式
}

#player .video-js .vjs-progress-holder {
  // 进度条轨道样式
}

#player .video-js .vjs-control {
  // 控制按钮样式
}
*/

/* 大播放按钮 */
#player .video-js .vjs-big-play-button {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  transition: all 0.3s;
}

#player .video-js .vjs-big-play-button:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: #007bff;
  transform: scale(1.1);
}

/* 视频信息区域 */
.vs-video-detail-info {
  background: transparent; /* 改为透明，与页面背景一致 */
  border-radius: 8px;
  padding: 0; /* 从 20px 改为 0，紧贴内部元素 */
  margin-bottom: 10px;
  box-shadow: none; /* 移除阴影 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========== VIP提示区域（独立显示，不覆盖播放器） ========== */
.vs-video-vip-notice-area {
  width: 100%;
  margin: 12px 0;
  box-sizing: border-box;
}

.vs-video-vip-notice-compact {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, rgba(255, 87, 87, 0.15) 0%, rgba(255, 51, 102, 0.1) 100%);
  border: 1px solid rgba(255, 87, 87, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.vs-video-vip-notice-compact:hover {
  background: linear-gradient(135deg, rgba(255, 87, 87, 0.2) 0%, rgba(255, 51, 102, 0.15) 100%);
  border-color: rgba(255, 87, 87, 0.4);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.vs-video-vip-notice-text {
  flex: 1;
  min-width: 0;
}

.vs-video-vip-notice-title-compact {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.4;
}

.vs-video-vip-notice-subtitle {
  font-size: 12px;
  color: #e0e0e0;
  line-height: 1.4;
  margin-bottom: 0; /* 基础为0，移动端会覆盖 */
}

.vs-vip-free-link {
  color: #2de209;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.vs-vip-free-link:hover {
  color: #3fff1a;
  text-decoration: underline;
}

.vs-video-vip-notice-buttons-compact {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.vs-video-vip-btn-compact {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
  display: block; /* 改为 block，确保在flex容器中正确工作 */
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 添加 margin 作为 gap 的降级方案（兼容不支持 gap 的浏览器） */
  margin-right: 10px;
}

/* 最后一个按钮不需要右边距 */
.vs-video-vip-notice-buttons-compact > .vs-video-vip-btn-compact:last-child {
  margin-right: 0;
}

.vs-video-vip-btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.vs-video-vip-btn-compact:active {
  transform: translateY(0);
}

.vs-video-vip-btn-primary {
  background: linear-gradient(135deg, #ff5757 0%, #ff3366 100%);
  color: #ffffff;
}

.vs-video-vip-btn-primary:hover {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4477 100%);
}

.vs-video-vip-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.vs-video-vip-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 视频名称 */
.vs-video-detail-name {
  font-size: 14px; /* 从 20px 改为 14px */
  font-weight: bold;
  color: #ffffff; /* 改为白色 */
  margin: 0 0 12px 0;
  min-height: 28px;
}

/* 分类信息容器 */
.vs-video-detail-category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  justify-content: space-between;
}

/* 操作图标按钮行（靠右排列，固定间隔） */
.vs-video-action-icons-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px; /* 按钮之间间隔 */
  margin-top: 0;
  flex-wrap: nowrap;
  width: auto;
  margin-left: 0;
  min-width: auto;
  overflow: visible;
}

/* 分类信息 */
.vs-video-detail-category {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #ffffff; /* 改为白色 */
  flex: 1;
}

.vs-video-category-label {
  min-height: 20px;
  font-size: 14px;
}

.vs-video-category-name {
  color: #ffcccc; /* 改为浅色链接色 */
  text-decoration: none;
  min-height: 20px;
  cursor: pointer;
  font-size: 14px;
}

.vs-video-category-name:hover {
  text-decoration: underline;
  color: #ffd6d6; /* hover时使用更亮的颜色 */
}

/* 分类信息中的canvas垂直对齐 - 补偿底部多余的padding */
.vs-video-category-label canvas,
.vs-video-category-name canvas {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: -13px; /* 补偿bottomPadding (0.5 + 2) */
}

/* 操作图标按钮（固定宽度，无分割线） */
.vs-video-action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  flex: 0 0 26px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 第一个按钮不需要左边距 */
.vs-video-action-icon-btn:first-child {
  margin-left: 0;
}

.vs-video-action-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.vs-video-action-icon-btn:focus,
.vs-video-action-icon-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.vs-video-action-icon-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}

.vs-video-action-icon-btn:active {
  transform: translateY(0);
}

.vs-action-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
}

.vs-action-icon-filled {
  display: none;
}

.vs-video-action-icon-btn.active .vs-action-icon-outline {
  display: none;
}

.vs-video-action-icon-btn.active .vs-action-icon-filled {
  display: inline-block;
}

/* 移动端优化（保持靠右，固定间隔 - 使用margin确保兼容性） */
@media (max-width: 768px) {
  .vs-video-action-icons-row {
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
    padding: 0;
    min-width: min-content;
  }
  
  .vs-video-action-icon-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    margin-left: 12px;
    flex: 0 0 26px;
    flex-shrink: 0;
  }
  
  .vs-video-action-icon-btn:first-child {
    margin-left: 0;
  }
  
  .vs-action-icon {
    width: 22px;
    height: 22px;
  }
}

/* 超小屏幕优化（保持靠右，固定间隔） */
@media (max-width: 375px) {
  .vs-video-action-icons-row {
    gap: 10px;
    padding: 0;
    min-width: min-content;
  }
  
  .vs-video-action-icon-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    margin-left: 10px;
    flex: 0 0 26px;
    flex-shrink: 0;
  }
  
  .vs-video-action-icon-btn:first-child {
    margin-left: 0;
  }
  
  .vs-action-icon {
    width: 22px;
    height: 22px;
  }
}

/* 推荐视频列表样式 */
.vs-video-recommend-section {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.vs-video-recommend-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--vs-color-text-primary); /* 改为白色，与整体主题一致 */
  margin-bottom: 0;
  padding-bottom: 0;
  min-height: 28px;
  width: 100%;
  box-sizing: border-box;
}

/* 推荐视频列表去掉上边距，紧贴标题 */
.vs-video-recommend-section .vs-video-list {
  padding-top: 0;
}

/* VIP提示样式 - 精简版（移除overlay和content层） */
.vs-video-vip-notice {
  position: absolute; /* 绝对定位，填充整个#player容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 填充父容器的100%高度 */
  color: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  box-sizing: border-box;
  /* 华为浏览器兼容：确保有最小高度 */
  min-height: 300px;
  /* 使用flex布局，让内容居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

/* VIP提示背景图片 - 使用Canvas渲染（包含遮罩效果） */
.vs-video-vip-notice-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none !important; /* 不阻挡点击事件，强制生效 */
  touch-action: none; /* 移动端不响应触摸事件 */
}

/* 内容元素直接作为vip层的子元素 */
.vs-video-vip-notice-icon {
  position: relative;
  z-index: 10 !important; /* 提高z-index，确保在Canvas之上 */
  font-size: 48px;
  margin-bottom: 15px;
  pointer-events: auto; /* 确保可以交互 */
}

.vs-video-vip-notice-title {
  position: relative;
  z-index: 10 !important;
  font-size: 24px;
  color: #2de209;
  font-weight: bold;
  margin-bottom: 10px;
  pointer-events: auto;
}

.vs-video-vip-notice-message {
  position: relative;
  z-index: 10 !important;
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.9;
  pointer-events: auto;
}

.vs-video-vip-notice-buttons {
  position: relative;
  z-index: 10 !important;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  pointer-events: auto;
}

.vs-video-vip-btn {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.vs-video-vip-btn-primary {
  background: #fff;
  color: #667eea;
}

.vs-video-vip-btn-primary:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vs-video-vip-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: #000000;
  border: 2px solid #ffffff ;
}

.vs-video-vip-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========== 搜索结果页样式 ========== */
.vs-video-search-content .vs-nav-section,
.search-content .vs-nav-section {
  display: none;
}

.search-content,
.vs-video-search-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2px 0 0 0;
  background: var(--vs-color-bg-body);
  box-sizing: border-box;
}

.search-header,
.vs-video-search-header {
  margin-bottom: 20px;
  padding: 0 2px 12px 2px;
  border-bottom: 1px solid #eee;
}

.search-keyword,
.vs-video-search-keyword {
  font-size: 18px;
  font-weight: 600;   /* 更柔和的粗细 */
  color: #cfd8dc;     /* 文案提亮，区分关键词 */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.search-keyword-label {
  color: #cfd8dc;
}

.search-keyword-sep {
  display: inline-block;
  width: 8px;
}

.search-keyword-text,
.vs-video-search-keyword-text {
  color: #ff6b6b;     /* 保持关键词原有颜色 */
}

.search-result-count,
.vs-video-search-result-count {
  color: #b0bec5;     /* 比原 #666 更柔和 */
}

/* 全屏搜索条件弹窗 */
.vs-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  /* 防止部分安卓 WebView 把 fixed 当普通块排布 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.vs-search-overlay.show {
  display: flex;
}

.vs-search-overlay-inner {
  width: 100%;
  max-width: var(--vs-container-max-width, 1200px);
  height: 100%;
  max-height: 100vh;
  background: #0b0b0f;
  overflow-y: auto;
  position: relative;
}

.vs-search-condition-content {
  padding: 12px 16px 20px;
}

/* 弹窗打开时锁定背景滚动 */
body.vs-search-overlay-open {
  overflow: hidden;
}

/* 搜索条件弹窗头部 */
.vs-search-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0b0b0f;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.vs-search-back-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 4px 6px;
}

.vs-search-page-form {
  display: flex;
  flex: 1;
  gap: 6px;
}

.vs-search-page-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 16px;
  border: none;
  background: #1a1a1f;
  color: #fff;
  font-size: 14px;
}

.vs-search-page-submit {
  padding: 6px 12px;
  border-radius: 16px;
  border: none;
  background: #10f0bf;
  color: #000;
  font-weight: 600;
  font-size: 14px;
}

/* 搜索历史紧凑样式 */
.vs-search-history-compact {
  padding: 6px 0 0;
  margin-bottom: 8px;
}

.vs-search-section-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.vs-search-section-title-compact {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}

.vs-search-clear-btn-compact {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  padding: 2px 4px;
}

.vs-search-tags-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vs-search-tags-compact .vs-search-tag-wrapper {
  padding: 1px 4px 1px 6px;
  border-radius: 12px;
}

.vs-search-tags-compact .vs-search-tag {
  font-size: 10px;
}

.vs-search-tags-compact .vs-search-tag-delete {
  font-size: 10px;
  margin-left: 2px;
}

/* 搜索条件模块区域通用 */
.vs-search-section {
  padding: 10px 0 0;
}

/* Tabs */
.vs-search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 12px;
}

.vs-search-tab {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.vs-search-tab.active {
  color: #10f0bf;
  border-bottom-color: #10f0bf;
}

.vs-search-tab-content {
  position: relative;
  min-height: 220px;
}

.vs-search-tab-pane {
  display: none;
}

.vs-search-tab-pane.active {
  display: block;
}

/* 关键字区域网格 */
.vs-search-keyword-section {
  margin-bottom: 16px;
}

.vs-search-subtitle {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

.vs-search-keyword-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}

.vs-search-keyword-item {
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.vs-search-keyword-item:hover {
  background: rgba(255,255,255,0.1);
}

/* 分类索引区域 */
.vs-search-category-index {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vs-search-category-index-header {
  position: sticky;
  top: 0;
  background: #0b0b0f;
  padding: 8px 0;
  z-index: 10;
}

.vs-search-category-index-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 从 4px 改为 6px，增加 2px */
  justify-content: center;
}

.vs-search-category-index-letter {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 13px; /* 从 11px 改为 13px，增加 2 号 */
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}

.vs-search-category-index-letter.active {
  background: #10f0bf;
  color: #000;
}

/* 移动端索引字符样式优化 */
@media (max-width: 768px) {
  .vs-search-category-index-letters {
    gap: 8px !important; /* 移动端增加间距，防止粘连 */
  }
  
  .vs-search-category-index-letter {
    width: 28px !important; /* 增加宽度，容纳更大的字体 */
    height: 28px !important;
    line-height: 28px !important;
    margin: 2px !important; /* 添加 margin 确保间距 */
  }
}

@media (max-width: 480px) {
  .vs-search-category-index-letters {
    gap: 6px !important; /* 小屏幕保持较小间距 */
  }
  
  .vs-search-category-index-letter {
    width: 26px !important; /* 小屏幕稍微减小 */
    height: 26px !important;
    line-height: 26px !important;
    margin: 1px !important;
  }
}

.vs-search-category-index-content {
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
  touch-action: pan-y; /* 允许垂直滚动 */
}

.vs-search-category-group {
  margin-bottom: 16px;
}

.vs-search-category-group-title {
  font-size: 14px;
  color: #10f0bf;
  margin-bottom: 6px;
  padding-left: 4px;
}

.vs-search-category-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}

.vs-search-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vs-search-category-btn {
  border: none;
  border-radius: 16px;
  padding: 4px 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 14px;
}

/* 热搜榜样式 */
.vs-search-hot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vs-search-hot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.hot-rank-num {
  width: 18px;
  text-align: center;
  font-weight: 700;
}

.hot-rank-1 .hot-rank-num { color: #ff4d4f; }
.hot-rank-2 .hot-rank-num { color: #ffa940; }
.hot-rank-3 .hot-rank-num { color: #ffc53d; }

.hot-rank-text {
  color: #fff;
}

/* 数据区域 */
.vs-search-data-sort {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.vs-search-sort-btn {
  padding: 4px 12px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.vs-search-sort-btn.active {
  background: #10f0bf;
  color: #000;
}

.vs-search-data-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.vs-search-data-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.vs-search-data-item:hover {
  background: rgba(255,255,255,0.06);
}

.vs-search-data-item-title {
  flex: 1;
  font-size: 12px;
  color: #fff;
}

.vs-search-data-item-stats {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
}

/* 排行榜标签页样式（与三级导航样式一致） */
.vs-ranking-tabs {
  max-width: var(--vs-container-max-width);
  margin: 0;
  padding: 6px 16px 8px 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  background: var(--vs-color-bg-body);
  -webkit-overflow-scrolling: touch;
}

.vs-ranking-tab-item {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--vs-color-text-primary);
  font-size: 12px;
  font-weight: 400;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--vs-color-bg-light);
  border: 1px solid var(--vs-color-border);
  transition: all 0.2s ease;
  min-height: 26px;
  line-height: 1.3;
  user-select: none;
}

.vs-ranking-tab-item:hover {
  background: var(--vs-color-bg-lighter);
  border-color: var(--vs-video-color-primary);
  transform: translateY(-1px) scale(1.02);
}

.vs-ranking-tab-item.active {
  background: #ff9999;
  border-color: #ff9999;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 153, 153, 0.35);
  transform: translateY(-1px);
  color: #ffffff;
}

.vs-ranking-tab-item.active:hover {
  box-shadow: 0 3px 10px rgba(255, 204, 204, 0.4);
}

/* 大屏幕样式（> 1200px时容器居中，内容靠左） */
@media (min-width: 1201px) {
  .vs-ranking-tabs {
    margin: 0 auto;
    padding: 6px 0 8px 0;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .vs-ranking-tabs {
    padding: 6px 10px 8px 10px;
    gap: 6px;
  }
  
  .vs-ranking-tab-item {
    padding: 5px 12px;
    font-size: 12px;
    min-height: 26px;
  }
}

@media (max-width: 480px) {
  .vs-ranking-tab-item {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 24px;
    margin-right: 5px;
  }
  
  .vs-ranking-tab-item:last-child {
    margin-right: 0;
  }
}

/* ========== 视频详情页响应式样式 ========== */
@media (min-width: 1920px) {
  .vs-video-detail-container {
    max-width: var(--vs-container-max-width, 1200px);
  }
  
  #player {
    max-width: 100%;
  }
}

@media (max-width: 1400px) {
  .vs-video-detail-container {
    max-width: var(--vs-container-max-width, 1200px);
  }
  
  #player {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .vs-video-detail-container {
    padding: 8px;
    max-width: 100%;
  }
  
  #player {
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
    padding-top: 0; /* 移动端使用固定高度，不使用 padding-top */
    height: 50vh; /* 占据屏幕高度的一半 */
    min-height: 200px; /* 最小高度，避免过小 */
    max-height: 50vh; /* 最大高度限制 */
  }
  
  @supports (aspect-ratio: 16 / 9) {
    #player {
      padding-top: 0;
      height: 50vh; /* 移动端使用固定高度 */
      aspect-ratio: unset; /* 取消宽高比限制 */
      min-height: 200px;
      max-height: 50vh;
    }
  }
  
  #player .video-js {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* DPlayer 移动端样式 - 继承PC端样式，无需重复定义 */
  
  /* 移动端样式 - 初始化版本（暂时注释） */
  /*
  #player .video-js .vjs-control-bar {
    // 移动端控制栏样式
  }
  */
  
  /* VIP提示区域移动端样式 */
  .vs-video-vip-notice-area {
    margin: 10px 0;
  }
  
  .vs-video-vip-notice-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px; /* 增加间距，避免文字和按钮重叠 */
    padding: 12px 14px;
  }
  
  .vs-video-vip-notice-text {
    text-align: left;
    width: 100%;
    margin-bottom: 3px; /* 额外增加底部间距 */
  }
  
  .vs-video-vip-notice-title-compact {
    font-size: 14px;
    margin-bottom: 5px; /* 标题和副标题之间增加间距 */
  }
  
  .vs-video-vip-notice-subtitle {
    font-size: 12px;
    margin-bottom: 5px; /* 副标题和按钮之间增加间距，避免重叠 */
  }
  
  .vs-video-vip-notice-buttons-compact {
    width: 100%;
    flex-direction: row;
    gap: 15px;
  }
  
  .vs-video-vip-btn-compact {
    flex: 1;
    padding: 10px 8px;
    font-size: 13px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 添加 margin 作为 gap 的降级方案（匹配 gap: 15px） */
    margin-right: 15px;
  }
  
  /* 最后一个按钮不需要右边距 */
  .vs-video-vip-notice-buttons-compact > .vs-video-vip-btn-compact:last-child {
    margin-right: 0;
  }
  
  .vs-video-detail-info {
    padding: 0; /* 从 16px 改为 0，紧贴内部元素 */
    width: 100%;
    max-width: 100%;
  }
  
  .vs-video-detail-category-row {
    gap: 12px;
  }
  
  .vs-video-detail-category {
    flex: 0 1 auto;
    min-width: 0;
  }
  
  .vs-video-favorite-btn {
    flex-shrink: 0;
    padding: 6px 12px; /* 从 8px 12px 减少到 6px 12px，与PC端一致 */
    white-space: nowrap;
    height: auto; /* 高度自适应 */
  }
  
  .vs-video-recommend-section {
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
  }
  
  .vs-video-recommend-title {
    font-size: 18px;
    width: 100%;
  }
  
  /* VIP提示层响应式：只覆盖需要变化的属性 */
  .vs-video-vip-notice {
    min-height: 200px; /* 移动端最小高度 */
    padding: 20px;
  }
  
  .vs-video-vip-notice-icon {
    font-size: 36px;
    margin-bottom: 10px;
    z-index: 10 !important; /* 确保移动端层级正确 */
  }
  
  .vs-video-vip-notice-title {
    font-size: 20px;
    z-index: 10 !important;
  }
  
  .vs-video-vip-notice-message {
    font-size: 14px;
    margin-bottom: 15px;
    z-index: 10 !important;
  }
  
  .vs-video-vip-notice-buttons {
    flex-direction: column;
    gap: 10px;
    z-index: 10 !important;
  }
  
  .vs-video-vip-btn {
    width: 100%;
    max-width: 280px;
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .search-content,
  .vs-video-search-content {
    padding: 2px 0 0 0;
  }
  
  .search-keyword,
  .vs-video-search-keyword {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .vs-video-detail-container {
    padding: 4px;
    max-width: 100%;
  }
  
  #player {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 8px;
    padding-top: 0; /* 移动端使用固定高度，不使用 padding-top */
    height: 50vh; /* 占据屏幕高度的一半 */
    min-height: 200px; /* 最小高度，避免过小 */
    max-height: 50vh; /* 最大高度限制 */
  }
  
  @supports (aspect-ratio: 16 / 9) {
    #player {
      padding-top: 0;
      height: 50vh; /* 移动端使用固定高度 */
      aspect-ratio: unset; /* 取消宽高比限制 */
      min-height: 200px;
      max-height: 50vh;
    }
  }
  
  #player .video-js {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* VIP提示区域小屏幕样式 */
  .vs-video-vip-notice-area {
    margin: 8px 0;
  }
  
  .vs-video-vip-notice-compact {
    padding: 10px 12px;
    gap: 12px; /* 增加间距避免重叠 */
  }
  
  .vs-video-vip-notice-text {
    margin-bottom: 2px; /* 额外底部间距 */
  }
  
  .vs-video-vip-notice-title-compact {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .vs-video-vip-notice-subtitle {
    font-size: 11px;
    margin-bottom: 4px; /* 小屏幕也增加底部间距 */
  }
  
  .vs-video-vip-notice-buttons-compact {
    gap: 12px;
  }
  
  .vs-video-vip-btn-compact {
    padding: 8px 6px;
    font-size: 12px;
    /* 添加 margin 作为 gap 的降级方案（匹配 gap: 12px） */
    margin-right: 12px;
  }
  
  /* 最后一个按钮不需要右边距 */
  .vs-video-vip-notice-buttons-compact > .vs-video-vip-btn-compact:last-child {
    margin-right: 0;
  }
  
  .vs-video-detail-info {
    width: 100%;
    max-width: 100%;
  }
  
  .vs-video-detail-name {
    font-size: 14px; /* 从 18px 改为 14px */
  }
  
  .vs-video-detail-category-row {
    gap: 10px;
  }
  
  .vs-video-detail-category {
    flex: 0 1 auto;
    min-width: 0;
  }
  
  .vs-video-favorite-btn {
    flex-shrink: 0;
    padding: 6px 12px; /* 从 8px 12px 减少到 6px 12px，与PC端一致 */
    white-space: nowrap;
    height: auto; /* 高度自适应 */
  }
  
  .vs-video-recommend-section {
    width: 100%;
    max-width: 100%;
  }
  
  /* VIP提示层响应式：只覆盖需要变化的属性 */
  .vs-video-vip-notice {
    min-height: 200px; /* 移动端最小高度 */
    padding: 15px;
  }
  
  .vs-video-vip-notice-icon {
    font-size: 32px;
    z-index: 10 !important;
  }
  
  .vs-video-vip-notice-title {
    font-size: 18px;
    z-index: 10 !important;
  }
  
  .vs-video-vip-notice-message {
    z-index: 10 !important;
  }
  
  .vs-video-vip-notice-buttons {
    z-index: 10 !important;
  }
  
  .search-content,
  .vs-video-search-content {
    padding: 2px 0 0 0;
  }
  
  .search-keyword,
  .vs-video-search-keyword {
    font-size: 14px;
  }
}




/* ============================================================================
   区域三：用户中心模块样式 (user.css)
   ============================================================================ */

/* ============================================
   User模块专用样式 - 按页面分组组织
   使用命名空间 .vs-user- 前缀避免冲突
   变量定义已移至 common.css
   ============================================ */

/* ============================================
   2. 基础重置和全局样式
   ============================================ */
/* 基础重置已在 common.css 中定义 */

/* ============================================
   3. 布局组件
   ============================================ */

/* 顶部导航栏 */
.vs-user-header {
  background: var(--vs-color-bg-white);
  border-bottom: 1px solid var(--vs-color-border);
  padding: var(--vs-spacing-md) var(--vs-spacing-lg);
  position: sticky;
  top: 0;
  z-index: var(--vs-z-index-bottom-nav);
  box-shadow: var(--vs-shadow-sm);
}

.vs-user-header-container {
  max-width: var(--vs-user-page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--vs-spacing-lg);
}

.vs-user-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--vs-color-primary);
  font-size: var(--vs-font-size-xl);
  font-weight: var(--vs-font-weight-bold);
  transition: opacity var(--vs-transition-fast);
}

.vs-user-logo:hover {
  opacity: 0.8;
}

.vs-user-logo canvas {
  display: block;
}

.vs-user-page-title {
  font-size: var(--vs-font-size-lg);
  color: var(--vs-color-text-primary);
  font-weight: var(--vs-font-weight-medium);
  flex: 1;
  text-align: center;
}

.vs-user-page-title canvas {
  display: block;
}

/* 用户内容包装器（统一容器） - 统一全站风格 */
.vs-user-content-wrapper {
  max-width: var(--vs-container-max-width, 1200px); /* 与主站容器宽度一致 */
  margin: 0 auto;
  padding: 0; /* 完全无padding，由内层容器控制间距 */
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* 禁止横向滚动 */
  overflow-y: visible;
}

/* 页面容器 */
.vs-user-page {
  max-width: var(--vs-user-page-max-width);
  margin: 0 auto;
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  min-height: calc(100vh - 80px);
}

/* ============================================
   4. 通用组件样式
   ============================================ */

/* 表单容器（登录、注册、修改密码） - 保持居中卡片样式 */
.vs-user-form-container {
  max-width: var(--vs-user-form-max-width);
  width: 100%;
  margin: 40px auto; /* 上下留间距，保持卡片感 */
  background: var(--vs-color-bg-white);
  border-radius: var(--vs-radius-md); /* 表单页面保持圆角卡片风格 */
  padding: var(--vs-spacing-xl);
  box-shadow: var(--vs-shadow-md); /* 表单页面保持阴影效果 */
}

/* 页面容器（个人中心、收藏、订单、支付） - 统一全站风格 */
.vs-user-page-container {
  background: var(--vs-color-bg-white);
  border-radius: 0; /* 完全无圆角，与主站列表页风格一致 */
  padding: var(--vs-spacing-xl);
  box-shadow: none; /* 移除阴影，使用扁平化设计 */
  border-top: 1px solid rgba(255,255,255,0.06); /* 添加细微顶部边框，增加层次感 */
  min-height: calc(100vh - 60px); /* 至少填满屏幕高度 */
}

/* 页面标题（用于页面内容中的标题，如个人中心、收藏列表等） */
.vs-user-profile-container .vs-user-page-title,
.vs-user-page-container .vs-user-page-title,
.vs-user-form-container .vs-user-page-title {
  font-size: var(--vs-font-size-xxl);
  margin-bottom: var(--vs-spacing-xl);
  text-align: center;
  color: var(--vs-color-text-primary);
  flex: none; /* 覆盖顶部导航栏的 flex: 1 */
}

.vs-user-profile-container .vs-user-page-title canvas,
.vs-user-page-container .vs-user-page-title canvas,
.vs-user-form-container .vs-user-page-title canvas {
  display: block;
  margin: 0 auto;
}

/* 表单组件 */
.vs-user-form-group {
  margin-bottom: var(--vs-spacing-lg);
}

.vs-user-form-label {
  display: block;
  margin-bottom: var(--vs-spacing-sm);
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
}

.vs-user-form-label canvas {
  display: block;
}

.vs-user-form-input {
  width: 100%;
  padding: var(--vs-spacing-sm) 12px;
  border: 1px solid var(--vs-color-border-light);
  border-radius: var(--vs-radius-sm);
  font-size: var(--vs-font-size-sm);
  box-sizing: border-box;
  transition: border-color var(--vs-transition-fast);
}

.vs-user-form-input:focus {
  outline: none;
  border-color: var(--vs-color-primary);
}

.vs-user-form-hint {
  display: block;
  margin-top: var(--vs-spacing-xs);
  font-size: var(--vs-font-size-xs);
  color: var(--vs-color-text-tertiary);
}

/* 复选框样式 */
.vs-user-form-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
}

.vs-user-form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: var(--vs-spacing-sm);
  cursor: pointer;
  accent-color: var(--vs-color-primary);
}

.vs-user-form-checkbox span {
  line-height: 1.5;
}

.vs-user-form-checkbox:hover {
  color: var(--vs-color-text-primary);
}

.vs-user-form-actions {
  margin-top: var(--vs-spacing-xl);
}

/* ============================================
   按钮组件 - 统一美化样式
   ============================================ */

/* 基础按钮样式 */
.vs-user-btn {
  width: 100%;
  padding: 14px var(--vs-spacing-lg);
  border: none;
  border-radius: var(--vs-radius-md);
  font-size: var(--vs-font-size-md);
  font-weight: var(--vs-font-weight-medium);
  cursor: pointer;
  transition: all var(--vs-transition-normal);
  text-align: center;
  box-shadow: var(--vs-shadow-sm);
  position: relative;
  overflow: hidden;
}

.btn::before,
.vs-user-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before,
.vs-user-btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary,
.vs-user-btn-primary {
  background: linear-gradient(135deg, var(--vs-color-primary) 0%, var(--vs-color-primary-hover) 100%);
  color: var(--vs-color-bg-white);
  box-shadow: 0 4px 12px rgba(255, 159, 159, 0.25);
}

.btn-primary:hover,
.vs-user-btn-primary:hover {
  background: linear-gradient(135deg, var(--vs-color-primary-hover) 0%, var(--vs-color-primary) 100%);
  box-shadow: 0 6px 16px rgba(255, 159, 159, 0.3);
  transform: translateY(-2px);
}

.btn-primary:active,
.vs-user-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 159, 159, 0.25);
}

/* 链接按钮（次要操作） */
.vs-user-btn-link {
  display: inline-block;
  text-align: left;
  margin-top: var(--vs-spacing-md);
  padding: var(--vs-spacing-sm) var(--vs-spacing-lg);
  color: var(--vs-color-primary);
  text-decoration: none;
  font-size: var(--vs-font-size-sm);
  font-weight: var(--vs-font-weight-medium);
  background: var(--vs-color-bg-white);
  border: 2px solid var(--vs-color-primary);
  border-radius: var(--vs-radius-md);
  cursor: pointer;
  transition: all var(--vs-transition-normal);
  box-shadow: var(--vs-shadow-sm);
}

.vs-user-btn-link:hover {
  background: var(--vs-color-primary);
  color: var(--vs-color-bg-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 159, 159, 0.25);
}

.vs-user-btn-link:active {
  transform: translateY(0);
  box-shadow: var(--vs-shadow-sm);
}

.btn-link canvas {
  display: inline-block;
  vertical-align: middle;
}

/* 操作链接（个人中心操作按钮） - 现代扁平化风格 */
.vs-user-action-link {
  width: 100%;
  min-width: 120px;
  padding: 16px var(--vs-spacing-lg);
  background: rgba(255,255,255,0.05); /* 微妙的半透明背景 */
  color: var(--vs-color-text-primary);
  text-decoration: none;
  text-align: center;
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
  border: 1px solid rgba(255,255,255,0.08); /* 细微边框 */
  cursor: pointer;
  font-size: var(--vs-font-size-md);
  font-weight: var(--vs-font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; /* 移除阴影，扁平化设计 */
  position: relative;
  box-sizing: border-box;
}

/* 桌面端：保持3列布局 */
@media (min-width: 769px) {
  .vs-user-profile-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vs-user-action-link:hover {
  background: rgba(16,240,191,0.08); /* 主题色悬停效果 */
  color: var(--vs-color-primary);
  border-color: var(--vs-color-primary);
  box-shadow: 0 2px 8px rgba(16,240,191,0.15);
  transform: translateY(-1px);
}

.vs-user-action-link:active {
  background: var(--vs-color-bg-white);
  color: var(--vs-color-text-primary);
  transform: translateY(0);
  box-shadow: var(--vs-shadow-sm);
}

/* 登出按钮（与其他按钮保持一致） */
.vs-user-action-link.logout-btn {
  background: var(--vs-color-bg-white);
  color: var(--vs-color-text-primary);
  border-color: var(--vs-color-primary);
  box-shadow: var(--vs-shadow-sm);
}

.vs-user-action-link.logout-btn:hover {
  background: var(--vs-color-bg-white);
  color: var(--vs-color-text-primary);
  box-shadow: var(--vs-shadow-md);
}

.vs-user-action-link.logout-btn:active {
  background: var(--vs-color-bg-white);
  color: var(--vs-color-text-primary);
  transform: translateY(0);
  box-shadow: var(--vs-shadow-sm);
}

.action-link canvas {
  display: inline-block;
  vertical-align: middle;
}

/* 消息提示组件 */
.vs-user-error-message {
  margin-top: var(--vs-spacing-md);
  padding: var(--vs-spacing-sm);
  background: var(--vs-color-error-bg);
  border: 1px solid var(--vs-color-error-border);
  color: var(--vs-color-error);
  border-radius: var(--vs-radius-sm);
  font-size: var(--vs-font-size-sm);
}

.vs-user-success-message {
  margin-top: var(--vs-spacing-md);
  padding: var(--vs-spacing-sm);
  background: var(--vs-color-success-bg);
  border: 1px solid var(--vs-color-success-border);
  color: var(--vs-color-success);
  border-radius: var(--vs-radius-sm);
  font-size: var(--vs-font-size-sm);
}

/* 状态样式 */
.vs-user-loading-state,
.vs-user-error-state,
.vs-user-empty-state {
  text-align: center;
  padding: var(--vs-spacing-xxl) var(--vs-spacing-lg);
  color: var(--vs-color-text-tertiary);
}

/* 页面操作区域 */
.vs-user-page-actions {
  text-align: left;
  margin-top: var(--vs-spacing-xl);
}

.vs-user-page-actions .vs-user-btn-link {
  display: inline-block;
  padding: 12px 24px;
  color: var(--vs-color-primary);
  text-decoration: none;
  border: 2px solid var(--vs-color-primary);
  border-radius: var(--vs-radius-md);
  transition: all var(--vs-transition-normal);
  margin-top: 0;
  font-weight: var(--vs-font-weight-medium);
  box-shadow: var(--vs-shadow-sm);
  background: var(--vs-color-bg-white);
}

.vs-user-page-actions .vs-user-btn-link:hover {
  background: var(--vs-color-primary);
  color: var(--vs-color-bg-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 159, 159, 0.25);
}

.vs-user-page-actions .vs-user-btn-link:active {
  transform: translateY(0);
  box-shadow: var(--vs-shadow-sm);
}

/* ============================================
   5. 登录页面样式
   关联文件: view/user/login.html
   ============================================ */
/* 登录页面使用通用组件样式，无需额外样式 */

/* ============================================
   6. 注册页面样式
   关联文件: view/user/register.html
   ============================================ */
/* 注册页面使用通用组件样式，无需额外样式 */

/* ============================================
   7. 修改密码页面样式
   关联文件: view/user/changePassword.html
   ============================================ */
/* 修改密码页面使用通用组件样式，无需额外样式 */

/* ============================================
   8. 个人中心页面样式
   关联文件: view/user/profile.html
   ============================================ */
.profile-container,
.vs-user-profile-container {
  background: var(--vs-color-bg-white);
  border-radius: 0; /* 完全无圆角，与主站列表页风格一致 */
  padding: var(--vs-spacing-xl);
  box-shadow: none; /* 移除阴影，使用扁平化设计 */
  border-top: 1px solid rgba(255,255,255,0.06); /* 添加细微顶部边框 */
  min-height: calc(100vh - 60px); /* 至少填满屏幕高度 */
}

.profile-info,
.vs-user-profile-info {
  margin-bottom: var(--vs-spacing-xl);
  padding: var(--vs-spacing-lg);
  background: rgba(255,255,255,0.03); /* 更微妙的半透明背景 */
  border-radius: var(--vs-radius-sm);
  border: 1px solid rgba(255,255,255,0.06); /* 添加细微边框 */
}

.info-item,
.vs-user-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--vs-spacing-md);
  font-size: var(--vs-font-size-sm);
  line-height: 1.5;
  gap: var(--vs-spacing-md);
  min-height: 32px;
}

.info-item:last-child,
.vs-user-info-item:last-child {
  margin-bottom: 0;
}

.info-label,
.vs-user-info-label {
  flex-shrink: 0;
  width: auto;
  color: var(--vs-color-text-secondary);
  text-align: left;
  padding-top: 2px;
  display: flex;
  align-items: center;
}

.info-value,
.vs-user-info-value {
  flex: 0 0 auto;
  color: var(--vs-color-text-primary);
  font-weight: var(--vs-font-weight-medium);
  display: flex;
  align-items: center;
  min-height: 24px;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.info-label canvas,
.vs-user-info-label canvas,
.info-value canvas,
.vs-user-info-value canvas {
  display: block;
  line-height: 1;
  width: auto !important;
  max-width: 100%;
  flex-shrink: 0;
}

/* 修改链接样式 */
#link-change-password {
  color: var(--vs-color-primary);
  text-decoration: none;
  font-size: var(--vs-font-size-sm);
  padding: 4px 12px;
  border: 1px solid var(--vs-color-primary);
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
  background: var(--vs-color-bg-white);
  margin-left: var(--vs-spacing-sm);
  flex-shrink: 0;
}

#link-change-password:hover {
  background: var(--vs-color-primary);
  color: var(--vs-color-bg-white);
  text-decoration: none;
}

.profile-actions,
.vs-user-profile-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vs-spacing-md);
  margin-top: var(--vs-spacing-lg);
  padding: 0; /* 移除内边距，让按钮区域更干净 */
  background: transparent; /* 透明背景 */
  border-radius: 0;
  box-shadow: none;
  /* 兼容性：确保容器有足够空间 */
  min-width: 0;
  overflow: visible;
}

/* ============================================
   9. 收藏列表页面样式（完全复用主站列表页风格）
   关联文件: view/user/favorites.html
   ============================================ */
.favorites-list,
.vs-user-favorites-list,
#favorites-list {
  /* 完全复用 .vs-video-list 的自适应列数（4/3/2/1列） */
  /* 继承 .vs-video-list 的所有布局样式 */
  gap: 10px; /* 与 .vs-video-list 保持一致 */
  margin: 0;
  padding: var(--vs-spacing-lg) 0 var(--vs-spacing-xl) 0; /* 上下留间距 */
  width: 100%;
  max-width: 100%;
}

.favorites-list .loading-state,
.favorites-list .error-state,
.favorites-list .empty-state,
.vs-user-favorites-list .vs-user-loading-state,
.vs-user-favorites-list .vs-user-error-state,
.vs-user-favorites-list .vs-user-empty-state {
  grid-column: 1 / -1;
}

/* 收藏列表项：完全复用 .vs-video-item 默认样式 */
/* 移除所有自定义样式，让收藏列表与主站列表页风格完全一致 */

/* 收藏列表：复用 .vs-video-item 默认样式，移除特殊覆盖 */
/* #favorites-list .vs-video-item-link 继承默认样式 */
/* #favorites-list .vs-video-info 继承默认样式 */
/* #favorites-list .vs-video-title 继承默认样式 */

/* 收藏列表备注样式 */
#favorites-list .vs-video-remarks {
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
  margin-top: var(--vs-spacing-xs);
}

.favorite-item a,
.vs-user-favorite-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.favorite-cover,
.vs-user-favorite-cover {
  width: 100%;
  height: var(--vs-video-cover-height);
  background: var(--vs-color-bg-lighter);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.favorite-cover canvas,
.vs-user-favorite-cover canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-info,
.vs-user-favorite-info {
  padding: var(--vs-spacing-sm);
}

.favorite-title,
.vs-user-favorite-title {
  margin: 0 0 var(--vs-spacing-sm) 0;
  font-size: var(--vs-font-size-md);
  font-weight: var(--vs-font-weight-medium);
  height: 24px;
  overflow: hidden;
}

.favorite-title canvas,
.vs-user-favorite-title canvas {
  max-width: 100%;
  height: auto;
}

.favorite-remarks,
.vs-user-favorite-remarks {
  font-size: var(--vs-font-size-xs);
  color: var(--vs-color-text-tertiary);
}

/* ============================================
   10. 订单记录页面样式
   关联文件: view/user/orders.html
   ============================================ */
.orders-list,
.vs-user-orders-list {
  display: grid;
  grid-template-columns: 1fr; /* 固定1列 */
  gap: var(--vs-spacing-md);
  margin: 0 auto var(--vs-spacing-xl) auto;
  padding: var(--vs-spacing-lg) 0;
  max-width: 800px; /* PC端最大宽度，避免过宽 */
  width: 100%;
}

/* 观看历史列表：完全复用 .vs-video-list 的样式 */
.vs-history-list {
  /* 完全继承 .vs-video-list 的自适应列数和所有样式 */
  padding: var(--vs-spacing-lg) 0 var(--vs-spacing-xl) 0; /* 上下留间距 */
}

.order-item,
.vs-user-order-item {
  padding: var(--vs-spacing-md);
  border: 1px solid var(--vs-color-border);
  border-radius: var(--vs-radius-md);
  background: var(--vs-color-bg-light);
  transition: all var(--vs-transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-item:hover,
.vs-user-order-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--vs-color-primary);
}

.order-item,
.vs-user-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--vs-spacing-md);
  flex-wrap: wrap;
}

.order-code,
.vs-user-order-code {
  font-weight: var(--vs-font-weight-medium);
  color: var(--vs-color-text-primary);
  flex: 1;
  min-width: 0;
}

.order-code canvas,
.vs-user-order-code canvas {
  display: inline-block;
}

.vs-user-order-time {
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
  white-space: nowrap;
}

.vs-user-order-time canvas {
  display: inline-block;
}

.order-money,
.vs-user-order-money {
  font-size: var(--vs-font-size-md);
  font-weight: var(--vs-font-weight-medium);
  color: var(--vs-color-error);
  white-space: nowrap;
}

.order-money canvas,
.vs-user-order-money canvas {
  display: inline-block;
}

/* ============================================
   11. 支付页面样式（用户模块）
   关联文件: view/pay/index.html
   ============================================ */
/* 支付页面容器特殊样式 - 限制最大宽度 */
.pay-page-wrapper,
.vs-user-pay-page-wrapper {
  max-width: 600px;
  padding: var(--vs-spacing-md); /* 缩小外层 padding */
}

.pay-container,
.vs-user-pay-container {
  max-width: 100%;
  padding: var(--vs-spacing-lg); /* 缩小容器 padding: xl -> lg */
  /* padding:1px 20px 20px 20px; */
}

/* 支付页面标题间距缩小 */
.pay-container .vs-user-page-title,
.vs-user-pay-container .vs-user-page-title {
  margin-bottom: var(--vs-spacing-lg); /* 缩小标题下边距: xl -> lg */
}

.pay-options,
.vs-user-pay-options {
  display: grid;
  /* 自适应布局：最小140px，理想22%，最大280px，自动填充 */
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22%, 280px), 1fr));
  gap: 12px;
  margin-bottom: var(--vs-spacing-md);
}

.pay-option,
.vs-user-pay-option {
  padding: var(--vs-spacing-sm);
  border: 2px solid var(--vs-color-border);
  border-radius: var(--vs-radius-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--vs-transition-fast);
  background: var(--vs-color-bg-white);
  box-sizing: border-box;
  min-width: 0; /* 防止内容溢出 */
  position: relative;
}

/* 价值点区（简短、降低疑虑） */
.vs-pay-benefits {
  margin: 0 0 var(--vs-spacing-md);
  padding: var(--vs-spacing-sm) var(--vs-spacing-md);
  border: 1px solid var(--vs-color-border-light);
  border-radius: var(--vs-radius-md);
  background: rgba(255,255,255,0.04);
}

.vs-pay-benefit {
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
  line-height: 1.6;
}

.vs-pay-benefit + .vs-pay-benefit {
  margin-top: 6px;
}

.pay-option:hover,
.vs-user-pay-option:hover {
  border-color: var(--vs-color-primary);
  background: var(--vs-color-primary-lighter);
}

.pay-option.active,
.vs-user-pay-option.active {
  border-color: var(--vs-color-primary);
  background: var(--vs-color-primary-light);
}

.pay-option.active .pay-desc,
.vs-user-pay-option.active .vs-user-pay-desc {
  color: var(--vs-color-primary) !important;
}

.pay-option.active .pay-amount,
.vs-user-pay-option.active .vs-user-pay-amount {
  color: var(--vs-color-primary) !important;
}

.pay-amount,
.vs-user-pay-amount {
  font-size: var(--vs-font-size-xxl);
  font-weight: var(--vs-font-weight-bold);
  color: var(--vs-color-error);
  margin-bottom: var(--vs-spacing-xs); /* 缩小下边距: sm -> xs */
}

.pay-desc,
.vs-user-pay-desc {
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
}

.pay-form,
.vs-user-pay-form {
  margin-bottom: var(--vs-spacing-md); /* 缩小下边距: lg -> md */
}

.pay-page-wrapper .vs-video-loading-text,
.pay-container .vs-video-loading-text,
body.pay-page .vs-video-loading-text {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
}

/* 支付页面表单组间距缩小 */
.pay-form .vs-user-form-group,
.vs-user-pay-form .vs-user-form-group {
  margin-bottom: var(--vs-spacing-md); /* 缩小表单组间距: lg -> md */
}

.pay-form .vs-user-form-label,
.vs-user-pay-form .vs-user-form-label {
  margin-bottom: var(--vs-spacing-xs); /* 缩小标签下边距: sm -> xs */
}

/* 支付页面表单操作按钮间距缩小 */
.pay-form .vs-user-form-actions,
.vs-user-pay-form .vs-user-form-actions {
  margin-top: var(--vs-spacing-md); /* 缩小上边距: xl -> md */
}

/* 支付渠道卡片样式 */
.channel-cards,
.vs-user-channel-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--vs-spacing-xs);
  margin-top: var(--vs-spacing-xs);
}

.channel-card,
.vs-user-channel-card {
  padding: var(--vs-spacing-sm); /* 卡片缩小约 1/4 */
  border: 2px solid var(--vs-color-border);
  border-radius: var(--vs-radius-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--vs-transition-fast);
  background: var(--vs-color-bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  /* 卡片宽度缩小（约减少 2/5），并从左到右自然换行 */
  flex: 0 0 auto;
  width: 72px;
  height: 72px; /* 与宽度一致，正方形 */
}

.channel-card:hover,
.vs-user-channel-card:hover {
  border-color: var(--vs-color-primary);
  background: var(--vs-color-primary-lighter);
  transform: translateY(-2px);
  box-shadow: var(--vs-shadow-md);
}

.channel-card.active,
.vs-user-channel-card.active {
  border-color: var(--vs-color-primary);
  background: var(--vs-color-primary-light);
  box-shadow: 0 0 0 3px rgba(255, 159, 159, 0.15);
}

.channel-card.active .channel-name,
.vs-user-channel-card.active .vs-user-channel-name {
  color: var(--vs-color-primary) !important;
}

.channel-icon,
.vs-user-channel-icon {
  margin-bottom: var(--vs-spacing-xs); /* 缩小下边距: sm -> xs */
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  flex-shrink: 0;
  overflow: hidden;
}

.channel-icon-img,
.vs-user-channel-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.channel-name,
.vs-user-channel-name {
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-primary);
  font-weight: var(--vs-font-weight-medium);
}

/* 支付页面 - 联系邮箱样式 */
.vs-user-pay-contact {
  margin-top: var(--vs-spacing-md); /* 缩小上边距: lg -> md */
  padding: var(--vs-spacing-sm) var(--vs-spacing-md); /* 缩小内边距 */
  background: var(--vs-color-bg-lighter);
  border-radius: var(--vs-radius-md);
  text-align: center;
  border: 1px solid var(--vs-color-border-light);
}

.vs-user-pay-contact-label {
  display: inline-block;
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
  margin-right: var(--vs-spacing-sm);
}

.vs-user-pay-contact-label canvas {
  display: inline-block;
  vertical-align: middle;
}

.vs-user-pay-contact-email {
  display: inline-block;
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-primary);
  font-weight: var(--vs-font-weight-medium);
  cursor: pointer;
  transition: all var(--vs-transition-fast);
  padding: 2px 8px;
  border-radius: var(--vs-radius-sm);
  user-select: none;
  -webkit-user-select: none;
}

/* contact 行单行展示，并与按钮留出距离 */
.vs-user-pay-contact-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 改为左对齐 */
  gap: 6px; /* 减小间距，从 var(--vs-spacing-xs) 改为固定6px */
  margin-bottom: var(--vs-spacing-md);
  flex-wrap: wrap;
}

.vs-user-pay-contact-copy {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--vs-color-primary);
  cursor: pointer;
  font-size: var(--vs-font-size-sm);
  padding: 4px 10px;
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vs-user-pay-contact-copy:hover {
  color: var(--vs-color-primary-hover);
  background: rgba(16,240,191,0.15);
  border-color: var(--vs-color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16,240,191,0.2);
}

.vs-user-pay-contact-copy:active {
  color: var(--vs-color-primary);
  transform: translateY(0) scale(0.98);
}

.vs-pay-order-status {
  margin-top: var(--vs-spacing-sm);
  text-align: center;
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
}

.vs-pay-after-actions {
  margin-top: var(--vs-spacing-sm);
  padding-top: var(--vs-spacing-sm);
  border-top: 1px solid var(--vs-color-border-light);
  text-align: center;
}

.vs-pay-order-row,
.vs-pay-fallback-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vs-spacing-xs);
  flex-wrap: wrap;
}
.vs-pay-order-label{
  font-size: var(--vs-font-size-sm);
  color: var(--vs-color-text-secondary);
}

.vs-pay-order-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--vs-color-text-primary);
}

.vs-pay-mini-btn {
  border: 1px solid var(--vs-color-border-light);
  background: rgba(255,255,255,0.03);
  color: var(--vs-color-text-primary);
  cursor: pointer;
  font-size: var(--vs-font-size-sm);
  padding: 4px 10px;
  border-radius: var(--vs-radius-sm);
  transition: all var(--vs-transition-fast);
}

.vs-pay-mini-btn:hover {
  border-color: var(--vs-color-primary);
  color: var(--vs-color-primary);
  background: rgba(16,240,191,0.08);
  transform: translateY(-1px);
}

.vs-pay-tip {
  margin-top: 6px;
  font-size: 12px;
  color: var(--vs-color-text-secondary);
  line-height: 1.5;
}

/* 弹窗：套餐卡片用 grid 填满容器，避免“靠左空一大片/移动端重叠” */
#pay-popup-content .vs-user-pay-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--vs-spacing-xs);
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--vs-spacing-md);
}

#pay-popup-content .vs-user-pay-option {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: initial;
}

/* 弹窗模式：兜底区不展示（支付会跳转/拉起外部页面） */
#pay-popup-content #pay-after-actions,
#pay-popup-content #pay-order-status {
  display: none !important;
}

.vs-user-pay-contact-email:hover {
  color: var(--vs-color-primary-hover);
  background: var(--vs-color-primary-lighter);
  text-decoration: underline;
}

.vs-user-pay-contact-email:active {
  color: var(--vs-color-primary);
  transform: scale(0.98);
}

.vs-user-pay-contact-email canvas {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================
   12. 响应式样式（按页面分组）
   ============================================ */

/* 通用响应式 */
@media (max-width: 768px) {
  /* 防止移动端水平滚动 */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  /* 确保所有容器不会超出视口 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* 布局组件响应式 */
  .user-header,
  .vs-user-header {
    padding: 12px var(--vs-spacing-md);
  }

  .user-header-container,
  .vs-user-header-container {
    gap: var(--vs-spacing-md);
  }

  .user-logo,
  .vs-user-logo {
    font-size: var(--vs-font-size-lg);
  }

  .user-page-title,
  .vs-user-page-title {
    font-size: var(--vs-font-size-md);
  }

  .user-page,
  .vs-user-page {
    padding: var(--vs-spacing-lg) var(--vs-spacing-md);
  }

  /* 通用容器响应式 */
  .user-form-container,
  .page-container,
  /* 移动端：精简内边距，保持扁平化风格 */
  .profile-container,
  .vs-user-page-container,
  .vs-user-profile-container {
    padding: var(--vs-spacing-lg);
    border-radius: 0; /* 移动端也无圆角 */
  }
  
  /* 表单页面移动端保持卡片风格 */
  .vs-user-form-container {
    margin: 20px 15px; /* 移动端四周留小间距 */
    padding: var(--vs-spacing-lg);
    border-radius: var(--vs-radius-md);
  }

  /* 收藏列表响应式：完全继承 .vs-video-list 的自适应列数 */
  .favorites-list,
  .vs-user-favorites-list,
  #favorites-list,
  .vs-history-list {
    /* 完全继承 .vs-video-list 的响应式规则 */
    padding: var(--vs-spacing-md) 0 var(--vs-spacing-lg) 0 !important;
  }

  /* 个人中心按钮在768px以下改为2列布局（使用Grid） */
  .profile-actions,
  .vs-user-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vs-spacing-md);
  }

  /* 移动端按钮样式 */
  .action-link,
  .vs-user-action-link {
    width: 100%;
    margin: 0;
  }
}

/* 超小屏幕（手机竖屏） */
@media (max-width: 480px) {
  /* 收藏列表和观看历史响应式：完全继承 .vs-video-list */
  .favorites-list,
  .vs-user-favorites-list,
  #favorites-list,
  .vs-history-list {
    padding: var(--vs-spacing-sm) 0 var(--vs-spacing-md) 0 !important;
  }

  /* 个人中心响应式 - 沿用768px的2列布局（使用Grid） */
  .profile-actions,
  .vs-user-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vs-spacing-md);
    padding: var(--vs-spacing-md);
  }

  .action-link,
  .vs-user-action-link {
    width: 100%;
    margin: 0;
  }

  /* 订单记录响应式 */
  .order-header,
  .order-item,
  .vs-user-order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vs-spacing-xs);
  }
  
  .order-code,
  .vs-user-order-code {
    width: 100%;
  }
  
  .vs-user-order-time,
  .order-money,
  .vs-user-order-money {
    font-size: var(--vs-font-size-sm);
  }

  /* 支付页面响应式 */
  .pay-page-wrapper,
  .vs-user-pay-page-wrapper {
    max-width: 100%;
    padding: var(--vs-spacing-sm); /* 移动端进一步缩小: md -> sm */
  }

  .pay-container,
  .vs-user-pay-container {
    padding: var(--vs-spacing-md); /* 移动端缩小: lg -> md */
  }

  .pay-options,
  .vs-user-pay-options {
    /* 手机端固定2列，更稳定 */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pay-option,
  .vs-user-pay-option {
    /* Grid布局，无需设置宽度 */
    min-width: 0;
  }

  /* 弹窗移动端：稳定两列，不重叠 */
  #pay-popup-content .vs-user-pay-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
  
  #pay-popup-content .vs-user-pay-option {
    max-width: none;
    flex: initial;
  }

  /* 直跳页移动端：支付按钮区吸底，降低“找不到按钮/中途流失” */
  body.pay-page .vs-user-pay-form .vs-user-form-actions {
    position: sticky;
    bottom: 0;
    background: #1a1a1a;
    padding: var(--vs-spacing-sm) 0;
    margin-top: var(--vs-spacing-sm);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 20;
  }

  .channel-cards,
  .vs-user-channel-cards {
    gap: var(--vs-spacing-xs); /* 移动端进一步缩小: sm -> xs */
  }

  .channel-card,
  .vs-user-channel-card {
    padding: var(--vs-spacing-xs);
    width: 60px;
    height: 60px; /* 与宽度一致，正方形 */
  }

  .channel-icon,
  .vs-user-channel-icon {
    height: 27px;
    margin-bottom: 4px;
  }

  .channel-icon-img,
  .vs-user-channel-icon-img {
    width: 27px;
    height: 27px;
  }

  .channel-name,
  .vs-user-channel-name {
    font-size: var(--vs-font-size-xs);
  }

  /* 支付页面联系邮箱响应式 */
  .vs-user-pay-contact {
    padding: var(--vs-spacing-xs) var(--vs-spacing-sm); /* 移动端进一步缩小 */
    margin-top: var(--vs-spacing-sm); /* 移动端缩小: md -> sm */
  }
  
  .vs-user-pay-contact-row {
    justify-content: flex-start; /* 移动端也左对齐 */
    gap: 4px; /* 移动端进一步缩小间距 */
  }
  
  .vs-user-pay-contact-label {
    font-size: 13px;
  }
  
  .vs-user-pay-contact-email {
    font-size: 13px;
    word-break: break-all;
    flex: 1; /* 让邮箱占据剩余空间 */
    min-width: 0; /* 允许收缩 */
  }
  
  .vs-user-pay-contact-copy {
    flex-shrink: 0; /* 复制按钮不收缩 */
  }
}

/* ============================================
   13. 特殊页面布局
   ============================================ */
/* 登录/注册/修改密码页面居中布局 */
.user-page.login-page,
.user-page.register-page,
.user-page.change-password-page,
.vs-user-page.login-page,
.vs-user-page.register-page,
.vs-user-page.change-password-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vs-spacing-lg);
}

/* ========== 移动端调试控制台样式 ========== */
#mobile-debug-console {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: rgba(0, 0, 0, 0.95);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
}

#debug-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 0, 0, 0.2);
  border-bottom: 1px solid #333;
  color: #fff;
  font-weight: bold;
}

#debug-console-header span {
  flex: 1;
  font-size: 13px;
}

#debug-console-copy-all,
#debug-console-clear,
#debug-console-close {
  background: transparent;
  border: 1px solid #666;
  color: #fff;
  padding: 4px 8px;
  margin-left: 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

#debug-console-copy-all {
  border-color: #00ff00;
  color: #00ff00;
}

#debug-console-close {
  padding: 4px 10px;
  font-size: 16px;
  font-weight: bold;
}

#debug-console-copy-all:active,
#debug-console-clear:active,
#debug-console-close:active {
  background: rgba(255, 255, 255, 0.1);
}

#debug-console-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  line-height: 1.4;
}

.debug-log-item {
  margin-bottom: 6px;
  padding: 4px 6px;
  background: rgba(0, 255, 0, 0.05);
  border-left: 2px solid #00ff00;
  word-wrap: break-word;
  white-space: pre-wrap;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.debug-time {
  color: #888;
  font-size: 10px;
  flex-shrink: 0;
}

.debug-msg {
  color: #00ff00;
  flex: 1;
  min-width: 0;
}

.debug-copy-btn {
  background: rgba(0, 255, 0, 0.2);
  border: 1px solid #00ff00;
  color: #00ff00;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  white-space: nowrap;
}

.debug-copy-btn:active {
  background: rgba(0, 255, 0, 0.4);
  transform: scale(0.95);
}

#debug-console-toggle {
  position: fixed;
  bottom: 80px;
  right: 15px;
  width: 50px;
  height: 50px;
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#debug-console-toggle:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  #mobile-debug-console {
    height: 35vh;
  }
  
  #debug-console-content {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  #debug-console-toggle {
    width: 45px;
    height: 45px;
    bottom: 70px;
    right: 12px;
  }
}

/* ========== Canvas渲染关闭时的img标签样式（保持与Canvas一致） ========== */
.vod-cover-img,
.vs-video-cover-img,
.banner-cv-img,
.promo-cv-img,
.cover-cv-img {
  display: block;
  margin: 0;
  padding: 0;
  object-fit: contain; /* 默认contain，与Canvas一致 */
  background-color: rgb(80, 130, 140); /* 默认冷蓝灰色背景，与Canvas的blurBg一致 */
}

/* 首页轮播图：绝对定位（与Canvas一致） */
.banner-box .banner-cv-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* 首页侧边栏卡片：绝对定位（与Canvas一致） */
.promo-card .promo-cv-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* 首页卡片封面：绝对定位（与Canvas一致） */
.cover-box .cover-cv-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #111;
  border-radius: 0;
}

/* 首页视频封面：绝对定位（与Canvas一致） */
.vs-video-cover .vs-video-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 视频列表：尺寸由容器控制（与Canvas一致） */
.vod-cover .vod-cover-img {
  width: 100%;
  height: 100%;
}