/* =====================================================================
   墨卡 MOKA — Dujiao-Next「vault」模板的高级感主题层
   注入方式：nginx sub_filter（见 部署指南.md），不修改官方程序，可随官方升级。
   设计：#f5f5f7 浅灰底 · 黑白灰 + 一个香槟铜点缀 · Inter + 系统中文字体 · 柔和阴影
   ===================================================================== */
@font-face{font-family:"MokaInter";src:url(/_moka/fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}

:root{--moka-ease:cubic-bezier(.22,.8,.24,1);--moka-dur:200ms}

/* ---------- 设计令牌（亮色） ---------- */
html .vault-scope,html body.vault-tokens{
  --font-head:"MokaInter",-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --font-body:"MokaInter",-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --bg:#f5f5f7;--bg-warm:#f5f5f7;--surface:#ffffff;--surface-2:#f2f2f4;
  --ink:#1d1d1f;--ink-2:#6e6e73;--ink-3:#8e8e93;
  --border:#e6e6ea;--border-strong:#d2d2d7;
  --red:#1d1d1f;--red-strong:#000000;--red-soft:#ededf0;
  --gold:#9a7b4f;--gold-strong:#6f5a3a;--gold-soft:#f4f0ea;
  --teal:#1d1d1f;--teal-strong:#3a3a3c;--teal-soft:#f0f0f2;
  --plum:#1d1d1f;--plum-soft:#f0f0f2;
  --on-red:#ffffff;--on-gold:#ffffff;--on-teal:#ffffff;
  --success:#1f7a4d;--warning:#8a6116;--danger:#c4372d;
  --moka-accent:#9a7b4f;
  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 6px rgba(0,0,0,.04),0 14px 34px -14px rgba(0,0,0,.14);
  --shadow-lg:0 4px 12px rgba(0,0,0,.05),0 30px 60px -24px rgba(0,0,0,.22);
  --ring:0 0 0 4px rgba(0,0,0,.08);
  --gap-block:72px;--ease:var(--moka-ease);
}
/* ---------- 暗色 ---------- */
html.dark .vault-scope,html.dark body.vault-tokens{
  --bg:#000000;--bg-warm:#0b0b0c;--surface:#161618;--surface-2:#1f1f22;
  --ink:#f5f5f7;--ink-2:#a1a1a6;--ink-3:#86868b;
  --border:#2a2a2d;--border-strong:#3a3a3d;
  --red:#f5f5f7;--red-strong:#ffffff;--red-soft:#232326;
  --gold:#c8a978;--gold-strong:#d9bf95;--gold-soft:#262219;
  --teal:#f5f5f7;--teal-strong:#d1d1d6;--teal-soft:#1f1f22;
  --plum:#f5f5f7;--plum-soft:#1f1f22;
  --on-red:#000000;--on-gold:#000;--on-teal:#000;
  --moka-accent:#c8a978;
  --shadow:0 2px 6px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 60px -24px rgba(0,0,0,.8);
  --ring:0 0 0 4px rgba(255,255,255,.14);
}
.vault-scope{font-size:16px;letter-spacing:-.003em;font-feature-settings:"cv11","ss01";line-height:1.65}
.vault-scope h1,.vault-scope h2,.vault-scope h3,.vault-scope h4{font-weight:600;letter-spacing:-.022em}
.vault-scope .font-extrabold{font-weight:650}
.vault-scope .tabular-nums{font-feature-settings:"tnum"}
.vault-scope ::selection{background:#1d1d1f;color:#fff}
.dark .vault-scope ::selection{background:#f5f5f7;color:#000}
/* 主按钮在暗色下用黑字 */
.vault-scope .bg-primary.text-white,.vault-scope .bg-primary{color:var(--on-red)}

/* ---------- 顶栏：半透明磨砂 ---------- */
.vault-scope>header{background:rgba(245,245,247,.72)!important;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)!important;transition:box-shadow var(--moka-dur) var(--moka-ease),background var(--moka-dur)}
.dark .vault-scope>header{background:rgba(10,10,12,.72)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.vault-scope>header.moka-scrolled{box-shadow:0 6px 24px -18px rgba(0,0,0,.35)}
.vault-scope>header>div{height:60px!important;max-width:1120px}
.vault-scope>header>div>a:first-child{gap:10px}
.vault-scope>header>div>a:first-child img{height:30px!important;width:30px;border-radius:8px;transition:transform var(--moka-dur) var(--moka-ease)}
.vault-scope>header>div>a:first-child::after{content:"墨卡";font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.vault-scope>header>div>a:first-child::before{content:"MOKA";order:3;font-size:10.5px;font-weight:600;letter-spacing:.28em;color:var(--ink-3);margin-left:-2px;padding-top:2px}
.vault-scope>header>div>a:first-child:hover img{transform:rotate(-6deg) scale(1.04)}
.vault-scope>header nav{margin-left:18px;gap:4px}
.vault-scope>header nav a{position:relative;background:transparent!important;color:var(--ink-2)!important;font-size:14px!important;font-weight:500!important;padding:8px 12px!important;border-radius:999px;transition:color var(--moka-dur) var(--moka-ease),background var(--moka-dur) var(--moka-ease),transform 150ms var(--moka-ease)}
.vault-scope>header nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform 220ms var(--moka-ease)}
.vault-scope>header nav a:hover{color:var(--ink)!important}
.vault-scope>header nav a:hover::after,.vault-scope>header nav a.router-link-active::after{transform:scaleX(1)}
.vault-scope>header nav a.router-link-active{color:var(--ink)!important}
.vault-scope>header .ml-auto>a.rounded-full.h-10,.vault-scope>header .ml-auto>button.rounded-full.h-10,.vault-scope>header .ml-auto .relative>button.rounded-full.h-10{height:36px!important;width:36px!important;background:transparent!important;color:var(--ink)!important;transition:background var(--moka-dur) var(--moka-ease),transform 150ms var(--moka-ease)}
.vault-scope>header .ml-auto>a.rounded-full.h-10:hover,.vault-scope>header .ml-auto>button.rounded-full.h-10:hover,.vault-scope>header .ml-auto .relative>button.rounded-full.h-10:hover{background:rgba(0,0,0,.06)!important}
.dark .vault-scope>header .ml-auto>a.rounded-full.h-10:hover,.dark .vault-scope>header .ml-auto>button.rounded-full.h-10:hover{background:rgba(255,255,255,.1)!important}
.vault-scope>header svg.lucide{width:17px!important;height:17px!important;stroke-width:1.6}
/* 只开放简体中文：隐藏语言切换 */
.vault-scope>header .relative:has(>button svg.lucide-languages){display:none}
.vault-scope>header a[href="/auth/login"].bg-primary{background:var(--ink)!important;color:var(--surface)!important;font-weight:500!important;font-size:13px!important;padding:7px 16px!important;margin-left:6px}
.vault-scope>header .absolute.rounded-md.border.bg-card{border-radius:16px!important;border-color:var(--border)!important;box-shadow:var(--shadow-lg)!important;padding:8px!important;animation:moka-pop 180ms var(--moka-ease)}
.vault-scope>header .absolute.rounded-md.border.bg-card a,.vault-scope>header .absolute.rounded-md.border.bg-card button{border-radius:10px!important;font-weight:500!important;color:var(--ink)!important}

/* ---------- 首页主视觉（Banner → Apple 式 Hero） ---------- */
.vault-scope main section:has(> div > .bg-gradient-to-r){max-width:1120px;padding-top:28px}
.vault-scope main section > div:has(> .bg-gradient-to-r){border:0!important;border-radius:28px!important;background:#efeff1!important;box-shadow:none!important}
.dark .vault-scope main section > div:has(> .bg-gradient-to-r){background:#111113!important}
.vault-scope main section > div > .bg-gradient-to-r{background:linear-gradient(90deg,rgba(242,242,244,.92) 0%,rgba(242,242,244,.55) 38%,rgba(242,242,244,0) 62%)!important}
.dark .vault-scope main section > div > .bg-gradient-to-r{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 55%,transparent)!important}
.vault-scope main section > div:has(> .bg-gradient-to-r) > img{object-position:right center;animation:moka-heroimg 1.2s var(--moka-ease) both}
.dark .vault-scope main section > div:has(> .bg-gradient-to-r) > img{filter:brightness(.62) contrast(1.05)}
.vault-scope main section > div:has(> .bg-gradient-to-r) > .relative{min-height:460px!important;padding:56px 64px!important;justify-content:center!important}
.vault-scope main section > div:has(> .bg-gradient-to-r) .mt-auto{margin-top:0!important;max-width:560px}
.vault-scope main section > div:has(> .bg-gradient-to-r) .mt-auto > span:first-child{background:none!important;border:0!important;backdrop-filter:none!important;padding:0!important;font-size:0!important;color:transparent!important;animation:moka-rise 600ms var(--moka-ease) both}
.vault-scope main section > div:has(> .bg-gradient-to-r) .mt-auto > span:first-child svg{display:none}
.vault-scope main section > div:has(> .bg-gradient-to-r) .mt-auto > span:first-child::after{content:"MOKA · 墨卡";font-size:12.5px;letter-spacing:.32em;font-weight:600;color:var(--moka-accent)}
.vault-scope main section > div:has(> .bg-gradient-to-r) h2{color:var(--ink)!important;font-size:clamp(34px,4vw,50px)!important;line-height:1.08!important;font-weight:650!important;letter-spacing:-.035em!important;margin-top:14px!important;animation:moka-rise 700ms 60ms var(--moka-ease) both}
.vault-scope main section > div:has(> .bg-gradient-to-r) p{color:var(--ink-2)!important;max-width:440px!important;font-size:18px!important;line-height:1.7!important;margin-top:16px!important;-webkit-line-clamp:3!important;animation:moka-rise 700ms 120ms var(--moka-ease) both}
.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap.pt-1\.5{padding-top:26px!important;animation:moka-rise 700ms 180ms var(--moka-ease) both}
.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button{background-image:linear-gradient(var(--ink),var(--ink))!important;color:var(--surface)!important;font-weight:500!important;font-size:15px!important;padding:12px 24px!important;min-height:46px}
.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button:hover{transform:translateY(-1px)!important;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap{position:relative}

.moka-hero-link{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--ink)!important;padding:12px 8px;margin-left:10px;border-radius:999px;transition:gap var(--moka-dur) var(--moka-ease),opacity var(--moka-dur)}
.moka-hero-link:hover{gap:8px;text-decoration:underline;text-underline-offset:4px}

/* ---------- 版块标题 ---------- */
.vault-scope main section{max-width:1120px}
.vault-scope main section h2.text-\[28px\]{font-size:30px!important;font-weight:650!important;letter-spacing:-.03em}
.vault-scope main section>.mb-\[22px\]{margin-bottom:26px!important;align-items:baseline!important}
.vault-scope main section>.mb-\[22px\] a,.vault-scope main section>.mb-\[22px\] .rounded-full{border:0!important;background:transparent!important;color:var(--ink-2)!important;font-weight:500!important;font-size:14px!important;box-shadow:none!important}
.vault-scope main section>.mb-\[22px\] a:hover{color:var(--ink)!important}

/* ---------- 分类块：中性卡片 ---------- */
.vault-scope main a[href^="/categories/"].min-h-\[116px\]{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border);border-radius:20px!important;min-height:132px!important;padding:22px!important;box-shadow:var(--shadow-sm)}
.vault-scope main a[href^="/categories/"].min-h-\[116px\] > span{background:var(--surface-2)!important;color:var(--ink)!important;border-radius:12px!important}
.vault-scope main a[href^="/categories/"].min-h-\[116px\] .font-bold{font-weight:600!important;font-size:16px}
.vault-scope main a[href^="/categories/"].min-h-\[116px\]::after{content:"→";position:absolute;right:22px;bottom:20px;color:var(--ink-3);transition:transform var(--moka-dur) var(--moka-ease),color var(--moka-dur)}
.vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover::after{transform:translateX(4px);color:var(--ink)}
.vault-scope main .grid:has(> a[href^="/categories/"].min-h-\[116px\]){grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:16px!important}

/* ---------- 商品卡片 ---------- */
.vault-scope main .grid:has(> a[href^="/products/"]){grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:24px!important}
.vault-scope main .grid:has(> a[href^="/blog/"].rounded-lg){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:20px!important}
.vault-scope a[href^="/products/"]:has(> div > span.relative > img),.vault-scope a[href^="/products/"]:has(> div > span.relative > svg){padding:0!important;gap:0!important;border-radius:20px!important;border:1px solid rgba(0,0,0,.05)!important;background:var(--surface)!important;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform 240ms var(--moka-ease),box-shadow 240ms var(--moka-ease)!important}
.dark .vault-scope a[href^="/products/"]:has(> div > span.relative){border-color:rgba(255,255,255,.06)!important}
.vault-scope a[href^="/products/"]:has(> div > span.relative):hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)!important}
.vault-scope a[href^="/products/"]:has(> div > span.relative):active{transform:translateY(-1px) scale(.985)!important;transition-duration:120ms!important}
.vault-scope a[href^="/products/"] > div > span.relative{height:auto!important;aspect-ratio:4/3;border-radius:0!important;background:linear-gradient(110deg,#ececee 30%,#f6f6f8 50%,#ececee 70%);background-size:200% 100%;animation:moka-shimmer 1.4s linear infinite}
.vault-scope a[href^="/products/"] > div > span.relative::after{display:none!important}
.vault-scope a[href^="/products/"] > div > span.relative > img{transition:transform 600ms var(--moka-ease),opacity 300ms var(--moka-ease)}
.vault-scope a[href^="/products/"]:hover > div > span.relative > img{transform:scale(1.045)}
.vault-scope a[href^="/products/"] > div > span.relative > div span{background:rgba(255,255,255,.78)!important;color:#1d1d1f!important;border:0!important;border-radius:999px!important;font-weight:500!important;padding:3px 10px!important;backdrop-filter:blur(10px)}
.vault-scope a[href^="/products/"] > div > span.relative > div{top:12px!important;right:auto!important;left:12px;justify-content:flex-start!important}
.vault-scope a[href^="/products/"] > div > div.px-1{padding:18px 20px 0!important;gap:6px!important}
.vault-scope a[href^="/products/"] > div > div.px-1 > span{font-size:11.5px!important;font-weight:500!important;letter-spacing:.08em;color:var(--ink-3)!important}
.vault-scope a[href^="/products/"] h3{font-size:16.5px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:-.01em}
.vault-scope a[href^="/products/"] > div.mx-1{margin:10px 20px 0!important;gap:6px!important}
.vault-scope a[href^="/products/"] > div.mx-1 > span{background:transparent!important;color:var(--ink-3)!important;padding:0!important;font-weight:500!important;font-size:12px!important}
.vault-scope a[href^="/products/"] > div.mx-1 > span + span::before{content:"·";margin-right:6px;color:var(--border-strong)}
.vault-scope a[href^="/products/"] > div.mx-1 > span svg{display:none}
.vault-scope a[href^="/products/"] > div.mt-auto{padding:16px 20px 20px!important;align-items:center!important}
.vault-scope a[href^="/products/"] > div.mt-auto .text-xl{font-size:20px!important;font-weight:600!important;letter-spacing:-.02em}
.vault-scope a[href^="/products/"] > div.mt-auto > button{background:var(--ink)!important;color:var(--surface)!important;font-weight:500!important;padding:8px 18px!important}
.vault-scope a[href^="/products/"] > div.mt-auto > button svg{display:none}

/* ---------- 最新动态 / 博客卡片 ---------- */
.vault-scope main a[href^="/blog/"].rounded-lg{border-radius:20px!important;border-color:rgba(0,0,0,.05)!important;box-shadow:var(--shadow-sm);transition:transform 240ms var(--moka-ease),box-shadow 240ms var(--moka-ease)!important}
.vault-scope main a[href^="/blog/"].rounded-lg:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)!important}
@media (hover:hover) and (pointer:fine){.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)!important}} /* 博客列表卡片实际为 rounded-xl：与 moka-interact 同值，仅精确指针设备 */
.vault-scope main a[href^="/blog/"] .text-primary,.vault-scope main a[href^="/blog/"] [class*="text-primary"]{color:var(--ink)!important}

/* ---------- 通用组件 ---------- */
.vault-scope .rounded-lg.border.bg-card{border-radius:20px;border-color:rgba(0,0,0,.06)}
.vault-scope input,.vault-scope textarea,.vault-scope select{border-radius:12px!important;transition:border-color var(--moka-dur) var(--moka-ease),box-shadow var(--moka-dur) var(--moka-ease),background var(--moka-dur)!important}
.vault-scope input:hover,.vault-scope textarea:hover{border-color:var(--border-strong)!important}
.vault-scope input:focus,.vault-scope textarea:focus,.vault-scope select:focus{outline:none!important;border-color:var(--ink)!important;box-shadow:0 0 0 4px rgba(0,0,0,.07)!important}
.dark .vault-scope input:focus,.dark .vault-scope textarea:focus{box-shadow:0 0 0 4px rgba(255,255,255,.1)!important}
.vault-scope :focus-visible{outline:2px solid var(--ink)!important;outline-offset:3px}
.vault-scope [class*="text-primary"]:not(.bg-primary){color:var(--ink)}
.vault-scope .border-primary{border-color:var(--ink)!important}
.vault-scope button.rounded-full.bg-primary,.vault-scope a.rounded-full.bg-primary,.vault-scope button.bg-primary{font-weight:500!important;letter-spacing:.01em}
.vault-scope [class*="animate-pulse"],.vault-scope .h-\[280px\].rounded-lg.border.bg-card,.vault-scope .h-\[76px\].rounded-lg.border.bg-card{background:linear-gradient(110deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%)!important;background-size:200% 100%!important;animation:moka-shimmer 1.4s linear infinite!important}

/* ---------- 商品详情 ---------- */
.vault-scope main img.rounded-lg,.vault-scope main .aspect-square.rounded-lg,.vault-scope main div.overflow-hidden.rounded-lg:has(>img){border-radius:24px!important}
.vault-scope main h1{font-weight:650!important;letter-spacing:-.03em!important}
@media (min-width:768px){.vault-scope main h1.text-\[34px\],.vault-scope main h1{font-size:28px!important;line-height:1.3!important}}
.vault-scope main>nav:first-child,.vault-scope main>div>nav:first-child{padding-top:12px}
.vault-scope main .text-\[34px\],.vault-scope main .text-4xl,.vault-scope main .text-3xl{letter-spacing:-.03em}
.vault-scope main button[class*="min-h"].rounded-lg.border-2,.vault-scope main button.rounded-lg.border{transition:all var(--moka-dur) var(--moka-ease)}

/* ---------- 文章 / 条款排版 ---------- */
.vault-scope .prose,.vault-scope article,.vault-scope main [class*="rich"]{font-size:16.5px;line-height:1.85}
.vault-scope main :is(article,.prose) h2{font-size:22px;margin:2.1em 0 .7em;font-weight:600}
.vault-scope main :is(article,.prose) h3{font-size:18px;margin:1.8em 0 .6em}
.vault-scope main :is(article,.prose) p{margin:0 0 1.05em;color:var(--ink)}
.vault-scope main :is(article,.prose) li{margin:.35em 0}
.vault-scope main :is(article,.prose) blockquote{margin:1.6em 0;padding:16px 20px;border-left:0;border-radius:14px;background:var(--surface-2);color:var(--ink-2);font-style:normal}
.vault-scope main :is(article,.prose) strong{font-weight:600;color:var(--ink)}
.vault-scope .moka-demo-note{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--gold-soft);color:var(--gold-strong)!important;font-size:14px}
.vault-scope .moka-muted{color:var(--ink-3)!important;font-size:14px}

/* ---------- 页脚 ---------- */
.vault-scope>footer{background:var(--bg)!important;border-top:1px solid var(--border)!important;margin-top:96px!important}
.vault-scope>footer>div:first-child{max-width:1120px;padding-top:56px!important}
.vault-scope>footer h4{font-size:12px!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:.02em}
.vault-scope>footer a{font-size:13px!important;color:var(--ink-2)!important;transition:color var(--moka-dur)}
.vault-scope>footer a:hover{color:var(--ink)!important}
.vault-scope>footer a svg{display:none}
.vault-scope>footer>div:first-child>div:first-child p{font-size:13px!important}
.vault-scope>footer>div:first-child>div:first-child>a::after{content:"墨卡";font-size:17px;font-weight:600;letter-spacing:.06em}
.vault-scope>footer>div:first-child>div:first-child>a img{height:28px!important;width:28px;border-radius:7px}
.vault-scope>footer>div:last-child{max-width:1120px;font-size:12px!important;color:var(--ink-3)!important}
.vault-scope>footer>div:last-child>span:last-child{visibility:hidden}

/* ---------- Toast（系统 + 墨卡） ---------- */
body [role="alert"].rounded-xl{border-radius:999px!important;border:0!important;background:rgba(29,29,31,.92)!important;color:#fff!important;box-shadow:0 12px 32px -12px rgba(0,0,0,.45)!important;padding:11px 20px!important;font-weight:500!important}
.moka-toast{position:fixed;left:50%;bottom:32px;z-index:2147483000;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(--moka-ease),transform 220ms var(--moka-ease);pointer-events:none}
.moka-toast.show{opacity:1;transform:translate(-50%,0)}
.moka-toast svg{width:16px;height:16px}
.moka-copyable{cursor:copy;border-radius:6px;transition:background var(--moka-dur)}
.moka-copyable:hover{background:var(--surface-2)}

/* ---------- 微交互 ---------- */
.vault-scope a,.vault-scope button,.vault-scope [role="button"]{-webkit-tap-highlight-color:transparent}
.vault-scope button:not(:disabled),.vault-scope a.rounded-full,.vault-scope [role="button"]{transition:transform 160ms var(--moka-ease),background-color var(--moka-dur) var(--moka-ease),color var(--moka-dur) var(--moka-ease),box-shadow var(--moka-dur) var(--moka-ease),border-color var(--moka-dur) var(--moka-ease)!important}
.vault-scope button:not(:disabled):active,.vault-scope a.rounded-full:active,.vault-scope [role="button"]:active{transform:scale(.96)!important}
.vault-scope a[href^="/categories/"].min-h-\[116px\]:active,.vault-scope main a[href^="/blog/"].rounded-lg:active,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:active{transform:scale(.98)!important}
.moka-ripple-host{position:relative;overflow:hidden}
.moka-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.28;background:currentColor;animation:moka-ripple 520ms var(--moka-ease) forwards}
.moka-reveal{opacity:0;transform:translateY(14px)}
.moka-reveal.moka-in{opacity:1;transform:none;transition:opacity 520ms var(--moka-ease),transform 520ms var(--moka-ease)}
.vault-scope main.moka-route>*{animation:moka-page 260ms var(--moka-ease) both}
.vault-scope img.moka-img-wait{opacity:0}
.vault-scope img.moka-img-ok{opacity:1;transition:opacity 350ms var(--moka-ease),transform 600ms var(--moka-ease)}

@keyframes moka-shimmer{to{background-position:-200% 0}}
@keyframes moka-ripple{to{transform:scale(1);opacity:0}}
@keyframes moka-page{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes moka-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes moka-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes moka-heroimg{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* ---------- 移动端 ---------- */
@media (max-width:767px){
  .vault-scope main section:has(> div > .bg-gradient-to-r){padding:14px 14px 0!important}
  .vault-scope main section > div:has(> .bg-gradient-to-r){border-radius:24px!important}
  .vault-scope main section > div > .bg-gradient-to-r{display:none}
  .vault-scope main section > div:has(> .bg-gradient-to-r) > img{inset:auto 0 0 0!important;top:auto!important;height:58%!important;object-position:center 72%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .vault-scope main section > div:has(> .bg-gradient-to-r) > .relative{min-height:600px!important;padding:34px 24px!important;justify-content:flex-start!important}
  .vault-scope main section > div:has(> .bg-gradient-to-r) h2{font-size:29px!important;margin-top:10px!important}
  .vault-scope main section > div:has(> .bg-gradient-to-r) p{font-size:15px!important;margin-top:12px!important}
  .vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap.pt-1\.5{padding-top:20px!important}
  .vault-scope main section h2.text-\[28px\]{font-size:24px!important}
  .vault-scope main .grid:has(> a[href^="/products/"]){grid-template-columns:1fr 1fr!important;gap:12px!important}
  .vault-scope a[href^="/products/"] > div > div.px-1{padding:12px 12px 0!important}
  .vault-scope a[href^="/products/"] h3{font-size:14px!important}
  .vault-scope a[href^="/products/"] > div.mx-1{display:none!important}
  .vault-scope a[href^="/products/"] > div.mt-auto{padding:10px 12px 14px!important}
  .vault-scope a[href^="/products/"] > div.mt-auto .text-xl{font-size:16px!important}
  .vault-scope a[href^="/products/"] > div.mt-auto > button{padding:6px 12px!important;font-size:12px!important}
  .vault-scope a[href^="/products/"] > div > span.relative > div{display:none!important}
  .vault-scope main .grid:has(> a[href^="/categories/"].min-h-\[116px\]){grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]{min-height:96px!important;padding:14px 12px!important;border-radius:16px!important}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\] .font-bold{font-size:13px!important;line-height:1.35}
  .vault-scope main a[href^="/categories/"].min-h-\[116px\]::after{display:none}
  .vault-scope>header>div>a:first-child::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vault-scope *,.vault-scope *::before,.vault-scope *::after,.moka-toast{animation:none!important;transition:none!important}
  .moka-reveal{opacity:1!important;transform:none!important}
  .moka-ripple{display:none}
  /* moka-optimize: 与高优先级的悬停/过渡规则同选择器，确保减少动态效果时彻底关闭位移与过渡 */
  .vault-scope a[href^="/products/"]:has(> div > span.relative > img),.vault-scope a[href^="/products/"]:has(> div > span.relative > svg),.vault-scope main a[href^="/blog/"].rounded-lg,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card,.vault-scope input,.vault-scope textarea,.vault-scope select{transition:none!important}
  .vault-scope>header>div>a:first-child:hover img,.vault-scope main section > div:has(> .bg-gradient-to-r) .flex.flex-wrap button:hover,.vault-scope main a[href^="/categories/"].min-h-\[116px\]:hover::after,.vault-scope a[href^="/products/"]:has(> div > span.relative):hover,.vault-scope a[href^="/products/"]:hover > div > span.relative > img,.vault-scope main a[href^="/blog/"].rounded-lg:hover,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:hover,.vault-scope a[href^="/products/"]:has(> div > span.relative):active,.vault-scope button:not(:disabled):active,.vault-scope a.rounded-full:active,.vault-scope [role="button"]:active,.vault-scope a[href^="/categories/"].min-h-\[116px\]:active,.vault-scope main a[href^="/blog/"].rounded-lg:active,.vault-scope main a[href^="/blog/"].rounded-xl.bg-card:active{transform:none!important}
}
.dark .vault-scope>header>div>a:first-child img,.dark .vault-scope>footer img{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* moka-optimize: 防首屏布局偏移(CLS)。仅在路由内容尚未渲染（main 为空）时占位，渲染后不生效，不改变任何页面外观 */
.vault-scope>main:empty{min-height:100vh}
.vault-scope>main:has(>div>div.grid>div.opacity-50:first-child){min-height:100vh}