/* === 基础色 === */
:root{
  --bg:#0f172a;           /* 深海蓝黑，和首页贴合 */
  --txt:#e6edf3;
  --muted:#9aa4b2;
  --accent:#6c9fff;       /* 霓虹蓝 */
  --accent2:#a658ff;      /* 霓虹紫 */
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
}

/* 固定粒子背景 */
.particles-fixed{
  position:fixed; inset:0;
  z-index:-1;
  background: var(--bg);
}

/* 整体容器 */
.blog-dark{ background: var(--bg); }
.blog-wrap{ max-width: 860px; margin: 0 auto; padding: 80px 18px 72px; }

/* 顶部区域 */
.blog-hero{ text-align:center; margin-bottom: 18px; }
.blog-hero h1{ margin:0 0 6px; font-size: clamp(28px,3.6vw,40px); color:var(--txt); }
.blog-hero p{ margin:0; color:var(--muted); }

/* 操作区：返回/搜索 */
.top-actions{ display:flex; gap:12px; align-items:center; margin:16px 0 8px; }
.back-home{
  text-decoration:none; color:var(--txt);
  border:1px solid var(--border); padding:8px 12px; border-radius:10px;
  background: rgba(255,255,255,.04);
}
.search{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  color:var(--txt); background: rgba(255,255,255,.04); outline:none;
}

/* 单列列表（每行一篇） */
.post-list{ display:block; margin-top: 12px; }
.post-card{
  display:block; position:relative;
  padding:18px 18px 16px;
  border-radius:16px; margin:14px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover{
  transform: translateY(-4px);
  border-color: rgba(108,159,255,.55);
  box-shadow: 0 18px 36px rgba(108,159,255,.22), 0 0 0 1px rgba(166,88,255,.18) inset;
}

.post-date{
  position:absolute; right:14px; top:14px; font-size:12px; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:3px 8px;
  background: rgba(255,255,255,.04);
}

.post-title{ margin:0 0 6px; font-size:22px; font-weight:800; }
.post-title a{ color:var(--txt); text-decoration:none; }

.post-excerpt{ margin:6px 0 10px; color:var(--muted); line-height:1.7; }

.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.tag{
  font-size:12px; color:var(--txt);
  border:1px solid var(--border); border-radius:999px; padding:3px 8px;
  background: rgba(108,159,255,.08);
}

.read-link{
  display:inline-block; margin-top:12px; text-decoration:none; color:#fff;
  padding:9px 14px; border-radius:10px; font-size:14px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: transform .2s ease, box-shadow .2s ease;
}
.read-link:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(108,159,255,.35); }

/* 响应式微调 */
@media (max-width:520px){
  .post-title{ font-size:20px; }
}
/* 1) 让“博客文章”剧中（包含副标题） */
.blog-hero{
  text-align: center !important;
}

/* 2) 链接颜色统一为清爽蓝青色（不影响渐变按钮 .read-link） */
:root{
  --link: #8bd5ff;          /* 你也可以改成 #64d2ff / #7dd3fc 等 */
  --link-hover: #c0ecff;
}
.blog-wrap a:not(.read-link){
  color: var(--link) !important;
  text-decoration: none;
  border-bottom: 1px dashed rgba(139,213,255,.35);
}
.blog-wrap a:not(.read-link):hover{
  color: var(--link-hover) !important;
  border-bottom-color: rgba(139,213,255,.6);
}

/* 3) 搜索框毛玻璃虚化 + 发光聚焦效果 */
.search{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(8px);              /* 毛玻璃关键 */
  -webkit-backdrop-filter: blur(8px);
  color: var(--txt) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.search:focus{
  border-color: rgba(108,159,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(108,159,255,.18),
    inset 0 0 0 1px rgba(166,88,255,.15);
}

/* 让卡片与搜索在大屏更居中对齐些（可选） */
.blog-wrap{ max-width: 980px; }   /* 想更窄可改 920/900 */

.blog-hero h1{
  background: linear-gradient(90deg, #6c9fff, #a658ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 22px rgba(108,159,255,.25);
}