/* ==========================================================================
   收藏库 v2.0 · 组件库（Component Library）
   --------------------------------------------------------------------------
   所有数值严格对应 Figma「收藏馆-简约UI」自动布局参数（见 设计数据可读存档.md）
   本文件只写结构与尺寸，颜色/圆角/间距一律引用 tokens.css 变量
   状态约定：:hover 悬停 / :active 点击 / [disabled]|[class*=is-disabled] 置灰(50%)
   演示用冻结类：.is-hover（悬停态快照） .is-press（点击态快照） .is-active（选中态）
   ========================================================================== */

/* ==========================================================================
   1. 图标
   ========================================================================== */

/* 图标通用盒（设计盒 24）
   用法 A（推荐，外部文件 + CSS 控色）：<i class="ck-icon ck-icon--filter"></i>
     —— 修改 assets/icons/*.svg 即全局生效，颜色跟随 color
   用法 B（内联 SVG）：<svg class="ck-icon">…</svg>（fill/stroke 用 currentColor） */
.ck-icon {
  display: inline-block;
  width: var(--size-icon);
  height: var(--size-icon);
  flex: none;
  color: var(--c-text);        /* 默认图标色 #626D80 */
}
/* mask 模式：外部 SVG → 单色跟随 currentColor */
i.ck-icon {
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ck-icon--14 { width: 14px; height: 14px; }
.ck-icon--16 { width: 16px; height: 16px; }
.ck-icon--18 { width: 18px; height: 18px; }

/* 16 个功能图标映射（assets/icons/*.svg；v2.7 全量替换 + 新增 info / search） */
.ck-icon--link        { --icon: url("../assets/icons/link.svg"); }
.ck-icon--tag         { --icon: url("../assets/icons/tag.svg"); }
.ck-icon--filter      { --icon: url("../assets/icons/filter.svg"); }
.ck-icon--filter-off  { --icon: url("../assets/icons/filter-off.svg"); }
.ck-icon--triangle    { --icon: url("../assets/icons/triangle.svg"); }
.ck-icon--nav         { --icon: url("../assets/icons/nav.svg"); }
.ck-icon--nav-collapse{ --icon: url("../assets/icons/nav-collapse.svg"); }
.ck-icon--category    { --icon: url("../assets/icons/category.svg"); }
.ck-icon--reset       { --icon: url("../assets/icons/reset.svg"); }
.ck-icon--edit        { --icon: url("../assets/icons/edit.svg"); }
.ck-icon--plus        { --icon: url("../assets/icons/plus.svg"); }
.ck-icon--trash       { --icon: url("../assets/icons/trash.svg"); }
.ck-icon--bookmark    { --icon: url("../assets/icons/bookmark.svg"); }
.ck-icon--close       { --icon: url("../assets/icons/close.svg"); }  /* v2.5 大卡片弹窗关闭按钮 */
.ck-icon--info        { --icon: url("../assets/icons/info.svg"); }   /* v2.7 版本信息入口 */
.ck-icon--search      { --icon: url("../assets/icons/search.svg"); } /* v2.7 筛选栏搜索框前置图标 */

/* hidden 兜底：设了 display 的 flex 容器会覆盖 UA 的 display:none */
.ck-seg[hidden], .ck-panel[hidden], .ck-btn[hidden], .ck-input[hidden],
.ck-tagrow[hidden], .ck-dialog__slot[hidden] { display: none !important; }

/* ==========================================================================
   2. 按钮（三档 × 强调开关 × 四状态）
   小 32/r8/图标14    中 40/r12/图标16    大 48/r16/图标18
   ========================================================================== */

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                                  /* 中档 图标-文字间距 */
  height: var(--size-ctrl-md);               /* 40 */
  padding: 0 20px;                           /* 无图标：20/12 */
  border-radius: var(--r-lg);                /* 12 */
  background: var(--c-bg);
  color: var(--c-subtitle);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .1s ease, color .1s ease, opacity .1s ease, transform .1s ease;
}
/* 图标在左：左内边距收窄；图标在右：右内边距收窄（自动适配，无需额外类）
   约定：图标+文字混合按钮，文本用 <span> 包裹，使图标成为唯一 first/last 判定；
   :not 保护「唯一图标同时 first+last」（如仅图标按钮）不被误伤 */
.ck-btn:has(.ck-icon:first-child:not(:last-child)) { padding-left: 16px; }
.ck-btn:has(.ck-icon:last-child:not(:first-child))  { padding-right: 16px; }
.ck-btn .ck-icon { width: 16px; height: 16px; color: inherit; }

/* 状态矩阵（强调-off）；:hover 见文件末触屏 hover 闸门 */
.ck-btn.is-hover { background: var(--c-hover); }
.ck-btn:active, .ck-btn.is-press { background: var(--c-stroke); transform: scale(.98); }   /* PRD §4.9 按压微反馈（大/中/小三档共用基类） */

/* 强调-on（深底） */
.ck-btn--primary { background: var(--c-title); color: var(--c-surface); }
.ck-btn--primary.is-hover { background: var(--c-subtitle); }
.ck-btn--primary:active, .ck-btn--primary.is-press { background: var(--c-title); }

/* 小按钮档 32/r8/图标14 */
.ck-btn--sm {
  gap: 6px;
  height: var(--size-ctrl-sm);
  padding: 0 16px;                           /* 无图标：16/12 */
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
.ck-btn--sm:has(.ck-icon:first-child) { padding-left: 12px; }
.ck-btn--sm:has(.ck-icon:last-child)  { padding-right: 12px; }
.ck-btn--sm .ck-icon { width: 14px; height: 14px; color: inherit; }

/* 大按钮档 48/r16/图标18 */
.ck-btn--lg {
  gap: 10px;
  height: var(--size-ctrl-lg);
  padding: 0 24px;                           /* 无图标：24/15 */
  border-radius: var(--r-xl);
}
.ck-btn--lg:has(.ck-icon:first-child) { padding-left: 20px; }
.ck-btn--lg:has(.ck-icon:last-child)  { padding-right: 20px; }
.ck-btn--lg .ck-icon { width: 18px; height: 18px; color: inherit; }

/* 仅图标（正方形 + 四边等距） */
.ck-btn--icon.ck-btn--icon       { width: var(--size-ctrl-md); padding: 0; }  /* 40x40 pad12 */
.ck-btn--sm.ck-btn--icon         { width: var(--size-ctrl-sm); padding: 0; }  /* 32x32 pad9 */
.ck-btn--lg.ck-btn--icon         { width: var(--size-ctrl-lg); padding: 0; }  /* 48x48 pad15 */

/* 文字色随强调开关（深底浅字） */
.ck-btn--primary .ck-icon { color: inherit; }

/* 下拉触发按钮（表单整行）：左文字 + 右三角，内边距 12/16 */
.ck-btn--select {
  justify-content: space-between;
  width: 100%;
  padding: 0 16px 0 12px;
}

/* 小按钮内的贴纸图标（位图 img）14x14：内边距收为 12/16 */
.ck-chip-icon { width: 14px; height: 14px; flex: none; object-fit: contain; }
.ck-btn--sm:has(.ck-chip-icon) { padding: 0 16px 0 12px; }

/* 描边变体（标签多选按钮等）：INSIDE 1px #B1B9CB */
.ck-btn--outline { box-shadow: inset 0 0 0 1px var(--c-stroke); }

/* 危险操作（删除确认等）：红底白字（PRD 未定义 danger 状态色，悬停/按压由错误色变量加深派生） */
.ck-btn--danger { background: var(--c-danger); color: var(--c-white); }
.ck-btn--danger.is-hover { background: color-mix(in srgb, var(--c-danger), #000 10%); }
.ck-btn--danger:active, .ck-btn--danger.is-press { background: color-mix(in srgb, var(--c-danger), #000 18%); }

/* ==========================================================================
   3. Tab按钮 + TAB 容器（状态筛选分段器）
   ========================================================================== */

.ck-seg {                                     /* TAB 容器 144x40 r12 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 4px;
  background: var(--c-bg);
  border-radius: var(--r-lg);
}

.ck-seg-btn {                                 /* Tab按钮 66x32 r8 pad20/9 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-ctrl-sm);
  padding: 0 20px;
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-subtitle);
  font: var(--fw-regular) var(--fs-13)/var(--lh-13) var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}
.ck-seg-btn.is-hover { background: var(--c-hover); }
.ck-seg-btn.is-active {                     /* 选中：深底 + 600 字重（按稿 30 高，槽内垂直居中 → y5） */
  height: 30px;
  background: var(--c-title);
  color: var(--c-surface);
  font-weight: var(--fw-semibold);
}

/* v2.6 评分 TAB 切图化（PRD §5，Figma 5:1111）：按钮 68×32 内嵌评价切图 60×30 + 水平 padding4；
   选中态沿用分段器语义——由 is-active 底色令牌表达，切图本身单态不变（§5.2） */
.ck-seg-btn--grade {
  width: 68px;
  padding: 0 4px;
}
.ck-seg-btn--grade.is-active { height: var(--size-ctrl-sm); }   /* 保持 32 高，不沿用文字档 30（切图 30 高需上下各 1 余量） */
.ck-seg-grade-img {
  width: 60px; height: 30px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ==========================================================================
   4. 一级TAB（顶栏大类切换 120x88）
   布局严格按稿：光晕(3,32,114x46)+光斑(17,71,86x7)+图标+文字 绝对定位
   选中：图标 60x60(8,11) 文字 18/600 #222933(72,31)
   未选：图标 24x24(26,32) 文字 18/400 #404A59(58,31)
   切换动画（Figma 智能动画）：图标缩放+位移、文字位移变色、
   灯光切图从中心向两侧展开+淡入（v2.3 clip-path，不拉伸光斑），
   统一 spring 回弹缓动（先急后缓）
   ========================================================================== */

.ck-toptab {
  position: relative;
  width: 120px;
  height: 88px;
  cursor: pointer;
}

/* 选中态灯光切图（v2.3：140x88 @3x 原图，左右各溢出 TAB 10px，容器不裁切）：
   未选时收拢至中缝（clip-path 左右各 50%）+ 透明；从中心向两侧展开（clip-path 不拉伸光斑）；
   层级：灯光图位于 TAB 之上、图标与文字之下（DOM 顺序保证） */
.ck-toptab__active {
  position: absolute;
  left: -10px; top: 0;
  width: 140px; height: 88px;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path var(--dur-spring) var(--ease-spring),
              opacity var(--dur-spring) var(--ease-spring);
}

.ck-toptab__icon {                            /* 拟物大图标（位图 img）：24↔60 缩放 */
  position: absolute;
  left: 26px; top: 32px;
  width: 24px; height: 24px;
  object-fit: contain;
  transition: left var(--dur-spring) var(--ease-spring),
              top var(--dur-spring) var(--ease-spring),
              width var(--dur-spring) var(--ease-spring),
              height var(--dur-spring) var(--ease-spring);
}
.ck-toptab__label {
  position: absolute;
  left: 58px; top: 31px;
  font: var(--fw-regular) var(--fs-18)/var(--lh-25) var(--font);
  color: var(--c-subtitle);
  white-space: nowrap;
  transition: left var(--dur-spring) var(--ease-spring),
              color .25s ease;
}

.ck-toptab.is-active .ck-toptab__active { opacity: 1; clip-path: inset(0 0 0 0); }
.ck-toptab.is-active .ck-toptab__icon { left: 8px; top: 11px; width: 60px; height: 60px; }
.ck-toptab.is-active .ck-toptab__label {
  left: 72px;
  font-weight: var(--fw-semibold);
  color: var(--c-title);
}
/* 未选中悬停：文字加深（轻量反馈，不改变布局）→ 见文件末触屏 hover 闸门 */

/* ==========================================================================
   5. 左侧导航（容器 164/r12 + 组标题 + 导航选项 132x32/r6）
   ========================================================================== */

.ck-sidenav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--layout-nav-w);
  flex: none;
  padding: var(--layout-pad);
  overflow-y: auto;
  overflow-x: hidden;                          /* v2.8.1：收起时裁切固定宽度的内部内容 */
  background: var(--c-bg);
  border-radius: var(--r-lg);
  /* v2.8.1 收起 / 展开动画：宽度与内边距收拢 + 淡出，负外边距抵掉内容区 24 间距 */
  transition: width .22s var(--ease-modal-in),
              padding .22s var(--ease-modal-in),
              margin-right .22s var(--ease-modal-in),
              opacity .16s ease;
}

.ck-sidenav__slot {                            /* 组容器：组间距 18 */
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: none;                                  /* v2.8.1：容器收窄时内容保持原宽，从右缘裁切 */
  width: calc(var(--layout-nav-w) - var(--layout-pad) * 2);
}

.ck-sidenav__group {                           /* 组：标题 + 选项列表 gap4 */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ck-sidenav__title {                           /* 组标题 H3：14/600/16（2026-09-21 标题体系定稿；原 16/600/18） */
  font: var(--fw-semibold) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-title);
  white-space: nowrap;                         /* 文本超长省略（v2.1.1） */
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-nav-item {                                 /* 导航选项 128x32 r6 pad16/8→左16右8（v2.1.1；v2.7.1 容器 160 后自然收窄） */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--size-ctrl-sm);
  padding: 0 8px 0 16px;                       /* 左16右8（v2.1.1）：文字可用宽度 108 → 104（v2.7.1） */
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  text-align: left;
  cursor: pointer;
  transition: background-color .1s ease;
}
/* 文本超长省略（v2.1.1）：flex 容器上的 text-overflow 不生效，省略规则需落在文本子项上 */
.ck-nav-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-nav-item.is-hover { background: var(--c-hover); }

/* 选中态：前置 4x16 r6 竖线 + 深色文字（底色不变） */
.ck-nav-item.is-active { color: var(--c-title); }
.ck-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 16px;
  border-radius: var(--r-sm);
  background: var(--c-subtitle);
}

/* ==========================================================================
   6. 多选框（16x16 r4）
   ========================================================================== */

.ck-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 16px; height: 16px;
  flex: none;
  margin: 0;
  border: 1.33px solid var(--c-stroke);        /* 未勾选描边 #B1B9CB */
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  transition: background-color .1s ease, border-color .1s ease;
}
.ck-check:checked {
  border-color: var(--c-title);
  background: var(--c-title) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 2.6L2.9 4.4L7 .6' fill='none' stroke='%23FAFBFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 5px no-repeat;
}
/* 悬停态（未选/已选）→ 见文件末触屏 hover 闸门 */

/* ==========================================================================
   7. 输入框（40/r12/pad12/gap10）
   ========================================================================== */

.ck-input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--size-ctrl-md);
  padding: 0 12px;
  border: 1px solid transparent;               /* 占位边框，激活时着色 */
  border-radius: var(--r-lg);
  background: var(--c-bg);
  color: var(--c-subtitle);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  width: 100%;
}
.ck-input::placeholder { color: var(--c-muted); }
/* 输入框无 hover 态（v2.1.2 移除：hover 描边会覆盖 focus 激活描边） */
.ck-input:focus,
.ck-input.is-focus { border-color: var(--c-title); }
/* 激活态光标 2x16 r3 #222933 */
.ck-input { caret-color: var(--c-title); }

/* ==========================================================================
   8. 选项面板 + 下拉选项（单选/多选）
   ========================================================================== */

.ck-panel {                                    /* 选项面板 138/r12/pad8/gap4 + 投影（按稿无描边） */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 138px;
  padding: 8px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px rgba(45, 50, 57, .12);
}

.ck-option {                                   /* 下拉选项 32/r8/pad8/8/12/8 */
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--size-ctrl-sm);
  padding: 0 12px 0 8px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .1s ease;
}
.ck-option.is-hover { background: var(--c-bg); }
.ck-option .ck-icon { width: 16px; height: 16px; }

/* 多选：勾选后文字加深 */
.ck-option.is-active { color: var(--c-title); }

/* 单选（评分等）：有图标时紧凑间距 4 */
.ck-option--single { background: var(--c-surface); }
.ck-option--single:has(.ck-icon) { gap: 4px; }

/* 警告（如删除题材）：红字 + 红底悬停；图标跟随字色（mask 填充继承） */
.ck-option--danger { color: var(--c-danger); }
.ck-option--danger .ck-icon { color: inherit; }
.ck-option--danger.is-hover { background: var(--c-danger-soft); }

/* ==========================================================================
   9. 标签编辑行（40/r12/pad12/12/10/12 两端分散）
   ========================================================================== */

.ck-tagrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--size-ctrl-md);
  padding: 0 10px 0 12px;
  border: 0;                                    /* button 元素 reset（div 使用无副作用） */
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: left;
  cursor: pointer;
  transition: background-color .1s ease;
}
.ck-tagrow:is(button) { font: inherit; width: 100%; }
.ck-tagrow.is-hover { background: var(--c-bg); }

.ck-tagrow__left  { display: flex; align-items: center; min-width: 0; }
.ck-tagrow__right { display: flex; align-items: center; gap: 8px; }

/* 贴纸图标：与名称间距 8（名称与计数间距 0） */
.ck-tagrow__icon  { width: 16px; height: 16px; margin-right: 8px; object-fit: contain; flex: none; }
.ck-tagrow__name  {                                 /* 14/400 #222933 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-tagrow__count {                                 /* 计数 14/400 #8892A6 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
  flex: none;
}
.ck-tagrow__add {                                   /* “+ 添加系列 / + 添加标签”行文字 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
}
.ck-tagrow__action {                                /* 编辑/删除图标 16 #626D80 */
  color: var(--c-text);
  cursor: pointer;
}
.ck-tagrow__action .ck-icon { display: block; }
/* .ck-tagrow__action:hover → 见文件末触屏 hover 闸门 */

/* ==========================================================================
   10. 弹窗（r20/pad24/gap24/底 #FAFBFD + 遮罩）
   ========================================================================== */

.ck-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-mask);                   /* v2.8.0：50% 纯黑 */
  -webkit-backdrop-filter: blur(8px);          /* v2.8.0：蒙层背后 8px 模糊（按指令） */
  backdrop-filter: blur(8px);
}
/* v2.8.0：弹窗打开时锁页面滚动（iPad 上 body 单独 overflow:hidden 不够，html 一起锁） */
html.ck-modal-open,
body.ck-modal-open { overflow: hidden; overscroll-behavior: none; }

/* --------------------------------------------------------------------------
   v2.8.1 弹窗开合规范（所有经 UI.openModal 打开的弹窗自动继承，新增弹窗不必单独写动画）
   - 遮罩：淡入淡出（in 200ms / out 150ms），与大卡片、常规弹窗一致
   - 弹窗：出现 opacity 0→1 + translateY(12px)→0 + scale(.9)→1（缓出 200ms）；
           消失 opacity→0 + translateY(6px) + scale(.94)（150ms 收尾）
   - 关闭流程：UI.close() 先给遮罩加 .is-closing，等退场动画结束（或 400ms 兜底）再移除 DOM
     并解锁页面滚动；期间 is-closing 屏蔽指针事件，避免连点重复触发
   - 大卡片弹窗保留自己的 420ms 弹性入场（.ck-dialog--bigcard），退场统一走下面的规则
   - 减少动态偏好下全部关闭动画，立即移除
   -------------------------------------------------------------------------- */
.ck-overlay {
  animation: ck-mask-in var(--dur-modal-in) var(--ease-modal-in) both;
}
.ck-overlay.is-closing {
  animation: ck-mask-out var(--dur-modal-out) var(--ease-modal-out) both;
  pointer-events: none;
}
@keyframes ck-mask-in  { from { opacity: 0; } }
@keyframes ck-mask-out { to   { opacity: 0; } }

.ck-dialog {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 360px;                                /* 默认 360 宽 */
  padding: 24px;
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  transform-origin: 50% 50%;
  animation: ck-dialog-in var(--dur-modal-in) var(--ease-modal-in) both;
}
.ck-overlay.is-closing .ck-dialog {
  animation: ck-dialog-out var(--dur-modal-out) var(--ease-modal-out) both;
}
@keyframes ck-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
}
@keyframes ck-dialog-out {
  to { opacity: 0; transform: translateY(6px) scale(.94); }
}
.ck-dialog--lg { width: 653px; }               /* 新增/编辑条目弹窗 */
.ck-dialog--wide { width: 514px; }             /* 标签管理（宽） */

.ck-dialog__title {                            /* 标题 18/600/18（高度即 18，勿加 margin/height） */
  margin: 0;
  font: var(--fw-semibold) var(--fs-18)/var(--lh-18) var(--font);
  color: var(--c-title);
}
.ck-dialog__slot {                             /* 内容槽：列间距 12 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ck-dialog__footer {                           /* 按钮区：右对齐 gap12 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ck-dialog__hint {                             /* 说明文字 14/400 #626D80 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-text);
}
.ck-dialog__label {                            /* 字段小标签 14/400 #404A59 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-subtitle);
}
/* v2.6：.ck-dialog__score 已删除（唯一消费方 gradeBadge 随详情弹窗移除，评分改切图表达，PRD §8） */

/* 条目弹窗（653 宽）：左海报槽 + 右表单 */
.ck-dialog__split { display: flex; gap: 16px; }
.ck-dialog__form  { display: flex; flex-direction: column; gap: 16px; flex: 1; }

.ck-upload {                                   /* 海报上传槽 180x240/r12 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px; height: 240px;
  flex: none;
  background: var(--c-bg);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
}
.ck-upload .ck-icon { width: 24px; height: 24px; color: var(--c-stroke); }
.ck-upload__img { width: 100%; height: 100%; object-fit: cover; }
.ck-upload--static { cursor: default; }          /* 详情弹窗展示槽：不可点击 */
/* 编辑角标：有海报时才显示（JS 切换 has-poster） */
.ck-upload__badge {                            /* 32x32 r12/0/12/0 遮罩 */
  display: none;
  position: absolute;
  right: 0; bottom: 0;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--c-mask);
  border-radius: var(--r-lg) 0 var(--r-lg) 0;
}
.ck-upload.has-poster .ck-upload__badge { display: flex; }
.ck-upload__badge .ck-icon { width: 16px; height: 16px; color: var(--c-surface); }

/* ==========================================================================
   11. 票根卡片（136x216）—— v2.3 皮肤化：卡面为切图 assets/cards/{大类}.png
   海报槽(20,20,96x128,r4) · 卡面切图(0,0,136x216 满幅，自带透明海报窗)
   标题(20,170,96x28) · 贴纸行(11,134,114x24 右对齐) · 评分(13,5,28x17)
   投影沿卡面 PNG 轮廓 drop-shadow（禁用 box-shadow：会暴露矩形轮廓）
   ========================================================================== */

.ck-ticket {
  position: relative;
  z-index: 1;                                  /* 低于层板(z2)，层板压住卡片底部 1~2px（v2.7.1） */
  width: 136px;
  height: 216px;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 4px 4px color-mix(in srgb, var(--c-title) 15%, transparent));  /* v2.3.2 静态投影：标题色 15% 恒定（不参与 hover 插值），沿 PNG 轮廓 */
  transition: transform .18s ease, filter .18s ease;   /* hover 投影增强与上浮同步 */
}
/* .ck-ticket:hover（上浮 + 完成按钮浮现）→ 见文件末触屏 hover 闸门 */
.ck-ticket.dragging { opacity: .35; transform: scale(.96); }
/* v2.8.0 按压弹性（PRD §2）：按下 110ms 快速跟上，松手 280ms 弹性回弹；
   拖拽中不响应（.dragging 排除）；hover 叠加规则见文件末 hover 闸门 */
.ck-ticket.is-pressing:not(.dragging) { transform: scale(.96); transition: transform 110ms ease-out; }
.ck-ticket.is-rebound:not(.dragging) { transition: transform 280ms var(--ease-spring); }
/* 拖拽插入位置竖线：4 宽（与网格间距一致），填满相邻卡片间隙 */
.ck-ticket.drop-before::before,
.ck-ticket.drop-after::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--c-title);
  border-radius: 2px;
  z-index: 5;
}
.ck-ticket.drop-before::before { left: -4px; }
.ck-ticket.drop-after::after   { right: -4px; }
.ck-ticket.drop-before,
.ck-ticket.drop-after { z-index: 3; }           /* 拖拽落点线仍需高于层板（PRD §3.3） */

/* v2.5：ck-ticket__done 快捷完成按钮已删除（PRD §3.2）——状态变更唯一入口为编辑弹窗状态分段器 */
.ck-ticket.is-pending { outline: 2px solid var(--c-score); outline-offset: -2px; }

.ck-ticket__media {                            /* 海报媒体槽 96x128 (20,20)（v2.3：下移 6） */
  position: absolute;
  left: 20px; top: 20px;
  width: 96px; height: 128px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg);
}
/* 加载占位（v2.2：旋转 spinner → 居中纯文案；槽内含 img 时展示，完成/失败后隐藏） */
.ck-ticket__media:has(img)::before {
  content: "loading";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-subtitle);
  opacity: .5;
}
.ck-ticket__media.poster-ok::before,
.ck-ticket__media.poster-failed::before { display: none; }

.ck-ticket__poster {                           /* 海报图（槽内填充，加载完渐显） */
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.ck-ticket__poster.loaded { opacity: 1; }

/* v2.2 LQIP：详情弹窗缩略图模糊垫底（静态，无动画），封面原图到达后 250ms 淡入覆盖 */
.ck-ticket__poster--lqip {
  opacity: 1;
  filter: blur(14px);
  transform: scale(1.1);            /* 模糊边缘外扩，避免透出底色 */
}
.ck-ticket__poster--full { position: absolute; inset: 0; }

/* v2.7.1 海报兜底图（PRD §2）：无海报 / 加载失败时直显，不淡入、不显示 loading 文案 */
.ck-ticket__poster--ph,
.ck-ticket__poster.is-ph { opacity: 1; }
.ck-ticket__media:has(.ck-ticket__poster--ph)::before { display: none; }

/* v2.5：无图态由 .ck-ticket__media 自身 background:var(--c-bg) 承担浅背景色，
   v2.7.1 起无海报改为兜底图（PRD §1.1），浅背景仅作兜底图加载前的垫底 */

.ck-ticket__face {                             /* v2.3 卡面切图：满幅叠放于海报槽之上（自带透明海报窗） */
  position: absolute;
  inset: 0;
  width: 136px; height: 216px;
  pointer-events: none;
}

.ck-ticket__title {                            /* 标题 12/400/lh14 居中 96x28 (20,170)（v2.3：下移 6） */
  position: absolute;
  left: 20px; top: 170px;
  width: 96px;
  height: 28px;                                /* 固定文本框（2 行 × lh14）；文字上下左右居中（v2.1.1） */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-text);                        /* v2.3：#626D80（电影/综艺/动画浅色卡面默认） */
  text-align: center;
}
/* v2.3 深色卡面的大类标题色（其余文字样式不变） */
.ck-ticket--series .ck-ticket__title { color: var(--c-white); }   /* 剧集卡面 #FFFFFF */
.ck-ticket--game   .ck-ticket__title { color: var(--c-surface); } /* 游戏卡面 #FAFBFD */
.ck-ticket__title > span {                     /* 文本层：最多 2 行截断 */
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ck-ticket__mark {                             /* v2.7 搜索命中高亮（PRD §2.3）：橙色 40% 衬底，不做字重/字号变化 */
  padding: 0 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-score) 40%, transparent);
  color: inherit;
}

.ck-ticket__tags {                             /* 贴纸行：固定行框 114x24 (11,134) 右对齐——末枚贴行框右缘，不满 5 枚左侧留白（v2.3） */
  position: absolute;
  right: 11px; top: 134px;
  width: 114px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ck-ticket__tag {
  width: 24px; height: 24px;
  object-fit: contain;
}
.ck-ticket__tag + .ck-ticket__tag { margin-left: -6px; }

.ck-ticket__grade {                            /* v2.6 评价切图：左上角顶格 @0,0，60×30（小图档 120×60 的 @2x）；
                                                  层级第二层——状态覆层(z6)之下、标签行及其余内容层之上（PRD §3） */
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 30px;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
}
/* v2.6：原 .ck-ticket__score 文字评分（14/700 描边）已整体移除，由切图层取代（PRD §3.2 / §8） */

.ck-ticket__overlay {                          /* v2.5 状态覆层：z 序最顶，盖住卡面/文字/标签/评价切图（PRD §3.1） */
  position: absolute;
  inset: 0;
  width: 136px; height: 216px;
  pointer-events: none;                        /* 点击穿透到 .ck-ticket，保留打开大卡片弹窗 */
  z-index: 6;                                  /* 高于评价切图(z5)/标签/标题/卡面 */
}

/* ==========================================================================
   11.5 大卡片弹窗（v2.5 · Figma 帧 1:569，272×508）
   --------------------------------------------------------------------------
   替换 v2.4 详情弹窗；结构：外框垂直 gap36 → 卡本体 272×432 + 按钮行 192×40
   v2.8.0 验收后卡本体为三层：海报层(L0) → 卡面层（卡面 + 扫光 + 文字 + 标签 + 评分）→ 包装膜/状态覆层(L2)
   弹窗外框背景透明（覆盖于 --c-mask 遮罩之上），按钮走 on-dark 描边档
   ========================================================================== */

.ck-dialog--bigcard {                          /* 覆写 .ck-dialog：透明无内边距、宽 272、gap36 */
  width: 272px;
  padding: 0;
  gap: 36px;
  background: transparent;
  border-radius: 0;
  overflow: visible;                           /* 允许后续编辑弹窗预览卡破框溢出 */
  /* v2.8.0 入场弹性（PRD §3）：只缩放外层，避免逐帧重算卡本体 drop-shadow；
     v2.8.1：关闭走统一退场（.ck-overlay.is-closing .ck-dialog，140ms） */
  animation: ck-bigcard-in 420ms var(--ease-spring) both;
  transform-origin: 50% 50%;
}
@keyframes ck-bigcard-in {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.ck-bigcard {                                  /* 卡本体 272×432，相对定位承载三层（海报 / 卡面 / 包装膜） */
  --fx: 0;                                     /* v2.8.0 指针归一化坐标 −1~1（三层同源） */
  --fy: 0;
  position: relative;
  width: 272px;
  height: 432px;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--c-title) 25%, transparent));  /* 沿卡面 PNG 轮廓投影 */
  transform: perspective(900px) rotateX(calc(var(--fy) * 8deg)) rotateY(calc(var(--fx) * -8deg));
  transform-origin: 50% 50%;
  transition: transform 120ms linear;          /* 移动中平滑跟手；离开切 700ms 缓出回正 */
}
.ck-bigcard.is-resetting { transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }
.ck-bigcard.is-paused,                         /* 页签隐藏：暂停过渡，不累积 */
.ck-bigcard.is-paused .ck-bigcard__poster,
.ck-bigcard.is-paused .ck-bigcard__overlay,
.ck-bigcard.is-paused .ck-bigcard__sheen::before { transition: none; }
.ck-bigcard.is-sheen-flat { transform: none; } /* 低端设备降级开关：只动光带、不动卡片 */
.ck-bigcard.is-sheen-flat .ck-bigcard__poster,
.ck-bigcard.is-sheen-flat .ck-bigcard__overlay { transform: none; }

.ck-bigcard__poster-window {                   /* L0 海报层 192×256 @40,40，overflow hidden 裁切出血；与卡面同层同原点 */
  position: absolute;
  left: 40px; top: 40px;
  width: 192px; height: 256px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg);                     /* v2.5 无海报态浅背景（07-浅背景档，PRD §2.5） */
  z-index: 1;
}
.ck-bigcard.is-resetting .ck-bigcard__poster,
.ck-bigcard.is-resetting .ck-bigcard__overlay,
.ck-bigcard.is-resetting .ck-bigcard__sheen::before {
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.ck-bigcard__poster {                          /* 海报图满窗 192×256（R5 缩窗，R6 保留窗内位移）；
                                                  R7：窗内位移会露缝，按验收意见放大 1.1 留出 ≥3px 余量，
                                                  画面完整、标题不被裁，窗内位移照旧 */
  position: absolute;
  left: 0; top: 0;
  width: 192px; height: 256px;
  object-fit: cover;
  opacity: 0;
  transform: translate3d(calc(var(--fx) * 6px), calc(var(--fy) * 7px), 0) scale(1.1);
  transition: opacity .25s ease, transform 120ms linear;
}
.ck-bigcard__poster.loaded { opacity: 1; }
.ck-bigcard__poster--lqip {                    /* LQIP 缩略图模糊垫底 */
  opacity: 1;
  filter: blur(14px);
  transform: translate3d(calc(var(--fx) * 4px), calc(var(--fy) * 5px), 0) scale(1.08);
}
.ck-bigcard__poster--full { position: absolute; left: 0; top: 0; }
/* v2.7.1 海报兜底图（PRD §2.2）：无海报 / 加载失败直显，与真实海报同走出血规则 */
.ck-bigcard__poster--ph,
.ck-bigcard__poster.is-ph { opacity: 1; }

.ck-bigcard__face-layer {                      /* L1 卡面层：卡面 + 扫光 + 文字 + 标签 + 评分，与容器同平面同原点 */
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ck-bigcard__face {                            /* L1 卡面满幅切图（层内最底，透明海报窗露出下方海报） */
  position: absolute;
  inset: 0;
  width: 272px; height: 432px;
  pointer-events: none;
  z-index: 1;
}

.ck-bigcard__text {                            /* L1+ 文字带 192×60 @40,338，垂直 gap8 主轴居中 */
  position: absolute;
  left: 40px; top: 338px;
  width: 192px; height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
.ck-bigcard__title {                           /* 标题 600/16 lh=18，1~2 行截断 */
  width: 192px;
  font: var(--fw-semibold) var(--fs-16)/var(--lh-16) var(--font);
  color: var(--c-text);                        /* 默认 #626D80（电影/综艺/动画浅色卡面） */
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.ck-bigcard--series .ck-bigcard__title { color: var(--c-white); }   /* 剧集卡面 #FFFFFF（沿用 v2.3 大类差异） */
.ck-bigcard--game   .ck-bigcard__title { color: var(--c-surface); } /* 游戏卡面 #FAFBFD */
.ck-bigcard__notes {                           /* 备注 400/14 lh=16，最多 2 行（JS 先截断加省略号再包引号，PRD §5.1） */
  width: 192px;
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
  text-align: center;
  overflow: hidden;
  word-break: break-all;
}

.ck-bigcard__tags {                            /* L1.8 标签行 228×48 @22,268 右对齐；单枚 48×48 相邻重叠 12（步进 36） */
  position: absolute;
  left: 22px; top: 268px;
  width: 228px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 4;
}
.ck-bigcard__tag {
  width: 48px; height: 48px;
  object-fit: contain;
  flex: none;
}
.ck-bigcard__tag + .ck-bigcard__tag { margin-left: -12px; }

.ck-bigcard__grade {                           /* v2.6 评价切图：左上角顶格 @0,0，120×60（大图档 240×120 的 @2x）；
                                                  层级标签行之上、状态覆层之下（PRD §4，与小卡规则一致） */
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 60px;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   v2.8.0 彩虹箔光（验收意见 R3 / R4）
   来源：holo-card skill 渲染器的光谱函数 rainbow(t)=.52+.48cos(2π(t+[0,.33,.67]))，
        即「余弦色板」——技能唯一的彩虹预置。按周期采样成 CSS 渐变停靠点。
   R4：普通大卡改为中性银白扫光，彩虹只属于 holo 实验卡，两者一眼可分。
   叠加：.ck-bigcard__sheen::after 是跟随指针位置（--mx/--my）的白色高光，
        对应技能里的 glare=pow(1-length(p-view),5)；悬停才出现。
   R4：高光半径放大、透明度下调（光斑更柔更大，不压过卡面内容）。
   结构：.ck-bigcard__sheen 满幅容器（卡面层内 z2，卡面之上、文字/标签/评分之下），
        遮罩 = 卡面 PNG alpha（卡面切图自带海报窗挖空），箔光只落在框体、不盖海报画面。
   -------------------------------------------------------------------------- */
.ck-bigcard--movie   { --face-mask: url("../assets/cards-big/movie.png"); }
.ck-bigcard--series  { --face-mask: url("../assets/cards-big/series.png"); }
.ck-bigcard--variety { --face-mask: url("../assets/cards-big/variety.png"); }
.ck-bigcard--anime   { --face-mask: url("../assets/cards-big/anime.png"); }
.ck-bigcard--game    { --face-mask: url("../assets/cards-big/game.png"); }

.ck-bigcard__sheen {
  /* R4：单层遮罩 = 卡面 PNG 自身的 alpha（卡面切图本就挖空了海报窗），
     不再用 mask-composite 叠加/减去矩形——多遮罩层在 3D 变换/滤镜子树里会被
     Chrome 偶发忽略，导致彩虹光盖到海报上。单层遮罩不受影响。 */
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;                                  /* 悬停才淡入，静态不抢海报 */
  transition: opacity .28s ease;
  -webkit-mask-image: var(--face-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--face-mask);
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .ck-bigcard__sheen { display: block; }
}

.ck-bigcard__sheen::before {                   /* 220% 光泽画布：平移跟随指针，旋转改变光的方向 */
  content: "";
  position: absolute;
  left: -60%; top: -60%;
  width: 220%; height: 220%;
  /* R4：普通大卡中性银白扫光（无彩虹），彩虹仅 holo 实验卡持有 */
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .05) 5%,
    rgba(255, 255, 255, .16) 10%,
    rgba(255, 255, 255, .27) 16.7%,
    rgba(255, 255, 255, .32) 21%,
    rgba(255, 255, 255, .21) 26%,
    rgba(255, 255, 255, .10) 31%,
    rgba(255, 255, 255, .03) 36%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 100%);
  transform: translate3d(calc(var(--fx) * 96px), calc(var(--fy) * 116px), 0)
             rotate(calc(var(--fx) * 16deg - var(--fy) * 10deg));
  transition: transform 120ms linear;
  will-change: transform;
}

.ck-bigcard__sheen::after {                    /* 跟随指针的镜面高光（技能 glare）：位置由 --mx/--my 写入
                                                  R4：半径 110→170px、透明度整体下调，光斑更大更柔
                                                  R11：按小红书案例的「外部聚光」改为双层——内层小半径硬光点 + 外层大半径柔晕
                                                  R14：直径整体翻倍（96→192、180→360），透明度减半 */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(192px circle at var(--mx, 50%) var(--my, 42%),
      color-mix(in srgb, var(--c-white) 26%, transparent) 0%,
      color-mix(in srgb, var(--c-white) 5.5%, transparent) 52%,
      color-mix(in srgb, var(--c-white) 0%, transparent) 78%),
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 42%),
      color-mix(in srgb, var(--c-white) 13%, transparent) 0%,
      color-mix(in srgb, var(--c-white) 4%, transparent) 46%,
      color-mix(in srgb, var(--c-white) 0%, transparent) 74%);
  opacity: 0;
  transition: opacity .3s ease;
}

/* R11 闪卡材质（小红书案例方法）→ R13：回到 R11 的「整卡斜光带」结构；
   R14 再修三处：星纹固定在卡面不动、渐变首段归零并整体减半、指针白色高光放大减淡。
   1) 斜线纹换成五角星星纹（两组不同密度的星点平铺，蓝紫 / 冷蓝双色）；
   2) 整卡彩虹渐变改为蓝紫色阶（去掉绿、黄），整体透明度下调；
   3) 静止不抢海报，倾斜进入热区才显影。
   几何与 R11 一致：光带窗口是 200% 的斜向遮罩画布，靠 mask-position 随倾斜滑动，
   星点本身钉在卡面上，只有「显影窗口」在动。 */
.ck-bigcard__holo-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 星箔：星色取蓝紫系冷色（白卡面上靠明度差显影，不用混合模式） */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg fill='rgb(107,87,255)'%3E%3Cpath d='M20.0 10.5L21.9 15.5L27.1 15.7L23.0 19.0L24.4 24.1L20.0 21.1L15.6 24.1L17.0 19.0L12.9 15.7L18.1 15.5Z' fill-opacity='0.9'/%3E%3Cpath d='M72.1 36.2L73.1 43.2L79.9 45.0L73.6 48.1L74.1 55.1L69.1 50.1L62.6 52.7L65.8 46.4L61.3 41.0L68.3 42.2Z' fill-opacity='0.75'/%3E%3Cpath d='M35.2 68.6L37.1 72.0L40.9 71.6L38.3 74.4L39.8 78.0L36.3 76.3L33.4 78.9L33.9 75.0L30.6 73.0L34.4 72.3Z' fill-opacity='0.6'/%3E%3Cpath d='M88.2 79.9L88.3 84.5L92.5 86.2L88.2 87.7L87.8 92.2L85.1 88.6L80.6 89.6L83.3 85.9L80.9 82.0L85.2 83.4Z' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='rgb(76,140,255)'%3E%3Cpath d='M16.6 11.8L17.2 14.7L20.1 15.3L17.6 16.8L18.0 19.7L15.8 17.7L13.1 19.0L14.3 16.3L12.2 14.2L15.2 14.4Z' fill-opacity='0.8'/%3E%3Cpath d='M43.4 32.6L45.1 36.0L48.9 35.8L46.2 38.5L47.6 42.0L44.2 40.3L41.3 42.7L41.9 38.9L38.7 36.9L42.5 36.3Z' fill-opacity='0.65'/%3E%3Cpath d='M22.9 46.9L23.1 49.2L25.2 49.9L23.1 50.8L23.1 53.0L21.6 51.3L19.5 52.0L20.7 50.0L19.3 48.2L21.5 48.7Z' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 92px 92px, 58px 58px;
  background-position: center;                  /* R14：星纹固定在卡面上，不随指针视差移动 */
  /* 光带窗口：200% 斜向遮罩，中间实、两端虚；mask-position 随倾斜滑动 */
  -webkit-mask-image: linear-gradient(100deg,
    transparent 38%, rgba(0, 0, 0, .45) 44%, #000 50%, rgba(0, 0, 0, .45) 56%, transparent 62%);
  -webkit-mask-size: 200% 200%;
  -webkit-mask-position: calc(50% - var(--fx) * 46%) calc(50% - var(--fy) * 46%);
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(100deg,
    transparent 38%, rgba(0, 0, 0, .45) 44%, #000 50%, rgba(0, 0, 0, .45) 56%, transparent 62%);
  mask-size: 200% 200%;
  mask-position: calc(50% - var(--fx) * 46%) calc(50% - var(--fy) * 46%);
  mask-repeat: no-repeat;
  opacity: 0;                                   /* R15：星层在静止态完全隐藏（0.30 - 0.3），只在热区显影 */
  transition: mask-position 120ms linear, opacity .28s ease;
}

.ck-bigcard__holo-grain {                      /* 案例纹理层：可平铺噪点 + overlay，固定不位移 */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 .95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: .16;
}

.ck-bigcard__overlay {                         /* L2 塑料包装膜满幅（z 序最顶，位移最大，盖住卡面层）；
                                                  R9：收到不穿帮的极限——膜图自带约 3px 外沿折边，
                                                  s=1.025 时图幅每边余 3.4px、折边仍完整落在卡外 */
  position: absolute;
  inset: 0;
  width: 272px; height: 432px;
  pointer-events: none;
  z-index: 6;
  transform: translate3d(calc(var(--fx) * 6px), calc(var(--fy) * 6px), 0) scale(1.025);
  transition: transform 190ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   v2.8.0 大卡片 3D 分层（验收意见 R3 / R4 / R5 / R6，现已作为默认大卡样式）
   物理模型：文字 / 标签 / 评分都印在卡面上，属于同一平面，彼此不分离；
   指针靠近某一点时，整张卡连同卡面一起「朝向该点」小幅平移并倾斜（4px + 11°），
   塑料膜在最上层再额外朝同一方向滑 6px（本体放大 1.06 留余量），形成层间错位。
   R5：海报回到满窗 192×256（去掉出血放大）；R6：保留海报的窗内位移（6/7px）。
   R7：海报放大 1.1，避免窗内位移从窗边露底；R8：膜收到 1.06 + 6px，消掉“膜大一圈”；
   R9：膜再收到 1.025，图幅几乎贴住卡边，折边仍在外、极限倾角不穿帮。
   光谱箔光只作用于卡面框体（海报区挖空）；holo 常亮半透明底箔，静止也能读出色相。
   -------------------------------------------------------------------------- */
.ck-bigcard--holo {
  transform: perspective(900px)
             translate3d(calc(var(--fx) * 4px), calc(var(--fy) * 4px), 0)
             rotateX(calc(var(--fy) * 11deg)) rotateY(calc(var(--fx) * -11deg));
  filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--c-title) 28%, transparent));
}
.ck-bigcard--holo .ck-bigcard__sheen { opacity: .4; } /* R13：整卡渐变常亮但压暗，静止只读一层很淡的蓝紫 */
.ck-bigcard--holo.is-hot .ck-bigcard__holo-foil { opacity: .16; } /* R15：热区 0.46 → 0.16（整体再减 0.3） */
.ck-bigcard--holo .ck-bigcard__sheen::before {  /* R13：R11 的整卡 25 段斜向渐变，色相收窄成「靛蓝→紫→蓝」的单一色系
                                                  R14：首段（4.2%）归零、其余节点透明度整体再减半 */
  background-image: linear-gradient(100deg,
    rgba(74, 92, 255, 0) 0%,
    rgba(80, 96, 255, 0) 4.2%,
    rgba(88, 100, 255, .055) 8.3%,
    rgba(98, 100, 255, .08) 12.5%,
    rgba(110, 98, 255, .10) 16.7%,
    rgba(120, 96, 255, .115) 20.8%,
    rgba(130, 98, 255, .125) 25%,
    rgba(138, 102, 255, .13) 29.2%,
    rgba(144, 108, 255, .13) 33.3%,
    rgba(148, 116, 255, .125) 37.5%,
    rgba(142, 126, 255, .12) 41.7%,
    rgba(128, 140, 255, .115) 45.8%,
    rgba(112, 154, 255, .12) 50%,
    rgba(100, 166, 255, .125) 54.2%,
    rgba(90, 174, 255, .13) 58.3%,
    rgba(86, 168, 255, .125) 62.5%,
    rgba(88, 156, 255, .12) 66.7%,
    rgba(96, 142, 255, .11) 70.8%,
    rgba(106, 128, 255, .095) 75%,
    rgba(116, 114, 255, .075) 79.2%,
    rgba(126, 106, 255, .055) 83.3%,
    rgba(134, 104, 255, .035) 87.5%,
    rgba(140, 106, 255, .02) 91.7%,
    rgba(142, 110, 255, .01) 95.8%,
    rgba(144, 112, 255, 0) 100%);
}
.ck-bigcard--holo .ck-bigcard__poster-window::after {  /* 凹槽内阴影：上沿高光 + 内投影，窗洞读作下沉 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-white) 50%, transparent),
    inset 0 6px 14px color-mix(in srgb, var(--c-title) 24%, transparent),
    inset 0 -3px 10px color-mix(in srgb, var(--c-title) 9%, transparent);
}
.ck-bigcard--holo.is-resetting .ck-bigcard__poster,
.ck-bigcard--holo.is-resetting .ck-bigcard__poster--lqip,
.ck-bigcard--holo.is-resetting .ck-bigcard__overlay { transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }
.ck-bigcard--holo.is-paused .ck-bigcard__poster,
.ck-bigcard--holo.is-paused .ck-bigcard__poster--lqip,
.ck-bigcard--holo.is-paused .ck-bigcard__overlay { transition: none; }

.ck-bigcard__actions {                         /* 按钮行 192×40，水平 gap12 居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 192px;
  height: 40px;
  margin: 0 auto;
}
.ck-bigcard__actions .ck-btn {                 /* 关闭 / 编辑 各 90×40，中按钮档 pad=(16,12,20,12) gap8 */
  width: 90px;
  padding: 0 20px 0 16px;
  gap: 8px;
}

/* on-dark 描边中按钮（大卡片弹窗专用，覆盖于 --c-mask 遮罩上；stroke=#B1B9CB text=#FAFBFD） */
.ck-btn--on-dark {
  background: transparent;
  color: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-stroke);
}
.ck-btn--on-dark .ck-icon { color: var(--c-surface); }
.ck-btn--on-dark:active,
.ck-btn--on-dark.is-press {
  background: color-mix(in srgb, var(--c-surface) 18%, transparent);
  transform: scale(.98);
}

/* ==========================================================================
   11.6 编辑弹窗 v2.5（Figma 帧 1:626，696×408）
   --------------------------------------------------------------------------
   布局：pad=(240,24,24,24) 垂直 gap24；左侧 240 让位给破框预览卡
   预览卡 272×432 旋转 -4deg（右侧上翘），破框溢出弹窗左缘约 66px，带 drop-shadow 投影
   表单区 SLOT 432×296 垂直 gap16 五块：名称+分类 / 标签 / 状态 / 评分 / 备注
   按钮行 432×40 右对齐 gap12，取消 68 + 确定 68
   入场动画：预览卡 translateX(40→0) + opacity(0→1)，spring cubic-bezier(.34,1.56,.64,1) 0.38s
   ========================================================================== */

.ck-dialog--edit-v25 {
  position: relative;
  width: 696px;
  /* v2.5 修订：高度随内容自适应（用户指令 7），移除固定 408 */
  padding: 24px 24px 24px 240px;
  gap: 24px;
  overflow: visible;                           /* 允许预览卡破框溢出 */
}

/* 预览卡容器：绝对定位在弹窗左外侧，破框溢出左缘约 66px；rot -4deg（Figma rot=-0.07rad） */
.ck-editcard-wrap {
  position: absolute;
  left: -66px;
  top: -30px;
  width: 272px;
  height: 432px;
  transform: rotate(-4deg);
  transform-origin: center center;
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--c-title) 30%, transparent));
  animation: ck-editcard-in var(--dur-spring) var(--ease-spring) both;
}
@keyframes ck-editcard-in {
  from { transform: translateX(40px) rotate(-4deg); opacity: 0; }
  to   { transform: translateX(0)    rotate(-4deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-editcard-wrap { animation: none; }
}

/* 预览卡本体：复用大卡片分层规则（同 272×432 结构，独立类名避免污染） */
.ck-editcard {
  position: relative;
  width: 272px;
  height: 432px;
}
.ck-editcard__poster-window {
  position: absolute;
  left: 40px; top: 40px;
  width: 192px; height: 256px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg);                     /* v2.5 无海报态浅背景 */
  cursor: pointer;
  z-index: 1;                                  /* v2.5 修订：创建独立 stacking context，确保清除遮罩在卡面之下 */
}
.ck-editcard__poster {
  position: absolute;
  left: -8px; top: -8px;
  width: 208px; height: 272px;
  object-fit: cover;
  pointer-events: none;
}
.ck-editcard__face {
  position: absolute;
  inset: 0;
  width: 272px; height: 432px;
  pointer-events: none;
  z-index: 2;                                  /* 卡面高于海报窗（含清除遮罩），透明海报窗露出下方内容 */
}
.ck-editcard__text {
  position: absolute;
  left: 40px; top: 338px;
  width: 192px; height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
.ck-editcard__title {
  width: 192px;
  font: var(--fw-regular) var(--fs-16)/var(--lh-16) var(--font);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.ck-editcard--series .ck-editcard__title { color: var(--c-white); }
.ck-editcard--game   .ck-editcard__title { color: var(--c-surface); }
.ck-editcard__notes {
  width: 192px;
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
  text-align: center;
  overflow: hidden;
  word-break: break-all;
}
.ck-editcard__tags {
  position: absolute;
  left: 22px; top: 268px;
  width: 228px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 4;
}
.ck-editcard__tag {
  width: 48px; height: 48px;
  object-fit: contain;
  flex: none;
}
.ck-editcard__tag + .ck-editcard__tag { margin-left: -12px; }
.ck-editcard__grade {                          /* v2.6 评价切图：左上角顶格 @0,0，120×60；标签行之上、状态覆层之下（与大卡一致） */
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 60px;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
}
.ck-editcard__overlay {
  position: absolute;
  inset: 0;
  width: 272px; height: 432px;
  pointer-events: none;
  z-index: 6;
}

/* v2.5 海报窗交互层（Figma 1:831「大卡片样式枚举」实测）：
   - 遮罩 full-cover var(--c-mask)（50% 黑，与弹窗遮罩同令牌），仅桌面 hover 显现
   - 添加海报按钮：无海报态显示，icon 16 + gap2 + text 400/14 lh16 color --c-text
   - 清除海报按钮：遮罩内同位置，icon 16 + gap2 + text 400/14 lh16 color --c-white
   - 二者位置一致：海报窗内 top:166 left:50% translateX(-50%)，size 74×16 */
.ck-editcard__poster-mask {
  position: absolute;
  inset: 0;
  background: var(--c-mask);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
  z-index: 2;                                  /* 海报窗内：高于海报 img，低于外部卡面（因 poster-window 已 z=1 隔离） */
}
.ck-editcard__poster-add,
.ck-editcard__poster-clear {
  position: absolute;
  left: 50%;
  top: 166px;
  transform: translateX(-50%);
  width: 74px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  white-space: nowrap;
  pointer-events: none;                        /* 点击穿透到 .ck-editcard__poster-window（父层监听） */
}
.ck-editcard__poster-add {
  color: var(--c-text);
  z-index: 1;                                  /* 无海报态显示，位于海报窗内底层（无遮罩时可见） */
}
.ck-editcard__poster-add .ck-icon { width: 16px; height: 16px; color: var(--c-text); }
.ck-editcard__poster-clear {
  color: var(--c-white);
  z-index: 3;                                  /* 遮罩内顶层 */
}
.ck-editcard__poster-clear .ck-icon { width: 16px; height: 16px; color: var(--c-white); }
/* 桌面 hover 出遮罩+清除按钮的规则统一收敛到文件末触屏 hover 闸门内，避免触屏粘滞 */

/* 表单区（v2.5 修订：高度随内容自适应；名称/分类改为整行宽各占一行 → 6 块，用户指令 4/6/7） */
.ck-editform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 432px;
}
.ck-editform__name,
.ck-editform__cat {
  width: 432px;
  height: 40px;
}
.ck-editform__cat { justify-content: space-between; padding: 0 16px 0 12px; }
/* 名称/分类各自的浮层容器：相对定位承载 search-pop / cat-pop */
.ck-editform__name-wrap,
.ck-editform__cat-wrap { position: relative; width: 432px; }
/* 标签选择区：沿用 v2.4 .dlg-tag-chips 样式（用户指令 5：不动），行高自适应（用户指令 6） */
.ck-editform__status { width: 284px; }         /* 状态分段器 4×66 */
.ck-editform__grade  { width: 364px; }         /* v2.6 评分分段器 5×68+4×4gap+2×4pad=364（PRD §5.1，原 354） */
.ck-editform__notes  { width: 432px; height: 40px; }  /* 备注输入框（v2.5 新增） */

/* 按钮行：432×40 右对齐 gap12（取消 68 + 确定 68） */
.ck-editform__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 432px;
  height: 40px;
}
.ck-editform__actions .ck-btn {
  width: 68px;
  padding: 0 20px;
}

/* ==========================================================================
   12. 内容区骨架（筛选栏 / 题材标题 / 系列头 / 卡片网格）
   ========================================================================== */

.ck-filterbar {                                /* 筛选栏 高40 两端分散 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--size-ctrl-md);
  /* v2.8.1 收起 / 展开动画：高度收拢 + 淡出，负外边距抵掉与滚动区的 16 间距；
     不裁切内容（下拉面板需要溢出显示），靠透明度隐藏 */
  transition: height .2s var(--ease-modal-in),
              margin-bottom .2s var(--ease-modal-in),
              opacity .14s ease;
}
.ck-filterbar__left,
.ck-filterbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ck-cat-title {                                /* 题材标题 H1：18/600/18（2026-09-21 标题体系定稿） */
  margin: 0;
  font: var(--fw-semibold) var(--fs-18)/var(--lh-18) var(--font);
  color: var(--c-title);
}

.ck-series {                                   /* 系列头：高16 两端分散（右留 8） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  padding-right: 8px;
}
.ck-series__left { display: flex; align-items: center; gap: 4px; }
.ck-series__icon { width: 16px; height: 16px; color: var(--c-text); }
.ck-series__title { display: flex; align-items: center; }
.ck-series__name  {                            /* 14/600 #404A59 */
  font: var(--fw-semibold) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-subtitle);
}
.ck-series__count {                            /* （11/12）14/400 #8892A6 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
}
.ck-series__add {                              /* + 添加 14/400 #626D80 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-13) var(--font);
  color: var(--c-text);
  cursor: pointer;
}
/* .ck-series__add:hover → 见文件末触屏 hover 闸门 */

.ck-grid {                                     /* 卡片网格容器 r12 列gap4 行gap16 pad12/12/20（v2.7.1 层板货架） */
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, 136px);
  gap: var(--layout-card-gap);                 /* 列间距 4 */
  row-gap: var(--layout-card-row-gap);         /* 行间距 16（层板 8 + 空气 8，v2.7.1） */
  padding: 12px 12px 20px;                     /* 上左 12，底部 20（层板 8 + 空气 12，PRD §3.2） */
  background: var(--c-bg);
  border-radius: var(--r-lg);
  align-content: start;
}
/* v2.7.1 层板（PRD §3，Figma 8:2515；验收期改为 1px 圆角）：每个面板一张绘制面，232 节拍平铺；
   8 高 / 1 圆角 / --c-surface 填充 / 1px 内侧 --c-white 描边 / 0 4px 4px --c-hover 投影。
   条纹自内容顶 216 起（首行卡下沿），末行也有底板；底部 12 内边距让末条完整露出。
   独立层压在卡片之上、不拦截交互；空面板不画，骨架面板同画（验收要求）。 */
.ck-grid:not(.is-empty)::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 12px; bottom: 12px;
  pointer-events: none;
  z-index: 2;
  /* 1 圆角：主体白带满宽 + 内侧填充左右各缩 1px + 上下各一条 1px 白带两端缩 1px（四角各留 1px 圆角） */
  background-image:
    linear-gradient(to bottom, transparent 0 217px, var(--c-surface) 217px 223px, transparent 223px 232px),
    linear-gradient(to bottom, transparent 0 217px, var(--c-white) 217px 223px, transparent 223px 232px),
    linear-gradient(to bottom, transparent 0 216px, var(--c-white) 216px 217px, transparent 217px 232px),
    linear-gradient(to bottom, transparent 0 223px, var(--c-white) 223px 224px, transparent 224px 232px);
  background-size:
    calc(100% - 2px) 232px,
    100% 232px,
    calc(100% - 2px) 232px,
    calc(100% - 2px) 232px;
  background-position: 1px 0, 0 0, 1px 0, 1px 0;
  background-repeat: repeat-y;
  filter: drop-shadow(0 4px 4px var(--c-hover));
}
/* 空网格：虚线占位 + 提示文案（PRD §7：结构沿用 v1.1，令牌适配） */
.ck-grid.is-empty {
  min-height: 64px;
  align-content: center;
  outline: 1.5px dashed var(--c-stroke);
  outline-offset: -1.5px;
  padding: 0 16px;
  transition: outline-color .15s ease;
}
.ck-grid.is-empty.drop-empty-target { outline-color: var(--c-title); }
.ck-grid__tip {
  grid-column: 1 / -1;
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-muted);
}

/* ==========================================================================
   13. 其它（按 v2.0 令牌最小适配：toast / 右键菜单 / spinner）
   ========================================================================== */

.ck-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--c-title);
  border-radius: var(--r-md);
  color: var(--c-surface);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  box-shadow: 0 8px 20px rgba(45, 50, 57, .12);
  animation: ck-toast-in .18s ease;
}
.ck-toast.out {                                /* 淡出（JS 移除前） */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
@keyframes ck-toast-in { from { opacity: 0; transform: translateY(6px); } }
.ck-toast-root {                               /* Toast 容器：底部居中堆叠 */
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.ck-menu {                                     /* 右键菜单：容器/选项复用 ck-panel + ck-option（与选项面板同款），此处仅补定位 */
  position: fixed;
  z-index: 110;                                /* 高于弹窗层 z100 */
}

.ck-spinner {                                  /* 加载 spinner（沿用 v1.1 规范，令牌换色） */
  width: 24px; height: 24px;
  border: 2px solid var(--c-hover);
  border-top-color: var(--c-muted);
  border-radius: 50%;
  animation: ck-spin .8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. 应用骨架（App Shell —— 页面级布局）
   来源：Figma 主页帧 1440x1016［pad 16/0/16/16］
   顶栏 88（两端分散）→ 内容区 r20 #FAFBFD（1px 白内描边 + pad16 + gap24）
   内容区 = 导航 164 + 24 + 右区（筛选栏 40 + 16 + 滚动区）
   ========================================================================== */

.ck-app {                                      /* 页面外壳：设计基准 1440x1016，最小锁定宽 1080（PRD §3.4，内容区内部滚动） */
  display: flex;
  flex-direction: column;
  min-width: 1080px;
  height: 100vh;                               /* 固定视口高，使滚动发生在内容区 */
  min-height: 640px;                           /* 极矮视口兜底 */
  padding: 0 16px 16px;
}

.ck-topbar {                                   /* 顶栏 88：左 TAB 组 / 右图标按钮组 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--layout-topbar-h);
  flex: none;
}
.ck-topbar__tabs    { display: flex; }         /* 5×120 无间隙 */
.ck-topbar__actions { display: flex; }         /* 5×40 无间隙 */

.ck-stage {                                    /* 内容区：填满剩余高度，内部独立滚动 */
  flex: 1;
  min-height: 0;
  display: flex;
  gap: var(--layout-gap);
  padding: var(--layout-pad);
  background: var(--c-surface);
  border: 1px solid var(--c-white);            /* 稿中 1px 白内描边（内容因此从 17px 开始） */
  border-radius: var(--r-2xl);
}

.ck-main {                                     /* 右区：筛选栏 + 滚动区 */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.ck-scroll {                                   /* 滚动区：上部留 8，组间距 16，内圆角 12（v2.7.1） */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-top: var(--sp-3);
  border-radius: var(--r-lg);                  /* 滚动时内容在圆角内裁切（PRD §5） */
}

.ck-seriesblock {                              /* 系列组：系列头 + 网格，下留 8 */
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-bottom: var(--sp-3);
}

/* ==========================================================================
   14. 触屏 hover 闸门（PRD §4.9 方案 A，2026-09-21）
   所有 :hover 仅在「可悬停 + 精确指针」环境（鼠标/触控板）生效；
   触屏（hover: none）完全不应用 hover，点击后的 :hover 粘滞自然消除；
   接触控板/鼠标时自动恢复。
   .is-hover / .is-press 为 JS 键盘导航模拟类，不受闸门影响（定义在各自组件处）；
   页面级 hover（dlg- 弹窗内）见 page.css 末尾闸门。
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* 按钮 */
  .ck-btn:hover              { background: var(--c-hover); }
  .ck-btn--primary:hover     { background: var(--c-subtitle); }
  .ck-btn--danger:hover      { background: color-mix(in srgb, var(--c-danger), #000 10%); }
  .ck-btn--on-dark:hover     { background: color-mix(in srgb, var(--c-surface) 10%, transparent); }  /* v2.5 大卡片弹窗按钮悬停：浅白透明底 */
  /* v2.5 编辑弹窗预览卡：有海报时 hover 海报窗 → 遮罩淡入 + 清除按钮可点（PRD §4.5，Figma 1:666/1:831） */
  .ck-editcard__poster-window.has-poster:hover .ck-editcard__poster-mask { opacity: 1; pointer-events: auto; cursor: pointer; }
  .ck-seg-btn:not(.is-active):hover { background: var(--c-hover); }   /* 选中态（深底白字）不响应 hover：浅灰底+近白字不可读 */
  /* 顶栏 Tab / 导航 */
  .ck-toptab:hover:not(.is-active) .ck-toptab__label { color: var(--c-title); }
  .ck-nav-item:hover         { background: var(--c-hover); }
  /* 表单控件 */
  .ck-check:hover            { border-color: var(--c-title); }
  .ck-check:checked:hover    { border-color: var(--c-subtitle); background-color: var(--c-subtitle); }
  .ck-option:hover           { background: var(--c-bg); }
  .ck-option--danger:hover   { background: var(--c-danger-soft); }
  /* 标签行 */
  .ck-tagrow:hover           { background: var(--c-bg); }
  .ck-tagrow__action:hover   { color: var(--c-title); }
  /* 票根卡片（上浮 + 投影增强；v2.5：完成按钮已移除，投影增强与上浮同步 .18s） */
  .ck-ticket:hover           { transform: translateY(-6px); filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--c-title) 15%, transparent)); z-index: 3; }  /* v2.3.2：仅 y4→8、blur4→8 插值，色恒定 15%；v2.7.1 验收期上浮 4→6 */
  .ck-ticket:hover.is-pressing:not(.dragging) { transform: translateY(-6px) scale(.96); }  /* v2.8.0：悬停按下保留上浮，不跳位 */
  .ck-series__add:hover      { color: var(--c-title); }
  /* v2.8.0 彩虹箔光：进入热区淡入（热区=卡片每边外扩 20px，见 Form._initSheen），移开淡出；
     ::after 白色高光只在热区内显示，跟随 --mx/--my */
  .ck-bigcard:hover .ck-bigcard__sheen,
  .ck-bigcard.is-hot .ck-bigcard__sheen { opacity: 1; }
  .ck-bigcard.is-hot .ck-bigcard__sheen::after { opacity: 1; }
}

/* ==========================================================================
   15. 减少动态偏好（v2.8.0，PRD §2.4 / §3.5 / D13）
   按压不缩放、大卡不缩放、遮罩不淡入、扫光不跟随；hover 上浮与静态光带保留。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ck-ticket.is-pressing:not(.dragging),
  .ck-ticket.is-rebound:not(.dragging) { transform: none; transition: none; }
  .ck-dialog--bigcard { animation: none; }
  .ck-overlay,
  .ck-overlay.is-closing,
  .ck-dialog,
  .ck-overlay.is-closing .ck-dialog { animation: none; }
  .ck-bigcard,
  .ck-bigcard.is-resetting { transform: none; transition: none; }
  .ck-bigcard__sheen::before { transform: none; transition: none; }
  /* v2.8.1：导航 / 筛选栏收起展开直接切换，不做过渡 */
  .ck-sidenav,
  .ck-stage.nav-collapsed .ck-sidenav,
  .ck-filterbar,
  .ck-filterbar.is-collapsed { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .ck-ticket:hover.is-pressing:not(.dragging) { transform: translateY(-6px); }
}