:root {
  --max: 1660px;
  /* 宽屏下列很宽时须允许足够高度，否则 16:9 盒子变窄居中 → 两侧露底像「黑边」 */
  --works-player-hmax: min(88vh, 960px, 92vw);
  --hero-inner: 1120px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 38px;
  --radius-2xl: 52px;
  --radius-pill: 999px;
  --text-primary: #1a2233;
  --text-secondary: #4a5568;
  --text-muted: #7b8798;
  --text-soft: #9aa5b5;
  --accent-cyan: #22d3ee;
  --accent-blue: #3b82f6;
  --accent-violet: #8b5cf6;
  --accent-mint: #34d399;
  --surface-0: #f6f8fc;
  --surface-1: #eef2fa;
  /* 全站浅色底统一，减少板块圆角与通栏之间的色差折角 */
  --page-tint: #eef2f8;
  --page-tint-mid: #eef1f8;
  --shell-tint: rgb(218, 230, 242);
  --shadow-soft: 0 12px 40px rgba(26, 34, 51, 0.09);
  --shadow-card: 0 6px 24px rgba(59, 91, 180, 0.09);
}
* {
  box-sizing: border-box;
  /* 全站不绘制滚动条：含系统原生 + 历史上为列表区写的 webkit 滑轨；滚轮/触控/键盘仍可滚动 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
/* 去掉视口底部整条「横向滚动条/拖动条」：多为 html/body 在 X 方向可滚动 */
html {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  /* 明确允许纵向平移，避免与装饰动效同帧时浏览器对滚动的保守处理 */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: auto;
  /* 分模块渐入时子树高度/重绘会触发滚动锚定补偿，易与用户手势「抢滚动」 */
  overflow-anchor: none;
}
body {
  margin: 0;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background: linear-gradient(180deg, #fafbfe 0%, #f0f3fb 48%, var(--page-tint-mid) 100%);
  min-width: 1200px;
  overflow-x: hidden;
  /* 避免与 html 双纵向滚动：主文档只让 html 承担 overflow */
  overflow-y: visible;
  max-width: 100%;
  letter-spacing: .02em;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* file:// 打开时顶部警告条，避免与 localhost 混淆 */
.file-protocol-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background: linear-gradient(180deg, #fff8e6 0%, #fff3cd 100%);
  border-bottom: 2px solid #e0a800;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #533f03;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.file-protocol-banner__inner {
  max-width: var(--max);
  margin: 0 auto;
  width: min(var(--max), calc(100% - 24px));
}
.file-protocol-banner code {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
}
.file-protocol-banner__close {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #c9a227;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.file-protocol-banner__close:hover {
  background: #fffef5;
}
html.has-file-protocol-banner body {
  padding-top: 0;
}

#page-public {
  overflow-x: hidden;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;
}

/*
 * 分模块渐入：头图 → 个人简介(#about) → 获奖 → 个人作品标题/区块 → 专辑条 → 规划 → 店铺 → 社交平台
 * 由 #page-public.is-module-enter 与 .mod-enter.is-module-visible 驱动（script.js scheduleModuleEntrance）
 */
#page-public.is-module-enter .mod-enter {
  /* 仅用 opacity，避免 transform 合成层 + 滚动锚定与用户滚轮「打架」 */
  transition: opacity 0.85s cubic-bezier(0.16, 0.82, 0.28, 1);
}
#page-public.is-module-enter .mod-enter:not(.is-module-visible) {
  opacity: 0;
}
#page-public.is-module-enter .mod-enter.is-module-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #page-public.is-module-enter .mod-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*
 * 手机：仅针对「近期规划 #plans」——与其它区块共用渐入无关；问题来自本区独有结构：
 * .plans-area overflow:hidden + 内层行程表 overflow:auto + thead sticky 在 WebKit 上易与整页纵向滚动打架（闪屏、视口异常跳动）。
 * 精彩瞬间轮播：窄屏单卡用 100cqi 铺满视口 + --carousel-gap:0，避免卡宽略小于视口露出下一张 → 右侧箭头与横滑层抢触摸。
 */
@media (max-width: 768px) {
  /* 与 script 中「窄屏一次点亮」配合：去掉 0.85s opacity 过渡，避免与纵滑同帧叠合成层引发异常补偿 */
  #page-public.is-module-enter .mod-enter {
    transition: none;
  }
  .plans-area {
    overflow: visible;
  }
  /* 行程表取消 max-height 与纵向盒内滚动；宽表仅允许横向滑动，避免「内层纵向滚动 + sticky 表头」与整页纵滑在 WebKit 上抢手势 */
  .plans-area .event-table-scroll,
  .awards-record-scroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
  }
  .plans-area .event-table thead th,
  .awards-record-table thead th {
    position: static;
    box-shadow: none;
  }
  #plans {
    overflow-anchor: none;
  }
  /* 精彩瞬间内卡片：仅本区 reveal-up 关闭动效，避免与横滑轮播同帧抢合成 */
  #plans .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card-carousel {
    /* 单列横滑时去掉卡间缝，步长与视口宽度一致，避免露下一张 */
    --carousel-gap: 0;
  }
  .card-carousel__viewport {
    container-type: inline-size;
    container-name: cardcarouselvp;
  }
  /* 单卡 = 视口内宽；flex-basis 同步，避免 width 与 flex 不一致导致窄 1～2px */
  .card-carousel__viewport .card-carousel__track > * {
    flex: 0 0 100cqi !important;
    width: 100cqi !important;
    min-width: 100cqi !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* 轮播容器不单独改布局：沿用下方全局 .card-carousel flex（[箭头][视口][箭头]），避免 absolute 贴边导致箭头跑出白卡/专辑条 */
}
.container { width: min(var(--max), calc(100% - 28px)); margin: 0 auto; }
.hero .container { width: min(var(--hero-inner), calc(100% - 56px)); }

/* First content block should feel full-width like reference */
.light-area .container {
  width: calc(100% - 2px);
  max-width: none;
}

.hero {
  display: flex;
  flex-direction: column;
  /* 用 dvh 对齐动态视口，减少与根滚动条叠加时的无谓纵向溢出（无前缀回退 vh） */
  height: 78vh;
  height: 78dvh;
  min-height: min(560px, 100vh);
  min-height: min(560px, 100dvh);
  max-height: min(860px, 100vh);
  max-height: min(860px, 100dvh);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  /* 头图区不抢纵向滚动手势（轮播底图为装饰层） */
  touch-action: pan-y pinch-zoom;
}
/* 头图背景由 .hero-bg-stack 双图层承担；原 ::before 的 background-image transition 在 WebKit 等上会错误叠显两帧 */
.hero::before {
  display: none;
  content: none;
}
.hero-bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
/* 仅头图：与全站 .mod-enter 分段无关，避免误伤下方区块动画 */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero-entrance .hero-bg-stack {
    animation: hero-entrance-bg 0.85s cubic-bezier(0.16, 0.82, 0.28, 1) both;
  }
  .hero.hero-entrance .nav,
  .hero.hero-entrance .hero-content,
  .hero.hero-entrance .hero-dots-wrap {
    animation: hero-entrance-ui 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }
}
@keyframes hero-entrance-bg {
  from {
    opacity: 0;
    transform: scale(1.012);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hero-entrance-ui {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero-entrance .hero-bg-stack,
  .hero.hero-entrance .nav,
  .hero.hero-entrance .hero-content,
  .hero.hero-entrance .hero-dots-wrap {
    animation: none !important;
  }
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-color: #1a2332;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  z-index: 1;
  /* 略短，减轻与页面滚动的合成竞争 */
  transition: opacity 0.38s ease;
}
.hero-bg-layer.hero-bg-layer--visible {
  opacity: 1;
  z-index: 2;
}
.hero-bg-layer.hero-bg-layer--static {
  transition: none !important;
}
/* 用户正在滚动/滚轮时暂停头图淡入淡出，避免与页面滚动抢合成 */
.hero.hero--bg-instant .hero-bg-layer {
  transition: none !important;
}
#hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 勿拦截滚轮/触摸：否则光标在头图暗角区时页面无法跟手滚动（用户易归因「轮播图卡滚动」） */
.hero-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.nav {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -120px;
  top: -140px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.05), 0 0 0 80px rgba(255, 255, 255, 0.03);
  z-index: 2;
  pointer-events: none;
}
.nav {
  padding-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.menu {
  display: flex;
  gap: 6px;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow-x: hidden;
}
.menu a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.menu a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
}
/*
 * 文档流 + margin-top:auto 沉底，避免绝对定位 + overflow 组合导致标题高度为 0 或整段被裁掉。
 */
.hero-content {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  align-self: center;
  width: min(var(--hero-inner), calc(100% - 56px));
  max-width: min(var(--hero-inner), calc(100% - 56px));
  margin-top: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 clamp(40px, 10vmin, 88px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  overflow: visible;
  isolation: isolate;
}
.hero-subtitle {
  margin: 0 0 14px;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(12px, 1vmin + 0.55rem, 17px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-subtitle[hidden] {
  display: none !important;
}
.hero-content h1[hidden] {
  display: none !important;
}
.hero-content h1 {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  color: #fff;
  /* vmin：任一边变小都缩字；下限保证可读 */
  font-size: clamp(12px, 2.2vmin + 0.38rem, 48px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}
/* 头图主词：始终用实色字，避免 background-clip + transparent 在部分内核整段不可见 */
.hero-content .highlight {
  margin-right: 8px;
  color: #a5f3fc;
  -webkit-text-fill-color: #a5f3fc;
  text-shadow:
    0 0 20px rgba(34, 211, 238, 0.85),
    0 2px 14px rgba(0, 0, 0, 0.55);
}
/* 头图底部居中：仅指示点（无深色胶囊底） */
.hero-dots-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px 22px;
}
.hero-dots {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dot:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.55);
}
.dot.active {
  background: linear-gradient(135deg, #7dd3fc, #a78bfa);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.light-area {
  position: relative;
  /* 与 bio-area 底部同色起笔，去掉顶边框避免「一条线」式转折；用极轻内阴影代替分界感 */
  background: linear-gradient(180deg, var(--page-tint) 0%, var(--page-tint) 10%, var(--page-tint-mid) 52%, #ecf0f7 100%);
  padding: 0 0 28px;
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
  /* 勿设顶部圆角：紧挨上方「获奖记录」白卡时，会与 .works-inset-card 上圆角叠成双弧，缝中出现「小折角」观感 */
  border-radius: 0;
}
.light-area::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 68%);
  top: 40px;
  left: -120px;
  pointer-events: none;
}
.light-area::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
  bottom: 80px;
  right: -100px;
  pointer-events: none;
}
/* 作品区：与「个人简历」区分 — 青绿冷色外框 + 左列表透明叠壳 / 右暗色放映区 */
/* 外壳无 padding，内圆角 ≈ 外圆角（仅减 1px 贴边框），左右栏与外壳同心 */
.split-block {
  /* 外壳不再留内边距：任何 padding 都会在圆角里形成「多一圈浅底」的嵌套框 */
  --works-shell-pad: 0px;
  --works-inner-r: max(14px, calc(var(--radius-xl) - 1px));
  /* 仅外壳铺一层柔和渐变；勿再给 .left-list 重复同一 gradient，否则会错位成「嵌套两界面」 */
  --works-shell-bg: linear-gradient(
    155deg,
    rgba(226, 236, 246, 0.92) 0%,
    rgba(218, 234, 242, 0.88) 32%,
    rgba(210, 228, 238, 0.82) 65%,
    rgba(200, 218, 232, 0.78) 100%
  );
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  /* 行高由两列内容决定；勿设过大 min-height + 1fr，否则右栏被拉高、iframe 易被纵向拉畸变 */
  grid-template-rows: minmax(360px, auto);
  /* 与 .bio-main 两列间距一致（照片 / 介绍） */
  column-gap: 16px;
  row-gap: 0;
  padding: 0;
  background: var(--works-shell-bg);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 36px rgba(30, 41, 59, 0.06);
  overflow: hidden;
  align-items: stretch;
}

.left-list, .focus-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.left-list {
  border-radius: var(--works-inner-r) 0 0 var(--works-inner-r);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  align-self: stretch;
  border-right: 0;
  /* 透明：只显示父级 .split-block 的一层底，避免与外壳各画一层渐变产生接缝白条 */
  background: transparent;
  overflow: hidden;
}
.focus-card {
  border-radius: 0 var(--works-inner-r) var(--works-inner-r) 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  border-left: 0;
  background: linear-gradient(180deg, #141a22 0%, #0b0f14 55%, #080b10 100%);
}
.focus-card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 68%);
  pointer-events: none;
}
/* 后台「焦点文案」：视频上方信息条，与右侧放映区同卡 */
.work-focus-strip {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
}
.work-focus-strip[hidden] {
  display: none !important;
}
.work-focus-strip__date {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #7dd3fc;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
}
.work-focus-strip__date[hidden] {
  display: none !important;
}
.work-focus-strip__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.96);
}
.work-focus-strip__lead[hidden] {
  display: none !important;
}
.work-focus-strip__muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.88);
  font-weight: 500;
}
.work-focus-strip__muted[hidden] {
  display: none !important;
}
.song-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 6px 10px;
  background: transparent;
}

.left-list ul { margin: 0; padding: 0; list-style: none; }
.left-list li {
  display: block;
  padding: 10px 12px;
  min-height: 48px;
  margin: 0 0 6px 0;
  color: var(--text-secondary);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.left-list li:last-child {
  margin-bottom: 0;
}
.left-list li:hover {
  background: rgba(100, 116, 139, 0.08);
}
.left-list li.active {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(125, 155, 180, 0.14));
  border-color: rgba(100, 116, 139, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.left-list li.active .song-title {
  color: #1e3a5f;
}
.song-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.song-line-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.song-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.song-sub {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  font-weight: 400;
}
.left-list em.song-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  border: 0;
  border-radius: var(--radius-pill);
  line-height: 18px;
  height: 18px;
  padding: 0 8px;
  flex-shrink: 0;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
}
.list-search {
  padding: 12px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: transparent;
}
.list-search input {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(241, 245, 249, 0.55);
  font-size: 12px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.list-search input:focus {
  border-color: rgba(100, 116, 139, 0.45);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.work-player-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* 勿 stretch：与 max-height + aspect-ratio 同时作用时会把 16:9 框拉成扁宽，哔哩 iframe 内出现左右大黑边 */
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* 16:9 外框：高度由「宽 × 9/16」推导；width 与 max-height 同时限制时须联动，否则会出现「扁盒子」拉畸 iframe */
.work-player-aspect {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: var(--works-player-hmax);
  margin-inline: auto;
  margin-block: 0;
  border-radius: 0 var(--works-inner-r) var(--works-inner-r) 0;
  overflow: hidden;
  background: #000;
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.work-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: #000;
  /* 铺满 16:9 容器；竖屏/4:3 源会裁切边缘，避免大块黑边 */
  object-fit: cover;
  object-position: center center;
}
/* 哔哩 iframe：外层严格 16:9；勿对 iframe 做 scale 裁切（会裁字幕）；由 JS 写 width/height 与容器一致 */
.work-player-iframe-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}
.work-player-iframe-wrap[hidden] {
  display: none !important;
}
.work-player-iframe-wrap .work-player-iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #000;
  transform: none;
}
.work-player-iframe[hidden],
.work-player[hidden] {
  display: none !important;
}

/* 可选类：与默认一致（现为 cover 铺满） */
.work-player--cover {
  object-fit: cover;
}

/* 原生 <video> 全屏：与页内一致用 cover 铺满视口，避免 contain 导致大黑边 */
.work-player:fullscreen,
.work-player:-webkit-full-screen,
.work-player:-moz-full-screen {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
  background: #000;
}
/* #works 内曾用 contain !important，会盖掉上面全屏的 object-fit，必须同级或更高优先级 */
#works .work-player:fullscreen,
#works .work-player:-webkit-full-screen,
#works .work-player:-moz-full-screen {
  object-fit: cover !important;
  object-position: center center;
}
/* 哔哩 iframe 被浏览器选为全屏元素时（部分环境），保证顶层层级与尺寸 */
.work-player-iframe:fullscreen,
.work-player-iframe:-webkit-full-screen,
.work-player-iframe:-moz-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 2147483645;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
}
/* 作品区嵌入全屏时放宽祖先 overflow，减少部分浏览器裁切/异常 */
body.works-embed-fullscreen #works .works-pair-row.works-row--video-led,
body.works-embed-fullscreen #works .works-pair-row > .focus-card,
body.works-embed-fullscreen #works .work-player-aspect,
body.works-embed-fullscreen #works .work-player-iframe-wrap {
  overflow: visible !important;
}
.album-strip {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 245, 0.95);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
/* 卡片横滑轮播：默认一屏 4 张，左右箭头 + JS 自动轮播 */
.card-carousel {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  position: relative;
  z-index: 0;
  isolation: isolate;
  --carousel-gap: 18px;
  /* 仅限制横向 overscroll；纵滑交给页面，避免手指搭在轮播上无法上下滑 */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.card-carousel__viewport {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 0;
  /* WebKit：横滑层默认合成顺序易盖住右侧「下一张」，用 translateZ 固定层级基准 */
  transform: translateZ(0);
  container-type: inline-size;
  container-name: cardcarouselvp;
  overflow-x: auto;
  overflow-y: hidden;
  /* 透明底：不叠白色「视口框」；圆角仍裁切横滑内容，减轻与单卡圆角错位时的缝 */
  border-radius: calc(var(--radius-md) + 6px);
  background: transparent;
  /* auto：避免 smooth 与脚本里无缝循环的 scrollLeft 瞬时修正在触控/WebKit 上打架导致闪屏 */
  scroll-behavior: auto;
  /* 手指松开后对齐整张卡，避免停在两张之间；箭头步进与 script getScrollStep 一致 */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  /* pan-x pinch-zoom 会阻止纵滑穿透到 document；用 auto 才能在轮播区域上下滑整页 */
  touch-action: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.card-carousel__viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* 横向滚动视口仍可能画出底部左右「scrollbar corner」灰折线，显式关掉（专辑/精彩/店铺轮播共用） */
.card-carousel__viewport::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
.card-carousel__nav {
  /* z-index + 独立合成层：避免 WebKit 横滑视口盖住右侧箭头命中（左侧不受影响） */
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 230, 0.95);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card-carousel__nav:hover:not(:disabled) {
  border-color: rgba(129, 140, 248, 0.45);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}
.card-carousel__nav:disabled {
  cursor: default;
}
.card-carousel__viewport .card-carousel__track > * {
  flex: 0 0 auto;
  width: calc((100cqi - 3 * var(--carousel-gap)) / 4);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .card-carousel__viewport .card-carousel__track > * {
    width: calc((100cqi - 1 * var(--carousel-gap)) / 2);
  }
}
@media (max-width: 560px) {
  .card-carousel__viewport .card-carousel__track > * {
    width: calc(100cqi - 0.5px);
  }
}
.album-row.card-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--carousel-gap, 18px);
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}
.album-row article.album-card,
.album-row a.album-card {
  border-radius: calc(var(--radius-md) + 6px);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 255, 0.75) 100%);
  border: 1px solid rgba(214, 223, 239, 0.95);
  box-shadow: 0 10px 36px rgba(30, 41, 59, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.album-row a.album-card--link {
  cursor: pointer;
  touch-action: manipulation;
}
.album-row article.album-card:hover,
.album-row a.album-card:hover {
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 14px 40px rgba(99, 102, 241, 0.12);
}
/* 与 .plans-area .video-grid article img 同高：桌面 250px，窄屏见 max-width:1280px 内覆盖 */
.album-row img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.45s ease;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.album-row article.album-card:not(:has(.media-card__text)) img,
.album-row a.album-card:not(:has(.media-card__text)) img {
  border-radius: var(--radius-md);
}
.album-row article.album-card:hover img,
.album-row a.album-card:hover img {
  transform: scale(1.06);
}
/* iOS/WebKit：<a> 包图时触摸常落在 img 上导致不跟链；由外层 <a> 承接点击 */
a.album-card--link > img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* 轮播单列卡片：竖向 flex，白底文案区始终在底部拉满宽，减少底缝与折角错觉 */
.card-carousel .card-carousel__track > article,
.card-carousel .card-carousel__track > a.album-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* 比网格卡更轻的阴影，减轻 WebKit 在圆角外「方角」晕染 */
  box-shadow: 0 4px 18px rgba(30, 41, 59, 0.05);
}
/* 精彩/店铺：整卡外链时 inner 为单块 a，需纵向 flex 才能让白底文案与图同宽对齐 */
.card-carousel .video-grid article > .video-grid-card-link,
.card-carousel .shop-photo-grid article > .video-grid-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  color: inherit;
}
/* 专辑 / 精彩瞬间 / 店铺实拍：主标题 + 可选说明。底角只由外层 article overflow+圆角裁切，文案区勿再叠 border-radius/渐变底，避免折角与字色分层（亚像素与渐变叠加） */
.media-card__text {
  margin: 0;
  padding: 12px 14px 14px;
  background: #ffffff;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.media-card__text .media-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.media-card__text .media-card__meta {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
/* 后台未配标题/说明时仍保留白底条高度（由 buildMediaCardTextBlock 输出空文案区） */
.media-card__text--empty {
  min-height: 52px;
}
/* 无 media-card__text 时的裸 <p>（仅静态占位）：与上同，不叠内圆角 */
.album-row article:not(:has(.media-card__text)) > p:last-child,
.plans-area .video-grid article:not(:has(.media-card__text)) > p:last-child {
  margin: 0;
  padding: 12px 14px 14px;
  background: #ffffff;
}
.more-btn {
  margin: 16px auto 0;
  display: block;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  border: 1px solid rgba(203, 213, 230, 0.95);
  width: min(320px, 92%);
  height: 40px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
a.more-btn {
  text-decoration: none;
  text-align: center;
  line-height: 38px;
  box-sizing: border-box;
  touch-action: manipulation;
}
a.more-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.more-btn:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.light-btn { border-color: rgba(203, 213, 230, 0.95); color: var(--text-secondary); }

/* 个人作品：与获奖记录同款外壳（四角圆弧同 .section-inset-card），列表+播放器+专辑条同卡 */
.light-area .container.works-inset-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 2px);
  max-width: none;
  /* 与上方「获奖记录」白卡略留缝，两卡各自完整圆角，避免顶底圆弧「咬死」成怪折痕 */
  margin-top: 14px;
}
.works-inset-card .section-heading-wrap {
  margin-bottom: 12px;
  padding-top: 0;
}
/* 焦点文案条未展示时，略收紧「个人作品」标题与下方列表/视频区的空隙 */
.works-inset-card:has(#work-focus-strip[hidden]) .section-heading-wrap {
  margin-bottom: 8px;
}
/* 与「近期规划」同结构：列表/视频与下方专辑条之间的眉题+主标题 */
.works-inset-card .works-album-heading {
  margin-top: 22px;
  margin-bottom: 0;
  padding-top: 4px;
}
/* 专辑精选 / 精彩瞬间：与店铺实拍(.shop-photo-strip__title)同字号 */
.works-inset-card .works-album-heading .block-heading-title,
.plans-area .plans-moments-heading .block-heading-title {
  font-size: clamp(22px, 2.2vw, 28px);
}
.works-inset-card .works-album-heading .block-heading-line {
  display: none;
}
.works-inset-card .works-album-heading[hidden] {
  display: none !important;
}
.works-inset-card .album-strip {
  margin-top: 14px;
  margin-bottom: 0;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* 近期规划：与个人简介 / 作品区 / 获奖记录同系浅色通栏，非暗黑风 */
.plans-area {
  position: relative;
  padding: 24px 0 28px;
  background: linear-gradient(180deg, var(--page-tint) 0%, var(--page-tint-mid) 100%);
  overflow: hidden;
}
.plans-area::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  top: 10px;
  right: 8%;
  pointer-events: none;
}
.surface-rounded {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(226, 232, 245, 0.95);
}
/* 行程表：圆角由内层 event-table-scroll 承担（与获奖记录表格区一致） */
.plans-area .plans-stack-card {
  overflow: visible;
}
/* 与 .awards-record-scroll 同结构：块级滚动区 + 内层 wrap + auto 表格；长内容单行延伸 → 横向拖动看全，不撑高行 */
.plans-area .event-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: min(52vh, 480px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  cursor: default;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 245, 0.95);
  background: #d5e0ea;
}
.plans-area .event-table-scroll .event-action-link {
  cursor: pointer;
}
.plans-area .event-table-wrap {
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border: 0;
}
.plans-area .event-table {
  width: 100%;
  min-width: 100%;
  min-width: max(100%, max-content);
  table-layout: auto;
  border-collapse: collapse;
  background: #d5e0ea;
  color: var(--text-primary);
  font-size: 12px;
}
.plans-area .event-table th:nth-child(1),
.plans-area .event-table td:nth-child(1) {
  min-width: 6.5rem;
}
.plans-area .event-table th:nth-child(2),
.plans-area .event-table td:nth-child(2) {
  min-width: 4.5rem;
}
.plans-area .event-table th:nth-child(3),
.plans-area .event-table td:nth-child(3) {
  min-width: 5.5rem;
}
.plans-area .event-table th:nth-child(4),
.plans-area .event-table td:nth-child(4) {
  min-width: 12rem;
}
.plans-area .event-table thead {
  background: #58758f;
  color: #fff;
}
.plans-area .event-table th,
.plans-area .event-table td {
  border: 1px solid #e8edf2;
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.plans-area .event-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #58758f;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
  white-space: nowrap;
}
.plans-area .event-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.45);
}
.plans-area .event-table td:first-child {
  color: #475569;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plans-area .event-table td:nth-child(2) {
  color: var(--text-primary);
  font-weight: 600;
}
.plans-area .event-table td:nth-child(3).event-form-cell {
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.plans-area .event-table td:nth-child(4) {
  color: var(--text-primary);
  font-weight: 600;
}
.plans-area .event-table td:last-child,
.plans-area .event-table th:last-child {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  color: #64748b;
}
.plans-area .event-table .event-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.plans-area .event-table .event-action-link:hover {
  color: #1d4ed8;
}
.plans-area .event-table .event-action-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #64748b;
  font-weight: 600;
}

/* 与 bio-area / light-area 一致通栏 */
.plans-area > .container {
  position: relative;
  z-index: 1;
  width: calc(100% - 2px);
  max-width: none;
}

/* 近期规划 + 精彩瞬间：同一张连续卡片，中间仅分隔线（勿再叠第二张白卡） */
.plans-area .plans-in-card-moments {
  margin-top: 20px;
  padding-top: 22px;
  border-top: 0;
}

.plans-area .plans-table-heading {
  margin-bottom: 0;
  padding-top: 0;
}

.plans-area .plans-stack-card .plans-moments-body {
  padding-top: 4px;
}

.plans-area .plans-moments-heading {
  margin-top: 0;
  margin-bottom: 0;
}
.plans-area .plans-moments-heading .block-heading-line {
  display: none;
}
.plans-area .video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.plans-area .video-grid.card-carousel__track {
  display: flex !important;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  gap: var(--carousel-gap, 18px);
  box-sizing: border-box;
  align-items: stretch;
}
.plans-area .video-grid article img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.plans-area .video-grid article:not(:has(.media-card__text)) img {
  border-radius: var(--radius-md);
}
.plans-area .video-grid article {
  overflow: hidden;
  border-radius: calc(var(--radius-md) + 6px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 255, 0.75) 100%);
  border: 1px solid rgba(214, 223, 239, 0.95);
  box-shadow: 0 10px 36px rgba(30, 41, 59, 0.06);
  transition: border-color .25s ease, box-shadow .25s ease;
  /* 与作品区专辑卡一致，避免子元素继承到浅灰字色 */
  color: var(--text-primary);
}
/* 横向轮播内：整卡白底，避免底角透出浅蓝渐变被误认为「蓝透明框」 */
.plans-area .video-grid.card-carousel__track > article {
  background: #fff;
}
.plans-area .video-grid article:hover {
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 14px 40px rgba(99, 102, 241, 0.12);
}
.plans-area .video-grid article:hover img {
  transform: scale(1.06);
}
.plans-area .video-grid-card-link {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  touch-action: manipulation;
}
.plans-area .video-grid-card-link > img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.plans-area .video-grid-card-link:visited {
  color: var(--text-primary);
}
.plans-area .video-grid-card-link:hover .media-card__title {
  color: #1e3a5f;
}
.plans-area .video-grid-card-link:hover .media-card__meta {
  color: #475569;
}

/* 图三式统一标题：副标题 + 主标题 + 短装饰线（居中，与获奖记录一致） */
.block-heading {
  text-align: center;
}
.block-heading-subtitle,
.awards-record-subtitle {
  text-align: center;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.block-heading-subtitle:empty {
  display: none;
}
.block-heading-title,
.awards-record-title {
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
/* 用实色块代替 border-bottom，避免部分浏览器在 0 高度元素上画底边时出现中心断点/凸起 */
.block-heading-line,
.awards-record-wave {
  width: 90px;
  height: 4px;
  margin: 0 auto 18px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #2a628f;
  position: static;
  display: block;
}
.section-heading-wrap {
  width: calc(100% - 2px);
  max-width: none;
  margin: 0 auto 18px;
  padding-top: 8px;
}
/* 个人简历与作品之间：获奖记录（卡片圆角 + 表体可滚动，与 bio-main / 作品壳一致） */
.awards-record-area {
  position: relative;
  padding: 28px 0 20px;
  background: linear-gradient(180deg, var(--page-tint) 0%, var(--page-tint-mid) 100%);
  overflow: hidden;
}
.awards-record-area .awards-record-inner {
  width: calc(100% - 2px);
  max-width: none;
}
/* 与获奖记录同款：通栏大卡片镶嵌（各区块复用；白底+阴影与页面浅底区分，避免「看不出卡片」） */
.awards-record-card,
.section-inset-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  border-radius: var(--radius-xl);
  padding: 22px 22px 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f6f8fc 52%, #eef2f9 100%);
  border: 1px solid rgba(186, 198, 218, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 10px 28px -6px rgba(15, 23, 42, 0.12);
}
.awards-record-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: min(52vh, 480px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 245, 0.95);
  background: #d5e0ea;
  margin-bottom: 18px;
}
.awards-record-table-wrap {
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border: 0;
}
.awards-record-table {
  width: 100%;
  min-width: 100%;
  min-width: max(100%, max-content);
  table-layout: auto;
  border-collapse: collapse;
  background: #d5e0ea;
  font-size: 12px;
}
.awards-record-table th:nth-child(1),
.awards-record-table td:nth-child(1) {
  min-width: 6rem;
}
.awards-record-table th:nth-child(2),
.awards-record-table td:nth-child(2) {
  min-width: 9rem;
}
.awards-record-table th:nth-child(3),
.awards-record-table td:nth-child(3) {
  min-width: 10rem;
}
.awards-record-table thead {
  background: #58758f;
  color: #fff;
}
.awards-record-table th {
  font-weight: 700;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #58758f;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
  white-space: nowrap;
}
.awards-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}
.awards-th-icon {
  display: inline-flex;
  opacity: 0.92;
  color: inherit;
}
.awards-record-table td {
  border: 1px solid #e8edf2;
  padding: 11px 14px;
  vertical-align: middle;
  white-space: nowrap;
}
.awards-cell-date {
  color: #475569;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.awards-presenter-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  touch-action: manipulation;
  white-space: nowrap;
}
.awards-presenter-link:hover {
  text-decoration: underline;
}
.awards-presenter-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: min-content;
}
.awards-presenter-plain {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
.awards-presenter-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.awards-presenter-more:hover {
  border-color: #2563eb;
  color: #2563eb;
}
.awards-award-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: min-content;
}
.awards-award-text {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
.awards-award-icon {
  flex-shrink: 0;
}
.awards-award-icon-music {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.14);
  color: #4f46e5;
  font-size: 12px;
  line-height: 1;
}
.awards-row-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  vertical-align: middle;
}
.awards-cell-link {
  max-width: 120px;
  font-size: 12px;
}
.awards-link-cell {
  display: inline-block;
  max-width: 100%;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.awards-link-cell:hover {
  text-decoration: underline;
}
.awards-cell-thumb {
  width: 52px;
  text-align: center;
  vertical-align: middle;
}
.awards-cell-empty {
  color: #94a3b8;
  font-size: 12px;
}

/* 店铺：上为介绍（字号同 bio），下为实拍 — 网格与「精彩瞬间」.video-grid 一致 */
.shop-area {
  position: relative;
  background: linear-gradient(180deg, var(--page-tint) 0%, #e8edf8 100%);
  padding: 48px 0 52px;
  overflow: hidden;
}
.shop-area::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  bottom: -100px;
  left: -60px;
  pointer-events: none;
}
.shop-area > .container {
  position: relative;
  z-index: 1;
  width: calc(100% - 2px);
  max-width: none;
}
.shop-area .container.shop-inset-inner {
  width: calc(100% - 2px);
  max-width: none;
}
.shop-inset-card .block-heading--shop {
  margin-bottom: 4px;
}
.shop-area .block-heading--shop .block-heading-line {
  margin-bottom: 18px;
}
.shop-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: clamp(24px, 3vw, 36px);
  align-items: stretch;
  padding: 4px 0 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
}
.shop-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}
.shop-copy-inner {
  flex: 0 0 auto;
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  padding: 28px 32px;
  border-radius: calc(var(--radius-xl) - 4px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 245, 0.98);
  box-shadow: 0 2px 16px rgba(30, 41, 59, 0.05);
}
.shop-copy .shop-intro-lead {
  margin: 0 0 18px;
  line-height: 1.75;
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.shop-copy .shop-intro-body {
  margin: 0 0 22px;
  line-height: 1.95;
  font-size: 18px;
  font-weight: 400;
  color: #334155;
  white-space: pre-line;
}
.shop-copy .shop-intro-body:last-child {
  margin-bottom: 0;
}
.shop-intro-card {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.shop-intro-card[hidden] {
  display: none !important;
}
.shop-intro-lead:empty {
  display: none;
}
.shop-intro-body:empty {
  display: none;
}
.shop-copy .bio-store-wrap {
  margin-top: 4px;
}
.shop-custom-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed rgba(148, 163, 184, 0.55);
  min-width: 0;
}
.shop-custom-blocks[hidden] {
  display: none !important;
}
.shop-custom-blocks__text {
  margin: 0;
  line-height: 1.95;
  font-size: 18px;
  font-weight: 400;
  color: #334155;
}
.shop-custom-blocks__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 12px 32px rgba(30, 41, 59, 0.05);
}
.shop-custom-blocks__figure img {
  width: 100%;
  max-height: min(260px, 40vh);
  object-fit: cover;
  display: block;
  vertical-align: middle;
}
.shop-custom-blocks__figure figcaption {
  padding: 10px 14px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.45;
  background: #f8fafc;
}
.shop-custom-blocks__quote {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 0;
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.55), rgba(241, 245, 249, 0.9));
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.12);
}
.shop-custom-blocks__quote-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6366f1;
  text-transform: uppercase;
}
.shop-custom-blocks__quote-label:empty {
  display: none;
}
.shop-custom-blocks__quote-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #334155;
  font-weight: 500;
}
.shop-custom-blocks__link {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.shop-custom-blocks__link:hover {
  color: #1d4ed8;
  border-bottom-color: rgba(29, 78, 216, 0.45);
}
.shop-custom-blocks__link--static {
  color: #64748b;
  border-bottom: 0;
  cursor: default;
}
.shop-photos {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  padding: 0;
}
/* 与「精彩瞬间」一致：轮播 + 底部居中 Browse More */
.shop-area .shop-photos-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

/*
 * 首屏以下大块：桌面用 content-visibility 省绘制。
 * 窄屏勿用：占位高度与真实高度差 + 渐入定时器会与整页纵向滚动「抢视口」，表现为闪一下、跳到某锚点模块。
 */
@supports (content-visibility: auto) {
  @media (min-width: 769px) {
    .light-area .works-inset-card.mod-enter,
    .awards-record-area.mod-enter,
    .plans-area.mod-enter,
    .shop-area.mod-enter,
    .social-area.mod-enter {
      content-visibility: auto;
      contain-intrinsic-size: 680px 480px;
    }
  }
}
.shop-photo-strip__head {
  text-align: center;
  margin: 0 auto 22px;
  max-width: 560px;
}
.shop-photo-strip__eyebrow {
  display: block;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
.shop-photo-strip__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.shop-photo-strip__sub {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  font-weight: 500;
  white-space: pre-line;
}
.shop-cta {
  align-self: flex-start;
  margin-top: 24px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}
.shop-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.35);
}
/* 与 .plans-area .video-grid 一致：每行 4 卡、固定图高、同款卡片与标题条 */
.shop-area .shop-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  width: 100%;
}
.shop-area .shop-photo-grid.card-carousel__track {
  display: flex !important;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  gap: var(--carousel-gap, 18px);
  box-sizing: border-box;
  align-items: stretch;
}
.shop-area .shop-photo-grid article img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.shop-area .shop-photo-grid article:not(:has(.media-card__text)) img {
  border-radius: var(--radius-md);
}
.shop-area .shop-photo-grid article {
  overflow: hidden;
  border-radius: calc(var(--radius-md) + 6px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 255, 0.75) 100%);
  border: 1px solid rgba(214, 223, 239, 0.95);
  box-shadow: 0 10px 36px rgba(30, 41, 59, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--text-primary);
}
.shop-area .shop-photo-grid.card-carousel__track > article {
  background: #fff;
}
.shop-area .shop-photo-grid article:hover img {
  transform: scale(1.06);
}
.shop-area .shop-photo-grid .video-grid-card-link {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  touch-action: manipulation;
}
.shop-area .shop-photo-grid .video-grid-card-link > img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.shop-area .shop-photo-grid .video-grid-card-link:visited {
  color: var(--text-primary);
}
.shop-area .shop-photo-grid .video-grid-card-link:hover .media-card__title {
  color: #1e3a5f;
}
.shop-area .shop-photo-grid .video-grid-card-link:hover .media-card__meta {
  color: #475569;
}
.awards-table-wrap {
  width: min(92%, 1200px);
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(226, 232, 245, 0.95);
}
.title-wave {
  width: 90px;
  height: 4px;
  margin: 0 auto 18px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #2a628f;
  position: static;
  display: block;
}
.title-wave.small { width: 86px; margin: 10px 0 0; }
table { width: 100%; margin: 0 auto; border-collapse: collapse; background: #d5e0ea; font-size: 12px; }

thead {
  background: #58758f;
  color: #fff;
}

th, td { border: 1px solid #e8edf2; padding: 11px 14px; text-align: left; }

.bio-area {
  padding: 56px 0 60px;
  /* 底部与 light-area 顶部同色同调，避免两板块转折处露缝 */
  background: linear-gradient(180deg, #f8fafc 0%, var(--page-tint) 72%, var(--page-tint) 100%);
  position: relative;
  overflow: hidden;
}

/* 与获奖记录 .awards-record-inner 一致通栏 */
.bio-area .container.bio-inset-inner {
  width: calc(100% - 2px);
  max-width: none;
}
.bio-area::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, transparent 70%);
  top: 20px;
  right: 10%;
  pointer-events: none;
}

.bio-header {
  margin-bottom: 18px;
  text-align: center;
}

.bio-header .block-heading-title {
  margin-bottom: 12px;
}

.bio-header-line.block-heading-line {
  margin-bottom: 0;
}

.bio-main {
  display: grid;
  /* 左栏限宽，避免超宽屏时头像区被拉成「扁盒子」导致人像像被横向压扁 */
  grid-template-columns: minmax(260px, min(38vw, 480px)) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  /* 与左列同高拉伸：行高由较高一侧决定，照片列用 cover 铺满，避免文字长时照片下方大块留白 */
  align-items: stretch;
  padding: 4px 0 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.tiny {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  font-family: "Outfit", "Noto Sans SC", sans-serif;
}

/* 桌面：与右侧内容同高铺满左列，图片 object-fit:cover 随框裁切，不变形；移动端见 max-width 媒体查询 */
.bio-photo-card {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  align-self: stretch;
  height: 100%;
  min-height: min(42vh, 440px);
  max-height: none;
  box-sizing: border-box;
  border-radius: calc(var(--radius-xl) - 4px);
  background: #2a0a0f;
  border: 1px solid rgba(226, 232, 245, 0.98);
  box-shadow: 0 2px 16px rgba(30, 41, 59, 0.05);
}
.bio-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  border-radius: inherit;
  display: block;
  filter: saturate(1.02) contrast(1.03) brightness(0.98);
}

.bio-photo-card--contain img {
  object-fit: contain;
  object-position: center center;
}
.bio-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.06) 0%, transparent 42%);
}

.bio-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  /* 避免与左侧照片区同高时形成内部滚动条，简介随内容自然增高 */
  overflow: visible;
}

.bio-copy-inner {
  flex: 0 0 auto;
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  padding: 8px 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.bio-kicker {
  margin: 0 0 14px;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #4f46e5;
  text-transform: uppercase;
}

.bio-copy .bio-lead {
  margin: 0 0 18px;
  line-height: 1.75;
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.bio-copy .bio-body {
  margin: 0 0 22px;
  line-height: 1.95;
  font-size: 18px;
  font-weight: 400;
  color: #334155;
}
.bio-accent-wrap {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed rgba(148, 163, 184, 0.55);
}
.bio-accent-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
}
.bio-copy .bio-accent {
  margin: 0;
  line-height: 1.85;
  font-size: 17px;
  font-weight: 500;
  color: #3730a3;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.bio-latest-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(148, 163, 184, 0.55);
}
.bio-latest-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
}
.bio-latest-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bio-latest-list li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(239, 246, 255, 0.85));
  border: 1px solid rgba(203, 213, 225, 0.85);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bio-latest-list li:hover {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 14px rgba(59, 91, 180, 0.08);
}
.bio-latest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 10px;
  row-gap: 6px;
}
.bio-latest-title {
  font-size: clamp(17px, 1.05vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #0f172a;
}
/* 与名称同排、字号接近（略小一级），避免像脚注过小 */
.bio-latest-suffix {
  flex-shrink: 0;
  font-size: clamp(15px, 0.98vw, 17px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #4f46e5;
  padding: 4px 0 4px 12px;
  border-left: 3px solid rgba(129, 140, 248, 0.75);
  border-radius: 0;
  background: none;
  font-family: "Noto Sans SC", sans-serif;
}
.bio-latest-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
}

.bio-store-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(148, 163, 184, 0.55);
}
.bio-store-section-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
}
.bio-store-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bio-store-item {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 2px 12px rgba(30, 41, 59, 0.04);
}
.bio-store-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 8px;
}
.bio-store-field:last-child {
  margin-bottom: 0;
}
.bio-store-key {
  flex-shrink: 0;
  min-width: 4.5em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748b;
}
.bio-store-val {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #1e293b;
}
.bio-store-val--multiline {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 独立区块「社交平台」：与简介/店铺同系图三式标题，下方图标行 */
.social-area {
  position: relative;
  padding: 48px 0 52px;
  background: linear-gradient(180deg, var(--page-tint) 0%, #e8edf8 100%);
  overflow: hidden;
}
.social-area::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  top: -80px;
  right: -60px;
  pointer-events: none;
}
.social-area .container.social-inset-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 2px);
  max-width: none;
}
.social-inset-card {
  padding-bottom: 26px;
}
.social-inset-card .block-heading--social .block-heading-line {
  margin-bottom: 22px;
}
.social-platform-grid--section {
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.social-platform-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-platform-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}
.social-platform-btn:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(30, 41, 59, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.social-platform-btn:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.85);
  outline-offset: 2px;
}
.social-platform-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.social-platform-btn__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.reveal-up {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  /* 勿对父级用 filter:blur，部分 WebKit 下会影响子链接点击命中 */
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 首屏已在视口内：跳过上浮淡入，避免与滚轮/惯性滚动抢合成层（用户感知为「视效播完才能滑」） */
.reveal-up.reveal-up--prime {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* 滚动过程中暂停区块上浮淡入，避免与文档滚动同一时段争用（由 script 在 wheel/scroll 时切换） */
html.reveal-motion-paused .reveal-up {
  transition: none !important;
}

/* Unified rounded, glossy interaction style */
.more-btn,
.album-row article.album-card,
.album-row a.album-card,
.plans-area .video-grid article,
.shop-area .shop-photo-grid article,
.awards-table-wrap,
.surface-rounded,
.left-list,
.focus-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.album-row article.album-card:hover,
.album-row a.album-card:hover,
.plans-area .video-grid article:hover,
.shop-area .shop-photo-grid article:hover,
.focus-card:hover {
  transform: translateY(-4px);
}
/* 横向轮播内卡片勿上浮：translate 与圆角/阴影叠层在 WebKit 上易在底角形成「折角」灰边 */
.card-carousel .card-carousel__track > article:hover,
.card-carousel .card-carousel__track > a.album-card:hover {
  transform: none;
  box-shadow: 0 10px 28px rgba(30, 41, 59, 0.06);
}
.card-carousel .video-grid article:hover img,
.card-carousel .shop-photo-grid article:hover img {
  transform: none;
}

/* 作品区播放器整块不要上浮，避免像「另一张卡」 */
#works .focus-card:hover {
  transform: none;
}

/* 去掉右上角装饰光斑（易被看成「白色折角」） */
#works .focus-card::before {
  display: none;
}

/* 作品区：外壳单列 flex；内层 .works-pair-row 在桌面为单行 grid，三列天然同高，避免分列锁高不一致 */
#works.split-block {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  /* 覆盖 .split-block 的两列 grid + column-gap，避免单列 flex 仍带 16px 列缝导致子项宽度/底边错觉 */
  grid-template-columns: none;
  grid-template-rows: none;
  column-gap: 0;
  row-gap: 0;
  padding: 0 !important;
  margin: 0;
  margin-block: 0;
  gap: 0;
  min-width: 0;
  /* 实色垫底 + 渐变叠画，与通栏 --shell-tint 一致，减轻圆角折角 */
  background-color: var(--shell-tint);
  background-image: var(--works-shell-bg);
  isolation: isolate;
}
#works .works-pair-row {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* 桌面：列表与视频之间的可拖动分隔条（无中间「选取框」装饰，仅分色条 + 列宽拖动） */
.works-resizer {
  position: relative;
  flex: 0 0 10px;
  width: 10px;
  min-width: 10px;
  margin: 0;
  flex-shrink: 0;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  align-self: stretch;
  z-index: 3;
  background: linear-gradient(
    90deg,
    var(--shell-tint) 0%,
    rgba(214, 228, 240, 0.95) 45%,
    rgba(51, 65, 85, 0.35) 78%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 0;
  box-shadow: none;
  outline: none;
}
/* 桌面精细样式见 min-width:1281px 内 #works .works-pair-row > .works-resizer */
.works-resizer:focus-visible {
  outline: none;
}
#works .left-list {
  /* 与外壳同色实底，避免透明叠层与右侧暗区在圆角处产生「折角」色差 */
  background: linear-gradient(
    155deg,
    rgba(226, 236, 246, 0.98) 0%,
    rgba(218, 234, 242, 0.95) 40%,
    rgba(210, 228, 238, 0.92) 100%
  ) !important;
  /* 桌面与右栏成对：四边同粗细，接缝侧不重复描边（见 min-width 媒体查询） */
  border-right: 0;
  min-height: 0;
  min-width: 220px;
  flex: 0 0 34%;
  width: 34%;
  max-width: 62%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* 列表区与搜索框共用左右留白，新加曲目只继承布局，无需逐条改样式 */
  --works-list-gutter: 16px;
}
#works .song-list-scroll {
  background: transparent !important;
  /* 左右不留白：让 li 背景（含选中态）横向铺满栏宽；文字留白改在 li 内边距里做 */
  box-sizing: border-box;
  padding: 0 0 8px 0;
  /* 与左栏 1px 边框同心：内轮廓圆角 = 外轮廓 − 边框，避免左上角露缝/缺边 */
  border-radius: max(0px, calc(var(--works-inner-r) - 1px)) 0 0 0;
  overflow-x: hidden;
}
/* 列表项：内边距含原「列表区 gutter」，选中背景仍铺满整行宽 */
#works .left-list li {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 6px;
  padding: 10px calc(12px + var(--works-list-gutter)) 10px calc(12px + var(--works-list-gutter));
  border-radius: var(--radius-sm);
}
#works .left-list li:last-child {
  margin-bottom: 0;
}
#works .left-list li:first-child {
  padding-top: 12px;
  padding-bottom: 10px;
  border-top-left-radius: max(0px, calc(var(--works-inner-r) - 1px));
  border-top-right-radius: var(--radius-sm);
}
#works .left-list li.active {
  box-shadow: none;
  /* 与未选中行同宽，背景已贴左右栏边 */
  width: 100%;
  box-sizing: border-box;
}
#works .song-line {
  width: 100%;
}
#works .song-line-main {
  align-items: center;
}
#works .song-title {
  flex: 1 1 auto;
  min-width: 0;
}
#works .list-search {
  box-sizing: border-box;
  padding: 12px var(--works-list-gutter);
}
#works .list-search input {
  background: rgba(241, 245, 249, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
}
/* 桌面端 16:9 见 @media (min-width:1281px) 内 #works .work-player-aspect（aspect-ratio + iframe 像素同步，避免哔哩嵌入拉畸） */
#works .focus-card {
  margin: 0;
  min-height: 0;
  min-width: 0;
  flex: 1 1 0%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 仅作布局容器；外轮廓线与左栏统一在 .focus-card / .left-list 上，避免双层边框导致边界高低差 */
/* 勿用 flex:1 纵向伸展 frame：否则视频区被拉满剩余高度，16:9 下方出现一条黑底 */
#works .work-player-frame {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0 var(--works-inner-r) var(--works-inner-r) 0;
  overflow: visible;
}
#works .work-player-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
  width: 100%;
}
/* 原生 MP4：cover 等比铺满 16:9 框（不拉伸像素，只裁边）；勿用 contain，否则左右/上下大块黑边 */
#works .work-player {
  object-fit: cover !important;
  object-position: center center;
}
#works .work-player,
#works .work-player-iframe-wrap,
#works .work-player-iframe {
  border-radius: inherit;
}
#works .work-player-iframe-wrap {
  background: #0b0f14;
  line-height: 0;
}

.list-search input::placeholder {
  color: #94a3b8;
  letter-spacing: .03em;
}

@media (max-width: 1280px) {
  body { min-width: 0; }
  .container { width: min(1180px, calc(100% - 20px)); }
  .light-area .container { width: calc(100% - 2px); }
  .plans-area > .container,
  .shop-area > .container,
  .awards-record-area .awards-record-inner {
    width: calc(100% - 2px);
    max-width: none;
  }
  .awards-record-card,
  .section-inset-card {
    padding: 16px 14px 14px;
  }
  /* 平板/窄桌面：表区限高；手机由 @media (max-width:768px) 取消 max-height，避免与整页纵滑抢手势 */
  @media (min-width: 769px) {
    .awards-record-scroll,
    .plans-area .event-table-scroll {
      max-height: min(46vh, 420px);
    }
  }
  .hero .container { width: min(1120px, calc(100% - 30px)); }
  /*
   * 窄屏勿用 dvh：地址栏显隐时动态视口高度会变，头图高度跟变 → 下方整块文档位移，表现为「滑着滑着跳模块」。
   * svh 取「最小视口」为基准，不随 UI 条带动画抖动（无前缀回退 vh）。
   */
  .hero {
    height: 64vh;
    height: 64svh;
    min-height: min(460px, 100vh);
    min-height: min(460px, 100svh);
    max-height: min(720px, 100vh);
    max-height: min(720px, 100svh);
  }
  .menu {
    display: none;
  }

  .split-block, .plans-area .video-grid:not(.card-carousel__track), .shop-area .shop-photo-grid:not(.card-carousel__track), .bio-main, .shop-main, .album-row:not(.card-carousel__track) { grid-template-columns: 1fr; }
  .split-block {
    grid-template-rows: auto auto;
    gap: 0;
    min-height: 0;
    --works-shell-pad: 0px;
    --works-inner-r: max(14px, calc(var(--radius-xl) - 1px));
    padding: 0;
    border-radius: var(--radius-xl);
  }
  /* 叠放布局：单列 + 隐藏桌面分隔条；子项直接参与 #works 的纵向 flex */
  #works.split-block {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #works .works-pair-row {
    display: contents;
  }
  #works .left-list {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    --works-list-gutter: 14px;
  }
  #works .focus-card {
    flex: 0 1 auto;
    width: 100%;
  }
  #works .work-player-frame {
    border-radius: 0 0 var(--works-inner-r) var(--works-inner-r);
  }
  .works-resizer {
    display: none !important;
  }
  .left-list {
    border-radius: var(--works-inner-r) var(--works-inner-r) 0 0;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  }
  .focus-card {
    border-radius: 0 0 var(--works-inner-r) var(--works-inner-r);
  }
  .left-list,
  .focus-card {
    min-height: 0;
    height: auto;
  }
  /* 手机：固定竖版比例 + 高度随宽走，与桌面「铺满左列」策略区分 */
  .bio-photo-card {
    align-self: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    aspect-ratio: 3 / 4;
    max-height: min(92vh, 680px);
  }
  .bio-copy {
    align-self: stretch;
  }
  .bio-area .container.bio-inset-inner,
  .shop-area .container.shop-inset-inner,
  .social-area .container.social-inset-inner { width: calc(100% - 16px); max-width: none; }
  .bio-main {
    padding: 14px 12px;
    gap: 16px;
  }
  .shop-inset-card .shop-main {
    padding: 4px 0 0;
    gap: 16px;
  }

  .hero-content {
    padding-bottom: clamp(34px, 9vmin, 76px);
  }
  /* 窄屏作品区：列表区取消 height:0 伸缩陷阱，保证曲目可见；播放器仅用宽×16:9 推导高度，避免 max-height 与比例打架导致 iframe 纵向拉伸 */
  #works .song-list-scroll {
    border-radius: max(0px, calc(var(--works-inner-r) - 1px)) max(0px, calc(var(--works-inner-r) - 1px)) 0 0;
    flex: 0 1 auto;
    height: auto;
    min-height: min(200px, 42vh);
    max-height: min(48vh, 440px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    direction: ltr;
  }
  #works .left-list li:first-child {
    border-top-left-radius: max(0px, calc(var(--works-inner-r) - 1px));
    border-top-right-radius: max(0px, calc(var(--works-inner-r) - 1px));
  }
  #works .work-player-wrap {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }
  #works .work-player-aspect {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
    /* 窄屏随屏宽变高，避免「框过大」或比例失控 */
    max-height: min(72vh, calc(100vw * 9 / 16));
    margin-inline: 0;
    align-self: stretch;
    border-radius: 0;
  }
  #works .focus-card {
    height: auto;
  }
  #works .left-list {
    height: auto;
  }
  .plans-area .video-grid article img,
  .album-row img {
    height: 170px;
  }
  .shop-area .shop-photo-grid article img {
    height: 170px;
  }
  .hero::after { display: none; }
}

/* 作品区：小屏 — 列表在上、播放器在下（与 DOM 顺序一致，显式 order 防回归） */
@media (max-width: 768px) {
  #works.split-block {
    flex-direction: column;
    align-items: stretch;
  }
  #works .left-list {
    order: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #works .focus-card {
    order: 2;
    min-height: 0;
  }
  #works .song-list-scroll {
    min-height: min(180px, 36vh);
    max-height: min(44vh, 360px);
  }
  .shop-area .shop-photo-grid:not(.card-carousel__track) {
    grid-template-columns: 1fr;
  }
  .shop-copy-inner {
    padding: 18px 16px;
  }
  .shop-photo-strip__head {
    margin-bottom: 18px;
  }
  /*
   * 窄屏：横向轮播内图片须同高，否则每张图比例不一 → 卡片整体高低不齐。
   * height:auto+contain 仅用于非轮播网格；轮播轨道内仍用固定高度 + cover。
   */
  .plans-area .video-grid:not(.card-carousel__track) article img,
  .album-row:not(.card-carousel__track) img,
  .shop-area .shop-photo-grid:not(.card-carousel__track) article img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center center;
    background: #e8edf5;
  }
  .plans-area .video-grid.card-carousel__track article img,
  .album-row.card-carousel__track img,
  .shop-area .shop-photo-grid.card-carousel__track article img {
    display: block;
    width: 100% !important;
    height: 200px !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center center;
    /* 勿用 #e8edf5：会在图底/圆角处透出浅蓝块，被看成「透明蓝框/折角」 */
    background-color: #fff;
  }
  .plans-area .video-grid article:hover img,
  .album-row article.album-card:hover img,
  .album-row a.album-card:hover img,
  .shop-area .shop-photo-grid article:hover img {
    transform: none;
  }
}

/* 桌面：单行 grid。行高由右栏 16:9 视频区主导（JS 设 --works-pair-h），左栏长列表在栏内滚动，避免把整行撑高导致右栏黑底 */
@media (min-width: 1281px) {
  /* 16:9 用 aspect-ratio 单一路径推导高宽，避免 padding 占位与 iframe 实际像素链不一致导致哔哩嵌入被横向拉畸 */
  #works .work-player-aspect {
    position: relative;
    box-sizing: border-box;
    /* 必须吃满右栏宽度；勿用 min(100%, hmax*16/9) 人为限宽，否则宽屏两侧露大块深色 */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    padding: 0;
    margin-inline: auto;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: center;
    border-radius: 0 var(--works-inner-r) var(--works-inner-r) 0;
    overflow: hidden;
    background: #0b0f14;
    line-height: 0;
    max-height: var(--works-player-hmax);
  }
  #works.split-block {
    --works-edge: rgba(148, 163, 184, 0.42);
  }
  #works .works-pair-row {
    display: grid;
    grid-template-columns: minmax(220px, 34%) 10px minmax(0, 1fr);
    grid-template-rows: minmax(0, auto);
    width: 100%;
    min-height: 0;
    align-items: stretch;
    justify-items: stretch;
  }
  #works .works-pair-row.works-row--video-led {
    height: var(--works-pair-h);
    min-height: var(--works-pair-h);
    box-sizing: border-box;
    overflow: visible;
  }
  #works .works-pair-row .left-list {
    flex: initial;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  #works .works-pair-row .focus-card {
    flex: initial;
    min-width: 0;
  }
  #works .works-pair-row > .left-list {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
    border: 1px solid var(--works-edge);
    border-right: none;
    border-radius: var(--works-inner-r) 0 0 var(--works-inner-r);
  }
  #works .works-pair-row > .works-resizer {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    /* 与整站浅蓝壳体一致：柔渐变 + 内高光，避免深色硬边「一刀切」 */
    background: linear-gradient(
      90deg,
      rgba(241, 247, 255, 0.98) 0%,
      rgba(228, 237, 248, 0.92) 38%,
      rgba(199, 214, 234, 0.55) 52%,
      rgba(100, 116, 139, 0.28) 82%,
      rgba(30, 41, 59, 0.88) 100%
    );
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.5),
      inset -1px 0 0 rgba(99, 102, 241, 0.07);
  }
  #works .works-pair-row > .focus-card {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 0;
    align-self: stretch;
    overflow: visible;
    border: 1px solid var(--works-edge);
    border-left: none;
    border-radius: 0 var(--works-inner-r) var(--works-inner-r) 0;
  }
  /* 不纵向伸展：否则 focus-card 被拉满行高时 frame 填满剩余空间 → 视频下大块黑底 */
  #works .work-player-frame {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    width: 100%;
  }
  #works .work-player-wrap {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
  }
  #works .song-list-scroll {
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 勿对哔哩 iframe 做 scale 裁切：会上下裁掉字幕/画面；黑边与完整画面不可兼得时保留完整画面 */
}

/* 前台「内容管理」密码弹层（独立于 #page-admin） */
body.admin-gate-open {
  overflow: hidden;
}
.admin-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.admin-gate-modal[hidden] {
  display: none !important;
}
.admin-gate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-gate-modal__panel {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: min(90vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  border-radius: var(--radius-xl, 22px);
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border: 1px solid rgba(214, 223, 239, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 25px 50px -12px rgba(30, 41, 59, 0.28);
}
.admin-gate-modal__accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
  background: linear-gradient(90deg, #22d3ee, #6366f1, #a78bfa);
  border-radius: var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0;
}
.admin-gate-modal__head {
  text-align: center;
  padding: 22px 24px 6px;
}
.admin-gate-modal__head h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.admin-gate-modal__sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 26em;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}
.admin-gate-modal__body {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px 24px 0;
  box-sizing: border-box;
}
.admin-gate-modal__body label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft, #9aa5b5);
  margin-bottom: 8px;
}
.admin-gate-modal__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #d3dceb;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.35;
  box-sizing: border-box;
  background: #fbfcff;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-gate-modal__input::placeholder {
  color: #a8b4c8;
}
.admin-gate-modal__input:hover {
  border-color: #b8c5dc;
}
.admin-gate-modal__input:focus {
  outline: none;
  border-color: #7c8cff;
  box-shadow: 0 0 0 3px rgba(115, 135, 255, 0.22);
  background: #fff;
}
.admin-gate-modal__err {
  margin: 10px 0 0;
  min-height: 1.35em;
  font-size: 12px;
  color: #c62828;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.admin-gate-modal__err[hidden] {
  display: none !important;
}
.admin-gate-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}
.admin-gate-btn {
  min-height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-gate-btn:active {
  transform: scale(0.98);
}
.admin-gate-btn--ghost {
  border: 1px solid #d5deef;
  color: #3d4f6f;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06);
}
.admin-gate-btn--ghost:hover {
  background: #f4f7fd;
  border-color: #c5d0e8;
}
.admin-gate-btn--primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #4f67ff 0%, #6366f1 55%, #7c3aed 100%);
  box-shadow: 0 4px 14px rgba(79, 103, 255, 0.35);
}
.admin-gate-btn--primary:hover {
  box-shadow: 0 6px 18px rgba(79, 103, 255, 0.42);
}

/* 管理后台：数据同步调试开关 */
.admin-sync-debug-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
}
.admin-sync-debug-label input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #6366f1;
}

/*
 * 卡片轮播 · 手机兜底（必须靠后）：单卡宽由 script 写满视口；保留 x mandatory snap + gap:0，避免手滑停在两卡之间、露上一张边。
 * 与桌面 translateZ(0) 解耦：窄屏去掉合成层，减轻右侧箭头与横滑层命中顺序问题。
 */
@media (max-width: 768px) {
  .card-carousel__viewport {
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
  }
  .card-carousel__viewport .card-carousel__track > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .card-carousel__nav {
    z-index: 50;
    position: relative;
  }
  .card-carousel__viewport .card-carousel__track {
    gap: 0 !important;
    column-gap: 0 !important;
  }
}