/* 首页 / 列表 App 覆写（压在 xj-home / xj-dark 之上） */

.xj-site {
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
}

.xj-hero-stack,
.xj-main,
.xj-below-hero,
.home-portal,
.discover-page .home-portal {
  background: transparent !important;
}

.xj-main.content-wrap {
  padding: 12px 14px 28px;
}

@media (min-width: 992px) {
  .xj-main.content-wrap {
    padding: 18px 24px 40px;
  }
}

/* 轮播更 App */
.xj-carousel {
  background: #000;
  border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
  overflow: hidden;
}

@media (min-width: 992px) {
  .xj-carousel {
    border-radius: 0 0 28px 28px;
  }
}

.xj-carousel-dots button {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.35);
  transition:
    width 200ms var(--app-ease),
    background 200ms var(--app-ease),
    border-radius 200ms var(--app-ease);
}

.xj-carousel-dots button.active {
  width: 18px;
  border-radius: 999px;
  background: var(--app-accent);
}

.xj-carousel-prev,
.xj-carousel-next {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px !important;
  width: 40px !important;
  height: 40px !important;
}

/* 公告 / 快筛 */
.xj-notice-bar {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  color: var(--app-text-secondary);
}

.xj-notice-item {
  color: var(--app-text-secondary) !important;
}

.xj-quick-tags-grid button,
.xj-quick-tags-grid a {
  background: var(--app-surface-2) !important;
  color: var(--app-text-secondary) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius-pill) !important;
  transition:
    background var(--app-dur-fast) var(--app-ease),
    color var(--app-dur-fast) var(--app-ease),
    border-color var(--app-dur-fast) var(--app-ease),
    transform var(--app-dur-fast) var(--app-ease);
}

.xj-quick-tags-grid button:active,
.xj-quick-tags-grid a:active {
  transform: scale(0.96);
}

.xj-quick-tags-grid button:hover,
.xj-quick-tags-grid a:hover,
.xj-quick-tags-grid button.active,
.xj-quick-tags-grid a.active {
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
  border-color: rgba(255, 45, 120, 0.35) !important;
}

/* Section 标题 */
.xj-section-head,
.section-head {
  margin: 22px 2px 14px;
  align-items: center;
}

.xj-section-head-left i,
.section-icon {
  color: var(--app-gold) !important;
  filter: drop-shadow(0 0 8px rgba(245, 197, 24, 0.35));
}

.xj-section-title,
.section-head h2 {
  color: var(--app-text) !important;
  font-family: var(--app-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.xj-section-en,
.section-en {
  color: var(--app-text-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xj-btn-shuffle,
.btn-ghost {
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-text-secondary) !important;
  border-radius: var(--app-radius-pill) !important;
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 600;
}

.xj-btn-shuffle:hover,
.btn-ghost:hover {
  border-color: rgba(255, 45, 120, 0.4) !important;
  color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
}

/* 视频卡片 */
.xj-card-v2,
.xj-card,
.grid .card {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  overflow: hidden;
  box-shadow: none;
}

.xj-card-v2 .thumb,
.xj-card-v2 .xj-thumb,
.grid .card .thumb {
  background: var(--app-surface-2) !important;
  border-radius: 0;
}

.xj-card-title,
.grid .card h3 {
  color: var(--app-text) !important;
  font-weight: 600;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
  min-height: 2.5em;
}

.xj-card-sub,
.grid .card .sub {
  color: var(--app-text-muted) !important;
}

.xj-card-v2 .thumb-play {
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
}

.xj-card-v2 .thumb-play i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 45, 120, 0.9);
  box-shadow: var(--app-glow-accent);
  font-size: 0.95rem;
}

.xj-video-grid,
.grid.xj-grid,
.related-grid {
  gap: 12px !important;
}

@media (max-width: 640px) {
  .xj-video-grid,
  .grid.xj-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

.vod-badge {
  border-radius: 8px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.vod-badge-free {
  background: rgba(52, 211, 153, 0.9) !important;
}

.vod-badge-vip {
  background: linear-gradient(135deg, #f5c518, #ff8a00) !important;
  color: #1a1200 !important;
}

.vod-badge-premium {
  background: linear-gradient(135deg, #ff2d78, #a855f7) !important;
}

/* 搜索框 */
.xj-search-wrap input,
.search-box input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: 14px !important;
}

.xj-search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.xj-search-dropdown {
  background: rgba(18, 18, 24, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.xj-search-dropdown p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.xj-rank-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

.xj-icon-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  width: 36px !important;
  height: 36px !important;
  color: #fff !important;
}

/* 弹层 */
.xj-modal {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-radius: var(--app-radius-lg) !important;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-lg);
}

.xj-modal button,
#noticeModalClose {
  background: var(--app-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--app-radius-pill) !important;
  padding: 10px 22px !important;
  font-weight: 700;
}

.xj-app-pop {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
  border-radius: var(--app-radius-lg) !important;
  box-shadow: var(--app-shadow-lg);
}

.xj-app-pop .dl-btns a {
  border-radius: 12px !important;
}

#closeAppPop {
  background: var(--app-surface-2) !important;
  color: var(--app-text-secondary) !important;
  border-radius: 12px !important;
}

.sub-bar-wrap {
  background: var(--app-surface) !important;
  border-bottom: 1px solid var(--app-border);
}

.sub-nav a,
.sub-nav button {
  color: var(--app-text-secondary) !important;
  border-radius: var(--app-radius-pill);
}

.sub-nav a.active,
.sub-nav button.active {
  color: var(--app-accent) !important;
  background: var(--app-accent-soft);
}

.legacy-header {
  display: none !important;
}

/* 分页：上一页 1 2 3 4 5 下一页 */
.list-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 4px 28px;
  padding-bottom: 8px;
}

.list-pager[hidden] {
  display: none !important;
}

.list-pager button {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--app-dur-fast) var(--app-ease),
    color var(--app-dur-fast) var(--app-ease),
    border-color var(--app-dur-fast) var(--app-ease),
    transform var(--app-dur-fast) var(--app-ease);
}

.list-pager button:hover:not(:disabled) {
  border-color: rgba(255, 45, 120, 0.4);
  color: var(--app-accent);
}

.list-pager button:active:not(:disabled) {
  transform: scale(0.96);
}

.list-pager button.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

html.light .list-pager button.active {
  background: #111;
  color: #fff;
}

.list-pager button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.list-pager .pager-ellipsis {
  color: var(--app-text-muted);
  padding: 0 2px;
  font-size: 0.9rem;
}

.section-count {
  color: var(--app-text-muted) !important;
}

.xj-live-card,
.xj-tv-card,
.xj-img-card {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  color: var(--app-text-secondary);
}