/* ============================================================================
   Collaplex 站点公共主题 —— 子页统一皮肤
   ----------------------------------------------------------------------------
   ★ 与官网首页 index.html 完全同一套设计语言: 纯 #0f0f0f / JetBrains Mono /
     单强调色 #4ade80 / 无背景网格 / 卡片圆角 12 / 绿色小标签。
   ★ 站点根绝对路径引用 (/theme.css): 根页、/tools/、/cs-tutorial/、/blog/ 共用
     同一份, 子目录页不会解析成 /tools/theme.css 而 404。
   ★ 首页 index.html 是"折页"(五屏 sticky), 样式自持, 不在本文件管辖内 ——
     但它与这里用的是同一组变量与同一套动效参数, 改这边不会动到首页。
   ★ 改这一个文件 = 全站子页一起变。动效引擎在 /theme.js, 两者配套。
   ========================================================================= */

/* ── 字体(与首页同源自托管 woff2; 等宽字体无 CJK 字形, 字体栈尾部必须留 CJK 回退) ── */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/jetbrains-mono-medium.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/jetbrains-mono-semibold.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700 800;font-display:swap;
  src:url('/fonts/jetbrains-mono-bold.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --bg:#0f0f0f; --card:#161616; --card-hi:#1c1c1c; --bd:#262626; --bd-hi:#343434;
  --fg:#e8e8e8; --mut:#8a8a8a; --dim:#666;
  --ok:#4ade80; --ok-soft:#0d2818; --ok-bd:#166534;
  --r:12px;
  --sans:"JetBrains Mono",-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.7 var(--sans);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
.glow{position:fixed;top:-300px;left:50%;transform:translateX(-50%);
  width:900px;height:540px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(74,222,128,.08),transparent 68%)}

/* ── 导航(与首页同一尺寸与材质; 子页多一个「上级栏目」入口) ── */
nav{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;
  background:rgba(15,15,15,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg)}
.brand img{display:block;height:26px;width:auto}
.brand span{font-size:11px;color:var(--dim);letter-spacing:1px}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{color:var(--mut);text-decoration:none;font-size:13px;transition:color .18s}
.nav-links a:hover,.nav-links a.on{color:var(--ok)}

/* ── 页面容器 ── */
.wrap{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;
  padding:104px 26px 72px}

/* ── 页头 ── */
.phead{margin-bottom:36px}
.eyebrow{font:11px/1 var(--mono);color:var(--dim);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:16px}
.phead h1{font-size:clamp(24px,3.6vw,36px);font-weight:700;letter-spacing:-.8px;line-height:1.22}
.phead .sub{margin-top:13px;color:var(--mut);font-size:14px;max-width:680px}
.phead .sub + .sub{margin-top:7px}

/* ── 打字机(与首页同一机制: ghost 层占位/可复制, 打字层纯视觉) ── */
.h1w{position:relative;display:block}
html.js .h1w .h1-ghost{color:transparent}
.h1-type{display:none}
html.js .h1-type{display:block;position:absolute;left:0;top:0;right:0;white-space:pre-wrap;
  -webkit-user-select:none;user-select:none}
.caret{display:inline-block;width:3px;height:.86em;margin-left:4px;vertical-align:-.06em;
  background:var(--ok);animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── 数字翻滚(与首页同一套里程表; JS 现场把 <span data-num="25">25</span> 展开) ── */
.num{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
html.js .num .num-static{color:transparent}   /* 占位: 撑宽度 + 可复制/可抓取的真数字 */
.od-wrap{display:none}
html.js .num .od-wrap{display:block;position:absolute;left:0;top:0}
.od{display:inline-block;height:1.2em;overflow:hidden;vertical-align:-.14em}
.od-dg{display:inline-block;height:1.2em;overflow:hidden}
.od-in{display:block;transform:translateY(0)}
.od-d{display:block;height:1.2em;line-height:1.2}
.od-d::before{content:attr(data-v)}

/* ── 数据条(照抄首页 .strip 的观感) ── */
.stats{display:flex;flex-wrap:wrap;gap:32px;margin:0 0 40px;padding:20px 0 0;
  border-top:1px solid #1c1c1c}
.stats .stat b,.stats .stat .num{font:600 21px/1.2 var(--mono)}
.stats .stat i{font-style:normal;display:block;font:11px/1.6 var(--mono);color:var(--dim);
  letter-spacing:.5px}

/* ── 12 栅格(与首页同一套跨列类名, 错位跨列用) ── */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c12{grid-column:span 12}
/* 工具卡片用自适应栅格(24 张同类卡, 不强行跨列) */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:14px}

/* ── 卡片 ── */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;transition:.2s;min-width:0}
/* ★栅格/弹性盒里的自动最小尺寸会被"不换行的子内容"(比如 pre 里的长命令行)顶开 ——
   手机上就表现为整页横向溢出。给每一层都留 min-width:0, 让 pre 自己内部横向滚。 */
.grid > *,.tgrid > *{min-width:0}
.card > *{min-width:0}
a.card{text-decoration:none;color:var(--fg)}
a.card:hover,.card:hover{background:var(--card-hi);border-color:var(--bd-hi)}
.card h3{font-size:15.5px;font-weight:650;letter-spacing:.2px;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.4}
.card h3 s{text-decoration:none;font:10px/1 var(--mono);color:var(--ok);
  border:1px solid var(--ok-bd);background:var(--ok-soft);padding:3px 7px;
  border-radius:5px;letter-spacing:.5px}
.card p{font-size:13.5px;color:var(--mut);line-height:1.75}
.card .spec{margin-top:auto;padding-top:14px;border-top:1px solid #1f1f1f;
  display:flex;flex-wrap:wrap;gap:8px 20px;font:12px/1.7 var(--mono);color:var(--dim)}
.card .spec b{color:#9a9a9a;font-weight:500}
.card.lit{border-color:var(--ok-bd);background:#12211a}

/* 入口磁贴(照抄首页 .e: 左代号 + 标题描述 + 右箭头) */
.e{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg);
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:15px 18px;transition:.2s}
.e:hover{background:var(--card-hi);border-color:var(--bd-hi)}
.e .code{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font:600 11px/1 var(--mono);letter-spacing:.5px;
  color:#9a9a9a;background:#1c1c1c;border:1px solid var(--bd)}
.e .bd{flex:1;min-width:0}
.e .t{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.e .d{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.e .arw{color:#555;font-size:14px;flex-shrink:0;transition:.2s}
.e:hover .arw{color:var(--ok);transform:translateX(3px)}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;
  font-size:13px;text-decoration:none;border:1px solid var(--bd);color:var(--fg);
  background:#181818;transition:background .18s,border-color .18s;white-space:nowrap}
.btn:hover{background:#212121;border-color:var(--bd-hi)}
.btn.primary{background:var(--ok-soft);border-color:var(--ok-bd);color:#bbf7d0}
.btn.primary:hover{background:#124020}
.btn.sm{padding:6px 12px;font-size:12px}
.lnk{color:var(--mut);text-decoration:none;font-size:12px;transition:color .18s}
.lnk:hover{color:var(--ok)}
.cta{display:flex;gap:12px;margin:0 0 30px;flex-wrap:wrap;align-items:center}

/* ── 卡片内的版本行 / 操作行(工具清单用) ── */
.card .ver{font:12px/1.6 var(--mono);color:var(--dim);margin:-3px 0 9px}
.card .desc{font-size:13.5px;color:var(--mut);line-height:1.72;flex:1}
.card .acts{margin-top:auto;padding-top:14px;border-top:1px solid #1f1f1f;
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card .btns{display:flex;gap:6px;flex-wrap:wrap}
.stats .unit{font-size:.62em;font-weight:500;color:var(--dim)}

/* ── 清单条目(专栏文章列表 / 仓库列表 / 包清单) ── */
.post .date{font:11px/1 var(--mono);color:var(--dim);letter-spacing:1px;margin-bottom:10px}
.post h2{font-size:16px;font-weight:650;line-height:1.5;margin-bottom:9px;letter-spacing:.2px}
.post h2 a{color:var(--fg);text-decoration:none;transition:color .18s}
.post:hover h2 a{color:var(--ok)}
.post .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.pkgrow{display:flex;gap:14px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid #1f1f1f;font:13px var(--mono)}
.pkgrow:last-child{border-bottom:0}
.pkgrow .n{color:var(--fg);font-weight:600}
.pkgrow .v{color:var(--ok)}
.pkgrow .s{margin-left:auto;color:var(--dim)}
.kv{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid #1c1c1c;
  font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv .k{width:88px;flex-shrink:0;font:12px var(--mono);color:var(--dim)}
.kv .v{color:#d0d0d0}
.kv .v a{color:var(--ok);text-decoration:none}
/* 状态色: 给状态页/任何需要"正常/异常/警告"文字色的地方(2026-09-12) */
.ok{color:var(--ok)}
.bad{color:#f87171}
.warn{color:#fbbf24}

/* ── 视频卡(B 站) ── */
.video{background:#131313;border:1px solid var(--bd);border-radius:var(--r);
  overflow:hidden;max-width:860px}
.video .fr{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video .cap{padding:14px 18px}
.video .cap b{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.video .cap i{font-style:normal;font:12px/1.6 var(--mono);color:var(--dim)}

/* ── 小标签 ── */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips code,.tag{font:12px var(--mono);color:#8a8a8a;background:#1c1c1c;
  border:1px solid #2b2b2b;padding:2px 8px;border-radius:5px;text-decoration:none}

/* ── 正文排版(教程章节 / 专栏文章 / 工具详情共用) ── */
.content{font-size:14.5px;line-height:1.85;color:#c8c8c8;min-width:0}
.content > *:first-child{margin-top:0}
.content h1{font-size:22px;font-weight:700;color:var(--fg);margin:34px 0 12px;letter-spacing:-.3px}
.content h2{font-size:16.5px;font-weight:650;color:var(--fg);margin:32px 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--bd);letter-spacing:.2px;line-height:1.5}
.content h3{font-size:14.5px;font-weight:600;color:var(--fg);margin:22px 0 8px}
.content h4{font-size:13.5px;font-weight:600;color:#d0d0d0;margin:18px 0 6px}
.content p{margin:10px 0}
.content strong{color:#f0f0f0;font-weight:650}
.content em{font-style:normal;color:var(--ok)}
.content ul,.content ol{padding-left:22px;margin:10px 0}
.content li{margin:5px 0}
.content li::marker{color:#4a4a4a}
.content a{color:var(--ok);text-decoration:none;border-bottom:1px solid rgba(74,222,128,.28)}
.content a:hover{border-bottom-color:var(--ok)}
.content pre{background:#131313;border:1px solid var(--bd);border-radius:10px;
  padding:15px 17px;overflow-x:auto;max-width:100%;margin:14px 0;
  font:12.5px/1.7 var(--mono);color:#bdbdbd}
.content pre code{background:none;padding:0;color:inherit;font-size:inherit}
.content code{background:#1e1e1e;border:1px solid #2b2b2b;padding:1px 6px;border-radius:5px;
  font:12.5px var(--mono);color:#9fe6b8}
.content hr{border:none;border-top:1px solid var(--bd);margin:28px 0}
.content blockquote{border-left:2px solid var(--ok-bd);background:#131a15;
  margin:16px 0;padding:11px 16px;border-radius:0 8px 8px 0;color:#a8a8a8;font-size:14px}
.content blockquote p{margin:4px 0}
.content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:13.5px;
  display:block;overflow-x:auto}
.content th,.content td{border:1px solid var(--bd);padding:8px 12px;text-align:left;
  vertical-align:top}
.content th{background:#191919;color:#d8d8d8;font-weight:600}
.content tbody tr:nth-child(even){background:#131313}
.content img{max-width:100%;height:auto;border-radius:10px}

/* ── 章节小标题(教程/工具清单里的分篇标题) ── */
.secttl{display:flex;align-items:baseline;gap:12px;margin:38px 0 14px;
  font-size:16px;font-weight:650;letter-spacing:.2px}
.secttl s{text-decoration:none;font:11px/1 var(--mono);color:var(--dim);letter-spacing:1px}

/* ── 条目元信息行 ── */
.metarow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.metarow span{font:12px var(--mono);color:var(--mut);background:#1a1a1a;
  border:1px solid var(--bd);padding:4px 10px;border-radius:6px}

/* ── 页脚 ── */
.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:12px/1.7 var(--mono);color:var(--dim)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--ok)}

/* ============================================================================
   动效初始态 —— ★只有 JS 在场才藏(html.js 由页内 head 一行脚本加上)。
   没有 JS / 脚本挂了 → 根本没有 .js 类 → 内容一律终态可见, 绝不白屏。
   参数与首页完全一致(慢档): 介绍文字 1400ms/320 错峰, 卡片 1000ms/130 错峰,
   数字 2600ms 翻滚, 打字 78ms/字。
   ========================================================================= */
html.js [data-rv]{opacity:0}

@media (max-width:860px){
  nav{padding:0 16px}
  .brand img{height:22px}
  .nav-links{gap:15px}
  .wrap{padding:92px 18px 56px}
  .grid{grid-template-columns:1fr;gap:12px}
  .c4,.c5,.c6,.c7,.c12{grid-column:span 1}
  .stats{gap:20px}
  .foot{margin-top:40px}
}

/* ── 手机层(承接旧的 cx-mobile 意图: 就地调排版, 不另做手机版) ── */
@media (max-width:640px){
  body{font-size:15.5px;padding-bottom:env(safe-area-inset-bottom)}
  nav{padding-left:14px;padding-right:14px}
  nav a{min-height:44px;display:inline-flex;align-items:center}
  .brand span{display:none}
  .nav-links{gap:14px}
  .wrap{padding:84px 16px 48px}
  .phead{margin-bottom:26px}
  .phead h1{font-size:25px;line-height:1.35}
  .stats{gap:16px 22px}
  .stats .stat b,.stats .stat .num{font-size:18px}
  .tgrid{grid-template-columns:1fr}
  .card{padding:16px}
  .content{font-size:14.5px;line-height:1.8}
  .content pre{font-size:12.5px;padding:12px}
  .content table{white-space:nowrap}
  .e{padding:12px;gap:10px}
  .e .d{white-space:normal;line-height:1.5}
  .e .arw{display:none}
  .foot{flex-direction:column;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  html.js [data-rv]{opacity:1}
  /* 降级: 打字层与里程表整层关掉, 直接显示 ghost / 真数字 */
  html.js .h1w .h1-ghost{color:var(--fg)}
  html.js .h1-type{display:none}
  html.js .num .num-static{color:inherit}
  html.js .num .od-wrap{display:none}
}