/* ===== codevtool.com 共享样式 · 自包含 · 无外部依赖 ===== */
:root{
  --bg:#0a0e1a;
  --bg-2:#0d1322;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);
  --text:#e6e9ef;
  --muted:#9aa4b2;
  --primary:#3b82f6;
  --purple:#8b5cf6;
  --cyan:#22d3ee;
  --grad:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#22d3ee 100%);
  --radius:16px;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 500px at 80% -10%,rgba(139,92,246,.16),transparent 60%),
    radial-gradient(800px 500px at 0% 0%,rgba(59,130,246,.14),transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* 注意：这里只能用 padding-left/right 长写。
   写成 padding:0 20px 会连带把上下 padding 归零，
   并因 .container 是类选择器（权重高于 section 标签）而覆盖掉区块的垂直留白。 */
.container{max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ===== 导航 ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,14,26,.72);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 20px rgba(59,130,246,.35)}
.brand .name{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
/* 社交图标统一成 34×34 的方形盒居中：
   原来 <a> 是行内元素，svg 走基线对齐会带出 descender 空隙，
   而「知/简」是两个汉字、行盒高度又不同 → 五个图标高低不齐。 */
.nav-social{display:flex;gap:4px;align-items:center}
.nav-social a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;color:var(--muted);transition:color .2s,background .2s}
.nav-social a:hover{color:var(--text);background:var(--panel-2)}
.nav-social svg{display:block;width:19px;height:19px}
.nav-social .txt{font-size:16px;font-weight:700;line-height:1}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:rgba(10,14,26,.97);padding:18px 20px;gap:16px;border-bottom:1px solid var(--border)}
  .nav-toggle{display:block}
  /* 320px 下 brand + 5 个图标 + 菜单按钮会挤爆，只留 3 个图形图标 */
  .nav-social a.txt{display:none}
}

/* ===== 通用区块 =====
   只声明上下留白；左右内边距由 .container 负责，两者互不覆盖。 */
section{padding-top:48px;padding-bottom:48px}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.08em;color:var(--cyan);font-weight:600;margin-bottom:10px}
.h2{font-size:clamp(25px,4vw,38px);font-weight:800;line-height:1.3;letter-spacing:-.01em;margin-bottom:12px;text-wrap:balance}
/* 默认左对齐、不居中：只有放进 .center 容器（首页各区块标题）才自动居中 */
.lead{color:var(--muted);max-width:640px;font-size:16px;line-height:1.8;margin:0;text-wrap:balance}
/* 中文短链接（如「项目页」「联系方式」）不允许在词中间折行 */
.lead a{white-space:nowrap;color:var(--primary)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ===== Hero =====
   同样只用上下长写，左右 20px 交给 .container（否则文字会顶到屏幕边缘、与导航错位）。 */
.hero{padding-top:132px;padding-bottom:56px}
.hero h1{font-size:clamp(28px,4.6vw,50px);font-weight:800;line-height:1.24;letter-spacing:-.01em;margin:16px 0 0}
.hero h1 .h1-line,.hero h1 .h1-tag{display:block}
/* 副标题行略小于名字行，形成层级；字重降一档避免两句话抢主视觉。
   固定两行（在逗号处断），不依赖容器宽度自动折行。 */
.hero h1 .h1-tag{font-size:.9em;font-weight:700;color:var(--text);margin-top:8px;letter-spacing:0}
.hero .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(15.5px,2.2vw,19px);color:var(--muted);max-width:680px;margin:22px 0 30px;line-height:1.85}
/* 中英混排的词组整体换行：「B站 / 抖音」不要被拆成两行 */
.hero p.sub b{white-space:nowrap}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.badge{font-size:13px;padding:6px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--border);color:var(--muted)}
.badge b{color:var(--text);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(59,130,246,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(59,130,246,.5)}
.btn-ghost{background:var(--panel);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--primary)}

/* 宽屏双栏：左侧文案，右侧「正在折腾」信息卡；
   窄屏（≤980）收成单栏并隐藏信息卡，保证首屏不空转。 */
.hero-inner{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:56px;align-items:center}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-side{display:none}
}
.hero-side{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:18px;padding:20px 24px;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.hero-side .sh{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;padding-bottom:12px}
.hero-side .sh .d{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.16);flex-shrink:0}
.hero-side ul{list-style:none}
.hero-side li{padding:13px 0;border-top:1px solid var(--border)}
.hero-side b{display:block;font-size:15px;font-weight:700;line-height:1.5}
.hero-side span{display:block;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:2px}

/* 页面抬头 section（标题 + 导语）：底部不留白，让接下来的正文块接住；
   否则「h2 →正文」之间会同时吃到抬头 section 的 84px 底距 + 正文 section 的 84px 顶距，空出近 200px。 */
.page-head{padding-top:112px;padding-bottom:0}
.page-head + section{padding-top:32px}

/* ===== 平台卡片 ===== */
/* 6 张卡固定 3/2/1 列：auto-fit 会排成 4+2，第二行两张被拉宽，左右不对称 */
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
@media(max-width:860px){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.platforms{grid-template-columns:1fr}}
.platform{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--border);transition:transform .2s,border-color .2s}
.platform:hover{transform:translateY(-4px);border-color:var(--primary)}
.platform .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);flex-shrink:0}
.platform .ic svg{width:22px;height:22px}
.platform .t{font-weight:700}
.platform .d{font-size:13px;color:var(--muted)}

/* ===== 卡片网格 ===== */
.grid{display:grid;gap:18px;margin-top:30px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);border-color:var(--primary)}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card p{color:var(--muted);font-size:14.5px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{font-size:12px;padding:4px 11px;border-radius:999px;background:rgba(59,130,246,.12);color:#9ec1ff;border:1px solid rgba(59,130,246,.2)}
.tag.p{background:rgba(139,92,246,.12);color:#c4b5fd;border-color:rgba(139,92,246,.25)}
.tag.c{background:rgba(34,211,238,.12);color:#7fe7f5;border-color:rgba(34,211,238,.25)}
.tag.g{background:rgba(16,185,129,.12);color:#6ee7b7;border-color:rgba(16,185,129,.25)}
.ext{color:var(--muted);transition:color .2s}
.card a.ext:hover .ext{color:var(--primary)}

/* ===== 关于页 =====
   正文栏必须与上方的 h2 左对齐（原来 margin:0 auto 会整体右移 125px） */
.prose{max-width:780px;margin:0}
.prose p{color:var(--muted);font-size:16.5px;margin:16px 0}
.prose h3{font-size:21px;font-weight:700;margin:34px 0 8px}
.prose strong{color:var(--text)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:30px 0}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.stat .n{font-size:30px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px}

/* ===== 联系页 ===== */
.contact-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;margin-top:30px;align-items:start}
@media(max-width:760px){.contact-wrap{grid-template-columns:1fr}}
.qr{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center}
.qr img{width:200px;height:200px;object-fit:cover;border-radius:12px;margin:0 auto 12px;background:#fff}
.qr .cap{font-size:13px;color:var(--muted)}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.contact-item .ic{width:38px;height:38px;border-radius:10px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.contact-item .ic svg{width:20px;height:20px}
.contact-item .k{font-size:13px;color:var(--muted)}
.contact-item .v{font-weight:600;word-break:break-all}

/* ===== 底部「一起折腾」：文案 + 三个二维码 ===== */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:44px 48px}
.join .eyebrow{margin-bottom:8px}
.join .h2{margin-bottom:10px}
.join .lead{margin-bottom:24px}
.join-qr{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qr-item{text-align:center}
/* 二维码必须白底 + 静区：segno 生成时已烘焙 4 模块留白，这里只补圆角 */
.qr-item img{display:block;width:100%;height:auto;border-radius:10px;background:#fff}
.qr-item figcaption{margin-top:9px;font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
@media(max-width:860px){
  .join{grid-template-columns:1fr;gap:26px;padding:34px 22px;text-align:center}
  .join .lead{margin-left:auto;margin-right:auto}
  .join .cta-row{justify-content:center}
  .join-qr{max-width:400px;margin:0 auto;gap:10px}
}

/* ===== 页脚 ===== */
.footer{border-top:1px solid var(--border);padding:40px 0;margin-top:40px;background:rgba(0,0,0,.2)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.footer .fb{display:flex;align-items:center;gap:10px;font-weight:700}
.footer .fb .logo{width:30px;height:30px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.footer .meta{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.8}
.footer .meta a{color:var(--muted)}
.footer .meta a:hover{color:var(--text)}

/* ===== 统计看板 ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:20px 0}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}
.kpi .n{font-size:30px;font-weight:800;color:var(--text)}
.kpi .l{font-size:13px;color:var(--muted);margin-top:2px}
.kpi .n.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;margin:18px 0}
.panel-box h3{font-size:17px;font-weight:700;margin-bottom:14px}
.bar-row{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:14px}
.bar-row .lab{width:150px;flex-shrink:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{flex:1;height:10px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--grad);border-radius:6px}
.bar-row .val{width:54px;text-align:right;color:var(--text);flex-shrink:0}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th,table.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
table.tbl th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
table.tbl td{color:var(--text)}
table.tbl tr:hover td{background:var(--panel-2)}
.login-box{max-width:360px;margin:120px auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:30px;text-align:center}
.login-box input{width:100%;padding:12px 14px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);color:var(--text);font-size:15px;margin:14px 0}
.login-box button{width:100%;padding:12px;border:none;border-radius:10px;background:var(--grad);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.login-err{color:#f87171;font-size:13px;min-height:18px;margin-top:6px}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ===== 文章 / 博客 ===== */
.article-wrap{max-width:780px;margin:0 auto;padding:130px 20px 40px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{color:var(--muted);opacity:.5}
.article-head h1{font-size:clamp(28px,4.6vw,42px);font-weight:800;line-height:1.2;letter-spacing:-.02em;margin:8px 0 16px}
.article-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:30px}
.article-meta .dot{opacity:.4}
.article-body{font-size:16.5px;line-height:1.85;color:#c9d2e0}
.article-body h2{font-size:25px;font-weight:800;color:var(--text);margin:42px 0 14px;letter-spacing:-.01em;scroll-margin-top:90px}
.article-body h3{font-size:19.5px;font-weight:700;color:var(--text);margin:30px 0 10px;scroll-margin-top:90px}
.article-body p{margin:15px 0}
.article-body strong{color:var(--text);font-weight:700}
.article-body a{color:#7fb0ff;border-bottom:1px solid rgba(127,176,255,.3)}
.article-body a:hover{border-bottom-color:#7fb0ff}
.article-body ul,.article-body ol{margin:15px 0 15px 6px;padding-left:22px}
.article-body li{margin:8px 0}
.article-body ul li::marker{color:var(--primary)}
.article-body ol li::marker{color:var(--primary);font-weight:700}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px;color:#7fe7f5}
.article-body pre{background:#070b14;border:1px solid var(--border);border-radius:12px;padding:18px 20px;overflow-x:auto;margin:20px 0;line-height:1.6}
.article-body pre code{background:none;padding:0;color:#c9d2e0;font-size:13.5px}
.article-body blockquote{border-left:3px solid var(--primary);background:var(--panel);padding:12px 20px;border-radius:0 10px 10px 0;margin:22px 0;color:var(--muted)}
.article-body blockquote p{margin:6px 0}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.article-body th,.article-body td{border:1px solid var(--border);padding:9px 13px;text-align:left}
.article-body th{background:var(--panel-2);color:var(--text);font-weight:700}
.article-body img{border-radius:12px;border:1px solid var(--border);margin:22px 0}
.article-body hr{border:none;border-top:1px solid var(--border);margin:34px 0}
.toc{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin:0 0 30px}
.toc .t{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;font-size:14.5px}
.toc li{margin:6px 0}
.toc a{color:var(--muted);border:none}
.toc a:hover{color:var(--primary)}
.article-foot{margin-top:46px;padding-top:26px;border-top:1px solid var(--border)}
.share-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.share-row .lbl{font-size:13px;color:var(--muted);margin-right:4px}
.share-btn{font-size:13px;padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--border);color:var(--muted);transition:.2s}
.share-btn:hover{border-color:var(--primary);color:var(--text)}
.article-cta{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px;margin-top:30px;text-align:center}
.article-cta h3{font-size:19px;font-weight:800;margin-bottom:8px}
.article-cta p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.post-list{display:grid;gap:18px;margin-top:30px}
.post-item{display:block;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,border-color .2s}
.post-item:hover{transform:translateY(-4px);border-color:var(--primary)}
.post-item .pm{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
.post-item h3{font-size:21px;font-weight:800;margin-bottom:8px;color:var(--text)}
.post-item p{color:var(--muted);font-size:14.5px}
.post-item .more{color:var(--primary);font-size:14px;font-weight:600;margin-top:12px;display:inline-block}

/* ===== 极窄屏兜底（≤380px，如 320/360 的老机型）=====
   问题：brand + 5 个社交图标在 320px 下总宽 300px，超出可用 280px，
   导致汉堡按钮贴边溢出。解决：收 padding / 缩 brand / 缩图标间距。 */
@media(max-width:600px){
  .hero h1{line-height:1.3}
  /* 4 个标签在 390~560px 会排成 3+1 落单，固定两列两行 */
  .hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .badge{font-size:12.5px;padding:6px 10px;text-align:center}
  .hero{padding-top:112px;padding-bottom:32px}
  section{padding-top:40px;padding-bottom:40px}
}
@media(max-width:380px){
  .nav-inner{padding:12px 14px}
  .brand{font-size:16px;gap:8px}
  .brand .logo{width:30px;height:30px;border-radius:9px;font-size:13px}
  .nav-social{gap:0}
  .hero{padding-top:108px;padding-bottom:28px}
  section{padding-top:36px;padding-bottom:36px}
  .btn{padding:12px 18px;font-size:14.5px}
}

/* grid 的 minmax 下限做 clamp，避免容器比 min 还窄时轨道被撑破
   注意：.platforms 用固定列数（见上方 3/2/1 断点），不能在这里再用 auto-fit 覆盖 */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.stat-row{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}