/* ============================================================
   神的工具箱 · 全站样式
   亮/暗双主题 · 科技感柔光 · 弱背景交互
   ============================================================ */

/* ---------- 基础 ---------- */
/* 作者样式里的 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，
   而 toolbox.js 是靠 el.hidden 做分类筛选的，所以这里显式补一条。 */
[hidden]{display:none !important}

/* ---------- 设计变量 ---------- */
:root{
  --maxw:1160px;
  --radius:22px;
  --radius-sm:14px;
  --radius-xs:10px;
  --ease:cubic-bezier(.22,.9,.24,1);

  /* 暗色（默认） */
  color-scheme:dark;
  --bg:#06090f;
  --bg-2:#0b101d;
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.09);
  --surface-3:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.115);
  --line-2:rgba(255,255,255,.19);
  --hairline:rgba(255,255,255,.07);
  --text:#e9eefb;
  --muted:#9daac6;
  --dim:#8290ae;

  --accent:#5ad1e6;
  --accent-2:#9b8bfb;
  --accent-3:#4fa8ff;
  --accent-ink:#04141b;
  --accent-soft:rgba(90,209,230,.14);
  --accent-soft-2:rgba(155,139,251,.14);

  --grid:rgba(255,255,255,.05);
  --dot:rgba(255,255,255,.07);
  --glow-a:rgba(90,209,230,.30);
  --glow-b:rgba(155,139,251,.26);

  --shadow:0 22px 60px -22px rgba(0,0,0,.8);
  --shadow-sm:0 10px 28px -14px rgba(0,0,0,.65);
  --sheet:rgba(11,16,29,.74);
  --backdrop:saturate(160%) blur(16px);

  --spot:rgba(90,209,230,.10);
  --spot-size:520px;
  --stage:rgba(255,255,255,.022);
  --mx:50vw;
  --my:30vh;
}

[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fe;
  --bg-2:#eaeffa;
  --surface:rgba(255,255,255,.75);
  --surface-2:#ffffff;
  --surface-3:#ffffff;
  --line:rgba(16,26,50,.11);
  --line-2:rgba(16,26,50,.20);
  --hairline:rgba(255,255,255,.9);
  --text:#111a2c;
  --muted:#4d5a75;
  --dim:#5d6a83;

  --accent:#0a7387;
  --accent-2:#6a56e0;
  --accent-3:#1f6ec9;
  --accent-ink:#ffffff;
  --accent-soft:rgba(10,115,135,.11);
  --accent-soft-2:rgba(106,86,224,.10);

  --grid:rgba(16,26,50,.05);
  --dot:rgba(16,26,50,.075);
  --glow-a:rgba(90,190,220,.35);
  --glow-b:rgba(150,130,250,.28);

  --shadow:0 20px 50px -24px rgba(26,44,86,.38);
  --shadow-sm:0 10px 24px -14px rgba(26,44,86,.3);
  --sheet:rgba(255,255,255,.80);

  --spot:rgba(10,115,135,.09);
  --stage:rgba(16,26,50,.035);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.22;letter-spacing:-.015em;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
code,kbd{font-family:"JetBrains Mono","Cascadia Mono",Consolas,"SFMono-Regular",monospace}
::selection{background:var(--accent-soft);color:var(--text)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.page{position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 背景（科技感 · 柔光） ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(46% 42% at 18% 12%, var(--glow-a), transparent 70%),
    radial-gradient(44% 40% at 86% 26%, var(--glow-b), transparent 72%),
    radial-gradient(60% 50% at 50% 108%, var(--glow-a), transparent 74%);
  opacity:.85;
}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}
.bg-grid-fine{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(70% 55% at 22% 10%, #000 0%, transparent 72%);
          mask-image:radial-gradient(70% 55% at 22% 10%, #000 0%, transparent 72%);
}
.bg-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(var(--dot) 1.1px, transparent 1.1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 6%, #000 42%, transparent 96%);
          mask-image:linear-gradient(to bottom, transparent 6%, #000 42%, transparent 96%);
  opacity:.7;
}
.bg-rings{position:absolute;inset:0;display:block}
.bg-rings span{
  position:absolute;left:62%;top:44%;translate:-50% -50%;
  width:34vmax;height:34vmax;border-radius:50%;
  border:1px solid var(--line);
  opacity:.5;
}
.bg-rings span:nth-child(2){width:50vmax;height:50vmax;opacity:.34}
.bg-rings span:nth-child(3){width:66vmax;height:66vmax;opacity:.2}
.orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--glow-a), transparent 68%);
  /* 1.2.9：原来的 filter:blur(2px) 去掉——渐变本身已经够软，2px 看不出差别，
     但三个 38vmax 的大块各带一层滤镜，等于每帧多三次大区域重采样。 */
  opacity:.55;
}
.orb-1{width:38vmax;height:38vmax;top:-12vmax;left:-10vmax;animation:drift-a 26s ease-in-out infinite}
.orb-2{width:30vmax;height:30vmax;top:34%;right:-12vmax;background:radial-gradient(circle at 34% 32%, var(--glow-b), transparent 68%);animation:drift-b 32s ease-in-out infinite}
.orb-3{width:24vmax;height:24vmax;bottom:-10vmax;left:32%;opacity:.4;animation:drift-a 38s ease-in-out infinite reverse}
/* 1.2.9：光标柔光原来是「全屏元素 + 渐变中心跟着 --mx/--my 变」，
   移动指针时每帧都要重画一整屏渐变。现在改成固定大小的块 + transform 位移，
   --mx/--my 只驱动合成层的平移，不再触发重绘。 */
.bg-spot{
  position:absolute;left:0;top:0;
  width:calc(var(--spot-size) * 2.4);height:calc(var(--spot-size) * 2.4);
  background:radial-gradient(closest-side,var(--spot),transparent 100%);
  transform:translate3d(calc(var(--mx) - var(--spot-size) * 1.2),calc(var(--my) - var(--spot-size) * 1.2),0);
  will-change:transform;
  transition:opacity .5s var(--ease);
}
.bg-fade{
  position:absolute;inset:auto 0 0 0;height:34vh;
  background:linear-gradient(to bottom, transparent, var(--bg) 88%);
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3.4vmax,2.4vmax,0) scale(1.07)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-3vmax,-2.6vmax,0) scale(1)}
}

/* ---------- 入场动效 ---------- */
.reveal{opacity:0}
.reveal.in{animation:rv-up .72s var(--ease) var(--rd,0s) both}
@keyframes rv-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rv-in{from{opacity:0}to{opacity:1}}

/* ---------- 页面切换过渡 ----------
   入场纯 CSS，不依赖 JS；离场由 assets/nav.js 挂 .pg-leave。
   .bg 在 .page 外面，所以跳页时背景是接着的，只有内容淡出淡入。
   .page 上只做 opacity（不写 transform），免得给 sticky 顶栏套一个包含块。 */
.page{animation:pg-in .34s var(--ease) both}
.page > main{animation:pg-in-up .54s var(--ease) .05s both}
@keyframes pg-in{from{opacity:0}to{opacity:1}}
@keyframes pg-in-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.pg-leave{pointer-events:none}
html.pg-leave .page,
html.pg-leave .page > main{
  animation:none;
  opacity:0;
  transition:opacity .19s ease,transform .19s var(--ease);
}
html.pg-leave .page > main{transform:translateY(-10px)}
@media (prefers-reduced-motion:reduce){
  .page,.page > main{animation:none}
  html.pg-leave .page,
  html.pg-leave .page > main{opacity:1;transform:none;transition:none}
}
[data-motion="off"] .page,[data-motion="off"] .page > main{animation:none}
[data-motion="off"] html.pg-leave .page,
[data-motion="off"] html.pg-leave .page > main{opacity:1;transform:none;transition:none}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:transparent;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  /* 1.2.9：这里原来整条顶栏都开 blur，滚动时等于每帧模糊一条 1440×66 的横带；
     胶囊顶栏（.topbar .wrap）自己已经有玻璃了，这条纯属重复开销。 */
  background:var(--sheet);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.7);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.01em}
.logo-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px -8px var(--accent), inset 0 0 0 1px rgba(255,255,255,.22);
}
.logo-mark::after{
  content:"";position:absolute;inset:9px 9px auto auto;width:6px;height:6px;border-radius:50%;
  background:var(--accent-ink);opacity:.85;
}
.brand:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.logo-mark{transition:transform .4s var(--ease)}
.demo-mark{font-size:15px;color:var(--muted);font-weight:500}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  position:relative;padding:8px 12px;border-radius:var(--radius-xs);
  color:var(--muted);font-size:14.5px;transition:color .22s var(--ease),background .22s var(--ease);
}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a.active{color:var(--text);background:var(--accent-soft)}
.nav-links a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.theme-toggle{
  margin-left:8px;width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:transform .3s var(--ease),border-color .25s,background .25s,box-shadow .3s;
}
.theme-toggle:hover{transform:translateY(-2px) rotate(8deg);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .ic-sun{display:none}
[data-theme="light"] .ic-moon{display:none}

/* ---------- 通用组件 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;color:var(--muted);letter-spacing:.06em;
}
.eyebrow .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(90,209,230,.5)}70%{box-shadow:0 0 0 9px rgba(90,209,230,0)}100%{box-shadow:0 0 0 0 rgba(90,209,230,0)}}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:var(--radius-xs);border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;overflow:hidden;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 12px 30px -14px var(--accent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 42px -16px var(--accent);filter:saturate(115%)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:var(--radius-xs);
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .3s var(--ease),border-color .25s,background .25s,box-shadow .3s var(--ease);
}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow-sm)}
.btn-ghost svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost.sm,.btn.sm{padding:9px 15px;font-size:14px;border-radius:9px}

.link{
  position:relative;color:var(--text);font-weight:600;
  background-image:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size .34s var(--ease),color .25s;
}
.link:hover{background-size:100% 2px;color:var(--accent)}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(48px,7vh,86px) 0 clamp(40px,6vh,76px)}
.hero-grid{
  display:grid;gap:clamp(32px,4.5vw,64px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
}
.hero-copy{text-align:left}
.hero h1{
  font-size:clamp(38px,5.6vw,66px);
  margin:22px 0 0;
  letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--text) 12%,var(--accent) 46%,var(--accent-2) 74%,var(--text) 96%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position 1s var(--ease);
}
.hero h1:hover{background-position:100% 0}
.hero .lead{
  margin-top:20px;max-width:34em;font-size:clamp(15.5px,1.35vw,17.5px);
  color:var(--muted);
}
.hero .lead b{color:var(--text);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
/* 主按钮独占一行，三个次按钮排第二行 */
.hero-actions .break{flex:0 0 100%;height:0}
.hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stat{
  flex:1 1 120px;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .3s var(--ease),border-color .25s,background .25s;
}
.stat:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surface-2)}
.stat b{display:block;font-size:22px;letter-spacing:-.01em}
.stat span{font-size:12.5px;color:var(--dim);letter-spacing:.05em}

/* ---------- 右侧功能卡片循环 ---------- */
.carousel{
  position:relative;height:clamp(380px,58vh,470px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.carousel-track{
  display:flex;flex-direction:column;gap:14px;
  transform:translate3d(0,var(--shift,0px),0);
  transition:transform .82s var(--ease);
}
.carousel-track.jump{transition:none}
.fcard{
  position:relative;display:flex;gap:15px;align-items:flex-start;
  padding:18px 18px 18px 17px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hairline);
  transition:transform .38s var(--ease),border-color .3s,background .3s,box-shadow .38s var(--ease);
}
.fcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 160px at var(--cx,50%) var(--cy,0%), var(--accent-soft), transparent 70%);
  opacity:0;transition:opacity .35s var(--ease);
}
.fcard:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow),inset 0 1px 0 var(--hairline);transform:translateY(-4px) scale(1.012)}
.fcard:hover::after{opacity:1}
.fcard-ic{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);
}
.fcard-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcard-ic.has-img{padding:0;overflow:hidden;border-color:transparent}
.fcard-ic.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.fcard-body{min-width:0;flex:1 1 auto}
.fcard-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fcard h3{font-size:16.5px}
.fcard p{margin-top:5px;font-size:13.6px;color:var(--muted);line-height:1.6}
.fcard-go{
  align-self:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);
  transition:transform .35s var(--ease),color .25s,border-color .25s,background .25s;
}
.fcard-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcard:hover .fcard-go{transform:translateX(3px);color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tag{
  font-size:11.5px;letter-spacing:.06em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface);
}
.tag.on{border-color:transparent;background:var(--accent-soft);color:var(--accent)}
.tag.soon{border-style:dashed;color:var(--dim)}
.carousel-hint{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  margin-top:14px;font-size:12.5px;color:var(--dim);letter-spacing:.05em;
}
.carousel-hint .bar{width:44px;height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden;position:relative}
.carousel-hint .bar i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---------- 功能区块 ---------- */
.section{padding:clamp(44px,7vh,80px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;text-align:left}
.section-head h2{font-size:clamp(24px,3vw,32px)}
.section-head p{margin-top:8px;color:var(--muted);font-size:14.5px;max-width:46em}
.grid-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hairline);
  transition:transform .38s var(--ease),border-color .3s,background .3s,box-shadow .38s var(--ease);
  /* 1.2.9：去掉 will-change:transform。每张卡常驻一个合成层很吃显存，
     而 hover 抬起只有 0.38s，交给浏览器临时提升就够了。 */
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px 180px at var(--cx,50%) var(--cy,0%), var(--accent-soft), transparent 72%);
  opacity:0;transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow),inset 0 1px 0 var(--hairline)}
.card:hover::after{opacity:1}
.card-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-2)}
.card-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 用户上传的图标图片：铺满 .card-ic 的圆角方块 */
.card-ic.has-img{padding:0;overflow:hidden;background:var(--surface-2)}
.card-ic.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.card h3{font-size:17px}
.card p{font-size:13.8px;color:var(--muted);flex:1 1 auto}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.card-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-enter{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent)}
.card-enter svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.card:hover .card-enter svg{transform:translateX(4px)}
.card[data-soon="1"]{opacity:.72;cursor:not-allowed}
.card[data-soon="1"]:hover{transform:none}

/* ---------- 工具箱 ---------- */
.tb-head{padding:clamp(36px,6vh,64px) 0 8px;text-align:left}
.tb-head h1{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.025em}
.tb-head p{margin-top:14px;color:var(--muted);max-width:44em}
.toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:26px 0 24px;padding:12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
}
.search{
  position:relative;flex:1 1 260px;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-xs);
  border:1px solid var(--line);background:var(--bg-2);
  transition:border-color .25s,box-shadow .25s;
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round}
.search input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:14.5px;outline:none;
}
.search input::placeholder{color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:13.5px;transition:color .22s,border-color .22s,background .22s,transform .22s var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px)}
.chip[aria-pressed="true"]{
  color:var(--accent-ink);border-color:transparent;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px -12px var(--accent);
}
.empty{
  padding:56px 20px;text-align:center;color:var(--dim);
  border:1px dashed var(--line);border-radius:var(--radius);
}
.tb-count{margin:0 0 18px;color:var(--dim);font-size:13px;min-height:1.2em}

/* ---------- 页脚 ---------- */
.footer{margin-top:clamp(40px,8vh,90px);border-top:1px solid var(--line);background:var(--surface)}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:26px 0}
.footer-links{display:flex;flex-wrap:wrap;gap:6px}
.footer-links a{padding:6px 10px;border-radius:9px;color:var(--muted);font-size:13.5px;transition:color .22s,background .22s}
.footer-links a:hover{color:var(--text);background:var(--surface-2)}
.footer-social{display:flex;gap:8px}
.footer-social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:transform .3s var(--ease),color .25s,border-color .25s;
}
.footer-social a:hover{transform:translateY(-3px);color:var(--accent);border-color:var(--accent)}
.footer-social svg{width:17px;height:17px;fill:currentColor}
.footer-note{padding:0 0 26px;color:var(--dim);font-size:12.5px;text-align:left}

/* ---------- 提示条 ---------- */
.hk-toast{
  position:fixed;left:50%;bottom:34px;translate:-50% 0;z-index:80;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--sheet);color:var(--text);
  -webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
  box-shadow:var(--shadow);font-size:14px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.hk-toast.show{opacity:1;transform:translateY(0)}

/* ---------- 低配 / 减弱动效 ---------- */
[data-motion="off"] .bg-spot{transition:none}
[data-perf="lite"] .orb{animation:none}
[data-perf="lite"] .eyebrow .pulse{animation:none}
[data-perf="lite"] .topbar.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}
[data-perf="lite"] .hk-toast{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}
[data-perf="lite"] .btn::before{display:none}
@media (prefers-reduced-motion:reduce){
  .orb,.eyebrow .pulse{animation:none}
  .reveal{opacity:1}
  .reveal.in{animation:none}
}
[data-motion="off"] .reveal{opacity:1}
[data-motion="off"] .reveal.in{animation:none}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .carousel{height:clamp(320px,46vh,400px);order:2}
  .hero-copy{order:1}
  .bg-rings span{left:50%}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .topbar .wrap{height:60px;gap:10px}
  .nav-links a{padding:7px 9px;font-size:13.5px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .toolbar{padding:10px}
  .footer-inner{padding:22px 0}
}

/* ---------- 顶栏里的账号入口（account-nav.js 塞进来的） ---------- */
.nav-account{display:inline-flex;align-items:center;gap:6px}
.nav-links .nav-user,.nav-links .nav-admin{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:color .25s,border-color .25s,background .25s;
}
.nav-links .nav-user:hover{color:var(--accent);border-color:var(--accent)}
.nav-links .nav-admin{color:var(--accent-2)}
.nav-links .nav-admin:hover{color:var(--accent-2);border-color:var(--accent-2)}
.nav-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);flex:0 0 auto;
}
.nav-badge{
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;font-style:normal;
  display:inline-grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--accent-2);color:#080b12;
}
/* ---------- 主题切换过渡（theme.js 会临时给 <html> 加 .theming） ---------- */
.bg{transition:opacity .4s var(--ease)}
@media (prefers-reduced-motion: no-preference){
  html.theming,html.theming body,
  html.theming .topbar,html.theming .footer,html.theming .card,html.theming .fcard,
  html.theming .panel,html.theming .wk-side,html.theming .wk-main,html.theming .tbl,
  html.theming .tbl tr,html.theming .tbl th,html.theming .tbl td,
  html.theming .btn,html.theming .btn-ghost,html.theming .tag,html.theming .badge,
  html.theming .field input,html.theming .field select,html.theming .field textarea,
  html.theming .wk-item,html.theming .icon-pv,html.theming .wk-avatar,
  html.theming .modal-box,html.theming .drop,html.theming .toolbar,html.theming .nav-links a{
    transition:background-color .38s var(--ease),color .38s var(--ease),
               border-color .38s var(--ease),box-shadow .38s var(--ease)!important;
  }
  /* 渐变层没法直接插值，切换时让整块背景淡一下，眼睛看到的就是「化开」 */
  html.theming .bg{opacity:.42}
}

@media (max-width:720px){
  .nav-links .nav-user,.nav-links .nav-admin{padding:6px 10px;font-size:12.5px}
  .nav-links .nav-account{order:2}
}

/* ---------- 信誉闸门（toolguard.js 塞进来的整页遮罩） ---------- */
html.rep-locked{overflow:hidden}
.rep-lock{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:24px;
  background:rgba(4,7,14,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:repLockIn .25s var(--ease) both;
}
@keyframes repLockIn{from{opacity:0}to{opacity:1}}
.rep-lock-box{
  width:100%;max-width:430px;padding:28px 26px 24px;
  border-radius:var(--radius);text-align:center;
  border:1px solid var(--line-2);background:var(--bg-2);
  box-shadow:var(--shadow);
}
.rep-lock-ic{
  display:inline-grid;place-items:center;width:54px;height:54px;margin-bottom:14px;
  border-radius:16px;color:var(--accent-2);
  border:1px solid var(--line);background:var(--surface-2);
}
.rep-lock-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rep-lock-box h2{font-size:20px;margin-bottom:10px}
.rep-lock-box p{margin:0 0 8px;font-size:14px;line-height:1.65;color:var(--muted)}
.rep-lock-box p b{color:var(--accent)}
.rep-lock-how{font-size:13px!important;opacity:.85}
.rep-lock-acts{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* ============================================================
   v1.0.0 · 视觉升级（保留原有结构，只调观感与一致性）
   ============================================================ */

/* ---------- 纯黑（OLED）主题：只覆盖底色，其余沿用暗色 ---------- */
[data-theme="amoled"]{
  color-scheme:dark;
  --bg:#000;
  --bg-2:#07090d;
  --sheet:rgba(0,0,0,.86);
  --stage:rgba(255,255,255,.014);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.22);
  --shadow:0 24px 60px -24px #000;
}
[data-theme="amoled"] .bg-glow{opacity:.62}
[data-theme="amoled"] .bg-grid,[data-theme="amoled"] .bg-grid-fine{opacity:.32}

/* ---------- 顶栏 logo 现在是真正的图片 ---------- */
.logo-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:block;
  background:none;box-shadow:none;
  filter:drop-shadow(0 6px 14px rgba(4,10,22,.42));
}
.logo-mark::after{content:none}

/* ---------- 首屏副标题 ---------- */
.lead-sub{
  display:block;margin-top:12px;font-size:.82em;line-height:1.85;color:var(--muted);
  max-width:46ch;
}
.lead-sub b{color:var(--text);font-weight:600}

/* ---------- 卡片上的开发者 ---------- */
.card-dev{
  display:inline-flex;align-items:center;gap:6px;margin:-4px 0 10px;
  font-size:12.5px;color:var(--dim);letter-spacing:.02em;
}
.card-dev svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}

/* ---------- 主题预设色卡 ---------- */
.preset-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px;margin:12px 0 16px;
}
.preset{
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:13px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-size:13px;cursor:pointer;text-align:left;
  transition:border-color .22s var(--ease),background .22s var(--ease),
             transform .22s var(--ease),box-shadow .22s var(--ease);
}
.preset:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-1px)}
.preset.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.preset .dots{display:flex;flex:0 0 auto}
.preset .dots i{width:15px;height:15px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.preset .dots i+i{margin-left:-5px}
.preset .pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 统一细节：焦点环更明显、滚动条更细、选中更柔和 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion: no-preference){
  .card,.fcard{transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .3s var(--ease)}
}
.card:hover,.fcard:hover{transform:translateY(-3px)}
*,*::before,*::after{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:999px;border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box}

/* ---------- 数据面板（管理员控制面板） ---------- */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:16px 0 20px;
}
.stat-card{
  padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);position:relative;overflow:hidden;
}
.stat-card .k{font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.stat-card .v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px;line-height:1.2}
.stat-card .u{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:3px}
.stat-card .bar{height:5px;border-radius:999px;background:var(--surface-3);margin-top:10px;overflow:hidden}
.stat-card .bar>i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--ease)}
.stat-card.warn .bar>i{background:linear-gradient(90deg,#f5b14c,#f2645a)}
.stat-card.bad  .bar>i{background:linear-gradient(90deg,#f2645a,#ef4444)}
.stat-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 8px}
.stat-h h3{font-size:15px}
.stat-h .tiny{margin:0}
.chart{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--stage);
  padding:12px 14px;overflow:hidden;
}
.chart svg{display:block;width:100%;height:132px}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--dim)}
.chart-legend b{color:var(--text);font-weight:600}
.legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.path-list{display:grid;gap:6px;margin-top:10px}
.path-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;font-size:13px}
.path-row .p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:"JetBrains Mono",Consolas,monospace}
.path-row .n{color:var(--text);font-weight:600}
.path-row .track{grid-column:1/-1;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:-2px}
.path-row .track>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}

/* ---------- 反馈卡片 ---------- */
.fb-list{display:grid;gap:12px;margin-top:14px}
.fb{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  padding:14px 16px;display:grid;gap:8px;
}
.fb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-kind{
  font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--muted);
}
.fb-kind.k-bug{color:#f5b14c;border-color:rgba(245,177,76,.4)}
.fb-kind.k-idea{color:var(--accent);border-color:var(--accent-soft-2)}
.fb-title{font-weight:650;font-size:15px}
.fb-meta{margin-left:auto;font-size:12px;color:var(--dim)}
.fb-body{font-size:14px;color:var(--muted);white-space:pre-wrap;line-height:1.7}
.fb-imgs{display:flex;gap:8px;flex-wrap:wrap}
.fb-imgs img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.fb-reply{
  border-left:2px solid var(--accent);padding:6px 0 6px 12px;font-size:13.5px;color:var(--muted);
}
.fb-reply b{color:var(--text)}
.fb-state{font-size:12px;padding:2px 9px;border-radius:999px}
.fb-state.open{background:rgba(90,209,230,.14);color:var(--accent)}
.fb-state.done{background:rgba(52,211,153,.16);color:#34d399}
.fb-state.rejected{background:rgba(239,68,68,.16);color:#f87171}

/* ---------- 工具说明抽屉（发布页外壳也用，这里给站内预览兜底） ---------- */
.md-body{font-size:14.5px;line-height:1.85;color:var(--text)}
.md-body h1,.md-body h2,.md-body h3{margin:18px 0 8px;font-size:1.02em}
.md-body h1{font-size:1.2em}
.md-body p{margin:0 0 10px}
.md-body ul,.md-body ol{margin:0 0 10px;padding-left:20px;list-style:revert}
.md-body li{margin:3px 0}
.md-body code{
  background:var(--surface-3);padding:1.5px 6px;border-radius:6px;font-size:.92em;
}
.md-body pre{
  background:var(--stage);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;overflow:auto;margin:0 0 12px;
}
.md-body pre code{background:none;padding:0}
.md-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.md-body img{max-width:100%;border-radius:10px;margin:6px 0}
.md-body blockquote{
  margin:0 0 12px;padding:6px 0 6px 12px;border-left:2px solid var(--line-2);color:var(--muted);
}

/* ---------- 说明书页（docs.html） ---------- */
.doc-wrap{display:grid;grid-template-columns:236px 1fr;gap:34px;align-items:start;margin:34px 0 64px}
.doc-nav{
  position:sticky;top:84px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);padding:14px;max-height:calc(100vh - 120px);overflow:auto;
}
.doc-nav h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.doc-nav a{
  display:block;padding:7px 10px;border-radius:9px;font-size:13.5px;color:var(--muted);
  transition:background .2s,color .2s;
}
.doc-nav a:hover{background:var(--surface-2);color:var(--text)}
.doc-nav a.on{background:var(--accent-soft);color:var(--text)}
.doc-main{min-width:0}
.doc-sec{margin:0 0 40px;scroll-margin-top:88px}
.doc-sec h2{font-size:22px;margin-bottom:10px}
.doc-sec h3{font-size:16px;margin:18px 0 8px}
.doc-sec p{color:var(--muted);margin:0 0 10px;line-height:1.85}
.doc-sec ul,.doc-sec ol{margin:0 0 12px;padding-left:22px;list-style:revert;color:var(--muted);line-height:1.85}
.doc-sec li{margin:4px 0}
.doc-sec code{background:var(--surface-3);padding:1.5px 6px;border-radius:6px;font-size:.9em}
.doc-card{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  padding:16px 18px;margin:0 0 14px;
}
.doc-card h4{margin:0 0 6px;font-size:15px}
.doc-card p{margin:0;color:var(--muted);font-size:14px}
.doc-tip{
  border-left:2px solid var(--accent);background:var(--accent-soft);
  padding:10px 14px;border-radius:0 10px 10px 0;margin:0 0 14px;font-size:14px;color:var(--text);
}
@media (max-width:900px){
  .doc-wrap{grid-template-columns:1fr;gap:18px}
  .doc-nav{position:static;max-height:none;display:flex;gap:6px;flex-wrap:wrap}
  .doc-nav h2{width:100%}
  .doc-nav a{padding:6px 10px;border:1px solid var(--line)}
}

/* ---------- 「更新工具」行 ---------- */
.upd-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.upd-badge{
  font-size:12px;padding:2px 9px;border-radius:999px;
  background:rgba(245,177,76,.16);color:#f5b14c;
}

/* ---------- 反馈筛选条 / 表单里的截图缩略图 ---------- */
.fb-filter{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.fb-filter .btn-ghost.on{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.shot{position:relative;display:inline-block}
.shot img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.shot-x{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font-size:13px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.shot-x:hover{border-color:#f87171;color:#f87171}
#fb-imgs-pv{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
#fb-imgs-pv:empty{display:none}

/* ============================================================
   1.0.1 视觉刷新（在原有规则之后覆盖，旧主题块保持兼容）
   ============================================================ */

/* ---------- 设计变量：冷调科技 ---------- */
:root{
  --maxw:1200px;
  --radius:20px;
  --radius-sm:14px;
  --radius-xs:10px;

  --bg:#060a13;
  --bg-2:#0a1120;
  --surface:rgba(146,176,255,.055);
  --surface-2:rgba(146,176,255,.088);
  --surface-3:rgba(146,176,255,.125);
  --line:rgba(146,176,255,.13);
  --line-2:rgba(146,176,255,.22);
  --hairline:rgba(255,255,255,.07);
  --text:#e8eefc;
  --muted:#97a6c6;
  --dim:#7b8aab;

  --accent:#35d6f2;
  --accent-2:#8b7cf8;
  --accent-3:#4f9bff;
  --accent-ink:#04141b;
  --accent-soft:rgba(53,214,242,.13);
  --accent-soft-2:rgba(139,124,248,.13);

  --grid:rgba(146,176,255,.05);
  --dot:rgba(146,176,255,.075);
  --glow-a:rgba(53,214,242,.26);
  --glow-b:rgba(139,124,248,.24);

  --shadow:0 24px 70px -26px rgba(0,0,0,.82);
  --shadow-sm:0 12px 30px -16px rgba(0,0,0,.7);
  --sheet:rgba(9,15,28,.78);
  --backdrop:saturate(150%) blur(18px);

  --spot:rgba(53,214,242,.09);
  --spot-size:560px;
  --stage:rgba(146,176,255,.02);
}
[data-theme="light"]{
  --bg:#f4f7fe;
  --bg-2:#e9eefb;
  --surface:rgba(255,255,255,.72);
  --surface-2:#ffffff;
  --surface-3:#ffffff;
  --line:rgba(18,32,64,.10);
  --line-2:rgba(18,32,64,.18);
  --hairline:rgba(255,255,255,.9);
  --text:#0f1a2e;
  --muted:#4b5876;
  --dim:#5b6882;

  --accent:#0a6f8a;
  --accent-2:#5b46d6;
  --accent-3:#1d6ac2;
  --accent-ink:#ffffff;
  --accent-soft:rgba(10,111,138,.10);
  --accent-soft-2:rgba(91,70,214,.09);

  --grid:rgba(18,32,64,.045);
  --dot:rgba(18,32,64,.065);
  --glow-a:rgba(53,180,220,.32);
  --glow-b:rgba(120,100,240,.26);

  --shadow:0 22px 55px -26px rgba(20,36,74,.35);
  --shadow-sm:0 10px 24px -14px rgba(20,36,74,.28);
  --sheet:rgba(255,255,255,.82);
  --spot:rgba(10,111,138,.08);
  --stage:rgba(18,32,64,.035);
}
[data-theme="amoled"]{
  --bg:#000000;
  --bg-2:#05070c;
  --surface:rgba(255,255,255,.042);
  --surface-2:rgba(255,255,255,.072);
  --surface-3:rgba(255,255,255,.11);
  --sheet:rgba(0,0,0,.84);
}

/* ---------- 顶栏 / 导航 ---------- */
.topbar .wrap{height:64px}
.brand{gap:11px;font-size:15.5px;letter-spacing:.015em}
.nav-links a{padding:7px 13px;border-radius:9px;font-size:14px;color:var(--muted)}
.nav-links a.active{background:var(--accent-soft);color:var(--text)}
.nav-links a.active::after{left:13px;right:13px;bottom:1px;height:2px}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(38px,5.5vh,72px) 0 clamp(32px,5vh,60px)}
.hero h1{font-size:clamp(36px,5.2vw,62px);margin-top:20px}
.hero .lead{margin-top:18px}
.hero-actions{gap:10px;margin-top:28px}
.hero-actions .btn,.hero-actions .btn-ghost{padding:11px 20px;font-size:14.5px}
.hero-actions .btn-ghost svg{width:16px;height:16px}
.hero-stats{gap:12px;margin-top:26px}
.stat{padding:13px 16px;border-radius:14px;background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.stat b{font-size:21px}

/* ---------- 工具卡片：左图标右名称 / 简介 / 作者 ---------- */
.grid-cards{gap:14px;grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.card{
  gap:0;padding:16px;border-radius:18px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hairline);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface-2));box-shadow:var(--shadow),inset 0 1px 0 var(--hairline)}
.card-top{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.card-top h3,.card h3{font-size:16px;line-height:1.35;letter-spacing:-.01em;min-width:0}
.card-ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;background:var(--surface-2)}
.card-ic svg{width:21px;height:21px}
.card-desc,.card>p{
  margin:0 0 9px;font-size:13px;line-height:1.62;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.card-dev{
  display:block;margin:0 0 12px;font-size:12px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;
}
.card-dev b{color:var(--muted);font-weight:600}
.card-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--hairline)}
.card-enter{font-size:13px}
.card[data-soon="1"] .card-desc{color:var(--dim)}

/* ---------- 工具箱：左侧分类栏（滚动时留在原地） ---------- */
.tb-layout{display:grid;grid-template-columns:252px minmax(0,1fr);gap:26px;align-items:start;margin:24px 0 40px}
.tb-side{
  position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;
  padding:15px 13px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hairline);
  -webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
}
.tb-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tb-side .search{padding:9px 12px;background:var(--bg-2);flex:1 1 auto}
.tb-side .search input{font-size:13.5px}
.tb-group{margin-top:18px}
.tb-group h3{margin:0 0 6px;padding:0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.tb-side .chips{display:flex;flex-direction:column;gap:1px}
.tb-side .tb-tag{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 8px;border:0;border-radius:9px;background:transparent;color:var(--muted);
  font-size:13.5px;line-height:1.35;text-align:left;
}
.tb-side .tb-tag:hover{transform:none;background:var(--surface-2);color:var(--text);border-color:transparent}
.tb-side .tb-tag.is-on{background:var(--accent-soft);color:var(--text);box-shadow:none;border-color:transparent}
.tb-side .tb-tag.is-on .tb-tag-box{background:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent}
.tb-side .tb-tag.is-on .tb-tag-box svg{stroke:var(--accent-ink)}
.tb-side .tb-tag-box{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-2);flex:0 0 auto}
.tb-side .tb-tag-n{margin-left:auto;padding:0;background:none;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.tb-side .tb-tag.is-on .tb-tag-n{background:none;color:var(--accent)}
.tb-side .tb-clear{margin-top:16px;justify-content:center;width:100%;border-radius:10px}
.tb-filter-toggle{display:none}
.tb-main{min-width:0}
.tb-count{margin:0 0 16px}
.tb-empty-line{color:var(--dim);font-size:13px}

/* ---------- 说明书：左侧快速跳转 ---------- */
.doc-wrap{grid-template-columns:224px minmax(0,1fr);gap:38px;margin:30px 0 60px}
.doc-nav{top:80px;border-radius:16px;max-height:calc(100vh - 104px)}
.doc-nav h2{font-size:11.5px;margin-bottom:8px;padding:0 8px}
.doc-nav a{padding:6px 9px;border-radius:8px}
.doc-nav a.sub{padding:5px 9px 5px 22px;font-size:12.5px;color:var(--dim)}
.doc-nav a.sub:hover{color:var(--text)}
.doc-nav a.sub.on{color:var(--accent);background:transparent}
.doc-sec{scroll-margin-top:88px}
.doc-sec h2{font-size:23px;letter-spacing:-.02em;padding-bottom:8px;border-bottom:1px solid var(--hairline);margin-bottom:14px}
.doc-sec h3{font-size:15.5px;color:var(--text)}
.doc-sec h4{margin:14px 0 6px;font-size:14px}
.doc-lead{font-size:15px;color:var(--muted)}
.doc-kv{display:grid;gap:8px;margin:0 0 14px}
.doc-kv div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13.5px}
.doc-kv b{font-weight:600;color:var(--text)}
.doc-kv span{color:var(--muted)}
.doc-steps{margin:0 0 14px;padding-left:20px;list-style:decimal;color:var(--muted)}
.doc-steps li{margin:5px 0}
.doc-back{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:8px 14px;
  border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--muted);
}
.doc-back:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- 页脚 ---------- */
.footer-inner{padding:24px 0}

/* ---------- 手机端重排 ---------- */
@media (max-width:980px){
  .tb-layout{grid-template-columns:1fr;gap:16px;margin-top:18px}
  .tb-side{position:static;max-height:none;display:none;padding:14px}
  .tb-side.open{display:block}
  .tb-filter-toggle{
    display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
    padding:9px 16px;border-radius:10px;border:1px solid var(--line);
    background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;
  }
  .tb-filter-toggle.on{border-color:var(--accent);background:var(--accent-soft)}
  .tb-side .chips{flex-direction:row;flex-wrap:wrap;gap:6px}
  .tb-side .tb-tag{width:auto;border:1px solid var(--line);border-radius:999px;padding:7px 12px}
  .tb-side .tb-tag-n{margin-left:2px}
  .tb-group{margin-top:14px}
  .doc-wrap{grid-template-columns:1fr;gap:22px;margin-top:22px}
  .doc-nav{position:static;max-height:none;max-width:100%;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:10px;scrollbar-width:none}
  .doc-nav::-webkit-scrollbar{display:none}
  .doc-nav h2{display:none}
  .doc-nav a{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
  .doc-nav a.sub{display:none}
  .doc-sec h2{font-size:20px}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .topbar .wrap{height:56px;gap:8px}
  .brand{font-size:14.5px}
  .brand .logo-mark{width:28px;height:28px}
  .nav-links{gap:0;max-width:48vw;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:6px 9px;font-size:13px;white-space:nowrap}
  .hero3d{display:none}
  .hero{padding:26px 0 30px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:clamp(32px,9vw,42px)}
  .hero .lead{font-size:15px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .hero-actions .break{display:none}
  .hero-actions .btn{grid-column:1 / -1;justify-content:center}
  .hero-actions .btn-ghost{justify-content:center;padding:10px 12px;font-size:13.5px}
  .hero-stats{gap:9px}
  .stat{flex:1 1 30%;padding:11px 12px}
  .stat b{font-size:18px}
  .stat span{font-size:11.5px}
  .carousel{height:300px}
  .section{padding:34px 0}
  .section-head{margin-bottom:20px}
  .grid-cards{grid-template-columns:1fr;gap:11px}
  .card{padding:14px;border-radius:16px}
  .card-top{gap:10px;margin-bottom:9px}
  .card-ic{width:40px;height:40px;border-radius:11px}
  .card-desc,.card>p{-webkit-line-clamp:2}
  .tb-head{padding:24px 0 4px}
  .tb-head h1{font-size:30px}
  .toolbar{margin:16px 0 14px;padding:10px;gap:9px}
  .toolbar .search{flex:1 1 100%}
  .toolbar .btn.sm{flex:1 1 100%;justify-content:center}
  .tb-count{margin-bottom:12px}
  .doc-sec{margin-bottom:30px;scroll-margin-top:76px}
  .doc-sec h2{font-size:19px}
  .doc-sec p,.doc-sec li{font-size:14px}
  .doc-kv div{grid-template-columns:1fr;gap:2px}
  .footer{margin-top:36px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0}
  .btn,.btn-ghost{padding:10px 16px;font-size:14px}
}
@media (max-width:420px){
  .hero-actions{grid-template-columns:1fr}
  .hero-actions .btn{grid-column:auto}
  .nav-links .nav-user{display:none}
}



/* ============================================================
   1.0.2 · 视觉重做（更明显的整体感：悬浮顶栏 / 光晕背景 / 强调色卡片）
   ============================================================ */

/* 背景光晕：让页面有一层明显的冷暖过渡，而不是纯色 */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:620px;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 18% 0%,rgba(53,214,242,.18),transparent 70%),
    radial-gradient(55% 65% at 86% 0%,rgba(139,124,248,.17),transparent 70%),
    radial-gradient(45% 55% at 50% 8%,rgba(79,155,255,.08),transparent 70%);
}
[data-theme="light"] body::before{opacity:.55}
[data-theme="amoled"] body::before{opacity:.5}

/* 悬浮胶囊顶栏 */
.topbar{top:10px;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important}
.topbar .wrap{
  height:58px;border:1px solid var(--line);border-radius:16px;
  background:var(--sheet);-webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
  box-shadow:var(--shadow-sm),inset 0 1px 0 var(--hairline);
  padding:0 12px 0 16px;
}
.brand{gap:10px}
.brand span{letter-spacing:.01em}
.nav-links{gap:2px;margin-left:auto}
.nav-links a{padding:7px 12px;border-radius:9px}
.nav-links a.active{background:linear-gradient(120deg,var(--accent-soft),var(--accent-soft-2));box-shadow:inset 0 0 0 1px var(--accent-soft-2)}
.nav-links a.active::after{display:none}
.nav-links .nav-admin{
  color:var(--accent-2)!important;
  border-color:color-mix(in srgb,var(--accent-2) 42%,transparent)!important;
  background:var(--accent-soft-2)!important;
}
.nav-links .nav-admin:hover{border-color:var(--accent-2)!important;background:color-mix(in srgb,var(--accent-2) 18%,transparent)!important}
.theme-toggle{border-radius:10px}

/* 首屏：更大的标题、胶囊小标签、数值条 */
.eyebrow{
  padding:6px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:12px;letter-spacing:.06em;
}
.hero h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.045em;margin-top:18px;
  text-shadow:0 14px 44px rgba(53,214,242,.16)}
.hero .lead{max-width:37em}
.hero .lead-sub{max-width:44ch}
.hero-stats{gap:10px}
.stat{position:relative;overflow:hidden;border-radius:15px}
.stat::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.stat b{background:linear-gradient(120deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* 区块标题前的竖条 */
.section-head h2{display:flex;align-items:center;gap:12px}
.section-head h2::before{
  content:"";width:8px;height:26px;border-radius:4px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 22px rgba(53,214,242,.45);
}

/* 卡片：顶部强调线 + 图标底色跟随工具色 */
.card{overflow:hidden}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ic,var(--accent)),transparent);
  opacity:.55;transition:opacity .3s var(--ease);
}
.card:hover::before{opacity:1}
.card-ic{
  background:var(--surface-2);
  background:color-mix(in srgb,var(--ic,var(--accent)) 16%,transparent);
  border-color:color-mix(in srgb,var(--ic,var(--accent)) 32%,var(--line));
}
.card:hover{
  border-color:color-mix(in srgb,var(--ic,var(--accent)) 42%,var(--line));
  box-shadow:0 24px 54px -28px var(--ic,var(--accent)),var(--shadow-sm);
}
.card-enter{color:var(--ic,var(--accent))}

/* 按钮：更厚的圆角与光 */
.btn{border-radius:13px;box-shadow:0 16px 36px -16px var(--accent)}
.btn-ghost{border-radius:13px;background:var(--surface)}

/* 工具箱侧栏：渐变底 + 选中项左边条 */
.tb-side{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-radius:20px}
.tb-side-head{padding-bottom:11px;border-bottom:1px solid var(--hairline);margin-bottom:12px}
.tb-side .tb-tag.is-on{box-shadow:inset 3px 0 0 var(--accent)}
.tb-side .tb-tag.is-on .tb-tag-text{color:var(--accent);font-weight:600}
.tb-side .tb-tag.is-on .tb-tag-box{background:var(--accent);border-color:transparent}
.tb-side .tb-tag.is-on .tb-tag-box svg{stroke:var(--accent-ink)}
.tb-side .tb-clear,.tb-filter-toggle{
  border-radius:11px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font-weight:600;
}
.tb-side .tb-clear:hover,.tb-filter-toggle:hover{color:var(--text);border-color:var(--line-2);background:var(--surface-3)}
.tb-filter-toggle.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tb-side-close{display:none;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:12px;cursor:pointer}
.tb-side-close:hover{color:var(--text);border-color:var(--line-2)}
@media (max-width:980px){
  .tb-side.open ~ .tb-main .tb-filter-toggle{display:none}
  .tb-side-close{display:inline-flex}
  .tb-side.open .tb-side-head{position:sticky;top:62px;background:var(--bg-2);z-index:2;
    margin:-14px -14px 12px;padding:12px 14px;border-radius:20px 20px 0 0}
}

/* 说明书：左侧竖线，标题下强调短线 */
.doc-sec{position:relative;padding-left:18px}
.doc-sec::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-soft),transparent);
}
.doc-sec h2{border-bottom:0;padding-bottom:0}
.doc-sec h2::after{
  content:"";display:block;width:54px;height:3px;border-radius:3px;margin-top:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
@media (max-width:980px){.doc-sec{padding-left:0}.doc-sec::before{display:none}}

/* 页脚：顶部渐变细线 */
.footer{position:relative;border-top:0;background:linear-gradient(180deg,transparent,var(--surface))}
.footer::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  opacity:.55;
}

/* 工作台侧栏也跟着重一点 */
.wk-side{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.wk-item.on{background:linear-gradient(120deg,var(--accent-soft),var(--accent-soft-2));box-shadow:inset 2px 0 0 var(--accent)}

/* 手机端：悬浮顶栏收窄 */
@media (max-width:760px){
  .topbar{top:8px}
  .topbar .wrap{height:54px;border-radius:14px;padding:0 8px 0 12px}
  body::before{height:420px}
  .hero h1{font-size:clamp(32px,9.5vw,44px)}
  .section-head h2::before{height:22px;width:6px}
}

/* ---------- 工具箱主区头部 ---------- */
.tb-main-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tb-main-head .tb-count{margin:0;flex:1 1 auto;min-height:0}
.tb-main-head .btn.sm{margin-left:auto}
.tb-side-n{font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--accent)}
@media (max-width:980px){
  .tb-main-head{position:sticky;top:66px;z-index:20;padding:8px 0;background:linear-gradient(180deg,var(--bg) 70%,transparent);margin-bottom:10px}
  .tb-main-head .btn.sm{margin-left:0}
}




/* ============================================================
   v1.6.0 · 顶栏统一 + 语言切换
   目标：所有页面顶栏长得一模一样 —— 品牌 / 导航胶囊 / 账号 / 语言 / 主题
   ============================================================ */
.topbar .wrap{gap:14px}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:6px;flex:0 0 auto}
.topbar-actions .nav-account{display:inline-flex;align-items:center;gap:6px}
.topbar-actions .nav-user,.topbar-actions .nav-admin{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:color .25s,border-color .25s,background .25s;
}
.topbar-actions .nav-user:hover{color:var(--accent);border-color:var(--accent)}
.topbar-actions .nav-admin{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 38%,transparent);background:var(--accent-soft-2)}
.topbar-actions .nav-admin:hover{border-color:var(--accent-2)}

/* 导航：一条整块的药丸，当前页填色，其余悬停才亮 */
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;padding:3px;border-radius:12px;border:1px solid var(--hairline);background:var(--stage)}
.nav-links a{padding:7px 11px;border-radius:9px;font-size:14px;line-height:1.2}
.nav-links a:hover{background:var(--surface-2)}
.nav-links a.active{background:linear-gradient(120deg,var(--accent-soft),var(--accent-soft-2));box-shadow:inset 0 0 0 1px var(--accent-soft-2);color:var(--text)}
.nav-links a.active::after{display:none}

/* 语言按钮 + 下拉 */
.lang-toggle{
  position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;flex:0 0 auto;
  transition:color .25s,border-color .25s,background .25s,transform .3s var(--ease);
}
.lang-toggle:hover{color:var(--text);border-color:var(--line-2);background:var(--surface-2)}
.lang-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lang-toggle .lang-cur{letter-spacing:.01em}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:148px;padding:6px;z-index:80;
  border-radius:13px;border:1px solid var(--line-2);background:var(--bg-2);
  box-shadow:var(--shadow);display:none;
}
.lang-toggle.open .lang-menu{display:block}
.lang-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);
  font:inherit;font-size:13.5px;cursor:pointer;text-align:left;
}
.lang-menu button:hover{background:var(--surface-2)}
.lang-menu button.is-on{color:var(--accent)}
.lang-menu button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 俄语等长语言放不下时：导航整条横向滚动，不溢出药丸边界 */
.nav-links{min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:0 0 auto;white-space:nowrap}

@media (max-width:1080px){
  .topbar .wrap{gap:10px}
  .nav-links{padding:2px;max-width:min(62vw,640px);overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:7px 9px;font-size:13.5px}
  .lang-toggle{padding:0 9px}
  .lang-toggle .lang-cur{display:none}
}
@media (max-width:720px){
  .topbar .wrap{height:54px;padding:0 10px 0 12px}
  .brand span{display:none}
  .topbar-actions{gap:6px}
  .topbar-actions .nav-user,.topbar-actions .nav-admin{padding:7px 10px;font-size:12.5px}
  .topbar-actions .nav-admin{display:none}
}


/* ============================================================
   手机端底部导航（mnav.js 注入，只在 <=860px 出现）
   桌面端 .mn-bar/.mn-sheet/.mn-scrim 一律 display:none，零影响
   ============================================================ */
.mn-bar,.mn-sheet,.mn-scrim{display:none}

@media (max-width:860px){
  /* 顶栏让位：9 项导航与账号入口都收进底部栏 / 抽屉，只留 brand + 语言 + 主题 */
  html.has-mnav .topbar .nav-links{display:none!important}
  html.has-mnav .topbar-actions .nav-account,
  html.has-mnav .topbar-actions .nav-user,
  html.has-mnav .topbar-actions .nav-admin,
  html.has-mnav .topbar-actions [data-nav-account]{display:none!important}
  html.has-mnav .topbar .wrap{gap:8px;height:56px}
  html.has-mnav .brand{margin-right:auto}

  /* 给底部条留出高度，否则页面最后一块内容会被压住 */
  html.has-mnav body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  html.has-mnav .hk-toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}

  /* ---------- 底部条 ---------- */
  html.has-mnav .mn-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;
    padding:5px 5px calc(5px + env(safe-area-inset-bottom,0px));
    background:var(--sheet);
    -webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
    border-top:1px solid var(--line);
    box-shadow:0 -14px 36px -24px rgba(0,0,0,.9);
  }
  html.has-mnav .mn-tab{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px 5px;margin:0;border:0;border-radius:14px;background:none;cursor:pointer;
    color:var(--muted);font-size:11px;line-height:1.15;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
    transition:color .22s var(--ease),background .22s var(--ease),transform .18s var(--ease);
  }
  html.has-mnav .mn-tab svg{
    width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  html.has-mnav .mn-tab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.has-mnav .mn-tab.is-on{color:var(--accent);background:var(--accent-soft)}
  html.has-mnav .mn-tab.is-on svg{stroke-width:1.95}
  html.has-mnav .mn-more[data-hot="1"]{color:var(--accent);background:var(--accent-soft)}
  html.has-mnav .mn-tab:active{transform:scale(.93)}

  /* ---------- 遮罩 ---------- */
  html.has-mnav .mn-scrim{
    display:block;position:fixed;inset:0;z-index:940;
    background:rgba(4,8,16,.52);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .26s var(--ease);
  }
  html.has-mnav .mn-scrim.in{opacity:1}

  /* ---------- 抽屉 ---------- */
  html.has-mnav .mn-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:950;
    padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:24px 24px 0 0;border:1px solid var(--line);border-bottom:0;
    background:var(--bg-2);
    box-shadow:0 -22px 52px -26px rgba(0,0,0,.92);
    transform:translateY(102%);
    transition:transform .3s var(--ease);
    will-change:transform;
  }
  html.has-mnav .mn-sheet.in{transform:translateY(0)}
  html.has-mnav .mn-grab{
    display:block;width:38px;height:4px;margin:2px auto 14px;border-radius:999px;
    background:var(--line-2);
  }
  html.has-mnav .mn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html.has-mnav .mn-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    padding:13px 6px 11px;border-radius:16px;
    border:1px solid var(--line);background:var(--surface);
    color:var(--text);font-size:12.5px;text-align:center;
    -webkit-tap-highlight-color:transparent;
    transition:background .22s var(--ease),border-color .22s var(--ease),transform .18s var(--ease);
  }
  html.has-mnav .mn-tile svg{
    width:24px;height:24px;stroke:var(--accent);fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  html.has-mnav .mn-tile span{position:relative;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.has-mnav .mn-tile:active{transform:scale(.95);background:var(--surface-2)}
  html.has-mnav .mn-dot{
    position:absolute;top:-6px;right:-10px;min-width:15px;height:15px;padding:0 4px;
    border-radius:999px;background:var(--accent-2);color:#080b12;
    font-size:10px;font-style:normal;font-weight:700;line-height:15px;text-align:center;
  }

  /* 全屏弹层（灯箱/模态）打开时收起底部条：页面内容都在 .page(z-index:2) 里，
     弹层自己的 z-index 再高也压不过 fixed 的底部条，只能显式隐藏 */
  html.has-mnav.mn-hide-bar .mn-bar{display:none}

  /* 抽屉打开时锁住背景滚动 */
  html.mn-open body{overflow:hidden}
}

@media (max-width:400px){
  html.has-mnav .mn-tab{font-size:10.5px;padding:5px 1px 4px}
  html.has-mnav .mn-tab svg{width:21px;height:21px}
  html.has-mnav .mn-grid{gap:6px}
  html.has-mnav .mn-tile{font-size:12px;padding:12px 4px 10px}
}

/* ---------- 手机端全局微调（第二批） ---------- */
@media (max-width:860px){
  /* 底部条接管导航后，顶栏有位置显示站名了 */
  html.has-mnav .brand span{display:inline}
  /* 工具箱的粘性筛选条要贴着收窄后的顶栏（56px），不然中间会留一条缝 */
  html.has-mnav .tb-main-head{top:56px}
  /* 横向滚动的标签条：能滚时右缘淡出，暗示「还能往右滑」 */
  html.has-mnav .doc-nav.mn-scrollx{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  }
  /* 弹层别顶到屏幕顶上 */
  html.has-mnav .modal-box{max-height:calc(100vh - 96px);overflow:auto}
}
@media (max-width:360px){
  html.has-mnav .mn-tab{font-size:10px}
  html.has-mnav .mn-tab svg{width:20px;height:20px}
}

/* ============================================================
   手机端收尾（2026-10-30 优化批次）
   1. iOS 上输入框字号 < 16px 会在聚焦时自动放大页面 —— 统一抬到 16px
   2. 页脚 / 文档标签 / 首页卡片里的「进入」这类小链接，触摸区抬到 38px 左右
   3. 底部条存在时把页脚留白再撑开一点，避免最后一行贴着条边
   ============================================================ */
@media (max-width:860px){
  html.has-mnav input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html.has-mnav select,
  html.has-mnav textarea{font-size:16px}

  html.has-mnav .footer-links a{min-height:38px;display:inline-flex;align-items:center;padding:8px 12px}
  html.has-mnav .doc-nav a{min-height:38px}
  html.has-mnav .hx-cta{min-height:36px;display:inline-flex;align-items:center}
  html.has-mnav .res-go{min-height:36px;display:inline-flex;align-items:center}

  html.has-mnav .footer{padding-bottom:6px}
}

@media (max-width:400px){
  html.has-mnav .footer-links a{padding:8px 8px;font-size:13px}
}