/* 老陈的 AI 知识库 v3 —— 深色科技感 / 磨砂玻璃 / 导航栏 */
:root{
  --bg:#0b1020; --bg2:#0e1530; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --ink:#eef2ff; --muted:#a8b0c8; --line:rgba(255,255,255,.12);
  --cyan:#22d3ee; --violet:#8b5cf6; --blue:#3b82f6;
  --grad:linear-gradient(120deg,#22d3ee,#8b5cf6);
  --shadow:0 10px 34px rgba(3,8,30,.5);
  --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; color:var(--ink); min-height:100vh; overflow-x:hidden;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 70% -10%, #1a1440 0%, transparent 60%),
             radial-gradient(900px 500px at 10% 110%, #06263a 0%, transparent 55%),
             linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
}
a{color:inherit; text-decoration:none;}
::selection{background:rgba(34,211,238,.3);}

/* WebGL 粒子网格背景 */
.shader-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;}
body.no-shader .shader-canvas{display:none;}

/* 全局平铺水印（url 相对样式表） */
.wm-tiled{display:none;}

/* ===== 顶部导航（含类别） ===== */
.navbar{position:sticky; top:0; z-index:100; background:rgba(9,13,30,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.nav-in{max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:22px; height:62px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:.3px; white-space:nowrap;}
.brand img{height:34px; width:34px; border-radius:9px;}
.brand .accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-cats{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; flex:1;}
.nav-cats::-webkit-scrollbar{display:none;}
.nav-cats a{position:relative; padding:8px 12px; font-size:13.5px; color:var(--muted); white-space:nowrap; border-radius:10px; transition:.16s; font-weight:600;}
.nav-cats a::before{content:""; position:absolute; left:12px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--c,#22d3ee); opacity:.85;}
.nav-cats a{padding-left:24px;}
.nav-cats a:hover{color:var(--ink); background:var(--panel2);}
.nav-cats a.active{color:var(--ink); background:var(--panel2);}
.nav-cats a.active::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px; background:var(--c,#22d3ee);}
.nav-count{font-size:12px; color:var(--muted); white-space:nowrap; border:1px solid var(--line); padding:4px 12px; border-radius:999px;}

/* ===== Hero ===== */
.hero{position:relative; z-index:2; text-align:center; padding:88px 20px 64px; overflow:hidden;}
.hero-in{position:relative; max-width:820px; margin:0 auto;}
.hero-logo{height:76px; width:76px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:11px; box-shadow:0 14px 40px rgba(3,8,30,.6), 0 0 0 6px rgba(34,211,238,.06);}
.hero-kicker{display:inline-block; font-size:12.5px; letter-spacing:3px; color:var(--cyan); border:1px solid rgba(34,211,238,.4); background:rgba(34,211,238,.08); padding:5px 16px; border-radius:999px; margin-bottom:18px;}
.hero h1{margin:14px 0 12px; font-size:46px; letter-spacing:1px; line-height:1.2;
  background:linear-gradient(120deg,#fff 20%,#9fb7ff 55%,#22d3ee 90%); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(34,211,238,.15);}
.hero p{margin:0 auto; max-width:640px; color:var(--muted); font-size:16px;}
.hero-stat{margin-top:22px; display:inline-flex; gap:22px; align-items:center; background:var(--panel); border:1px solid var(--line); padding:10px 24px; border-radius:999px; font-size:14px; color:var(--muted); backdrop-filter:blur(8px);}
.hero-stat b{color:var(--ink); font-size:19px; margin:0 4px 0 0;}
.hero-stat .sep{width:1px; height:18px; background:var(--line);}

/* 容器 */
.wrap{position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 20px;}

/* 面包屑 */
.crumb{position:relative; z-index:2; max-width:860px; margin:20px auto 0; padding:0 20px; font-size:13.5px; color:var(--muted);}
.crumb a{color:var(--cyan); font-weight:600;}

/* 区块标题 */
.section-title{position:relative; z-index:2; max-width:1200px; margin:6px auto 0; padding:0 20px; display:flex; align-items:baseline; gap:14px;}
.section-title h2{font-size:24px; margin:0; letter-spacing:.5px;}
.section-title span{color:var(--muted); font-size:13.5px;}

/* 类别总览（首页） */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; margin:26px auto 56px; max-width:1200px;}
.cat-card{position:relative; display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px 20px; overflow:hidden; transition:.2s; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.cat-card::before{content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1px; background:linear-gradient(140deg,var(--c,#22d3ee),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none;}
.cat-card::after{content:""; position:absolute; top:-40%; right:-40%; width:70%; height:70%; background:radial-gradient(circle,var(--c,#22d3ee) 0%,transparent 70%); opacity:.12; pointer-events:none; transition:.25s;}
.cat-card:hover{transform:translateY(-5px); background:var(--panel2); box-shadow:var(--shadow);}
.cat-card:hover::after{opacity:.22;}
.cat-card .glyph{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(140deg,var(--c,#22d3ee)22,transparent); border:1px solid var(--c,#22d3ee)55; color:var(--c,#22d3ee); margin-bottom:16px;}
.cat-card h3{margin:0 0 8px; font-size:21px;}
.cat-card p{margin:0 0 14px; color:var(--muted); font-size:14px; min-height:44px;}
.cat-count{display:inline-block; font-size:13px; font-weight:700; color:var(--c,#22d3ee); background:rgba(255,255,255,.04); border:1px solid var(--c,#22d3ee)44; padding:3px 12px; border-radius:999px;}

/* 文章卡片网格（类别页） */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; margin:26px auto 56px; max-width:1200px;}
.card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 16px; transition:.2s; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:2px solid var(--c,#22d3ee)66;}
.card:hover{transform:translateY(-4px); background:var(--panel2); box-shadow:var(--shadow);}
.card h3{margin:12px 0 8px; font-size:18px; line-height:1.5;}
.card p{margin:0 0 12px; color:var(--muted); font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .date{font-size:12.5px;}

/* 标签 / 日期 */
.tag{display:inline-block; background:rgba(255,255,255,.06); color:var(--c,#22d3ee); border:1px solid var(--c,#22d3ee)44; border-radius:999px; padding:3px 12px; font-size:12.5px; font-weight:700; letter-spacing:.3px;}
.date{color:var(--muted); font-size:13px;}

/* 标签系统 */
.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px;}
.post-tags:empty{display:none;}
.tag-chip{display:inline-block; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--cyan); border-radius:999px; padding:4px 13px; font-size:13px; font-weight:700; transition:.16s;}
.tag-chip:hover{background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.5); color:#7dd3fc;}
.tagbar{display:flex; flex-wrap:wrap; gap:9px; margin:22px auto 4px; max-width:1200px; padding:0 20px; position:relative; z-index:2;}
.tagbtn{background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:6px 15px; font-size:13px; font-weight:600; cursor:pointer; transition:.16s;}
.tagbtn:hover{color:var(--ink); border-color:rgba(34,211,238,.4);}
.tagbtn.active{color:#06243a; background:var(--grad); border-color:transparent; font-weight:700;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px auto 56px; max-width:1000px; padding:0 20px; position:relative; z-index:2;}
.tag-cloud-item{display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:15px; font-weight:700; color:var(--ink); transition:.18s;}
.tag-cloud-item:hover{transform:translateY(-3px); border-color:rgba(34,211,238,.5); background:var(--panel2); box-shadow:var(--shadow);}
.tag-cloud-item span{font-size:12px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:999px; padding:1px 9px;}
.catlabel{display:inline-block; font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 8px; margin-bottom:6px;}

/* 文章页 */
.post-wrap{max-width:860px; margin:24px auto 70px;}
.post{background:rgba(15,21,42,.72); border:1px solid var(--line); border-radius:22px; padding:34px 40px 30px; box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.post-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.post-title{margin:6px 0 8px; font-size:30px; line-height:1.35; letter-spacing:.3px;}
.byline{margin:0 0 22px; color:var(--muted); font-size:14px; font-weight:600; border-bottom:1px dashed var(--line); padding-bottom:18px;}
.post-body{font-size:16.5px; color:#dbe1f5;}
.post-body h2{font-size:22px; margin:32px 0 12px; line-height:1.5; color:#fff;}
.post-body h3{font-size:18px; margin:26px 0 10px; color:#eaf0ff; position:relative; padding-left:14px;}
.post-body h3::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--grad);}
.post-body p{margin:14px 0;}
.post-body ul,.post-body ol{padding-left:24px; margin:13px 0;}
.post-body li{margin:8px 0;}
.post-body b{color:#fff;}
.post-body code{background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.25); border-radius:6px; padding:2px 7px; font-size:14px; color:#7dd3fc; font-family:"SFMono-Regular",Consolas,monospace;}
.post-body pre{background:#070b18; border:1px solid var(--line); color:#e6edf3; border-radius:12px; padding:16px 18px; overflow:auto; font-size:13.5px; line-height:1.6;}
.post-body pre code{background:none; border:none; color:inherit; padding:0;}
.post-body blockquote{margin:18px 0; padding:13px 18px; border-left:4px solid var(--violet); background:rgba(139,92,246,.1); border-radius:0 10px 10px 0; color:#cbd5f0;}

/* 老陈点评 / 提示框 */
.tip{background:linear-gradient(180deg,rgba(34,211,238,.1),rgba(139,92,246,.08)); border:1px solid rgba(34,211,238,.28); border-left:4px solid var(--cyan); border-radius:12px; padding:15px 18px; margin:24px 0; font-size:15px; color:#dbe1f5;}
.tip b{color:#7dd3fc;}

/* 图表（把旧浅色 svg 调成深色底） */
figure.diagram{margin:24px 0; text-align:center;}
figure.diagram svg{width:100%; max-width:700px; height:auto; display:inline-block; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; padding:10px;}
figure.diagram figcaption{color:var(--muted); font-size:13px; margin-top:10px;}

/* 正文配图（官网作品图 / 截图）：随容器宽度自适应，不撑破布局 */
.post-body img{max-width:100%; height:auto; display:block;}
.post-body img.shot{width:100%; max-width:100%; height:auto; display:block; margin:24px 0 6px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); box-shadow:0 8px 26px rgba(0,0,0,.35);}
.shot-cap{display:block; margin:0 0 22px; padding:0 4px; color:var(--muted); font-size:13px; line-height:1.6; text-align:center;}

/* 表格 */
.tbl{width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.tbl th,.tbl td{border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top;}
.tbl th{background:rgba(34,211,238,.1); color:#fff; font-weight:700;}
.tbl tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.tbl td{color:#d7def2;}

/* 翻页 */
.pager{display:flex; justify-content:space-between; gap:14px; margin-top:34px; border-top:1px dashed var(--line); padding-top:22px;}
.pager a{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 16px; transition:.16s; min-width:0;}
.pager a:hover{background:var(--panel2); border-color:rgba(34,211,238,.4);}
.pager .pnxt{text-align:right;}
.pager .pl{font-size:12px; color:var(--muted);}
.pager .pt{font-size:14.5px; font-weight:600; color:#7dd3fc; margin-top:2px; display:block;}

/* 页脚 */
.site-foot{position:relative; z-index:2; margin-top:30px; padding:36px 20px 48px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center; line-height:1.7; background:rgba(8,12,26,.5);}
.site-foot img{height:28px; vertical-align:middle; margin-right:8px; border-radius:7px;}
.foot-note{margin-top:4px; opacity:.8;}

/* 水印徽标 */
.wm-badge{position:fixed; right:18px; bottom:18px; z-index:60; background:rgba(12,17,36,.85); border:1px solid var(--line); border-radius:14px; padding:8px 11px; box-shadow:0 6px 22px rgba(0,0,0,.5); display:flex; align-items:center; gap:8px; backdrop-filter:blur(8px);}
.wm-badge img{height:28px; width:auto; display:block;}
.wm-badge span{font-size:12px; color:var(--muted);}

/* 返回顶部 */
.totop{position:fixed; right:20px; bottom:84px; z-index:60; width:42px; height:42px; border-radius:12px; background:var(--panel2); border:1px solid var(--line); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:18px; opacity:0; pointer-events:none; transition:.25s; cursor:pointer;}
.totop.show{opacity:1; pointer-events:auto;}

@media (max-width:760px){
  .nav-in{gap:12px;}
  .nav-count{display:none;}
  .hero{padding:60px 20px 48px;}
  .hero h1{font-size:32px;}
  .post{padding:24px 20px;}
  .post-title{font-size:25px;}
  .pager{flex-direction:column;}
  .pager .pnxt{text-align:left;}
  .tbl{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
  .post-body pre{font-size:12.5px;}
  figure.diagram svg{padding:8px;}
}