/* ==========================================================================
   Jeremy's Movies — 主样式
   风格：Apple 极简 · 数据驱动 · 三态主题 · 悬停剧照预览 + IMDB 式详情页 + 拟火展开动画
   技术：CSS 变量 + data-theme 三态 + prefers-color-scheme 回退，零框架零构建
   ========================================================================== */

/* ==========================================================================
   1. 动效与主题 tokens
   ========================================================================== */
:root {
  /* 动效时长 / 缓动 */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-bg:     500ms;
  --dur-flip:   550ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-flip:     cubic-bezier(0.4, 0.2, 0.2, 1);

  /* —— 悬停展开剧照 —— */
  --dur-hover-still: 400ms;   /* 剧照面板展开/回溯 */
  --dur-hover-veil:  340ms;   /* 虚化遮罩淡入淡出 */
  --dur-hover-intent: 120ms;  /* 悬停意图延迟（JS 用） */

  /* —— 拟火展开 —— */
  --dur-fire-open:  640ms;    /* 火烧展开（正向） */
  --dur-fire-close: 460ms;    /* 火收缩回溯（反向） */
  --dur-detail-rise: 460ms;   /* 详情内容上浮落定 */

  /* 缓动 */
  --ease-fire:       cubic-bezier(0.55, 0, 0.12, 1); /* 火烧展开专属：快速起燃 → 长尾落定 */
  --ease-fire-back:  cubic-bezier(0.5, 0, 0.8, 0.3); /* 火收缩回溯：快速吸回中心 */

  color-scheme: light dark;

  /* ===== 浅色主题（默认） ===== */
  --bg:            #f5f5f7;
  --bg-elevated:   #ffffff;
  --bg-sunken:     #e8e8ec;
  --nav-bg:        rgba(245, 245, 247, 0.72);

  --text-primary:   #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary:  #86868b;
  --text-on-accent: #ffffff;

  --border:        #d2d2d7;
  --border-subtle: rgba(0, 0, 0, 0.08);

  --accent:        #0071e3;
  --accent-hover:  #0077ed;
  --accent-soft:   rgba(0, 113, 227, 0.10);

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-hover:  0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 44px rgba(0, 0, 0, 0.14);
  --shadow-pop:    0 12px 32px rgba(0, 0, 0, 0.16);

  --imdb:      #f5c518; --imdb-text:      #000000;
  --douban:    #00b51d; --douban-text:    #ffffff;
  --boxoffice: #6e6e73; --boxoffice-text: #ffffff;
  --tmdb:      #01b4e4; --tmdb-text:      #000000;

  --star:       #ff9f0a;
  --star-empty: #d2d2d7;

  --status-watched:      #34c759; --status-watched-text: #ffffff;
  --status-towatch:      #ff9500; --status-towatch-text: #ffffff;

  --scrim: rgba(0, 0, 0, 0.50);

  /* 火焰（浅/深主题共用，火是暖色不受主题影响） */
  --fire-core:   #ffd54f;   /* 内焰·亮黄 */
  --fire-mid:    #ff9d00;   /* 中焰·橙 */
  --fire-outer:  #ff5f00;   /* 外焰·橙红 */
  --fire-edge:   #e6320c;   /* 燃烧边缘·红 */
  --fire-glow:   rgba(255, 150, 30, 0.30);  /* 火后余温光晕 */

  /* 悬停预览背景（浅色）：虚化剧照 + 压暗遮罩 */
  --preview-scrim: rgba(0, 0, 0, 0.42);
  --preview-blur: 12px;

  --fs-hero:    40px;
  --fs-section: 22px;
  --fs-name:    17px;
  --fs-score:   30px;
  --fs-stat:    22px;
  --fs-body:    15px;
  --fs-meta:    13px;
  --fs-caption: 12px;
  --fs-badge:   13px;
}

/* 手动深色 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #000000;
  --bg-elevated:   #1d1d1f;
  --bg-sunken:     #2a2a2c;
  --nav-bg:        rgba(0, 0, 0, 0.72);

  --text-primary:   #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary:  #86868b;
  --text-on-accent: #ffffff;

  --border:        #424245;
  --border-subtle: rgba(255, 255, 255, 0.12);

  --accent:        #2997ff;
  --accent-hover:  #47a9ff;
  --accent-soft:   rgba(41, 151, 255, 0.16);

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-hover:  0 2px 4px rgba(0, 0, 0, 0.40), 0 20px 44px rgba(0, 0, 0, 0.60);
  --shadow-pop:    0 12px 32px rgba(0, 0, 0, 0.60);

  --imdb:      #f5c518; --imdb-text:      #000000;
  --douban:    #2fb344; --douban-text:    #ffffff;
  --boxoffice: #a1a1a6; --boxoffice-text: #000000;
  --tmdb:      #3ac4f0; --tmdb-text:      #000000;

  --star:       #ffb340;
  --star-empty: #48484a;

  --status-watched:      #30d158; --status-watched-text: #ffffff;
  --status-towatch:      #ff9f0a; --status-towatch-text: #1d1d1f;

  --scrim: rgba(0, 0, 0, 0.55);
  --preview-scrim: rgba(0, 0, 0, 0.55);
}

/* 跟随系统（且用户未强制浅色时）——无 JS 时系统深色依然生效 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #000000;
    --bg-elevated:   #1d1d1f;
    --bg-sunken:     #2a2a2c;
    --nav-bg:        rgba(0, 0, 0, 0.72);

    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary:  #86868b;
    --text-on-accent: #ffffff;

    --border:        #424245;
    --border-subtle: rgba(255, 255, 255, 0.12);

    --accent:        #2997ff;
    --accent-hover:  #47a9ff;
    --accent-soft:   rgba(41, 151, 255, 0.16);

    --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-hover:  0 2px 4px rgba(0, 0, 0, 0.40), 0 20px 44px rgba(0, 0, 0, 0.60);
    --shadow-pop:    0 12px 32px rgba(0, 0, 0, 0.60);

    --imdb:      #f5c518; --imdb-text:      #000000;
    --douban:    #2fb344; --douban-text:    #ffffff;
    --boxoffice: #a1a1a6; --boxoffice-text: #000000;
  --tmdb:      #3ac4f0; --tmdb-text:      #000000;

    --star:       #ffb340;
    --star-empty: #48484a;

    --status-watched:      #30d158; --status-watched-text: #ffffff;
    --status-towatch:      #ff9f0a; --status-towatch-text: #1d1d1f;

    --scrim: rgba(0, 0, 0, 0.55);
    --preview-scrim: rgba(0, 0, 0, 0.55);
  }
}

/* ==========================================================================
   2. 全局基础
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  transition: background-color 0.3s ease;
}

body {
  min-height: 100vh;
  background: transparent; /* 让固定背景层透出 */
  color: var(--text-primary);
  transition: color 0.3s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* 页面内容容器 */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ==========================================================================
   3. 内容层级
   ========================================================================== */
.nav,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   4. 吸顶导航
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-logo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-right: 8px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-sunken);
}

.nav-link.is-active {
  color: var(--text-primary);
  font-weight: 500;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* 主题切换按钮 */
.nav-theme {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: transparent;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.nav-theme:hover {
  background: var(--bg-sunken);
  transform: scale(1.05);
}

.nav-theme svg {
  width: 16px;
  height: 16px;
  color: var(--text-primary);
}

/* 三态图标：仅显示当前主题对应的图标 */
.theme-icon {
  display: none;
}

:root[data-theme="light"] .icon-light,
:root:not([data-theme]) .icon-light { display: block; }
:root[data-theme="dark"] .icon-dark { display: block; }
:root[data-theme="system"] .icon-system { display: block; }

/* 汉堡按钮（默认隐藏） */
.nav-burger {
  display: none;
}

/* ==========================================================================
   5. Hero 标题区
   ========================================================================== */
.hero {
  text-align: center;
  padding: 48px 24px 28px;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

.hero-sub {
  font-size: 17px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.hero-stat {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.hero-stat strong {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. 页内工具栏（筛选 + 排序）
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 24px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-sunken);
  border-radius: 10px;
  padding: 3px;
}

.segmented button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}

.segmented button:hover {
  color: var(--text-primary);
}

.segmented button[aria-pressed="true"] {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sort-label {
  font-size: 13px;
  color: var(--text-tertiary);
}

.sort select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 30px 7px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* ==========================================================================
   7. 海报网格
   ========================================================================== */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  padding-bottom: 24px;
}

/* ==========================================================================
   8. 海报卡片（纯正面 + 悬停上浮 + 点击进详情）
   ========================================================================== */
.poster-card {
  position: relative;
  cursor: pointer;
  outline: none;
  background: var(--bg-elevated);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.poster-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.poster-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 预览激活时，高亮当前聚焦的真实卡片（消除"盲抓"不确定感） */
.poster-card.is-hovering {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55),
              var(--shadow-hover);
}

.poster-card__media {
  position: relative;
  background: var(--bg-sunken);
}

.poster-card__media img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-sunken); /* 加载中占位底色 */
}

.poster-card__info {
  padding: 12px 14px 14px;
}

.poster-card__title {
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.poster-card__year {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* 状态角标（覆盖在海报左上角） */
.status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.status--watched { background: var(--status-watched); color: var(--status-watched-text); }
.status--towatch { background: var(--status-towatch); color: var(--status-towatch-text); }

/* 星级 */
.stars {
  color: var(--star);
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.stars .star-empty { color: var(--star-empty); }

.stars--sm { font-size: 12px; }

/* ==========================================================================
   8.1 悬停 / 点按预览：虚化剧照背景 + 海报不变 + 空白区剧情梗概
   ========================================================================== */
/* 全屏虚化剧照背景：盖住整页（含导航），作为预览态的背景层 */
.preview-bg {
  position: fixed;
  inset: 0;
  z-index: 250;
  overflow: hidden;
  background: var(--bg);           /* 剧照加载中的占位底色 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-hover-veil) var(--ease-standard),
    visibility 0s linear var(--dur-hover-veil);
}
.preview-bg.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-hover-veil) var(--ease-standard),
    visibility 0s linear 0s;
}

.preview-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--preview-blur)) saturate(1.05);
  transform: scale(1.12);          /* 放大，避免模糊边缘透出底边 */
}

.preview-bg__scrim {
  position: absolute;
  inset: 0;
  background: var(--preview-scrim);
}

/* 海报克隆：聚焦卡片 —— hover 时向空白多的一侧平移 + 放大，浮于虚化背景之上 */
.poster-card.preview-card {
  position: fixed;
  z-index: 270;
  pointer-events: none;
  --focus-dx: 0px; --focus-dy: 0px; --focus-scale: 1;
  transform: translate(var(--focus-dx), var(--focus-dy)) scale(var(--focus-scale));
  transform-origin: top left;
  opacity: 0;
  transition:
    opacity var(--dur-hover-veil) var(--ease-standard),
    transform var(--dur-hover-still) var(--ease-out);
  box-shadow: var(--shadow-hover);
  will-change: transform;
}
.poster-card.preview-card.is-on { opacity: 1; }
/* 聚焦态：变量已由 JS 更新为位移+放大目标值，transition 自动平滑过渡 */

/* 剧情梗概：聚焦卡片旁的固定信息面板（字号阶梯放大，层级清晰） */
.preview-overview {
  position: fixed;
  z-index: 270;
  pointer-events: none;
  width: auto;
  max-width: 440px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--dur-hover-veil) var(--ease-standard);
}
.preview-overview.is-on { opacity: 1; }

/* 羊皮纸浮现动画：文字晚于虚化背景出现，逐层淡入上浮 + 暖色光晕，如哈利波特字体浮现于羊皮纸上 */
.preview-overview.is-reveal > * {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  animation: parchment-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.preview-overview.is-reveal > *:nth-child(1) { animation-delay: 0.00s; }
.preview-overview.is-reveal > *:nth-child(2) { animation-delay: 0.06s; }
.preview-overview.is-reveal > *:nth-child(3) { animation-delay: 0.12s; }
.preview-overview.is-reveal > *:nth-child(4) { animation-delay: 0.18s; }
.preview-overview.is-reveal > *:nth-child(5) { animation-delay: 0.24s; }
.preview-overview.is-reveal > *:nth-child(6) { animation-delay: 0.30s; }
.preview-overview.is-reveal > *:nth-child(7) { animation-delay: 0.36s; }

@keyframes parchment-rise {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* 尊重「减少动态效果」偏好：退化为一键淡入 */
@media (prefers-reduced-motion: reduce) {
  .preview-overview.is-reveal > * {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.preview-overview__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.preview-overview__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

.preview-overview__year {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.preview-overview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.preview-overview__meta li {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 13px;
}

.preview-overview__text {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px;
  /* 超长用省略号截断 */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-overview__ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.preview-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  letter-spacing: 0.01em;
}

.preview-rating__label { font-weight: 600; opacity: 0.92; }

.preview-rating__value { font-size: 16px; font-variant-numeric: tabular-nums; }

/* 各平台实色徽章 */
.preview-rating--imdb   { background: linear-gradient(135deg, #f5c518, #e8b20e); color: #000; text-shadow: none; }
.preview-rating--imdb   .preview-rating__label { color: rgba(0,0,0,0.62); }
.preview-rating--douban { background: linear-gradient(135deg, #00b51d, #0a8f1c); }
.preview-rating--tmdb   { background: linear-gradient(135deg, #01b4e4, #0288b8); }
.preview-rating--star   { background: linear-gradient(135deg, #ffb340, #ff8f00); }

.preview-rating--imdb   .preview-rating__value { color: #000; }
.preview-rating--douban .preview-rating__value { color: #fff; }
.preview-rating--tmdb   .preview-rating__value { color: #fff; }
.preview-rating--star   .preview-rating__value { color: #fff; }

.preview-rating__star { font-size: 16px; letter-spacing: 1px; }

/* 个人短评：暖色引用，仿佛从画面里浮现的心声 */
.preview-overview__comment {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: rgba(255, 244, 224, 0.96);
  background: linear-gradient(135deg, rgba(255, 176, 64, 0.16), rgba(255, 143, 0, 0.08));
  border-left: 3px solid rgba(255, 176, 64, 0.75);
  border-radius: 0 10px 10px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.preview-overview__cast {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-cast {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 14px;
}

/* 触屏预览态：让背景与海报克隆可点按（点背景退回、点海报进详情） */
@media (pointer: coarse) {
  body.is-preview .preview-bg,
  body.is-preview .preview-card {
    pointer-events: auto;
  }
}

/* 移动端聚焦预览：上下堆叠布局，面板字号整体降档（桌面档 32/18px 手机上过大） */
@media (max-width: 760px) {
  .preview-overview {
    text-align: center;
    padding: 0 4px;
  }
  .preview-overview__head {
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .preview-overview__title { font-size: 22px; }
  .preview-overview__year { font-size: 15px; }
  .preview-overview__meta {
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
  }
  .preview-overview__meta li { font-size: 12px; padding: 4px 10px; }
  .preview-overview__text {
    font-size: 14px;
    line-height: 1.55;
    -webkit-line-clamp: 5;
    margin-bottom: 12px;
  }
  .preview-overview__ratings {
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .preview-rating { font-size: 13px; padding: 4px 10px; }
  .preview-rating__value { font-size: 15px; }
  .preview-cast { font-size: 12px; padding: 4px 11px; }
}

/* ==========================================================================
   8.2 IMDB 式详情页 overlay
   ========================================================================== */
.detail {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  visibility: hidden;
  clip-path: circle(0px at var(--fx, 50vw) var(--fy, 50vh));
  transition:
    clip-path var(--dur-fire-open) var(--ease-fire),
    visibility 0s linear var(--dur-fire-open);
}
body.is-detail-open .detail {
  visibility: visible;
  clip-path: circle(var(--cover, 150vmax) at var(--fx, 50vw) var(--fy, 50vh));
  transition:
    clip-path var(--dur-fire-open) var(--ease-fire),
    visibility 0s linear 0s;
}
body.is-detail-closing .detail {
  transition:
    clip-path var(--dur-fire-close) var(--ease-fire-back),
    visibility 0s linear var(--dur-fire-close);
}

/* 返回键：固定左上，毛玻璃圆钮 */
.detail__back {
  position: fixed;
  top: 20px; left: 20px;
  z-index: 320;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--text-primary);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) ease;
}
.detail__back:hover { transform: scale(1.06); background: var(--bg-elevated); }
.detail__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 剧照大图区 */
.detail__hero {
  position: relative;
  width: 100%;
  height: clamp(300px, 46vh, 560px);
  overflow: hidden;
  background: var(--bg-sunken);
}
.detail__hero::after {   /* 底部渐隐，融入内容区背景 */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    transparent 38%,
    var(--bg) 100%);
}
.detail__backdrop {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 共享元素飞入：从触发海报位置放大铺满 */
  --fly-x: 50%; --fly-y: 50%; --fly-scale: 1;
  transform-origin: var(--fly-x) var(--fly-y);
  transform: scale(var(--fly-scale));
  transition: transform var(--dur-fire-open) var(--ease-fire);
}
body.is-detail-open .detail__backdrop {
  transform: scale(1);
}
body.is-detail-closing .detail__backdrop {
  transition: transform var(--dur-fire-close) var(--ease-fire-back);
  transform: scale(var(--fly-scale));
}

/* 内容容器 */
.detail__body { padding: 28px 48px 96px; }

/* 标题块 */
.detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 16px;
  column-gap: 20px;
}
.detail__titles { min-width: 0; }
.detail__head-side { margin-left: auto; }
.detail__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}
.detail__orig {
  margin-top: 6px;
  font-size: 17px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  list-style: none;
}
.detail__meta li {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border-radius: 999px;
  padding: 6px 12px;
}

/* 双栏布局 */
.detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  margin-top: 36px;
  align-items: start;
}
.detail__block { margin-bottom: 32px; }
.detail__h {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.detail__overview {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 68ch;
}
.detail__directors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 人物 chip：头像 + 名字（+ 角色） */
.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  max-width: 100%;
}
.person-chip__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-sunken);
}
.person-chip__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border-radius: 50%;
}
.person-chip__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.person-chip__character {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* 预告片播放器 */
.detail__trailer-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.detail__trailer-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.detail__trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.detail__trailer-btn:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.04); }
.detail__trailer-btn .play-icon { width: 22px; height: 22px; }
.detail__trailer-player,
.detail__trailer-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 卡司 chips */
.detail__cast {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail__cast li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 评分列表（侧栏卡片） */
.rating-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rating-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}
.rating-item__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rating-item__value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-item--imdb   .rating-item__value { color: var(--imdb); }
.rating-item--douban .rating-item__value { color: var(--douban); }
.rating-item--tmdb   .rating-item__value { color: var(--tmdb); }

/* Jeremy 个人评价 */
.detail__stars { font-size: 22px; color: var(--star); letter-spacing: 2px; }
.detail__stars .star-empty { color: var(--star-empty); }
.detail__comment {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
}
.detail__personal:empty,
.detail__block:empty { display: none; }

/* 状态徽章（详情页标题旁） */
.detail__status {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 12px; border-radius: 999px;
  display: inline-block;
}

/* 内容落定（火展开后内容轻微上浮） */
.detail__body {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-detail-rise) var(--ease-standard),
              transform var(--dur-detail-rise) var(--ease-out);
}
body.is-detail-open .detail__body {
  opacity: 1;
  transform: none;
  transition-delay: 140ms;   /* 等火掠过主体后再上浮 */
}
body.is-detail-closing .detail__body { opacity: 0; transform: translateY(10px); transition-delay: 0ms; }

/* ==========================================================================
   8.3 拟火展开动画 + 余温光晕
   ========================================================================== */
.fire {
  position: fixed;
  inset: 0;
  z-index: 310;
  pointer-events: none;
  /* JS 内联覆盖：--fx/--fy=海报中心，--cover=1.35 * 海报中心到最远视口角距离 */
  --fx: 50vw; --fy: 50vh; --cover: 150vmax;
  background: radial-gradient(
    circle var(--cover) at var(--fx) var(--fy),
    transparent 0%,
    transparent 82%,
    rgba(255, 213, 79, 0.45) 86%,  /* 火前方光晕 */
    var(--fire-core)  91%,
    var(--fire-mid)   96%,
    var(--fire-outer) 99%,
    var(--fire-edge)  100%
  );
  clip-path: circle(0px at var(--fx) var(--fy));
  filter: url(#fire-edge);
  transition: clip-path var(--dur-fire-open) var(--ease-fire);
  will-change: clip-path, filter;
}
body.is-detail-open .fire {
  clip-path: circle(var(--cover) at var(--fx) var(--fy));
}
body.is-detail-closing .fire {
  transition: clip-path var(--dur-fire-close) var(--ease-fire-back);
}

/* 火后余温：暖色径向光晕，展开时淡入 */
.detail__glow {
  position: fixed;
  inset: 0;
  z-index: 305;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--fx, 50vw) var(--fy, 50vh),
      var(--fire-glow) 0%,
      rgba(255, 90, 10, 0.08) 34%,
      transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-detail-rise) var(--ease-standard);
}
body.is-detail-open .detail__glow { opacity: 1; }

/* SVG 滤镜定义：隐藏于布局之外 */
.svg-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* ==========================================================================
   9. 空状态
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: 72px 24px;
  color: var(--text-tertiary);
}

.empty-state .empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-state .empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.empty-state .empty-hint {
  font-size: 13px;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
  text-align: center;
  padding: 48px 24px 80px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ==========================================================================
   11. 响应式断点
   ========================================================================== */
@media (max-width: 1279px) {
  .container { padding-left: 40px; padding-right: 40px; }
  .poster-grid { grid-template-columns: repeat(5, 1fr); gap: 28px; }
}

@media (max-width: 1023px) {
  .container { padding-left: 32px; padding-right: 32px; }
  .poster-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

  .detail__body { padding: 24px 32px 88px; }
  .detail__grid { grid-template-columns: 1fr; gap: 8px; }
  .detail__title { font-size: 32px; }
  .detail__hero { height: clamp(240px, 38vh, 420px); }
}

@media (max-width: 767px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .poster-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .hero { padding: 32px 16px 20px; }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 15px; }

  .toolbar { flex-wrap: nowrap; gap: 10px; }
  .segmented { overflow-x: auto; }
  .segmented button { white-space: nowrap; padding: 6px 12px; }

  .poster-card__info { padding: 10px 12px 12px; }
  .poster-card__title { font-size: 15px; }

  /* 详情页移动端 */
  .detail__back { top: 12px; left: 12px; width: 40px; height: 40px; }
  .detail__body { padding: 20px 16px 72px; }
  .detail__title { font-size: 26px; }
  .detail__orig { font-size: 15px; }
  .detail__overview { font-size: 15px; }
  .detail__hero { height: 34vh; }
  .rating-item__value { font-size: 18px; }

  /* ===== 移动端汉堡菜单 ===== */
  .nav { height: 48px; padding: 0 16px; gap: 12px; }
  .nav-burger {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
  }
  .nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    margin: 2px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-theme { margin-left: auto; }
  .nav-burger { margin-left: 0; }

  .nav-links {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px 12px;
    box-shadow: var(--shadow-pop);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav.is-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link { padding: 12px 8px; font-size: 15px; }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { border-left: 3px solid var(--accent); }

  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

/* ==========================================================================
   12. prefers-reduced-motion 降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 拟火关闭：详情页退化为简单淡入淡出 */
  .fire, .detail__glow { display: none; }
  .detail {
    clip-path: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  body.is-detail-open .detail {
    visibility: visible; opacity: 1;
    transition: opacity 200ms ease, visibility 0s linear 0s;
  }
  body.is-detail-closing .detail {
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .detail__body { opacity: 1; transform: none; transition: none; }
  .detail__backdrop { transform: none !important; transition: none; }

  /* 悬停预览：桌面 hover 已在 JS 中禁用（hoverEnabled=false），
     触屏两段式点按保留，仅淡入淡出退化为即时切换 */
}

/* ==========================================================================
   13. noscript 兜底（无 JS 时的静态海报列表）
   ========================================================================== */
.ns-card {
  background: var(--bg-elevated);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ns-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--bg-sunken);
}

.ns-card figcaption {
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ns-card .ns-year {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ===== 「Jeremy都做了什么」聚合板块入口卡 ===== */
.board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: transparent;
  text-align: center;
  transition: background-color 0.3s var(--ease-standard),
    transform 0.3s var(--ease-standard),
    box-shadow 0.3s var(--ease-standard);
}

.board-card:hover {
  background: var(--bg-elevated);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.board-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 14px;
  background: var(--bg-sunken);
}

.board-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.board-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 767px) {
  .poster-grid[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}