/* 基础变量定义 */
:root {

    --theme-transition: 0.2s ease-out; /* 定义统一的过渡时间变量 */
  /* 主色调 */
  --primary: #000;
  --primary-foreground: #ffffff;

  /* 链接颜色 - 明亮模式 */
  --link-color: rgba(22, 24, 35, 0.9);
  --link-hover-color: rgba(0, 0, 0, 1);
  
  /* 背景色系 */
  --background: #ffffff;
  --foreground: #0f1419;
  
  /* 卡片和组件 */
  --card: #ffffff;
  --card-foreground: #0f1419;
  
  /* 中性色 */
  --muted: #f1f5f9;
  --muted-foreground: rgba(22, 24, 35, 0.6);
  
  /* 交互状态 */
  --accent: #f8fafc;
  --accent-foreground: #0f172a;
  
  /* 功能色 */
  --success: #22c55e;
  --warning: #f59e0b;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  
  /* 边框和阴影 */
  --border: #e2e8f0;
  --loadingborder: rgba(0, 0, 0, 0.3);
  --radius: 0.5rem;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  
  
  /* 暗色模式变量 */
  --background-dark: rgb(22, 24, 35);
  --foreground-dark: #e2e8f0;
  --card-dark: rgb(22, 23, 34);
  --border-dark: #2d2d2d;
  --muted-dark: #2e2f3b;
  --muted-foreground-dark: rgba(225, 225, 225, 0.6);

    --scrollbar-bg: rgba(230, 230, 230, 0.3);
    --scrollbar-thumb: rgba(180, 180, 180, 0.5);
    --scrollbar-thumb-hover: rgba(160, 160, 160, 0.7);
    --scrollbar-arrow: rgba(120, 120, 120, 0.7);    
    

  /* 新增主菜单文字颜色变量 */
  --menu-text: rgba(22, 24, 35, 0.75);           /* 默认浅色 */
  --menu-text-hover: rgba(22, 24, 35, 1);       /* 鼠标悬停深色 */ 

    /* 底部菜单的高度 */
    --wap-bottom-height: 70px; 
}

/* 暗色模式设置 */
html[dark="true"] {
  --background: var(--background-dark);
  --primary: rgba(225, 225, 225, 0.9);
  --primary-foreground: rgba(0, 0, 0, 0.9);
  --foreground: var(--foreground-dark);
  --card: var(--card-dark);
  --border: var(--border-dark);
  --loadingborder: rgba(255, 255, 255, 0.3);
  --muted: var(--muted-dark);
  --muted-foreground: var(--muted-foreground-dark);
  --link-color: rgba(225, 225, 225, 0.9);
  --link-hover-color: rgba(225, 225, 225, 1);  
  
    --scrollbar-bg: rgba(40, 40, 40, 0.3);
    --scrollbar-thumb: rgba(100, 100, 100, 0.5);
    --scrollbar-thumb-hover: rgba(120, 120, 120, 0.7);
    --scrollbar-arrow: rgba(150, 150, 150, 0.7);  

  /* 暗色模式下的菜单文字颜色 */
  --menu-text: rgba(225, 225, 225, 0.6);        /* 暗色模式默认浅色 */
  --menu-text-hover: rgba(225, 225, 225, 1);    /* 暗色模式鼠标悬停深色 */
    
}

[dark="true"] #watchlater-sidebar,
html.dark #watchlater-sidebar {
    --shadow-color-base: rgba(0,0,0,0.3);
    --highlight-color-soft: rgba(255,255,255,0.08);
    --shadow-color-inset: rgba(0,0,0,0.2);
    border-color: var(--border-dark, #374151); /* 暗模式边框颜色 */
}


/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础字体大小调整 */
html {
    font-size: 16px; /* 默认字体大小 */
}

/* 移动端字体大小调整 */
@media (max-width: 640px) {
    html {
        font-size: 18px; /* 增大移动端基础字体大小 */
    }
    
    .text-xs {
        font-size: 0.75rem !important;
    }
    
    .text-sm {
        font-size: 0.875rem !important;
    }
    
    .text-base {
        font-size: 1rem !important;
    }
    
    .text-lg {
        font-size: 1.125rem !important;
    }
    
    .text-xl {
        font-size: 1.25rem !important;
    }
    
    h2.text-xl {
        font-size: 1.375rem !important;
    }
    
    h3.text-base {
        font-size: 1.125rem !important;
    }
    
    /* 增大主播列表文字大小 */
    .side-tag .text-sm {
        font-size: 0.95rem !important;
    }
}

/* 应用统一过渡到所有相关元素 */


body {
  /*font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;*/
  /*font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;*/
  /*font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Arial", Roboto, sans-serif;*/
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.5;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover-color);
}

.group-hover\:text-link-hover {
    transition: color 0.2s ease;
}

.group:hover .group-hover\:text-link-hover {
    color: var(--link-hover-color) !important;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 视频卡片图片加载 */
/* 改进的图片错误样式 */
.img-hover {
  position: relative;
  overflow: hidden;
  /*background-color: var(--muted);  默认背景色 */
}

/* 顶部加载条 */
.img-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 加载中状态 */
.img-hover.loading::before {
  opacity: 1;
  animation: topLoadingBar 1.5s ease-in-out infinite;
}

@keyframes topLoadingBar {
  0% { width: 0%; left: 0; }
  50% { width: 100%; left: 0; }
  100% { width: 0%; left: 100%; }
}

/* 加载失败状态 - 主要修改 */
.img-hover.error {
  background-color: rgba(var(--muted-rgb, 240, 240, 240), 0.5);
}

/* 对已有的错误图片进行处理 */
.img-hover img.error,
.img-hover img[data-ll-status="error"] {
  opacity: 0.2; /* 半透明显示错误图片 */
}

/* 确保容器处于错误状态时也隐藏图片 */
.img-hover.error img {
  opacity: 0.2;
}

/* 加载失败图标 */
.img-hover.error::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: 2;
}

/* 重试按钮 */
.img-hover.error .retry-button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.img-hover.error:hover .retry-button {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

.img-hover.error .retry-button:hover {
  background-color: var(--primary-dark, #2a65c9);
  transform: translateX(-50%) translateY(-5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 暗色模式适配 */
html[dark="true"] .img-hover.error {
  background-color: rgba(var(--card-rgb, 45, 45, 45), 0.5);
}

html[dark="true"] .img-hover.error::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23777777' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z' /%3E%3C/svg%3E");
}

/* Logo 切换 */
.logo-img {
content: url('/images/logo/logo.svg');
}

html[dark="true"] .logo-img {
content: url('/images/logo/logo-white.svg');
}

/* 移动端顶部导航栏布局调整 */
@media (max-width: 768px) {
    /* 调整容器布局为相对定位，以便进行绝对定位 */
    .mobile-header .container-fluid {
        position: relative;
    }
    
    /* 将Logo居中 */
    .mobile-header .header-logo,
    .mobile-header a:has(> .logo-img) { /* 使用两种选择器以增强兼容性 */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1; /* 确保Logo在其他元素之上 */
    }
    
    /* 确保搜索按钮在右侧 */
    .mobile-header .mobile-search-btn,
    .mobile-header #search-toggle {
        position: absolute;
        right: 1rem; /* 右侧留一些边距 */
        z-index: 1;
    }
    
    /* 防止其它元素干扰布局 */
    .mobile-header .flex-1 {
        position: static;
    }
}



/* 侧边栏完整菜单样式 */
/* 基本样式: 为所有导航项设置通用样式 */
.sidebar-full .nav-item {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  width: 100%;
  color: var(--menu-text);
}

/* 文本颜色: 确保菜单项的所有文本元素都使用变量颜色 */
.sidebar-full .nav-item,
.sidebar-full .nav-item span,
.sidebar-full .nav-item [data-i18n] {
  color: var(--menu-text);
  transition: color 0.2s ease;
}

/* 悬停效果: 确保悬停时菜单项的所有文本元素都变色 */
.sidebar-full .nav-item:hover,
.sidebar-full .nav-item:hover span,
.sidebar-full .nav-item:hover [data-i18n] {
  background-color: var(--muted);
  color: var(--menu-text-hover) !important;
}

/* 图标样式 */
.sidebar-full .nav-item svg {
  color: var(--menu-text);
  transition: color 0.2s ease;
  margin-right: 0.75rem;
}

.sidebar-full .nav-item:hover svg {
  color: var(--menu-text-hover);
}

/* 选中状态样式 - 使用特定的nav-item.active选择器 */
.sidebar-full .nav-item.active,
.sidebar-full .nav-item.active span,
.sidebar-full .nav-item.active [data-i18n] {
  color: var(--menu-text-hover) !important;
  font-weight: 600;
  background-color: var(--muted);
  transition: none !important;
}

/* 确保选中状态的图标也变色 */
.sidebar-full .nav-item.active svg {
  color: var(--menu-text-hover) !important;
}

/* 直接选择任何可能的文本节点 */
.sidebar-full .nav-item *:not(svg) {
  color: inherit;
}

/* 强制继承颜色给所有子元素 */
.sidebar-full .nav-item.active *:not(svg) {
  color: var(--menu-text-hover) !important;
}

/* 简化版侧边栏样式 */
.sidebar-mini .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem; /* 修改上下padding为1rem，左右padding为0.5rem提供水平间距 */
  margin: 0.4rem; /* 添加外边距，进一步增加间距 */
  border-radius: var(--radius);
  transition: all 0.2s ease;
}


/* 悬停样式 */
.sidebar-mini .nav-item:hover {
  background-color: var(--muted);
}

/* 激活状态样式 */
.sidebar-mini .nav-item.active {
  background-color: var(--muted);
  transition: none !important;
  font-weight: 600;
}

/* 确保图标尺寸一致 
.sidebar-mini .nav-item svg {
  width: 1.5rem;
  height: 1.5rem;
}
*/
/* 文字样式 */
.sidebar-mini .nav-item span {
    font-size: 0.75rem;
    font-weight: 400;  
}
/* 确保简化侧边栏有足够的宽度适应内容 */
.sidebar-mini {
  width: 5rem; /* 可能需要调整宽度以适应间距 */
}

.sidebar-mini .nav-item svg {
  color: var(--menu-text);
  transition: color 0.2s ease;
  margin-bottom: 0.25rem;
}

.sidebar-mini .nav-item .text-xs {
  color: var(--menu-text);
  transition: color 0.2s ease;
}

.sidebar-mini .nav-item:hover svg,
.sidebar-mini .nav-item:hover .text-xs {
  color: var(--menu-text-hover);
}

.sidebar-mini .nav-item.active svg,
.sidebar-mini .nav-item.active .text-xs {
  color: var(--menu-text-hover);
  font-weight: 600;
}





/* 移动端导航图标尺寸调整 */
@media (max-width: 768px) {
    /* 菜单按钮 */
    #nav-toggle svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Logo图标 */
    .header-logo .logo-img, 
    header a .logo-img {
        height: 42px !important;
    }
    
    /* 搜索按钮 */
    #search-toggle svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* 增加按钮的点击区域 */
    #nav-toggle, #search-toggle {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* 模态框动画样式 */
#mobile-language-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mobile-language-content {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

/* iOS 滚动优化 */
.ios-momentum-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 布局组件 */
/* 确保主内容区宽度合适 */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 容器流体宽度，适应屏幕 */
/*
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
*/

/* 用户菜单样式 */
#headeruser {
  display: flex !important; /* 强制显示 */
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 120px; /* 确保有最小宽度 */
}

#headeruser a {
  color: var(--link-color);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  white-space: nowrap; /* 防止文本换行 */
}

#headeruser a:hover {
  color: var(--link-hover-color);
  background-color: var(--muted);
}

/* 调整搜索框宽度，确保不会挤压用户菜单 */
@media (min-width: 1025px) {
  .header .search-container {
    max-width: 60%;
  }
}

/* 在小屏幕(移动端)下隐藏顶部用户菜单 */
@media (max-width: 1024px) {
  #headeruser {
    display: none !important; /* 强制隐藏 */
  }
  
  /* 确保搜索框在移动端能占据更多空间 */
  .header .flex-1 {
    max-width: 100%;
  }
}


/* 回到顶部按钮基础样式 */
.back-to-top-btn {
    /* 布局定位 */
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999; /* 确保层级够高 */
    
    /* 尺寸与形状 */
    width: 48px;
    height: 48px;
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* 颜色配置 (使用了你提供的变量) */
    color: var(--color-text-3);
    background-color: var(--color-bg-1);
    
    /* 视觉效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 增加一点阴影让它更立体 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* 初始位置稍微下沉 */
    transition: all 0.3s ease-in-out;
    
    /* 禁止初始状态下的点击 */
    pointer-events: none;
}

/* 按钮显示状态 */
.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* 悬停效果 (可选，仅在支持 hover 的设备上生效) */
@media (hover: hover) {
    .back-to-top-btn:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }
}

/* --- 手机端适配 --- */
@media screen and (max-width: 768px) {
    .back-to-top-btn {
        /* 移动端稍微调小边距，防止遮挡内容 */
        right: 20px;
        
        /* 
           使用 calc() 计算：底部菜单高度 + 20px 的间距。
           增加了 fallback (60px) 以防变量未定义时贴底。
        */
        bottom: calc(var(--wap-bottom-height, 60px) + 20px);
        
        /* 保持 44px 以上的点击区域符合移动端交互规范 */
        width: 44px;
        height: 44px;
    }
}

/* === 搜索框下拉样式 === */
:root {
    --bg-color-light: #ffffff;
    --dropdown-bg-light: rgba(255, 255, 255, 0.95); /* 增加透明度以配合毛玻璃 */
    --text-color-light: #333;
    --border-color-light: #e5e5e5;
    --hover-bg-light: #f3f4f6;
    
    --bg-color-dark: #1a1b26;
    --dropdown-bg-dark: rgba(37, 38, 50, 0.95);
    --text-color-dark: #eee;
    --border-color-dark: #333;
    --hover-bg-dark: rgba(255, 255, 255, 0.08);
    
    --primary-color: #ff5e5e; 
    --header-height: 64px;
}

/* === 搜索框容器 === */
.search-wrapper {
    position: relative;
    z-index: 50;
}

/* 确保输入框干净，无额外图标 */
.search-input {
    background-image: none !important;
    appearance: none;
    -webkit-appearance: none;
}

/* === 下拉框容器 === */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    background-color: var(--dropdown-bg-light);
    backdrop-filter: blur(12px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color-light);
    border-radius: 16px; /* 更圆润的圆角 */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98); /* 初始稍微缩小，出现时放大 */
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 8px 0;
    transform-origin: top center;
}

/* 显示状态 */
.search-wrapper.active .search-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    display: block !important;
}

/* === 区域标题栏 === */
.dropdown-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 8px;
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

.clear-history-btn {
    cursor: pointer;
    font-size: 12px;
    color: #999;
    transition: color 0.2s;
    padding: 2px 6px;
    border-radius: 4px;
}

.clear-history-btn:hover {
    color: var(--primary-color);
    background-color: rgba(255, 94, 94, 0.1);
}

/* === 历史记录标签 === */
.history-tags {
    display: flex;
    flex-wrap: wrap;
    padding: 0 16px 8px;
    gap: 8px;
}

.history-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-color-light);
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
}

.history-tag:hover {
    background: var(--hover-bg-light);
    color: var(--primary-color);
    border-color: rgba(255, 94, 94, 0.2);
    transform: translateY(-1px);
}

/* === 热门搜索列表 === */
.hot-list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain; /* 防止滚动链 */
    
    /* 隐藏滚动条但保留功能 - Firefox / IE / Edge */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* 隐藏滚动条 - Webkit (Chrome, Safari, etc) */
.hot-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.hot-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.hot-item:hover {
    background-color: var(--hover-bg-light);
}

.rank-num {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #cbd5e1; /* 默认灰色 */
    font-style: italic;
    font-family: 'Arial', sans-serif;
}

/* Top 3 样式优化 */
.rank-num.top-1 { color: #fe2c55; }
.rank-num.top-2 { color: #ff6b00; }
.rank-num.top-3 { color: #ffb800; }

.keyword-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-color-light);
    font-weight: 400;
}

/* 分割线 */
.dropdown-divider {
    height: 1px;
    background-color: var(--border-color-light);
    margin: 8px 16px;
    opacity: 0.6;
}

/* === 深色模式适配 === */
html[dark="true"] .search-dropdown {
    background-color: var(--dropdown-bg-dark);
    border-color: var(--border-color-dark);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

html[dark="true"] .history-tag {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color-dark);
}

html[dark="true"] .history-tag:hover {
    background: rgba(255, 255, 255, 0.15);
}

html[dark="true"] .hot-item:hover {
    background-color: var(--hover-bg-dark);
}

html[dark="true"] .keyword-text {
    color: var(--text-color-dark);
}

html[dark="true"] .dropdown-divider {
    background-color: var(--border-color-dark);
}

html[dark="true"] .hot-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

/* === 移动端适配 === */
@media (max-width: 768px) {
    #mobile-search .search-dropdown {
        position: fixed;
        top: 64px; /* header height */
        left: 0;
        width: 100vw;
        height: calc(100vh - 64px);
        margin-top: 0;
        border-radius: 0;
        border: none;
        overflow-y: auto;
        background-color: var(--bg-color-light); /* 移动端背景不透明，防止内容重叠干扰 */
    }

    html[dark="true"] #mobile-search .search-dropdown {
        background-color: var(--bg-color-dark);
    }
}

/* 导航栏 */
/* 修复顶部导航栏布局 */
/* 顶部导航栏样式 */
/* 顶部导航栏样式 */
/* 顶部导航栏样式 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 50;
  background-color: var(--background);
  /*border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
  transition: padding-left 0.3s ease;
}



/* 修复在大屏幕下的布局 */
@media (min-width: 1025px) {
  
  /* 确保用户菜单显示在正确位置 */
  #headeruser {
    display: flex !important;
    position: relative;
    z-index: 51; /* 确保在最上层 */
  }
}




/* 确保移动端下的侧边栏正确定位 */
@media (max-width: 1024px) {
    #sidebar {
        left: 0;
        transform: translateX(-100%);
    }
    
    #sidebar.open {
        transform: translateX(0);
    }
}

/* 主导航菜单图标样式 */
.sidebar nav .fa {
  width: 20px;
  text-align: center;
  opacity: 0.9;
}

#sidebar {
  display: flex;
  flex-direction: column;
}
/* 确保侧边栏定位不会受影响 */
#sidebar {
    top: 0;
    height: 100vh;
    z-index: 100; /* 确保高于其他元素 */
}

/* 滚动条美化 - 仅在鼠标进入侧边栏时显示 */
/* 滚动条优化方案 */




#sidebar {
    position: fixed;
    top: 64px; /* 从顶部导航栏下方开始 */
    /* 基本设置 */
    width: 240px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    height: calc(100vh - 64px); /* 视口高度减去顶部导航栏高度 */
    background-color: var(--background);
    
    /* 关键：确保滚动条不影响布局 */
    box-sizing: content-box; /* 内容盒模型，防止滚动条宽度计入总宽度 */
    margin-right: -6px; /* 负边距补偿滚动条空间 */
    padding-right: 6px; /* 内边距补偿滚动条空间 */
    
    /* Firefox 滚动条处理 */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    
    /* IE 和 Edge 滚动条处理 */
    -ms-overflow-style: none;
    
    /* 动画过渡效果 */
    transition: transform 0.3s ease;

    z-index: 40; /* 低于顶部导航栏 */
    will-change: transform; /* 优化性能 */    
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 启用iOS惯性滚动 */
    overscroll-behavior: contain; /* 防止滚动传播 */
    touch-action: pan-y; /* 限制为垂直滑动 */    
    padding-bottom: 100px; /* 增加底部内边距，确保底部内容可见 */
}

/* 确保侧边栏内容可滚动 */
#sidebar > nav, 
#sidebar > div {
    touch-action: pan-y; /* 确保子内容允许垂直滑动 */
}

/* 防止滚动传递到背景 */
body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* 底部设置区域样式 */
.sidebar-settings {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--background);
    border-top: 1px solid var(--border);
    padding: 15px;
    z-index: 41;
    margin-top: auto;
    
    /* 添加底部渐变阴影，暗示有更多内容 */
    box-shadow: 0 -8px 10px -5px rgba(0,0,0,0.05);
}

/* iOS专用修复 */
@supports (-webkit-touch-callout: none) {
    /* iOS设备专用样式 */
    #sidebar {
        height: -webkit-fill-available;
    }
    
    /* 防止iOS橡皮筋效果 */
    .sidebar-spacer {
        height: 100px !important; /* 确保有足够空间 */
    }
}

/* WebKit 浏览器的滚动条样式 */
#sidebar::-webkit-scrollbar {
    width: 6px; /* 固定宽度 */
}

#sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    /* 最小高度保证 */
    min-height: 60px;
    
    /* 创建更小视觉效果但保持可点击区域 */
    background-color: transparent;
    
    /* 使用边框创建视觉效果 */
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    
    /* 避免边框影响背景色 */
    background-clip: content-box;
    
    /* 圆角效果 */
    border-radius: 3px;
}



/* 悬停时显示滚动条 */
#sidebar:hover {
    /* Firefox */
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

#sidebar:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-top: 20px solid var(--scrollbar-thumb);
    border-bottom: 20px solid var(--scrollbar-thumb);
}

/* 响应式处理 */
@media (max-width: 1024px) {
    #sidebar {
        transform: translateX(-100%);
    }
    
    #sidebar.open {
        transform: translateX(0);
    }
    
    .main {
        margin-left: 0;
    }
}

/* 自定义箭头图标 - 可以使用CSS三角形 */
#sidebar::-webkit-scrollbar-button:start:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
}

#sidebar::-webkit-scrollbar-button:end:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


/*pc简化版侧边栏beg*/
/* 大屏幕下主内容区域适配侧边栏 */
/* 侧边栏折叠状态 */
#sidebar.sidebar-collapsed {
  width: 72px !important; /* 强制设置宽度 */
}

/* 侧边栏内容样式 */
.sidebar-full, .sidebar-mini {
  transition: opacity 0.3s ease, display 0.3s ease;
}

/* PC端侧边栏自适应 */
@media (min-width: 1025px) {
  /* 主内容区域适配侧边栏 */
  .main {
    margin-left: 240px;
    transition: margin-left 0.3s ease;
  }
  
  /* 侧边栏折叠状态下的主内容区域 */
  body.sidebar-collapsed .main {
    margin-left: 72px;
  }
  
  /* 展开状态显示完整版，隐藏简化版 */
  #sidebar:not(.sidebar-collapsed) .sidebar-full {
    display: block;
  }
  
  #sidebar:not(.sidebar-collapsed) .sidebar-mini {
    display: none;
  }
  
  /* 折叠状态显示简化版，隐藏完整版 */
  #sidebar.sidebar-collapsed .sidebar-full {
    display: none;
  }
  
  #sidebar.sidebar-collapsed .sidebar-mini {
    display: block;
  }
}

/* 移动端侧边栏适配 */
@media (max-width: 1024px) {
  /* 侧边栏从顶部开始 */
  #sidebar {
    top: 0;
    height: 100vh;
    width: 240px;
    transform: translateX(-100%); /* 默认隐藏 */
    z-index: 60; /* 高于顶部导航 */
  }
  
  /* 侧边栏打开状态 */
  body.sidebar-open #sidebar {
    transform: translateX(0);
  }
  
  /* 主内容区域 */
  .main {
    margin-left: 0 !important;
  }
  
  /* 移动端侧边栏内只显示完整版 */
  .sidebar-full {
    display: block !important;
  }
  
  .sidebar-mini {
    display: none !important;
  }

  /* 确保移动端展开按钮在正确位置 */
#expand-collapse-container {
    position: relative;
    margin-top: 10px;
    width: 100%; /* 确保宽度充满父容器 */
    z-index: 5; /* 确保按钮在其他元素之上 */
}
    
}



/* 遮罩层样式 */
#sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* 移动端侧边栏默认状态 */
@media (max-width: 1024px) {
  .mobile-sidebar {
    transform: translateX(-100%) !important;
    top: 0 !important;
    height: 100vh !important;
  }
  
  body.sidebar-open .mobile-sidebar {
    transform: translateX(0) !important;
  }
}
/*pc简化版侧边栏end*/



/* 添加触摸反馈样式 */
.touch-scroll-enabled a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移除默认触摸高亮 */
}

.touch-scroll-enabled a.touch-active {
    background-color: var(--muted);
    transition: background-color 0.1s ease;
}

/* 优化移动触摸目标尺寸 */
@media (max-width: 640px) {
    .side-tag li a {
        padding: 0.75rem 1rem; /* 增大触摸区域 */
    }
    
    .toggle-streamers {
        min-height: 2.5rem; /* 增大按钮触摸区域 */
    }
    
    /* 防止iOS双击缩放 */
    .side-tag {
        touch-action: manipulation;
    }
}


@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
}

/* 确保侧边栏内容不会被顶部遮挡 */
.sidebar nav {
  padding-top: 1rem;
}

/* 移动端侧边栏处理 */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 60; /* 确保在顶部导航栏之上 */
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
}

/* 移动端侧边栏隐藏样式 */
@media (max-width: 1024px) {
    #sidebar {
        transform: translateX(-100%);
    }
    
    #sidebar.-translate-x-full {
        transform: translateX(-100%);
    }
    
    /* 确保当不隐藏时能够正确显示 */
    #sidebar:not(.-translate-x-full) {
        transform: translateX(0);
    }
}

/* 遮罩层样式 */
#sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 45;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

#sidebar-backdrop.hidden {
    display: none;
}

/* 滚动锁定样式 */
body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}



@supports (-webkit-touch-callout: none) {
    #sidebar {
        height: -webkit-fill-available; /* iOS更好的高度计算 */
    }
    
    /* iOS 13+不需要特殊处理 */
    @supports (aspect-ratio: 1) {
        .sidebar-content {
            -webkit-overflow-scrolling: auto; /* 使用原生行为 */
        }
    }
}

/* 主播列表样式 */
#streamer-list {
    flex: 1;
    min-height: auto;
}
/* 防止iOS回弹问题 */
/* 关键：设置内容最小高度，确保触发iOS Safari的UIScrollView */


/* 确保iOS上内容不跳动 */
.is-ios #sidebar {
    position: fixed !important;
    height: 100% !important;
}

/* 防止iOS上滚动冲突 */
.sidebar-content {
    position: relative !important; /* 避免绝对定位冲突 */
}

/* 修复触摸交互问题 */
.side-tag-container {
    pointer-events: auto;
}

/* iOS滚动优化 */
.ios-momentum-scroll {
  -webkit-overflow-scrolling: touch; /* 开启动量滚动 */
  overscroll-behavior: contain; /* 防止滚动扩散到父元素 */
  touch-action: pan-y; /* 限制为垂直滑动 */
  position: relative;
}

/* 防止iOS滚动弹回问题 */
.ios-momentum-scroll::before,
.ios-momentum-scroll::after {
  content: '';
  display: block;
  height: 1px;
  position: relative;
  opacity: 0;
}

.ios-momentum-scroll::before {
  margin-top: -1px;
}

.ios-momentum-scroll::after {
  margin-bottom: -1px;
}

/* 确保设置区域在暗黑模式下的正确样式 */
html[dark="true"] .sidebar-settings {
  border-color: var(--border-dark);
}

/* 语言选择弹窗底部上滑动画 */


/* 移动端视口高度修复 */
#mobile-language-content {
  max-height: calc(var(--vh, 1vh) * 85);
  height: auto;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  /* 适应iOS安全区域 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 确保内容可滚动但不会超出视口 */
#mobile-language-modal .p-4.max-h-80 {
  max-height: calc(var(--vh, 1vh) * 70);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 改进版本 - 处理iOS底部安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobile-language-content {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* 使用替代方案处理视口高度 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 同时使用vh和fill-available作为后备 */
  height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
}

/* 设置图标样式 */
.settings-item button {
  background-color: var(--muted);
  border: 1px solid var(--border);
}

html[dark="true"] .settings-item button {
  background-color: var(--muted-dark);
  border-color: var(--border-dark);
}

.settings-item button:hover {
  background-color: var(--accent);
}

html[dark="true"] .settings-item button:hover {
  background-color: var(--muted);
}



/* 设置图标样式 */
.settings-item button {
  background-color: var(--muted);
  border: 1px solid var(--border);
}

html[dark="true"] .settings-item button {
  background-color: var(--muted-dark);
  border-color: var(--border-dark);
}

.settings-item button:hover {
  background-color: var(--accent);
}

html[dark="true"] .settings-item button:hover {
  background-color: var(--muted);
}


/* 添加到main.css */

/* 居中弹窗动画 */
#mobile-language-content {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-height: min(85vh, 400px); /* 限制最大高度，确保在小屏幕上也能完全显示 */
}

/* 弹窗内容滚动优化 */
#mobile-language-modal .overflow-y-auto {
  -webkit-overflow-scrolling: touch; /* 提供iOS流畅滚动 */
  scrollbar-width: thin;
}

/* 弹窗内链接样式增强 */
#mobile-language-modal a {
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#mobile-language-modal a:active {
  transform: scale(0.98);
  background-color: var(--muted);
}

/* 根据当前语言应用高亮效果 */
#mobile-language-modal a.active {
  background-color: var(--muted);
  font-weight: 600;
}

/* 在大屏幕上隐藏侧边栏设置区域 */
@media (min-width: 1025px) {
    .sidebar-settings {
        display: none;
    }
}


/* 主播列表容器样式 */
.side-tag-container {
    position: relative;
    display: flex;
    flex-direction: column;
}



/* 点击反馈效果 */
#sidebar a:active,
#sidebar button:active {
    background-color: var(--muted);
    transition: background-color 0.1s ease;
}

/* 增强触摸体验 */
.touch-active {
    background-color: var(--muted) !important;
}


/* 移动端搜索框样式 */
#mobile-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    z-index: 60;
    display: none;
}

@media (max-width: 768px) {
    .mobile-search-hidden {
        display: none !important;
    }
}

#mobile-search.active {
    display: flex;
    align-items: center;
}

/* 确保移动端logo居中 */
@media (max-width: 768px) {
    header .container-fluid > div:nth-child(2) {
        display: flex;
        justify-content: center;
        flex: 1;
    }
}

/* 调整移动端内容区边距 */

/* 调整移动端内容区边距 - 确保左右对称 */
@media (max-width: 640px) {
    .container-fluid {
        padding-left: 0.5rem !important; /* 8px */
        padding-right: 0.5rem !important; /* 8px */
        max-width: 100vw; /* 确保不超出视口宽度 */
        width: 100%; /* 确保宽度充满 */
        box-sizing: border-box; /* 包含内边距在宽度内 */
        margin-left: auto;
        margin-right: auto;
    }
    
    .main {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* 防止水平滚动 */
    }
    
    /* 修正可能的嵌套容器问题 */
    .main > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 确保sections不会导致不对称 */
    section {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 通用网格容器调整 */
    .grid-container, 
    .grid,
    [class*="grid-cols-"] {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 针对特定内容区域的微调 */
@media (max-width: 640px) {
    /* 确保所有视频块左右对齐 */
    .grid-item {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 减小卡片内部边距，使内容更宽松 */
    .grid-item-content {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    /* 减小网格间隙以平衡边距 */
    .gap-3,
    .gap-4 {
        gap: 0.5rem !important; /* 8px 间隙 */
    }
    
    /* 调整页脚和其他元素的边距 */
    footer, 
    .gg-box,
    .mb-8 {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* 确保移动端logo居中 */
@media (max-width: 768px) {
    .header .logo-container {
        justify-content: center;
        flex: 1;
    }
}

/* 主内容区 */
.main {
  transition: margin-left 0.3s ease;
}



.main {
    margin-top: 64px; /* 顶部导航栏高度 */
    margin-left: 240px;
    padding: 1.5rem;
    min-height: calc(100vh - 5rem);
    transition: margin-left 0.3s ease, padding 0.3s ease;
}

/* 简化状态下主内容区域适配 */
body.sidebar-collapsed .main {
  margin-left: 72px;
}


@media (max-width: 1024px) {
    .main {
        margin-left: 0;
        padding: 1rem;
    }
}

/* 修改为 */
/* 修复主内容区与顶部导航的间距问题 */
/* 修改后 */
@media (min-width: 1025px) {
  .main {
    margin-left: 240px; /* 侧边栏宽度 */
    width: auto; /* 或者删除width属性 */
    /* 其他属性 */
  }
}

/* 确保顶部导航栏和内容正确对齐 */
@media (min-width: 1025px) {
  .header, 
  .lg\:pl-64, 
  .lg\:ml-60 {
    left: 240px;
    width: calc(100% - 240px);
  }
  
  .mt-16, 
  .mt-20, 
  .lg\:mt-16, 
  .lg\:mt-20 {
    margin-top: 64px !important; /* 顶部导航栏高度 */
  }
}

/* 添加这个规则 */
@media (min-width: 1025px) {
  .main .container-fluid {
    max-width: 100%;
    padding-right: 1rem;
  }
}

/* 修复头部用户菜单区域 */
@media (min-width: 1025px) {
  /* 确保头部用户菜单在正确位置且可见 */
  .header .max-w-full,
  .header .container-fluid {
    padding-right: 1rem; /* 确保足够的右侧边距 */
  }

  
  /* 固定用户菜单宽度和位置 */
  #headeruser {
    display: flex !important;
    position: absolute;
    right: 1rem;
    min-width: 120px;
    justify-content: flex-end;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main {
    margin-left: 0;
  }
}

/* 主内容区链接 */
.main a {
  color: var(--link-color);
}

.main a:hover {
  color: var(--link-hover-color);
}

/* 首页主内容区切换按钮栏样式 
/* 1. 基础按钮样式 */
.tab-button {
  display: inline-block;
  padding: 0.5rem 1.125rem; /* 调整了左右内边距，使其更接近图片效果 */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  border-radius: 0.625rem; /* 调整了圆角，使其更圆润 */
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* 2. 明亮模式 (默认) */
html[dark="false"] .tab-button {
  background-color: #f3f4f6; /* 默认背景: 浅灰色 */
  color: #1f2937; /* 默认文字: 深灰色 */
}

html[dark="false"] .tab-button:hover {
  background-color: #e5e7eb; /* 鼠标悬停 */
}

html[dark="false"] .tab-button.tab-active {
  background-color: #111827; /* 激活背景: 接近纯黑 */
  color: #ffffff; /* 激活文字: 白色 */
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
}

/* 3. 暗色模式 */
html[dark="true"] .tab-button {
  background-color: rgba(255, 255, 255, 0.1); /* 默认背景 */
  color: #d1d5db; /* 默认文字 */
}

html[dark="true"] .tab-button:hover {
  background-color: rgba(255, 255, 255, 0.15); /* 鼠标悬停 */
}

html[dark="true"] .tab-button.tab-active {
  background-color: rgba(225, 225, 225, 0.9); /* 激活背景: 您指定的颜色 */
  color: #000000; /* 激活文字: 黑色 */
}



/* 修复移动端顶部内容被导航栏遮挡问题 */
@media (max-width: 1024px) {
  .main {
    margin-top: 5rem; /* 确保移动端有足够的上边距 */
    margin-left: 0;
  }
  
  /* 确保标题不会被导航栏覆盖 */
  .main section:first-child {
    padding-top: 1rem;
  }
}

/* 增加内容区域与顶部导航的间距 */
.mt-16 {
  margin-top: 5rem !important; /* 强制应用，防止被其他样式覆盖 */
}

/* 确保网格布局容器的适当间距 */
.grid-container {
  margin-top: 1rem;
}



/* Swiper导航按钮样式 */
/* Swiper容器样式修复 */
.swiper.classic-dance-swiper {
  width: 100%;
  overflow: visible !important;
  margin: 0 !important;
}



.swiper-wrapper {
  display: flex;
  transition-property: transform;
}

/* 确保轮播内容不超出主区域 */
.swiper-slide {
  flex-shrink: 0;
  height: auto;
  position: relative;
  transition-property: transform;
}

/* 导航按钮样式调整 */
.classic-dance-prev,
.classic-dance-next {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 20; /* 确保按钮在最上层 */
}

/* 修复导航按钮在暗色模式下的样式 */
html[dark="true"] .classic-dance-prev,
html[dark="true"] .classic-dance-next {
    background-color: rgba(45, 45, 45, 0.8);
    color: var(--foreground-dark);
}

/* 确保主内容区不会有溢出内容 */
.main section {
    max-width: 100%;
}

/* 修复Swiper在小屏幕上的显示 */
@media (max-width: 640px) {
    .classic-dance-prev,
    .classic-dance-next {
        width: 28px;
        height: 28px;
    }
    
    .classic-dance-prev svg,
    .classic-dance-next svg {
        width: 16px;
        height: 16px;
    }
}

/* 确保移动端两列布局时内容紧凑 */
@media (max-width: 640px) {
    .grid-item-content {
        padding: 0.5rem;
    }
    .grid-item .absolute.bottom-2.right-2 {
        bottom: 0.25rem;
        right: 0.25rem;
    }
    
    .grid-item .bg-black\/70 {
        padding: 0.125rem 0.375rem;
        font-size: 0.65rem;
    }
}

/* 卡片组件 */
.card {
  background-color: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-media {
  position: relative;
  padding-top: 56.25%; /* 16:9 高宽比 */
  overflow: hidden;
}

.card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .card-media img {
  /*transform: scale(1.05);*/
}

.card-content {
  padding: 0.75rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* 视频播放器容器 */
.video-container {
  position: relative;
  padding-top: 56.25%; /* 16:9 高宽比 */
  margin-bottom: 1.5rem;
  background-color: #000;
  border-radius: var(--radius);
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  background-color: var(--muted);
  color: var(--muted-foreground);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.tag:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* 网格系统 */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

.col-span-12 {
  grid-column: span 12;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-3 {
  grid-column: span 3;
}

@media (max-width: 1024px) {
  .col-span-4 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .col-span-6, 
  .col-span-4, 
  .col-span-3 {
    grid-column: span 12;
  }
}

/* 调整grid响应式布局 */
@media (min-width: 1536px) {
  .2xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary) 80%, black);
}

.btn-outline {
  border-color: var(--border);
  background-color: transparent;
}

.btn-outline:hover {
  background-color: var(--muted);
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.pagination-item.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.pagination-item:hover:not(.active) {
  background-color: var(--muted);
}

/* 表单元素 */
.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 64, 240, 0.2);
}

/* 搜索框 */
.search-container {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background-color: var(--muted);
  color: var(--foreground);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--background);
  box-shadow: 0 0 0 2px rgba(0, 64, 240, 0.2);
}

.search-button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图标按钮 */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--foreground);
  transition: all 0.2s ease;
  cursor: pointer;
}

.icon-button:hover {
  background-color: var(--muted);
}

/* 工具类 */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.font-bold {
  font-weight: 700;
}

.text-muted {
  color: var(--muted-foreground);
}

.rounded-full {
  border-radius: 9999px;
}

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  
  .md\:hidden {
    display: none;
  }
}

/* 自定义组件样式（适配原网站特定组件） */
.video-info {
  position: relative;
  background-color: var(--card);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.video-info-toggle {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.25rem 0.75rem;
  background-color: var(--background);
  border-top-left-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--primary);
  cursor: pointer;
}

.info-tag {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}







/* 加载状态 */
.loading {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 页脚 */
.footer {
  margin-top: 3rem;
  padding: 2rem 1rem;
  background-color: var(--background);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted-foreground);
}

/* 移动端导航栏 */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--background);
  border-top: 1px solid var(--border);
  display: none;
  z-index: 40;
  padding: 0.5rem 0;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.75rem;
}

.mobile-nav-icon {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
  
  .main {
    padding-bottom: 4rem;
  }
}

/* 覆盖原网站特定样式 */
.side-nav > li h3 > * {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  font-weight: 600;
}

.side-nav > li h3 > *:hover {
  background-color: var(--muted);
}

.side-tag li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.side-tag li a:hover {
  background-color: var(--muted);
}

/* 重写滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--muted-foreground);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: var(--muted);
}

/* 暗黑模式切换按钮 */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--foreground);
}

.theme-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* 页面过渡动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-transition {
  animation: fadeIn 0.3s ease;
}

/* 额外工具类 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}



/* 确保主内容区域紧贴侧边栏 */
.lg\:pl-60 {
  padding-left: 15rem;
}

/* 导航栏左侧内边距，与侧边栏宽度一致 */
.lg\:pl-\[260px\] {
  padding-left: 260px;
}



/* 调整导航栏位置 */
@media (min-width: 1024px) {
  .lg\:ml-60 {
    margin-left: 15rem;
  }
  
  .lg\:pl-64 {
    padding-left: 16rem;
  }
  
  .lg\:pt-4 {
    padding-top: 1rem;
  }
}


/* 修复页脚按钮样式 */
.s2O1MLsL {
  z-index: 501;
}

.JHraiF99 {
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--card);
    box-shadow: var(--shadow);
    z-index: 999;
    position: relative;
}

.cuvUuj0g {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background-color: var(--color-bg-1);
  box-shadow: var(--shadow-2);
}

.G0S7YWl4:hover .RVfy5tPo {
  display: block;
}


/* 优化移动端响应 */
@media (max-width: 640px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .grid {
    gap: 0.5rem;
  }
}



/* 修复移动端底部菜单 */
/* 移动端底部导航栏样式 */
.wapbottom {
  display: none;
}

@media (max-width: 1024px) {
  .wapbottom {
    height: var(--wap-bottom-height) !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--border);
    background-color: var(--background);
    z-index: 40;
    padding: 8px 0;
    display: flex !important;
    align-items: center !important;
  }
  
  /* 确保页面底部有足够的内边距 */
  .main {
    padding-bottom: 70px;
  }
}

/* 导航列表样式 */
.wapbottom ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wapbottom li {
  flex: 1;
  text-align: center;
}

/* 导航链接样式 */
.wapbottom li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  color: var(--link-color);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s ease;
}

.wapbottom li a:hover,
.wapbottom li a:active {
  color: var(--primary);
}

/* 导航图标样式 */
.wapbottom li a svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* 如果使用float而非flexbox，则需要这部分 */
@supports not (display: flex) {
  .wapbottom li {
    float: left;
    width: 25%;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
}


/* 解决主内容区与导航栏重叠问题 */
.pt-20 {
    padding-top: 5rem;
}

@media (min-width: 1024px) {
    .lg\:ml-60 {
        margin-left: 15rem;
    }
    
    .lg\:pl-64 {
        padding-left: 16rem;
    }
    
    .lg\:pt-4 {
        padding-top: 1rem;
    }
}

/* 网格项目样式 */
/* 卡片基础样式 */
.grid-item {
    position: relative;
    margin: 0.5rem 0;
    cursor: pointer;
    transform: translateZ(0); /* 启用硬件加速 */
}

/* 卡片链接样式 */
.grid-item a {
    border: none;
    box-shadow: none;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

/* 移除默认的hover效果 */
.grid-item a:hover {
    box-shadow: none;
    transform: none;
}

/* 背景装饰层 */
.card-background {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 0.75rem;
    transform: scale(0.85);
    opacity: 0;
    z-index: 0; /* 背景层在底部 */
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 缩略图圆角过渡 */
.grid-item .img-hover img,
.grid-item .relative.pb-\[60\%\] img {
    border-radius: 0.5rem;
    transition: border-radius 300ms ease !important;
    transform: none !important; /* 确保没有缩放 */
}

/* 悬停时缩略图变为直角 */
.grid-item:hover .img-hover img,
.grid-item:hover .relative.pb-\[60\%\] img {
    border-radius: 0 !important;
}

/* 确保内容不上浮 */
.grid-item:hover .grid-item-content {
    transform: none !important;
}

/* 确保内容在背景之上 */
.grid-item-content {
    position: relative;
    z-index: 1;
}

/* 确保头像链接正常工作 */
.grid-item a > .flex > a {
    position: relative;
    z-index: 3;
}

/* 修复视频信息位置 */
.grid-item .img-hover .absolute {
    position: absolute !important;
}
.grid-item .img-hover .bottom-2 {
    bottom: 0.5rem !important;
}
.grid-item .img-hover .right-2 {
    right: 0.5rem !important;
}
.grid-item .img-hover .top-2 {
    top: 0.5rem !important;
}
.grid-item .img-hover .left-2 {
    left: 0.5rem !important;
}

/* 保持头像圆形 */
.grid-item .flex-shrink-0 {
    border-radius: 9999px !important;
    overflow: hidden;
}

/* 确保主内容区不会有溢出内容 */
.overflow-hidden {
    overflow: hidden;
}


/* 解决主内容区与导航栏重叠问题 - 使用固定margin而非padding */
.mt-16 {
    margin-top: 4rem; /* 64px - 导航栏高度 */
}

/* 调整移动端的间距 */
@media (max-width: 1024px) {
    .mt-16 {
        margin-top: 4rem;
    }
}

/* 确保网格项目样式正确 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}

/* 移动端适配优化 */
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .grid-item-content {
    padding: 0.5rem !important;
  }
  
    /* 增大视频卡片内的字体 */
    .grid-item-content h3 {
        font-size: 0.97rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.25rem !important;
    }      
    
    
}

/* 修改CSS样式 - 确保a标签占满整个区域且可以显示背景色 */

/* 右上角用户登入组件 */
/* Modal and dropdown animations */
.modal-enter {
  opacity: 0;
  transform: scale(0.95);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.modal-exit {
  opacity: 1;
  transform: scale(1);
}

.modal-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms, transform 300ms;
}

/* Mobile styles */
@media (max-width: 768px) {
  .three-dot-menu,
  #login-button,
  #headeruser {
    display: none !important;
  }
}

/* Toast notification styles */
.toast-notification {
  max-width: 400px;
  min-width: 300px;
}

@media (max-width: 640px) {
  .toast-notification {
    max-width: calc(100% - 2rem);
    min-width: 0;
    left: 1rem;
    right: 1rem;
  }
}

/* Form input focus style (continued) */
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 64, 240, 0.2);
  border-color: var(--primary);
}

/* Toggle switch custom styles */
.toggle-switch-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: var(--muted);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.toggle-switch-track.active {
  background-color: var(--primary);
}

.toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch-track.active .toggle-switch-thumb {
  left: calc(100% - 22px);
}

/* Radio button custom styles */
.custom-radio {
  display: flex;
  align-items: center;
}

.custom-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--primary);
}

/* Tab transition effects */
.tab-transition {
  transition: all 0.3s ease;
}

/* =========== 列表页样式 =========== */
    /* 筛选选项高亮样式 */
    .filter-item.active {
        background-color: var(--muted);
        color: var(--menu-text-hover);
        font-weight: 600;
        transition: none !important;
    }
    
    /* 分页样式 */
	.pagebar {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  margin: 2rem 0;
	}

	.pagebar > * {
	  margin: 0 0.25rem 0.5rem;
	  padding: 0.5rem 1rem;
	  border: 1px solid var(--border);
	  border-radius: var(--radius);
	  transition: all 0.2s ease;
	}

	.pagebar > *.now-page,
	.pagebar > *:hover {
	  background-color: var(--muted);
	  color: var(--menu-text-hover);
	}
    
    /* wap底部菜单 */
    @media (max-width: 1024px) {
        .main,
        #video-content {
            margin-left: 0 !important;
            padding-bottom: var(--wap-bottom-height) !important;
        }
    }
    

    
    /* 移动端适配 */
    @media (max-width: 768px) {
        #filter-options {
            max-height: 70vh;
            overflow-y-auto;
        }
        
        #filter-options .filter-item {
            display: block;
            width: 100%;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        
        #filter-options .filter-item:last-child {
            border-bottom: none;
        }
    }
    


/*========================订阅相关样式========================*/
.subscription-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  margin-left: 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscribe-btn {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.subscribe-btn:hover {
  opacity: 0.9;
}

.subscribed-btn {
  background-color: var(--muted);
  color: var(--muted-foreground);
}

.subscription-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

.subscription-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.subscription-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  background-color: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.subscription-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.subscription-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
}

.subscription-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
}

.subscription-close:hover {
  background-color: var(--muted);
  color: var(--foreground);
}

.subscription-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.subscription-action-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.subscription-action-row:hover {
  background-color: var(--muted);
}

.subscription-action-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.subscription-action-text {
  flex: 1;
  font-size: 0.875rem;
}

.subscription-list {
  overflow: visible; /* 允许子元素溢出 */
  position: relative; /* 建立新的定位上下文 */
  padding: 0 12px; /* 添加内边距，为子元素扩展留出空间 */
}

.subscription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.subscription-item-info {
  flex: 1;
}

.subscription-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.subscription-item-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

.subscription-item-actions {
  display: flex;
  gap: 0.5rem;
}

.subscription-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscription-action-add {
  background-color: var(--muted);
}

.subscription-action-add:hover {
  opacity: 0.9;
}

.subscription-action-added {
  background-color: var(--success);
  color: white;
}

.subscription-action-modify {
  background-color: var(--warning);
  color: white;
}

.subscription-action-delete {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.subscription-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subscription-form-group {
  display: flex;
  flex-direction: column;
}

.subscription-form-label {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

.subscription-form-input {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.subscription-form-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.subscription-form-checkbox {
  display: flex;
  align-items: center;
}

.subscription-form-checkbox input {
  margin-right: 0.5rem;
}

.subscription-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.newest-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: 0.65rem;
  font-weight: 500;
  margin-left: 0.5rem;
  background-color: rgba(252, 85, 49, 0.1);
  color: #fc5531;
}

html[dark="true"] .newest-badge {
  background-color: rgba(252, 85, 49, 0.2);
  color: #ff7b5a;
}

/* 订阅列表项高亮样式 */
/* 修改列表项高亮样式 */
.subscription-item.subscription-highlighted {
  background-color: var(--muted);
  border-radius: 8px;
  margin-left: -12px; /* 向左扩展 */
  margin-right: -12px; /* 向右扩展 */
  padding-left: 12px; /* 补偿左内边距 */
  padding-right: 12px; /* 补偿右内边距 */
  /* 确保内容不变形 */
  width: calc(100% + 24px); /* 增加宽度以匹配边距 */
  box-sizing: border-box; /* 使padding包含在宽度内 */
}

/* 确保子元素不受影响 */
.subscription-item.subscription-highlighted .subscription-item-info,
.subscription-item.subscription-highlighted .subscription-item-actions {
  padding: 0; /* 重置内边距 */
  margin: 0; /* 重置外边距 */
}

/* 响应式调整 */
@media (max-width: 640px) {
  .subscription-content {
    width: 95%;
    padding: 1rem;
  }
  
  .subscription-title {
    font-size: 1.25rem;
  }
  
  .subscription-action-btn {
    padding: 0.25rem 0.5rem;
  }
} 




.subscription-action-move {
  background-color: var(--warning);
  color: white;
}

.subscription-action-move:hover {
  opacity: 0.9;
}

.default-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: 0.65rem;
  font-weight: 500;
  margin-left: 0.5rem;
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

html[dark="true"] .default-badge {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* 修改工具提示样式，提高层级 */

.subscription-body {
  overflow-x: hidden; /* 防止水平滚动条 */
}

/* 订阅按钮前的loading */

.subscribe-btn-loading {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: default;
 }
 
 .loading-spinner {
   display: inline-block;
   width: 16px;
   height: 16px;
   border: 2px solid var(--loadingborder);
   border-radius: 50%;
   border-top-color: var(--menu-text-hover);
   animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
 
 
 /* 侧边栏订阅列表相关样式 */
/* 订阅列表相关样式 - 美化版 */
.side-tag li span {
    margin-left: 46px;
}

.side-tag li a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.unread-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--destructive, #ef4444);
  display: inline-block;
  margin-right: 4px;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3); /* 添加微妙的轮廓提高可见性 */
  position: relative;
  top: -0.5px; /* 微调垂直位置 */
}

/* 数字带有未读指示器时的额外样式 */
.has-unread {
  font-weight: 500; /* 未读数字稍微加粗 */
  color: var(--foreground) !important; /* 未读数字颜色更深 */
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
  
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* 未登入时订阅列表下方CSS */
#subscription-not-logged-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 右侧用户菜单悬浮层beg */
/* 用户菜单样式 - 使用CSS变量 */
.user-menu-trigger {
  position: relative;
  z-index: 90;
}

.user-menu-trigger:hover {
  background-color: transparent !important;
}

.user-info-menu {
  position: fixed;
  width: 280px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  background-color: var(--menu-bg);
  color: var(--menu-text);
  z-index: 100;
  transform-origin: top center;
  border-radius: 8px;
}

/* 菜单箭头 */
.user-info-menu .menu-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--menu-bg);
  transform: rotate(45deg);
  top: -6px;
  z-index: 1;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
}

.user-card {
  position: relative;
  z-index: 2;
  padding: 1rem;
  background-color: var(--menu-bg);
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
  background: url('/_next/static/img/user-card-bg.png') no-repeat center / 100% auto;
}

.action-links {
  position: relative;
  z-index: 2;
}

.action-links a {
  border-bottom: 1px solid var(--border-subtle);
}

.action-links a:last-child {
  border-bottom: none;
}

.action-links a:hover {
  background-color: var(--hover-bg);
}

.logout-section {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-subtle);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

/* 明亮模式下的CSS变量 */
:root {
  --menu-bg: rgba(255, 255, 255, 0.95);
  --menu-text: #333;
  --border-color: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --hover-bg: rgba(0, 0, 0, 0.05);
}

/* 暗色模式下的CSS变量 */
html[dark="true"] {
  /*--menu-bg: rgba(0, 0, 0, 0.85);*/
  --menu-bg: rgba(0, 0, 0, 0.95);
  --menu-text: #fff;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --hover-bg: rgba(255, 255, 255, 0.05);
}

/* VIP会员样式 */
.vip-badge {
  background: linear-gradient(90deg, var(--vip-from), var(--vip-to));
  color: var(--vip-text);
}

/* 正常VIP会员颜色 */
:root {
  --vip-from: #FFDF89;
  --vip-to: #F2CA5B;
  --vip-text: #663d00;
}

html[dark="true"] {
  --vip-from: #7a5e00;
  --vip-to: #d4af37;
  --vip-text: #fff;
}

/* 过期VIP会员颜色 */
.vip-badge.expired {
  --vip-from: #9ca3af;
  --vip-to: #d1d5db;
  --vip-text: #4b5563;
}

html[dark="true"] .vip-badge.expired {
  --vip-from: #4b5563;
  --vip-to: #6b7280;
  --vip-text: #e5e7eb;
}

/* VIP按钮样式 */
.vip-button {
  background: linear-gradient(90deg, var(--vip-btn-from), var(--vip-btn-to));
  color: var(--vip-btn-text);
}

.vip-button:hover {
  box-shadow: 0 2px 8px rgba(var(--vip-btn-shadow-rgb), 0.4);
}

/* 正常VIP按钮颜色 */
:root {
  --vip-btn-from: #FFDF89;
  --vip-btn-to: #F2CA5B;
  --vip-btn-text: #663d00;
  --vip-btn-shadow-rgb: 102, 61, 0;
}

html[dark="true"] {
  --vip-btn-from: #7a5e00;
  --vip-btn-to: #d4af37;
  --vip-btn-text: #fff;
  --vip-btn-shadow-rgb: 212, 175, 55;
}
/* 右侧用户菜单悬浮层end */


/* 首次访问弹出语言切换的移动端适配 */
@media (max-width: 640px) {
    .language-tip-container {
        bottom: 70px; /* 避免与移动端底部导航重叠 */
        left: 16px;
        right: 16px;
        max-width: none;
    }
    
    .language-tip {
        padding: 12px; /* 减小内边距 */
    }
    
    .tip-actions {
        flex-direction: column; /* 按钮垂直排列 */
        width: 100%; /* 确保按钮能够撑满 */
    }
    
    .switch-lang-btn,
    .dismiss-tip-btn {
        width: 100%; /* 按钮宽度撑满 */
        padding: 8px; /* 增加点击区域 */
    }
    
    /* 针对安全区域的处理（解决iPhone X及以上刘海屏问题） */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .language-tip-container {
            padding-bottom: env(safe-area-inset-bottom);
            bottom: calc(70px + env(safe-area-inset-bottom));
        }
    }
}


/* 订阅列表页面额外样式 */
/* 订阅列表页面额外样式 */
.loading-spinner {
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
}

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

/* 骨架屏样式 */
.skeleton-item {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

html[dark="true"] .skeleton-item {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 无限滚动加载时的平滑过渡 */
.video-item-enter {
    opacity: 0;
    transform: translateY(20px);
}
.video-item-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 确保图片圆角变化有过渡效果 */
.grid-item .img-hover .lazy.absolute.inset-0 {
    border-radius: 0.5rem;
    transition: border-radius 300ms ease;
}

.grid-item:hover .img-hover .lazy.absolute.inset-0 {
    border-radius: 0 !important;
}

/*************** 视频内容页 ***************/
/* 设置播放器容器最大宽度 */
/* 使用内边距来缩小播放器区域 */
.lg\\:col-span-8 {
    padding: 0 2%; /* 从两侧添加2%的内边距 */
}

/* 同时保持视频播放器自身的全宽显示 */
.video-player-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
  /* 视频内容页的特定样式 */
  body.video-content-page {
    /* 将内容区域向右移动，以便侧边栏可以滑入 */
    transition: padding-left 300ms ease;
  }
  
  /* 视频内容页侧边栏样式 */
  body.video-content-page #sidebar {
    position: fixed;
    top: 64px; /* 与头部导航栏高度一致 */
    left: 0;
    height: calc(100vh - 64px);
    width: 240px;
    z-index: 50; /* 确保在主内容上面 */
    background-color: var(--background);
    transform: translateX(-100%);
    transition: transform 300ms ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  /* 遮罩层样式 */
  #sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 45;
    opacity: 0;
    transition: opacity 300ms ease;
    display: none;
  }
  
  /* 侧边栏打开时，主内容区域样式 */
  body.sidebar-open #video-content {
    pointer-events: none; /* 当侧边栏打开时，禁止主内容区域的交互 */
  }
  
  /* 侧边栏打开时，遮罩层样式 */
  body.sidebar-open #sidebar-backdrop {
    display: block;
    opacity: 1;
  }
  
  /* 适配PC端的样式 - 确保在视频内容页不隐藏遮罩层 */
  @media (min-width: 1024px) {
    body.video-content-page #sidebar-toggle-btn {
      display: flex !important;
    }
    
    /* 视频内容页侧边栏样式 - PC端 */
    body.video-content-page.sidebar-open #video-content {
      /* 在PC端，当侧边栏打开时，可以选择将内容推开 */
      /* padding-left: 240px; */ 
      /* 或者保持在原位置，由遮罩层覆盖 - 根据需要选择 */
    }
  }


/* 视频内容页特定样式 */
    /* 宽屏模式 */
    body.theatre-mode .lg\:col-span-8 {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }
    
    body.theatre-mode .lg\:col-span-4 {
        display: none;
    }
    
    /* 视频卡片悬停效果 */
    .video-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .video-card:hover {
        transform: translateY(-2px);
    }
    
    /* 暗色模式适配 (通过Tailwind已经处理大部分，这里是额外的自定义) */
    @media (prefers-color-scheme: dark) {
        .video-description a {
            color: var(--primary);
        }
    }
    
    /* 响应式调整 */
    @media (max-width: 640px) {
        .video-controls {
            padding: 0.5rem;
        }
        
        .video-description {
            font-size: 0.875rem;
        }
    }
    
    /* 非会员覆盖层渐变背景 */
    #non-member-overlay {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
        backdrop-filter: blur(4px);
    }  

    /* 视频内容页特定样式 */
    /* 宽屏模式 */
    body.theatre-mode .aspect-video {
        transition: height 0.3s ease;
    }
    
    /* 平滑过渡效果 */
    .video-card, 
    .video-description, 
    #video-description-short, 
    #video-description-full,
    button,
    a,
    .aspect-video,
    #non-member-overlay {
        transition: all 0.3s ease;
    }
    
    /* 渐进增强背景 */
    #video-player-container[data-videocover] {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    /* 视频播放器 iframe 自适应 */
    #video-player-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    /* 权限提示覆盖层美化 */
    .permission-overlay {
        background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.9) 100%);
        backdrop-filter: blur(8px);
        animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* 按钮悬停效果增强 */
    .btn-primary, .btn-secondary {
        position: relative;
        overflow: hidden;
    }
    
    .btn-primary:after, .btn-secondary:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }
    
    .btn-primary:hover:after, .btn-secondary:hover:after {
        animation: ripple 1s ease-out;
    }
    
    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 0.5;
        }
        100% {
            transform: scale(20, 20);
            opacity: 0;
        }
    }   
    
    /* VIP会员样式 */
    .vip-badge {
        background: linear-gradient(90deg, var(--vip-from), var(--vip-to));
        color: var(--vip-text);
    }
    
    /* 正常VIP会员颜色 */
    :root {
        --vip-from: #FFDF89;
        --vip-to: #F2CA5B;
        --vip-text: #663d00;
    }
    
    html[dark="true"] {
        --vip-from: #7a5e00;
        --vip-to: #d4af37;
        --vip-text: #fff;
    }
    
    /* 过期VIP会员颜色 */
    .vip-badge.expired {
        --vip-from: #9ca3af;
        --vip-to: #d1d5db;
        --vip-text: #4b5563;
    }
    
    html[dark="true"] .vip-badge.expired {
        --vip-from: #4b5563;
        --vip-to: #6b7280;
        --vip-text: #e5e7eb;
    }
    
    /* VIP按钮样式 */
    .vip-button {
        background: linear-gradient(90deg, var(--vip-btn-from), var(--vip-btn-to));
        color: var(--vip-btn-text);
        transition: all 0.3s ease;
    }
    
    .vip-button:hover {
        box-shadow: 0 2px 8px rgba(var(--vip-btn-shadow-rgb), 0.4);
        transform: translateY(-1px);
    }
    
    /* 正常VIP按钮颜色 */
    :root {
        --vip-btn-from: #FFDF89;
        --vip-btn-to: #F2CA5B;
        --vip-btn-text: #663d00;
        --vip-btn-shadow-rgb: 102, 61, 0;
    }
    
    html[dark="true"] {
        --vip-btn-from: #7a5e00;
        --vip-btn-to: #d4af37;
        --vip-btn-text: #fff;
        --vip-btn-shadow-rgb: 212, 175, 55;
    }
    
    /* 平滑过渡效果 */
    .video-card,
    .video-player-section,
    .video-info-section,
    .aspect-video,
    button,
    a {
        transition: all 0.3s ease !important;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from { transform: translateY(10px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease forwards;
    }
    
    .slide-up {
        animation: slideUp 0.5s ease forwards;
    } 
    

/****************************宽屏模式和关灯功能beg
/* 宽屏模式下侧边栏视频列表的最大高度和滚动 */
    body.theatre-mode .side-videos {
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(155, 155, 155, 0.5) transparent; /* Firefox */
    }
    
    /* 侧边栏滚动条样式 (Webkit) */
    body.theatre-mode .side-videos::-webkit-scrollbar {
        width: 6px;
    }
    
    body.theatre-mode .side-videos::-webkit-scrollbar-track {
        background: transparent;
    }
    
    body.theatre-mode .side-videos::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.5);
        border-radius: 3px;
    }
    
    /* 推荐区域自适应网格 */
    body.theatre-mode .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
    
    /* 确保推荐卡片高度一致 */
    body.theatre-mode .video-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    body.theatre-mode .video-card > a {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    body.theatre-mode .video-card .p-3 {
        flex: 1;
    }  
    
    /* 平滑切换动画 */
    body.theatre-mode-transition * {
        transition: all 0.3s ease !important;
    }
    
    /* 播放器转场动画 */
    body.theatre-mode .aspect-video {
        animation: expand-player 0.4s ease forwards;
    }
    
    @keyframes expand-player {
        from {
            opacity: 0.8;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    /* 返回普通模式动画 */
    body:not(.theatre-mode) .aspect-video {
        animation: shrink-player 0.3s ease forwards;
    }
    
    @keyframes shrink-player {
        from {
            opacity: 0.8;
        }
        to {
            opacity: 1;
        }
    } 


/* 灯光模式相关样式 */
/* 注意：使用实际DOM元素而非CSS伪元素实现遮罩，以便更好地处理事件 */
#light-off-overlay {
  transition: opacity 0.3s ease;
}

body.light-off .video-player-container {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 关灯模式下的控制栏 */
.video-controls {
  position: relative;
  z-index: 41; /* 确保在遮罩层之上 */
}

/* 宽屏模式相关样式 */
body.theatre-mode .video-player-container {
  margin: 0 -1rem;
  width: calc(100% + 2rem);
  border-radius: 0;
}

body.theatre-mode .video-info-main-container {
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  body.theatre-mode .video-player-container {
    margin: 0 -2rem;
    width: calc(100% + 4rem);
  }
  
  #video-content.theatre-mode-active {
    padding-top: 0.5rem;
  }
}

/* 按钮活跃状态 */
.video-controls button.active {
  background-color: var(--muted);
  color: var(--primary);
}

/* 光标样式 */
#light-off-overlay {
  cursor: pointer;
}

/* 宽屏模式下的视频容器 */
.video-player-container.theatre-mode-active {
  transition: all 0.3s ease;
}


/* 关灯模式样式 */
/* 基础样式增强 */
.video-player-container {
  position: relative;
  z-index: 1; /* 默认z-index */
  transition: z-index 0.01s, transform 0.3s ease, box-shadow 0.3s ease;
}

/* 关灯模式下的视频容器增强 */
body.light-off .video-player-container {
  z-index: 41;
  position: relative;
  /* 添加一些视觉反馈，轻微抬高效果 */
  transform: translateY(0);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
}

/* 关灯模式下视频控制栏的增强样式 */
body.light-off .video-controls {
  z-index: 41;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 创建一个可滚动容器，确保视频+控制栏可以完整查看 */
body.light-off #video-content {
  scroll-margin-top: 1rem;
  scroll-behavior: smooth;
}

/* 当关灯模式激活时，确保可以滚动到视频区域 */
body.light-off.scrolled-to-video .video-player-container {
  scroll-margin-top: 1rem;
}




/* 关灯模式样式 */
body.light-off::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9); /* 深色遮罩 */
    z-index: 40;
    pointer-events: auto;
}

/* 元素在遮罩层之上的管理 */
body.light-off .video-player-container, /* 播放器容器 */
body.light-off .video-controls /* 播放器控制栏 */ {
    position: relative; /* 确保 z-index 生效 */
    z-index: 41; /* 比遮罩层高 */
}


body.light-off header /* 顶部导航栏 */{
    position: relative; /* 确保 z-index 生效 */
    z-index: 39; /* 比遮罩层低 */
}

/* 播放器下方的视频信息区（标题等），在关灯模式下，保持被遮罩 */
body.light-off .video-info-main-container {
    /* 无需特殊z-index，保持在遮罩之下 */
}


/* 宽屏模式 (Theatre Mode) 样式 */
body.theatre-mode-active .video-player-container {
    max-width: 100%;
    padding-top: 0 !important;/* 确保播放器与导航栏0间距 */
}

/* 确保在宽屏+关灯的组合状态下，依然保持0顶部间距 */
body.theatre-mode-active.light-off .video-player-container {
    max-width: 100%;
    padding-top: 0 !important;/* 确保播放器与导航栏0间距 */
}

/* 处理宽屏模式与关灯模式的组合状态 */
body.theatre-mode-active.light-off .video-player-container{
  /* 宽屏+关灯模式下，确保视频区域始终在顶部 */
  transform: translateY(0);
  margin-top: 0;
}


/* 宽屏模式 (Theatre Mode) 样式 */
body.theatre-mode-active.light-off main#video-content {
    /* padding-left: 0 !important; (由 lg:pl-0 控制) */
    /* max-width: 100%; */
    /* 在宽屏模式下，让播放器距离顶部导航间距为0，需要移除main#video-content的默认上边距 */
    padding-top: 0 !important;
}


body.theatre-mode-active #video-page-grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* 仅在屏幕宽度大于 768px (即非移动设备) 时应用剧场模式样式 */
@media (min-width: 768px) {

    body.theatre-mode-active #main-video-column {
        width: calc(10 / 12 * 100%);
        max-width: calc(10 / 12 * 100%);
        flex-basis: calc(10 / 12 * 100%);
        flex-grow: 0;
        flex-shrink: 0;
    }

    body.theatre-mode-active #sidebar-column {
        width: calc(10 / 12 * 100%);
        max-width: calc(10 / 12 * 100%);
        flex-basis: calc(10 / 12 * 100%);
        flex-grow: 0;
        flex-shrink: 0;
        margin-top: 1.5rem;
    }

    /* 让精彩推荐区域也占10列并居中 */
    body.theatre-mode-active .container-fluid .mt-8 {
        width: calc(10 / 12 * 100%);
        max-width: calc(10 / 12 * 100%);
        margin-left: auto;
        margin-right: auto;
    }
}

/* 确保推荐视频网格适应新宽度 */
body.theatre-mode-active .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    width: 100%;
}


body.theatre-mode-active .video-player-container {
    max-width: 100%;
    margin-top: 0;
}



/* 非宽屏模式 */
body:not(.theatre-mode-active) main#video-content,
body:not(.theatre-mode-active) .video-player-container{
    /* Tailwind的 pt-16 lg:pt-16 会自动恢复 /*
    /*padding-top: 0 !important;*/
}

/* 非宽屏模式关灯 和顶部菜单0间距 */
body:not(.theatre-mode-active).light-off main#video-content{
    padding-top: 0 !important;
}

body:not(.theatre-mode-active) .video-player-container {
    max-width: 100%;
    margin-top: 0 !important;
}

body:not(.theatre-mode-active) #video-page-grid-container {
    display: grid;
    align-items: initial;
}

body:not(.theatre-mode-active) #main-video-column {
    width: auto;
    max-width: none;
    flex-basis: auto;
}

/* 重要: 确保非宽屏模式下，移除之前可能添加的 margin-bottom */
body:not(.theatre-mode-active) .video-player-container,
body.theatre-mode-active:not(.light-off) .video-player-container { /* 宽屏但未关灯时也移除 */
    margin-bottom: 0;
}


body:not(.theatre-mode-active) #sidebar-column {
    width: auto;
    max-width: none;
    flex-basis: auto;
    margin-top: 0;
}
/****************************宽屏模式和关灯功能end

/****************************点赞功能beg
/* 按钮激活状态的视觉反馈 */
#light-off-toggle.active,
#theatre-mode-toggle.active {
    background-color: var(--muted);
    color: var(--menu-text-hover);
}

/* 滚动条处理 */
body.no-scroll {
    overflow: hidden;
}

@media (min-width: 768px) {
    body.theatre-mode-active .md\:py-6 {
        padding-top: 0;
    }
}

/* 大屏幕时确保视频容器和控制栏始终可见 */
@media (min-width: 768px) {
  /* 使用flex布局包裹视频和控制栏 */
  body:not(.theatre-mode-active).light-off .video-player-container,
  body.theatre-mode-active .video-player-container,
  body.theatre-mode-active.light-off .video-player-container{
    display: flex;
    flex-direction: column;
    max-height: calc(90vh - 20px); /* 减去底部距离的高度 */
    margin-bottom: 20px; /* 底部距离 */
  }

/******非宽屏模式 开启灯光时特殊处理*****/    
  
  /* 确保视频区域可以收缩 */
  body:not(.theatre-mode-active).light-off .video-player-container .aspect-video,
  body.theatre-mode-active .video-player-container .aspect-video,
  body.theatre-mode-active.light-off .video-player-container .aspect-video{
    flex: 1;
    min-height: 0; /* 关键：允许flex项目收缩到小于内容高度 */
  }
  
  /* 确保控制栏始终显示且不压缩 */
  body:not(.theatre-mode-active).light-off .video-controls,
  body.theatre-mode-active .video-controls,
  body.theatre-mode-active.light-off .video-controls{
    flex-shrink: 0; /* 防止控制栏被压缩 */
  }

}

/* 移动端适配 */
@media (max-width: 768px) {
  body.theatre-mode .video-player-container {
    margin: 0 -1rem;
    width: calc(100% + 2rem);
  }
}

/* 小屏幕确保视频始终可见 */
@media (max-width: 768px) {
  body.light-off .video-player-container {
    max-height: 90vh;
  }
  /* 小屏幕上控制条紧贴视频底部 */
  body.light-off .video-controls {
    position: relative;
    bottom: 0;
    width: 100%;
  }
}

/* 自动滚动到视频区域功能相关样式 */
@media (min-height: 700px) {
  body.light-off .video-player-container {
    /* 在较高的屏幕上提供更好的观看体验 */
    max-height: none;
  }
}


/* 点赞/点踩按钮激活状态的通用样式 */
/* 点赞点踩样式 */
/* 点赞点踩样式 */
.video-attitude-container {
    position: relative;
}

/* 按钮基础样式 */
#like-button,
#dislike-button {
    position: relative;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* 按钮活跃状态 - 明亮模式 */
#like-button.active,
#dislike-button.active {
    background-color: var(--muted);
}

/* 按钮活跃状态图标颜色 - 明亮模式 */
#like-button.active .like-icon-filled,
#dislike-button.active .dislike-icon-filled {
    color: var(--foreground); /* 蓝色，明亮模式下 */
}

/* 按钮活跃状态 - 暗色模式 */
html[dark="true"] #like-button.active,
html[dark="true"] #dislike-button.active {
    background-color: var(--muted);
}

/* 按钮活跃状态图标颜色 - 暗色模式 */
html[dark="true"] #like-button.active .like-icon-filled,
html[dark="true"] #dislike-button.active .dislike-icon-filled {
    color: #ffffff; /* 白色，暗色模式下 */
}

/* 点赞动画 */
.like-animation {
    animation: likeAnimation 0.5s ease-in-out;
}

@keyframes likeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 点赞粒子效果容器 */
.like-particles {
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    z-index: 1000;
}

/* 点赞粒子 - 明亮模式 */
.like-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation: particleAnimation 0.6s ease-out;
    background-color: var(--foreground); /* 蓝色，明亮模式 */
}

/* 点赞粒子 - 暗色模式 */
html[dark="true"] .like-particle {
    background-color: #ffffff; /* 白色，暗色模式 */
}

/* 点赞粒子动画 */
@keyframes particleAnimation {
    0% { 
        transform: translateY(0) translateX(0); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(-20px) translateX(var(--x-offset)); 
        opacity: 0; 
    }
}

/* 图标切换效果 */
.like-icon-outline,
.dislike-icon-outline,
.like-icon-filled,
.dislike-icon-filled {
    transition: opacity 0.2s ease;
}

#like-button.active .like-icon-outline,
#dislike-button.active .dislike-icon-outline {
    display: none;
}

#like-button:not(.active) .like-icon-filled,
#dislike-button:not(.active) .dislike-icon-filled {
    display: none;
}

#like-button.active .like-icon-filled,
#dislike-button.active .dislike-icon-filled {
    display: block;
}


/*
==========================================================================
  稍后观看侧边栏 (Watch Later Sidebar) - 核心样式
==========================================================================
*/
.watchlater-sidebar {
    /* 基础容器样式 */
    margin-bottom: 0; /* 作为父卡片的一部分，由父级控制外边距 */
    border-radius: 0; /* 父卡片负责圆角 */
    box-shadow: none;   /* 父卡片负责阴影 */
    border-bottom: 1px solid var(--border-color); /* 与下方“相关视频”标题的分割线 */
    transition: padding-bottom 0.3s ease-in-out; /* 用于收起/展开时的内边距调整 */
}

.watchlater-sidebar.list-collapsed {
    border-bottom-color: transparent; /* 列表收起时，不需要底部分割线 */
}

/* 侧边栏头部 ("稍后观看"标题、计数、控制按钮) */
.watchlater-sidebar .watchlater-header {
    /* Tailwind CSS 类已处理 flex, p-3 等基础布局 */
    transition: margin-bottom 0.3s ease-in-out; /* 用于收起时可能的边距调整 */
}
.watchlater-sidebar.list-collapsed .watchlater-header {
     margin-bottom: 0; /* 列表收起时，头部下方无额外间距 */
}

/* 头部标题 "稍后观看" */
.watchlater-sidebar .watchlater-header h3 {
    transition: font-size 0.3s ease-in-out, font-weight 0.3s ease-in-out;
    /* 默认 (展开时): text-base font-medium (Tailwind) */
}
.watchlater-sidebar.list-collapsed .watchlater-header h3 {
    /* 收起时: text-sm font-normal (Tailwind) */
}

/* 头部计数 "1/5" */
.watchlater-sidebar .watchlater-header .text-sm { /* 指向计数span的默认class */
    transition: font-size 0.3s ease-in-out;
    /* 默认 (展开时): text-sm (Tailwind) */
}
.watchlater-sidebar.list-collapsed .watchlater-header .text-sm {
    /* 收起时: text-xs (Tailwind) */
}

/* 头部右侧的 收起/展开 按钮 (X 和 V 图标切换) */
.watchlater-collapse-toggle-btn .lucide { /* SVG图标本身 */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.watchlater-collapse-toggle-btn .icon-expand.hidden, /* 通过JS添加/移除 'hidden' */
.watchlater-collapse-toggle-btn .icon-close.hidden {
    opacity: 0;
    /* display: none; 由 Tailwind hidden class 处理 */
}
/* (确保 Tailwind 的 hidden 类是 display: none !important; 或者JS直接操作display) */


/* 视频列表容器 */
.watchlater-video-list {
    transition: maxHeight 0.35s cubic-bezier(0.4, 0, 0.2, 1), /* 平滑的展开/收起动画 */
                opacity 0.3s ease-in-out,
                padding 0.3s ease-in-out,
                border-width 0.3s ease-in-out;
    overflow-y: auto; /* 列表展开时允许内容滚动 */
    /* max-height 由JS根据展开状态和宽屏模式动态设置 (350px/450px) */
}

.watchlater-video-list.collapsed { /* 列表收起时的状态 */
    max-height: 0px !important;   /* 强制高度为0 */
    opacity: 0 !important;        /* 完全透明 */
    padding-top: 0 !important;    /* 移除内边距 */
    padding-bottom: 0 !important;
    border-width: 0 !important;   /* 移除边框 (如果列表本身有) */
    overflow: hidden;             /* 关键：隐藏超出的内容 */
}

/* 视频列表滚动条样式 */
.watchlater-video-list {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(155, 155, 155, 0.5) transparent; /* Firefox: 滑块颜色 轨道颜色 */
}
.watchlater-video-list::-webkit-scrollbar { /* Webkit (Chrome, Safari, Edge) */
    width: 6px;
}
.watchlater-video-list::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明 */
}
.watchlater-video-list::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5); /* 滑块颜色 */
    border-radius: 3px;
}
html[dark="true"] .watchlater-video-list::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.7); /* 暗色模式下滚动条颜色稍深 */
}


/*
==========================================================================
  稍后观看侧边栏 - 列表项 (Video Item) 样式
==========================================================================
*/
.watchlater-video-item {
    /*border-bottom: 1px solid var(--border-color);*/ /* 项之间的默认分割线 */
    transition: background-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
    /* `group` class 由 JS 添加到此元素，用于 group-hover 效果 */
}
.watchlater-video-item:last-child {
    border-bottom: none; /* 列表最后一项无底部分割线 */
}

/* 前缀图标容器 (数字/播放图标/悬停摇曳图标) */
.item-prefix-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
/* 前缀图标容器内的SVG图标或数字span */
.item-prefix-icon .lucide,
.item-prefix-icon .item-number,
.item-prefix-icon svg,
.item-prefix-icon .icon-hover-drag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease-in-out;
}
.item-prefix-icon .item-number {
    font-size: 0.875rem; /* 14px */
    color: var(--muted-foreground); /* 默认数字颜色 */
    z-index: 1; /* 确保数字显示在任何背景图标之上 (如果设计需要) */
}



/* 当前正在播放的列表项的特殊样式 */
.watchlater-video-item.current-playing-item {
    /* 随机背景色由JS通过内联 style 设置 */
    color: var(--foreground); /* 确保文字在动态背景色上可读 (可能需要根据背景亮度调整) */
    border-left: 3px solid var(--primary); /* 左侧高亮指示条 */
    padding-left: calc(0.5rem - 3px); /* Tailwind p-2 是 0.5rem，减去边框宽度以保持对齐 */
}
.watchlater-video-item.current-playing-item .item-prefix-icon .lucide-play {
    color: var(--primary); /* 播放图标颜色 */
}

.watchlater-video-item.item-hovered {
    z-index: 5;
}

/* 非当前播放的列表项，在鼠标悬停时的样式 */
.watchlater-video-item.not-current-item.item-hovered {
    /* 悬停背景色和阴影由JS通过内联 style 设置 */
    /* background-color: rgba(232, 232, 232, 0.949); (亮色模式示例) */
    /* background-color: rgba(55, 65, 81, 0.9); (暗色模式示例) */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.15); (立体阴影) */
    border-bottom-color: transparent; /* 悬停时隐藏默认分割线，让阴影效果更突出 */
}
/* 悬停时显示的“摇曳”图标 (grip-vertical) */
.watchlater-video-item.not-current-item.item-hovered .item-prefix-icon .icon-hover-drag {
    /* SVG 由JS直接插入，此处无需特定样式，除非要覆盖默认lucide颜色 */
    color: var(--muted-foreground); /* 摇曳图标颜色 */
}


/* 拖拽手柄 (位于列表项最左侧，group-hover 时显示) */
.watchlater-drag-actual-handle {
    color: var(--muted-foreground); /* 拖拽手柄图标颜色 */
    transition: opacity 0.2s ease;
    /* Tailwind: absolute left-1 top-1/2 -translate-y-1/2 w-4 h-full ... cursor-grab opacity-0 group-hover:opacity-60 */
}
/* 确保 group-hover 效果能正确显示拖拽手柄 */
.watchlater-video-item:hover .watchlater-drag-actual-handle { /* 使用 :hover 兼容性更好 */
    opacity: 0.6 !important; /* 确保可见性 */
}
/* 当前播放项不应显示拖拽手柄 */
.watchlater-video-item.current-playing-item .watchlater-drag-actual-handle {
    opacity: 0 !important;
    pointer-events: none; /* 禁止交互 */
}


/* 列表项右侧的三点菜单按钮 */
.watchlater-video-item .video-menu-button {
    /* Tailwind: absolute top-2 right-2 p-1.5 rounded-full ... opacity-0 group-hover:opacity-100 ... */
    z-index: 10; /* 确保菜单按钮在列表项内容之上，易于点击 */
    transition: all 0.2s ease-in-out; /* 添加过渡效果 */
}

/* 悬停时的三点菜单样式 */
.watchlater-video-item:hover .video-menu-button {
    opacity: 1;
}

/* 菜单按钮和下拉菜单样式增强 */
/*
.video-menu-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 20;
    transition: all 0.2s ease-in-out;
}
*/

/* 三点菜单的下拉容器 */
.watchlater-dropdown {
    position: absolute;
    top: 0;
    right: 0.5rem;
    z-index: 100;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: 160px;
}

/*
==========================================================================
  宽屏模式和关灯模式对“稍后观看”侧边栏的适配
==========================================================================
*/
/* 当播放器处于宽屏模式时 (body.theatre-mode-active) */
body.theatre-mode-active .lg\\:col-span-3 .watchlater-sidebar.theatre-mode-styles-applied .watchlater-video-list {
    /* max-height: 450px;  -> 最大高度由JS动态调整 */
}
/* 列表收起时，即使在宽屏模式下，高度也应为0 */
body.theatre-mode-active .lg\\:col-span-3 .watchlater-sidebar.theatre-mode-styles-applied.list-collapsed .watchlater-video-list {
    max-height: 0px !important;
}

/* 当页面处于关灯模式时 (body.light-off) */
body.light-off .lg\\:col-span-3 .watchlater-sidebar {
    position: relative; /* 必须设置 position 才能使 z-index 生效 */
    z-index: 41;        /* 与视频播放器容器同级或略低，但高于遮罩层 (遮罩层 z-index: 40) */
    border-color: rgba(255, 255, 255, 0.1); /* 关灯模式下边框颜色可能需要调整以适应深色背景 */
    /* 可以考虑在关灯模式下，如果主题是暗色，背景色再深一点或有特殊效果 */
}
html[dark="true"].light-off .lg\\:col-span-3 .watchlater-sidebar {
    /* 示例：关灯 + 暗色主题下的背景调整 */
    /* background-color: hsl(var(--background-dark-mode-hsl) / 0.95); */ /* 更不透明或略微不同的背景 */
}


/*
==========================================================================
  外部视频项 (原侧边栏、推荐视频) 的三点菜单样式
==========================================================================

/* 确保前缀图标容器中的所有元素完全居中显示 */
.item-prefix-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* 重要：删除原有的绝对定位，改用flex居中 */
.item-prefix-icon .lucide,
.item-prefix-icon .item-number,
.item-prefix-icon .icon-hover-drag {
    /* 删除绝对定位相关样式 */
    position: static;
    top: auto;
    left: auto;
    transform: none;
    /* 使用flexbox自动居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 拖拽手柄样式优化 */
.watchlater-drag-actual-handle {
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 15; /* 确保在其他元素之上 */
}

.watchlater-video-item:hover .watchlater-drag-actual-handle {
    opacity: 0.6;
}

/* 确保当前播放项不显示拖拽手柄 */
.watchlater-video-item.current-playing-item .watchlater-drag-actual-handle {
    display: none;
}

/* 悬停效果增强 */
.watchlater-video-item.item-hovered {
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 0 rgba(0,0,0,0.05), 0 -1px 0 rgba(0,0,0,0.05) !important;
}

/* 原侧边栏视频项的三点菜单按钮 */
.original-video-menu-button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 25;
    padding: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.original-sidebar-video-item-wrapper:hover .original-video-menu-button,
.video-card:hover .original-video-menu-button {
    opacity: 1;
}

.original-video-menu-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 确保移动端可见 */
@media (max-width: 768px) {
    .original-video-menu-button {
        opacity: 0.7;
        background-color: rgba(0, 0, 0, 0.7);
    }
}

/* 下拉菜单增强 */
.original-video-dropdown {
    position: absolute;
    top: 2rem;
    right: 0.25rem;
    z-index: 100;
    min-width: 12rem;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0.25rem;
}

.original-video-dropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}

.original-video-dropdown button:hover {
    background-color: var(--accent);
}

/* 用于解决滚动条抖动问题 */
.video-list-scroll-container {
    scrollbar-gutter: stable;
    /* 可选: 如果您希望完全隐藏滚动条但仍可滚动 */
    /*
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
    */
}

/* 三点菜单按钮的可见性控制 */
.menu-trigger-button {
  opacity: 0;
  transition: opacity 0.15s ease-out; /* 平滑过渡 */
}

/* .group 类应存在于 videoItem 上 */
.group:hover .menu-trigger-button,
.group:focus-within .menu-trigger-button { /* 键盘聚焦时也显示，增强可访问性 */
  opacity: 1;
}

/* 针对触摸设备或小屏幕，始终显示菜单按钮 */
@media (pointer: coarse), (max-width: 768px) {
  .menu-trigger-button {
    opacity: 1 !important; /* 使用 !important 确保覆盖桌面端的 hover 效果 */
  }
}

/* 下拉菜单的自定义颜色 */
.custom-dropdown {
    color: var(--link-color);
    background-color: var(--card);
    /* 您可能需要根据您的设计系统调整边框和阴影，或使用已有的CSS变量 */
    border: 1px solid var(--border, #e0e0e0); /* --border 是一个示例变量 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 类似 Tailwind shadow-lg */
}

/* 下拉菜单项的悬停效果 (如果需要，也可以使用CSS变量) */
.custom-dropdown .dropdown-item:hover {
    /*background-color: var(--accent, #f0f0f0);*/ /* --accent 是一个示例变量 */
    /* color: var(--accent-foreground); */ /* 如果悬停时文本颜色也需要改变 */
}

/* 使用更高的特异性确保覆盖默认的 hover:bg-accent */
#watchlater-sidebar .watchlater-dropdown .dropdown-item.remove-video-btn:hover {
    background-color: transparent !important; /* 移除背景色 */
    /* 文字颜色已由 .text-destructive 控制, 如果需要统一 var(--link-color) 则取消注释下一行 */
    /* color: var(--link-color) !important; */
}

/* 当前播放项的特殊样式类 (仅用于标识，背景色由JS动态设置) */
.current-playing-item {
    /* 可以添加其他非背景色的样式 */
}

/* 非当前播放项的样式类 */
.not-current-item {
    /* 可以添加特有样式 */
}

/* 拖拽相关的样式类 (通常由SortableJS库的默认设置或您自定义的CSS提供) */
.sortable-ghost {
  opacity: 0.4;
  background: #c8ebfb;
}
.sortable-chosen {
  /* 被选中项的样式 */
}
.sortable-drag {
  /* 拖拽过程中的样式 */
}

/* --- watchLaterSidebar 模块 CSS */
#watchlater-sidebar {
    border: 1px solid var(--border, #e0e0e0); /* 边框 */
    border-radius: 0.5rem; /* 上下圆角 (8px) */
    margin-bottom: 1rem; /* 与下方内容间距 */
    /* 暗色/亮色模式的阴影 */
    box-shadow: 
        0 4px 6px -1px var(--shadow-color-base, rgba(0,0,0,0.1)), /* 主阴影 */
        0 2px 4px -2px var(--shadow-color-base, rgba(0,0,0,0.1)), /* 次级阴影 */
        inset 0 1px 0 0 var(--highlight-color-soft, rgba(255,255,255,0.05)), /* 内部顶部高光 (暗模式更明显) */
        inset 0 -1px 0 0 var(--shadow-color-inset, rgba(0,0,0,0.05)); /* 内部底部阴影 (亮模式更明显) */
}

/* 外部视频卡片的三点菜单按钮基础样式 */
.external-video-menu-button {
    padding: 0.25rem; /* 4px padding, 可按需调整 */
    color: var(--muted-foreground); /* 默认颜色 */
    transition: opacity 0.15s ease-out, color 0.15s ease-out;
    opacity: 0; /* PC端默认隐藏 */
}

.external-video-menu-button:hover {
    color: var(--foreground); /* 悬停时颜色加深 */
}

/* PC端：父元素(.group)悬停时显示按钮 */
.group:hover .external-video-menu-button,
.group:focus-within .external-video-menu-button {
    opacity: 1;
}

/* 移动端：始终显示按钮 */
@media (pointer: coarse), (max-width: 768px) {
    .external-video-menu-button {
        opacity: 1 !important;
        /* 移动端可能需要调整颜色使其在背景上更明显 */
        /* color: var(--foreground); */ 
        /* background-color: rgba(0,0,0,0.1); /* 酌情添加轻微背景以便在复杂图片上可见 */
        /* border-radius: 50%; */
    }
}

/* 外部视频操作的下拉菜单样式 (类似 .custom-dropdown) */
.external-video-dropdown {
    min-width: 180px; /* 根据内容调整 */
    color: var(--link-color);
    background-color: var(--muted);
    border: 1px solid var(--border, #e0e0e0);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50; /* 确保在卡片之上 */
}
[dark="true"] .external-video-dropdown,
html.dark .external-video-dropdown {
    border-color: var(--border-dark, #374151);
}


/* 问题 2.6: 外部视频操作下拉菜单项悬停无背景色，文字颜色 var(--link-color) */
.external-video-dropdown .external-dropdown-item:hover {
    background-color: transparent !important; /* 移除背景色 */
    /* color: var(--link-color) !important; */ /* 确保文字颜色，如果基础样式不是这个 */
}
.external-video-dropdown .external-dropdown-item {
    color: var(--link-color); /* 确保基础文字颜色 */
    /* 其他样式，如 padding, display flex 等 */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    font-size: 0.875rem; /* 14px */
    width: 100%;
    text-align: left;
    border-radius: 0.25rem; /* 4px */
}

/* 用于图片加载失败的占位符样式 (如果之前没有的话) */
.img-error-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--muted-foreground);
    opacity: 0.5;
}
.img-error-icon svg {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
}
/* --- 图标部分 CSS */
/* 收藏按钮样式 */
.video-favorite-button svg {
    fill: none;
    stroke: currentColor;
    transition: fill 0.2s ease, color 0.2s ease;
}

.video-favorite-button.favorited svg {
    fill: var(--foreground);
    stroke: var(--foreground);
}

.video-favorite-button.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 订阅按钮加载状态 
.loading-spinner {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: default;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
*/