/* cinefox 主题：参考原站全屏 hero + CKZY 大 logo 风格 */
:root {
  --cf-bg: #0a0a0a;
  --cf-card: #181818;
  --cf-text: #f0f0f0;
  --cf-muted: #999;
  --cf-accent: #ff584f;
  --cf-pink: #f49ac1;
  --cf-border: #232323;
}

html, body {
  background: var(--cf-bg) !important;
  color: var(--cf-text);
  /* 正文：Manrope（拉丁）+ Noto Sans SC（中文）混排 */
  font-family: "Manrope", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif !important;
  margin: 0; padding: 0;
  position: relative;
}
/* 全局背景噪点纹理 + 微渐变光斑 — 让纯黑底有质感 */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(at 0% 0%, rgba(255,88,79,.05) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(99,102,241,.04) 0%, transparent 50%),
    var(--cf-bg);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 标题字号字体 — Manrope 节奏感 */
h1, h2, h3, .cf-hero-info h2, .cf-info h1, .cf-section-header h3, .cf-screenshot-section h2 {
  font-family: "Manrope", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.01em;
}

/* 数字 — 等宽字体显得专业（评分/集数/时长/统计） */
.cf-hero-rating .rating-value,
.cf-stats .score,
.cf-stars-base, .cf-stars-fill,
.cf-card-score,
.cf-pagination span,
.cf-type-score b,
.mono,
.cf-score-ring text {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

* { box-sizing: border-box; }

/* ====== 评分环形组件 ====== */
.cf-score-ring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.cf-score-ring svg {
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.cf-score-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.cf-score-ring .ring-fg {
  fill: none; stroke-width: 3; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1);
}
.cf-score-ring text {
  fill: #fff; font-size: 14px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
}
.cf-score-ring .ring-label {
  font-size: 11px; color: var(--cf-muted); font-weight: 500;
  display: flex; flex-direction: column; gap: 2px;
}
.cf-score-ring .ring-label b { color: #fff; font-size: 12px; font-weight: 600; }
/* 评分颜色梯度：>=8 金黄 / 7-8 橙 / <7 灰 */
.cf-score-ring.high   .ring-fg { stroke: #f5c518; }
.cf-score-ring.high   text     { fill: #f5c518; }
.cf-score-ring.medium .ring-fg { stroke: #ff8a50; }
.cf-score-ring.medium text     { fill: #ff8a50; }
.cf-score-ring.low    .ring-fg { stroke: #888; }
.cf-score-ring.low    text     { fill: #aaa; }
.cf-score-ring.none   .ring-fg { stroke-dasharray: 0 999 !important; }
.cf-score-ring.none   text     { fill: #666; font-size: 11px; }
/* 海报右下角小型评分 */
.cf-poster-score-mini {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  color: #f5c518;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
  border: 2px solid rgba(245,197,24,.5);
  backdrop-filter: blur(4px);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cf-accent); }
img { max-width: 100%; height: auto; display: block; }

/* ====== 顶栏 ====== */
.cf-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  /* 顶部背景半透明 — 让详情页的 backdrop 背景图能穿透显示，同时保证文字可读 */
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
  padding: 12px 0;
}
.cf-header.scrolled { position: fixed; background: rgba(0,0,0,.95); padding: 8px 0; }
.cf-header-inner {
  display: flex; align-items: center; gap: 28px;
  max-width: 1680px; margin: 0 auto; padding: 8px 36px;
}
.cf-logo {
  font-family: "Arial Black", "Helvetica Bold", sans-serif;
  font-size: 26px; font-weight: 900; color: #fff;
  letter-spacing: 1px; flex-shrink: 0;
}
.cf-logo:hover { color: #fff; }
.cf-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.cf-nav a {
  position: relative; color: #fff; font-size: 14px; padding: 4px 0;
  white-space: nowrap; transition: color .15s;
}
.cf-nav a::before {
  content: ""; position: absolute; right: -8px; top: -6px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--cf-accent);
  font-size: 10px; color: #fff; line-height: 18px; text-align: center;
  display: none;
}
.cf-nav a:hover, .cf-nav a.active { color: var(--cf-accent); }
.cf-header-actions { display: flex; align-items: center; gap: 14px; }
.cf-icon-btn {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 18px; padding: 6px; line-height: 1;
}
.cf-icon-btn:hover { color: var(--cf-accent); }
.cf-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #2a2a2a; color: #fff; font-size: 18px;
}
.cf-avatar:hover { background: var(--cf-accent); color: #fff; }

/* 搜索浮层 */
.cf-search-overlay {
  position: absolute; top: 100%; right: 36px; max-width: 90vw;
  background: rgba(0,0,0,.95); padding: 14px 18px; border-radius: 6px;
  display: none; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cf-search-overlay.open { display: block; }
.cf-search-form { display: flex; align-items: center; }
.cf-search-form input {
  background: #0a0a0a; border: 1px solid var(--cf-border); color: #fff;
  padding: 8px 14px; border-radius: 4px 0 0 4px; font-size: 14px;
  outline: none; width: 280px;
}
.cf-search-form input:focus { border-color: var(--cf-accent); }
.cf-search-form button {
  background: var(--cf-accent); color: #fff; border: 0;
  padding: 9px 18px; border-radius: 0 4px 4px 0; cursor: pointer;
}

/* ====== Main ====== */
.cf-main { padding: 0 0 60px; }
.cf-section { margin: 28px 0 36px; padding: 0 36px; }

/* ====== Hero 全屏 ====== */
.cf-hero-wrap {
  position: relative; height: 80vh; min-height: 540px; max-height: 820px;
  overflow: hidden; background: #000;
  margin-top: 0;
}
.cf-hero-track {
  display: flex; height: 100%;
  transition: transform .7s cubic-bezier(.65,.01,.27,1);
  will-change: transform;
}
.cf-hero-slide {
  position: relative; flex: 0 0 100%; height: 100%;
  background-size: cover; background-position: center 25%;
}
.cf-hero-slide::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(10,10,10,1) 100%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 65%);
}
.cf-hero-info {
  position: relative; z-index: 1;
  padding: 22vh 60px 0; max-width: 720px;
}
.cf-hero-info h2 {
  font-size: clamp(48px, 6vw, 84px);
  margin: 0 0 18px; color: #fff; font-weight: 900;
  line-height: 1.05; letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.cf-hero-info h2 a { color: #fff; }
.cf-hero-info h2 a:hover { color: #fff; opacity: .9; }
.cf-hero-blurb {
  color: #e0e0e0; font-size: 15px; line-height: 1.7; margin: 0 0 18px;
  max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cf-hero-rating {
  display: flex; align-items: baseline; flex-wrap: wrap;
  font-size: 20px; color: #fff; margin: 0 0 10px;
  font-weight: 700;
}
.cf-hero-rating .rating-label { color: #fff; }
.cf-hero-rating .rating-value {
  color: #fff200; font-weight: 900; font-size: 24px; margin: 0 8px 0 4px;
  vertical-align: middle;
}
.cf-hero-rating .rating-pct {
  display: inline-block; margin-left: 10px;
  background: var(--cf-accent); color: #fff;
  padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 600;
  vertical-align: middle;
}
.cf-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 18px; color: #fff; font-size: 20px; font-weight: 800; }
.cf-hero-tags span { display: inline-flex; align-items: center; }
/* age-badge 之后的相邻 span 之间用 | 分隔（age-badge 紧跟的第一个 span 例外，不加） */
.cf-hero-tags > span + span::before {
  content: "|";
  margin: 0 10px 0 3px;
  color: rgba(255,255,255,.35);
  font-weight: 400;
}
.cf-hero-tags > .age-badge + span::before {
  content: none;
  margin: 0;
}
.cf-hero-tags .age-badge {
  width: 24px;
  height: 24px;
  padding: 0;
  background: url("/static/cinefox/images/age-15.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

/* 透明胶囊按钮 */
.cf-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(21,21,28,.78); color: #fff !important;
  padding: 13px 18px; border-radius: 3px;
  font-size: 20px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.cf-pill:hover { background: rgba(70,70,70,.85); border-color: rgba(255,255,255,.4); }
.cf-pill-play {
  background: rgba(20,20,20,.85);
}
.cf-pill-play:hover { background: #fff; color: #000 !important; border-color: #fff; }

/* hero 控制 */
.cf-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.4); color: #fff; border: 0; cursor: pointer;
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 5; opacity: 0;
}
.cf-hero-wrap:hover .cf-hero-arrow { opacity: 1; }
.cf-hero-arrow:hover { background: rgba(0,0,0,.8); }
.cf-hero-arrow.prev { left: 24px; }
.cf-hero-arrow.next { right: 24px; }
.cf-hero-dots {
  position: absolute; bottom: 24px; left: 60px; z-index: 5;
  display: flex; gap: 6px;
}
.cf-dot {
  width: 24px; height: 3px; background: rgba(255,255,255,.3);
  border-radius: 2px; cursor: pointer; transition: all .2s;
}
.cf-dot.active { background: #fff; width: 40px; }

/* ====== 区块标题 ====== */
.cf-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cf-section-header h3 {
  font-size: 17px; font-weight: 700; color: #fff; margin: 0;
}
.cf-arrow-group { display: flex; align-items: center; gap: 8px; }
.cf-mini-arrow {
  background: transparent; color: #888; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cf-mini-arrow:hover { background: #fff; color: #000; }
.cf-section-header .more { color: #aaa; font-size: 13px; margin-left: 6px; }
.cf-section-header .more:hover { color: var(--cf-accent); }

/* ====== 横滚海报 ====== */
.cf-hscroll {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: visible;
  padding: 38px 0 44px;
  margin: -30px 0 -30px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  transform-style: preserve-3d;
  --cf-hover-scale: 1.24;
  --cf-hover-shift: 26px;
}
.cf-hscroll::-webkit-scrollbar { display: none; }
.cf-hscroll-multi {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 7);
  grid-template-rows: repeat(4, auto);
  gap: 58px 10px;
  align-items: start;
}
.cf-poster {
  flex: 0 0 220px;
  scroll-snap-align: start;
  position: relative; border-radius: 4px;
  background: #1a1a1a;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    transform .82s cubic-bezier(.2,.82,.18,1),
    box-shadow .82s cubic-bezier(.2,.82,.18,1),
    filter .55s ease;
  will-change: transform, box-shadow;
}
.cf-hscroll-multi .cf-poster {
  width: 100%;
}
.cf-hscroll-multi .cf-poster img {
  height: auto;
  aspect-ratio: 220 / 313;
}
.cf-poster:hover,
.cf-poster:focus-visible {
  transform: translate3d(0,-10px,0) scale(var(--cf-hover-scale));
  z-index: 20;
  box-shadow: 0 28px 62px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.1);
}
.cf-hscroll.cf-row-active .cf-poster.cf-shift-left {
  transform: translate3d(calc(var(--cf-hover-shift) * -1), 0, 0) scale(1);
}
.cf-hscroll.cf-row-active .cf-poster.cf-shift-right {
  transform: translate3d(var(--cf-hover-shift), 0, 0) scale(1);
}
/* 边缘海报放大时往中间靠，避免被横滚容器截 */
.cf-hscroll > .cf-poster:first-child:hover,
.cf-hscroll > .cf-poster:first-child:focus-visible {
  transform-origin: left center;
  transform: translate3d(0,-10px,0) scale(var(--cf-hover-scale));
}
.cf-hscroll > .cf-poster:last-child:hover,
.cf-hscroll > .cf-poster:last-child:focus-visible {
  transform-origin: right center;
  transform: translate3d(0,-10px,0) scale(var(--cf-hover-scale));
}
.cf-poster img {
  width: 100%; height: 313px; object-fit: cover; display: block;
  transition:
    filter .7s cubic-bezier(.2,.82,.18,1),
    transform 1.05s cubic-bezier(.2,.82,.18,1);
  transform: scale(1);
}
.cf-poster:hover img,
.cf-poster:focus-visible img {
  filter: brightness(.55) saturate(1.05);
  transform: scale(1.04);
}
/* 更新备注（"更新至 N 集"），右下角浮签 */
.cf-poster-remarks {
  position: absolute; right: 7px; top: 7px; z-index: 3;
  background: #ff4d4f; color: #fff;
  padding: 4px 8px; border-radius: 2px;
  font-size: 12px; font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  transition: opacity .35s ease;
}
.cf-poster:hover .cf-poster-remarks,
.cf-poster:focus-visible .cf-poster-remarks { opacity: 0; }

/* hover 渐变背景层 */
.cf-poster-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.58) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 70%);
  transition: opacity .62s cubic-bezier(.2,.82,.18,1);
  pointer-events: none;
  z-index: 2;
}
.cf-poster:hover .cf-poster-hover,
.cf-poster:focus-visible .cf-poster-hover { opacity: 1; }

.cf-poster-icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.96); color: #111;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12);
  transform: scale(.55) translateY(8px); opacity: 0;
  transition:
    transform .62s cubic-bezier(.2,1.1,.28,1),
    opacity .48s cubic-bezier(.2,.82,.18,1),
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}
.cf-poster:hover .cf-poster-icon,
.cf-poster:focus-visible .cf-poster-icon {
  transform: scale(1) translateY(0); opacity: 1;
  transition-delay: .12s, .12s, 0s, 0s, 0s;
}
.cf-poster-icon:hover {
  background: var(--cf-accent); color: #fff;
  transform: scale(1.08) translateY(0) !important;
  box-shadow: 0 8px 24px rgba(255,88,79,.5), 0 0 0 1px rgba(255,255,255,.2);
}

.cf-poster-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .52s cubic-bezier(.2,.82,.18,1),
    transform .62s cubic-bezier(.2,.82,.18,1);
}
.cf-poster:hover .cf-poster-meta,
.cf-poster:focus-visible .cf-poster-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .12s;
}
.cf-poster-score,
.cf-poster-area {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 50%;
  height: 22px;
  padding: 0 7px;
  border-radius: 2px;
  background: rgba(0,0,0,.68);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cf-poster-score {
  color: #ffd86b;
}
.cf-poster-score i {
  margin-right: 4px;
  font-size: 10px;
}

/* 标题：默认显示，hover 时上推让按钮更显眼 */
.cf-poster-name {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.95));
  color: #fff; padding: 24px 12px 12px;
  font-size: 15px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
  transition: transform .72s cubic-bezier(.2,.82,.18,1), padding .72s ease;
}
.cf-poster:hover .cf-poster-name,
.cf-poster:focus-visible .cf-poster-name {
  transform: translateY(-4px);
  padding-bottom: 16px;
}

/* ====== 卡片网格（详情/分类页的 cf-card 仍兼容） ====== */
.cf-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.cf-grid.large { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cf-card {
  display: block; background: var(--cf-card); border-radius: 4px;
  overflow: hidden;
  transform: translate3d(0,0,0) scale(1);
  transition:
    transform .68s cubic-bezier(.2,.82,.18,1),
    box-shadow .68s cubic-bezier(.2,.82,.18,1);
  will-change: transform;
}
.cf-card:hover,
.cf-card:focus-visible {
  transform: translate3d(0,-6px,0) scale(1.07);
  z-index: 5;
  position: relative;
  box-shadow: 0 18px 38px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06);
}
.cf-cover { position: relative; padding-top: 145%; overflow: hidden; background: #000; }
.cf-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform .95s cubic-bezier(.2,.82,.18,1), filter .62s cubic-bezier(.2,.82,.18,1);
}
.cf-card:hover .cf-cover img,
.cf-card:focus-visible .cf-cover img {
  transform: scale(1.045);
  filter: brightness(.72) saturate(1.04);
}
.cf-remarks {
  position: absolute; right: 7px; top: 7px;
  background: #ff4d4f; color: #fff;
  padding: 4px 8px; font-size: 12px; font-weight: 800; line-height: 1.25; border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.cf-vip-badge {
  position: absolute; left: 6px; top: 6px;
  background: #f5c518; color: #000;
  padding: 2px 6px; font-size: 10px; font-weight: 700; border-radius: 2px;
}
.cf-card-info { padding: 8px 10px 12px; }
.cf-card-title { font-size: 14px; color: #eee; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cf-card-meta { font-size: 12px; color: var(--cf-muted); }
.cf-card-score { color: #f5c518; font-weight: 700; margin-left: 6px; }

/* ====== 分类页 ====== */
.cf-type-hero {
  min-height: 132px;
  padding: 26px 40px 34px;
  display: flex;
  align-items: flex-start;
  background: #202020;
  border-bottom: 1px solid #050505;
  margin-top: 0;
}
.cf-type-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 900;
  text-shadow: 3px 3px 0 #1d8ed0;
}
.cf-type-tabs {
  background: #202020;
  border-top: 1px solid #343434;
  border-bottom: 1px solid #3a3a3a;
  /* padding-top 让出 absolute header（约 77px）空间，避免按钮被透明 header 叠加 */
  padding: 92px 40px 10px;
}
.cf-type-tabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cf-type-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #444;
  border-radius: 3px;
  color: #d8d8d8;
  background: #1b1b1b;
  font-size: 14px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.cf-type-tabs a:hover,
.cf-type-tabs a.active {
  color: #00c8ff;
  border-color: #00c8ff;
  background: #111;
}
.cf-type-filter {
  /* padding-top 92 让出 absolute header（~77px）空间 */
  padding: 92px 40px 16px;
  background: #181818;
  border-bottom: 1px solid #303030;
}
.cf-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 34px;
  padding: 5px 0;
}
.cf-filter-label {
  flex: 0 0 54px;
  color: #8f8f8f;
  font-size: 14px;
  line-height: 30px;
}
.cf-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-filter-options a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #333;
  border-radius: 3px;
  color: #d6d6d6;
  background: #1b1b1b;
  font-size: 13px;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.cf-filter-options a:hover,
.cf-filter-options a.active {
  color: #00c8ff;
  border-color: #00c8ff;
  background: #111;
}
.cf-type-content {
  padding: 34px 40px;
  background: #111;
}
.cf-type-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 28px 20px;
}
.cf-type-card {
  display: block;
  color: #fff;
  min-width: 0;
  position: relative;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  transition:
    transform .72s cubic-bezier(.2,.82,.18,1),
    filter .45s ease;
  will-change: transform;
}
.cf-type-card:hover,
.cf-type-card:focus-visible {
  z-index: 5;
  transform: translate3d(0,-8px,0) scale(1.045);
}
.cf-type-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    box-shadow .72s cubic-bezier(.2,.82,.18,1),
    filter .45s ease;
}
.cf-type-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(1);
  transition:
    transform 1.05s cubic-bezier(.2,.82,.18,1),
    filter .65s cubic-bezier(.2,.82,.18,1);
}
.cf-type-card:hover .cf-type-cover,
.cf-type-card:focus-visible .cf-type-cover {
  box-shadow: 0 22px 46px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.08);
}
.cf-type-card:hover .cf-type-cover img {
  transform: scale(1.035);
  filter: brightness(.9) saturate(1.05);
}
.cf-type-remarks {
  position: absolute;
  right: 8px;
  top: 12px;
  z-index: 3;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: 2px;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cf-type-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  color: #111;
  font-size: 18px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.62);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16);
  transition:
    opacity .42s cubic-bezier(.2,.82,.18,1),
    transform .62s cubic-bezier(.2,1.1,.28,1),
    background .2s ease,
    color .2s ease;
}
.cf-type-card:hover .cf-type-play,
.cf-type-card:focus-visible .cf-type-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cf-type-play:hover {
  background: var(--cf-accent);
  color: #fff;
}
.cf-type-info {
  padding: 10px 10px 0;
}
.cf-type-title {
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.cf-type-score {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}
.cf-type-score b {
  color: #ffe100;
  font-size: 17px;
  font-weight: 900;
}
.cf-type-stars {
  position: relative;
  display: inline-block;
  flex: 0 0 96px;
  width: 96px;
  height: 18px;
  color: #4f4f4f;
  letter-spacing: 1px;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  vertical-align: -2px;
}
.cf-stars-base,
.cf-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  white-space: nowrap;
}
.cf-stars-base {
  color: #505050;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.cf-stars-fill {
  color: #ffd400;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 8px rgba(255,212,0,.18);
  transition: width .46s cubic-bezier(.2,.82,.18,1);
}

/* ====== 面包屑 ====== */
.cf-breadcrumb {
  color: var(--cf-muted);
  font-size: 13px;
  max-width: 1620px;
  margin: 80px auto 16px;
  padding: 0 36px;
}
.cf-breadcrumb a:hover { color: var(--cf-accent); }
.cf-breadcrumb span { color: #fff; }

/* ====== 筛选 ====== */
.cf-filter { background: var(--cf-card); border-radius: 6px; padding: 14px 18px; margin: 0 36px 24px; }
.cf-filter-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 6px 0; border-bottom: 1px dashed var(--cf-border); }
.cf-filter-row:last-child { border-bottom: 0; }
.cf-filter-label { color: var(--cf-muted); font-size: 13px; min-width: 56px; margin-right: 8px; }
.cf-filter-row a { color: #ccc; font-size: 13px; padding: 3px 12px; margin: 2px 4px; border-radius: 3px; transition: all .15s; }
.cf-filter-row a:hover { background: #111; color: #00c8ff; border-color: rgba(0,200,255,.65); }
.cf-filter-row a.active { background: #111; color: #00c8ff; border-color: #00c8ff; }

/* ====== 详情页 ====== */
/* stage 是详情页统一外框：max-width 1620 + auto 居中 + padding 0 36，所有内部 section 全宽继承 */
.cf-detail-stage {
  position: relative;
  isolation: isolate;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 36px;
  box-sizing: border-box;
}
/* 沉浸式背景：高斯模糊 + 15% 深色遮罩 + 渐变融合 */
.cf-detail-backdrop {
  position: absolute;
  top: -90px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin-top: 0;
  background-size: cover;
  background-position: center 20%;
  /* 背景图完全清晰 + 微调亮度饱和度（保留沉浸感但不糊） */
  filter: brightness(.9) saturate(1.15);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  margin: 0;
}
.cf-detail-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 三层线性渐变融合 + 15% 不透明深色遮罩叠加：
   *   ① 整层 15% 黑色叠加（沉浸式基底）
   *   ② 横向：左侧加深，让左侧影片信息文字有对比度
   *   ③ 纵向：底部渐隐到背景色，与后续区块自然融合 */
  background:
    linear-gradient(0deg, rgba(0,0,0,.15), rgba(0,0,0,.15)),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 35%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 82%, rgba(10,10,10,.92) 100%);
}
.cf-detail {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 26px;
  max-width: none;
  margin: 0 0 30px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 1;
  /* padding-top 110px：补足删除面包屑后留出 absolute header 空间 */
  padding-top: 110px;
  min-height: 390px;
  align-items: start;
}
@media (max-width: 768px) {
  /* === 详情页 stage 框架 === */
  .cf-detail-stage { padding: 0 12px; }
  /* 海报和信息并排（手机也保留双列，避免顶部留白过大） */
  .cf-detail {
    grid-template-columns: 148px minmax(0, 1fr);
    padding: 100px 0 0;
    margin: 0 0 22px;
    gap: 14px;
    min-height: auto;
    align-items: start;
  }
  .cf-detail .cf-poster { max-width: none; margin: 0; }
  /* 详情页右侧信息 */
  .cf-info h1 { font-size: 18px; margin: 0 0 8px; line-height: 1.25; font-weight: 800; }
  .cf-info h1 small { font-size: 12px; margin-left: 0; display: block; margin-top: 3px; }
  .cf-stats { gap: 10px; font-size: 12px; flex-wrap: wrap; margin-bottom: 8px; }
  .cf-stats .score { font-size: 14px; }
  .cf-detail-meta-tags { font-size: 12px; gap: 5px; margin: 4px 0 10px; }
  .cf-detail-meta-item { font-size: 12px; }
  .cf-detail-meta-item + .cf-detail-meta-item::before { margin-right: 4px; }
  .cf-attrs { grid-template-columns: 1fr; font-size: 12px; gap: 3px 0; margin-bottom: 12px; }
  .cf-attrs li.wide { grid-column: span 1; }
  .cf-actions { flex-wrap: wrap; gap: 8px; }
  .cf-detail .js-detail-play { width: 100%; padding: 0 16px; min-height: 42px; font-size: 14px; justify-content: center; }

  /* === 静止画面 === */
  .cf-screenshot-section { padding: 12px 14px 14px; margin: 0 0 18px; }
  .cf-screenshot-section h2 { font-size: 16px; margin: 0 0 8px; }
  .cf-screenshot-item { flex: 0 0 170px; height: 96px; }
  .cf-screenshot-nav { width: 32px; height: 56px; margin-top: -28px; font-size: 20px; opacity: .85; }
  .cf-screenshot-viewer:hover .cf-screenshot-nav { opacity: .85; }

  /* === 相关推荐 / 评论 padding 改 12 === */
  .cf-source-block,
  .cf-detail-text,
  .cf-detail-related,
  .cf-detail-comments {
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  .cf-detail-comments .cf-comments-inner { padding: 14px 14px; }
  .cf-comments textarea { min-height: 64px; font-size: 14px; padding: 8px; }
  .cf-section-header h3 { font-size: 16px; }
}
.cf-detail .cf-poster {
  position: relative;
  padding-top: 145%;
  border-radius: 3px;
  overflow: hidden;
  background: #000;
  flex: none;
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.cf-detail .cf-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-detail .cf-poster .cf-vip-badge { left: 8px; top: 8px; }
.cf-info h1 {
  font-size: 40px;
  color: #fff;
  margin: 8px 0 12px;
  font-weight: 900;
  line-height: 1.14;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.cf-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  margin-bottom: 12px;
}
.cf-stats b {
  color: #ffe100;
  font-size: 24px;
  font-weight: 900;
}
.cf-info .cf-score-ring {
  display: none;
}
.cf-detail-stars-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cf-detail-stars-rating > span:first-child {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.cf-detail-stars-rating .cf-type-stars {
  flex-basis: 96px;
  width: 96px;
}
.cf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.cf-tag { display: inline-block; padding: 4px 10px; border-radius: 3px; background: rgba(255,255,255,.1); color: #eee; font-size: 13px; line-height: 1.5; }
.cf-tag.accent { background: rgba(255,255,255,.1); color: #eee; border: 0; }
.cf-detail-meta-tags {
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}
.cf-detail-meta-item {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.cf-detail-meta-item + .cf-detail-meta-item::before {
  content: "|";
  margin-right: 7px;
  color: rgba(255,255,255,.72);
  font-weight: 700;
}
.cf-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  background: url("/static/cinefox/images/age-15.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.cf-attrs { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 15px; color: #fff; }
.cf-attrs li.wide { grid-column: span 2; }
.cf-attrs span { color: #d7d7d7; margin-right: 6px; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #111; color: #fff !important;
  padding: 13px 24px; border-radius: 3px; font-size: 18px;
  border: 1px solid rgba(255,255,255,.08); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.cf-btn:hover { background: #080808; color: #00c8ff !important; border-color: #00c8ff; }
.cf-detail .js-detail-play {
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  background: linear-gradient(180deg, #ff5b42 0%, #e8312e 100%);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 4px;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(232,49,46,.34), 0 0 0 1px rgba(255,255,255,.08) inset;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.cf-detail .js-detail-play i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  color: #e8312e;
  font-size: 13px;
  text-shadow: none;
}
.cf-detail .js-detail-play:hover {
  background: linear-gradient(180deg, #ff6b52 0%, #f13a37 100%);
  color: #fff !important;
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 14px 34px rgba(232,49,46,.46), 0 0 0 1px rgba(255,255,255,.14) inset;
  transform: translateY(-1px);
}
.cf-btn-outline { background: transparent; color: #ddd !important; border: 1px solid #555; }
.cf-btn-outline:hover { background: #fff; color: #000 !important; border-color: #fff; }
.cf-screenshot-section {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 0 22px;
  padding: 18px 24px 22px;
  /* 沉浸式毛玻璃容器：
   *   - 15% 白色叠加（提供玻璃质感）
   *   - 二次高斯模糊（与下层模糊背景融合，沉浸感更强）
   *   - 极细 1px 高光边框（玻璃边缘） */
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  box-sizing: border-box;
}
.cf-screenshot-section h2 {
  margin: 0 0 14px;
  padding-left: 0;
  color: #d8d8d8;
  font-size: 24px;
  font-weight: 500;
}
.cf-screenshot-viewer {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cf-screenshot-strip {
  display: flex;
  gap: 8px;
  min-height: 170px;
  padding: 16px;
  background: rgba(0,0,0,.56);
  border: 1px solid rgba(255,255,255,.06);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  justify-content: safe center;
}
.cf-screenshot-strip::-webkit-scrollbar { display: none; }
.cf-screenshot-strip::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.cf-screenshot-item {
  display: block;
  flex: 0 0 360px;
  height: 172px;
  background: #111;
  overflow: hidden;
  scroll-snap-align: start;
}
.cf-screenshot-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 80px;
  margin-top: -40px;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 28px;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
  cursor: pointer;
  opacity: 0;
  transition: background .22s ease, opacity .22s ease, transform .22s ease;
}
.cf-screenshot-viewer:hover .cf-screenshot-nav { opacity: .9; }
.cf-screenshot-nav.prev { left: 8px; }
.cf-screenshot-nav.next { right: 8px; }
.cf-screenshot-nav:hover {
  background: rgba(0,0,0,.85);
  opacity: 1;
  transform: scale(1.04);
}
.cf-screenshot-nav:disabled {
  opacity: .32;
  cursor: default;
  transform: none;
}
.cf-screenshot-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.82,.18,1), filter .55s cubic-bezier(.2,.82,.18,1);
}
.cf-screenshot-item:hover img {
  transform: scale(1.035);
  filter: brightness(1.08);
}
.cf-screenshot-item {
  cursor: zoom-in;
}
.cf-modal-open {
  overflow: hidden;
}
.cf-player-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.cf-player-modal.open {
  display: flex;
}
.cf-player-modal.open .cf-player-mask,
.cf-image-modal.open .cf-image-mask {
  animation: cfModalMaskIn .78s cubic-bezier(.22,.72,.18,1) both;
}
.cf-player-modal.open .cf-player-dialog,
.cf-image-modal.open .cf-image-dialog {
  animation: cfModalGrowIn .96s cubic-bezier(.18,.88,.2,1) both;
  transform-origin: center center;
}
@keyframes cfModalMaskIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
  }
}
@keyframes cfModalGrowIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.78);
    filter: blur(10px);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.006);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}
.cf-player-mask {
  position: absolute;
  inset: 0;
  background: rgba(8,10,28,.78);
  backdrop-filter: blur(8px);
}
/* 深蓝紫色播放器弹窗 — 参考 ArtPlayer 经典暗色风格 */
.cf-player-dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, 94vw);
  background: #0e1230;
  border: 1px solid rgba(120,140,210,.18);
  border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden;
  touch-action: none;
}
.cf-player-dialog.dragging {
  user-select: none;
}
.cf-player-title {
  height: 48px;
  padding: 0 96px 0 18px;
  color: #e8eaf6;
  font-size: 14px;
  font-weight: 600;
  line-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #131736 0%, #0e1230 100%);
  border-bottom: 1px solid rgba(120,140,210,.15);
  cursor: move;
  letter-spacing: .3px;
}
.cf-player-tools {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.cf-player-close,
.cf-player-tools .cf-player-action {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b8bce0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.cf-player-close:hover,
.cf-player-tools .cf-player-action:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.cf-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.cf-player-box iframe,
.cf-player-box .art-video-player {
  width: 100%;
  height: 100%;
  border: 0;
}
/* ArtPlayer 控件配色与弹窗主题保持一致 */
.cf-player-box .art-video-player .art-control { color: #e8eaf6; }
.cf-player-box .art-video-player .art-bottom { background: linear-gradient(0deg, rgba(14,18,48,.92) 0%, rgba(14,18,48,0) 100%); }
.cf-image-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.cf-image-modal.open {
  display: flex;
}
.cf-image-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(5px);
}
.cf-image-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 92vw);
  max-height: 88vh;
  background: #050505;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.75);
  touch-action: none;
}
.cf-image-dialog.dragging {
  user-select: none;
}
.cf-image-title {
  height: 36px;
  padding: 0 52px 0 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: move;
}
.cf-image-stage {
  position: relative;
  height: min(68vh, 680px);
  overflow: auto;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-image-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .16s ease;
}
.cf-image-close {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 3px;
  background: rgba(0,0,0,.72);
  color: #fff;
  cursor: pointer;
}
.cf-image-close:hover {
  color: #00c8ff;
  background: rgba(0,0,0,.92);
}
.cf-image-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 44px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #050505;
}
.cf-image-tools button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
}
.cf-image-tools button:hover {
  color: #00c8ff;
  background: rgba(255,255,255,.06);
}

/* ====== 播放源/集数 ====== */
.cf-source-block { background: var(--cf-card); border-radius: 6px; padding: 14px 18px; margin: 0 36px 14px; }
.cf-source-name { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--cf-border); }
.cf-source-name b { color: var(--cf-accent); margin-left: 6px; }
.cf-ep-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.cf-ep { display: block; background: #2a2a2a; color: #ddd; text-align: center; padding: 8px 4px; border-radius: 3px; font-size: 12px; transition: all .15s; }
.cf-ep:hover, .cf-ep.active { background: var(--cf-accent); color: #fff; }

/* ====== 播放页 ====== */
.cf-play-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin: 80px 36px 24px; align-items: start; }
@media (max-width: 900px) { .cf-play-wrap { grid-template-columns: 1fr; } }
.cf-player-col { background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.6); }
.cf-player-header { padding: 14px 18px 0; }
.cf-player-header h1 {
  color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cf-source-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #1a1a1a; }
.cf-source-tab { background: #1f1f1f; color: #bbb; padding: 6px 14px; border-radius: 3px; font-size: 12px; transition: all .15s; }
.cf-source-tab:hover { background: #2a2a2a; color: #fff; }
.cf-source-tab.active { background: var(--cf-accent); color: #fff; }
.cf-player-tips { color: var(--cf-muted); font-size: 12px; padding: 12px 18px 16px; background: #0a0a0a; }
#dplayer { background: #000; }
.cf-episodes-col { background: var(--cf-card); border-radius: 8px; padding: 16px; max-height: 720px; overflow-y: auto; }
.cf-episodes-col::-webkit-scrollbar { width: 6px; }
.cf-episodes-col::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.cf-episodes-header { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cf-border); display: flex; align-items: center; gap: 6px; }
.cf-episodes-header::before { content: "▶"; color: var(--cf-accent); font-size: 10px; }
.cf-episode-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.cf-episode-list .cf-ep { padding: 9px 4px; font-size: 12px; }

/* ====== 播放页底部简要 ====== */
.cf-brief { display: flex; gap: 18px; background: var(--cf-card); border-radius: 6px; padding: 18px; margin: 0 36px 24px; }
.cf-brief-poster { flex: 0 0 100px; }
.cf-brief-poster img { width: 100%; border-radius: 4px; }
.cf-brief-info { flex: 1; }
.cf-brief-info h2 { color: #fff; font-size: 18px; margin: 0 0 6px; }
.cf-brief-meta { color: var(--cf-muted); font-size: 13px; margin-bottom: 8px; }
.cf-brief-desc { color: #bbb; font-size: 13px; line-height: 1.6; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ====== 评论 ====== */
.cf-comments { background: var(--cf-card); border-radius: 6px; padding: 18px; margin: 0 36px; }
.cf-comments textarea { width: 100%; min-height: 80px; background: #0d0d0d; border: 1px solid var(--cf-border); color: var(--cf-text); padding: 10px; border-radius: 4px; resize: vertical; }
.cf-detail-text,
.cf-detail-related {
  position: relative;
  z-index: 1;
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;
  padding-right: 36px;
}
.cf-detail-comments {
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;
  padding-right: 36px;
  background: transparent;
  box-sizing: border-box;
}
/* 内层卡片才是真正的色块，外缘对齐到 stage padding (X=36) */
.cf-detail-comments .cf-comments-inner {
  background: var(--cf-card);
  border-radius: 6px;
  padding: 18px 24px;
  margin: 0;
}

/* ====== 分页 ====== */
/* ====== 强化版分页：首页/末页/上下页/页码/省略号/跳转输入 ====== */
.cf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 36px 0 24px;
  font-family: "Manrope", "Noto Sans SC", sans-serif;
}

/* 上一页/下一页/首末页 按钮 */
.cf-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  background: var(--cf-card);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.cf-page-btn:hover {
  background: var(--cf-accent);
  color: #fff;
  border-color: var(--cf-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,88,79,.35);
}
.cf-page-btn.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.cf-page-btn.cf-page-edge {
  padding: 0;
  min-width: 38px;
}

/* 页码数字 */
.cf-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  background: var(--cf-card);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
}
.cf-page-num:hover {
  background: rgba(255,88,79,.15);
  color: var(--cf-accent);
  border-color: rgba(255,88,79,.5);
  transform: translateY(-1px);
}
.cf-page-num.current {
  background: var(--cf-accent);
  color: #fff;
  border-color: var(--cf-accent);
  box-shadow: 0 4px 14px rgba(255,88,79,.4);
  cursor: default;
  position: relative;
}
.cf-page-num.current::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  background: var(--cf-accent);
  border-radius: 1px;
}

/* 省略号 */
.cf-page-gap {
  color: var(--cf-muted);
  padding: 0 4px;
  font-weight: 700;
  letter-spacing: 1px;
  user-select: none;
}

/* 信息文字 */
.cf-page-info {
  margin: 0 12px;
  color: var(--cf-muted);
  font-size: 13px;
}
.cf-page-info b {
  color: var(--cf-accent);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  margin: 0 2px;
}
.cf-page-total { color: #777; margin-left: 4px; }

/* 跳转输入 */
.cf-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--cf-muted);
  font-size: 13px;
}
.cf-page-jump input {
  width: 56px;
  height: 38px;
  padding: 0 8px;
  background: var(--cf-card);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.cf-page-jump input:focus {
  border-color: var(--cf-accent);
}
/* 隐藏数字框的箭头 */
.cf-page-jump input::-webkit-inner-spin-button,
.cf-page-jump input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cf-page-jump input[type=number] { -moz-appearance: textfield; }

.cf-page-jump button {
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(135deg, var(--cf-accent) 0%, #d6346a 100%);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 3px 10px rgba(255,88,79,.3);
}
.cf-page-jump button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,88,79,.5);
}

/* 移动端：隐藏 "上一页/下一页" 文字仅留图标 + 隐藏跳转表单 */
@media (max-width: 768px) {
  .cf-pagination { gap: 4px; margin: 24px 0 16px; }
  .cf-page-btn { padding: 0 10px; min-width: 34px; height: 34px; }
  .cf-page-num { min-width: 34px; height: 34px; font-size: 12px; }
  .cf-page-text { display: none; }
  .cf-page-info { font-size: 12px; margin: 0 6px; flex-basis: 100%; text-align: center; order: 99; }
  .cf-page-jump { display: none; }
}

/* ====== 消息提示页 ====== */
.cf-msg { text-align: center; padding: 120px 20px 60px; }
.cf-msg h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.cf-msg p { color: var(--cf-muted); margin-bottom: 24px; }

/* ====== 搜索头 ====== */
.cf-search-header { padding: 100px 36px 24px; }
.cf-search-header h1 { color: #fff; font-size: 22px; font-weight: 600; }
.cf-search-header small { color: var(--cf-muted); font-size: 13px; font-weight: 400; margin-left: 8px; }

/* ====== 空状态 ====== */
.cf-empty { text-align: center; padding: 60px 20px; color: var(--cf-muted); }

/* ====== 页脚 ====== */
.cf-footer { background: #000; padding: 36px 36px 24px; border-top: 1px solid var(--cf-border); margin-top: 60px; }
.cf-footer-inner { max-width: 1680px; margin: 0 auto; }
.cf-footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--cf-border); }
.cf-footer-links a { color: #999; font-size: 12px; }
.cf-footer-links a:hover { color: var(--cf-accent); }
.cf-copyright { color: #666; font-size: 12px; line-height: 1.8; }
.cf-copyright p { margin: 0; }

/* ====== 移动端适配 ====== */
@media (max-width: 768px) {
  /* === 顶栏 === */
  .cf-header { padding: 6px 0; }
  .cf-header-inner { flex-wrap: wrap; gap: 6px; padding: 8px 14px; align-items: center; }
  .cf-logo { font-size: 22px; letter-spacing: .5px; }
  .cf-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 4px; gap: 16px; scrollbar-width: none; -ms-overflow-style: none; }
  .cf-nav::-webkit-scrollbar { display: none; }
  .cf-nav a { white-space: nowrap; font-size: 13px; padding: 4px 0; }
  .cf-header-actions { margin-left: auto; gap: 8px; }
  .cf-icon-btn { font-size: 16px; padding: 4px; }
  .cf-avatar { width: 30px; height: 30px; font-size: 16px; }
  .cf-search-overlay { right: 12px; max-width: calc(100vw - 24px); padding: 10px 12px; }
  .cf-search-form input { width: 200px; max-width: 60vw; }

  /* === Hero（首页） === */
  .cf-hero-wrap { height: 60vh; min-height: 340px; max-height: 560px; }
  .cf-hero-info { padding: 20vh 18px 0; max-width: 100%; }
  .cf-hero-info h2 { font-size: clamp(28px, 9vw, 46px); margin-bottom: 12px; line-height: 1.12; }
  .cf-hero-blurb { font-size: 13px; line-height: 1.55; -webkit-line-clamp: 2; margin-bottom: 14px; }
  .cf-hero-rating { font-size: 14px; margin-bottom: 8px; }
  .cf-hero-rating .rating-value { font-size: 18px; }
  .cf-hero-tags { font-size: 14px; gap: 5px; margin-bottom: 16px; }
  .cf-hero-tags > span + span::before { margin: 0 8px 0 2px; }
  .cf-hero-actions { gap: 8px; flex-wrap: wrap; }
  .cf-pill { padding: 10px 16px; font-size: 13px; gap: 6px; }

  /* === 首页 section + 横滚海报 === */
  .cf-section { padding: 0 14px; margin: 20px 0 26px; }
  .cf-section-header h3 { font-size: 16px; }
  .cf-mini-arrow { display: none; } /* 触屏用手势滑，隐藏箭头 */

  .cf-hscroll { gap: 8px; padding: 8px 0 16px; margin: 0; }
  .cf-poster { flex: 0 0 140px; }
  .cf-poster img { height: 200px; }
  .cf-poster-name { font-size: 12px; padding: 18px 8px 8px; }
  .cf-hscroll-multi { grid-auto-columns: calc((100% - 20px) / 3); gap: 40px 10px; }
  .cf-hscroll-multi .cf-poster { width: 100%; }
  .cf-hscroll-multi .cf-poster img { height: auto; }
  .cf-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* === 分类页 === */
  .cf-type-hero { min-height: 100px; padding: 110px 14px 18px; }
  .cf-type-hero h1 { font-size: 28px; }
  /* hero 被移除后，tabs 作为首个内容自己处理 header 间距 */
  .cf-type-tabs { padding: 96px 14px 10px; }
  .cf-type-tabs-inner { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .cf-type-tabs-inner::-webkit-scrollbar { display: none; }
  .cf-type-tabs a { flex: 0 0 auto; min-height: 38px; padding: 0 14px; font-size: 13px; }
  .cf-type-filter { padding: 100px 14px 10px; }
  .cf-filter-row { gap: 10px; padding: 5px 0; }
  .cf-filter-label { flex-basis: 42px; font-size: 13px; }
  .cf-filter-options { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .cf-filter-options::-webkit-scrollbar { display: none; }
  .cf-filter-options a { flex: 0 0 auto; font-size: 13px; }
  .cf-type-content { padding: 20px 14px 32px; }
  .cf-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .cf-type-title { font-size: 13px; }
  .cf-type-score { font-size: 12px; gap: 4px; }
  .cf-type-score b { font-size: 15px; }
  .cf-type-stars { flex-basis: 72px; width: 72px; height: 14px; font-size: 14px; letter-spacing: 0; }

  /* === 面包屑（与 sticky/absolute header 拉开距离避免重叠） === */
  .cf-breadcrumb { margin: 110px 14px 8px; font-size: 12px; }

  /* === Footer === */
  .cf-footer { padding: 22px 14px 18px; margin-top: 36px; }
  .cf-footer-links { gap: 4px 10px; }
  .cf-copyright { font-size: 11px; }
}

/* === 超小屏（≤480）细调 === */
@media (max-width: 480px) {
  .cf-logo { font-size: 19px; }
  .cf-nav a { font-size: 12px; }
  .cf-search-overlay { right: 8px; padding: 8px 10px; }
  .cf-search-form input { width: 160px; }

  .cf-hero-wrap { height: 56vh; min-height: 320px; }
  .cf-hero-info { padding: 16vh 14px 0; }
  .cf-hero-info h2 { font-size: clamp(24px, 8vw, 32px); }
  .cf-hero-blurb { font-size: 12px; -webkit-line-clamp: 2; }

  .cf-section { padding: 0 12px; margin: 16px 0 22px; }
  .cf-poster { flex: 0 0 116px; }
  .cf-poster img { height: 168px; }
  .cf-poster-name { font-size: 11px; padding: 14px 6px 6px; }
  .cf-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .cf-detail-stage { padding: 0 10px; }
  .cf-detail { grid-template-columns: 128px minmax(0, 1fr); padding: 90px 0 0; gap: 12px; }
  .cf-detail .cf-poster { max-width: none; }
  .cf-info h1 { font-size: 16px; }
  .cf-pill { padding: 9px 12px; font-size: 12px; }
  .cf-detail .js-detail-play { font-size: 15px; min-height: 44px; }

  .cf-screenshot-section { padding: 10px 12px 12px; }
  .cf-screenshot-item { flex: 0 0 142px; height: 80px; }
  .cf-screenshot-section h2 { font-size: 15px; }

  .cf-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .cf-type-hero { padding: 108px 10px 14px; min-height: 70px; }
  .cf-type-hero h1 { font-size: 22px; }
  .cf-type-tabs { padding: 96px 10px 8px; }

  .cf-breadcrumb { margin: 108px 10px 6px; }
}

@media (hover: none) {
  .cf-hscroll {
    overflow-y: hidden;
    padding: 18px 0;
    margin: -10px 0;
  }
  .cf-poster:hover,
  .cf-poster:focus-visible,
  .cf-hscroll > .cf-poster:first-child:hover,
  .cf-hscroll > .cf-poster:first-child:focus-visible,
  .cf-hscroll > .cf-poster:last-child:hover,
  .cf-hscroll > .cf-poster:last-child:focus-visible {
    transform: translate3d(0,0,0) scale(1.03);
    box-shadow: 0 10px 24px rgba(0,0,0,.5);
  }
  .cf-card:hover,
  .cf-card:focus-visible {
    transform: translate3d(0,0,0) scale(1.02);
  }
}

/* === 移动端 padding override（放最后保证覆盖前面所有主规则） === */
@media (max-width: 768px) {
  .cf-detail-comments {
    padding-left: 12px;
    padding-right: 12px;
  }
  .cf-detail-comments .cf-comments-inner {
    padding: 14px 16px;
    margin: 0;
  }
  .cf-detail-related {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 480px) {
  .cf-detail-comments,
  .cf-detail-related {
    padding-left: 10px;
    padding-right: 10px;
  }
  .cf-detail-comments .cf-comments-inner {
    padding: 12px 14px;
  }
}