/* 影视摄像作品集 — 暗色影院感设计系统 */

:root {
  /* 底色压得更深：环境光的亮部与这里的黑之间差距越大，反差越强。
     之前是 #0b0b0d，加上到处漏光的低透明度光斑，全页最暗也到不了 15，画面自然"发灰"。 */
  --bg: #07070a;
  --bg-alt: #0e0e11;
  /* 面板改成半透明：底下那层环境光才能"透"上来 —— 毛玻璃的关键之一。
     色相偏冷（比底色更蓝一点），正好和暖色环境光形成冷暖对比，玻璃才不像"糊上去的灰" */
  --surface: rgba(23, 24, 31, .5);
  --surface-2: rgba(34, 36, 46, .6);
  --line: rgba(255, 255, 255, .105);
  --text: #f2f0ec;
  --text-2: #9b9aa2;
  --text-3: #5e5e68;
  --amber: #e4a84a;
  --red: #c7503a;
  /* 玻璃的"高光边"与"落影"，让面板看起来有厚度 */
  --glass-hi: rgba(255, 255, 255, .055);
  --glass-shadow: 0 16px 44px -26px rgba(0, 0, 0, .95);
  --radius: 16px;
  --radius-sm: 10px;
  --max: 1440px;
  --pad: 64px;
  --serif: 'Source Han Serif CN', 'Songti SC', 'Noto Serif SC', serif;
  --sans: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --display: 'Bebas Neue', 'Oswald', var(--sans);
}

/* 关键：Safari 上，带 transform / backdrop-filter 的层会让正在播放的视频
   在重绘（比如鼠标悬停、滚动）时整块变灰。这里统一规避：
   1) 给 video 自己一个合成层  2) 顶部导航不用 backdrop-filter
   3) 视频缩略图不做 hover 缩放 */
video {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* 抑制 iOS 长按弹出的"存储视频 / 拷贝"菜单 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 保险：任何情况下都不要让浏览器原生控件出现在画面上。
   原因见播放页那段注释 —— Safari 26 的"悬停/暂停就把视频压暗"是挂在原生控件上的材质层，
   我们改用自建控件之后，只要保证原生面板永不出现，就不会再被压暗。
   注意：故意拆成三条 —— 一条规则里只要有一个选择器不被识别，整条规则都会被丢弃。 */
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }
video::-webkit-media-controls-panel { display: none !important; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 环境光：给整页铺一层"透光"层次，背景不再是死黑 ----------
   实现说明：这是固定在视口最底部的一层软光斑（暖主光 + 橙调次光 + 冷色补光，
   冷暖对冲才有层次），只用渐变，不加 filter / backdrop-filter —— 避免踩到
   文件开头提到的 Safari 坑（带 filter / backdrop-filter 的层会让播放中的视频变灰）。
   层次关系：body 底色 → 本层光斑 → 半透明面板（毛玻璃）→ 文字。

   两个细节：
   1) 底部多留 18% 高度（inset 的 bottom: -18%）：这层会随滚动缓慢上移，
      留出余量才不会在视口底部露出空隙。
   2) 各光斑的纵向百分比是按"1.18 倍视口高"这个盒子换算的（例如想让光在
      视口 52% 处，写成 52 / 1.18 ≈ 44%）。 */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 -18% 0;
  z-index: -1;
  pointer-events: none;
  /* 上浮的余量全部由 --amb-y 在 ambient.js 里按视口高度算好，永远不会吃掉 -18% 这个留白。
     ⚠️ 这一层**只能纵向位移**，横向必须是 0：
     它的左右边缘正好压在视口两边，横移一点点就会把边缘推进画面，在屏幕左边或右边
     露出一条黑带（纵向上 inset 留了 18% 余量，所以只有横向有这个风险）。 */
  transform-origin: 50% 50%;
  will-change: transform;
  transform: translate3d(0, var(--amb-y, 0px), 0) scale(var(--amb-s, 1));
  background:
    /* 主光里再叠一小片更亮的暖芯：画面里得有个"最亮的地方"
       （渐变列表里写在越前面画得越靠上，所以暖芯放在主光之前） */
    radial-gradient(20% 16% at 5% 6%, rgba(255, 224, 178, .34) 0%, rgba(255, 214, 160, .08) 42%, rgba(255, 206, 148, 0) 68%),
    /* 左上 · 暖色主光（琥珀）。
       两个关键点：
       ① **光源中心放在画面内**（3% / 12%，大概就在标题左上那块），不是放到屏幕外。
          之前放在 y=-7%（视口上方）时，最亮的那一块正好被顶部固定导航挡掉，
          用户永远看不到"最亮点" —— 反差自然就做不出来。
       ② 光在 72% 处就衰减到 0，**不再拖一条横跨全屏的长尾巴**。
          之前半径 60% + 尾部拖到 92%，等于整屏被抬高 5~8 级亮度，黑没法真黑；
          而这点抬升几乎没有色相，于是整页糊成一层灰 —— 这就是"脏"和"平"的由来。 */
    radial-gradient(58% 50% at 3% 12%, rgba(255, 176, 78, .40) 0%, rgba(252, 166, 74, .17) 26%, rgba(244, 152, 66, .05) 50%, rgba(238, 146, 62, 0) 72%),
    /* 右上 · 橙色补光，给主视觉视频那侧一层薄暖 */
    radial-gradient(38% 32% at 97% 1%, rgba(255, 152, 64, .21) 0%, rgba(242, 138, 58, .05) 46%, rgba(242, 138, 58, 0) 76%),
    /* 右中 · 冷光。用**饱和的蓝紫**（86/116/238），不再用灰蓝（120/150/200）——
       低饱和的灰蓝压到黑底上就是标准的"脏灰"，这也是之前颜色发脏的主因之一。 */
    radial-gradient(42% 38% at 107% 32%, rgba(86, 116, 238, .21) 0%, rgba(86, 116, 238, .055) 46%, rgba(86, 116, 238, 0) 76%),
    /* 左下 · 暖光，撑住下半页 */
    radial-gradient(40% 34% at 11% 80%, rgba(255, 168, 74, .19) 0%, rgba(248, 156, 68, .05) 48%, rgba(248, 156, 68, 0) 78%),
    /* 右下 · 电影感的暗红余晖（呼应站点的 --red），给冷色区一点温度 */
    radial-gradient(28% 24% at 89% 101%, rgba(199, 80, 58, .17) 0%, rgba(199, 80, 58, 0) 74%),
    /* 顶部整体"顶光"，压到很淡：只用来交代光源方向，不要抬底 */
    linear-gradient(180deg, rgba(255, 240, 220, .015) 0%, rgba(255, 240, 220, 0) 26%);
}

/* 第二层环境光：更淡的一层暖光 + 暗角 + 胶片颗粒。
   · 第二层暖光用和主光不同的速度移动 —— 两层错开才有纵深，光会从毛玻璃后面缓缓流过；
   · 暗角（vignette）是"反差感"的主要来源：把四周压下去，中间的光才真的亮得起来，
     同时四角回到纯黑，画面立刻从"糊成一片"变成"有明暗结构"；
   · 胶片颗粒很淡，一是给暗部一点质感，二是把大渐变里肉眼可见的色带打散（效果等同抖动），
     这样上面那些光斑才敢收窄衰减、把黑还给黑。
   列表里写在**前面**的背景层画在**上面**，所以顺序是：颗粒 → 暗角 → 暖光。 */
body::after {
  content: '';
  position: fixed;
  inset: 0 0 -12% 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  /* 常驻一个 1.1 倍放大：既让光斑本身更柔，也顺手换来上下左右的位移余量 ——
     左右各有 5% 视口宽的富余，所以这一层才敢斜着飘、走和主光不同的方向（纵深就是这么来的）。
     横向幅度由 ambient.js 按视口宽度算，固定在 3.2%（< 5%）以内，任何屏宽都不会露边。 */
  transform: translate3d(var(--amb-x2, 0px), var(--amb-y2, 0px), 0) scale(1.1);
  background:
    /* 胶片颗粒（内联 SVG 噪声，160px 平铺）。不透明度很低，只在暗部隐约可见 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E"),
    /* 暗角：四周压下去，中间的光才"亮"得起来。
       强度是权衡过的 —— 压太狠四角会回到"死黑"，压太轻又没有反差 */
    radial-gradient(124% 104% at 50% 40%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .34) 70%, rgba(0, 0, 0, .62) 100%),
    radial-gradient(36% 30% at 30% 14%, rgba(255, 198, 132, .13) 0%, rgba(255, 198, 132, .03) 44%, rgba(255, 198, 132, 0) 72%),
    radial-gradient(32% 28% at 73% 55%, rgba(255, 178, 96, .11) 0%, rgba(255, 178, 96, 0) 76%),
    radial-gradient(38% 32% at 15% 96%, rgba(255, 188, 106, .10) 0%, rgba(255, 188, 106, 0) 78%);
}

/* 滚动联动：翻页时光层缓慢上浮并微微放大，像在灯光里往前走。
   由 ambient.js 把 --amb-y / --amb-y2 / --amb-s 写成 transform，
   只走合成层、不重绘，所以滚动本身不会掉帧。
   另外还叠了一点点缓动（光比滚动"慢半拍"），滚轮的阶梯感会被抹平。 */
@keyframes ambientDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -110px, 0) scale(1.05); }
}
/* 兜底：脚本没跑起来时，支持滚动驱动动画的浏览器仍能看到视差（其余浏览器保持静态）；
   脚本一旦接管会给自己加上 .has-ambient-motion，把这条动画摘掉，避免和变量驱动的 transform 打架。 */
@supports (animation-timeline: scroll()) {
  html:not(.has-ambient-motion) body::before {
    animation: ambientDrift linear both;
    animation-timeline: scroll(root block);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ---------- 跟随光标的环境光（只在有鼠标的设备上出现）----------
   一层面积有限的软光，缓动跟随指针移动。它是固定定位 + 纯 transform 位移，
   所以只走合成层、不重绘；`.is-on` 由 ambient.js 在指针进入后加上。 */
.ambient-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: -1;
  width: 820px; height: 820px;
  margin: -410px 0 0 -410px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  background: radial-gradient(
    circle,
    rgba(255, 208, 150, .11) 0%,
    rgba(255, 196, 132, .05) 38%,
    rgba(255, 190, 128, 0) 70%
  );
}
.ambient-cursor.is-on { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .ambient-cursor { display: none; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.eyebrow {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--amber);
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: 0.5px; }

.section { padding: 100px var(--pad); }
/* 交替区块**不再有任何自己的底色**。
   以前给"项目经历 / 联系"这两块加过一层纱幕渐变，问题是：只要底色挂在区块盒子上，
   过渡就必然和区块边界对齐 —— 翻页时能明显看到一条跟着板块走的明暗过渡（就是那个"断层"）。
   现在整页的明暗只由那两层固定环境光提供，它不和任何板块对齐，
   所以板块交界处是干净的、连续的；区块之间靠留白和标题层级来区分就足够了。 */
.section--alt { position: relative; }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
.section-head h2 { font-size: 40px; }
.section-head p { color: var(--text-2); font-size: 15px; line-height: 26px; max-width: 640px; margin: 0; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--amber);
  color: #14120c;
  font-size: 15px;
  font-weight: 500;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid #3d3d45;
}
.btn--ghost:hover { background: var(--surface); }
.btn--sm { padding: 11px 22px; font-size: 14px; }
.btn--danger { background: transparent; color: #e0705c; border: 1px solid #5a2c25; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 var(--pad);
  background: rgba(11, 11, 13, .94);
  border-bottom: 1px solid #1e1e24;
}
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand__name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.brand__sub { font-family: var(--display); font-size: 11px; letter-spacing: 2.5px; color: var(--text-2); }
.nav__toggle { display: none; }
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__links a { font-size: 15px; color: var(--text-2); transition: color .18s ease; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }

/* 右上角「联系我」按钮：默认 = 黄底白字；鼠标悬停 = 黄底灰字
   （文字链接默认是"灰→白"，这个按钮按需求反过来，所以单独覆盖，不影响导航里的文字链接） */
.nav__links .btn { color: #ffffff; }
.nav__links .btn:hover { background: var(--amber); color: var(--text-2); opacity: 1; }

/* ---------- Hero ---------- */
/* 桌面端：左侧文字 / 右侧主视觉，横向排布；主视觉被限制在一列宽度内，不再是满屏大图。
   注意：这里**不放任何自己的光斑元素**，所有环境光统一由 body::before 那一层负责。
   以前 hero 里单独挂了两盏光，被 hero 的盒子边界裁掉，就在板块交界处留下一条硬线；
   统一放进固定层之后，光可以跨板块连续铺满整页，断层从根上消失。 */
.hero {
  position: relative;
  padding: 80px var(--pad) 72px;
}
/* 左右两栏：左栏略窄放文字，右栏放主视觉 */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: 64px;
  row-gap: 32px;
  align-items: center;
}
.hero__intro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero__media {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
  /* 关键：主视觉最大 720px 并靠右对齐，宽屏下也不会占满整屏 */
  max-width: 720px;
  margin-left: auto;
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* 标题字号跟着视口走：左栏变窄后仍尽量保持一行，不会只剩一个孤零零的尾字换行 */
.hero h1 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.28; max-width: 950px; text-wrap: balance; }
.hero p { font-size: 17px; line-height: 30px; color: var(--text-2); max-width: 620px; margin: 0; }
.hero__cta { display: flex; gap: 16px; padding-top: 16px; flex-wrap: wrap; }

/* 手机端隔开"个人标语"和主视觉介绍的分隔线（桌面端左右分栏，靠分栏留白已足够） */
.hero__divider { display: none; }

.reel {
  position: relative;
  margin-top: 0;
  width: 100%;
  /* 用 16:9 与绝大多数成片比例一致，配合 contain 可完整显示画面不被裁切 */
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #08080a;
  cursor: pointer;
}
.reel video, .reel img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 主视觉轮播 */
.reel__track {
  position: absolute; inset: 0;
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.reel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  /* 封面（视频首帧）同样用 contain，避免加载前后画面跳动 */
  background: #08080a center / contain no-repeat;
}
.reel__slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.reel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11, 11, 13, .72);
  border: 1px solid rgba(242, 240, 236, .16);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
  z-index: 3;
}
.reel:hover .reel__nav { opacity: 1; }
.reel__nav:hover { background: rgba(228, 168, 74, .92); }
.reel__nav--prev { left: 16px; }
.reel__nav--next { right: 16px; }
@media (hover: none) { .reel__nav { opacity: 1; } }

.reel__dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  z-index: 3;
}
.reel__dots button {
  width: 7px; height: 7px; padding: 0;
  border-radius: 999px;
  background: rgba(242, 240, 236, .35);
  transition: all .25s ease;
}
.reel__dots button.is-active { width: 24px; background: var(--amber); }

/* 声音开关 */
.reel__sound {
  position: absolute; right: 24px; bottom: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(11, 11, 13, .72);
  border: 1px solid rgba(242, 240, 236, .16);
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background .2s ease, border-color .2s ease;
}
.reel__sound:hover { border-color: var(--amber); }
.reel__sound.is-on { background: rgba(228, 168, 74, .92); border-color: transparent; }
.reel__sound.is-on svg path { stroke: #14120c; }

/* 视频下方的一行：左边是当前片子的说明标题，右边是切换 / 播放控制 */
.reel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.reel-foot > .reel-cap { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.reel-foot > .reel-bar { flex: 0 0 auto; }

/* 画面外的控制条：手机端切换主视觉主要靠它（原生播放器盖不住）；
   桌面端位于主视觉右下方，与视频右边缘对齐 */
.reel-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.reel-switch {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.reel-switch button {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.reel-switch button:hover { background: var(--surface-2); }
.reel-switch button[data-act="toggle"] { background: var(--amber); }
.reel-switch button[data-act="toggle"] svg path { stroke: #14120c; fill: #14120c; }
.reel-switch__count {
  font-family: var(--display); font-size: 13px; letter-spacing: 1.5px;
  color: var(--text-2); padding: 0 10px 0 6px;
}

/* 主视觉说明文字：位于视频下方、切换按钮的左侧 */
.reel-cap { margin-top: 4px; }
.reel-cap__inner { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.reel-cap h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 30px; }
.reel-cap p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 25px; text-wrap: balance; }
.reel-cap__link { color: var(--amber); font-size: 13px; align-self: flex-start; }
.reel-cap__link:hover { text-decoration: underline; }
.reel-cap.is-in .reel-cap__inner { animation: capIn .38s ease both; }
@keyframes capIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.reel__link {
  position: absolute; right: 24px; top: 24px;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(11,11,13,.85);
  border: 1px solid var(--line);
  font-size: 14px; color: var(--text);
}
.reel__link:hover { border-color: var(--amber); }
.reel__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1b1b20 0%, #101014 60%, #191914 100%);
  color: var(--text-3); font-size: 15px;
}
.reel__badge {
  position: absolute; top: 24px; left: 24px;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 48px);
  padding: 8px 15px; border-radius: 999px;
  background: rgba(11,11,13,.85);
  /* 这里显示的是后台填的片子标题（中文），用正文字体更清楚 */
  font-family: var(--sans); font-size: 13px; letter-spacing: .3px;
}
.reel__badge span {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: block; flex: none; }
.reel__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--amber);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.reel:hover .reel__play { transform: translate(-50%, -50%) scale(1.06); }
.reel.is-playing .reel__play { display: none !important; }
.reel__play svg { margin-left: 4px; }

/* ---------- 筛选 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
  transition: all .18s ease;
}
.chip:hover { color: var(--text); border-color: #3d3d45; }
.chip.is-active { background: var(--amber); border-color: var(--amber); color: #14120c; font-weight: 500; }

/* ---------- 作品网格 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 40px;
}
.card { display: flex; flex-direction: column; gap: 14px; }
.card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #151518;
}
.card__thumb img, .card__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 只对图片做 hover 缩放；视频缩放会让 Safari 花屏 */
.card:hover .card__thumb img { transform: scale(1.04); }
.card__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-3);
}
.card__dur {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(11,11,13,.85);
  font-family: var(--display); font-size: 11px; letter-spacing: 1.5px;
}
.card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(228,168,74,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.card:hover .card__play { opacity: 1; }
.card__title { font-size: 17px; font-weight: 500; line-height: 26px; }
.card__meta { font-size: 13px; color: var(--text-3); }

/* 封面渐变占位（无图时） */
.ph-0 { background: linear-gradient(135deg, #2a2a31, #141418); }
.ph-1 { background: linear-gradient(135deg, #3a2f20, #17130d); }
.ph-2 { background: linear-gradient(135deg, #1f2a33, #0e1317); }
.ph-3 { background: linear-gradient(135deg, #33222a, #170f13); }
.ph-4 { background: linear-gradient(135deg, #243026, #101510); }
.ph-5 { background: linear-gradient(135deg, #2e2436, #14101a); }
.ph-6 { background: linear-gradient(135deg, #1c2b2b, #0d1414); }
.ph-7 { background: linear-gradient(135deg, #2b2b1c, #15150d); }

/* ---------- 履历 ---------- */
.resume-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.resume-card h3 { font-size: 22px; color: var(--amber); flex: none; width: 140px; }
.resume-item { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.resume-item__year { font-family: var(--display); font-size: 13px; letter-spacing: 1.5px; color: var(--amber); }
.resume-item__title { font-size: 16px; }
.resume-item__desc { font-size: 13px; line-height: 22px; color: var(--text-3); }

/* 时间线（关于我） */
.tl-block { display: flex; flex-direction: column; gap: 26px; }
.tl-block h3 { font-size: 22px; color: var(--amber); }
.tl-row { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 4px; }
.tl-row__year { font-family: var(--display); font-size: 15px; letter-spacing: 1.5px; color: var(--amber); width: 170px; flex: none; }
.tl-row__body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.tl-row__title { font-size: 18px; font-weight: 500; }
.tl-row__desc { font-size: 14px; line-height: 24px; color: var(--text-3); }

/* ---------- 数据条 ---------- */
.stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 40px 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__v { font-family: var(--serif); font-size: 46px; font-weight: 700; color: var(--amber); line-height: 1; }
.stat__l { font-size: 14px; color: var(--text-2); }

.tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tag {
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
}

/* ---------- 联系区 ---------- */
.contact { text-align: center; align-items: center; display: flex; flex-direction: column; gap: 26px; }
.contact h2 { font-size: 44px; }
.contact p { color: var(--text-2); font-size: 16px; line-height: 28px; max-width: 620px; margin: 0; }
.contact__row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding-top: 16px; }
.contact__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 15px;
  transition: all .18s ease;
}
.contact__btn:hover { background: var(--surface-2); border-color: var(--amber); }
.contact__note { font-size: 13px; color: var(--text-3); }

/* ---------- 播放页 ---------- */
.player-wrap { padding: 40px var(--pad) 0; }
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.player__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, #1b1b20, #101014);
  color: var(--text-3);
}

/* ---------- 播放页 · 自建播放器控件 ----------
   为什么不用浏览器原生 <video controls>：
   macOS 26（Tahoe）起，Safari 会在**鼠标悬停显示原生控件、以及暂停视频**的瞬间
   把整个视频压暗（实测：画面亮度被乘上约 0.57，黑边不动，页面其它区域不受影响）——
   那是 Safari 给原生控件加的毛玻璃材质层，而且官方不允许用 CSS 覆盖原生控件。
   换成自己的控件之后，这层材质根本不会出现；顺带控件也能和站点的暗色 / 琥珀风格统一。

   ⚠️ 控件条**故意不用 backdrop-filter**：它叠在正在播放的视频上，而"叠在视频上的 backdrop 层"
   正是本项目反复踩过的 WebKit「视频变灰」触发条件（见文件开头的说明）。 */
.vplayer { position: absolute; inset: 0; }
.vplayer:focus { outline: none; }
/* 全屏：显式接管布局，避免上面那条 position:absolute 影响全屏。
   （各内核 UA 对 :fullscreen 的定位规则优先级不完全一致，自己写一份最稳；
     同样拆开写，防止某个前缀选择器不被识别时整条规则失效） */
.vplayer:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; }
.vplayer:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
.vplayer:-webkit-full-screen { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; }
.vplayer:-webkit-full-screen video { width: 100%; height: 100%; object-fit: contain; }

/* 暂停时的大播放键（播放中自动淡出） */
.vplayer__big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(228, 168, 74, .95);
  color: #14120c;
  box-shadow: 0 20px 46px -20px rgba(0, 0, 0, .95);
  transition: opacity .22s ease, transform .2s ease;
}
.vplayer__big:hover { transform: translate(-50%, -50%) scale(1.06); }
.vplayer.is-playing .vplayer__big { opacity: 0; pointer-events: none; }

/* 控件条：显示时机 = 鼠标移入 / 键盘聚焦 / 视频处于暂停态（触屏见下方媒体查询） */
.vplayer__bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(8, 8, 11, .74);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .95);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.vplayer.is-ui .vplayer__bar,
.vplayer:not(.is-playing) .vplayer__bar,
.vplayer:focus-within .vplayer__bar { opacity: 1; pointer-events: auto; }

.vplayer__btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: background .18s ease;
}
.vplayer__btn:hover { background: rgba(255, 255, 255, .12); }
.vplayer__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.vplayer__time {
  flex: none; min-width: 94px;
  font-family: var(--display); font-size: 13px; letter-spacing: .6px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* 进度条：已播部分由 --p（0~100）画出来 */
.vplayer__seek {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 60px; height: 22px;
  background: transparent; cursor: pointer;
}
.vplayer__seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .20) calc(var(--p, 0) * 1%));
}
.vplayer__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(228, 168, 74, .22);
}
.vplayer__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .20); }
.vplayer__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--amber); }
.vplayer__seek::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: #fff; }
.vplayer__seek:focus-visible { outline: none; }
.vplayer__seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(228, 168, 74, .42); }

/* 触屏没有 hover：不额外处理 —— 暂停时上面的 ":not(.is-playing)" 已经让控件条常驻，
   播放中点一下画面即可切换显隐（由 JS 负责） */
.player-meta { padding: 48px var(--pad) 72px; display: flex; flex-direction: column; gap: 28px; }
.player-meta h1 { font-size: 42px; }
.meta-row { display: flex; gap: 64px; flex-wrap: wrap; }
.meta-item { display: flex; flex-direction: column; gap: 6px; }
.meta-item__k { font-size: 13px; color: var(--text-3); }
.meta-item__v { font-size: 16px; }
.about-film p { color: var(--text-2); font-size: 16px; line-height: 30px; max-width: 900px; margin: 0; }

.back {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px;
}
.back:hover { border-color: var(--amber); }

/* ---------- 关于我 ---------- */
.about-intro { display: flex; gap: 48px; align-items: flex-start; padding: 0 var(--pad) 80px; }
.about-intro--text { max-width: 900px; }
.about-text { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.about-text__lead { font-family: var(--serif); font-size: 30px; line-height: 44px; font-weight: 600; }
.about-text p { color: var(--text-2); font-size: 16px; line-height: 30px; margin: 0; }

.awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.award {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
  display: flex; flex-direction: column; gap: 9px;
}
.award__y { font-family: var(--display); font-size: 13px; letter-spacing: 2px; color: var(--amber); }
.award__t { font-size: 16px; line-height: 26px; }

/* ---------- 页脚 ---------- */
.footer { position: relative; padding: 64px var(--pad) 40px; display: flex; flex-direction: column; gap: 40px; }
/* 页脚的分隔线改成"两端渐隐的细光"，避免又是横贯整页的一条硬边 */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: var(--pad); right: var(--pad);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.11) 18%, rgba(255,255,255,.11) 82%, rgba(255,255,255,0) 100%);
}
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer__brand b { font-family: var(--serif); font-size: 24px; letter-spacing: 2px; }
.footer__cols { display: flex; gap: 72px; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col span { font-family: var(--display); font-size: 12px; letter-spacing: 2px; color: var(--amber); }
.footer__col a { font-size: 14px; color: var(--text-2); }
.footer__col a:hover { color: var(--text); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }

/* ---------- 后台 ---------- */
.admin { max-width: 1180px; margin: 0 auto; padding: 0 40px 80px; }
.admin-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; border-bottom: 1px solid var(--line); margin-bottom: 40px;
}
.admin-head h1 { font-size: 22px; }
.admin-head__right { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--text-2); }

.login { max-width: 380px; margin: 14vh auto; display: flex; flex-direction: column; gap: 18px; }
.login h1 { font-size: 30px; }
.login p { color: var(--text-2); font-size: 14px; margin: 0; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--text-2); }
.field input, .field textarea, .field select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--amber); }
.field textarea { min-height: 96px; resize: vertical; line-height: 24px; }
/* 复选框 / 单选框不能被上面那条 `.field input` 当文本框撑满 */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  accent-color: var(--amber);
}
.field label.switch-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.5;
}
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 28px;
}
.panel h2 { font-size: 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.panel__grid { display: flex; flex-direction: column; gap: 18px; }

.uploader {
  display: flex; align-items: center; gap: 14px;
  border: 1px dashed #3d3d45; border-radius: 12px; padding: 16px;
}
.uploader input[type=file] { flex: 1; font-size: 13px; color: var(--text-2); }
.uploader__preview { font-size: 13px; color: var(--text-2); word-break: break-all; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: 12px; color: var(--text-3); font-weight: 500; letter-spacing: 1px; }
.table td .row-actions { display: flex; gap: 8px; }
.table .thumb-mini { width: 88px; height: 50px; border-radius: 6px; overflow: hidden; background: #151518; object-fit: cover; }

.badge { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.badge--ok { background: rgba(228,168,74,.16); color: var(--amber); }
.badge--warn { background: rgba(199,80,58,.16); color: #e0806c; }

/* ---------- 毛玻璃材质 ----------
   给"底下是环境光、且不和视频重叠"的表面加 backdrop-filter，让光透过来并被虚化。
   刻意**不加**的几处（会被 Safari 弄成灰屏，见文件开头的说明）：
     · .nav            —— 滚动时会盖在正在播放的主视觉上
     · .reel__badge / .reel__sound / .reel__play —— 直接叠在视频画面里
     · .section--alt   —— 播放页里它包着视频缩略图网格
     · .card / .card__thumb —— 卡片里有视频元素
   这些位置继续用半透明纯色，视觉上依然是"玻璃"，但不动视频。 */
.chip,
.tag,
.award,
.badge,
.resume-card,
.stats,
.contact__btn,
.back,
.reel-switch,
.panel,
.nav__toggle,
.field input,
.field textarea,
.field select {
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

/* 翻页时玻璃"接光"变亮一点：页面滚动期间给 <html> 挂一个 .is-scrolling，
   玻璃顶上那道高光跟着亮一档，停下来再缓缓落回去。
   这么做是**一次类切换**驱动整页玻璃，不需要逐帧计算，成本几乎为零；
   配合底下那两层会流动的光，"玻璃在跟着翻动"这件事才真的能被眼睛看到。
   注意：.chip 和 .contact__btn 本来就有 "transition: all"，不需要（也不能）在这里再写一条，
   否则会把它们原有的 hover 过渡覆盖掉。 */
.tag, .badge, .award, .resume-card, .stats, .back, .reel-switch,
.panel, .field input, .field textarea, .field select {
  transition: box-shadow .45s ease;
}
html.is-scrolling .chip,
html.is-scrolling .tag,
html.is-scrolling .award,
html.is-scrolling .badge,
html.is-scrolling .resume-card,
html.is-scrolling .stats,
html.is-scrolling .contact__btn,
html.is-scrolling .back,
html.is-scrolling .reel-switch,
html.is-scrolling .panel,
html.is-scrolling .field input,
html.is-scrolling .field textarea,
html.is-scrolling .field select {
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, .17), var(--glass-shadow);
}

/* 玻璃的"镜面高光"：鼠标划过面板时，玻璃表面会有一小片暖光跟着指针走，
   像光线掠过玻璃。--gx / --gy 由 ambient.js 写入（百分比），
   没写过就退回默认位置（面板顶部中央），所以纯 CSS 也不会出错。
   触屏设备没有 hover，这层始终透明，不会碍事。 */
.panel,
.resume-card,
.stats,
.award,
.contact__btn,
.back { position: relative; }
.panel::after,
.resume-card::after,
.stats::after,
.award::after,
.contact__btn::after,
.back::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(
    240px 240px at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 232, 196, .085) 0%,
    rgba(255, 232, 196, .03) 45%,
    rgba(255, 232, 196, 0) 72%
  );
}
.panel:hover::after,
.resume-card:hover::after,
.stats:hover::after,
.award:hover::after,
.contact__btn:hover::after,
.back:hover::after { opacity: 1; }

.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 14px 24px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 200;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { border-color: #5a2c25; color: #e0806c; }

.empty { padding: 48px; text-align: center; color: var(--text-3); font-size: 14px; }

/* 触屏设备没有 hover，卡片的播放按钮要常驻显示 */
@media (hover: none) {
  .card__play { opacity: 1; background: rgba(228,168,74,.9); }
  .card__play svg { width: 20px; height: 20px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  :root { --pad: 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* 左右分栏收紧一些，主视觉同步缩小 */
  .hero__grid { column-gap: 36px; }
  .hero__media { max-width: 560px; }
  .hero h1 { font-size: 44px; line-height: 58px; }
  .stats { flex-wrap: wrap; gap: 32px; padding: 32px; }
  .resume-card { flex-direction: column; gap: 24px; }
  .resume-card h3 { width: auto; }
  .awards { grid-template-columns: 1fr; }
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
}

/* ---------- 平板竖屏：左右分栏太挤，提前收成上下排布 ---------- */
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; row-gap: 22px; align-items: stretch; }
  .hero__media { max-width: none; margin-left: 0; }
}

/* ---------- 手机端（≤768px）---------- */
@media (max-width: 768px) {
  :root { --pad: 20px; }

  /* 导航：收成汉堡菜单 */
  .nav { height: 62px; }
  .brand__name { font-size: 19px; letter-spacing: 1.5px; }
  .brand__sub { font-size: 10px; letter-spacing: 1.5px; }
  .nav__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -8px;
    border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  }
  .nav__links {
    position: fixed; left: 0; right: 0; top: 62px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--pad) 16px;
    background: rgba(12, 12, 15, .98);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 15px 0; font-size: 16px; border-bottom: 1px solid #1e1e24; color: var(--text); }
  .nav__links a.btn {
    margin-top: 14px; justify-content: center;
    border-bottom: none; padding: 13px 0;
  }

  /* Hero：手机上改为上下排布 —— 文字在上、主视觉在下；收紧留白、去掉吃 GPU 的大光晕 */
  .hero { padding: 34px var(--pad) 44px; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 14px; align-items: stretch; }
  .hero__intro { gap: 14px; }
  .hero__media { max-width: none; margin-left: 0; gap: 12px; }
  /* 手机上没有指针跟随光（.ambient-cursor 已在 @media (hover:none) 里关掉），
     毛玻璃的模糊半径也收小，省 GPU */
  .chip, .tag, .award, .badge, .resume-card, .stats,
  .contact__btn, .back, .reel-switch, .panel, .nav__toggle,
  .field input, .field textarea, .field select {
    -webkit-backdrop-filter: blur(9px) saturate(1.3);
    backdrop-filter: blur(9px) saturate(1.3);
  }
  .hero h1 { font-size: 30px; line-height: 42px; letter-spacing: 0; }
  .hero p { font-size: 15px; line-height: 26px; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 6px; }
  .hero__cta .btn { justify-content: center; padding: 14px 20px; }
  .hero__divider {
    display: block;
    height: 1px;
    /* 通栏细线，右侧渐隐，避免生硬 */
    margin: 10px calc(var(--pad) * -1) 4px;
    background: linear-gradient(90deg, rgba(242, 240, 236, .18) 0%, rgba(242, 240, 236, .07) 55%, rgba(242, 240, 236, 0) 100%);
  }

  /* 主视觉：手机上改用 16:9 占满栏宽，画面更大更好看 */
  .reel { margin-top: 0; aspect-ratio: 16 / 9; border-radius: 12px; }
  .reel__badge { top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 6px 12px; font-size: 12px; letter-spacing: .3px; }
  .reel__play { width: 62px; height: 62px; }
  .reel__play svg { width: 22px; height: 22px; margin-left: 3px; }
  .reel__link { right: 12px; top: 12px; padding: 8px 16px; font-size: 13px; }
  /* 手机上画面内的箭头/圆点会被系统原生播放器挡住，统一换成画面外的控制条 */
  .reel__nav, .reel__dots { display: none !important; }
  .reel__sound { right: 12px; bottom: 12px; width: 38px; height: 38px; }
  /* 手机端顺序：视频 → 说明文字 → 切换条（一行放不下，改成上下排） */
  .reel-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .reel-bar { align-self: stretch; }
  .reel-switch { width: 100%; justify-content: space-between; padding: 6px 8px; }
  .reel-switch button { width: 42px; height: 42px; }
  .reel-switch__count { font-size: 14px; }
  .reel-cap { margin-top: 0; }
  .reel-cap h3 { font-size: 17px; line-height: 26px; }
  .reel-cap p { font-size: 13px; line-height: 23px; }
  .reel__ph { font-size: 13px; padding: 0 24px; text-align: center; }

  /* 分类筛选：横向滑动，不堆成一坨 */
  .chips {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 9px 16px; font-size: 13px; }

  /* 区块与网格 */
  .section { padding: 52px var(--pad); }
  .section-head { margin-bottom: 26px; gap: 10px; }
  .section-head h2 { font-size: 27px; }
  .section-head p { font-size: 14px; line-height: 24px; }
  .grid { grid-template-columns: 1fr; gap: 26px; margin-top: 24px; }
  .card { gap: 10px; }
  .card__title { font-size: 16px; line-height: 24px; }
  .card__play { width: 46px; height: 46px; }

  /* 数据条：两列 */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 22px; }
  .stat__v { font-size: 32px; }
  .stat__l { font-size: 13px; }
  .tag { padding: 9px 16px; font-size: 13px; }

  /* 履历 */
  .resume-card { padding: 22px; gap: 18px; }
  .resume-card h3 { font-size: 19px; }

  /* 联系区 */
  .contact { gap: 18px; }
  .contact h2 { font-size: 27px; }
  .contact p { font-size: 15px; line-height: 26px; }
  .contact__row { flex-direction: column; width: 100%; gap: 12px; padding-top: 6px; }
  .contact__btn { justify-content: center; width: 100%; }

  /* 播放页 */
  .player-wrap { padding: 16px var(--pad) 0; }
  .player { border-radius: 10px; }
  /* 手机上的播放控件条收紧一点，别把画面挡太多 */
  .vplayer__bar { left: 8px; right: 8px; bottom: 8px; gap: 4px; padding: 6px 10px 6px 6px; }
  .vplayer__btn { width: 34px; height: 34px; }
  .vplayer__time { min-width: 76px; font-size: 12px; letter-spacing: .2px; }
  .vplayer__big { width: 62px; height: 62px; }
  .player-meta { padding: 26px var(--pad) 44px; gap: 18px; }
  .player-meta h1 { font-size: 25px; line-height: 35px; }
  .meta-row { gap: 18px 26px; }
  .about-film p { font-size: 15px; line-height: 28px; }

  /* 关于我 */
  .about-intro { padding: 0 var(--pad) 52px; }
  .about-text__lead { font-size: 22px; line-height: 34px; }
  .about-text p { font-size: 15px; line-height: 28px; }
  .tl-row { flex-direction: column; gap: 8px; }
  .tl-row__year { width: auto; }
  .tl-row__title { font-size: 16px; line-height: 25px; }
  .awards { grid-template-columns: 1fr; gap: 14px; }

  /* 页脚 */
  .footer { padding: 44px var(--pad) 32px; gap: 26px; }
  .footer__top { gap: 26px; }
  .footer__cols { gap: 28px 32px; flex-wrap: wrap; }
  .footer__bottom { flex-direction: column; gap: 8px; }

  /* 后台 */
  .admin { padding: 0 16px 56px; }
  .admin-head { height: 64px; margin-bottom: 22px; }
  .admin-head h1 { font-size: 19px; }
  .admin-head__right { gap: 10px; font-size: 13px; }
  .panel { padding: 18px; border-radius: 12px; }
  .panel h2 { font-size: 17px; margin-bottom: 16px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 620px; }
  .uploader { flex-wrap: wrap; padding: 14px; }
  .uploader input[type=file] { flex: 1 1 100%; }
  .login { margin: 10vh auto; width: 100%; padding: 0 20px; }
  .toast { bottom: 24px; width: calc(100% - 40px); text-align: center; }
}