body {
  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
    This allows bigger images of media on listings for large screens
    It would be great to adapt to other sizes, but this requires a good refaftoring
     */

  @media screen and (min-width: 2200px) {
      --default-item-width: 342px !important;
      --default-max-item-width: 342px !important;
      --default-item-margin-right-width: 17px !important;
      --default-item-margin-bottom-width: 27px !important;
  }
}

/* ========================================
   🎨 Modern Video Card Enhancements v3.0
   ✨ 灵动版 - 更多微动画和交互效果
   ======================================== */

/* 卡片容器 */
.items-list .item {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(200, 200, 220, 0.3) !important;
  position: relative;
}

/* 悬停效果 */
.items-list .item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(102, 126, 234, 0.1) !important;
  z-index: 10;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 缩略图容器 */
.items-list .item .item-thumb {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  position: relative;
}

/* 缩略图悬停 - 多层渐变遮罩 */
.items-list .item .item-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 50% 120%, rgba(102, 126, 234, 0.3) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.items-list .item:hover .item-thumb::before {
  opacity: 1;
}

/* 炫酷播放按钮 - 带涟漪效果 */
.items-list .item .item-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  box-shadow:
    0 10px 30px rgba(102, 126, 234, 0.6),
    0 0 0 0 rgba(102, 126, 234, 0.4),
    inset 0 -3px 10px rgba(0,0,0,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  background-size: 30px 30px;
}

.items-list .item:hover .item-thumb::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  animation: playButtonPulse 1.5s ease-in-out infinite;
}

@keyframes playButtonPulse {
  0% {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6), 0 0 0 0 rgba(102, 126, 234, 0.5);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4), 0 0 0 15px rgba(102, 126, 234, 0);
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6), 0 0 0 0 rgba(102, 126, 234, 0);
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 涟漪扩散效果 */
.items-list .item .item-thumb .ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(102, 126, 234, 0.5);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: 1;
}

.items-list .item:hover .item-thumb .ripple {
  animation: rippleExpand 1.5s ease-out infinite;
}

@keyframes rippleExpand {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* GIF预览增强 - 悬停时显示并轻微晃动 */
.items-list .item .item-img-preview {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}

.items-list .item:hover .item-img-preview {
  transform: scale(1.1);
  opacity: 1 !important;
  visibility: visible !important;
  animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: scale(1.1) translateY(0); }
  50% { transform: scale(1.1) translateY(-3px); }
}

/* 时长标签 - 毛玻璃 + 微动画 */
.items-list .item .item-duration > * {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.items-list .item:hover .item-duration > * {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* ========================================
   📝 卡片内容区域美化
   ======================================== */

/* 内容区域容器 */
.items-list .item .item-main {
  padding: 14px 14px 16px !important;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,255,0.5) 100%);
}

/* 标题样式 */
.items-list .item .item-main h3 {
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 0 10px 0 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.2px;
  transition: all 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.items-list .item .item-main h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

.items-list .item:hover .item-main h3 {
  color: #667eea !important;
}

/* 元信息容器 */
.items-list .item .item-meta {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 作者区域 */
.items-list .item .item-author {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.items-list .item .item-author a {
  font-weight: 600 !important;
  color: #475569 !important;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none !important;
}

.items-list .item .item-author a::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.items-list .item .item-author a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 30px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 2px;
}

.items-list .item .item-author a:hover {
  color: #667eea !important;
}

.items-list .item .item-author a:hover::after {
  transform: scaleX(1);
}

/* 观看次数和日期 */
.items-list .item .item-views,
.items-list .item .item-date {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.items-list .item .item-views::before {
  content: '👁';
  font-size: 11px;
}

.items-list .item .item-date::before {
  content: '📅';
  font-size: 10px;
}

/* 分隔符美化 */
.items-list .item .item-views + .item-date::before {
  content: '📅';
  margin-left: 0;
}

/* 悬停时元信息高亮 */
.items-list .item:hover .item-views,
.items-list .item:hover .item-date {
  color: #667eea !important;
}

/* 描述文字 */
.items-list .item .item-description {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部彩虹进度条 - 流动效果 */
.items-list .item .item-thumb .hover-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    #ff6b6b, #feca57, #48dbfb, #ff6b9d, #c56cf0, #667eea, #ff6b6b
  );
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.items-list .item:hover .item-thumb .hover-bar {
  transform: scaleX(1);
  animation: flowingGradient 2s linear infinite;
}

@keyframes flowingGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 入场动画已移除，避免与悬停效果冲突 */

/* ========================================
   🌙 暗黑模式 - 霓虹风格
   ======================================== */
[data-theme="dark"] .items-list .item {
  background: linear-gradient(165deg, rgba(35,35,45,0.98) 0%, rgba(25,25,35,0.95) 100%);
  border: 1px solid rgba(102, 126, 234, 0.15);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .items-list .item::before {
  filter: blur(12px);
}

[data-theme="dark"] .items-list .item:hover {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(102, 126, 234, 0.2),
    0 0 100px rgba(118, 75, 162, 0.1);
  border-color: rgba(102, 126, 234, 0.4);
}

[data-theme="dark"] .items-list .item:hover::before {
  opacity: 0.8;
}

/* 暗黑模式 - 内容区域 */
[data-theme="dark"] .items-list .item .item-main {
  background: linear-gradient(180deg, rgba(30,30,40,0) 0%, rgba(25,25,35,0.5) 100%);
}

[data-theme="dark"] .items-list .item .item-main h3 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .items-list .item:hover .item-main h3 {
  color: #a8c0ff !important;
}

[data-theme="dark"] .items-list .item .item-meta {
  color: #94a3b8 !important;
}

[data-theme="dark"] .items-list .item .item-author a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .items-list .item .item-author a::before {
  background: linear-gradient(135deg, #a8c0ff 0%, #c8b6ff 100%);
}

[data-theme="dark"] .items-list .item .item-author a:hover {
  color: #a8c0ff !important;
}

[data-theme="dark"] .items-list .item .item-views,
[data-theme="dark"] .items-list .item .item-date {
  color: #64748b !important;
}

[data-theme="dark"] .items-list .item:hover .item-views,
[data-theme="dark"] .items-list .item:hover .item-date {
  color: #a8c0ff !important;
}

[data-theme="dark"] .items-list .item:hover .item-duration > * {
  background: linear-gradient(135deg, rgba(168, 192, 255, 0.9), rgba(200, 182, 255, 0.9));
}

/* ========================================
   ✨ 推荐页面标题 - 超级灵动版
   ======================================== */
#recommended-media .media-list-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent) 1;
  position: relative;
}

#recommended-media .media-list-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #667eea, #f093fb, #667eea, transparent);
  background-size: 200% 100%;
  animation: shimmerLine 3s linear infinite;
}

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

#recommended-media .media-list-header h1,
#recommended-media .media-list-header .media-list-header-title {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #764ba2 75%,
    #667eea 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: waveGradient 4s ease infinite;
  position: relative;
  letter-spacing: -0.5px;
}

#recommended-media .media-list-header h1::before,
#recommended-media .media-list-header .media-list-header-title::before {
  content: '🎬';
  font-size: 1.6rem;
  -webkit-text-fill-color: initial;
  animation: wiggle 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes waveGradient {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.1); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(10deg) scale(1.1); }
}

/* 页面整体呼吸感 */
#recommended-media .items-list-wrap {
  animation: pageBreath 6s ease-in-out infinite;
}

@keyframes pageBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
}

/* ========================================
   📱 响应式
   ======================================== */
@media (max-width: 768px) {
  .items-list .item {
    border-radius: 14px;
  }

  .items-list .item:hover {
    transform: translateY(-8px) scale(1.01);
  }

  .items-list .item .item-thumb::after {
    width: 56px;
    height: 56px;
    background-size: 26px 26px;
  }

  #recommended-media .media-list-header h1,
  #recommended-media .media-list-header .media-list-header-title {
    font-size: 1.6rem;
  }

  /* 移动端减少动画以提高性能 */
  .items-list .item {
    animation: fadeInUp 0.5s ease forwards;
  }

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

/* 触摸设备优化 */
@media (hover: none) {
  .items-list .item .item-thumb::after {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.85);
  }

  .items-list .item:hover {
    transform: translateY(-4px);
  }

  .items-list .item::before {
    display: none;
  }
}

/* ========================================
   🎪 额外的交互细节
   ======================================== */

/* 卡片点击波纹效果 */
.items-list .item .item-thumb {
  overflow: hidden;
}

/* 视图数和日期的悬停效果 */
.items-list .item .item-views,
.items-list .item .item-date {
  transition: all 0.3s ease;
}

.items-list .item:hover .item-views,
.items-list .item:hover .item-date {
  color: #667eea;
}

/* 平滑滚动优化 */
.items-list {
  scroll-behavior: smooth;
}

/* ========================================
   🎬 播放详情页右侧播放列表美化
   ======================================== */

/* 播放列表容器 */
.playlist-view-wrap {
  margin-bottom: 20px;
}

.playlist-view {
  border-radius: 16px !important;
  border: none !important;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(248,250,255,0.95) 100%);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 播放列表头部 */
.playlist-view .playlist-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 16px 20px !important;
  position: relative;
}

.playlist-view .playlist-title {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.playlist-view .playlist-title a {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.playlist-view .playlist-meta {
  color: rgba(255,255,255,0.85) !important;
  margin-top: 6px !important;
  font-size: 13px !important;
}

.playlist-view .playlist-meta a {
  color: rgba(255,255,255,0.9) !important;
}

.playlist-view .playlist-meta a:hover {
  color: #fff !important;
}

.playlist-view .playlist-meta .counter {
  color: rgba(255,255,255,0.75) !important;
}

/* 展开/收起按钮 */
.playlist-view .toggle-playlist-view {
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.playlist-view .toggle-playlist-view:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: scale(1.1);
}

/* 播放列表操作按钮区域 */
.playlist-view .playlist-actions {
  padding: 8px 12px !important;
  background: rgba(102, 126, 234, 0.05);
}

/* 播放列表媒体区域 */
.playlist-view .playlist-media {
  background: transparent !important;
  padding: 4px 0 !important;
  max-height: 420px;
}

/* 播放列表滚动条美化 */
.playlist-view .playlist-media::-webkit-scrollbar {
  width: 5px;
}

.playlist-view .playlist-media::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.02);
}

.playlist-view .playlist-media::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 3px;
}

/* ======= 播放列表项目布局修复 - 高优先级覆盖 ======= */
.playlist-view .playlist-media .items-list-hor .item,
.playlist-view .playlist-media .item {
  padding: 10px 12px 10px 32px !important;
  margin: 6px 8px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(200, 200, 220, 0.15);
}

.playlist-view .playlist-media .items-list-hor .item:hover,
.playlist-view .playlist-media .item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
  border-color: rgba(102, 126, 234, 0.25);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.playlist-view .playlist-media .items-list-hor .item.pl-active-item,
.playlist-view .playlist-media .item.pl-active-item {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
  border-left: 4px solid #667eea;
  border-color: rgba(102, 126, 234, 0.3);
}

/* 关键修复：覆盖 ItemHorizontal.scss 的大宽度 */
.playlist-view .playlist-media .items-list-hor .item-content,
.playlist-view .playlist-media .item-content {
  padding-left: 140px !important;
}

.playlist-view .playlist-media .items-list-hor .item-thumb,
.playlist-view .playlist-media .item-thumb,
.playlist-view .playlist-media .items-list-hor a.item-thumb {
  width: 130px !important;
  height: 73px !important;
  border-radius: 8px !important;
  overflow: hidden;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.playlist-view .playlist-media .item:hover .item-thumb {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.playlist-view .playlist-media .items-list-hor .item-main,
.playlist-view .playlist-media .item-main {
  min-height: 73px !important;
  padding-left: 10px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 序号 */
.playlist-view .playlist-media .item-order-number {
  width: 28px !important;
  font-weight: 700;
  color: #667eea !important;
  font-size: 13px !important;
}

.playlist-view .playlist-media .item.pl-active-item .item-order-number {
  color: #764ba2 !important;
}

/* 标题 */
.playlist-view .playlist-media .items-list-hor .item-main h3,
.playlist-view .playlist-media .item-main h3 {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 0 6px 0 !important;
  transition: color 0.25s ease;
  color: #1a1a2e;
}

.playlist-view .playlist-media .item:hover .item-main h3 {
  color: #667eea !important;
}

.playlist-view .playlist-media .item.pl-active-item .item-main h3 {
  color: #764ba2 !important;
  font-weight: 700 !important;
}

/* 元信息 */
.playlist-view .playlist-media .item-meta {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 0 !important;
  line-height: 1.4 !important;
}

/* 时长标签 */
.playlist-view .playlist-media .item-duration > * {
  font-size: 11px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,0.75) !important;
  font-weight: 600;
}

/* ========================================
   📺 侧边栏相关视频列表美化 (YouTube/抖音风格)
   ======================================== */

.viewer-sidebar {
  padding: 0;
}

/* 自动播放区域头部 */
.viewer-sidebar .auto-play .auto-play-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}

.viewer-sidebar .auto-play .next-label {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  letter-spacing: -0.3px;
}

/* 相关视频列表容器 */
.viewer-sidebar .items-list-hor {
  margin-top: 0;
}

/* 相关视频项目 - 简洁紧凑布局 */
.viewer-sidebar .items-list-hor .item {
  padding: 8px !important;
  margin: 0 0 8px 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
  border: none !important;
}

.viewer-sidebar .items-list-hor .item:hover {
  background: rgba(0,0,0,0.04) !important;
}

/* 缩略图布局 */
.viewer-sidebar .items-list-hor .item-content {
  padding-left: 176px !important;
  min-height: 94px !important;
  position: relative !important;
}

.viewer-sidebar .items-list-hor .item-thumb,
.viewer-sidebar .items-list-hor a.item-thumb {
  width: 168px !important;
  height: 94px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #000 !important;
  transition: opacity 0.2s ease !important;
}

.viewer-sidebar .items-list-hor .item:hover .item-thumb {
  opacity: 0.85;
}

/* 缩略图悬停效果 - 禁用默认的复杂效果 */
.viewer-sidebar .items-list-hor .item .item-thumb::before,
.viewer-sidebar .items-list-hor .item .item-thumb::after {
  display: none !important;
}

/* 视频信息区域 */
.viewer-sidebar .items-list-hor .item-main {
  min-height: auto !important;
  padding: 2px 0 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* 时长标签 */
.viewer-sidebar .items-list-hor .item-duration {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
}

.viewer-sidebar .items-list-hor .item-duration > * {
  background: rgba(0,0,0,0.8) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: 0.3px;
}

/* 视频标题 */
.viewer-sidebar .items-list-hor .item-main h3 {
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
  color: #0f0f0f !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.viewer-sidebar .items-list-hor .item-main h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 作者和元信息 */
.viewer-sidebar .items-list-hor .item-meta {
  font-size: 12px !important;
  color: #606060 !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

.viewer-sidebar .items-list-hor .item-author a {
  font-weight: 400 !important;
  color: #606060 !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.viewer-sidebar .items-list-hor .item-author a:hover {
  color: #0f0f0f !important;
}

.viewer-sidebar .items-list-hor .item-views {
  color: #606060 !important;
  font-size: 12px !important;
}

/* 自动播放开关美化 */
.viewer-sidebar .auto-play-next {
  background: linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(248,250,255,0.95) 100%);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid rgba(200, 200, 220, 0.15);
}

/* ========================================
   🌙 暗黑模式 - 播放列表
   ======================================== */

[data-theme="dark"] .playlist-view,
.dark_theme .playlist-view {
  background: linear-gradient(165deg, rgba(35,35,45,0.98) 0%, rgba(25,25,35,0.95) 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"] .playlist-view .playlist-media .item,
.dark_theme .playlist-view .playlist-media .item {
  background: rgba(40,40,55,0.6);
  border-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .playlist-view .playlist-media .item:hover,
.dark_theme .playlist-view .playlist-media .item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
  border-color: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .playlist-view .playlist-media .item.pl-active-item,
.dark_theme .playlist-view .playlist-media .item.pl-active-item {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%) !important;
  border-color: rgba(102, 126, 234, 0.4);
}

[data-theme="dark"] .playlist-view .playlist-media .item-main h3,
.dark_theme .playlist-view .playlist-media .item-main h3 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .playlist-view .playlist-media .item:hover .item-main h3,
.dark_theme .playlist-view .playlist-media .item:hover .item-main h3 {
  color: #a8c0ff !important;
}

[data-theme="dark"] .playlist-view .playlist-media .item-meta,
.dark_theme .playlist-view .playlist-media .item-meta {
  color: #94a3b8 !important;
}

/* 暗黑模式 - 相关视频 */
[data-theme="dark"] .viewer-sidebar .auto-play .next-label,
.dark_theme .viewer-sidebar .auto-play .next-label {
  color: #f1f1f1 !important;
}

[data-theme="dark"] .viewer-sidebar .auto-play .auto-play-header,
.dark_theme .viewer-sidebar .auto-play .auto-play-header {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] .viewer-sidebar .items-list-hor .item,
.dark_theme .viewer-sidebar .items-list-hor .item {
  background: transparent !important;
}

[data-theme="dark"] .viewer-sidebar .items-list-hor .item:hover,
.dark_theme .viewer-sidebar .items-list-hor .item:hover {
  background: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] .viewer-sidebar .items-list-hor .item-main h3,
.dark_theme .viewer-sidebar .items-list-hor .item-main h3 {
  color: #f1f1f1 !important;
}

[data-theme="dark"] .viewer-sidebar .items-list-hor .item-meta,
.dark_theme .viewer-sidebar .items-list-hor .item-meta,
[data-theme="dark"] .viewer-sidebar .items-list-hor .item-author a,
.dark_theme .viewer-sidebar .items-list-hor .item-author a,
[data-theme="dark"] .viewer-sidebar .items-list-hor .item-views,
.dark_theme .viewer-sidebar .items-list-hor .item-views {
  color: #aaaaaa !important;
}

[data-theme="dark"] .viewer-sidebar .items-list-hor .item-author a:hover,
.dark_theme .viewer-sidebar .items-list-hor .item-author a:hover {
  color: #f1f1f1 !important;
}

[data-theme="dark"] .viewer-sidebar .auto-play-next,
.dark_theme .viewer-sidebar .auto-play-next {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ========================================
   📜 历史记录和收藏页面美化 - 网格卡片布局
   ======================================== */

/* 卡片样式 */
.search-results-wrap.items-list-hor .item,
#page-history .items-list-hor .item,
#page-liked .items-list-hor .item,
.profile-page-history .items-list-hor .item,
.profile-page-liked .items-list-hor .item {
  border-radius: 16px !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(200, 200, 220, 0.3) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  overflow: hidden !important;
}

.search-results-wrap.items-list-hor .item:hover,
#page-history .items-list-hor .item:hover,
#page-liked .items-list-hor .item:hover,
.profile-page-history .items-list-hor .item:hover,
.profile-page-liked .items-list-hor .item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.18) !important;
  border-color: rgba(102, 126, 234, 0.3) !important;
}

/* 缩略图样式 */
.search-results-wrap.items-list-hor .item-thumb,
#page-history .items-list-hor .item-thumb,
#page-liked .items-list-hor .item-thumb,
.profile-page-history .items-list-hor .item-thumb,
.profile-page-liked .items-list-hor .item-thumb {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

.search-results-wrap.items-list-hor .item-thumb img,
#page-history .items-list-hor .item-thumb img,
#page-liked .items-list-hor .item-thumb img,
.profile-page-history .items-list-hor .item-thumb img,
.profile-page-liked .items-list-hor .item-thumb img {
  transition: transform 0.4s ease !important;
}

.search-results-wrap.items-list-hor .item:hover .item-thumb img,
#page-history .items-list-hor .item:hover .item-thumb img,
#page-liked .items-list-hor .item:hover .item-thumb img,
.profile-page-history .items-list-hor .item:hover .item-thumb img,
.profile-page-liked .items-list-hor .item:hover .item-thumb img {
  transform: scale(1.05) !important;
}

/* 标题样式 */
.search-results-wrap.items-list-hor .item-main h3,
#page-history .items-list-hor .item-main h3,
#page-liked .items-list-hor .item-main h3,
.profile-page-history .items-list-hor .item-main h3,
.profile-page-liked .items-list-hor .item-main h3 {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #1a1a2e !important;
  transition: color 0.25s ease;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.search-results-wrap.items-list-hor .item:hover .item-main h3,
#page-history .items-list-hor .item:hover .item-main h3,
#page-liked .items-list-hor .item:hover .item-main h3,
.profile-page-history .items-list-hor .item:hover .item-main h3,
.profile-page-liked .items-list-hor .item:hover .item-main h3 {
  color: #667eea !important;
}

/* 元信息样式 */
.search-results-wrap.items-list-hor .item-meta,
#page-history .items-list-hor .item-meta,
#page-liked .items-list-hor .item-meta,
.profile-page-history .items-list-hor .item-meta,
.profile-page-liked .items-list-hor .item-meta {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 6px !important;
}

/* 时长标签 */
.search-results-wrap.items-list-hor .item-duration > *,
#page-history .items-list-hor .item-duration > *,
#page-liked .items-list-hor .item-duration > *,
.profile-page-history .items-list-hor .item-duration > *,
.profile-page-liked .items-list-hor .item-duration > * {
  background: rgba(0,0,0,0.8) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-weight: 600;
}

/* 暗黑模式 */
[data-theme="dark"] .search-results-wrap.items-list-hor .item,
[data-theme="dark"] #page-history .items-list-hor .item,
[data-theme="dark"] #page-liked .items-list-hor .item,
.dark_theme .search-results-wrap.items-list-hor .item,
.dark_theme #page-history .items-list-hor .item,
.dark_theme #page-liked .items-list-hor .item {
  background: linear-gradient(165deg, rgba(35,35,45,0.98) 0%, rgba(25,25,35,0.95) 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .search-results-wrap.items-list-hor .item:hover,
[data-theme="dark"] #page-history .items-list-hor .item:hover,
[data-theme="dark"] #page-liked .items-list-hor .item:hover,
.dark_theme .search-results-wrap.items-list-hor .item:hover,
.dark_theme #page-history .items-list-hor .item:hover,
.dark_theme #page-liked .items-list-hor .item:hover {
  border-color: rgba(102, 126, 234, 0.4) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .search-results-wrap.items-list-hor .item-main h3,
[data-theme="dark"] #page-history .items-list-hor .item-main h3,
[data-theme="dark"] #page-liked .items-list-hor .item-main h3,
.dark_theme .search-results-wrap.items-list-hor .item-main h3,
.dark_theme #page-history .items-list-hor .item-main h3,
.dark_theme #page-liked .items-list-hor .item-main h3 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .search-results-wrap.items-list-hor .item:hover .item-main h3,
[data-theme="dark"] #page-history .items-list-hor .item:hover .item-main h3,
[data-theme="dark"] #page-liked .items-list-hor .item:hover .item-main h3,
.dark_theme .search-results-wrap.items-list-hor .item:hover .item-main h3,
.dark_theme #page-history .items-list-hor .item:hover .item-main h3,
.dark_theme #page-liked .items-list-hor .item:hover .item-main h3 {
  color: #a8c0ff !important;
}

[data-theme="dark"] .search-results-wrap.items-list-hor .item-meta,
[data-theme="dark"] #page-history .items-list-hor .item-meta,
[data-theme="dark"] #page-liked .items-list-hor .item-meta,
.dark_theme .search-results-wrap.items-list-hor .item-meta,
.dark_theme #page-history .items-list-hor .item-meta,
.dark_theme #page-liked .items-list-hor .item-meta {
  color: #94a3b8 !important;
}

/* ========================================
   👤 成员页面圆形头像样式
   ======================================== */
.members-avatar-grid .items-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
}

.members-avatar-grid .items-list .item {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.members-avatar-grid .items-list .item .item-content {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.members-avatar-grid .items-list .item .item-thumb,
.members-avatar-grid .items-list .item a.item-thumb {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .members-avatar-grid .items-list {
    gap: 20px !important;
  }

  .members-avatar-grid .items-list .item {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .members-avatar-grid .items-list .item .item-content {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .members-avatar-grid .items-list .item .item-thumb,
  .members-avatar-grid .items-list .item a.item-thumb {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
}

.members-avatar-grid .items-list .item .item-thumb::before,
.members-avatar-grid .items-list .item .item-thumb::after {
  display: none !important;
}

.members-avatar-grid .items-list .item .item-thumb.no-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #00b96b 0%, #52c41a 100%) !important;
}

.members-avatar-grid .items-list .item .item-thumb.no-thumb::before {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  font-size: 28px !important;
  color: #fff !important;
  opacity: 1 !important;
  background: none !important;
}

@media (min-width: 768px) {
  .members-avatar-grid .items-list .item .item-thumb.no-thumb::before {
    font-size: 36px !important;
  }
}

.members-avatar-grid .items-list .item .item-main,
.members-avatar-grid .items-list .item .item-meta,
.members-avatar-grid .items-list .item .under-thumb-wrapper {
  display: none !important;
}

.members-avatar-grid .items-list .item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.members-avatar-grid .items-list .item:hover {
  transform: none !important;
  box-shadow: none !important;
}

.members-avatar-grid .items-list .item:hover .item-thumb {
  transform: scale(1.1) !important;
  transition: transform 0.2s ease !important;
}

/* ========================================
   📷 编辑个人资料 - 头像上传优化
   隐藏路径和清除按钮
   ======================================== */

/* 隐藏 Django ClearableFileInput 的路径文本和清除复选框 */
.edit-profile-page .form-field input[type="file"] + a,
.edit-profile-page .form-field input[name="logo-clear"],
.edit-profile-page .form-field label[for="logo-clear_id"],
.edit-profile-page .form-field #logo-clear_id,
.user-action-form-inner input[name="logo-clear"],
.user-action-form-inner label[for="logo-clear_id"],
.user-action-form-inner #logo-clear_id {
  display: none !important;
}

/* 隐藏 "Currently:" 文本 - 保留图片预览 */
.edit-profile-page .form-field .current-avatar .current-label {
  display: none !important;
}

/* 优化当前头像预览样式 */
.edit-profile-page .form-field .current-avatar {
  justify-content: center !important;
  padding: 16px !important;
  background: transparent !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.edit-profile-page .form-field .current-avatar .avatar-preview {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  border: 4px solid var(--brand-color, #00bf63) !important;
  box-shadow: 0 4px 16px rgba(0, 191, 99, 0.2) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.edit-profile-page .form-field .current-avatar .avatar-preview:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 24px rgba(0, 191, 99, 0.3) !important;
}

/* 文件上传按钮优化 */
.edit-profile-page .form-field input[type="file"] {
  width: 100% !important;
  padding: 12px !important;
  border: 2px dashed rgba(0, 191, 99, 0.4) !important;
  border-radius: 12px !important;
  background: rgba(0, 191, 99, 0.05) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.edit-profile-page .form-field input[type="file"]:hover {
  border-color: var(--brand-color, #00bf63) !important;
  background: rgba(0, 191, 99, 0.1) !important;
}

.edit-profile-page .form-field input[type="file"]::file-selector-button {
  padding: 8px 16px !important;
  margin-right: 12px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--brand-color, #00bf63) !important;
  color: #fff !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.edit-profile-page .form-field input[type="file"]::file-selector-button:hover {
  background: #00a854 !important;
}

/* 暗黑模式适配 */
[data-theme="dark"] .edit-profile-page .form-field .current-avatar,
.dark_theme .edit-profile-page .form-field .current-avatar {
  background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .edit-profile-page .form-field input[type="file"],
.dark_theme .edit-profile-page .form-field input[type="file"] {
  border-color: rgba(0, 191, 99, 0.3) !important;
  background: rgba(0, 191, 99, 0.08) !important;
  color: #fff !important;
}

[data-theme="dark"] .edit-profile-page .form-field input[type="file"]:hover,
.dark_theme .edit-profile-page .form-field input[type="file"]:hover {
  border-color: var(--brand-color, #00bf63) !important;
  background: rgba(0, 191, 99, 0.15) !important;
}