/* site-craft · 成品8 · 熔岩夕照 · sunset-flare
   深褐玫瑰熔岩 · 3:4 竖卡 · 衬线标题 · 压在 layout-fix 之后 */

:root {
  --sf-primary: #e11d48;
  --sf-secondary: #ea580c;
  --sf-accent: #f59e0b;
  --sf-rose: #fb7185;
  --sf-bg: #12080b;
  --sf-surface: #1f1014;
  --sf-surface-2: #2a141a;
  --sf-text: #fff1f2;
  --sf-muted: #d4b8ae;
  --sf-line: rgba(225, 29, 72, 0.28);
  --sf-max: 1200px;
  --sf-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sf-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --site-accent: #e11d48;
  --site-secondary: #ea580c;
  --site-ink: #fff1f2;
  --site-bg: #12080b;
  color-scheme: dark;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.sf-site {
  margin: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  isolation: isolate;
  color: var(--sf-text) !important;
  font-family: var(--sf-sans) !important;
  line-height: 1.55 !important;
  background-color: var(--sf-bg) !important;
  background-image: linear-gradient(180deg, #1a0c10 0%, var(--sf-bg) 42%, #0a0507 100%) !important;
  overflow-x: clip !important;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-font-smoothing: antialiased;
}

/* 呼吸彩色光晕：柔和起伏，不抢内容对比 */
body.sf-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 52% at 10% 0%, rgba(225, 29, 72, 0.26), transparent 60%),
    radial-gradient(ellipse 52% 48% at 96% 14%, rgba(234, 88, 12, 0.2), transparent 58%),
    radial-gradient(ellipse 58% 42% at 50% 100%, rgba(245, 158, 11, 0.14), transparent 58%),
    radial-gradient(ellipse 40% 36% at 70% 46%, rgba(251, 113, 133, 0.12), transparent 55%);
  background-repeat: no-repeat;
  transform-origin: 50% 40%;
  will-change: opacity, transform, filter;
}
/* 勿给 body>* 统一 z-index:0，否则 sticky 顶栏会被后继 main/hero 盖住 */
body.sf-site > .sf-head {
  position: sticky;
  z-index: 200 !important;
}
body.sf-site > .sf-main,
body.sf-site > .sf-foot {
  position: relative;
  z-index: 0;
}

/* 链接默认跟正文，交互色单独给按钮/文链 */
body.sf-site a {
  color: inherit;
  text-decoration: none !important;
}
body.sf-site a:hover {
  color: var(--sf-accent);
}
body.sf-site .sf-sec-head__link,
body.sf-site .sf-foot__col a,
body.sf-site .sf-crumb a {
  color: var(--sf-rose) !important;
}
body.sf-site .sf-sec-head__link:hover,
body.sf-site .sf-foot__col a:hover,
body.sf-site .sf-crumb a:hover {
  color: var(--sf-accent) !important;
}

body.sf-site h1,
body.sf-site h2,
body.sf-site .sf-brand__text strong,
body.sf-site .sf-foot__logo {
  font-family: var(--sf-serif) !important;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── 顶栏：熔岩细焰条 + 品牌 | 导航 | 搜索 ── */
.sf-head {
  position: sticky !important;
  top: 0;
  z-index: 200 !important;
  background: rgba(18, 8, 11, 0.96) !important;
  border-bottom: 1px solid var(--sf-line) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-top: env(safe-area-inset-top, 0);
  isolation: isolate;
}
.sf-head__flare {
  height: 3px !important;
  background: linear-gradient(
    90deg,
    #7f1d1d 0%,
    var(--sf-primary) 28%,
    var(--sf-secondary) 62%,
    var(--sf-accent) 100%
  ) !important;
}
.sf-head__core {
  max-width: var(--sf-max) !important;
  margin: 0 auto !important;
  min-height: 56px !important;
  padding: 8px 16px !important;
  gap: 14px !important;
}
.sf-brand__sun {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, var(--sf-secondary), var(--sf-primary)) !important;
  color: #1a0508 !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 10px 22px rgba(225, 29, 72, 0.35) !important;
  transform: rotate(-4deg) !important;
}
.sf-brand {
  color: var(--sf-text) !important;
}
.sf-brand__text strong {
  font-size: 1.08rem !important;
  letter-spacing: 0.02em !important;
  color: var(--sf-text) !important;
}
.sf-brand__text small {
  color: #d6b4a8 !important;
  letter-spacing: 0.06em !important;
}

.sf-nav a {
  border-radius: 8px !important;
  color: #e7d5ce !important;
  font-weight: 700 !important;
}
.sf-nav a[aria-current="page"],
.sf-nav a:hover {
  background: color-mix(in srgb, var(--sf-primary) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--sf-primary) 45%, transparent) !important;
  color: #fff7ed !important;
}

.sf-search {
  border-radius: 10px !important;
  background: var(--sf-surface-2) !important;
  border-color: var(--sf-line) !important;
}
.sf-search input {
  min-width: 0;
  width: min(160px, 28vw) !important;
}
.sf-search .sf-btn--cta,
.sf-btn--cta {
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)) !important;
  color: #fff7ed !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.35) !important;
}
body.sf-site a.sf-btn--cta,
body.sf-site .sf-search .sf-btn--cta {
  color: #fff7ed !important;
}
body.sf-site a.sf-btn--cta:hover,
body.sf-site .sf-btn--cta:hover {
  color: #fff !important;
  filter: brightness(1.06);
}
.sf-btn--outline {
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--sf-accent) 45%, transparent) !important;
}
body.sf-site a.sf-btn--outline {
  color: var(--sf-text) !important;
}
body.sf-site a.sf-btn--outline:hover {
  color: var(--sf-accent) !important;
  border-color: var(--sf-accent) !important;
}

.sf-head__rank {
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--sf-accent) 16%, var(--sf-surface)) !important;
  color: var(--sf-accent) !important;
}
body.sf-site a.sf-head__rank:hover {
  background: var(--sf-accent) !important;
  color: #1a0508 !important;
}

/* 题材芯片：熔岩暖色系，去掉紫蓝撞车 */
.sf-genres {
  max-width: var(--sf-max) !important;
  padding: 6px 16px 12px !important;
}
.sf-genres__pill {
  border-radius: 8px !important;
  font-weight: 800 !important;
}
.sf-genres__pill--d { background: linear-gradient(135deg, #ea580c, #f97316) !important; color: #1a0508 !important; }
.sf-genres__pill--r { background: linear-gradient(135deg, #e11d48, #fb7185) !important; color: #fff !important; }
.sf-genres__pill--c { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; color: #1a0508 !important; }
.sf-genres__pill--s { background: linear-gradient(135deg, #9f1239, #be123c) !important; color: #fff !important; }
.sf-genres__pill--a { background: linear-gradient(135deg, #c2410c, #ea580c) !important; color: #fff !important; }
.sf-genres__pill--m { background: linear-gradient(135deg, #b45309, #d97706) !important; color: #fff7ed !important; }
.sf-genres__pill--f { background: linear-gradient(135deg, #7c2d12, #9a3412) !important; color: #ffedd5 !important; }
.sf-genres__pill--y { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #1a0508 !important; }
.sf-genres__pill--h { background: linear-gradient(135deg, #fb7185, #e11d48) !important; color: #fff !important; }
.sf-genres__pill--o { background: linear-gradient(135deg, #78716c, #57534e) !important; color: #fff !important; }

/* ── 主区 ── */
.sf-main {
  flex: 1 0 auto;
  max-width: var(--sf-max) !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 20px 16px 48px !important;
  min-width: 0;
}

/* ── Hero：文案左 + 三叠竖海报右 ── */
.sf-hero {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  margin-bottom: 28px !important;
  min-height: 300px !important;
  border: 1px solid rgba(251, 191, 36, 0.22) !important;
  background: #1c0e12 !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.08) !important;
}
.sf-hero__bg {
  background:
    linear-gradient(115deg, rgba(28, 12, 16, 0.88) 0%, rgba(48, 18, 26, 0.55) 48%, rgba(225, 29, 72, 0.28) 100%),
    radial-gradient(circle at 78% 40%, rgba(234, 88, 12, 0.4), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.18), transparent 45%) !important;
}
.sf-hero__layout {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) !important;
  gap: 20px !important;
  padding: clamp(26px, 4.5vw, 48px) clamp(18px, 3.5vw, 36px) !important;
  align-items: center !important;
}
.sf-hero__eyebrow {
  color: #fbbf24 !important;
  letter-spacing: 0.12em !important;
  text-transform: none !important;
  font-weight: 800 !important;
}
.sf-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.45rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  max-width: 14em;
  color: #fff7ed !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.sf-hero__intro {
  color: #f0ddd4 !important;
  max-width: 36em !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.sf-hero__viz {
  position: relative !important;
  height: 240px !important;
  min-height: 220px;
}
.sf-hero__frame {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 2px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
  background: #2a141a !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sf-hero__frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.sf-hero__frame--1 {
  width: 128px !important;
  height: 172px !important;
  right: 64px !important;
  top: 8px !important;
  transform: rotate(-8deg) !important;
  z-index: 1 !important;
  aspect-ratio: 3 / 4;
}
.sf-hero__frame--2 {
  width: 118px !important;
  height: 158px !important;
  right: 8px !important;
  top: 28px !important;
  transform: rotate(7deg) !important;
  z-index: 2 !important;
  border-color: color-mix(in srgb, var(--sf-secondary) 60%, transparent) !important;
}
.sf-hero__frame--3 {
  width: 108px !important;
  height: 144px !important;
  right: 96px !important;
  top: 56px !important;
  transform: rotate(12deg) !important;
  z-index: 3 !important;
  border-color: color-mix(in srgb, var(--sf-accent) 65%, transparent) !important;
}
a.sf-hero__frame:hover {
  transform: rotate(-2deg) translateY(-4px) !important;
  box-shadow: 0 22px 48px rgba(225, 29, 72, 0.35) !important;
  z-index: 5 !important;
}

/* ── 马赛克：标题白字 + 色顶条 + 暖底，不被全局链接色污染 ── */
.sf-mosaic__grid {
  gap: 12px !important;
}
body.sf-site a.sf-mosaic__tile,
.sf-mosaic__tile {
  border-radius: 14px !important;
  padding: 18px 16px !important;
  border: 1px solid rgba(255, 241, 242, 0.08) !important;
  border-top-width: 3px !important;
  border-top-style: solid !important;
  background: linear-gradient(180deg, #2a161c 0%, #1a1014 100%) !important;
  color: var(--sf-text) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
body.sf-site a.sf-mosaic__tile:hover,
.sf-mosaic__tile:hover {
  color: var(--sf-text) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(225, 29, 72, 0.18);
}
.sf-mosaic__tile strong {
  color: #fff7ed !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}
.sf-mosaic__tile span {
  color: #cbb0a6 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
}
.sf-mosaic__tile--d {
  border-top-color: #f97316 !important;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.18), #1a1014 70%) !important;
}
.sf-mosaic__tile--r {
  border-top-color: #fb7185 !important;
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.2), #1a1014 70%) !important;
}
.sf-mosaic__tile--c {
  border-top-color: #fbbf24 !important;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), #1a1014 70%) !important;
}
.sf-mosaic__tile--s {
  border-top-color: #e11d48 !important;
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.2), #1a1014 70%) !important;
}
.sf-mosaic__tile--a {
  border-top-color: #ea580c !important;
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.18), #1a1014 70%) !important;
}
.sf-mosaic__tile--m {
  border-top-color: #f59e0b !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), #1a1014 70%) !important;
}
.sf-mosaic__tile--f {
  border-top-color: #c2410c !important;
  background: linear-gradient(180deg, rgba(194, 65, 12, 0.18), #1a1014 70%) !important;
}
.sf-mosaic__tile--h {
  border-top-color: #fda4af !important;
  background: linear-gradient(180deg, rgba(253, 164, 175, 0.16), #1a1014 70%) !important;
}

.sf-sec-head h2 {
  color: #fff7ed !important;
}
.sf-sec--light {
  background: linear-gradient(180deg, rgba(42, 20, 26, 0.92), rgba(26, 16, 20, 0.88)) !important;
  border-color: rgba(225, 29, 72, 0.22) !important;
  border-radius: 14px !important;
}
.sf-sec-head__dot {
  border-radius: 2px !important;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.55) !important;
}
.sf-sec-head__dot--hot {
  background: var(--sf-accent) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.55) !important;
}
.sf-sec-head__dot--new {
  background: var(--sf-rose) !important;
  box-shadow: 0 0 14px rgba(251, 113, 133, 0.5) !important;
}

/* ── 卡片：强制 3:4 ── */
.sf-card {
  border-radius: 12px !important;
}
.sf-card__pic {
  border-radius: 12px !important;
  border: 1px solid var(--sf-line) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.sf-card__pic img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}
.sf-card__badge {
  border-radius: 6px !important;
  background: linear-gradient(135deg, var(--sf-accent), #fbbf24) !important;
  color: #1a0508 !important;
}
.sf-card__shade {
  background: linear-gradient(
    0deg,
    rgba(18, 8, 11, 0.94) 0%,
    rgba(18, 8, 11, 0.55) 55%,
    transparent 100%
  ) !important;
}
.sf-card__meta span:first-child {
  color: var(--sf-rose) !important;
}

.sf-grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important;
}

/* ── 最新入库：横滑竖版海报卡（统一宽度，禁止叠压） ── */
.sf-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 4px 16px !important;
  margin: 0 -4px !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 29, 72, 0.45) transparent;
}
.sf-scroll::-webkit-scrollbar {
  height: 6px;
}
.sf-scroll::-webkit-scrollbar-thumb {
  background: rgba(225, 29, 72, 0.45);
  border-radius: 999px;
}
.sf-scroll > .sf-card {
  flex: 0 0 152px !important;
  width: 152px !important;
  min-width: 152px !important;
  max-width: 152px !important;
  scroll-snap-align: start;
  margin: 0 !important;
  transform: none !important;
  align-self: flex-start !important;
}
.sf-scroll > .sf-card:hover {
  transform: translateY(-3px) !important;
  z-index: 1;
}
.sf-scroll > .sf-card .sf-card__link {
  display: block !important;
  width: 100% !important;
}
.sf-scroll > .sf-card .sf-card__pic {
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.sf-scroll > .sf-card .sf-card__pic img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
}
.sf-scroll > .sf-card .sf-card__shade {
  padding: 40px 10px 10px !important;
  background: linear-gradient(
    0deg,
    rgba(12, 6, 8, 0.96) 0%,
    rgba(12, 6, 8, 0.55) 55%,
    transparent 100%
  ) !important;
}
.sf-scroll > .sf-card .sf-card__shade h3 {
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff7ed !important;
}
.sf-scroll > .sf-card .sf-card__meta {
  font-size: 0.66rem !important;
  color: #d4b8ae !important;
}
.sf-scroll > .sf-card .sf-card__badge {
  border-radius: 6px !important;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0508 !important;
}

/* 首页若仍有横条 strip，保持原横条气质 */
.sf-scroll > .sf-strip {
  flex: 0 0 min(280px, 78vw) !important;
  width: min(280px, 78vw) !important;
  min-width: min(280px, 78vw) !important;
  scroll-snap-align: start;
  background: var(--sf-surface) !important;
  border-color: var(--sf-line) !important;
  border-radius: 12px !important;
}
.sf-strip__body h3,
.sf-strip__body h3 a {
  color: #fff7ed !important;
}
.sf-strip__body h3 a:hover {
  color: var(--sf-accent) !important;
}
.sf-strip__go {
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-secondary)) !important;
  border-radius: 10px !important;
}
body.sf-site a.sf-strip__go {
  color: #fff !important;
}
.sf-card__shade h3 {
  color: #fff7ed !important;
}

@media (max-width: 640px) {
  .sf-scroll > .sf-card {
    flex-basis: 136px !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
  }
}

/* 分类 / 播放 */
.sf-cat-head {
  border-left-color: var(--sf-primary) !important;
  background: linear-gradient(
    120deg,
    var(--sf-surface),
    color-mix(in srgb, var(--sf-primary) 12%, var(--sf-surface-2))
  ) !important;
}
.sf-filter {
  border-radius: 12px !important;
  top: 120px !important;
}

/* ── 播放页：面包屑 / 播放器 / 详情 ── */
.sf-crumb--play {
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(42, 20, 26, 0.65) !important;
  border: 1px solid rgba(225, 29, 72, 0.18) !important;
}
.sf-crumb--play a {
  color: var(--sf-rose) !important;
}
.sf-player {
  border-radius: 16px !important;
  border: 1px solid rgba(251, 191, 36, 0.28) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 36px rgba(225, 29, 72, 0.12) !important;
  overflow: hidden !important;
  background: #000 !important;
  margin-bottom: 18px !important;
}
.sf-player__frame {
  background: #000 !important;
}
.sf-player__frame video,
#movie-player {
  width: 100% !important;
  max-height: min(78vh, 720px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000 !important;
  display: block !important;
  border-radius: 0 !important;
}
.sf-detail {
  grid-template-columns: 168px minmax(0, 1fr) minmax(140px, 180px) !important;
  gap: 22px !important;
  padding: 20px 22px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #2a161c, #1a1014) !important;
  border: 1px solid rgba(225, 29, 72, 0.22) !important;
  margin-bottom: 20px !important;
}
.sf-detail__poster {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(251, 191, 36, 0.28) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.sf-detail__poster img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
}
.sf-detail__info h1 {
  color: #fff7ed !important;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem) !important;
  margin: 0 0 12px !important;
}
.sf-tags {
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.sf-tags li {
  border-radius: 8px !important;
  padding: 4px 11px !important;
  background: rgba(225, 29, 72, 0.16) !important;
  color: #fda4af !important;
  border: 1px solid rgba(225, 29, 72, 0.28) !important;
}
.sf-tags li:nth-child(2) {
  color: #fdba74 !important;
  background: rgba(234, 88, 12, 0.14) !important;
  border-color: rgba(234, 88, 12, 0.3) !important;
}
.sf-tags li:nth-child(3) {
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.sf-detail__brief {
  color: #e8d2c8 !important;
  line-height: 1.75 !important;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-detail__action {
  gap: 12px !important;
  justify-content: center;
}
.sf-detail__action .sf-btn {
  min-height: 44px;
}
.sf-synopsis {
  border-radius: 14px !important;
  border: 1px solid rgba(225, 29, 72, 0.18) !important;
  background: rgba(31, 16, 20, 0.85) !important;
}
.sf-synopsis h2 {
  color: #fbbf24 !important;
}
.sf-synopsis p {
  color: #e8d2c8 !important;
  line-height: 1.85 !important;
}

/* ── 播放页相关推荐：strip 误入 grid 时改为 3:4 海报卡 ── */
.sf-grid:has(> .sf-strip) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 14px !important;
}
.sf-grid > article.sf-strip {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #1f1014 !important;
  border: 1px solid rgba(225, 29, 72, 0.22) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sf-grid > article.sf-strip:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.4) !important;
}
.sf-grid > article.sf-strip .sf-strip__thumb {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  border-radius: 0 !important;
}
.sf-grid > article.sf-strip .sf-strip__thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
}
.sf-grid > article.sf-strip .sf-strip__badge {
  left: 8px !important;
  top: 8px !important;
  border-radius: 6px !important;
  z-index: 2;
}
.sf-grid > article.sf-strip .sf-strip__body {
  padding: 10px 12px 12px !important;
  writing-mode: horizontal-tb !important;
  min-width: 0 !important;
}
.sf-grid > article.sf-strip .sf-strip__body h3,
.sf-grid > article.sf-strip .sf-strip__body h3 a {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  margin: 0 0 6px !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  color: #fff7ed !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-grid > article.sf-strip .sf-strip__meta {
  writing-mode: horizontal-tb !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  color: #cbb0a6 !important;
}
/* 海报卡不再需要侧边圆形播放钮，避免漂在格子缝里 */
.sf-grid > article.sf-strip .sf-strip__go {
  display: none !important;
}
.sf-grid > article.sf-strip .sf-strip__thumb::after {
  content: "▶";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #ea580c);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* 页脚 */
.sf-foot {
  margin-top: auto;
  background: linear-gradient(180deg, var(--sf-surface) 0%, #0a0507 100%) !important;
}
.sf-foot__wave {
  background: linear-gradient(90deg, var(--sf-accent), var(--sf-primary), var(--sf-secondary)) !important;
}
.sf-foot__inner,
.sf-foot__bar {
  max-width: var(--sf-max) !important;
}

/* 动效 */
@media (prefers-reduced-motion: no-preference) {
  body.sf-site::before {
    animation: sf-breath-color 14s ease-in-out infinite;
  }
  .sf-hero {
    animation: sf-lava-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .sf-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }
  .sf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(225, 29, 72, 0.18);
  }
  .sf-head__flare {
    background-size: 200% 100%;
    animation: sf-flare-flow 8s linear infinite;
  }
}
@keyframes sf-breath-color {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1) translate3d(0, 0, 0);
    filter: hue-rotate(0deg) saturate(1.05) brightness(1);
  }
  33% {
    opacity: 0.95;
    transform: scale(1.04) translate3d(1%, -0.8%, 0);
    filter: hue-rotate(10deg) saturate(1.15) brightness(1.06);
  }
  66% {
    opacity: 0.82;
    transform: scale(1.02) translate3d(-0.8%, 1%, 0);
    filter: hue-rotate(-8deg) saturate(1.1) brightness(1.03);
  }
}
@keyframes sf-lava-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-flare-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.sf-site::before,
  .sf-hero,
  .sf-head__flare,
  .sf-card {
    animation: none !important;
    transition: none !important;
  }
  body.sf-site::before {
    opacity: 0.72;
    transform: none;
    filter: none;
  }
}

/* 触控 / 跨端 */
a, button, input, select, textarea, .sf-burger, .sf-btn, .sf-genres__pill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
img[loading="lazy"] {
  content-visibility: auto;
}

@media (max-width: 900px) {
  .sf-hero__layout {
    grid-template-columns: 1fr !important;
  }
  .sf-hero__viz {
    height: 200px !important;
    max-width: 280px;
    margin: 0 auto;
  }
  .sf-cat-layout {
    grid-template-columns: 1fr !important;
  }
  .sf-filter {
    position: static !important;
  }
  .sf-detail {
    grid-template-columns: 120px 1fr !important;
  }
  .sf-detail__action {
    grid-column: 1 / -1;
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .sf-grid:has(> .sf-strip) {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .sf-nav {
    display: none;
  }
  .sf-burger {
    display: flex !important;
  }
  .sf-head__rank {
    display: none;
  }
  .sf-search input,
  input[type="search"],
  input[type="text"],
  select {
    font-size: 16px !important;
  }
  .sf-brand__text strong {
    max-width: min(42vw, 9em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sf-hero__frame--1 { width: 104px !important; height: 140px !important; right: 52px !important; }
  .sf-hero__frame--2 { width: 96px !important; height: 128px !important; }
  .sf-hero__frame--3 { width: 88px !important; height: 118px !important; right: 78px !important; }
}

@supports (padding: max(0px)) {
  .sf-main {
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
}

/* pack8-craft-touch */
.sf-card__pic img,
.sf-hero__frame img {
  content-visibility: auto;
}
@media (hover: none) {
  .sf-card:hover {
    transform: none !important;
  }
  .sf-card:hover .sf-card__pic img {
    transform: none !important;
  }
}