:root {
  --kb-bg: url(../assets/hero-bg.jpg);
  --kb-bg-f: url(../assets/hero-bg.jpg);
  --t1: rgba(255,255,255,.95);
  --t2: rgba(255,255,255,.72);
  --t3: rgba(255,255,255,.50);
  --t4: rgba(255,255,255,.34);
  --ln: rgba(255,255,255,.10);
  --ln2: rgba(255,255,255,.18);
  --card: rgba(255,255,255,.055);
  --card-h: rgba(255,255,255,.095);
  --accent: #6ee7c7;
  --accent2: #ff2d55;
  --rad: 10px;
  --maxw: 1080px;
}

html, body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:var(--t1); background:#0d0f10; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

.kb-bg { position:fixed; inset:0; background-image:var(--kb-bg),var(--kb-bg-f); background-size:cover; background-position:center; z-index:-1000; }
.kb-dim { position:fixed; inset:0; z-index:-100; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.82) 60%,rgba(0,0,0,.92) 100%); }

/* 顶栏 */
.kb-head { background:rgba(0,0,0,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:sticky; top:0; height:60px; display:flex; align-items:center; padding:0 40px; z-index:100; border-bottom:1px solid var(--ln); }
.kb-head .kb-logo { height:28px; margin-right:60px; }
.kb-head nav { display:flex; gap:32px; align-items:center; }
.kb-head nav a { font-size:14px; color:var(--t2); transition:color .18s; }
.kb-head nav a:hover { color:var(--t1); }
.kb-head nav a.active { color:var(--accent); }
.kb-head .kb-nav-txt { font-size:14px; color:var(--t3); cursor:default; }
.kb-cta { margin-left:auto; height:32px; padding:0 16px; display:flex; align-items:center; background:rgba(255,255,255,.9); border-radius:8px; font-weight:500; font-size:14px; color:#121212; transition:background .18s; }
.kb-cta:hover { background:#fff; }

/* 页脚 */
.kb-foot { margin-top:80px; padding:32px 40px 40px; border-top:1px solid var(--ln); display:flex; flex-direction:column; align-items:center; gap:6px; }
.kb-foot div { text-align:center; }
.kb-foot span { font-size:11px; line-height:170%; letter-spacing:1.5px; color:var(--t4); }
.kb-foot span:not(:last-child)::after { content:"|"; margin:0 8px; }
.kb-gov { width:10px; height:10px; vertical-align:-1px; margin-right:2px; }

/* 分类教程索引(爬虫可读的静态内链入口) */
.kb-catidx { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-bottom:14px; }
.kb-catidx span { font-size:11px; letter-spacing:1.5px; color:var(--t4); }
.kb-catidx span::after { content:none !important; }
.kb-catidx a { font-size:11px; letter-spacing:1px; color:var(--t3); }
.kb-catidx a:hover { color:var(--accent); }

/* 头部 */
.kb-hero { max-width:var(--maxw); margin:0 auto; padding:72px 40px 40px; text-align:center; }
.kb-hero h1 { font-size:38px; font-weight:600; letter-spacing:2px; margin:0 0 14px; }
.kb-hero p { font-size:15px; line-height:1.8; color:var(--t3); margin:0 auto; max-width:640px; }

/* 搜索 */
.kb-search { max-width:560px; margin:32px auto 0; position:relative; }
.kb-search input { width:100%; height:46px; padding:0 44px 0 44px; border-radius:23px; border:1px solid var(--ln2); background:rgba(255,255,255,.06); color:var(--t1); font-size:14px; outline:none; transition:border-color .18s,background .18s; }
.kb-search input::placeholder { color:var(--t4); }
.kb-search input:focus { border-color:var(--accent); background:rgba(255,255,255,.09); }
.kb-search-icon { position:absolute; left:17px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--t4); pointer-events:none; }
.kb-clear { position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--t4); cursor:pointer; font-size:18px; line-height:1; display:none; background:none; border:none; padding:4px; }
.kb-clear:hover { color:var(--t1); }

/* 筛选 */
.kb-filters { max-width:var(--maxw); margin:28px auto 0; padding:0 40px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.kb-filters button { height:32px; padding:0 15px; border-radius:16px; border:1px solid var(--ln2); background:transparent; color:var(--t2); font-size:13px; cursor:pointer; transition:all .18s; font-family:inherit; }
.kb-filters button:hover { border-color:rgba(255,255,255,.35); color:var(--t1); }
.kb-filters button.active { background:var(--accent); border-color:var(--accent); color:#08110e; font-weight:500; }
.kb-fcnt { opacity:.6; margin-left:2px; }

/* 列表 */
.kb-body { max-width:var(--maxw); margin:0 auto; padding:44px 40px 0; }
.kb-group { margin-bottom:46px; }
.kb-group-head { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--ln); }
.kb-group-head h2 { font-size:19px; font-weight:600; margin:0; letter-spacing:.5px; }
.kb-count { font-size:12px; color:var(--t4); letter-spacing:1px; }
.kb-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.kb-card { background:var(--card); border:1px solid var(--ln); border-radius:var(--rad); padding:15px; display:flex; gap:14px; transition:background .18s,border-color .18s; }
.kb-card:hover { background:var(--card-h); border-color:var(--ln2); }
.kb-card-media { width:112px; height:68px; flex-shrink:0; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.04); }
.kb-card-media img { width:100%; height:100%; object-fit:cover; }
.kb-card-text { min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.kb-card h3 { font-size:15px; font-weight:550; margin:0 0 6px; line-height:1.5; display:flex; align-items:flex-start; gap:7px; }
.kb-q { color:var(--accent); font-weight:700; flex-shrink:0; font-size:14px; line-height:1.6; }
.kb-meta { font-size:11.5px; color:var(--t4); }
.kb-foot2 { display:flex; align-items:center; gap:12px; margin-top:6px; }
.kb-more { font-size:12.5px; color:var(--accent); display:inline-flex; align-items:center; gap:4px; transition:gap .18s; }
.kb-more:hover { gap:8px; }
.kb-tag { font-size:10.5px; padding:2px 8px; border-radius:4px; background:rgba(110,231,199,.14); color:var(--accent); letter-spacing:.5px; }
.kb-tag.hub { background:rgba(255,45,85,.18); color:#ff8ba3; border:1px solid rgba(255,45,85,.4); }

.kb-empty { text-align:center; padding:70px 20px; color:var(--t3); font-size:15px; }
.kb-empty span { font-size:13px; opacity:.6; }

/* 分页 */
.kb-pager { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:26px; }
.kb-pg { min-width:38px; height:38px; padding:0 12px; border:1px solid var(--ln2); background:rgba(255,255,255,.04); color:var(--t2); border-radius:9px; cursor:pointer; font-size:14px; transition:.15s; }
.kb-pg:hover:not(:disabled) { background:rgba(255,45,85,.16); border-color:rgba(255,45,85,.5); }
.kb-pg.active { background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600; }
.kb-pg:disabled { opacity:.32; cursor:not-allowed; }
.kb-gap { color:var(--t4); padding:0 2px; }
.kb-pginfo { margin-left:8px; font-size:13px; color:var(--t4); }

/* 文章页 */
.kb-article { max-width:820px; margin:0 auto; padding:40px 40px 0; }
.kb-crumb { font-size:13px; color:var(--t4); margin-bottom:26px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kb-crumb a { color:var(--t3); }
.kb-crumb a:hover { color:var(--accent); }
.kb-crumb .sep { opacity:.45; }

.kb-article-head { margin-bottom:34px; }
.kb-article-head .kicker { display:inline-block; font-size:12px; padding:3px 10px; border-radius:4px; background:rgba(110,231,199,.14); color:var(--accent); letter-spacing:1px; margin-bottom:16px; }
.kb-article-head h1 { font-size:31px; font-weight:600; line-height:1.45; margin:0 0 18px; letter-spacing:.5px; }
.kb-article-head .lede { font-size:16px; line-height:1.9; color:var(--t2); padding:16px 20px; background:rgba(110,231,199,.055); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; margin:0 0 18px; }
.kb-article-meta { display:flex; gap:18px; font-size:12px; color:var(--t4); flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--ln); }

.kb-content { font-size:15.5px; line-height:1.95; color:var(--t2); }
.kb-content h2 { font-size:22px; font-weight:600; color:var(--t1); margin:46px 0 16px; padding-left:13px; border-left:4px solid var(--accent); line-height:1.5; letter-spacing:.5px; }
.kb-content p { margin:0 0 18px; }
.kb-content strong { color:var(--t1); font-weight:600; }
.kb-content figure { margin:28px 0; text-align:center; }
.kb-content figure img { max-width:100%; border-radius:10px; border:1px solid var(--ln); background:rgba(255,255,255,.03); display:block; margin:0 auto; }
.kb-content figcaption { font-size:12.5px; color:var(--t4); margin-top:11px; line-height:1.7; }
.kb-content ul, .kb-content ol { margin:0 0 18px; padding-left:24px; }
.kb-content li { margin-bottom:9px; line-height:1.9; }

.kb-back { display:inline-flex; align-items:center; gap:7px; margin-top:34px; height:40px; padding:0 20px; border-radius:8px; border:1px solid var(--ln2); font-size:14px; color:var(--t2); transition:all .18s; }
.kb-back:hover { background:rgba(255,255,255,.07); color:var(--t1); }
.kb-state { text-align:center; padding:90px 20px; }

@media only screen and (max-width:725px){
  .kb-head { padding:0 18px; height:54px; }
  .kb-head .kb-logo { height:24px; margin-right:20px; }
  .kb-head nav { gap:18px; }
  .kb-head nav a { font-size:13px; }
  .kb-cta { display:none; }
  .kb-hero { padding:44px 18px 30px; }
  .kb-hero h1 { font-size:27px; }
  .kb-filters { padding:0 18px; justify-content:flex-start; }
  .kb-body { padding:34px 18px 0; }
  .kb-grid { grid-template-columns:1fr; }
  .kb-card-media { width:96px; height:58px; }
  .kb-card h3 { font-size:14px; }
  .kb-article { padding:26px 18px 0; }
  .kb-article-head h1 { font-size:24px; }
  .kb-foot { padding:26px 18px 32px; }
}
/* v2-ct-fix */