/* ============================================
   Bangumi 追番页面自定义样式
   ============================================ */

/* 标签页 - 适配主题色 */
.bangumi-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  border-bottom: 2px solid var(--red-5, #f8e9fb) !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

.bangumi-tab {
  padding: 12px 24px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--highlight-comment, #8a7b94) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 0 0 -2px 0 !important;
  position: relative !important;
}

.bangumi-tab::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--red-0, #8e1f84) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bangumi-tab:hover {
  color: var(--red-0, #8e1f84) !important;
  background: var(--red-5, #f8e9fb) !important;
}

.bangumi-tab:hover::after {
  width: 100% !important;
}

.bangumi-tab.bangumi-active {
  border-bottom-color: var(--red-0, #8e1f84) !important;
  color: var(--red-0, #8e1f84) !important;
  background: transparent !important;
}

.bangumi-tab.bangumi-active::after {
  width: 100% !important;
}

/* 番剧网格容器 */
.bangumi-container {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important;
  padding: 0 !important;
}

/* ============================================
   番剧卡片
   ============================================ */
.bangumi-item {
  display: inline-block !important;
  width: calc(20% - 20px) !important;
  margin: 10px !important;
  padding: 16px !important;
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--highlight-background, #f9f2fb) !important;
  box-shadow: 0 4px 12px var(--color-red-3-shadow, rgba(183, 102, 184, 0.3)) !important;
  transition: all 0.3s ease !important;
  vertical-align: top !important;
  position: relative !important;
  text-align: center !important;
  min-height: 295px !important; /* ← 关键：统一最小高度 */
}

.bangumi-item:hover {
  box-shadow: 0 6px 20px var(--color-red-6-shadow, rgba(142, 31, 132, 0.4)) !important;
  transform: translateY(-4px) !important;
}

/* 封面图片 - 直接是img标签 */
.bangumi-cover {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.bangumi-item:hover .bangumi-cover {
  transform: scale(1.05) !important;
}

/* 番剧标题 */
.bangumi-title {
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 8px 0 !important; /* 为图片和标题增加顶部间距 */
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important; /* 标准属性，支持时优先生效 */
  -webkit-box-orient: vertical !important;
  min-height: 2.8em !important;
}

.bangumi-title a {
  color: var(--highlight-foreground, #3b2b58) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.bangumi-title a:hover {
  color: var(--red-0, #8e1f84) !important;
}

/* 进度容器 */
.bangumi-progress {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: auto !important; /* ← 关键：推到最底部 */
}

/* === 进度文本行：左右对齐 === */
.bangumi-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--highlight-foreground, #ffffff);
  margin-bottom: 6px;
  width: 100%;
}

/* === 右侧显示百分比 === */
.bangumi-progress-text::after {
  content: attr(data-percent) "%";
  color: var(--highlight-foreground, #ffffff);
  font-weight: 500;
}

/* === 容错：无 data-percent 时不显示 === */
.bangumi-progress-text:not([data-percent])::after,
.bangumi-progress-text[data-percent=""]::after {
  content: "";
}

/* === 进度条容器 === */
.progress-bar {
  display: block !important;
  visibility: visible !important;
  height: 6px !important;
  background: var(--red-5, #f8e9fb) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* === 填充层：宽度由 --progress-width 控制 === */
.progress-bar::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: var(--progress-width, 0%) !important; /* ← 关键！ */
  background: linear-gradient(90deg, 
    var(--red-0, #8e1f84) 0%, 
    var(--red-1, #b766b8) 50%,
    var(--red-0, #8e1f84) 100%) !important;
  background-size: 200% 100% !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  animation: progressShine 2s ease-in-out infinite !important;
  box-shadow: 0 0 8px rgba(142, 31, 132, 0.4) !important;
}

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

/* 分页显示 */
.bangumi-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 20px 0 !important;
  padding: 0 !important;
}

.bangumi-button,
.bangumi-pagenum {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: var(--highlight-foreground, #3b2b58) !important;
  background: var(--highlight-background, #f9f2fb) !important;
  border: 1px solid var(--red-3, #e7b9eb) !important;
  transition: all 0.2s ease !important;
  min-width: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.bangumi-pagenum {
  background: transparent !important;
  pointer-events: none !important;
  border-color: transparent !important;
  color: var(--highlight-comment, #8a7b94) !important;
}

.bangumi-button:hover {
  background: var(--red-0, #8e1f84) !important;
  color: white !important;
  border-color: var(--red-0, #8e1f84) !important;
}

/* ============================================
   响应式设计
   ============================================ */

/* 大屏幕 (1200px+) - 5列 */
@media (min-width: 1200px) {
  .bangumi-item {
    width: calc(20% - 20px) !important;
  }
}

/* 中等屏幕 (900px - 1199px) - 4列 */
@media (max-width: 1199px) and (min-width: 900px) {
  .bangumi-item {
    width: calc(25% - 20px) !important;
  }
  
  .bangumi-tab {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* 平板 (640px - 899px) - 3列 */
@media (max-width: 899px) and (min-width: 640px) {
  .bangumi-item {
    width: calc(33.333% - 20px) !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 20px !important;
  }
  
  .bangumi-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  .bangumi-title {
    font-size: 13px !important;
  }
  
  .bangumi-cover {
    width: 110px !important;
  }
}

/* 手机 (400px - 639px) - 2列 */
@media (max-width: 639px) and (min-width: 400px) {
  .bangumi-item {
    width: calc(50% - 20px) !important;
    padding: 12px !important;
  }
  
  .bangumi-container {
    margin: 0 -10px !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 16px !important;
  }
  
  .bangumi-tab {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  .bangumi-title {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
  
  .bangumi-cover {
    width: 100px !important;
    margin-bottom: 10px !important;
  }
  
  .progress-bar,
  .progress-bar[style*="width"] {
    height: 6px !important;
  }
}

/* 小屏手机 (< 400px) - 1列 */
@media (max-width: 399px) {
  .bangumi-item {
    width: calc(100% - 20px) !important;
    padding: 12px !important;
  }
  
  .bangumi-container {
    margin: 0 -10px !important;
  }
  
  .bangumi-tabs {
    margin-bottom: 12px !important;
  }
  
  .bangumi-tab {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  
  .bangumi-title {
    font-size: 12px !important;
  }
  
  .bangumi-cover {
    width: 90px !important;
  }
  
  .progress-bar,
  .progress-bar[style*="width"] {
    height: 6px !important;
  }
}

/* ============================================
   深色模式适配
   ============================================ */
html[data-theme='dark'] .bangumi-tabs {
  border-bottom-color: var(--red-5, rgba(183, 102, 184, 0.2)) !important;
}

html[data-theme='dark'] .bangumi-tab {
  color: var(--highlight-comment, #9c8aa0) !important;
}

html[data-theme='dark'] .bangumi-tab:hover {
  color: var(--highlight-purple, #b842ad) !important;
  background: var(--red-4, rgba(142, 31, 132, 0.5)) !important;
}

html[data-theme='dark'] .bangumi-tab.bangumi-active {
  border-bottom-color: var(--highlight-purple, #b842ad) !important;
  color: var(--highlight-purple, #b842ad) !important;
}

html[data-theme='dark'] .bangumi-tab::after {
  background: var(--highlight-purple, #b842ad) !important;
}

html[data-theme='dark'] .bangumi-item {
  background: var(--highlight-nav, #261433) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme='dark'] .bangumi-item:hover {
  box-shadow: 0 6px 20px rgba(184, 66, 173, 0.4) !important;
}

html[data-theme='dark'] .bangumi-title a {
  color: var(--highlight-foreground, #d8c2e0) !important;
}

html[data-theme='dark'] .bangumi-title a:hover {
  color: var(--highlight-purple, #b842ad) !important;
}

html[data-theme='dark'] .bangumi-progress-text {
  color: var(--highlight-foreground, #d8c2e0) !important;
}

html[data-theme='dark'] .progress-bar,
html[data-theme='dark'] .progress-bar[style*="width"] {
  background: var(--red-5, rgba(183, 102, 184, 0.2)) !important;
}

html[data-theme='dark'] .progress-bar::before,
html[data-theme='dark'] .progress-bar[style*="width"]::after {
  background: var(--highlight-purple, #b842ad) !important;
}

html[data-theme='dark'] .bangumi-button {
  color: var(--highlight-foreground, #d8c2e0) !important;
  background: var(--highlight-nav, #261433) !important;
  border-color: var(--red-4, rgba(142, 31, 132, 0.5)) !important;
}

html[data-theme='dark'] .bangumi-pagenum {
  color: var(--highlight-comment, #9c8aa0) !important;
}

html[data-theme='dark'] .bangumi-button:hover {
  background: var(--highlight-purple, #b842ad) !important;
  border-color: var(--highlight-purple, #b842ad) !important;
  color: white !important;
}

html[data-theme='dark'] .bangumi-button[onclick="return false"],
html[data-theme='dark'] .bangumi-button[href="javascript:;"] {
  background: var(--highlight-selection, #4a2a70) !important;
}

/* ============================================
   性能优化
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .bangumi-item,
  .bangumi-cover,
  .bangumi-tab,
  .progress-bar::before,
  .progress-bar[style*="width"]::after {
    transition: none !important;
  }
}

/* 确保隐藏元素真正隐藏 */
.bangumi-hide {
  display: none !important;
}