/* ==========================================================================
   收藏库 v2.0 · 页面级样式（Page Layer）
   --------------------------------------------------------------------------
   只放“页面专属”的组合/定位样式：锁屏、筛选栏下拉、加载态等。
   所有颜色/圆角/间距/字体一律引用 tokens.css 变量；
   可复用组件（按钮/输入框/面板/票根…）一律引用 components.css 的 ck- 类。
   ========================================================================== */

/* ==========================================================================
   1. 密码锁屏（v3.2 Figma 27:967 PC / 27:1088 移动端）
   --------------------------------------------------------------------------
   360×504 卡片，封面 264 悬于卡片顶部并与面板重叠 60；
   面板底 #FAFBFD、r24、1px 白描边、0 20 48 投影；
   标题 24/600、副标题 14/400、输入 264×48 r12、按钮 264×48 r16。
   ========================================================================== */

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  overflow-y: auto;                          /* 矮屏（横屏/小屏）可滚动，卡片不被裁切 */
  padding: 24px 0;
  background: var(--c-page-bg);
}

.lock-card {
  position: relative;
  flex: 0 0 auto;
  width: 360px;
  height: 504px;                             /* 封面 264 上探 204 + 面板 300 */
  margin: auto;                              /* 常态垂直居中；空间不足时自动贴顶并可滚动 */
  padding: 272px 48px 0;                     /* 标题 y=272（面板顶 204 + 68） */
  text-align: center;
}
/* 面板只占 360×300（y=204 起）：封面不裹进面板，而是“破局”浮在面板之上，
   所以背景/描边/投影都挂在伪元素上，卡片容器本身保持透明 */
.lock-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 204px;
  height: 300px;
  z-index: 0;
  background: var(--c-surface);
  border-radius: var(--r-3xl);
  /* 白描边用内阴影实现，避免 border 挤压 360/264 的精确宽度 */
  box-shadow: inset 0 0 0 1px var(--c-white), 0 20px 48px rgba(45, 50, 57, .12);
}
.lock-card > * { position: relative; z-index: 1; }   /* 内容层压在面板之上 */

/* 封面：264×264 居中，顶部与组顶对齐，下半部分压住面板 60（27:970 → 27:969） */
.lock-cover {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;                                /* 破局层：封面与封面自带投影盖在面板与面板投影之上 */
  width: 264px;
  height: 264px;
  transform: translateX(-50%);
  pointer-events: none;
}
.lock-cover img {
  display: block;
  width: 100%; height: 100%;
}

.lock-title {                               /* 24/600/24，Figma 27:974 */
  margin: 0;
  font: var(--fw-semibold) 24px/24px var(--font);
  color: var(--c-title);
}

.lock-sub {                                 /* 14/400/16，色 #8892A6；文案由 APP_VERSION 动态生成 */
  margin: 8px 0 0;
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-muted);
}

.lock-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lock-input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  color: var(--c-title);
  font: var(--fw-regular) var(--fs-16)/var(--lh-16) var(--font);   /* v3.2 定稿：PC/移动端输入框统一 16 */
  text-align: center;
  transition: border-color .12s ease;
}
.lock-input::placeholder { color: var(--c-muted); }
.lock-input:focus { border-color: var(--c-title); }

.lock-submit {
  width: 100%;
  font-size: var(--fs-16);                  /* Figma 按钮文案 16/18 */
  line-height: var(--lh-16);
}

.lock-error {
  margin: 0;
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-danger);
}

/* ==========================================================================
   2. 筛选栏下拉（评分 / 标签 —— 中按钮 + 选项面板组合）
   ========================================================================== */

.pg-dropdown { position: relative; }

.pg-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: 60;
  width: max-content;
  min-width: 138px;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
}

/* 多选选项行（ck-option + ck-check 组合，勾选与文字间距 8） */
.pg-option { cursor: pointer; }
.pg-option__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* v2.8.1 标签筛选选项补图标（Figma v2.8「多选下拉选项」图标=on）：
   行 32/r8/pad8，多选框到图标 8，图标 16×16 到文案 4；图标与卡片标签同源，
   无配置图标时走问号兜底；「无标签」为纯文字（对应图标=off 变体） */
.pg-option__label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.pg-option__tagicon {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

/* v2.6 评分筛选面板切图化（PRD §6，Figma 5:1306）：
   面板 116 宽（pad8 + 内容100 + pad8），单独覆盖 ck-panel 默认 138，不影响标签筛选等其他面板；
   选项行 100×32 步进 36（gap4）；行内 多选框16×16 + 评价切图 60×30（小图档，与卡片同源）；
   触发按钮 label 保留文字「评分（n/5）」（D6） */
.pg-dropdown__panel--grade {
  width: 116px;
  min-width: 116px;
  max-width: 116px;
}
.pg-option--grade {
  width: 100px;
  padding: 0 8px;
  gap: 8px;
}
.pg-option__grade {
  width: 60px;
  height: 30px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* 触发器三角：面板展开时旋转 180°（尖朝上），收起复位 */
.pg-dropdown .ck-icon--triangle { transition: transform .18s ease; }
.pg-dropdown.is-open .ck-icon--triangle { transform: rotate(180deg); }

/* v3.1 ⑫ PC 同步：评分/标签存在生效筛选时，触发按钮深色高亮（--c-title 底白字） */
.ck-btn.is-filtering { background: var(--c-title); color: var(--c-surface); }
/* v3.1 验收修改：生效筛选按钮仍按按钮组件点击态（强调 on 的点击色：深底 + 灰字） */
.ck-btn.is-filtering:active, .ck-btn.is-filtering.is-press { background: var(--c-title); color: var(--c-muted); }
.ck-btn.is-filtering .ck-icon { color: inherit; }
/* .ck-btn.is-filtering:hover → 见文件末触屏 hover 闸门（深底态不响应 hover） */

/* v2.7 搜索框（PRD §2.1）：132×40，复用 .ck-input 口径（pad12 / gap10 / r12 / 底 --c-bg）；
   聚焦态用 :focus-within 着 1px 描边，平时透明占位不产生位移 */
.pg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 132px;
  height: var(--size-ctrl-md);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  transition: border-color .12s ease;
}
.pg-search:focus-within { border-color: var(--c-title); }
.pg-search .ck-icon { color: var(--c-text); }
.pg-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-title);
  caret-color: var(--c-title);
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
}
.pg-search__input::placeholder { color: var(--c-muted); }

/* ==========================================================================
   3. 骨架屏 / 空态
   ========================================================================== */

/* v2.7 骨架屏（PRD §3）：复用真实导航容器与内容网格，只替换叶子节点；
   扫光层覆盖导航 + 内容，1.4s linear 循环，只动 transform */
.ck-stage.is-skeleton { position: relative; }

.pg-sk-bar { display: block; border-radius: 4px; }
/* v2.7.1 验收期：标题占位不再用描边色（过重），统一为深背景色 */
.pg-sk-bar--hover  { background: var(--c-hover); }
.pg-sk-item {                       /* 导航选项行 132×32，条 100×16 左 16 纵向居中 */
  display: flex;
  align-items: center;
  height: var(--size-ctrl-sm);
  padding-left: 16px;
  border-radius: var(--r-sm);
}
.pg-sk-card {                       /* 卡位 136×216，内块 120×208 @8,8 */
  position: relative;
  width: 136px;
  height: 216px;
}
.pg-sk-card > span {
  position: absolute;
  left: 8px; top: 8px;
  width: 120px; height: 208px;
  border-radius: 8px;
  background: var(--c-hover);
}

/* 200ms 防闪（PRD §3.4）：先占位不显形，超时后整体淡入 */
.ck-stage.is-skeleton .pg-sk-bar,
.ck-stage.is-skeleton .pg-sk-item,
.ck-stage.is-skeleton .pg-sk-card,
.ck-stage.is-skeleton .pg-sk-panel { opacity: 0; transition: opacity .18s ease; }
.ck-stage.is-sk-shown .pg-sk-bar,
.ck-stage.is-sk-shown .pg-sk-item,
.ck-stage.is-sk-shown .pg-sk-card,
.ck-stage.is-sk-shown .pg-sk-panel { opacity: 1; }

.pg-sk-shine {                      /* 扫光层：整块骨架区上覆盖一条 240 宽白渐变带 */
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.ck-stage.is-sk-shown .pg-sk-shine { opacity: 1; }
.pg-sk-shine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -240px;
  width: 240px;
  background: linear-gradient(100deg, transparent 0%, var(--c-white) 50%, transparent 100%);
  opacity: .55;
  animation: pg-sk-sweep 1.4s linear infinite;
}
@keyframes pg-sk-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 240px)); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sk-shine { display: none; }
}

.sub-empty {
  padding: 18px 0 6px;
  font: var(--fw-regular) var(--fs-13)/var(--lh-13) var(--font);
  color: var(--c-muted);
}

/* ==========================================================================
   4. 骨架收尾（顶栏收起导航后的右区自适应等）
   ========================================================================== */

/* v2.8.1 导航收起：宽度 160→0 + 内边距收拢 + 淡出，负外边距抵掉 24 间距，右区随之铺满；
   动画结束才 visibility:hidden（避免 Tab 聚焦到不可见的选项），展开时立即可见 */
.ck-stage.nav-collapsed .ck-sidenav {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-right: calc(-1 * var(--layout-gap));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: width .22s var(--ease-modal-in),
              padding .22s var(--ease-modal-in),
              margin-right .22s var(--ease-modal-in),
              opacity .16s ease,
              visibility 0s linear .22s;
}

/* v2.8.1 筛选栏收起：高度 40→0 + 淡出，抵掉与滚动区的 16 间距（下拉面板靠透明度隐藏，不裁切） */
.ck-filterbar.is-collapsed {
  height: 0;
  margin-bottom: calc(-1 * var(--sp-6));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: height .2s var(--ease-modal-in),
              margin-bottom .2s var(--ease-modal-in),
              opacity .14s ease,
              visibility 0s linear .2s;
}

/* v2.8.1：减少动态效果时直接切换；必须写在本节之后，才能覆盖上面收起态的 transition */
@media (prefers-reduced-motion: reduce) {
  .ck-stage.nav-collapsed .ck-sidenav,
  .ck-filterbar.is-collapsed { transition: none; }
}

/* ==========================================================================
   5. 弹窗内表单组合（dlg-：详情 / 新增编辑 / 管理弹窗的页面级拼装）
   颜色/字体/圆角一律引用 tokens；可复用件全部来自 components.css
   ========================================================================== */

/* 字段组：label + 输入框 + 帮助文字（间距 12） */
.dlg-field { display: flex; flex-direction: column; gap: 12px; }
.dlg-help a { color: var(--c-title); text-decoration: underline; }

/* 错误提示（12/400 #E5444C） */
.dlg-error {
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-danger);
}

/* footer 左侧状态文字（测试连接结果等） */
.dlg-status {
  margin-right: auto;
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-muted);
}

/* ---------- 详情弹窗（653：左海报槽 + 右信息列） ---------- */
.dlg-detail__name {
  font: var(--fw-semibold) var(--fs-16)/var(--lh-16) var(--font);
  color: var(--c-title);
  word-break: break-all;
}
.dlg-detail__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlg-detail__status {                        /* 状态小标签：灰底胶囊 */
  padding: 4px 10px;
  border-radius: var(--r-md);
  background: var(--c-bg);
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-text);
}
.dlg-detail__sec { display: flex; flex-direction: column; gap: 8px; }
.dlg-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-detail__notes {
  font: var(--fw-regular) var(--fs-14)/20px var(--font);
  color: var(--c-title);
  white-space: pre-wrap;
  word-break: break-all;
}
.dlg-tag-chip { cursor: default; }            /* span 复用小按钮视觉做标签展示 */

/* ---------- 新增/编辑弹窗：名称 + 搜索浮层 ---------- */
.dlg-name-wrap { position: relative; display: flex; flex-direction: column; gap: 4px; }
.dlg-search-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 10;
  width: auto;                                 /* 覆盖 ck-panel 默认 138 宽，撑满输入区 */
  max-height: 320px;
  overflow-y: auto;
}
.dlg-search-group { display: flex; flex-direction: column; gap: 2px; }
.dlg-search-group + .dlg-search-group {             /* 多数据源分组：虚线分割 */
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--c-stroke);
}
.dlg-search-group-title {
  padding: 6px 8px 2px;
  font: var(--fw-semibold) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-muted);
}
.dlg-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  cursor: pointer;
  text-align: left;
}
/* .dlg-search-item:hover → 见文件末触屏 hover 闸门 */
.dlg-search-thumb {                           /* 缩略图 40x56 r4：v2.8.0 加载态统一为浅背景 + 转圈 */
  position: relative;
  width: 40px; height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg);
}
.dlg-search-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.dlg-search-thumb img.is-ok { opacity: 1; }                  /* v2.4.4：加载成功才显示——加载中/失败不绘制 Safari 系统占位（蓝底问号）与裂图闪现，loading 始终可见 */
.dlg-search-thumb img.is-ph { opacity: 1; }                  /* v2.7.1 海报兜底图直显（PRD §2.2） */
.dlg-search-spin {                              /* v2.4.3 列表缩略图加载中 loading：14px 环形转圈，终态隐藏 */
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(45, 50, 57, .18);
  border-top-color: rgba(45, 50, 57, .55);
  border-radius: 50%;
  animation: dlg-search-spin .7s linear infinite;
}
.dlg-search-thumb.is-loaded .dlg-search-spin { display: none; }
@keyframes dlg-search-spin { to { transform: rotate(360deg); } }
.dlg-search-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dlg-search-name {
  font: var(--fw-semibold) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlg-search-year {
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-muted);
}
.dlg-search-empty {
  padding: 12px 8px;
  font: var(--fw-regular) var(--fs-13)/var(--lh-13) var(--font);
  color: var(--c-muted);
}
.dlg-search-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  font: var(--fw-regular) var(--fs-13)/var(--lh-13) var(--font);
  color: var(--c-muted);
}
.dlg-search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 8px;
  border-top: 1px solid var(--c-hover);
  font: var(--fw-regular) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-muted);
}
.dlg-search-config {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--c-title);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- 新增/编辑弹窗：分类下拉 ---------- */
.dlg-cat-wrap { position: relative; }
.dlg-cat-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 10;
  width: auto;                                 /* 撑满触发按钮宽 */
  max-height: 280px;
  overflow-y: auto;
}
.dlg-cat-group { display: flex; flex-direction: column; gap: 4px; }
.dlg-cat-group + .dlg-cat-group { margin-top: 4px; }
.dlg-cat-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 2px;
  font: var(--fw-semibold) var(--fs-12)/var(--lh-12) var(--font);
  color: var(--c-title);
}
/* v3.1 验收修改：虚线改到中类标题同一行，从标题右侧延伸（PC 同改） */
.dlg-cat-mid::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--c-muted);
}
/* v3.1 ⑭：选中项加粗（600），PC hover 色底不变 */
.dlg-cat-pop .ck-option--single.is-active { font-weight: var(--fw-semibold); }

/* ---------- 新增/编辑弹窗：标签多选按钮组 ---------- */
.dlg-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-tag-chips .ck-btn--outline {                 /* 未选中：虚线描边 + 近白底（与弹窗底同色，融入背景） */
  background: var(--c-surface);
  border: 1px dashed var(--c-stroke);
  box-shadow: none;                              /* 覆盖组件库 inset 实线描边 */
}
.dlg-tag-chips .ck-btn--outline:active,
.dlg-tag-chips .ck-btn--outline.is-press {       /* 补回按压底色（近白底规则同特异性靠后盖住了组件库 :active 背景） */
  background: var(--c-stroke);
}

/* ---------- 编辑标签弹窗：图标上传槽（v2.1） ---------- */
.dlg-tag-row { display: flex; align-items: center; gap: 8px; }
.dlg-tag-row .ck-input { flex: 1; min-width: 0; }
.dlg-tag-icon {                                   /* 40x40 圆角 12 浅底方块（对齐「中按钮·仅图标」规格，PRD v2.1 §2.2） */
  position: relative;
  flex: none;
  width: var(--size-ctrl-md);                     /* 40 */
  height: var(--size-ctrl-md);
  border-radius: var(--r-lg);                     /* 12 */
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dlg-tag-icon > .ck-icon { color: var(--c-subtitle); }   /* 空态加号：16x16 副标题色 */
.dlg-tag-icon > img { width: 24px; height: 24px; object-fit: contain; }   /* 有图：贴纸 24x24 居中（与 16 加号形成大小差） */
.dlg-tag-icon__mask {                             /* 蒙层：仅桌面 hover 显现（见文件末触屏闸门） */
  position: absolute;
  inset: 0;
  border-radius: inherit;                         /* 跟随槽圆角 */
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;                           /* 默认穿透：点击落到槽本体（触屏无删除入口） */
}
.dlg-tag-icon__mask .ck-icon { pointer-events: none; color: #fff; }

/* ---------- 管理弹窗（分类 360 / 标签 514）：内容区 414 高内部滚动 ---------- */
.dlg-mg-body { height: 414px; overflow-y: auto; }
.dlg-mg-body > * { flex: none; }               /* 内容超出时滚动，禁止 flex 压缩行高 */
.dlg-mg-body--wide { gap: 16px; }              /* 标签管理（宽）组间距 16 */

.dlg-mg-group { display: flex; flex-direction: column; gap: 8px; }
.dlg-mg-head { display: flex; align-items: center; gap: 6px; height: var(--size-ctrl-sm); min-width: 0; border-radius: var(--r-md); }
.dlg-mg-head[draggable] { cursor: grab; }
.dlg-mg-arrow { color: var(--c-subtitle); transform: rotate(-90deg); transition: transform .15s ease; }   /* 折叠：尖朝右 */
.dlg-mg-arrow.is-open { transform: rotate(0deg); }   /* 展开：尖朝下 */
.dlg-mg-mid { font: var(--fw-semibold) var(--fs-16)/24px var(--font); color: var(--c-subtitle); }
.dlg-mg-caticon { width: 24px; height: 24px; object-fit: contain; flex: none; }

/* 行内操作（编辑/删除）：悬停行时浮现，保持画面接近设计稿干净态 */
.dlg-mg-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  opacity: 0;
  transition: opacity .12s ease;
}
/* .dlg-mg-head:hover .dlg-mg-ops / .ck-tagrow:hover .ck-tagrow__action（悬停浮现）→ 见文件末触屏 hover 闸门 */
.ck-tagrow .ck-tagrow__action { opacity: 0; transition: opacity .12s ease; }
.dlg-mg-op {
  display: inline-flex;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--c-text);
  cursor: pointer;
  border-radius: 4px;
}
/* .dlg-mg-op:hover → 见文件末触屏 hover 闸门 */
.dlg-mg-op .ck-icon { display: block; }

.dlg-mg-subs { display: flex; flex-direction: column; gap: 4px; }
.dlg-mg-sub { cursor: grab; }
/* v2.7 修订：系列行与「添加系列」默认不填充底色（底色由弹窗承载，悬停仍浮现，见文件末闸门） */
.dlg-mg-body:not(.dlg-mg-body--wide) .ck-tagrow { background: none; }
.dlg-mg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.dlg-mg-addmid { align-self: flex-start; }

/* 拖拽落点标记（v2.7，PRD §6 / Figma 分类管理 10:3493）：
   前后换位：2px 横线（--c-title / 圆角 1 / 与目标行等宽），居中落在 4px 行间隙（top/bottom:-3px），
   不侵占行内容、不推挤布局；
   系列拖入分类：目标分类标题模块高亮（--c-bg 底 + 1px --c-title 描边），
   分类展开时同时在插入位置显示横线（标题 → 首位；列表空白 / 添加系列 → 末位），折叠时仅描边 */
.dlg-mg-sub, .dlg-mg-head, .dlg-mg-add { position: relative; }
.dlg-mg-sub.dlg-drop-before::before, .dlg-mg-head.dlg-drop-before::before,
.dlg-mg-add.dlg-drop-before::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--c-title);
  pointer-events: none;
}
.dlg-mg-sub.dlg-drop-after::after, .dlg-mg-head.dlg-drop-after::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--c-title);
  pointer-events: none;
}
.dlg-mg-head.dlg-drop-target {
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-title);
}

/* v2.7 拖动中行弱化（PRD §6 / §7.1）：不透明度 .35 + 轻微缩小 */
.dlg-mg-sub.dlg-dragging, .dlg-mg-head.dlg-dragging,
.ck-tagrow.dlg-dragging { opacity: .35; transform: scale(.98); }

/* v2.7 标签拖动落点（PRD §7.1）：2px 竖线贴在目标格左缘/右缘的列间隙；
   首列左缘 / 末列右缘改为内贴边（left/right: 0），避免被滚动容器裁切，保证完整显示 */
.dlg-mg-grid .ck-tagrow { position: relative; cursor: grab; }
.dlg-mg-grid .ck-tagrow.dlg-tag-drop-before::before {
  content: "";
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--c-title);
  pointer-events: none;
}
.dlg-mg-grid .ck-tagrow.dlg-tag-drop-after::after {
  content: "";
  position: absolute;
  right: -3px; top: 0; bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--c-title);
  pointer-events: none;
}
.dlg-mg-grid .ck-tagrow[data-tab]:nth-child(odd).dlg-tag-drop-before::before { left: 0; }
.dlg-mg-grid .ck-tagrow[data-tab]:nth-child(even).dlg-tag-drop-after::after { right: 0; }

/* ---------- 版本信息弹窗（v2.7，PRD §4.2 / Figma 8:3069） ---------- */
/* 正文槽 466×346 内部滚动；条目间距 24，条目内 版本号 16/600/18 + 说明 14/400/16 间距 12 */
.dlg-ver__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);                              /* 24 */
  width: 466px;
  max-height: 346px;
  overflow-y: auto;
}
.dlg-ver__item { display: flex; flex-direction: column; gap: var(--sp-5); }   /* 12 */
.dlg-ver__no {
  font: var(--fw-semibold) var(--fs-16)/var(--lh-16) var(--font);
  color: var(--c-title);
}
.dlg-ver__desc {
  display: flex;
  flex-direction: column;
  gap: 8px;                                      /* v2.7 修订：列表行距 8 */
  font: var(--fw-regular) var(--fs-14)/var(--lh-14) var(--font);
  color: var(--c-text);
}
.dlg-ver__line {                                 /* v2.7 修订：每条改动一行，行首圆点 */
  position: relative;
  padding-left: 14px;
}
.dlg-ver__line::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;                           /* 16 行高内垂直居中（4px 圆点） */
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.dlg-ver__close {                                /* 单个「关闭」按钮：v3.0.7 加 icon 后改为内容自适应（最窄 68） */
  min-width: 68px;
  padding: 0 20px 0 16px;                        /* 图标左 16 / 文字右 20，与其余弹窗按钮一致 */
  justify-content: center;
}

/* ==========================================================================
   6. 触屏 hover 闸门（PRD §4.9 方案 A，2026-09-21）
   页面级 :hover 仅在「可悬停 + 精确指针」环境生效；触屏不应用 hover，
   粘滞自然消除（组件库部分见 components.css 末尾闸门）。
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .ck-btn.is-filtering:hover:not(:active) { background: var(--c-title); color: var(--c-surface); }   /* v3.1 生效筛选高亮态不响应 hover 变浅 */
  .dlg-search-item:hover { background: var(--c-bg); }
  .dlg-mg-head:hover .dlg-mg-ops { opacity: 1; }
  .ck-tagrow:hover .ck-tagrow__action { opacity: 1; }
  .dlg-mg-body:not(.dlg-mg-body--wide) .ck-tagrow:hover { background: var(--c-bg); }   /* 分类弹窗行默认无底色，悬停仍浮现 */
  .dlg-mg-op:hover { color: var(--c-title); background: var(--c-bg); }
  .dlg-tag-chips .ck-btn--outline:hover { background: var(--c-hover); }   /* 补回原 hover 背景（近白底规则盖住了组件库 hover，需同等以上特异性重声明） */
  .dlg-tag-icon.has-img:hover .dlg-tag-icon__mask { opacity: 1; }         /* 有图 hover 出蒙层 */
  .dlg-tag-icon.has-img:hover .dlg-tag-icon__mask .ck-icon { pointer-events: auto; }   /* 重置图标可点（其余区域仍穿透=替换） */
}

/* ==========================================================================
   7. 滚动条弱化（v3.1 验收修改）
   仅用标准属性：macOS Chrome 保留系统浮层，iPhone Safari 维持叠加细条；
   Windows PC 的经典条变为约 8–10px 无箭头细条（透明轨道 + 低透明度滑块）。
   不使用 ::-webkit-scrollbar，避免 macOS 浮层被常驻 10px 滚动条替代。
   ========================================================================== */
.ck-sidenav,
.ck-scroll,
.ck-sheet__body,
.dlg-mg-body,
.dlg-ver__body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-text) 32%, transparent) transparent;
}