/* mother-diversity · site-15 · sunset-flare 日落焰色 · 暖深底 + 橙红主色 + 玫红CTA + 琥珀热门 */
:root{
  --sf-primary:#f97316;
  --sf-secondary:#fb7185;
  --sf-accent:#fbbf24;
  --sf-bg:#1a120e;
  --sf-surface:#241812;
  --sf-surface-2:#2e1f18;
  --sf-warm:#fff7ed;
  --sf-text:#fff7ed;
  --sf-muted:rgba(254,215,170,.78);
  --sf-line:rgba(249,115,22,.24);
  --sf-max:1240px;
  --sf-radius:16px;
  --sf-radius-sm:10px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

body.body-sf{
  margin:0;min-height:100vh;
  background:
    radial-gradient(900px 420px at 12% -8%,rgba(249,115,22,.18),transparent 58%),
    radial-gradient(680px 340px at 88% 6%,rgba(251,113,133,.14),transparent 55%),
    radial-gradient(520px 280px at 50% 100%,rgba(251,191,36,.08),transparent 52%),
    var(--sf-bg)!important;
  color:var(--sf-text)!important;
  font-family:"Segoe UI","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
body.body-sf img{display:block;max-width:100%;height:auto}
body.body-sf a{text-decoration:none;transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
body.body-sf h1,body.body-sf h2,body.body-sf h3,body.body-sf h4,body.body-sf p,body.body-sf ul{margin:0}
body.body-sf ul{padding:0;list-style:none}

/* ── 按钮 ── */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 24px;border-radius:999px;font-weight:800;font-size:.9rem;
  border:0;cursor:pointer;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sf-btn--rose{
  background:linear-gradient(135deg,var(--sf-secondary),#e11d48);
  color:#fff!important;
  box-shadow:0 8px 28px rgba(251,113,133,.38);
}
.sf-btn--rose:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(251,113,133,.48);color:#fff!important}
.sf-btn--ghost{
  background:transparent;color:var(--sf-primary)!important;
  border:2px solid var(--sf-line);
}
.sf-btn--ghost:hover{border-color:var(--sf-primary);background:rgba(249,115,22,.12)}

/* ── 头部：单行品牌+居中导航+右侧搜索 ── */
.sf-head{position:sticky;top:0;z-index:100;background:rgba(26,18,14,.94)}
.sf-head__bar{
  max-width:var(--sf-max);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:0 16px;min-height:62px;
  background:rgba(26,18,14,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sf-line);
}
.sf-brand{
  display:flex;align-items:center;gap:10px;
  color:var(--sf-text)!important;flex-shrink:0;
}
.sf-brand:hover .sf-brand__name strong{color:var(--sf-primary)!important}
.sf-brand__flame{
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(145deg,var(--sf-primary),#ea580c);
  color:#fff;font-size:.85rem;font-weight:900;
  box-shadow:0 4px 18px rgba(249,115,22,.45);
}
.sf-brand__name{display:flex;flex-direction:column;line-height:1.15}
.sf-brand__name strong{font-size:1.05rem;font-weight:900;color:var(--sf-primary);letter-spacing:-.02em;transition:color .18s}
.sf-brand__name em{font-style:normal;font-size:.68rem;font-weight:600;color:var(--sf-muted)}
.sf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sf-nav a{
  padding:7px 14px;border-radius:8px;font-weight:700;font-size:.8rem;
  color:var(--sf-muted)!important;
  border-bottom:2px solid transparent;
}
.sf-nav a:hover,.sf-nav a[aria-current="page"]{
  color:var(--sf-primary)!important;
  border-bottom-color:var(--sf-primary);
  background:rgba(249,115,22,.1);
}
.sf-head__tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sf-search{
  display:flex;border-radius:999px;overflow:hidden;
  border:2px solid var(--sf-line);background:var(--sf-surface);
  width:200px;
}
.sf-search input{
  flex:1;min-width:0;padding:8px 14px;border:0;outline:none;
  background:transparent;color:var(--sf-text);font-size:.84rem;
}
.sf-search input::placeholder{color:var(--sf-muted)}
.sf-search button{
  padding:8px 14px;border:0;cursor:pointer;font-weight:900;font-size:.78rem;
  background:linear-gradient(135deg,var(--sf-secondary),#e11d48);color:#fff;
}
.sf-head__rank{
  padding:8px 14px;border-radius:999px;font-weight:900;font-size:.76rem;
  background:linear-gradient(135deg,var(--sf-accent),#f59e0b);
  color:#1a120e!important;
  box-shadow:0 4px 14px rgba(251,191,36,.32);
}
.sf-head__rank:hover{filter:brightness(1.08);color:#1a120e!important}
.sf-head__menu{
  display:none;width:40px;height:40px;padding:0;border-radius:10px;
  border:1px solid var(--sf-line);background:var(--sf-surface);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.sf-head__menu span{display:block;width:18px;height:2px;background:var(--sf-primary);border-radius:2px}
.sf-head__accent{
  height:3px;
  background:linear-gradient(90deg,var(--sf-primary) 0%,var(--sf-secondary) 50%,var(--sf-accent) 100%);
}

/* ── 主内容 ── */
.sf-main{max-width:var(--sf-max);margin:0 auto;padding:24px 16px 56px}

/* ── 首页 Hero：大图感双栏 + 装饰帧 ── */
.sf-hero{
  position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;
  margin-bottom:24px;padding:clamp(28px,4vw,48px) clamp(22px,3vw,36px);
  border-radius:var(--sf-radius);overflow:hidden;
  background:
    linear-gradient(135deg,rgba(249,115,22,.22) 0%,transparent 48%),
    linear-gradient(225deg,rgba(251,113,133,.16) 0%,transparent 42%),
    linear-gradient(180deg,var(--sf-surface) 0%,var(--sf-bg) 100%);
  border:1px solid var(--sf-line);
  box-shadow:0 24px 56px rgba(249,115,22,.14);
  min-height:280px;
}
.sf-hero__sky{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%,rgba(251,113,133,.2),transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%,rgba(249,115,22,.15),transparent 55%);
}
.sf-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center}
.sf-hero__kicker{
  margin:0 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  color:var(--sf-accent);text-transform:uppercase;
}
.sf-hero h1{
  margin:0 0 14px;font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.22;font-weight:900;
}
.sf-hero__desc{margin:0 0 24px;font-size:.92rem;line-height:1.75;color:var(--sf-muted);max-width:34rem}
.sf-hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.sf-hero__visual{
  position:relative;z-index:1;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;
  align-self:center;
}
.sf-hero__frame{
  border-radius:12px;
  background:linear-gradient(145deg,rgba(249,115,22,.35),rgba(251,113,133,.25));
  border:1px solid rgba(249,115,22,.3);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.sf-hero__frame--a{grid-row:span 2;background:linear-gradient(160deg,rgba(249,115,22,.4),rgba(234,88,12,.2))}
.sf-hero__frame--b{align-self:end;height:70%}
.sf-hero__frame--c{height:75%}

/* ── 彩色标签条 ── */
.sf-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.sf-chips__item{
  flex-shrink:0;padding:8px 16px;border-radius:6px;
  font-weight:800;font-size:.8rem;
  color:var(--sf-muted)!important;
  background:var(--sf-surface);border:1px solid var(--sf-line);
}
.sf-chips__item:hover{
  color:#fff!important;background:var(--sf-primary);border-color:var(--sf-primary);
  transform:translateY(-1px);
}
.sf-chips__item--hot{
  background:linear-gradient(135deg,var(--sf-accent),#f59e0b);
  color:#1a120e!important;border-color:transparent;
}
.sf-chips__item--hot b{font-weight:900;margin-right:4px}
.sf-chips__item--hot:hover{color:#1a120e!important;filter:brightness(1.06)}
.sf-chips__item--all{border-style:dashed;color:var(--sf-secondary)!important}

/* ── 区块标题 ── */
.sf-section{margin-bottom:32px}
.sf-section__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.sf-section__head h2{
  margin:0;display:flex;align-items:center;gap:10px;
  font-size:1.12rem;font-weight:900;
}
.sf-section__head a{color:var(--sf-primary)!important;font-weight:800;font-size:.84rem}
.sf-badge{
  display:inline-block;padding:2px 8px;border-radius:4px;
  background:var(--sf-primary);color:#fff;
  font-size:.62rem;font-weight:900;letter-spacing:.06em;
}
.sf-badge--hot{background:linear-gradient(135deg,var(--sf-accent),#f59e0b);color:#1a120e}

/* ── 热播横滑轨 ── */
.sf-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(130px,150px);
  gap:14px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.sf-rail::-webkit-scrollbar{height:6px}
.sf-rail::-webkit-scrollbar-track{background:var(--sf-surface-2);border-radius:999px}
.sf-rail::-webkit-scrollbar-thumb{background:var(--sf-primary);border-radius:999px}
.sf-rail .sf-card{scroll-snap-align:start}

/* ── 马赛克片库栅格（首项跨列） ── */
.sf-mosaic{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.sf-mosaic .sf-card:first-child{grid-column:span 2;grid-row:span 2}
.sf-mosaic .sf-card:first-child .sf-card__poster img{aspect-ratio:2/3;min-height:320px}
.sf-mosaic .sf-card:first-child .sf-card__info h3{font-size:1rem}

/* ── 卡片：2:3 竖版海报 + 底部渐变标题 ── */
.sf-card{
  border-radius:var(--sf-radius-sm);overflow:hidden;
  background:var(--sf-surface);border:1px solid var(--sf-line);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.sf-card:hover{
  transform:translateY(-4px);
  border-color:rgba(249,115,22,.55);
  box-shadow:0 14px 36px rgba(249,115,22,.18);
}
.sf-card__link{display:block;color:inherit!important;position:relative}
.sf-card__poster{position:relative;margin:0;overflow:hidden}
.sf-card__poster img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  background:linear-gradient(145deg,#2e1f18,#1a120e);
  transition:transform .35s ease;
}
.sf-card:hover .sf-card__poster img{transform:scale(1.06)}
.sf-card__badge{
  position:absolute;top:8px;right:8px;z-index:2;
  padding:3px 8px;border-radius:4px;
  background:linear-gradient(135deg,var(--sf-secondary),#e11d48);
  color:#fff;font-size:.65rem;font-weight:900;
  box-shadow:0 2px 8px rgba(251,113,133,.4);
}
.sf-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(26,18,14,.85) 0%,transparent 50%);
  opacity:.7;transition:opacity .25s ease;
}
.sf-card:hover .sf-card__overlay{opacity:.9}
.sf-card__play{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) scale(.85);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(249,115,22,.92);color:#fff;font-size:.9rem;
  opacity:0;transition:opacity .25s ease,transform .25s ease;
  box-shadow:0 4px 18px rgba(249,115,22,.45);
}
.sf-card:hover .sf-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sf-card__info{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:12px 12px 14px;
}
.sf-card__info h3{
  margin:0 0 4px;font-size:.88rem;line-height:1.35;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.sf-card__meta{margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.7rem;color:rgba(254,215,170,.85);font-weight:600}
.sf-card__meta span:first-child{color:var(--sf-accent)}

/* 迷你卡片（横滑用） */
.sf-card--mini .sf-card__poster img{aspect-ratio:2/3}
.sf-card--mini .sf-card__info{position:static;padding:8px 10px 10px;background:var(--sf-surface)}
.sf-card--mini .sf-card__info h3{font-size:.8rem;-webkit-line-clamp:1;color:var(--sf-text);text-shadow:none}
.sf-card--mini .sf-card__overlay,.sf-card--mini .sf-card__play{display:none}

/* ── 分类页：顶部横条筛选 + 四列网格 ── */
.sf-cat-banner{
  margin-bottom:24px;padding:24px 28px;border-radius:var(--sf-radius);
  background:linear-gradient(120deg,rgba(249,115,22,.18),rgba(251,113,133,.12));
  border:1px solid var(--sf-line);
}
.sf-crumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:.82rem;color:var(--sf-muted);font-weight:600}
.sf-crumb a{color:var(--sf-primary)!important}
.sf-cat-banner__row{display:flex;align-items:flex-start;gap:16px}
.sf-cat-banner__icon{
  flex-shrink:0;width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sf-primary),var(--sf-secondary));
  color:#fff;font-size:.95rem;font-weight:900;
}
.sf-cat-banner h1{margin:0 0 8px;font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:900}
.sf-cat-banner p{margin:0;font-size:.9rem;line-height:1.65;color:var(--sf-muted);max-width:38rem}
.sf-cat-wrap{margin-bottom:24px}
.sf-cat-filters{
  margin-bottom:20px;padding:18px 20px;border-radius:var(--sf-radius);
  background:var(--sf-surface);border:1px solid var(--sf-line);
}
.sf-cat-filters__title{margin:0 0 14px;font-size:.95rem;font-weight:900;color:var(--sf-primary)}
.sf-cat-filters__row{display:flex;flex-wrap:wrap;gap:14px}
.sf-cat-filters__field{flex:1;min-width:160px}
.sf-cat-filters__field span{display:block;margin-bottom:6px;font-size:.75rem;font-weight:700;color:var(--sf-muted)}
.sf-cat-filters__field input,
.sf-cat-filters__field select{
  width:100%;padding:10px 12px;border-radius:8px;
  border:1px solid var(--sf-line);background:var(--sf-bg);
  color:var(--sf-text);outline:none;font-size:.85rem;
}
.sf-cat-filters__field input:focus,
.sf-cat-filters__field select:focus{border-color:var(--sf-primary)}
.sf-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sf-empty{padding:36px;text-align:center;border-radius:var(--sf-radius);background:var(--sf-surface);color:var(--sf-muted);font-weight:700}

/* ── 播放页：左视频右信息 + 下方双栏 ── */
.sf-play{margin-bottom:24px}
.sf-play__layout{
  display:grid;grid-template-columns:1fr 280px;gap:20px;
  margin-bottom:22px;align-items:start;
}
.sf-play__video{
  position:relative;border-radius:var(--sf-radius);overflow:hidden;
  background:#000;border:2px solid var(--sf-line);
  box-shadow:0 18px 52px rgba(249,115,22,.14);
}
.sf-play__video video{width:100%;max-height:72vh;background:#000;display:block}
.sf-play__error{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(26,18,14,.88);color:var(--sf-text);font-weight:800;
}
.sf-play__error[hidden]{display:none!important}
.sf-play__panel{
  padding:20px;border-radius:var(--sf-radius);
  background:var(--sf-surface);border:1px solid var(--sf-line);
}
.sf-play__panel h1{margin:0 0 12px;font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:900;line-height:1.3}
.sf-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sf-meta li{
  padding:4px 12px;border-radius:999px;font-size:.76rem;font-weight:700;
  background:rgba(249,115,22,.14);color:var(--sf-primary);
  border:1px solid rgba(249,115,22,.28);
}
.sf-meta li:nth-child(2n){background:rgba(251,113,133,.12);color:var(--sf-secondary);border-color:rgba(251,113,133,.28)}
.sf-play__brief{margin:0 0 16px;font-size:.86rem;line-height:1.7;color:var(--sf-muted)}
.sf-play__poster{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--sf-line)}
.sf-play__poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.sf-play__below{
  display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;
}
.sf-play__synopsis,
.sf-play__related{
  padding:22px;border-radius:var(--sf-radius);
  background:var(--sf-surface);border:1px solid var(--sf-line);
}
.sf-play__synopsis h2,
.sf-play__related h2{margin:0 0 14px;font-size:1rem;font-weight:900;color:var(--sf-primary)}
.sf-play__synopsis p{margin:0;font-size:.9rem;line-height:1.85;color:var(--sf-muted)}
.sf-related-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(110px,130px);
  gap:12px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.sf-related-rail .sf-card--mini{scroll-snap-align:start}

/* ── 页脚：波浪分割 + 双列 + 标签 ── */
.sf-foot{
  margin-top:28px;
  background:linear-gradient(180deg,var(--sf-surface) 0%,#120c09 100%);
  border-top:1px solid var(--sf-line);
}
.sf-foot__wave{
  height:6px;
  background:linear-gradient(90deg,var(--sf-primary),var(--sf-secondary),var(--sf-accent));
}
.sf-foot__body{
  max-width:var(--sf-max);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr;gap:36px;
  padding:40px 16px 32px;
}
.sf-foot__logo{font-size:1.15rem;font-weight:900;color:var(--sf-primary)!important;display:inline-block;margin-bottom:10px}
.sf-foot__intro p{margin:0 0 16px;font-size:.86rem;line-height:1.65;color:var(--sf-muted);max-width:28rem}
.sf-foot__tags{display:flex;flex-wrap:wrap;gap:8px}
.sf-foot__tags span{
  padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:rgba(249,115,22,.14);color:var(--sf-primary);
  border:1px solid rgba(249,115,22,.24);
}
.sf-foot__links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sf-foot__col h4{margin:0 0 14px;font-size:.82rem;font-weight:900;color:var(--sf-accent);letter-spacing:.04em}
.sf-foot__col a{display:block;margin-bottom:8px;color:var(--sf-muted)!important;font-size:.84rem;font-weight:600}
.sf-foot__col a:hover{color:var(--sf-primary)!important}
.sf-foot__copy{
  border-top:1px solid var(--sf-line);
  max-width:var(--sf-max);margin:0 auto;padding:16px;
  text-align:center;font-size:.78rem;color:var(--sf-muted);font-weight:600;
}

/* ── 响应式 ── */
@media (max-width:1024px){
  .sf-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf-mosaic .sf-card:first-child{grid-column:span 1;grid-row:span 1}
  .sf-mosaic .sf-card:first-child .sf-card__poster img{min-height:auto}
  .sf-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf-play__layout{grid-template-columns:1fr}
  .sf-play__below{grid-template-columns:1fr}
  .sf-foot__body{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  .sf-head__bar{position:relative;grid-template-columns:auto 1fr auto}
  .sf-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;padding:12px 16px;gap:4px;
    background:rgba(26,18,14,.98);border-bottom:1px solid var(--sf-line);
  }
  .sf-nav.open{display:flex}
  .sf-nav a{border-radius:8px;text-align:left;border-bottom:none}
  .sf-head__menu{display:flex}
  .sf-search{width:140px}
  .sf-head__rank{display:none}
  .sf-hero{grid-template-columns:1fr;min-height:auto}
  .sf-hero__visual{display:none}
  .sf-mosaic,.sf-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-rail{grid-auto-columns:minmax(120px,140px)}
}
@media (max-width:540px){
  .sf-brand__name em{display:none}
  .sf-search{width:100%;max-width:160px}
  .sf-search input{font-size:.8rem;padding:7px 10px}
  .sf-hero{padding:22px 18px}
  .sf-mosaic,.sf-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sf-cat-filters__row{flex-direction:column}
  .sf-cat-filters__field{min-width:100%}
  .sf-foot__links{grid-template-columns:1fr}
  .sf-chips{gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .sf-card,.sf-btn,.sf-chips__item{transition:none}
  .sf-rail,.sf-related-rail{scroll-behavior:auto}
}