/* =====================================================================
   墨卡 MOKA · 交互层 moka-interact.css（叠加在 moka.css 之后加载，只做增量）
   黑白灰极简：按压反馈 / 悬停（仅 hover:hover）/ 焦点环 / 加载态 / 校验抖动 /
   弹窗与提示入场 / 骨架 / 触屏 44px / prefers-reduced-motion。
   回滚：删掉 nginx sub_filter 里的 moka-interact.css / moka-interact.js 两个标签即可。
   ===================================================================== */
:root{
  --mi-ease:cubic-bezier(.2,.8,.2,1);   /* 统一缓动 */
  --mi-press:100ms;                      /* 按下 */
  --mi-dur:200ms;                        /* 常规过渡 */
  --mi-ring:#8e8e93;                     /* 中性灰焦点环 */
  --mi-invalid:#c4372d;
}
html.dark{color-scheme:dark;--mi-ring:#a1a1a6;--mi-invalid:#ff6961}

/* ---------- 触屏：去 300ms 延迟、去高亮 ---------- */
.vault-scope :is(a,button,input,select,textarea,label,[role="button"]),
body [role="dialog"] :is(a,button,input,label){touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ---------- 焦点环：中性灰，仅键盘 ---------- */
.vault-scope :focus-visible,body [role="dialog"] :focus-visible{outline:2px solid var(--mi-ring)!important;outline-offset:2px!important}
.vault-scope :is(input,textarea,select):focus-visible,body [role="dialog"] :is(input,textarea):focus-visible{outline:none!important}
.vault-scope a[href^="/products/"]:focus-visible{outline-offset:4px!important}

/* ---------- 按压反馈：0.97 / 100ms ---------- */
.vault-scope button:not(:disabled),.vault-scope a.rounded-full,.vault-scope [role="button"],body [role="dialog"] button:not(:disabled){
  transition:transform var(--mi-dur) var(--mi-ease),background-color var(--mi-dur) var(--mi-ease),color var(--mi-dur) var(--mi-ease),box-shadow var(--mi-dur) var(--mi-ease),border-color var(--mi-dur) var(--mi-ease),opacity var(--mi-dur) var(--mi-ease)!important}
.vault-scope button:not(:disabled):active,.vault-scope a.rounded-full:active,.vault-scope [role="button"]:active,body [role="dialog"] button:not(:disabled):active{transform:scale(.97)!important;transition-duration:var(--mi-press)!important}
/* 首页主视觉按钮：moka.css 的 :hover 位移优先级更高，这里补一个按下态 */
.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button:active,.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button:hover:active{transform:scale(.97)!important;transition-duration:var(--mi-press)!important}
/* 步进器按钮属于一个整体胶囊，不缩放按钮本身，只缩放图标 + 灰底 */
.vault-scope .inline-flex.overflow-hidden.rounded-full > button,body [role="dialog"] .flex.items-center.rounded-lg.border.overflow-hidden > button{transform:none!important}
.vault-scope .inline-flex.overflow-hidden.rounded-full > button:not(:disabled):active,body [role="dialog"] .rounded-lg.border.overflow-hidden > button:not(:disabled):active{background:var(--surface-2,#f2f2f4)!important}
.vault-scope .inline-flex.overflow-hidden.rounded-full > button svg,body [role="dialog"] .rounded-lg.border.overflow-hidden > button svg{transition:transform var(--mi-press) var(--mi-ease)}
.vault-scope .inline-flex.overflow-hidden.rounded-full > button:not(:disabled):active svg,body [role="dialog"] .rounded-lg.border.overflow-hidden > button:not(:disabled):active svg{transform:scale(.82)}
input.mi-bump{animation:mi-bump 220ms var(--mi-ease)}
/* 普通链接（面包屑/页脚/正文）按下变淡 */
.vault-scope main nav a:active,.vault-scope>footer a:active,.vault-scope main :is(article,.prose) a:active{opacity:.6;transition:opacity var(--mi-press)}

/* ---------- 悬停：只在真正可悬停的设备上 ---------- */
@media (hover:hover) and (pointer:fine){
  .vault-scope button.bg-primary:not(:disabled):hover,.vault-scope a.bg-primary:hover,body [role="dialog"] button.bg-primary:not(:disabled):hover{box-shadow:0 8px 20px -10px rgba(0,0,0,.45)!important}
  .dark .vault-scope button.bg-primary:not(:disabled):hover,.dark .vault-scope a.bg-primary:hover{box-shadow:0 8px 22px -10px rgba(255,255,255,.28)!important}
  .vault-scope button.border:not(.bg-primary):not(:disabled):hover,.vault-scope a.border.rounded-full:not(.bg-primary):hover{border-color:var(--border-strong,#d2d2d7)!important;background-color:var(--surface-2,#f2f2f4)!important}
  .vault-scope a[href^="/products/"]:has(> div > span.relative):hover{border-color:rgba(0,0,0,.1)!important}
  .dark .vault-scope a[href^="/products/"]:has(> div > span.relative):hover{border-color:rgba(255,255,255,.14)!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover{border-color:var(--border-strong,#d2d2d7)!important;box-shadow:var(--shadow)!important}
  /* 规格选项 / 分类筛选 */
  .vault-scope main button.border-2:not(.border-primary):not(:disabled):hover{border-color:var(--ink-3,#8e8e93)!important}
  .vault-scope main aside button.rounded-full:not(.bg-primary):hover,.vault-scope main aside button.rounded-lg:hover{background-color:var(--surface-2,#f2f2f4)!important;color:var(--ink)!important}
  /* 悬停上浮 + 按下轻压（与 moka.css 默认悬停合并，而非取消） */
  .vault-scope a[href^="/products/"]:has(> div > span.relative):hover:active,.vault-scope main a[href^="/blog/"].rounded-lg:hover:active{transform:translateY(-2px) scale(.985)!important;transition-duration:var(--mi-press)!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover:active{transform:translateY(-1px) scale(.98)!important;transition-duration:var(--mi-press)!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\] > span{transition:transform var(--mi-dur) var(--mi-ease),background-color var(--mi-dur)}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover > span{transform:translateY(-2px) rotate(-4deg)}
  .vault-scope main aside .overflow-x-auto button.bg-primary:hover{box-shadow:none!important}
  /* 博客列表卡片实际为 rounded-xl，moka.css 的 .rounded-lg 悬停规则未命中，此处补上同款上浮 */
  .vault-scope main a[href^="/blog/"].rounded-xl.bg-card:hover:active{transform:translateY(-2px) scale(.985)!important;transition-duration:var(--mi-press)!important}
  .vault-scope main nav a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-3,#8e8e93)}
  .vault-scope main .inline-flex.overflow-hidden.rounded-full > button:not(:disabled):hover,body [role="dialog"] .rounded-lg.border.overflow-hidden > button:not(:disabled):hover{background:var(--surface-2,#f2f2f4)!important}
}
/* 触屏（hover:none 且 pointer:coarse，即手机/平板）：取消 moka.css 悬停位移，避免点按后“粘滞”在上浮状态；
   桌面与无指针的无头环境不受影响，moka.css 默认悬停效果保持原样 */
@media (hover:none) and (pointer:coarse){
  .vault-scope a[href^="/products/"]:has(> div > span.relative):hover,.vault-scope main a[href^="/blog/"].rounded-lg:hover,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:hover{transform:none!important;box-shadow:var(--shadow-sm)!important}
  .vault-scope a[href^="/products/"]:hover > div > span.relative > img{transform:none!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover::after{transform:none}
  .vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button:hover{transform:none!important;box-shadow:none!important}
  .vault-scope>header>div>a:first-child:hover img{transform:none}
  .vault-scope>header nav a:not(.router-link-active):hover::after{transform:scaleX(0)}
  /* 按压态放在最后，确保优先 */
  .vault-scope a[href^="/products/"]:has(> div > span.relative):active{transform:scale(.97)!important;transition-duration:var(--mi-press)!important}
  .vault-scope main a[href^="/blog/"].rounded-lg:active,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:active,.vault-scope main a[href^="/categories/"].min-h-\[116px\]:active{transform:scale(.97)!important;transition-duration:var(--mi-press)!important}
}

/* ---------- 选中/切换态平滑 ---------- */
.vault-scope main button.border-2,.vault-scope main aside button{transition:background-color var(--mi-dur) var(--mi-ease),color var(--mi-dur) var(--mi-ease),border-color var(--mi-dur) var(--mi-ease),transform var(--mi-dur) var(--mi-ease)!important}
.vault-scope main section > .flex.border-b-2 > span{transition:color var(--mi-dur) var(--mi-ease),border-color var(--mi-dur) var(--mi-ease)}
.vault-scope main ol > li > span.rounded-full{transition:background-color var(--mi-dur) var(--mi-ease),border-color var(--mi-dur) var(--mi-ease),color var(--mi-dur)}
/* 支付方式（启用支付渠道后出现；通用选择器） */
.vault-scope main aside :is(button,label).border{transition:border-color var(--mi-dur) var(--mi-ease),background-color var(--mi-dur) var(--mi-ease),box-shadow var(--mi-dur) var(--mi-ease),transform var(--mi-dur) var(--mi-ease)!important}
.vault-scope main aside :is(button,label).border:active{transform:scale(.98)!important}
.vault-scope main aside :is(button,label).border:is(.border-primary,[aria-checked="true"],[aria-pressed="true"],:has(input:checked)){box-shadow:0 0 0 1px var(--ink)!important}

/* ---------- 输入框 ---------- */
.vault-scope :is(input,textarea)::placeholder{transition:opacity var(--mi-dur) var(--mi-ease)}
.vault-scope :is(input,textarea):focus::placeholder{opacity:.55}
.vault-scope input.mi-invalid,.vault-scope textarea.mi-invalid,body [role="dialog"] input.mi-invalid{border-color:var(--mi-invalid)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--mi-invalid) 12%,transparent)!important}
.mi-shake{animation:mi-shake 360ms var(--mi-ease)}

/* ---------- 提交按钮加载态（防重复提交） ---------- */
.mi-loading{pointer-events:none!important;cursor:progress!important;opacity:.82}
.mi-loading svg{display:none!important}
.mi-loading::before{content:"";flex:none;width:1em;height:1em;margin-right:.15em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mi-spin 700ms linear infinite}

/* ---------- 复制按钮反馈 ---------- */
.mi-copied{box-shadow:0 0 0 3px rgba(142,142,147,.35)!important}

/* ---------- 弹窗 / 底部抽屉 / 下拉 / 提示 ---------- */
body > .fixed.inset-0.z-50[class*="bg-black"]{animation:mi-fade 200ms var(--mi-ease) both}
body [role="dialog"][aria-modal="true"]{animation:mi-sheet 260ms var(--mi-ease) both}
@media (min-width:768px){body [role="dialog"][aria-modal="true"]{animation-name:mi-pop}}
body [role="dialog"] .rounded-xl.border.cursor-pointer,body [role="dialog"] h3.cursor-pointer{transition:opacity var(--mi-dur)}
body [role="dialog"] .rounded-xl.border.cursor-pointer:active{opacity:.75}
.vault-scope>header .absolute.rounded-md.border.bg-card :is(a,button){transition:background-color var(--mi-dur) var(--mi-ease),color var(--mi-dur)!important}
.vault-scope>header .absolute.rounded-md.border.bg-card :is(a,button):active{background:var(--surface-2,#f2f2f4)!important;transform:none!important}
body > .fixed.pointer-events-none > *{animation:mi-toast 240ms var(--mi-ease) both}
.mi-toast{position:fixed;left:50%;bottom:32px;z-index:2147483001;transform:translate(-50%,16px);opacity:0;display:flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:rgba(29,29,31,.92);color:#fff;font:500 14px/1.2 var(--font-body,system-ui);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 32px -12px rgba(0,0,0,.45);transition:opacity 220ms var(--mi-ease),transform 220ms var(--mi-ease);pointer-events:none}
.dark .mi-toast,html.dark .mi-toast{background:rgba(245,245,247,.94);color:#1d1d1f}
.mi-toast.show{opacity:1;transform:translate(-50%,0)}
.mi-toast svg{width:16px;height:16px;flex:none}

/* ---------- 入场 / 骨架 ---------- */
.mi-reveal{opacity:0;transform:translateY(12px)}
.mi-reveal.mi-in{opacity:1;transform:none;transition:opacity 480ms var(--mi-ease),transform 480ms var(--mi-ease)}
.vault-scope main :is(div,span):has(> img.moka-img-wait){background:linear-gradient(110deg,var(--surface-2,#ececee) 30%,var(--surface,#f6f6f8) 50%,var(--surface-2,#ececee) 70%);background-size:200% 100%;animation:moka-shimmer 1.4s linear infinite}

/* ---------- 触屏：≥44px 点击区 ---------- */
@media (pointer:coarse){
  html .vault-scope>header .ml-auto>a.rounded-full.h-10,html .vault-scope>header .ml-auto>button.rounded-full.h-10,html .vault-scope>header .ml-auto .relative>button.rounded-full.h-10{width:44px!important;height:44px!important}
  html .vault-scope>header .ml-auto{gap:2px!important}
  .vault-scope main aside button.rounded-full,.vault-scope main button.border-2{min-height:44px}
  .vault-scope a[href^="/products/"] > div.mt-auto > button{min-height:36px}
  .vault-scope>footer>div:first-child a{min-height:44px}
  .vault-scope main nav a{display:inline-flex;align-items:center;min-height:44px}
  .vault-scope main img[alt="captcha"] + button,body [role="dialog"] img[alt="captcha"] + button{min-height:44px;padding:0 8px}
  body [role="dialog"] .rounded-lg.border.overflow-hidden > button{width:44px!important;height:44px!important}
  body [role="dialog"] .rounded-lg.border.overflow-hidden > input{height:44px!important}
  .vault-scope>header .absolute.rounded-md.border.bg-card :is(a,button){min-height:44px}
}


/* ---------- 产品分类 ---------- */
/* 首页“按分类逛”卡片：焦点环外扩 */
.vault-scope main a[href^="/categories/"].min-h-\[116px\]:focus-visible{outline-offset:3px!important}
/* 分类筛选（/products 与 /categories/*）：JS 加 .mi-catnav 后启用滑动指示器 */
.mi-catnav{position:relative;isolation:isolate}
.mi-catnav button.rounded-full{position:relative;overflow:hidden;background-color:transparent!important;box-shadow:none!important;transition:color 260ms var(--mi-ease),transform var(--mi-press) var(--mi-ease)!important}
.mi-catnav button.rounded-full::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--surface-2,#f2f2f4);transition:opacity var(--mi-dur) var(--mi-ease),background-color var(--mi-dur) var(--mi-ease)}
.mi-catnav button.rounded-full.bg-primary::before{opacity:0}
.mi-cat-ind{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;opacity:0;background:var(--ink,#1d1d1f);will-change:transform}
.mi-cat-ind.mi-ind-anim{transition:transform 280ms var(--mi-ease),width 280ms var(--mi-ease),height 280ms var(--mi-ease),opacity var(--mi-dur)}
@media (hover:hover) and (pointer:fine){.mi-catnav button.rounded-full:not(.bg-primary):hover{color:var(--ink)!important}}
@media (max-width:1023.98px){
  /* 横向滚动：吸附 + 两端渐隐 + 隐藏滚动条 */
  .mi-catnav{scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mi-catnav::-webkit-scrollbar{display:none}
  .mi-catnav > *{scroll-snap-align:start}
  .mi-catnav.mi-fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .mi-catnav.mi-fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
  .mi-catnav.mi-fade-l.mi-fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}
@media (min-width:1024px){
  /* 桌面侧栏：浅灰滑块，文字用正文色（修正原模板浅底白字看不清） */
  .mi-catnav button.rounded-full::before{background:transparent}
  .mi-cat-ind{background:color-mix(in srgb,var(--ink,#1d1d1f) 7%,transparent)}
  .mi-catnav button.rounded-full.bg-primary{color:var(--ink,#1d1d1f)!important;font-weight:700}
  .mi-catnav button.rounded-full.bg-primary::after{content:"";position:absolute;left:4px;top:50%;width:3px;height:14px;margin-top:-7px;border-radius:2px;background:var(--ink,#1d1d1f);animation:mi-fade 200ms var(--mi-ease) both}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.mi-catnav button.rounded-full:not(.bg-primary):hover::before{background:var(--surface-2,#f2f2f4)}}
/* 切换分类：旧列表变暗 + 图片骨架闪光，新列表淡入 */
.vault-scope main .mi-grid-busy{cursor:progress}
.vault-scope main .mi-grid-busy a[href^="/products/"]{opacity:.5;pointer-events:none;transition:opacity 180ms var(--mi-ease)!important}
.vault-scope main .mi-grid-busy a[href^="/products/"] > div > span.relative > img{opacity:0;transition:opacity 180ms var(--mi-ease)}
.vault-scope main .mi-grid-busy a[href^="/products/"] > div > span.relative{background:linear-gradient(110deg,var(--surface-2,#ececee) 30%,var(--surface,#f6f6f8) 50%,var(--surface-2,#ececee) 70%)!important;background-size:200% 100%!important;animation:moka-shimmer 1.2s linear infinite!important}
.vault-scope main .mi-grid-in > :is(section,div){animation:mi-fade 240ms var(--mi-ease) both}
/* 空分类 / 无结果 */
.vault-scope main section > .border-dashed.py-14{background:var(--surface,#fff);border-color:var(--border-strong,#d2d2d7)!important;animation:mi-pop 320ms var(--mi-ease) both}
.vault-scope main section > .border-dashed.py-14 > svg{opacity:.45!important}
.vault-scope main section > .border-dashed.py-14 > p{color:var(--ink-2,#6e6e73);font-weight:500}
.vault-scope main section > .border-dashed.py-14 > button{min-height:36px;padding:0 16px!important}
@media (pointer:coarse){.vault-scope main section > .border-dashed.py-14 > button{min-height:44px}}
/* 标题随分类切换淡入 */
.vault-scope main h1.mi-swap{animation:mi-fade 260ms var(--mi-ease) both}
/* 面包屑 */
.vault-scope main nav a{transition:color var(--mi-dur) var(--mi-ease),opacity var(--mi-press)}

@keyframes mi-spin{to{transform:rotate(360deg)}}
@keyframes mi-bump{40%{transform:scale(1.12)}}
@keyframes mi-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes mi-fade{from{opacity:0}}
@keyframes mi-sheet{from{transform:translateY(24px);opacity:.4}}
@keyframes mi-pop{from{transform:translateY(8px) scale(.98);opacity:0}}
@keyframes mi-toast{from{transform:translateY(-8px);opacity:0}}

/* ---------- 减少动态效果：保留状态，去掉位移与动画 ---------- */
@media (prefers-reduced-motion:reduce){
  /* :is(*,#\#) 让本规则带上 ID 级优先级，压过 moka.css 中更具体的 transition 声明 */
  .vault-scope :is(*,#\#),.vault-scope :is(*,#\#)::before,.vault-scope :is(*,#\#)::after,body [role="dialog"],body [role="dialog"] :is(*,#\#),body > .fixed :is(*,#\#),.mi-toast{animation:none!important;transition:none!important}
  .vault-scope :is(a,button,[role="button"],#\#):is(:hover,:active),body [role="dialog"] :is(button,#\#):active{transform:none!important}
  .vault-scope a[href^="/products/"]:hover > div > span.relative > :is(img,#\#){transform:none!important}
  .mi-reveal{opacity:1!important;transform:none!important}
  .mi-loading::before{animation:none!important;border-right-color:currentColor;opacity:.5}
  .mi-shake,input.mi-bump{animation:none!important}
  .mi-cat-ind{transition:none!important}
  .vault-scope main a[href^="/blog/"].rounded-xl.bg-card:is(:hover,:active,#\#){transform:none!important;transition:none!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover > :is(span,#\#){transform:none!important}
  .mi-catnav{scroll-behavior:auto}
}

/* ---------- v4 路由加载反馈 ---------- */
.mi-route{position:fixed;left:0;top:0;right:0;height:2px;z-index:2147483000;pointer-events:none;background:var(--ink,#1d1d1f);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition-property:transform;transition-timing-function:var(--mi-ease)}
.mi-route.mi-route-on{opacity:1}
.mi-route.mi-route-done{opacity:0;transition:transform 180ms var(--mi-ease),opacity 280ms ease 0ms}
.mi-route::after{content:"";position:absolute;right:0;top:0;width:80px;height:100%;box-shadow:0 0 8px var(--ink,#1d1d1f);opacity:.35}
html.dark .mi-route::after{opacity:.5}
/* 等待新页面时：当前内容轻微变暗（不跳布局） */
.vault-scope main{transition:opacity 220ms var(--mi-ease)}
.vault-scope main.mi-route-wait{opacity:.72;cursor:progress}
/* 点中的卡片保持“按下”直到新页面出现 */
.vault-scope a[href^="/products/"].mi-nav-held:is(*,#\#){transform:scale(.975)!important;transition:transform 120ms var(--mi-ease)!important;box-shadow:var(--shadow-sm)!important}
.vault-scope a[href^="/categories/"].mi-nav-held:is(*,#\#){transform:scale(.98)!important;transition:transform 120ms var(--mi-ease)!important}
.vault-scope a.mi-nav-held{opacity:.92}
/* 首页分类入口：触屏按下 + 焦点 */
.vault-scope main a[href^="/categories/"].min-h-\[116px\]:active{transform:scale(.98)!important;transition-duration:var(--mi-press)!important}
.vault-scope main a[href^="/categories/"].min-h-\[116px\]:active > span{transform:scale(.92)}
.vault-scope main a[href^="/categories/"]:focus-visible{outline:2px solid var(--mi-ring)!important;outline-offset:3px!important;border-radius:inherit}
/* 商品卡键盘焦点：同时抬起一点，便于辨认 */
.vault-scope a[href^="/products/"]:has(> div > span.relative):focus-visible{box-shadow:var(--shadow-lg)!important}
/* 分类 chip 焦点环贴合胶囊 */
.mi-catnav button.rounded-full:focus-visible{outline-offset:2px!important}
@media (prefers-reduced-motion:reduce){
  .mi-route,.mi-route.mi-route-done{transition:none!important}
  .mi-route::after{display:none}
  .vault-scope main{transition:none!important}
  .vault-scope a.mi-nav-held:is(*,#\#),.vault-scope main a[href^="/categories/"].min-h-\[116px\]:active:is(*,#\#){transform:none!important}
}
/* 触屏按下（JS 加 .mi-press，比 :active 更及时；iOS/安卓一致） */
.vault-scope a[href^="/products/"]:has(> div > span.relative).mi-press:is(*,#\#),.vault-scope main a[href^="/blog/"].mi-press:is(*,#\#){transform:scale(.97)!important;transition:transform var(--mi-press) var(--mi-ease)!important}
.vault-scope main a[href^="/categories/"].min-h-\[116px\].mi-press:is(*,#\#){transform:scale(.97)!important;transition:transform var(--mi-press) var(--mi-ease)!important}
.vault-scope main a[href^="/categories/"].min-h-\[116px\].mi-press > span{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.vault-scope a.mi-press:is(*,#\#){transform:none!important}}
/* v5：博客卡/商品卡上浮只由 transform 负责（moka.css 的 -4px）；中和 Tailwind hover:-translate-y-* 的 translate 属性，避免叠加成 -7/-8px */
.vault-scope main a[href^="/blog/"]:is(.rounded-lg,.rounded-xl.bg-card):is(*,#\#),.vault-scope a[href^="/products/"]:has(> div > span.relative):is(*,#\#){translate:none!important}

/* ================= v6 · 个人中心（/me*）移动端修正 ================= */
/* 1) 横向标签栏：Safari 下 w-full 的按钮在 flex-row 里被压缩成细条（露出半截字/「⋮」状碎片、选中底色压到邻项）。
      改为不收缩的自然宽度 + 滚动吸附 + 两端渐隐 + 当前项自动居中（JS 加 .mi-menav）。 */
@media (max-width:900px){
  .vault-scope main aside > nav.mi-menav{gap:4px;scroll-snap-type:x proximity;scroll-padding-inline:24px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  .vault-scope main aside > nav.mi-menav::-webkit-scrollbar{display:none}
  .vault-scope main aside > nav.mi-menav > button{flex:0 0 auto!important;width:auto!important;min-width:max-content;min-height:44px;scroll-snap-align:center;border-radius:10px;
    transition:background-color var(--mi-dur) var(--mi-ease),color var(--mi-dur) var(--mi-ease),transform var(--mi-press) var(--mi-ease)}
  .vault-scope main aside > nav.mi-menav > button:active{transform:scale(.96)}
  .vault-scope main aside > nav.mi-menav > button > *{flex:none}
  /* 两端渐隐：sticky 伪元素覆盖（用卡片自身底色，不裁掉卡片边框/圆角） */
  .vault-scope main aside > nav.mi-menav{padding-left:0!important;padding-right:0!important}
  .vault-scope main aside > nav.mi-menav > button:first-of-type{margin-left:10px}
  .vault-scope main aside > nav.mi-menav > button:last-of-type{margin-right:10px}
  .vault-scope main aside > nav.mi-menav::before,.vault-scope main aside > nav.mi-menav::after{content:"";position:sticky;z-index:2;flex:0 0 36px;width:36px;align-self:stretch;margin-block:-10px;pointer-events:none;opacity:0;transition:opacity var(--mi-dur) var(--mi-ease)}
  .vault-scope main aside > nav.mi-menav::before{left:0;margin-right:-40px;background:linear-gradient(90deg,var(--mi-navbg,#fff) 20%,transparent)}
  .vault-scope main aside > nav.mi-menav::after{right:0;margin-left:-40px;background:linear-gradient(270deg,var(--mi-navbg,#fff) 20%,transparent)}
  .vault-scope main aside > nav.mi-menav.mi-fade-l::before,.vault-scope main aside > nav.mi-menav.mi-fade-r::after{opacity:1}
}
@media (max-width:900px) and (hover:none){
  .vault-scope main aside > nav.mi-menav > button:not(.bg-primary\/10):hover{background-color:transparent!important}
}

/* 2) 悬浮客服按钮（#moka-cs，站点自定义脚本注入）：移动端缩小到 46px、个人中心页贴近右下角（该页没有底部购买栏），
      下滑时自动让开、上滑/到底/点开时回来，输入框聚焦（键盘弹出）时隐藏；触控区仍 ≥44px。 */
@media (max-width:640px){
  #moka-cs{transition:transform 260ms var(--mi-ease,cubic-bezier(.2,.8,.2,1)),opacity 200ms var(--mi-ease,ease)}
  #moka-cs .fab{width:46px!important;height:46px!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;transition:transform var(--mi-press,120ms) ease}
  #moka-cs .fab:active{transform:scale(.92)!important}
  #moka-cs .fab svg{width:20px!important;height:20px!important}
  html.mi-me #moka-cs{right:12px!important;bottom:max(16px,calc(10px + env(safe-area-inset-bottom)))!important}
  #moka-cs.mi-cs-away:not(.open){transform:translateX(calc(100% + 20px));opacity:0;pointer-events:none}
  #moka-cs .panel{max-width:calc(100vw - 28px)}
}

/* 3) 底部安全区：内容/页脚留出浏览器工具栏与客服按钮的空间；聚焦输入框时滚动到工具栏之上 */
.vault-scope{min-height:100vh;min-height:100dvh}
@media (max-width:640px){
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  html.mi-me .vault-scope main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .vault-scope > footer{padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom)))}
}

@media (prefers-reduced-motion:reduce){
  .vault-scope main aside > nav.mi-menav{scroll-behavior:auto}
  .vault-scope main aside > nav.mi-menav > button:active,#moka-cs .fab:active{transform:none!important}
  #moka-cs{transition:opacity 1ms}
  #moka-cs.mi-cs-away:not(.open){transform:none}
}

/* ================= v7：Logo 动效（头部 + 页脚 Logo；仅 CSS 变换，不改图片） =================
   待机：5.2s 极轻呼吸（scale 1→1.028，上浮 1.5px）；悬停（仅 hover:hover）：一次软弹 squish；
   按下：.mi-logo-down 压扁，抬起：.mi-logo-pop 回弹；弹跳叠加在呼吸之上（animation-composition:add，不支持的旧浏览器退化为直接替换）（JS 统一处理鼠标与触屏）；减少动效：全部关闭 */
@keyframes mi-logo-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.028)}}
@keyframes mi-logo-squish{0%{transform:scale(1)}28%{transform:scale(1.09,.92)}52%{transform:scale(.96,1.06)}74%{transform:scale(1.025,.985)}100%{transform:scale(1)}}
@keyframes mi-logo-press{to{transform:scale(1.07,.88)}}
@keyframes mi-logo-pop{0%{transform:scale(1.07,.88)}34%{transform:scale(.94,1.09) translateY(-2px)}60%{transform:scale(1.03,.97)}82%{transform:scale(.995,1.01)}100%{transform:scale(1)}}
:is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]) > img{
  transform-origin:50% 85%;backface-visibility:hidden;
  animation:mi-logo-breathe 5.2s cubic-bezier(.45,0,.55,1) infinite;
}
@media (hover:hover) and (pointer:fine){
  :is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]):hover > img{
    animation:mi-logo-breathe 5.2s cubic-bezier(.45,0,.55,1) infinite,mi-logo-squish .72s cubic-bezier(.33,.9,.4,1);animation-composition:replace,add;
  }
}
:is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]).mi-logo-down > img:is(*,#\#){animation:mi-logo-breathe 5.2s cubic-bezier(.45,0,.55,1) infinite,mi-logo-press .14s cubic-bezier(.3,.7,.4,1) forwards;animation-composition:replace,add}
:is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]).mi-logo-pop > img:is(*,#\#){animation:mi-logo-breathe 5.2s cubic-bezier(.45,0,.55,1) infinite,mi-logo-pop .62s cubic-bezier(.3,.8,.35,1);animation-composition:replace,add}
:is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]){-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  :is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]) > img:is(*,#\#){animation:none!important;transform:none!important;transition:opacity .12s linear!important}
  :is(.vault-scope>header>div>a:first-child,.vault-scope>footer a[href="/"]):is(:active,.mi-logo-down) > img:is(*,#\#){opacity:.7}
}
/* ---- v7b：页头分层内联 SVG Logo（墨卡·头像 BG5 分层版；参数参照其 demo.html，按 30px 尺寸换算位移） ----
   #moka-float 呼吸 3.6s + #moka-shadow 同步；双眼 5.2s 眨眼；#moka-char 0.62s 软弹（悬停 / 按下抬起 / 键盘回车） */
.vault-scope>header>div>a:first-child>img.mi-logo-hidden{display:none!important}
.vault-scope>header>div>a:first-child>svg.mi-logo-svg{display:block;flex:none;overflow:visible;-webkit-tap-highlight-color:transparent}
.dark .moka-logo{--moka-body:#EFEFEF;--moka-shade:#000;--moka-shade-opacity:.16;--moka-highlight:#FFF;--moka-highlight-opacity:.75;--moka-eye:#161616;--moka-eye-glint:#3C3C3C;--moka-mouth:#8C8C8C;--moka-shadow:#FFF;--moka-shadow-opacity:.20}
.moka-logo #moka-shadow,.moka-logo #moka-float,.moka-logo #moka-char,.moka-logo #moka-eye-l,.moka-logo #moka-eye-r{transform-box:fill-box}
.moka-logo #moka-shadow,.moka-logo #moka-eye-l,.moka-logo #moka-eye-r{transform-origin:50% 50%}
.moka-logo #moka-float,.moka-logo #moka-char{transform-origin:50% 100%}
.moka-logo #moka-float{animation:mi-mk-breathe 3.6s ease-in-out infinite}
.moka-logo #moka-shadow{animation:mi-mk-shadow 3.6s ease-in-out infinite}
.moka-logo #moka-eye-l{animation:mi-mk-blink 5.2s ease-in-out infinite}
.moka-logo #moka-eye-r{animation:mi-mk-blink 5.2s ease-in-out .04s infinite}
@keyframes mi-mk-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-48px) scale(.985,1.02)}} /* 48 视图单位 ≈ 30px 尺寸下 1.4px */
@keyframes mi-mk-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.65}}
@keyframes mi-mk-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
@keyframes mi-mk-boing{0%{transform:scale(1,1)}22%{transform:scale(1.08,.9)}45%{transform:scale(.95,1.07) translateY(-40px)}68%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}100%{transform:scale(1,1)}}
@keyframes mi-mk-press{to{transform:scale(1.08,.9)}}
@keyframes mi-mk-pop{0%{transform:scale(1.08,.9)}30%{transform:scale(.95,1.07) translateY(-40px)}58%{transform:scale(1.03,.97)}80%{transform:scale(.99,1.01)}100%{transform:scale(1,1)}}
@keyframes mi-mk-shadow-boing{0%,100%{transform:scale(1)}22%{transform:scale(1.06)}45%{transform:scale(.9)}}
@media (hover:hover) and (pointer:fine){
  .vault-scope>header>div>a:first-child:hover>svg.mi-logo-svg #moka-char{animation:mi-mk-boing .62s cubic-bezier(.3,.7,.4,1) 1}
}
.vault-scope>header>div>a:first-child.mi-logo-down>svg.mi-logo-svg #moka-char:is(*,#\#){animation:mi-mk-press .14s cubic-bezier(.3,.7,.4,1) forwards}
.vault-scope>header>div>a:first-child.mi-logo-pop>svg.mi-logo-svg #moka-char:is(*,#\#){animation:mi-mk-pop .62s cubic-bezier(.3,.7,.4,1) 1}
.vault-scope>header>div>a:first-child.mi-logo-pop>svg.mi-logo-svg #moka-shadow:is(*,#\#){animation:mi-mk-shadow 3.6s ease-in-out infinite,mi-mk-shadow-boing .62s ease-out 1;animation-composition:replace,add}
@media (prefers-reduced-motion:reduce){
  .moka-logo :is(#moka-float,#moka-shadow,#moka-char,#moka-eye-l,#moka-eye-r):is(*,#\#){animation:none!important;transform:none!important}
  .vault-scope>header>div>a:first-child>svg.mi-logo-svg{transition:opacity .12s linear}
  .vault-scope>header>div>a:first-child:is(:active,.mi-logo-down)>svg.mi-logo-svg{opacity:.7}
}