/* mother-diversity · 站7 波普撞色 · 全站布局重做 */
:root{
  --vx-ink:#111827;
  --vx-red:#dc2626;
  --vx-red-deep:#b91c1c;
  --vx-gold:#eab308;
  --vx-gold-soft:#fde047;
  --vx-blue:#1d4ed8;
  --vx-bg:#fff7d6;
  --vx-surface:#ffffff;
  --vx-panel:#fffbeb;
  --vx-text:#111827;
  --vx-muted:#6b7280;
  --vx-line:#111827;
  --vx-max:1180px;
  --vx-display:"Rubik","Noto Sans SC",sans-serif;
  --vx-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --div-accent:var(--vx-red);
  --div-bg:var(--vx-bg);
  --div-surface:var(--vx-surface);
  --div-text:var(--vx-text);
  --div-muted:var(--vx-muted);
  color-scheme:light;
}

*{box-sizing:border-box}
body.vx-site{
  margin:0;min-height:100vh;
  color:var(--vx-text);font-family:var(--vx-sans);line-height:1.55;
  background:
    radial-gradient(700px 360px at 100% -10%, rgba(220,38,38,.1), transparent 55%),
    radial-gradient(560px 300px at 0% 40%, rgba(234,179,8,.18), transparent 50%),
    var(--vx-bg);
  -webkit-font-smoothing:antialiased;
}
body.vx-site a{color:var(--vx-red);text-decoration:none}
body.vx-site a:hover{color:var(--vx-red-deep)}
body.vx-site img{display:block;max-width:100%}

/* ========== 头部：黄顶栏 品牌|搜索|片库 · 白轨满宽导航（去中间空洞） ========== */
.vx-head{position:sticky;top:0;z-index:100}
.vx-head__top{
  background:var(--vx-gold);
  border-bottom:4px solid var(--vx-ink);
}
.vx-head__top-inner{
  max-width:var(--vx-max);margin:0 auto;
  padding:12px 18px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;gap:12px 14px;
}
.vx-brand{display:inline-flex;align-items:center;gap:12px;color:var(--vx-ink)!important;min-width:0}
.vx-brand__mark{
  flex:0 0 auto;width:42px;height:42px;
  display:grid;place-items:center;
  background:var(--vx-ink);color:var(--vx-gold);
  font-size:.78rem;font-weight:900;
  border:3px solid var(--vx-ink);
  box-shadow:3px 3px 0 var(--vx-red);
}
.vx-brand__text{display:flex;flex-direction:column;gap:2px;line-height:1.1;min-width:0}
.vx-brand__text strong{
  font-family:var(--vx-display);font-size:1.22rem;font-weight:900;
  letter-spacing:-.02em;color:var(--vx-ink);
}
.vx-brand__text em{
  font-style:normal;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;color:rgba(17,24,39,.68);
}
.vx-brand--foot strong{font-size:1rem;color:#fff}
.vx-search{
  display:flex;width:280px;min-width:0;
  border:3px solid var(--vx-ink);background:#fff;
  box-shadow:4px 4px 0 var(--vx-ink);
}
.vx-search input{
  flex:1;min-width:0;border:0;background:transparent;
  padding:10px 12px;font:inherit;font-size:.86rem;color:var(--vx-text);font-weight:600;
}
.vx-search input::placeholder{color:var(--vx-muted);font-weight:500}
.vx-search button{
  border:0;border-left:3px solid var(--vx-ink);
  background:var(--vx-red);color:#fff;
  padding:10px 16px;cursor:pointer;
  font-family:var(--vx-display);font-weight:900;font-size:.84rem;
}
.vx-search button:hover{background:var(--vx-red-deep)}

.vx-head__tools{display:flex;align-items:center;gap:8px;flex-shrink:0;justify-self:end}
.vx-head__rank{display:none}

.vx-head__nav{
  background:#fff;
  border-bottom:4px solid var(--vx-ink);
}
.vx-head__nav-inner{
  max-width:var(--vx-max);margin:0 auto;
  padding:10px 18px;
  display:block;
}
.vx-pills{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;width:100%;
}
.vx-pills a{
  display:flex;align-items:center;justify-content:center;
  padding:9px 8px;text-align:center;
  font-family:var(--vx-display);font-size:.8rem;font-weight:800;
  color:var(--vx-ink)!important;background:#fff;
  border:2.5px solid var(--vx-ink);
  box-shadow:2px 2px 0 transparent;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s;
}
.vx-pills a:hover{
  transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--vx-gold);
  background:var(--vx-panel);
}
.vx-pills a[aria-current="page"]{
  background:var(--vx-ink);color:#fff!important;
  box-shadow:3px 3px 0 var(--vx-red);
}
.vx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;font-family:var(--vx-display);font-size:.84rem;font-weight:900;
  border:3px solid var(--vx-ink);transition:transform .12s,box-shadow .12s;
  white-space:nowrap;
}
.vx-btn--cta{
  color:#fff!important;background:var(--vx-red);
  box-shadow:4px 4px 0 var(--vx-ink);
}
.vx-btn--cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--vx-ink);color:#fff!important}
.vx-btn--outline{
  color:var(--vx-red)!important;background:#fff;
  box-shadow:4px 4px 0 var(--vx-gold);
}
.vx-btn--outline:hover{background:var(--vx-panel);color:var(--vx-red-deep)!important}
.vx-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:0;cursor:pointer;
  border:3px solid var(--vx-ink);background:#fff;
  box-shadow:2px 2px 0 var(--vx-red);
}
.vx-toggle span{display:block;height:2px;width:16px;margin:0 auto;background:var(--vx-red)}

/* ========== 主区 ========== */
.vx-main{max-width:var(--vx-max);margin:0 auto;padding:26px 18px 64px}

/* ========== 英雄：左文案板 + 右 2×3 撞色海报墙 ========== */
.vx-hero{
  display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:stretch;
  margin:0 0 28px;
}
.vx-hero__panel{
  padding:28px 26px;background:#fff;
  border:4px solid var(--vx-ink);
  box-shadow:10px 10px 0 var(--vx-red);
  display:flex;flex-direction:column;justify-content:center;
}
.vx-hero__tag{
  display:inline-block;align-self:flex-start;margin:0 0 14px;padding:5px 12px;
  font-family:var(--vx-display);font-size:.72rem;font-weight:900;letter-spacing:.08em;
  color:#fff;background:var(--vx-red);border:2px solid var(--vx-ink);
  transform:rotate(-2deg);box-shadow:3px 3px 0 var(--vx-ink);
}
.vx-hero__panel h1{
  margin:0 0 12px;font-family:var(--vx-display);font-weight:900;
  font-size:clamp(1.55rem,3.6vw,2.25rem);line-height:1.15;
  letter-spacing:-.03em;color:var(--vx-ink);
}
.vx-hero__panel p{
  margin:0 0 22px;font-size:.92rem;color:var(--vx-muted);line-height:1.7;max-width:420px;font-weight:600;
}
.vx-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.vx-hero__spotlight{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.vx-hero__spotlight .vx-card:nth-child(n+7){display:none}
.vx-hero__spotlight .vx-card__body{display:none}
.vx-hero__spotlight .vx-card__poster{
  border:3px solid var(--vx-ink);box-shadow:4px 4px 0 var(--vx-gold);
}
.vx-hero__spotlight .vx-card:nth-child(3n+2) .vx-card__poster{box-shadow:4px 4px 0 var(--vx-red)}
.vx-hero__spotlight .vx-card:nth-child(3n) .vx-card__poster{box-shadow:4px 4px 0 var(--vx-ink)}

/* ========== 分类色条 ========== */
.vx-cats{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;
}
.vx-cats__item{
  padding:10px 16px;font-family:var(--vx-display);font-size:.82rem;font-weight:900;
  color:#fff!important;border:3px solid var(--vx-ink);
  box-shadow:3px 3px 0 var(--vx-ink);
}
.vx-cats__item--red{background:var(--vx-red)}
.vx-cats__item--blue{background:var(--vx-blue)}
.vx-cats__item--gold{background:var(--vx-gold);color:var(--vx-ink)!important}
.vx-cats__item:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--vx-ink)}
.vx-cats__all{
  padding:10px 16px;font-family:var(--vx-display);font-size:.82rem;font-weight:900;
  color:var(--vx-ink)!important;background:#fff;border:3px solid var(--vx-ink);
  box-shadow:3px 3px 0 var(--vx-red);
}

/* ========== 区块 ========== */
.vx-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;
}
.vx-section-head h2{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--vx-display);font-size:1.25rem;font-weight:900;color:var(--vx-ink);
}
.vx-section-head a{font-size:.86rem;font-weight:800;color:var(--vx-red)!important}
.vx-badge{
  display:inline-block;padding:3px 8px;font-size:10px;font-weight:900;
  border:2px solid var(--vx-ink);
}
.vx-badge--hot{background:var(--vx-red);color:#fff}
.vx-badge--pick{background:var(--vx-blue);color:#fff}
.vx-badge--new{background:var(--vx-gold);color:var(--vx-ink)}

.vx-rail{margin:0 0 36px}
.vx-rail__track{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.vx-rail__track::-webkit-scrollbar{height:6px}
.vx-rail__track::-webkit-scrollbar-thumb{background:var(--vx-red);border:1px solid var(--vx-ink)}
.vx-rail__track .vx-card{flex:0 0 148px;scroll-snap-align:start}

.vx-shelf{margin:0 0 36px}
.vx-shelf__grid,.movie-grid{
  display:grid!important;gap:14px!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}

/* ========== 卡片：3:4 波普硬边 ========== */
.vx-card{position:relative}
.vx-card__link{display:block;color:inherit!important;text-decoration:none}
.vx-card__poster{
  position:relative;margin:0;overflow:hidden;background:var(--vx-ink);
  border:3px solid var(--vx-ink);
  box-shadow:4px 4px 0 var(--vx-gold);
  transition:transform .15s,box-shadow .15s;
}
.vx-card:hover .vx-card__poster{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--vx-red);
}
.vx-card__poster img{
  width:100%!important;aspect-ratio:3/4!important;height:auto!important;
  object-fit:cover!important;display:block;
}
.vx-card__badge{
  position:absolute;top:0;left:0;z-index:2;
  padding:4px 10px;font-family:var(--vx-display);font-size:10px;font-weight:900;
  color:#fff;background:var(--vx-red);border-right:3px solid var(--vx-ink);border-bottom:3px solid var(--vx-ink);
}
.vx-card__body{padding:10px 2px 0}
.vx-card__body h3{
  margin:0 0 6px;font-family:var(--vx-display);font-size:.9rem;font-weight:900;line-height:1.3;
  color:var(--vx-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vx-card__meta{display:flex;flex-wrap:wrap;gap:5px;font-size:11px;font-weight:700}
.vx-card__year{color:var(--vx-red)}
.vx-card__region{color:var(--vx-blue)}
.vx-card__type{
  color:var(--vx-ink);background:var(--vx-gold);padding:1px 6px;border:1.5px solid var(--vx-ink);
}
.vx-card--compact .vx-card__poster{box-shadow:3px 3px 0 var(--vx-ink)}
.vx-card--compact .vx-card__body h3{font-size:12px}

/* ========== 分类页 ========== */
.vx-crumb{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;
  font-size:.84rem;font-weight:700;color:var(--vx-muted);
}
.vx-crumb a{color:var(--vx-red)!important}
.vx-crumb span{opacity:.45}

.vx-page-hero,.vx-cat-hero,.page-hero,.compact-hero{
  margin:0 0 18px;padding:22px 24px;background:#fff;
  border:4px solid var(--vx-ink);box-shadow:8px 8px 0 var(--vx-gold);
}
.vx-page-hero__tag,.eyebrow{
  display:inline-block;margin:0 0 10px;padding:4px 10px;
  font-family:var(--vx-display);font-size:.7rem;font-weight:900;
  color:#fff;background:var(--vx-red);border:2px solid var(--vx-ink);
}
.vx-page-hero h1,.vx-cat-hero h1,.page-hero h1,.compact-hero h1{
  margin:0 0 8px;font-family:var(--vx-display);font-size:1.55rem;font-weight:900;color:var(--vx-ink);
}
.vx-page-hero p,.vx-cat-hero p,.page-hero p,.compact-hero p{margin:0;color:var(--vx-muted);line-height:1.65;font-weight:600}

.vx-page-panel{margin-bottom:24px}
.vx-cat-tiles,.category-grid,.category-grid.large{
  display:grid!important;gap:12px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.vx-cat-tiles .category-tile,.overview-card{
  display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;
  border:3px solid var(--vx-ink);box-shadow:4px 4px 0 var(--vx-gold);
  color:inherit!important;transition:transform .12s,box-shadow .12s;
}
.vx-cat-tiles .category-tile:hover,.overview-card:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--vx-red);
}
.overview-main strong,.vx-cat-tiles .category-tile strong{
  font-family:var(--vx-display);font-size:1.1rem;font-weight:900;color:var(--vx-red);
}
.overview-main span,.vx-cat-tiles .category-tile span{font-size:.84rem;color:var(--vx-muted);line-height:1.5;font-weight:600}
.overview-links{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--vx-display);font-size:.78rem;font-weight:800;color:var(--vx-blue);
}

.vx-cat-body{margin-bottom:24px}
.vx-cat-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px;padding:12px;
  background:#fff;border:3px solid var(--vx-ink);
}
.vx-cat-toolbar--inline{align-items:center}
.vx-cat-toolbar__title{font-family:var(--vx-display);font-weight:900;margin-right:auto}
.vx-cat-filter{display:flex;flex-direction:column;gap:4px;min-width:140px}
.vx-cat-filter span{font-size:.74rem;font-weight:800;color:var(--vx-muted)}
.vx-cat-filter input,.vx-cat-filter select{
  border:2.5px solid var(--vx-ink);padding:8px 10px;font:inherit;font-weight:600;background:var(--vx-panel);
}
.vx-cat-filter input:focus,.vx-cat-filter select:focus{outline:none;box-shadow:3px 3px 0 var(--vx-gold)}
.vx-cat-toolbar__back{
  font-family:var(--vx-display);font-weight:800;color:var(--vx-red)!important;
  border:2.5px solid var(--vx-ink);padding:8px 12px;background:#fff;
}
.vx-cat-grid{
  display:grid!important;gap:14px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.vx-empty{
  padding:36px;text-align:center;font-weight:800;color:var(--vx-muted);
  background:#fff;border:3px dashed var(--vx-ink);
}

/* ========== 播放页 ========== */
.vx-crumb--play{margin-bottom:14px}
.vx-play{margin:0 0 24px}
.vx-play__screen{
  background:#000;border:4px solid var(--vx-ink);
  box-shadow:8px 8px 0 var(--vx-red);margin-bottom:16px;
}
.vx-play__screen video,#movie-player{
  width:100%;aspect-ratio:16/9;background:#000;display:block;
  max-height:min(70vh,620px);object-fit:contain;
}
.vx-info{
  display:grid;grid-template-columns:140px 1fr;gap:18px;
  padding:18px;background:#fff;border:4px solid var(--vx-ink);
  box-shadow:8px 8px 0 var(--vx-gold);
}
.vx-info__poster{position:relative}
.vx-info__poster img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border:3px solid var(--vx-ink);box-shadow:4px 4px 0 var(--vx-red);
}
.vx-info__score{
  position:absolute;bottom:8px;right:8px;padding:4px 8px;
  font-family:var(--vx-display);font-weight:900;font-size:.8rem;
  background:var(--vx-gold);border:2px solid var(--vx-ink);
}
.vx-info__body h1{
  margin:0 0 12px;font-family:var(--vx-display);font-size:1.5rem;font-weight:900;color:var(--vx-ink);
}
.vx-info__facts{
  list-style:none;margin:0 0 12px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.vx-info__facts li{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--vx-panel);border:2px solid var(--vx-ink)}
.vx-info__facts em{font-style:normal;font-size:.72rem;color:var(--vx-muted);font-weight:700}
.vx-info__facts strong{font-size:.88rem;color:var(--vx-text);font-weight:800}
.vx-info__tags{margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
.vx-info__tags span,.vx-info__tags a{
  padding:4px 10px;font-family:var(--vx-display);font-size:.72rem;font-weight:800;
  border:2px solid var(--vx-ink);background:#fff;color:var(--vx-ink)!important;
}
.vx-info__brief{margin:0;font-size:.88rem;color:var(--vx-muted);line-height:1.7;font-weight:600}
.vx-synopsis{
  margin:0 0 24px;padding:20px;background:#fff;
  border:3px solid var(--vx-ink);box-shadow:5px 5px 0 var(--vx-gold);
}
.vx-synopsis h2{margin:0 0 10px;font-family:var(--vx-display);font-size:1.05rem;font-weight:900;color:var(--vx-ink)}
.vx-synopsis p{margin:0;line-height:1.8;color:var(--vx-muted);font-size:.92rem;font-weight:600}
.vx-related{margin-bottom:24px}

/* ========== 尾部 ========== */
.vx-foot{margin-top:auto;background:var(--vx-ink);color:#e5e7eb}
.vx-foot__stripe{
  height:8px;background:repeating-linear-gradient(90deg, var(--vx-gold) 0 24px, var(--vx-red) 24px 48px);
}
.vx-foot__grid{
  max-width:var(--vx-max);margin:0 auto;padding:28px 18px 18px;
  display:grid;grid-template-columns:1.2fr repeat(2,1fr);gap:24px;
}
.vx-foot__brand p{margin:10px 0 0;font-size:.86rem;color:#9ca3af;line-height:1.65;max-width:360px;font-weight:600}
.vx-foot__col h4{
  margin:0 0 12px;font-family:var(--vx-display);font-size:.75rem;font-weight:900;
  letter-spacing:.08em;color:var(--vx-gold);
}
.vx-foot__col a{display:block;padding:4px 0;font-size:.86rem;color:#9ca3af!important;font-weight:600}
.vx-foot__col a:hover{color:#fff!important}
.vx-foot__base{
  max-width:var(--vx-max);margin:0 auto;padding:14px 18px 22px;
  border-top:2px solid rgba(234,179,8,.25);
  font-size:.76rem;color:#6b7280;text-align:center;font-weight:600;
}
.vx-foot__seo{color:var(--vx-gold-soft);font-weight:700}

.section-block{margin-bottom:28px}
.rank-panel{margin-bottom:24px}

/* ========== 响应式 ========== */
@media (max-width:1100px){
  .vx-pills{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .vx-pills a{padding:8px 4px;font-size:.74rem}
  .vx-search{width:240px}
}
@media (max-width:960px){
  .vx-toggle{display:flex}
  .vx-head__top-inner{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand tools" "search search";
    gap:10px;
  }
  .vx-brand{grid-area:brand}
  .vx-search{grid-area:search}
  .vx-head__tools{grid-area:tools}
  .vx-head__tools .vx-btn--cta{display:none}
  .vx-pills{
    display:none;position:absolute;left:0;right:0;top:100%;
    grid-template-columns:1fr;
    padding:10px 16px 14px;background:#fff;
    border-bottom:4px solid var(--vx-ink);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .vx-head__nav{position:relative}
  .vx-pills.open{display:grid}
  .vx-hero{grid-template-columns:1fr}
  .vx-hero__spotlight{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .vx-shelf__grid,.movie-grid,.vx-cat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .vx-info{grid-template-columns:110px 1fr}
  .vx-foot__grid{grid-template-columns:1fr;gap:16px}
  .vx-cat-tiles,.category-grid,.category-grid.large{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  .vx-brand__text em{display:none}
  .vx-hero__spotlight{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vx-hero__spotlight .vx-card:nth-child(n+5){display:none}
  .vx-shelf__grid,.movie-grid,.vx-cat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  }
  .vx-info{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}