/* ==========================================================================
   cowmc 站点共享样式 — 仿 FreeLLMAPI（ai.cowmc.net）设计系统
   中性色阶（oklch）/ 亮·暗双主题 / 0.5rem 圆角体系 / Geist 字体
   ========================================================================== */

/* ---- 自托管 Geist 字体（latin 子集，CJK 回退系统字体，与参考站一致）---- */
@font-face{
  font-family:'Geist Variable';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/geist-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist Mono Variable';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- 设计令牌（亮色，对应参考站 :root）---- */
:root{
  --background:oklch(0.995 0 0);
  --foreground:oklch(0.18 0 0);
  --card:oklch(1 0 0);
  --muted:oklch(0.97 0 0);
  --muted-foreground:oklch(0.52 0 0);
  --border:oklch(0.92 0 0);
  --primary:oklch(0.22 0 0);
  --primary-foreground:oklch(0.98 0 0);
  --ring:oklch(0.55 0 0);
  --destructive:oklch(0.577 0.245 27.325);
  --overlay:oklch(0.24 0 0 / 45%);

  /* 语义色（参考站 chart/syntax 色系，用于标签与状态）*/
  --c-blue:oklch(0.55 0.19 255);
  --c-purple:oklch(0.53 0.21 300);
  --c-green:oklch(0.55 0.15 160);
  --c-amber:oklch(0.62 0.13 75);
  --c-cyan:oklch(0.58 0.11 220);

  --font-sans:'Geist Variable',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:'Geist Mono Variable',ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,'Liberation Mono',monospace;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  color-scheme:light;
}
/* ---- 暗色（对应参考站 .dark；跟随系统，亦支持 html.dark 手动切换）---- */
@media (prefers-color-scheme:dark){
  :root{
    --background:oklch(0.168 0.012 265);
    --foreground:oklch(0.98 0 0);
    --card:oklch(0.205 0.013 265);
    --muted:oklch(0.248 0.013 265);
    --muted-foreground:oklch(0.68 0 0);
    --border:oklch(1 0 0 / 12%);
    --primary:oklch(0.93 0 0);
    --primary-foreground:oklch(0.18 0 0);
    --ring:oklch(0.6 0 0);
    --destructive:oklch(0.704 0.191 22.216);
    --overlay:oklch(0 0 0 / 60%);
    --c-blue:oklch(0.72 0.15 255);
    --c-purple:oklch(0.72 0.16 300);
    --c-green:oklch(0.75 0.15 160);
    --c-amber:oklch(0.8 0.12 80);
    --c-cyan:oklch(0.78 0.1 220);
    color-scheme:dark;
  }
}
:root.dark{
  --background:oklch(0.168 0.012 265);
  --foreground:oklch(0.98 0 0);
  --card:oklch(0.205 0.013 265);
  --muted:oklch(0.248 0.013 265);
  --muted-foreground:oklch(0.68 0 0);
  --border:oklch(1 0 0 / 12%);
  --primary:oklch(0.93 0 0);
  --primary-foreground:oklch(0.18 0 0);
  --ring:oklch(0.6 0 0);
  --destructive:oklch(0.704 0.191 22.216);
  --overlay:oklch(0 0 0 / 60%);
  --c-blue:oklch(0.72 0.15 255);
  --c-purple:oklch(0.72 0.16 300);
  --c-green:oklch(0.75 0.15 160);
  --c-amber:oklch(0.8 0.12 80);
  --c-cyan:oklch(0.78 0.1 220);
  color-scheme:dark;
}

/* ---- 基础 ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv11';
}
::selection{background:color-mix(in oklab,var(--foreground) 16%,transparent)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
a{color:var(--foreground);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--foreground) 28%,transparent);text-underline-offset:3px;transition:text-decoration-color .15s ease,color .15s ease}
a:hover{text-decoration-color:var(--foreground)}
code{
  font-family:var(--font-mono);font-size:12.5px;
  background:var(--muted);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;color:var(--foreground);word-break:break-all;
}
.wrap{max-width:1152px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* ---- 顶栏（参考站 sticky header：border-b + 背景 80% + backdrop-blur）---- */
.topbar{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab,var(--background) 80%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:-0.01em;color:var(--foreground);text-decoration:none}
.brand:hover{opacity:.75;text-decoration:none}
/* 参考站品牌标记：8px 实心圆点（隐藏原 "C" 字符）*/
.logo{
  width:8px;height:8px;border-radius:999px;flex:none;
  background:var(--foreground);font-size:0;line-height:0;overflow:hidden;
}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* 登录按钮（参考站 outline 按钮）*/
.login-btn{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:550;
  color:var(--foreground);background:color-mix(in oklab,var(--card) 78%,transparent);
  border:1px solid color-mix(in oklab,var(--foreground) 12%,var(--border));border-radius:10px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 30%);
  transition:background .15s ease,border-color .15s ease,transform .18s var(--ease-out);
}
.login-btn:hover{background:var(--muted);border-color:color-mix(in oklab,var(--foreground) 26%,var(--border));transform:translateY(-1px)}
.login-btn.logged-member{color:var(--c-green);border-color:color-mix(in oklab,var(--c-green) 35%,transparent);background:color-mix(in oklab,var(--c-green) 8%,transparent)}
.login-btn.logged-admin{color:var(--c-amber);border-color:color-mix(in oklab,var(--c-amber) 35%,transparent);background:color-mix(in oklab,var(--c-amber) 8%,transparent)}

/* 汉堡按钮（参考站 ghost icon 按钮）*/
.hamburger{
  width:32px;height:32px;padding:0;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:var(--background);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:background .15s ease,border-color .15s ease;
}
.hamburger:hover{background:var(--muted)}
.hamburger span{display:block;width:14px;height:1.5px;border-radius:2px;background:var(--foreground);transition:transform .28s var(--ease-out),opacity .18s ease}
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---- 抽屉导航（参考站 popover：卡片表面 + 圆角 + 轻阴影）---- */
.drawer-mask{position:fixed;inset:0;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .26s var(--ease-out);z-index:40}
.drawer-mask.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:var(--card);border-left:1px solid var(--border);
  box-shadow:-24px 0 48px -24px oklch(0 0 0 / 25%);
  z-index:41;transform:translateX(102%);transition:transform .3s var(--ease-out);
  display:flex;flex-direction:column;padding:16px;overflow-y:auto;
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px;border-bottom:1px solid var(--border);margin-bottom:8px}
.drawer-head .t{font-size:13px;color:var(--muted-foreground)}
.drawer-close{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted-foreground);font-size:16px;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s ease,background .15s ease;
}
.drawer-close:hover{color:var(--foreground);background:var(--muted)}
.drawer-nav{display:flex;flex-direction:column;gap:2px}
.drawer-nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--foreground);font-size:14px;font-weight:500;text-decoration:none;
  opacity:0;transform:translateX(16px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),background .15s ease;
}
.drawer.open .drawer-nav a{opacity:1;transform:none}
.drawer.open .drawer-nav a:nth-child(1){transition-delay:.04s}
.drawer.open .drawer-nav a:nth-child(2){transition-delay:.08s}
.drawer.open .drawer-nav a:nth-child(3){transition-delay:.12s}
.drawer.open .drawer-nav a:nth-child(4){transition-delay:.16s}
.drawer.open .drawer-nav a:nth-child(5){transition-delay:.2s}
.drawer.open .drawer-nav a:nth-child(6){transition-delay:.24s}
.drawer.open .drawer-nav a:nth-child(7){transition-delay:.28s}
.drawer.open .drawer-nav a:nth-child(8){transition-delay:.32s}
.drawer-nav a:hover{background:var(--muted);text-decoration:none}
.drawer-nav a.active{background:var(--muted)}
.drawer-nav a .idx{
  width:22px;height:22px;border-radius:6px;flex:none;
  background:var(--muted);border:1px solid var(--border);color:var(--muted-foreground);
  font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.drawer-nav a.active .idx{background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.drawer-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.drawer-foot .t{font-size:12px;color:var(--muted-foreground);padding:0 4px}
.drawer-gated{display:flex;flex-direction:column;gap:6px}
.drawer-gated .locked-item{
  font-size:13px;color:var(--muted-foreground);padding:8px 10px;border-radius:8px;
  border:1px dashed var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;
  opacity:0;transform:translateX(16px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.drawer.open .drawer-gated .locked-item{opacity:1;transform:none}
.drawer.open .drawer-gated .locked-item:nth-child(1){transition-delay:.3s}
.drawer.open .drawer-gated .locked-item:nth-child(2){transition-delay:.35s}
/* 登录后由 JS 注入的快捷入口链接 */
.drawer-gated a{
  font-size:13px;font-weight:500;color:var(--foreground);padding:8px 10px;border-radius:8px;
  border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;
  text-decoration:none;opacity:0;transform:translateX(16px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),background .15s ease;
}
.drawer.open .drawer-gated a{opacity:1;transform:none}
.drawer.open .drawer-gated a:nth-of-type(1){transition-delay:.3s}
.drawer.open .drawer-gated a:nth-of-type(2){transition-delay:.35s}
.drawer-gated a:hover{background:var(--muted);text-decoration:none}
.drawer-gated a .ext,.drawer-foot a .ext{color:var(--muted-foreground);font-size:12px;flex-shrink:0}

/* ---- 页头（参考站 PageHeader：大标题 + 弱化描述 + 分隔线）---- */
.hero{padding:48px 0 24px;border-bottom:1px solid var(--border)}
.hero.page{padding:40px 0 24px;text-align:left}
.hero h1{
  margin:0 0 8px;font-size:clamp(26px,4vw,34px);
  font-weight:600;letter-spacing:-0.025em;line-height:1.25;color:var(--foreground);
  animation:heroIn .6s var(--ease-out) both;
}
.hero.page h1{font-size:clamp(22px,3vw,26px)}
.hero .sub{color:var(--muted-foreground);margin:0;max-width:680px;font-size:14px;animation:heroIn .6s var(--ease-out) .06s both}
.breadcrumb{font-size:13px;color:var(--muted-foreground);margin:0 0 14px;animation:heroIn .6s var(--ease-out) both}
.breadcrumb a{color:var(--muted-foreground);text-decoration:none}
.breadcrumb a:hover{color:var(--foreground)}
.breadcrumb .sep{margin:0 8px;opacity:.5}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;animation:heroIn .6s var(--ease-out) .12s both}
.badges span{
  font-size:12px;color:var(--muted-foreground);border:1px solid var(--border);
  border-radius:999px;padding:3px 10px;background:var(--muted);
  transition:border-color .2s var(--ease-out),color .2s ease;
}
.badges span:hover{border-color:color-mix(in oklab,var(--foreground) 22%,var(--border));color:var(--foreground)}
/* 动态额度占位符：保持原字重，避免 b 默认加粗改变排版 */
b[data-quota-inline]{font-weight:inherit;color:inherit}
.cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;animation:heroIn .6s var(--ease-out) .18s both}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- 区块 ---- */
section{padding:28px 0}
h2{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin:0 0 4px;color:var(--foreground)}
.lead{color:var(--muted-foreground);font-size:13.5px;margin:6px 0 18px;max-width:720px}

/* 触感：按下时轻微回弹 */
.btn:active{transform:scale(.97)}
.set-seg button:active,.set-swatches button:active,.tag:active{transform:scale(.93)}
.card.link:active{filter:brightness(.97)}
@media (prefers-reduced-motion:reduce){
  .btn:active,.set-seg button:active,.set-swatches button:active,.tag:active,.card.link:active{transform:none;filter:none}
}

/* 滚动入场（由 JS 添加 .reveal + .reveal--*，动画结束自动移除）
   不同元素用不同入场：标题轻抬、卡片弹入带模糊、横幅缩放、其余上移 */
.reveal{opacity:0;will-change:transform,opacity,filter}
.reveal.in{animation:revealUp .55s var(--ease-out) both}
.reveal--up.in{animation:revealUp .55s var(--ease-out) both}
.reveal--rise.in{animation:revealRise .6s var(--ease-out) both}
.reveal--pop.in{animation:revealPop .62s var(--ease-spring) both}
.reveal--zoom.in{animation:revealZoom .7s var(--ease-out) both}
@keyframes revealUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes revealRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes revealPop{
  from{opacity:0;transform:translateY(20px) scale(.94);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes revealZoom{
  from{opacity:0;transform:scale(.965);filter:blur(9px)}
  to{opacity:1;transform:none;filter:blur(0)}
}


/* ---- 卡片网格（参考站 Card：rounded-3xl + ring 描边）---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{
  background:var(--card);
  border:1px solid var(--border);border-radius:24px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.card:hover{
  border-color:color-mix(in oklab,var(--foreground) 18%,var(--border));
  transform:translateY(-2px);
  box-shadow:0 12px 32px -16px oklch(0 0 0 / 18%);
}
.card h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-0.01em}
.card p{margin:0;color:var(--muted-foreground);font-size:13.5px;flex:1}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* 标签（参考站 Badge：pill）*/
.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;
  border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
}
.tag-blue{color:var(--c-blue);background:color-mix(in oklab,var(--c-blue) 9%,transparent);border-color:color-mix(in oklab,var(--c-blue) 24%,transparent)}
.tag-purple{color:var(--c-purple);background:color-mix(in oklab,var(--c-purple) 9%,transparent);border-color:color-mix(in oklab,var(--c-purple) 24%,transparent)}
.tag-green{color:var(--c-green);background:color-mix(in oklab,var(--c-green) 9%,transparent);border-color:color-mix(in oklab,var(--c-green) 24%,transparent)}
.tag-amber{color:var(--c-amber);background:color-mix(in oklab,var(--c-amber) 9%,transparent);border-color:color-mix(in oklab,var(--c-amber) 24%,transparent)}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}

/* 板块导航卡 */
.card.link{cursor:pointer;color:var(--foreground)}
.card.link:hover{text-decoration:none}
.card .go{margin-top:auto;padding-top:4px;font-size:13px;font-weight:500;color:var(--foreground);text-decoration:none}
.card.link:hover .go{text-decoration:underline;text-underline-offset:4px}

/* 独有特色横幅 */
.feature-banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid color-mix(in oklab,var(--c-green) 28%,transparent);border-radius:24px;
  background:color-mix(in oklab,var(--c-green) 6%,var(--card));
  padding:24px;color:var(--foreground);text-decoration:none;
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.feature-banner:hover{
  text-decoration:none;border-color:color-mix(in oklab,var(--c-green) 50%,transparent);
  transform:translateY(-2px);box-shadow:0 12px 32px -16px color-mix(in oklab,var(--c-green) 35%,transparent);
}
.feature-banner h3{margin:10px 0 6px;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.feature-banner p{margin:0;color:var(--muted-foreground);font-size:13.5px;max-width:660px}
.feature-banner .fb-cta{
  flex-shrink:0;font-size:13px;font-weight:500;color:var(--primary-foreground);background:var(--primary);
  border-radius:8px;padding:9px 16px;
  transition:opacity .15s ease,transform .2s var(--ease-out);
}
.feature-banner:hover .fb-cta{opacity:.88;transform:translateX(3px)}
.feature-banner .fb-live{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12px;color:var(--c-green);border:1px solid color-mix(in oklab,var(--c-green) 28%,transparent);
  background:color-mix(in oklab,var(--c-green) 8%,transparent);border-radius:999px;padding:3px 10px;
}
.feature-banner .fb-live:empty{display:none}
.feature-banner .fb-live::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--c-green);box-shadow:0 0 6px var(--c-green);animation:pulse 2s infinite}

/* ---- 端点行 ---- */
.endpoint{display:flex;align-items:center;gap:10px;margin-top:2px;flex-wrap:wrap}
.endpoint code{flex:1;min-width:0;word-break:normal;overflow-wrap:anywhere}
.ep-label{flex-shrink:0;font-size:11.5px;color:var(--muted-foreground);font-weight:500}
.copy{
  flex-shrink:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:550;
  color:var(--foreground);background:color-mix(in oklab,var(--card) 80%,transparent);
  border:1px solid color-mix(in oklab,var(--foreground) 10%,var(--border));border-radius:9px;padding:7px 12px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 30%);
  transition:background .15s ease,border-color .15s ease,transform .18s var(--ease-out),box-shadow .18s ease;
}
.copy:hover{
  background:var(--muted);border-color:color-mix(in oklab,var(--foreground) 26%,var(--border));
  transform:translateY(-1px);box-shadow:0 6px 14px -10px oklch(0 0 0 / 40%);
}
.copy:active{transform:none}
.copy.done{animation:pop .38s var(--ease-spring)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---- 按钮（参考站 Button：rounded-lg + 实心主色）---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 22px;border-radius:12px;
  font-size:14px;font-weight:600;font-family:inherit;letter-spacing:-0.01em;
  color:oklch(0.99 0 0);
  background:linear-gradient(135deg,oklch(0.66 0.16 248) 0%,oklch(0.58 0.19 285) 54%,oklch(0.55 0.20 312) 100%);
  border:1px solid oklch(1 0 0 / 20%);
  cursor:pointer;text-decoration:none;overflow:hidden;isolation:isolate;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 28%),
    inset 0 -1px 0 oklch(0 0 0 / 16%),
    0 10px 26px -14px oklch(0.55 0.20 290 / 70%),
    0 2px 6px oklch(0 0 0 / 12%);
  transition:transform .22s var(--ease-out),box-shadow .3s var(--ease-out),filter .2s ease;
}
.btn::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,oklch(1 0 0 / 34%) 45%,oklch(1 0 0 / 12%) 54%,transparent 68%);
  transform:translateX(-135%);
  transition:transform .8s var(--ease-out);
}
.btn:hover{
  text-decoration:none;transform:translateY(-2px);filter:saturate(1.06);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 34%),
    inset 0 -1px 0 oklch(0 0 0 / 18%),
    0 18px 38px -16px oklch(0.55 0.20 290 / 80%),
    0 4px 10px oklch(0 0 0 / 14%);
}
.btn:hover::after{transform:translateX(135%)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ghost{
  color:var(--foreground);
  background:color-mix(in oklab,var(--card) 74%,transparent);
  border-color:color-mix(in oklab,var(--foreground) 14%,var(--border));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 38%),0 6px 18px -14px oklch(0 0 0 / 40%);
}
.btn-ghost::after{display:none}
.btn-ghost:hover{
  background:var(--muted);
  border-color:color-mix(in oklab,var(--foreground) 26%,var(--border));
  filter:none;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 30%),0 10px 24px -16px oklch(0 0 0 / 45%);
}

/* ---- 编号步骤 ---- */
.steps{border:1px solid var(--border);border-radius:24px;background:var(--card);padding:4px 20px;box-shadow:0 1px 2px oklch(0 0 0 / 4%)}
.step{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-body{flex:1;min-width:0}
.step-num{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;
  background:var(--muted);border:1px solid var(--border);color:var(--foreground);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s var(--ease-spring);
}
.step:hover .step-num{background:var(--foreground);border-color:var(--foreground);color:var(--background);transform:scale(1.06)}
.step h4{margin:2px 0 4px;font-size:14px;font-weight:600}
.step p{margin:0;color:var(--muted-foreground);font-size:13.5px}
.step .code-block{margin-top:10px}

/* ---- 折叠步骤 ---- */
.acc{display:flex;flex-direction:column;gap:10px}
details{border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .2s var(--ease-out)}
details:hover{border-color:color-mix(in oklab,var(--foreground) 18%,var(--border))}
details[open]{border-color:color-mix(in oklab,var(--foreground) 18%,var(--border))}
summary{cursor:pointer;padding:14px 44px 14px 18px;font-size:14px;font-weight:500;user-select:none;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:12px;color:var(--muted-foreground);font-size:16px;line-height:1.4;transition:transform .25s var(--ease-out),color .2s ease}
details[open] summary::after{content:"\2212";color:var(--foreground)}
details > pre{margin:0 18px 16px;padding:14px;border-radius:12px;background:var(--muted);border:1px solid var(--border);overflow-x:auto;color:var(--foreground);font-size:12.5px;line-height:1.7;font-family:var(--font-mono)}
details > .acc-body{padding:0 18px 16px;color:var(--muted-foreground);font-size:13.5px}
details > .acc-body p{margin:0 0 8px}
details > .acc-body p:last-child{margin-bottom:0}
details[open] > .acc-body,details[open] > pre{animation:accIn .3s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.note{
  color:var(--muted-foreground);font-size:13px;
  border-left:2px solid var(--c-amber);padding:8px 14px;
  background:color-mix(in oklab,var(--c-amber) 6%,transparent);
  border-radius:0 12px 12px 0;margin-top:18px;
}

/* ---- 表格（参考站 Table：圆角容器 + 弱化表头）---- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 1px 2px oklch(0 0 0 / 4%)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
th{color:var(--muted-foreground);font-weight:500;font-size:12.5px;background:var(--muted)}
tr:last-child td{border-bottom:none}
td code{background:transparent;border:none;padding:0;color:var(--foreground);font-size:12.5px}
.gated-row td{padding:12px 14px}

/* ---- 代码块 ---- */
.code-block{margin-top:18px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--muted);transition:border-color .2s var(--ease-out)}
.code-block:hover{border-color:color-mix(in oklab,var(--foreground) 18%,var(--border))}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted-foreground);font-size:12.5px;background:transparent}
.code-block pre{margin:0;padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.7;font-family:var(--font-mono)}
.code-block pre code{background:transparent;border:none;padding:0;color:var(--foreground);font-size:inherit;word-break:normal}


/* ---- MC 服务器状态卡 ---- */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;height:22px;
  font-size:12px;border-radius:999px;padding:0 10px;
  border:1px solid var(--border);color:var(--muted-foreground);background:var(--muted);
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out),background .25s var(--ease-out);
}
.status-pill .dot{width:7px;height:7px;border-radius:999px;background:var(--muted-foreground)}
.status-pill.loading .dot{animation:pulse 1.4s infinite}
.status-pill.online{color:var(--c-green);border-color:color-mix(in oklab,var(--c-green) 35%,transparent);background:color-mix(in oklab,var(--c-green) 8%,transparent)}
.status-pill.online .dot{background:var(--c-green);box-shadow:0 0 8px var(--c-green)}
.status-pill.offline{color:var(--c-amber);border-color:color-mix(in oklab,var(--c-amber) 35%,transparent);background:color-mix(in oklab,var(--c-amber) 8%,transparent)}
.status-pill.offline .dot{background:var(--c-amber)}
.status-main{display:flex;gap:16px;align-items:center}
.mc-icon{width:64px;height:64px;border-radius:12px;border:1px solid var(--border);image-rendering:pixelated;flex-shrink:0}
.status-rows{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.srow{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid var(--border);padding-bottom:8px}
.srow:last-child{border-bottom:none;padding-bottom:0}
.srow .k{color:var(--muted-foreground);flex-shrink:0}
.srow .v{color:var(--foreground);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-foot{margin:0;color:var(--muted-foreground);font-size:12px;flex:none}

/* ---- 额度展示 ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.stat:hover{border-color:color-mix(in oklab,var(--foreground) 18%,var(--border));transform:translateY(-2px);box-shadow:0 12px 32px -16px oklch(0 0 0 / 18%)}
.stat .num{font-size:24px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--foreground)}
.stat .lbl{color:var(--muted-foreground);font-size:12px}
.qtabs{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 0}
.qtabs a{
  font-size:13px;font-weight:500;color:var(--muted-foreground);
  border:1px solid transparent;border-radius:8px;padding:5px 12px;text-decoration:none;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.qtabs a:hover{color:var(--foreground);background:var(--muted);text-decoration:none}
.qtabs a.active{color:var(--primary-foreground);background:var(--primary)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.qitem{
  display:flex;align-items:center;gap:10px;min-width:0;
  border:1px solid transparent;border-radius:12px;
  background:color-mix(in oklab,var(--muted) 55%,transparent);
  padding:9px 12px;font-size:13px;cursor:pointer;
  transition:border-color .18s var(--ease-out),background .18s ease,transform .18s var(--ease-out),opacity .2s var(--ease-out),box-shadow .18s var(--ease-out);
}
.qitem:hover{border-color:color-mix(in oklab,var(--foreground) 16%,var(--border));background:var(--muted)}
.qitem.col{flex-direction:column;align-items:stretch;gap:3px}
.qitem .qhead{display:flex;align-items:center;gap:10px;min-width:0}
.qdot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.qname{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.qprov{
  flex-shrink:0;font-size:10.5px;color:var(--muted-foreground);
  border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:17px;background:var(--background);
}
.qnum{flex-shrink:0;font-family:var(--font-mono);font-size:12px;color:var(--foreground);font-variant-numeric:tabular-nums}
.qnum i{font-style:normal;color:var(--muted-foreground);font-size:10.5px;margin-left:2px}
.qnum.qinf{color:var(--foreground);font-weight:500}
.qsub{color:var(--muted-foreground);font-size:12px;padding-left:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-state{border:1px dashed var(--border);border-radius:24px;background:var(--muted);padding:44px 20px;text-align:center}
.empty-state h3{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--foreground)}
.empty-state p{margin:0;color:var(--muted-foreground);font-size:13px}

/* 额度实时同步徽标 */
.live-badge{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:4px 12px;
  border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted-foreground);background:var(--muted);
}
.live-badge .dot{width:7px;height:7px;border-radius:999px;background:var(--muted-foreground);flex-shrink:0}
.live-badge.ok{color:var(--c-green);border-color:color-mix(in oklab,var(--c-green) 30%,transparent)}
.live-badge.ok .dot{background:var(--c-green);animation:livePulse 2.4s ease-out infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c-green) 45%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in oklab,var(--c-green) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--c-green) 0%,transparent)}
}

/* 模型搜索 */
.qsearch-box{display:flex;align-items:center;gap:12px;margin:18px 0 4px;flex-wrap:wrap}
.qsearch{
  flex:1;min-width:240px;max-width:560px;height:36px;
  background:var(--background);border:1px solid var(--border);border-radius:8px;
  color:var(--foreground);font:inherit;font-size:13.5px;padding:8px 12px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.qsearch:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 22%,transparent)}
.qsearch::placeholder{color:var(--muted-foreground)}
.qsearch:disabled{opacity:.6;cursor:not-allowed}
.qsearch-hint{font-size:12.5px;color:var(--muted-foreground)}
.qsearch-results{margin:8px 0 4px}
.qsearch-results .qgrid{margin-top:0}
.qsearch-empty{color:var(--muted-foreground);font-size:13px;padding:8px 0}
/* 分类标签药丸（全局搜索结果）*/
.qcat{
  flex-shrink:0;font-size:10.5px;font-weight:500;color:var(--foreground);
  border:1px solid var(--border);background:var(--background);
  border-radius:999px;padding:0 8px;line-height:17px;text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.qcat:hover{background:var(--muted);border-color:color-mix(in oklab,var(--foreground) 20%,var(--border))}
/* 页内搜索：非匹配项淡化 + 不可交互 */
.qitem.dim{opacity:.32;pointer-events:none}
/* 命中项高亮：描边提亮 + 微光环 */
.qitem.match{
  border-color:var(--foreground);background:var(--background);
  box-shadow:0 0 0 1px var(--foreground);
}
.qitem.match:hover{border-color:var(--foreground);background:var(--muted)}
/* 命中项首次置顶弹入 */
.qitem.match-in{animation:qmatchIn .34s var(--ease-spring) both}
@keyframes qmatchIn{0%{opacity:.4;transform:translateY(-4px) scale(.985)}60%{opacity:1;transform:translateY(0) scale(1.012)}100%{opacity:1;transform:none}}
/* 命中计数徽章 */
.qsearch-count{
  font-size:11.5px;font-weight:500;color:var(--foreground);
  border:1px solid var(--border);background:var(--muted);
  border-radius:999px;padding:2px 10px;line-height:18px;
  animation:qcountIn .22s var(--ease-out) both;
}
@keyframes qcountIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
/* 有限/无限额度标签 */
.qkind{flex-shrink:0;font-size:10px;font-weight:600;border-radius:999px;padding:0 7px;line-height:16px}
.qkind-budget{color:var(--c-blue);border:1px solid color-mix(in oklab,var(--c-blue) 30%,transparent);background:color-mix(in oklab,var(--c-blue) 8%,transparent)}
.qkind-unlimited{color:var(--foreground);border:1px solid var(--border);background:var(--muted)}

/* 模型介绍弹窗（参考站 Dialog）*/
.qinfo-mask{position:fixed;inset:0;z-index:60;background:var(--overlay);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:maskIn .2s ease both}
.qinfo-modal{
  width:100%;max-width:420px;background:var(--card);
  border:1px solid var(--border);border-radius:24px;
  box-shadow:0 24px 64px -24px oklch(0 0 0 / 35%);
  animation:modalIn .28s var(--ease-spring) both;overflow:hidden;
}
.qinfo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.qinfo-head h3{margin:0;font-size:15px;font-weight:600;line-height:1.4;word-break:break-word}
.qinfo-close{
  background:none;border:none;color:var(--muted-foreground);font-size:18px;cursor:pointer;
  line-height:1;padding:4px 8px;border-radius:8px;flex-shrink:0;
  transition:color .15s ease,background .15s ease;
}
.qinfo-close:hover{color:var(--foreground);background:var(--muted)}
.qinfo-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px}
.qinfo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;background:var(--muted);border-radius:10px;border:1px solid transparent}
.qinfo-row span{color:var(--muted-foreground);font-size:12.5px;flex-shrink:0}
.qinfo-row b{color:var(--foreground);font-size:13px;font-weight:500;text-align:right;word-break:break-word}
.qinfo-row b.qinf{color:var(--foreground)}


/* ---- AI 在线体验 ---- */
.chat{border:1px solid var(--border);border-radius:24px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px oklch(0 0 0 / 4%)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.chat-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.chat-title .dot{width:8px;height:8px;border-radius:999px;background:var(--c-green);box-shadow:0 0 8px var(--c-green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.chat-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.model-pick{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-foreground)}
.model-pick select{
  appearance:none;-webkit-appearance:none;
  background:var(--background) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--border);border-radius:8px;color:var(--foreground);
  font:inherit;font-size:12.5px;padding:5px 28px 5px 10px;cursor:pointer;outline:none;max-width:250px;height:30px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.model-pick select:hover{border-color:color-mix(in oklab,var(--foreground) 20%,var(--border))}
.model-pick select:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 22%,transparent)}
.model-pick select option,.model-pick select optgroup{background:var(--card);color:var(--foreground)}
.model-pick select option:disabled{color:var(--muted-foreground)}
.chat-clear{
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted-foreground);
  background:var(--background);border:1px solid var(--border);border-radius:8px;padding:5px 12px;height:30px;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.chat-clear:hover{color:var(--foreground);background:var(--muted);border-color:color-mix(in oklab,var(--foreground) 20%,var(--border))}
.chat-body{height:400px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.chat-body::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.msg{display:flex;gap:10px;max-width:86%;animation:msgIn .3s var(--ease-out) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg .avatar{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
}
.msg.assistant .avatar{background:var(--primary);color:var(--primary-foreground)}
.msg.user .avatar{background:var(--muted);border:1px solid var(--border);color:var(--muted-foreground)}
.msg .bubble{padding:10px 14px;border-radius:16px;font-size:13.5px;white-space:pre-wrap;word-break:break-word;line-height:1.7}
.msg.assistant .bubble{background:var(--muted);border:1px solid var(--border);border-top-left-radius:6px}
.msg.user .bubble{background:var(--primary);color:var(--primary-foreground);border-top-right-radius:6px;font-weight:500}
.msg.assistant .bubble.error{color:var(--destructive);border-color:color-mix(in oklab,var(--destructive) 40%,transparent)}
.msg .thinking{color:var(--muted-foreground);font-size:13px}
.typing{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.typing i{width:5px;height:5px;border-radius:999px;background:var(--muted-foreground);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-input{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--border);background:var(--muted)}
.chat-input textarea{
  flex:1;resize:none;background:var(--background);border:1px solid var(--border);border-radius:12px;
  color:var(--foreground);font:inherit;font-size:13.5px;padding:10px 12px;max-height:120px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.chat-input textarea:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 22%,transparent)}
.chat-input textarea::placeholder{color:var(--muted-foreground)}
.chat-send{
  flex-shrink:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;
  color:var(--primary-foreground);background:var(--primary);
  border:1px solid transparent;border-radius:10px;padding:0 18px;height:38px;
  transition:background .15s ease,transform .15s var(--ease-out),opacity .15s ease;
}
.chat-send:hover{background:color-mix(in oklab,var(--primary) 88%,var(--background));transform:translateY(-1px)}
.chat-send.stop{background:var(--destructive);color:oklch(0.98 0 0)}
.chat-foot{padding:10px 16px 12px;color:var(--muted-foreground);font-size:12px;border-top:1px dashed var(--border)}
.retry-btn{
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;color:var(--foreground);
  background:var(--background);border:1px solid var(--border);border-radius:8px;
  padding:2px 10px;margin-left:6px;vertical-align:middle;
  transition:background .15s ease;
}
.retry-btn:hover{background:var(--muted)}
.sysnote{
  align-self:center;font-size:12px;color:var(--muted-foreground);
  border:1px dashed var(--border);border-radius:999px;padding:3px 12px;
  animation:msgIn .3s var(--ease-out) both;
}
.hint-models{
  margin-top:16px;font-size:13px;color:var(--muted-foreground);
  border:1px solid var(--border);border-radius:16px;padding:12px 16px;background:var(--muted);
}
.hint-models strong{color:var(--foreground);font-weight:600}

/* ---- 访问登录（顶栏按钮 + 模态）---- */
.auth-mask{position:fixed;inset:0;z-index:60;background:var(--overlay);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:maskIn .2s ease both}
.auth-mask[hidden]{display:none}
.auth-modal{
  width:100%;max-width:400px;background:var(--card);
  border:1px solid var(--border);border-radius:24px;
  box-shadow:0 24px 64px -24px oklch(0 0 0 / 35%);
  animation:modalIn .28s var(--ease-spring) both;overflow:hidden;
}
.auth-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.auth-head h3{margin:0;font-size:15px;font-weight:600}
.auth-close{
  background:none;border:none;color:var(--muted-foreground);font-size:18px;cursor:pointer;
  line-height:1;padding:4px 8px;border-radius:8px;transition:color .15s ease,background .15s ease;
}
.auth-close:hover{color:var(--foreground);background:var(--muted)}
.auth-body{padding:20px}
.auth-hint{margin:0 0 14px;font-size:13px;color:var(--muted-foreground);line-height:1.7}
.auth-form{display:flex;gap:8px}
.auth-form input{
  flex:1;min-width:0;height:36px;background:var(--background);
  border:1px solid var(--border);border-radius:8px;color:var(--foreground);
  font:inherit;font-size:13.5px;padding:8px 12px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.auth-form input:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 22%,transparent)}
.auth-form input::placeholder{color:var(--muted-foreground)}
.auth-submit{
  flex-shrink:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;height:36px;
  color:var(--primary-foreground);background:var(--primary);
  border:1px solid transparent;border-radius:8px;padding:0 16px;
  transition:background .15s ease,opacity .15s ease;
}
.auth-submit:hover{background:color-mix(in oklab,var(--primary) 88%,var(--background))}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-err{margin:10px 0 0;font-size:12.5px;color:var(--destructive)}
.auth-account p{margin:0 0 12px;font-size:13.5px;color:var(--muted-foreground)}
.auth-account b{color:var(--foreground)}
.auth-logout{
  width:100%;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;height:36px;
  color:var(--destructive);background:color-mix(in oklab,var(--destructive) 8%,transparent);
  border:1px solid color-mix(in oklab,var(--destructive) 30%,transparent);border-radius:8px;
  transition:background .15s ease;
}
.auth-logout:hover{background:color-mix(in oklab,var(--destructive) 15%,transparent)}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* ---- 门控内容（未登录不传输，登录后由后端下发填充）---- */
.gated-slot{min-height:34px}
.gated-lock{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted-foreground);
  border:1px dashed var(--border);border-radius:12px;padding:8px 12px;
  background:color-mix(in oklab,var(--muted) 45%,transparent);
}
.gated-lock .g-ico{flex-shrink:0}
.gated-lock .g-text{flex:1;min-width:0}
.g-btn{
  flex-shrink:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;height:24px;
  color:var(--foreground);background:var(--background);
  border:1px solid var(--border);border-radius:999px;padding:0 12px;
  transition:background .15s ease,border-color .15s ease;
}
.g-btn:hover{background:var(--muted);border-color:color-mix(in oklab,var(--foreground) 20%,var(--border))}

/* ---- 页脚 ---- */
footer{border-top:1px solid var(--border);margin-top:40px;padding:28px 0;color:var(--muted-foreground);font-size:13px;text-align:center}
footer p{margin:0}
.foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.foot-links a{color:var(--muted-foreground);text-decoration:none;transition:color .15s ease}
.foot-links a:hover{color:var(--foreground)}

/* ---- 减弱动效适配 ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

@media (max-width:640px){
  .chat-body{height:340px}
  .hero{padding:32px 0 20px}
  .hero.page{padding:28px 0 20px}
  section{padding:24px 0}
  .card{border-radius:20px;padding:16px}
  .steps,.feature-banner{border-radius:20px}
  .msg{max-width:94%}
}


/* ---- 会员站实景预览（宣传截图）---- */
.shot{margin:0}
.shot-main{margin-top:20px}
.shot-frame{
  border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
  cursor:zoom-in;
}
.shot-frame:hover{
  border-color:color-mix(in oklab,var(--foreground) 22%,var(--border));
  transform:translateY(-2px);
  box-shadow:0 16px 40px -20px oklch(0 0 0 / 25%);
}
.shot-frame img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:10px;font-size:12.5px;color:var(--muted-foreground);text-align:center;line-height:1.7}
.shot figcaption b{font-weight:600;color:var(--foreground)}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
@media (max-width:640px){.shot-grid{grid-template-columns:1fr}}

/* 大图灯箱 */
.lb-mask{
  position:fixed;inset:0;z-index:80;background:var(--overlay);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  cursor:zoom-out;animation:maskIn .2s ease both;
}
.lb-mask img{
  max-width:100%;max-height:calc(100vh - 48px);border-radius:12px;
  box-shadow:0 32px 80px -24px oklch(0 0 0 / 45%);cursor:default;
  animation:modalIn .25s var(--ease-out) both;
}

/* 特性条（说服力）*/
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
.feat{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--card);
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.feat:hover{border-color:color-mix(in oklab,var(--foreground) 20%,var(--border));transform:translateY(-2px);box-shadow:0 12px 32px -16px oklch(0 0 0 / 18%)}
.feat .f-ico{
  flex-shrink:0;width:36px;height:36px;border-radius:10px;
  background:var(--muted);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--foreground);
}
.feat .f-ico svg{width:18px;height:18px}
.feat h3{margin:0 0 2px;font-size:13.5px;font-weight:600}
.feat p{margin:0;font-size:12.5px;color:var(--muted-foreground);line-height:1.6}

/* ---- 接入流程图（SVG）---- */
.pipe{margin-top:20px}
.pipe svg{display:block;width:100%;height:auto;color:var(--muted-foreground)}
.pipe text{font-family:var(--font-sans)}
.pipe-box{fill:var(--card);stroke:var(--border);stroke-width:1}
.pipe-mid{fill:var(--foreground)}
.pipe-t{fill:var(--foreground);font-size:15px;font-weight:600}
.pipe-s{fill:var(--muted-foreground);font-size:12px}
.pipe-t-in{fill:var(--background);font-size:15px;font-weight:600}
.pipe-s-in{fill:color-mix(in oklab,var(--background) 72%,transparent);font-size:12px}
.pipe-arrow{stroke:currentColor;stroke-width:1.5;marker-end:url(#pipeArrow)}
.pipe-lab{fill:var(--muted-foreground);font-size:11px;font-weight:500}
.pipe-strip{fill:color-mix(in oklab,var(--muted) 55%,transparent);stroke:var(--border);stroke-width:1;stroke-dasharray:5 4}
.pipe-dot{fill:var(--c-green)}
.pipe-strip-t{fill:var(--muted-foreground);font-size:12px}

/* 三步接入 */
.pipe-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.pstep{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.pstep-num{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;
  background:var(--foreground);color:var(--background);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;
}
.pstep h3{margin:0 0 2px;font-size:13.5px;font-weight:600}
.pstep p{margin:0;font-size:12.5px;color:var(--muted-foreground);line-height:1.6}


/* ============================================================
   个人站扩展：作品集 / 博客 / 产品页 / 文章排版
   ============================================================ */

/* 抽屉第 9、10 项动画延迟 */
.drawer.open .drawer-nav a:nth-child(9){transition-delay:.36s}
.drawer.open .drawer-nav a:nth-child(10){transition-delay:.4s}

/* 首页 hero */
.hero-home{padding:56px 0 30px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 16px;
  font-size:12px;color:var(--muted-foreground);
  border:1px solid var(--border);border-radius:999px;padding:4px 12px;background:var(--muted);
  animation:heroIn .6s var(--ease-out) both;
}
.eyebrow .dot{width:6px;height:6px;border-radius:999px;background:var(--c-green);box-shadow:0 0 6px var(--c-green)}
.hero-home h1{font-size:clamp(28px,5vw,44px);line-height:1.15;letter-spacing:-0.035em;margin:0 0 14px;max-width:860px}
.hero-home .sub{max-width:720px}

/* 通用区块标题行 */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sec-head h2{margin:0}
.sec-more{font-size:13px;color:var(--muted-foreground);text-decoration:none;white-space:nowrap}
.sec-more:hover{color:var(--foreground)}

/* 文章列表 */
.post-list{border:1px solid var(--border);border-radius:24px;background:var(--card);overflow:hidden;box-shadow:0 1px 2px oklch(0 0 0 / 4%)}
.post-row{
  display:grid;grid-template-columns:96px 1fr 20px;gap:16px;align-items:center;
  padding:17px 22px;border-bottom:1px solid var(--border);
  color:var(--foreground);text-decoration:none;
  transition:background .18s var(--ease-out);
}
.post-row:last-child{border-bottom:none}
.post-row:hover{background:var(--muted);text-decoration:none}
.post-row time{font-size:12px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.post-row .t{font-size:14.5px;font-weight:550;letter-spacing:-0.01em;display:block}
.post-row .d{font-size:12.5px;color:var(--muted-foreground);margin-top:3px;display:block}
.post-row .arrow{color:var(--muted-foreground);transition:transform .2s var(--ease-out),color .2s ease;text-align:right}
.post-row:hover .arrow{transform:translateX(3px);color:var(--foreground)}
@media (max-width:600px){
  .post-row{grid-template-columns:1fr 16px;gap:10px;padding:15px 16px}
  .post-row time{grid-column:1/-1;font-size:11.5px}
}

/* 博客大卡片（列表页） */
.post-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.post-card{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--border);border-radius:24px;background:var(--card);
  padding:22px;text-decoration:none;color:var(--foreground);
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.post-card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--foreground) 18%,var(--border));box-shadow:0 14px 36px -20px oklch(0 0 0 / 26%);text-decoration:none}
.post-card .pc-top{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-foreground)}
.post-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-0.015em;line-height:1.4}
.post-card p{margin:0;font-size:13.5px;color:var(--muted-foreground);line-height:1.7}
.post-card .pc-foot{margin-top:auto;padding-top:6px;font-size:12.5px;color:var(--muted-foreground);display:flex;gap:10px;align-items:center}

/* 作品 / 仓库卡 */
.repo-card{display:flex;flex-direction:column;gap:10px}
.repo-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.repo-name{font-family:var(--font-mono);font-size:13.5px;font-weight:500;letter-spacing:-0.01em}
.lang-dot{width:9px;height:9px;border-radius:999px;display:inline-block;flex-shrink:0}
.repo-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted-foreground);margin-top:auto;padding-top:4px}
.repo-meta span{display:inline-flex;align-items:center;gap:5px}

/* 产品卡（付费作品） */
.product{
  position:relative;overflow:hidden;
  border:1px solid var(--border);border-radius:24px;background:var(--card);
  padding:28px;box-shadow:0 1px 2px oklch(0 0 0 / 4%);
}
.product::before{
  content:"";position:absolute;inset:-40% 40% 55% -10%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--c-purple) 14%,transparent),transparent);
}
.product > *{position:relative}
.product-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:28px;align-items:start}
@media (max-width:860px){.product-grid{grid-template-columns:1fr;gap:20px}}
.product h3{margin:12px 0 8px;font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-0.025em;line-height:1.3}
.product .p-sub{margin:0 0 16px;color:var(--muted-foreground);font-size:14px;line-height:1.75;max-width:640px}
.product .p-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.product .p-list li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted-foreground);line-height:1.65}
.product .p-list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;background:var(--c-green)}
.product .p-list strong{color:var(--foreground);font-weight:550}

.price-box{
  border:1px solid var(--border);border-radius:20px;background:var(--muted);
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.price-box .pb-label{font-size:12px;color:var(--muted-foreground)}
.price{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.price .cur{font-size:18px;font-weight:500;color:var(--muted-foreground)}
.price .num{font-size:42px;font-weight:600;letter-spacing:-0.04em;line-height:1}
.price .unit{font-size:12.5px;color:var(--muted-foreground)}
.price-box .pb-rows{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted-foreground)}
.price-box .pb-rows div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--border);padding-bottom:6px}
.price-box .pb-rows div:last-child{border-bottom:none;padding-bottom:0}
.price-box .pb-rows b{color:var(--foreground);font-weight:500}

/* 规格小格 */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:18px}
.spec{border:1px solid var(--border);border-radius:14px;background:var(--background);padding:12px 14px}
.spec .n{font-size:21px;font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;display:block;line-height:1.2}
.spec .l{font-size:11.5px;color:var(--muted-foreground);display:block;margin-top:2px}

/* 时间线 */
.tl{position:relative;margin:6px 0 0 8px;padding-left:22px;border-left:1px solid var(--border)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-26px;top:5px;width:7px;height:7px;border-radius:999px;background:var(--foreground);box-shadow:0 0 0 4px var(--background)}
.tl-item h4{margin:0 0 3px;font-size:13.5px;font-weight:600}
.tl-item p{margin:0;font-size:13px;color:var(--muted-foreground);line-height:1.7}

/* 提示块 */
.callout{
  display:flex;gap:12px;margin:18px 0;padding:14px 16px;border-radius:14px;
  border:1px solid var(--border);background:var(--muted);
  font-size:13px;color:var(--muted-foreground);line-height:1.75;
}
.callout .ci{flex-shrink:0;width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--background);background:var(--foreground)}
.callout.warn{border-color:color-mix(in oklab,var(--c-amber) 28%,transparent);background:color-mix(in oklab,var(--c-amber) 7%,transparent)}
.callout.warn .ci{background:var(--c-amber);color:oklch(0.2 0 0)}
.callout.ok{border-color:color-mix(in oklab,var(--c-green) 28%,transparent);background:color-mix(in oklab,var(--c-green) 7%,transparent)}
.callout.ok .ci{background:var(--c-green);color:oklch(0.2 0 0)}
.callout strong{color:var(--foreground);font-weight:550}

/* 文章页 */
.post-head{padding:44px 0 26px;border-bottom:1px solid var(--border);margin-bottom:34px}
.post-head h1{font-size:clamp(24px,4vw,36px);line-height:1.25;letter-spacing:-0.03em;margin:10px 0 12px;max-width:820px}
.post-head .dek{color:var(--muted-foreground);font-size:15px;line-height:1.8;margin:0;max-width:700px}
.post-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-foreground);margin-top:16px}
.post-meta .sep{opacity:.4}
.article-wrap{max-width:760px;margin:0 auto}
.prose{font-size:15px;line-height:1.9;color:color-mix(in oklab,var(--foreground) 88%,var(--muted-foreground))}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin:38px 0 12px;color:var(--foreground);scroll-margin-top:72px}
.prose h3{font-size:15.5px;font-weight:600;margin:26px 0 8px;color:var(--foreground)}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:5px 0}
.prose li::marker{color:var(--muted-foreground)}
.prose a{color:var(--foreground);text-underline-offset:3px}
.prose strong{color:var(--foreground);font-weight:600}
.prose blockquote{
  margin:20px 0;padding:14px 18px;border-left:2px solid var(--c-blue);
  background:color-mix(in oklab,var(--c-blue) 6%,transparent);
  border-radius:0 12px 12px 0;color:var(--muted-foreground);font-size:14px;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:none;border-top:1px solid var(--border);margin:34px 0}
.prose code{font-size:12.8px}
.prose .code-block{margin:18px 0}
.prose table{font-size:13px}
.prose .table-wrap{margin:18px 0}
.prose figure{margin:22px 0}
.prose figcaption{font-size:12.5px;color:var(--muted-foreground);margin-top:8px;text-align:center}
.prose .kicker{font-size:12px;color:var(--muted-foreground);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}

.post-foot{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.post-tags{display:flex;gap:6px;flex-wrap:wrap}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0}
.post-nav a{
  display:flex;flex-direction:column;gap:4px;padding:14px 16px;
  border:1px solid var(--border);border-radius:16px;background:var(--card);
  text-decoration:none;color:var(--foreground);font-size:13.5px;
  transition:border-color .2s var(--ease-out),background .2s ease;
}
.post-nav a:hover{border-color:color-mix(in oklab,var(--foreground) 20%,var(--border));background:var(--muted);text-decoration:none}
.post-nav .k{font-size:11.5px;color:var(--muted-foreground)}
.post-nav a.next{text-align:right;align-items:flex-end}
@media (max-width:600px){.post-nav{grid-template-columns:1fr}}

/* 作品页：条目 */
.work-block{display:grid;grid-template-columns:1fr;gap:0}
.work-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.work-head h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.015em}
.work-sub{font-size:12.5px;color:var(--muted-foreground);font-family:var(--font-mono)}
.work-body{color:var(--muted-foreground);font-size:13.5px;line-height:1.8;margin:10px 0 0}
.work-body strong{color:var(--foreground);font-weight:550}

/* 标签行 */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:11.5px;color:var(--muted-foreground);border:1px solid var(--border);border-radius:999px;padding:2px 9px;background:var(--background)}



/* ============================================================
   氛围与动态细节：渐变背景 / 网格纹理 / 光晕 / 引导 / 进度
   ============================================================ */

body{position:relative}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in oklab,var(--foreground) 3.2%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in oklab,var(--foreground) 3.2%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 95% 62% at 50% 0%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 95% 62% at 50% 0%,#000 10%,transparent 78%);
  opacity:.5;
}
@media (prefers-color-scheme:dark){
  body{
    background:
      radial-gradient(1100px 640px at 6% -12%,color-mix(in oklab,var(--c-blue) 14%,transparent),transparent 62%),
      radial-gradient(900px 540px at 94% -8%,color-mix(in oklab,var(--c-purple) 12%,transparent),transparent 64%),
      radial-gradient(1000px 640px at 50% 110%,color-mix(in oklab,var(--c-green) 7%,transparent),transparent 62%),
      var(--background);
    background-attachment:fixed;
  }
  body::before{opacity:.85}
  .card,.stat,.product,.post-card,.post-list,.steps,.table-wrap,.code-block,.price-box{
    background-image:linear-gradient(180deg,color-mix(in oklab,var(--foreground) 3.5%,transparent),transparent 58%);
  }
  .card:hover,.post-card:hover{
    box-shadow:0 20px 54px -30px oklch(0 0 0 / 75%),0 0 0 1px color-mix(in oklab,var(--c-blue) 20%,transparent);
  }
  .topbar{background:color-mix(in oklab,var(--background) 72%,transparent)}
}
@media (prefers-color-scheme:dark) and (prefers-reduced-motion:no-preference){
  .hero-home::before,.hero-home::after{opacity:.9}
}
:root.dark body{
  background:
    radial-gradient(1100px 640px at 6% -12%,color-mix(in oklab,var(--c-blue) 14%,transparent),transparent 62%),
    radial-gradient(900px 540px at 94% -8%,color-mix(in oklab,var(--c-purple) 12%,transparent),transparent 64%),
    radial-gradient(1000px 640px at 50% 110%,color-mix(in oklab,var(--c-green) 7%,transparent),transparent 62%),
    var(--background);
  background-attachment:fixed;
}

/* hero 光晕 */
.hero-home{position:relative;overflow:clip}
.hero-home::before,.hero-home::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(54px);z-index:0;
}
.hero-home::before{
  width:520px;height:520px;right:-90px;top:-220px;
  background:radial-gradient(circle,color-mix(in oklab,var(--c-blue) 26%,transparent),transparent 68%);
  animation:auroraA 18s ease-in-out infinite;
}
.hero-home::after{
  width:440px;height:440px;left:-120px;top:-160px;
  background:radial-gradient(circle,color-mix(in oklab,var(--c-purple) 20%,transparent),transparent 68%);
  animation:auroraB 22s ease-in-out infinite;
}
.hero-home > .wrap{position:relative;z-index:1}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(36px,26px,0) scale(1.12)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-30px,20px,0) scale(.94)}}

/* 暗色标题渐变（有 background-clip 才启用） */
@supports (background-clip:text) or (-webkit-background-clip:text){
  @media (prefers-color-scheme:dark){
    .hero-home h1{
      background:linear-gradient(104deg,var(--foreground) 8%,color-mix(in oklab,var(--c-blue) 62%,var(--foreground)) 48%,color-mix(in oklab,var(--c-purple) 55%,var(--foreground)) 68%,var(--foreground) 96%);
      background-size:180% 100%;
      -webkit-background-clip:text;background-clip:text;color:transparent;
      animation:hueSlide 14s ease-in-out infinite;
    }
  }
}
@keyframes hueSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 顶部阅读进度 */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:55;pointer-events:none;
  background:linear-gradient(90deg,var(--c-blue),var(--c-purple),var(--c-green));
  box-shadow:0 0 12px color-mix(in oklab,var(--c-purple) 55%,transparent);
  transition:width .12s linear;
}

/* 右下角分节引导 */
.guide{
  position:fixed;right:22px;bottom:22px;z-index:38;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.guide.show{opacity:1;transform:none;pointer-events:auto}
.guide-count{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted-foreground);
  background:color-mix(in oklab,var(--card) 78%,transparent);
  border:1px solid var(--border);border-radius:999px;padding:2px 9px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.guide-btn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 18px;
  border-radius:999px;border:1px solid color-mix(in oklab,var(--foreground) 16%,var(--border));
  background:color-mix(in oklab,var(--card) 86%,transparent);
  color:var(--foreground);font-family:var(--font-sans);font-size:13px;font-weight:500;
  cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -20px oklch(0 0 0 / 60%);
  transition:transform .22s var(--ease-out),border-color .2s ease,box-shadow .25s var(--ease-out),background .2s ease;
}
.guide-btn:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab,var(--foreground) 30%,var(--border));
  box-shadow:0 16px 36px -20px oklch(0 0 0 / 65%);
}
.guide-btn:active{transform:none}
.guide-btn svg{width:14px;height:14px;flex-shrink:0;animation:nudge 2.4s ease-in-out infinite}
.guide-btn.up svg{animation:nudgeUp 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(3px);opacity:1}}
@keyframes nudgeUp{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-3px);opacity:1}}
@media (max-width:640px){
  .guide{right:14px;bottom:14px}
  .guide-btn{height:36px;padding:0 12px 0 15px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .hero-home::before,.hero-home::after{animation:none}
  .hero-home h1{animation:none}
  .guide-btn svg{animation:none}
}


/* ============================================================
   3D 粒子背景（地球 / 字节点阵）+ 颜色切换
   ============================================================ */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;width:100%;height:100%}
.guide-colors{
  display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;
  background:color-mix(in oklab,var(--card) 78%,transparent);
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.guide-colors button{
  width:13px;height:13px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid oklch(0 0 0 / 18%);background:var(--sw);opacity:.5;
  transition:opacity .18s ease,transform .2s var(--ease-spring),box-shadow .2s ease;
}
.guide-colors button:hover{opacity:.9;transform:scale(1.12)}
.guide-colors button.on{
  opacity:1;transform:scale(1.06);
  box-shadow:0 0 0 2px var(--background),0 0 0 3px color-mix(in oklab,var(--sw) 70%,transparent);
}
@media (prefers-reduced-motion:reduce){.bg-fx{opacity:.75}}


.guide-colors button.custom{
  background:conic-gradient(from 210deg,#f87171,#fbbf24,#34d399,#22d3ee,#60a5fa,#a78bfa,#f87171);
  position:relative;overflow:hidden;
}



/* ============================================================
   细节优化：滚动条 / 模型跑马灯 / 目录 / Toast / FAQ
   ============================================================ */

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in oklab,var(--foreground) 16%,transparent);
  border:2px solid transparent;background-clip:content-box;border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--foreground) 28%,transparent);background-clip:content-box}

/* 模型跑马灯 */
.marquee{
  overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:12px 0;background:color-mix(in oklab,var(--muted) 40%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;gap:38px;width:max-content;
  animation:marquee 46s linear infinite;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--muted-foreground);
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.marquee-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:color-mix(in oklab,var(--c-green) 70%,transparent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 文章目录 */
.toc{
  border:1px solid var(--border);border-radius:18px;background:var(--card);
  padding:2px 18px;margin:0 0 28px;
  box-shadow:0 1px 2px oklch(0 0 0 / 4%);
}
.toc summary{padding:12px 0;font-size:13px;font-weight:500;color:var(--muted-foreground);cursor:pointer}
.toc summary::after{top:10px}
.toc ol{margin:0 0 14px;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.toc li::marker{color:var(--muted-foreground);font-size:12px}
.toc a{font-size:13px;color:var(--muted-foreground);text-decoration:none;transition:color .15s ease}
.toc a:hover{color:var(--foreground)}

/* 复制提示 */
.toast{
  position:fixed;left:50%;bottom:30px;z-index:90;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:color-mix(in oklab,var(--card) 92%,transparent);
  border:1px solid var(--border);color:var(--foreground);font-size:13px;
  box-shadow:0 16px 40px -22px oklch(0 0 0 / 60%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .3s var(--ease-out);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-green);box-shadow:0 0 8px var(--c-green)}
@media (max-width:640px){.toast{bottom:74px;font-size:12.5px}}

/* FAQ 间距 */
.faq .acc{gap:8px}

/* 图片悬停微抬升 */
.shot-frame{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.shot:hover .shot-frame{transform:translateY(-3px);box-shadow:0 24px 60px -34px oklch(0 0 0 / 45%)}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
  .shot:hover .shot-frame{transform:none}
}


/* 引导按钮加一点层次 */
.guide-btn{
  background:linear-gradient(180deg,color-mix(in oklab,var(--card) 92%,transparent),color-mix(in oklab,var(--muted) 86%,transparent));
}
.guide-btn svg{
  width:22px;height:22px;padding:4px;border-radius:50%;
  background:color-mix(in oklab,var(--foreground) 8%,transparent);
}
.guide-btn:hover svg{background:color-mix(in oklab,var(--foreground) 14%,transparent)}



/* ============================================================
   流体玻璃：半透明表面 + 流动色团 + 跟随光标的高光
   ============================================================ */
:root{
  --glass-bg:color-mix(in oklab,var(--card) 42%,transparent);
  --glass-line:color-mix(in oklab,var(--foreground) 11%,transparent);
  --glass-hi:oklch(1 0 0 / 55%);
  --glass-glow:color-mix(in oklab,var(--c-blue) 12%,transparent);
  --glass-sheen:oklch(1 0 0 / 62%);
}
@media (prefers-color-scheme:dark){
  :root{
    --glass-bg:color-mix(in oklab,var(--card) 34%,transparent);
    --glass-line:color-mix(in oklab,var(--foreground) 15%,transparent);
    --glass-hi:oklch(1 0 0 / 12%);
    --glass-glow:oklch(1 0 0 / 11%);
    --glass-sheen:oklch(1 0 0 / 8%);
  }
}
:root.dark{
  --glass-bg:color-mix(in oklab,var(--card) 34%,transparent);
  --glass-line:color-mix(in oklab,var(--foreground) 15%,transparent);
  --glass-hi:oklch(1 0 0 / 12%);
  --glass-glow:oklch(1 0 0 / 11%);
  --glass-sheen:oklch(1 0 0 / 8%);
}

.card,.post-card,.post-list,.steps,.table-wrap,.price-box,.product,.feature-banner,.post-nav a,.toc,.acc details,.stat{
  background-color:var(--glass-bg);
  border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
  backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 34px -26px oklch(0 0 0 / 50%);
}
.code-block{
  background-color:color-mix(in oklab,var(--muted) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
.topbar{
  background:color-mix(in oklab,var(--background) 52%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
}
.drawer{
  background:color-mix(in oklab,var(--background) 72%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);
  backdrop-filter:blur(26px) saturate(1.35);
}

/* 跟随光标的高光 */
.card,.post-card,.feature-banner,.product,.price-box{
  background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--glass-glow-hover,transparent),transparent 62%);
}
.card:hover,.post-card:hover,.feature-banner:hover,.product:hover,.price-box:hover{--glass-glow-hover:var(--glass-glow)}

/* 流动色团 */
.liquid{position:fixed;inset:-18%;z-index:-1;pointer-events:none;filter:blur(54px);opacity:.42}
.no-bgfx .liquid i{animation:none}
.no-bgfx .bg-fx{opacity:0}
.liquid i{position:absolute;display:block;border-radius:50%;will-change:transform}
.liquid i:nth-child(1){
  width:60vw;height:60vw;left:-8%;top:-10%;
  background:radial-gradient(circle at 42% 42%,color-mix(in oklab,var(--c-blue) 82%,transparent),transparent 70%);
  animation:blobA 30s ease-in-out infinite;
}
.liquid i:nth-child(2){
  width:54vw;height:54vw;right:-6%;top:6%;
  background:radial-gradient(circle at 55% 45%,color-mix(in oklab,var(--c-purple) 76%,transparent),transparent 70%);
  animation:blobB 36s ease-in-out infinite;
}
.liquid i:nth-child(3){
  width:56vw;height:56vw;left:22%;bottom:-16%;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--c-green) 62%,transparent),transparent 72%);
  animation:blobC 42s ease-in-out infinite;
}
@media (prefers-color-scheme:dark){.liquid{opacity:.8}}
:root.dark .liquid{opacity:.8}
@keyframes blobA{
  0%,100%{transform:translate3d(0,0,0) scale(1);border-radius:52% 48% 62% 38%/46% 54% 46% 54%}
  33%{transform:translate3d(7%,-5%,0) scale(1.1);border-radius:62% 38% 44% 56%/56% 44% 62% 38%}
  66%{transform:translate3d(-4%,6%,0) scale(.95);border-radius:44% 56% 56% 44%/62% 38% 50% 50%}
}
@keyframes blobB{
  0%,100%{transform:translate3d(0,0,0) scale(1);border-radius:58% 42% 46% 54%/48% 52% 56% 44%}
  40%{transform:translate3d(-8%,7%,0) scale(.92);border-radius:44% 56% 60% 40%/56% 44% 44% 56%}
  70%{transform:translate3d(4%,-6%,0) scale(1.08);border-radius:50% 50% 42% 58%/60% 40% 54% 46%}
}
@keyframes blobC{
  0%,100%{transform:translate3d(0,0,0) scale(1);border-radius:48% 52% 54% 46%/52% 48% 58% 42%}
  50%{transform:translate3d(6%,-8%,0) scale(1.12);border-radius:58% 42% 46% 54%/44% 56% 46% 54%}
}

/* 正文链接的流动下划线 */
.prose a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease-out),color .2s ease;
}
.prose a:hover{background-size:100% 1px}

@media (max-width:640px){
  .card,.post-card,.post-list,.steps,.table-wrap,.price-box,.product,.feature-banner,.post-nav a,.toc,.acc details,.stat{
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
    backdrop-filter:blur(10px) saturate(1.2);
  }
  .liquid{filter:blur(52px);opacity:.28}
}
@media (prefers-reduced-motion:reduce){
  .liquid i{animation:none}
  .prose a{transition:none}
}



/* ============================================================
   果冻感：点击涟漪 / 按压回弹 / 滚动挤压
   ============================================================ */
.ripple-host{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,var(--ripple-c,color-mix(in oklab,var(--foreground) 13%,transparent)) 0%,transparent 62%);
  animation:rippleOut .72s cubic-bezier(.22,.61,.36,1) forwards;
}
.btn .ripple,.guide-btn .ripple,.login-btn .ripple,.copy .ripple{--ripple-c:oklch(1 0 0 / 32%)}
@keyframes rippleOut{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.55}
  65%{opacity:.2}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes jellyPress{
  0%{transform:scale(1,1)}
  22%{transform:scale(.972,1.022)}
  48%{transform:scale(1.014,.986)}
  72%{transform:scale(.994,1.006)}
  100%{transform:scale(1,1)}
}
.jelly{animation:jellyPress .52s cubic-bezier(.34,1.56,.64,1)}
.liquid{transform:scaleY(calc(1 + var(--squish,0) * .06)) scaleX(calc(1 - var(--squish,0) * .04));transform-origin:50% 50%}

@media (prefers-reduced-motion:reduce){
  .ripple{animation-duration:.01s}
  .jelly{animation:none}
  .liquid{transform:none}
}



/* ============================================================
   板块级流体玻璃：每个 section 变成一块玻璃板
   ============================================================ */
section.wrap{
  position:relative;
  background-color:var(--glass-bg);
  background-image:linear-gradient(152deg,var(--glass-sheen) 0%,transparent 40%,transparent 68%,color-mix(in oklab,var(--c-blue) 7%,transparent) 100%);
  border:1px solid var(--glass-line);
  border-radius:28px;
  padding:30px 28px;
  margin:16px auto;
  -webkit-backdrop-filter:blur(14px) saturate(1.55);
  backdrop-filter:blur(14px) saturate(1.55);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 26px 64px -48px oklch(0 0 0 / 55%);
}
@media (max-width:640px){
  section.wrap{padding:22px 16px;border-radius:22px;margin:12px auto}
}

/* 板块内部不再叠加第二层模糊，避免糊成一团 */
section.wrap .card,
section.wrap .post-card,
section.wrap .post-list,
section.wrap .steps,
section.wrap .table-wrap,
section.wrap .price-box,
section.wrap .product,
section.wrap .feature-banner,
section.wrap .post-nav a,
section.wrap .toc,
section.wrap .acc details,
section.wrap .stat,
section.wrap .code-block{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background-color:color-mix(in oklab,var(--card) 28%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 26px -24px oklch(0 0 0 / 42%);
}
section.wrap .code-block{background-color:color-mix(in oklab,var(--muted) 72%,transparent)}
section.wrap .acc details{background-color:color-mix(in oklab,var(--card) 26%,transparent)}

/* 涟漪更明显一点 */
.ripple{
  --ripple-c:color-mix(in oklab,var(--foreground) 18%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent);
}
.btn .ripple,.guide-btn .ripple,.login-btn .ripple,.copy .ripple{
  --ripple-c:oklch(1 0 0 / 40%);
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 28%);
}




/* ============================================================
   个人设置：果冻手感 / 背景色 / 背景动画
   ============================================================ */
.set-btn{
  height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;
  border-radius:11px;
  background:color-mix(in oklab,var(--foreground) 6%,transparent);
  border:1px solid var(--border);color:var(--muted-foreground);cursor:pointer;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
  transition:background .2s ease,color .2s ease,transform .2s var(--ease-spring);
}
@media (max-width:820px){
  .set-btn{width:34px;padding:0}
  .set-btn-t{display:none}
}
.set-btn:hover{background:color-mix(in oklab,var(--foreground) 11%,transparent);color:var(--foreground);transform:translateY(-1px)}
.set-btn svg{width:17px;height:17px;display:block}

.set-mask{position:fixed;inset:0;z-index:72;background:oklch(0 0 0 / 42%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.set-mask.on{opacity:1;pointer-events:auto}
.set-panel{
  position:fixed;z-index:73;left:50%;top:50%;width:min(430px,calc(100vw - 28px));
  transform:translate(-50%,-47%) scale(.96);opacity:0;pointer-events:none;
  background:color-mix(in oklab,var(--card) 84%,transparent);
  border:1px solid var(--glass-line);border-radius:22px;padding:18px 18px 14px;
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:0 34px 80px -46px oklch(0 0 0 / 75%),inset 0 1px 0 var(--glass-hi);
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1.08);
}
.set-panel.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.set-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.set-head b{font-size:15px;letter-spacing:.01em}
.set-close{
  width:28px;height:28px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--muted-foreground);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .18s ease,color .18s ease;
}
.set-close:hover{background:color-mix(in oklab,var(--foreground) 9%,transparent);color:var(--foreground)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid color-mix(in oklab,var(--foreground) 8%,transparent)}
.set-row:first-of-type{border-top:0}
.set-row > span{font-size:13.5px;color:var(--muted-foreground);white-space:nowrap}
.set-seg{display:flex;gap:3px;padding:3px;border-radius:11px;background:color-mix(in oklab,var(--foreground) 6%,transparent);border:1px solid color-mix(in oklab,var(--foreground) 8%,transparent)}
.set-seg button{
  padding:5px 7px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground);
  font-size:12px;white-space:nowrap;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.set-seg button:hover{color:var(--foreground)}
.set-seg button.on{
  background:linear-gradient(135deg,color-mix(in oklab,var(--c-blue) 92%,transparent),color-mix(in oklab,var(--c-purple) 88%,transparent));
  color:oklch(0.99 0 0);box-shadow:0 6px 16px -10px color-mix(in oklab,var(--c-purple) 80%,transparent);
}
.set-sw{
  position:relative;width:46px;height:26px;border-radius:999px;border:1px solid var(--border);
  background:color-mix(in oklab,var(--foreground) 8%,transparent);cursor:pointer;padding:0;
  transition:background .22s ease,border-color .22s ease;
}
.set-sw::after{
  content:"";position:absolute;left:3px;top:50%;width:20px;height:20px;border-radius:50%;
  transform:translateY(-50%);background:var(--card);
  box-shadow:0 2px 6px -2px oklch(0 0 0 / 45%);transition:left .24s cubic-bezier(.3,1.4,.5,1),background .22s ease;
}
.set-sw[aria-checked="true"]{background:linear-gradient(135deg,color-mix(in oklab,var(--c-blue) 90%,transparent),color-mix(in oklab,var(--c-purple) 86%,transparent));border-color:transparent}
.set-sw[aria-checked="true"]::after{left:23px;background:oklch(1 0 0)}
.set-swatches{display:flex;align-items:center;gap:8px}
.set-swatches button{
  width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;border:1px solid oklch(0 0 0 / 16%);
  background:var(--sw);opacity:.55;transition:opacity .18s ease,transform .2s var(--ease-spring),box-shadow .2s ease;
}
.set-swatches button:hover{opacity:.9;transform:scale(1.12)}
.set-swatches button.on{opacity:1;transform:scale(1.08);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in oklab,var(--sw) 75%,transparent)}
.set-swatches button.custom{background:conic-gradient(from 210deg,#f87171,#fbbf24,#34d399,#22d3ee,#60a5fa,#a78bfa,#f87171);position:relative;overflow:hidden}
.set-foot{margin:4px 0 0;font-size:11.5px;color:var(--muted-foreground);opacity:.75;text-align:center}
@media (max-width:560px){
  .set-row.stack{flex-wrap:wrap;gap:9px}
  .set-row.stack .set-seg{width:100%}
  .set-row.stack .set-seg button{flex:1;padding:6px 2px}
}
@media (max-width:520px){
  .set-panel{padding:16px 15px 12px;border-radius:20px}
  .set-row{padding:12px 0}
}