/* 全站通用液态导航滑块：保持按钮宽度，只做连续位移与减速贴合。 */
.liquid-nav-ready {
  position: relative !important;
  isolation: isolate;
  padding-right: 4px !important;
  padding-left: 4px !important;
  scroll-padding-right: 4px !important;
  scroll-padding-left: 4px !important;
  scroll-snap-type: none !important;
}

.liquid-nav-surface {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border-radius: 8px;
  background: var(--cinnabar, #b94132);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, 185, 65, 50), 0.24);
  transform-origin: center;
  will-change: left, top, width, height;
}

/* 资料页移动端分类当前只有单一“抽奖”项，液态滑块会在异步布局完成前
   错位到页面左上角；按钮本身已有激活背景，无需额外滑块。 */
body[data-page="archive"] .liquid-nav-surface {
  display: none !important;
}

/* 但分类 ≥2 个、通用导航脚本已接管时（容器拿到 liquid-nav-ready），
   资料库也要和其它二级轨道一样用滑块 +「第二格钉住」水感规则。
   这条选择器特异性 (0,4,1) 高于上一条 (0,2,1)，同为 !important 时后者让位，
   所以上一条的零/单分类兜底仍然有效。 */
body[data-page="archive"] .archive-tab-bar.liquid-nav-ready > .liquid-nav-surface {
  display: block !important;
}

.liquid-nav-surface.is-animated {
  /* 2026-10-03 只过渡位置，不再过渡 width / height：
     项宽不同的导航在切换时，滑块会被逐帧拉伸（用户报的「像水一样拉长」）。
     宽度直接到位，视觉上就是「整块滑过去」。 */
  transition:
    left 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    top 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.liquid-nav-ready > button,
.liquid-nav-ready > a,
.liquid-nav-ready > label.app-form-capsule,
.liquid-nav-ready > div.legacy-detail-tab,
.liquid-nav-ready > div.legacy-detail-subtab,
.liquid-nav-ready > div.shensha_xz,
.liquid-nav-ready > div.shensha_fxz,
.liquid-nav-ready > div.dlr-layout-choice,
.liquid-nav-ready > div.dlr-legacy-tab,
.liquid-nav-ready > div.dlr-legacy-subtab,
.liquid-nav-ready > [role="tab"] {
  position: relative;
  z-index: 1;
}

.liquid-nav-ready > button.active,
.liquid-nav-ready > button.is-active,
.liquid-nav-ready > button.selected,
.liquid-nav-ready > button.layui-this,
.liquid-nav-ready > button[aria-pressed="true"],
.liquid-nav-ready > a.active,
.liquid-nav-ready > a.is-active,
.liquid-nav-ready > label.app-form-capsule-active,
.liquid-nav-ready > input:checked + label.app-form-capsule,
.liquid-nav-ready > div.legacy-detail-tab.is-active,
.liquid-nav-ready > div.legacy-detail-subtab.is-active,
.liquid-nav-ready > div.shensha_xz,
.liquid-nav-ready > div.dlr-layout-choice.is-active,
.liquid-nav-ready > div.dlr-legacy-tab.is-active,
.liquid-nav-ready > div.dlr-legacy-subtab.is-active,
.liquid-nav-ready > .layui-this,
.liquid-nav-ready > [role="tab"][aria-selected="true"] {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.liquid-nav-ready > button.active:hover,
.liquid-nav-ready > button.is-active:hover,
.liquid-nav-ready > button.layui-this:hover,
.liquid-nav-ready > button[aria-pressed="true"]:hover,
.liquid-nav-ready > a.active:hover,
.liquid-nav-ready > label.app-form-capsule-active:hover,
.liquid-nav-ready > input:checked + label.app-form-capsule:hover,
.liquid-nav-ready > [role="tab"][aria-selected="true"]:hover {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
  background: transparent !important;
}

/* WebKit/iOS and Harmony WebViews can retain a label's previous muted text
   fill while the liquid surface is moving underneath it. Keep the label and
   any nested text nodes on the same light foreground as the active surface. */
.liquid-nav-ready > button:is(.active, .is-active, .selected, .layui-this),
.liquid-nav-ready > button[aria-pressed="true"],
.liquid-nav-ready > a:is(.active, .is-active),
.liquid-nav-ready > label.app-form-capsule-active,
.liquid-nav-ready > input:checked + label.app-form-capsule,
.liquid-nav-ready > div.legacy-detail-tab.is-active,
.liquid-nav-ready > div.legacy-detail-subtab.is-active,
.liquid-nav-ready > div.dlr-layout-choice.is-active,
.liquid-nav-ready > div.dlr-legacy-tab.is-active,
.liquid-nav-ready > div.dlr-legacy-subtab.is-active,
.liquid-nav-ready > .layui-this,
.liquid-nav-ready > [role="tab"][aria-selected="true"],
.liquid-nav-ready > :is(button, a, label, div, [role="tab"]):is(.active, .is-active, .selected, .layui-this, [aria-pressed="true"], [aria-selected="true"]) :is(span, strong, b, small) {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
}

.app-form-capsule-group.liquid-nav-ready > .liquid-nav-surface {
  border-radius: 16px;
}

/* Small Liu Ren uses the same single moving surface as the primary nav.
   Width/height are still written directly by liquid-nav.js, so only the
   position moves and the highlight never stretches between labels. */
body[data-page="chart"] .paipan-tool-frame .paipan-form-pane[data-pane="view_x6ren"]
  .app-form-capsule-group[data-liquid-nav-motion="smooth"].liquid-nav-ready > .liquid-nav-surface.is-animated {
  transition: left 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              top 320ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  animation: none !important;
}

/* The moving surface supplies the active background; labels remain transparent
   so two backgrounds cannot fight during the slide. */
body[data-page="chart"] .paipan-tool-frame .paipan-form-pane[data-pane="view_x6ren"]
  .app-form-capsule-group[data-liquid-nav-motion="smooth"].liquid-nav-ready
  > .app-form-capsule {
  transition: color 160ms ease !important;
}
body[data-page="chart"] .paipan-tool-frame .paipan-form-pane[data-pane="view_x6ren"]
  .app-form-capsule-group[data-liquid-nav-motion="smooth"].liquid-nav-ready
  > input:checked + label.app-form-capsule,
body[data-page="chart"] .paipan-tool-frame .paipan-form-pane[data-pane="view_x6ren"]
  .app-form-capsule-group[data-liquid-nav-motion="smooth"].liquid-nav-ready
  > label.app-form-capsule-active {
  background: transparent !important;
  border-color: transparent !important;
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
}

body[data-page="chart"] .paipan-tool-frame .paipan-form-pane .app-form-capsule-group.liquid-nav-ready {
  padding-right: 4px !important;
  padding-left: 4px !important;
}

html.dark .liquid-nav-surface {
  background: var(--cinnabar, #b94132);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-nav-surface {
    transition: none;
  }
}