/* ============================================================
   TVBoxPremium — Apple TV+ Inspired Redesign (V2)
   ============================================================
   这是对第一版重设计的彻底推翻，不是微调：
   - 第一版用深绿背景+绿色发光，看起来只是换皮，没有真正的"面貌"切换
   - V2 改成纯黑灰基底（背景本身不发光、不带任何色调），
     金色只用在交互元素上（按钮、active 态、hover 边缘），
     对比度更强，更像 Apple TV+ 的克制高级感
   - 移动端 Header 完全重新设计：放弃"桌面布局硬塞进窄屏"，
     改成图标系统，搜索/分类/语言各自一个图标按钮，一行排开，
     分类菜单收进右侧滑出的全屏面板
   ============================================================ */

:root {
  --bg-deepest:  #000000;
  --bg-base:     #0c0c0d;
  --bg-elevated: #1a1a1c;
  --bg-elevated-2: #232326;

  --text-main:   #ffffff;
  --text-muted:  #9a9a9e;
  --text-faint:  #5c5c60;

  --glass-light-bg:   rgba(255,255,255,0.05);
  --glass-light-blur: 14px;
  --glass-medium-bg:   rgba(12,12,13,0.72);
  --glass-medium-blur: 24px;
  --glass-heavy-bg:   rgba(0,0,0,0.88);
  --glass-heavy-blur: 36px;

  --glass-border: rgba(255,255,255,0.09);
  --glass-border-strong: rgba(255,255,255,0.16);

  --accent:        #d4af6a;
  --accent-hover:  #e8c585;
  --accent-dim:    #a8854f;
  --accent-glow:   rgba(212, 175, 106, 0.22);
  --accent-muted:  rgba(212, 175, 106, 0.10);

  --gradient-sheen: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
  --gradient-gold-edge: linear-gradient(135deg, var(--accent), var(--accent-dim));

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --bg-color: var(--bg-base);
  --panel-bg: var(--bg-elevated);
  --border: var(--glass-border);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: 88px;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   顶部导航栏（桌面端）
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: var(--glass-medium-bg);
  backdrop-filter: blur(var(--glass-medium-blur));
  -webkit-backdrop-filter: blur(var(--glass-medium-blur));
  border-bottom: 1px solid var(--glass-border);
  height: 80px; display: flex; align-items: center; justify-content: center;
}

.header-inner {
  width: 100%; max-width: 1440px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.logo {
  font-size: 20px; font-weight: 600; color: var(--text-main); text-decoration: none;
  margin-right: 28px; letter-spacing: 0.02em;
  display: inline-flex; align-items: center;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-item {
  color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color 0.25s var(--ease-out);
  position: relative; padding-bottom: 4px;
}
.nav-item::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 0.3s var(--ease-smooth);
}
.nav-item:hover, .nav-item.active { color: var(--text-main); }
.nav-item.active::after, .nav-item:hover::after { width: 100%; }

.header-search {
  display: flex; background: var(--glass-light-bg); border-radius: 22px; padding: 6px 16px;
  border: 1px solid var(--glass-border); width: 260px;
  backdrop-filter: blur(var(--glass-light-blur));
  transition: all 0.3s var(--ease-smooth);
}
.header-search:focus-within {
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.header-search input { background: transparent; border: none; color: var(--text-main); outline: none; flex: 1; font-size: 13.5px; }
.header-search input::placeholder { color: var(--text-faint); }
.header-search button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; }
.header-search button:hover { color: var(--accent); }

/* ============================================================
   移动端 Header 重设计
   ============================================================ */
.mobile-header-icons { display: none; align-items: center; gap: 8px; }
.mobile-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass-light-bg); border: 1px solid var(--glass-border);
  color: var(--text-main); cursor: pointer;
  backdrop-filter: blur(var(--glass-light-blur));
  transition: all 0.25s var(--ease-out);
  font-size: 17px;
  text-decoration: none;
}
.mobile-icon-btn:active { background: var(--accent-muted); border-color: var(--accent-glow); transform: scale(0.94); }

.mobile-nav-sheet {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  background: var(--glass-heavy-bg);
  backdrop-filter: blur(var(--glass-heavy-blur));
  -webkit-backdrop-filter: blur(var(--glass-heavy-blur));
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-smooth);
  padding: 24px 20px;
  overflow-y: auto;
}
.mobile-nav-sheet.open { transform: translateX(0); }

/* ★ 手风琴一级菜单项：点击展开/收合子分类，不直接跳转 ★ */
.mobile-nav-group { margin-bottom: 4px; }

.mobile-nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 12px; color: var(--text-main); text-decoration: none;
  font-size: 16px; font-weight: 500; border-radius: var(--radius-md);
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background 0.2s;
}
.mobile-nav-group-toggle:hover,
.mobile-nav-group-toggle.active { background: var(--accent-muted); color: var(--accent); }

.mobile-nav-group-chevron {
  font-size: 13px; color: var(--text-muted); transition: transform 0.3s var(--ease-smooth);
  flex-shrink: 0; margin-left: 8px;
}
.mobile-nav-group.expanded .mobile-nav-group-chevron { transform: rotate(180deg); }
.mobile-nav-group.expanded .mobile-nav-group-toggle { color: var(--accent); }

/* 子分类容器：用 max-height 做手风琴展开动画（高度未知时，
   常见做法是给一个足够大的 max-height 让 transition 生效，
   收起时归零，比 JS 算精确高度更简单，副作用也可接受） */
.mobile-nav-subcats {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s var(--ease-smooth);
  padding-left: 8px;
}
.mobile-nav-group.expanded .mobile-nav-subcats { max-height: 1000px; }

.mobile-nav-subcats-inner { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 16px; }

.mobile-nav-subcat-link {
  display: inline-flex; align-items: center; padding: 8px 14px;
  background: var(--glass-light-bg); border: 1px solid var(--glass-border);
  border-radius: 16px; color: var(--text-muted); text-decoration: none;
  font-size: 13.5px; transition: all 0.2s var(--ease-out);
}
.mobile-nav-subcat-link:hover { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-muted); }

.mobile-nav-sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--glass-border);
}
.mobile-nav-sheet-title { font-size: 15px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mobile-nav-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-light-bg); border: 1px solid var(--glass-border);
  color: var(--text-main); cursor: pointer; font-size: 16px;
}

.mobile-nav-link {
  display: block; padding: 14px 12px; color: var(--text-main); text-decoration: none;
  font-size: 16px; font-weight: 500; border-radius: var(--radius-md);
  transition: background 0.2s;
}
.mobile-nav-link:hover, .mobile-nav-link.active { background: var(--accent-muted); color: var(--accent); }

.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1999; opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-search-sheet {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1500;
  background: var(--glass-heavy-bg);
  backdrop-filter: blur(var(--glass-heavy-blur));
  border-bottom: 1px solid var(--glass-border-strong);
  padding: 16px 20px;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-smooth);
}
.mobile-search-sheet.open { transform: translateY(0); }
.mobile-search-sheet form { display: flex; gap: 10px; align-items: center; }
.mobile-search-sheet input {
  flex: 1; background: var(--glass-light-bg); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 12px 18px; color: var(--text-main); font-size: 15px; outline: none;
}
.mobile-search-sheet input::placeholder { color: var(--text-faint); }
.mobile-search-sheet button {
  background: var(--accent); color: #1a1408; border: none; border-radius: 20px;
  padding: 12px 18px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.mobile-search-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-light-bg); color: var(--text-main); cursor: pointer;
}

/* ============================================================
   主容器
   ============================================================ */
.container { max-width: 1440px; margin: 0 auto; padding: 32px; min-height: 80vh; }

.h2 { font-size: 21px; font-weight: 700; margin-bottom: 18px; display:flex; align-items:center; gap: 10px; letter-spacing: -0.01em; }
.muted { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ============================================================
   影片网格 + 卡片
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  perspective: 1200px;
}

.card {
  --mx: 0; --my: 0;
  display: flex; flex-direction: column; text-decoration: none; color: var(--text-main);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(calc(var(--my) * -6deg))
    rotateY(calc(var(--mx) * 6deg))
    translateY(0) translateZ(0);
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

.card:hover {
  transform:
    perspective(1000px)
    rotateX(calc(var(--my) * -6deg))
    rotateY(calc(var(--mx) * 6deg))
    translateY(-10px) translateZ(20px);
}

/* ============================================================
   ★ 卡片海报：16:9 横版容器，内部用"模糊背景填充 + 完整原图居中"
   方案（iQiyi/Youku 同款手法）★
   ============================================================
   背景：原图模糊放大，铺满整个 16:9 容器（不裁切原图，只是
   "复制一份模糊版本"去填满左右留白，原图本身完整无缺）。
   前景：同一张原图，不裁切、不拉伸，按其原始 2:3 比例完整显示，
   居中放置在 16:9 容器内——海报上的所有内容（片名、人脸、视觉
   设计）都完整可见，不会有任何裁切。
   ============================================================ */
.poster-wrapper {
  overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16/9;
  background: var(--bg-elevated); position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.card:hover .poster-wrapper {
  box-shadow: 0 28px 50px -12px rgba(0,0,0,0.75), 0 0 0 1px var(--accent-glow);
}

/* 背景层：模糊放大铺满，承担"填充左右留白"的角色 */
.poster-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(20px) brightness(0.55) saturate(1.1);
  transform: scale(1.15); /* 放大一点避免模糊后边缘漏出透明缝隙 */
}

/* 前景层：完整原始比例海报，居中显示，不裁切 */
.poster {
  position: relative; z-index: 1;
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; /* 完整显示，不裁切，这是跟旧版 cover 的关键区别 */
  border-radius: calc(var(--radius-lg) - 4px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.6);
  transition: transform 0.5s var(--ease-smooth);
}
.card:hover .poster { transform: scale(1.04); }

.poster-wrapper::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--gradient-sheen);
  opacity: 0;
  transform: translate(-30%, -30%);
  transition: opacity 0.4s, transform 0.6s var(--ease-smooth);
  pointer-events: none;
}
.card:hover .poster-wrapper::after { opacity: 1; transform: translate(0%, 0%); }

/* ============================================================
   ★ 还原：首页卡片网格专属样式（home-grid/home-poster-wrapper/
   home-poster），改回 2:3 竖版单层结构 ★
   这套样式独立于上面的全局 .grid/.poster-wrapper/.poster，
   不会影响 category.php/search.php/detail.php 推荐栏（那几个
   页面继续用全局样式，保持 16:9 模糊填充效果不变）。
   ============================================================ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 24px;
  perspective: 1200px;
}

.home-poster-wrapper {
  overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 2/3;
  background: var(--bg-elevated); position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s var(--ease-out);
  min-width: 0; width: 100%; /* 确保严格跟随父级.card的宽度，不被aspect-ratio或图片内容撑大 */
}
.card:hover .home-poster-wrapper {
  box-shadow: 0 28px 50px -12px rgba(0,0,0,0.75), 0 0 0 1px var(--accent-glow);
}

.home-poster {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-smooth);
}
.card:hover .home-poster { transform: scale(1.06); }

.home-poster-wrapper::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-sheen);
  opacity: 0;
  transform: translate(-30%, -30%);
  transition: opacity 0.4s, transform 0.6s var(--ease-smooth);
  pointer-events: none;
}
.card:hover .home-poster-wrapper::after { opacity: 1; transform: translate(0%, 0%); }

.t {
  margin-top: 12px; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.25s;
}
.card:hover .t { color: var(--accent); }
.m { margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* ============================================================
   ★ 卡片元数据徽章：观看数 + 时长 ★
   首页网格卡片、详情页推荐栏共用同一份样式（数据来自 crc32 种子
   伪装，不调用 detail() 接口，不拖慢首页加载）。
   ============================================================ */
.card-meta-badge {
  display: flex; align-items: center; gap: 10px;
  margin-top: 5px; color: var(--text-faint); font-size: 11px;
  white-space: nowrap; overflow: hidden;
}
.card-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.card-meta-item svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.8; }

@media (max-width: 768px) {
  /* 移动端卡片网格更窄（minmax(108px,1fr)），即使数字已经缩写成
     "2.9M"/"2.2h"，字体也要再小一档 + 间距收紧，才能确保两个 item
     稳定挤在同一行，不会被挤到换行 */
  .card-meta-badge { gap: 7px; font-size: 10px; }
  .card-meta-item svg { width: 10px; height: 10px; }
}

/* ============================================================
   按钮 / Pill
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 20px;
  font-size: 12.5px; background: var(--glass-light-bg); border: 1px solid var(--glass-border);
  color: var(--text-muted); backdrop-filter: blur(var(--glass-light-blur));
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px;
  background: var(--glass-light-bg); color: var(--text-main);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  text-decoration: none; font-size: 14px; font-weight: 600;
  transition: all 0.3s var(--ease-out); cursor: pointer; margin-right: 8px;
  backdrop-filter: blur(var(--glass-light-blur));
}
.btn:hover { background: var(--bg-elevated-2); border-color: var(--glass-border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--gradient-gold-edge);
  color: #1a1408; border: none;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 12px 32px -8px var(--accent-glow); transform: translateY(-2px); }

/* ============================================================
   下拉菜单
   ============================================================ */
.dropdown { position: relative; display: inline-block; }

.dropdown-btn {
  background: var(--glass-light-bg);
  backdrop-filter: blur(var(--glass-light-blur));
  color: var(--text-muted);
  padding: 0 18px; height: 36px;
  border: 1px solid var(--glass-border); border-radius: 20px;
  font-size: 13px; cursor: pointer; display: inline-flex; justify-content: center;
  align-items: center; gap: 6px; font-weight: 600;
  transition: all 0.25s var(--ease-out);
}
.dropdown-btn:hover { border-color: var(--accent-glow); color: var(--accent); background: var(--accent-muted); }

.dropdown-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--glass-heavy-bg);
  backdrop-filter: blur(var(--glass-heavy-blur));
  -webkit-backdrop-filter: blur(var(--glass-heavy-blur));
  border: 1px solid var(--glass-border-strong); border-radius: var(--radius-xl);
  min-width: 320px; padding: 16px;
  display: none; grid-template-columns: repeat(3, 1fr); gap: 8px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.8);
  z-index: 100;
}
.dropdown-menu.menu-sm { min-width: 130px; grid-template-columns: 1fr; padding: 10px; }
.dropdown-menu::before { content: ""; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: transparent; }

@media (hover: hover) {
  .dropdown:hover .dropdown-menu { display: grid; animation: dropdownSpring 0.35s var(--ease-spring); }
}
.dropdown-menu.show { display: grid !important; animation: dropdownSpring 0.35s var(--ease-spring); }

@keyframes dropdownSpring {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
  color: var(--text-muted); text-decoration: none; font-size: 13px; padding: 9px 10px;
  border-radius: var(--radius-sm); text-align: center; transition: all 0.2s var(--ease-out);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.dropdown-item:hover, .dropdown-item.active { background: var(--accent-muted); color: var(--accent); }

/* ============================================================
   Section Header & Quick Links
   ============================================================ */
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 18px; border-bottom: 1px solid var(--glass-border); padding-bottom: 12px;
}
.section-header .h2 { margin-bottom: 0; }
.quick-links { display: flex; gap: 16px; align-items: center; }
.quick-link { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.25s; font-weight: 500; }
.quick-link:hover { color: var(--accent); }

/* ============================================================
   分类筛选盒
   ============================================================ */
.filter-box {
  background: var(--glass-light-bg);
  backdrop-filter: blur(var(--glass-light-blur));
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
  padding: 18px 22px; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 14px;
}

.filter-row {
  display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px dashed var(--glass-border); padding-bottom: 14px;
}
.filter-row:last-child { border-bottom: none; padding-bottom: 0; }

.filter-label { color: var(--text-muted); font-size: 14px; white-space: nowrap; padding: 5px 0; width: 60px; font-weight: 600; }
.filter-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }

.filter-item {
  color: var(--text-main); text-decoration: none; font-size: 13px;
  padding: 5px 14px; border-radius: 14px; transition: all 0.25s var(--ease-out);
}
.filter-item:hover { color: var(--accent); background: var(--accent-muted); }
.filter-item.active {
  background: var(--gradient-gold-edge);
  color: #1a1408; font-weight: 600;
  box-shadow: 0 4px 16px -4px var(--accent-glow);
}

@media (max-width: 768px) {
  .filter-box { padding: 14px; gap: 10px; }
  .filter-row { padding-bottom: 10px; }
  .filter-label { width: 50px; font-size: 13px; }
  .filter-item { padding: 5px 12px; font-size: 12px; }
}

/* ============================================================
   移动端整体断点
   ============================================================ */
@media (max-width: 768px) {
  body { padding-top: 64px; }

  .site-header { height: 64px; }
  .header-inner { padding: 0 16px; }

  .logo { font-size: 17px; margin-right: 0; }

  .nav-links { display: none; }
  .header-search { display: none; }
  .dropdown { display: none; }
  .mobile-search-btn { display: none; }

  .mobile-header-icons { display: flex; }

  .container { padding: 20px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; border-bottom: none; }
  .quick-links { gap: 10px; flex-wrap: wrap; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; perspective: none; }
  .card { transform: none !important; }
  .card:active .poster-wrapper { box-shadow: 0 4px 12px rgba(0,0,0,0.5); transform: scale(0.97); }
  .poster-wrapper { border-radius: var(--radius-md); }

  /* ★ 修复：固定 3 列，不再用 auto-fill + minmax 让浏览器自动计算列数 ★
     之前用 minmax(108px, 1fr) 自动计算，在 viewport 宽度刚好卡在
     "两列够、三列不够"临界点的机型上（比如很多华为/三星机型常见的
     360px-380px 宽度），会被自动算成 2 列而不是 3 列，造成不同手机
     看到的网格列数不一致。改成固定 repeat(3, 1fr)，强制所有手机
     无论屏幕宽度多少，都显示三列，卡片会按屏幕宽度自动等比例
     变窄/变宽，但列数本身永远是 3，体验统一可预期。 */
  .home-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: none; }

  /* ★ 修复：三列宽度不均（左宽中窄右稍宽）★
     根因：grid/flex 子元素默认 min-width:auto，这会阻止内容被
     1fr 严格压缩到相等宽度——如果某一列里的内容（比如海报图片
     在加载过程中的原始尺寸）比其他列"更想要"更宽的空间，
     浏览器会让那一列实际偏宽，其余列被挤窄，造成三列宽度不均。
     显式设置 min-width: 0，强制取消这个默认行为，让 1fr 真正做到
     严格三等分，不再受子元素内容尺寸影响。 */
  .home-grid > .card { min-width: 0; overflow: hidden; }
  .card:active .home-poster-wrapper { box-shadow: 0 4px 12px rgba(0,0,0,0.5); transform: scale(0.97); }
  .home-poster-wrapper { border-radius: var(--radius-md); }

  .h2 { font-size: 18px; }
  .t { font-size: 13px; }
  .btn { width: 100%; margin-bottom: 8px; }
}

/* ============================================================
   全局动效辅助类
   ============================================================ */
@keyframes toastSpring {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.9); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes drawerSpring {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.95); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s var(--ease-out) both; }

.grid-ad-slot { position: relative; }
.grid-ad-slot::before {
  content: "AD"; position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  color: var(--text-main); font-size: 9px; font-weight: 700;
  padding: 3px 7px; border-radius: 5px; letter-spacing: 0.05em;
  border: 1px solid var(--glass-border);
}

/* ============================================================
   ★ 修复：顶部横幅广告（改用直接固定 height，不再用 aspect-ratio）★
   之前用 aspect-ratio + max-height 组合，理论上应该够用，但
   实际渲染效果跟预期不符（疑似不同浏览器对这个组合的处理细节
   有差异）。改成直接写固定 height，没有任何计算或优先级的歧义，
   行为在所有浏览器下都一致、可预期。
   ============================================================ */
.top-banner-wrap {
  margin-bottom: 28px; border-radius: var(--radius-lg); overflow: hidden;
  height: 160px;
  display: block; width: 100%;
}
.top-banner-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 768px) {
  /* 移动端用更矮的固定高度，宽度始终撑满 .container（跟下方轮播同宽） */
  .top-banner-wrap { height: 90px; }
}