/* ============================================================
   灵犀站 /blog/ 专属样式
   ------------------------------------------------------------
   设计原则：复用站点 page-tech.css 的 pg-* 组件与昼夜配色，
             本文件只保留博客专属规则（文章列表、长文排版、
             相关入口）。站点统一外壳/导航/页脚已在 page-tech.css。
   硬性约束：根路径 CSP 为 style-src 'self'，禁止内联样式，
             全部走本文件；颜色不写死，按 html[data-theme] 双向适配。
   ============================================================ */

/* ---------- 文章列表 ---------- */
.lx-list { margin-top: 14px; }
.lx-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lx-post {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease;
}
html[data-theme="day"] .lx-post {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
html[data-theme="night"] .lx-post {
  background: rgba(15, 23, 48, .68);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .40);
}
.lx-post:hover { transform: translateY(-2px); }
.lx-post-title { font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.5; }
html[data-theme="day"] .lx-post-title { color: #0f172a; }
html[data-theme="night"] .lx-post-title { color: #f1f5f9; }
.lx-post:hover .lx-post-title { text-decoration: underline; }
html[data-theme="day"] .lx-post:hover .lx-post-title { color: #1d4ed8; }
html[data-theme="night"] .lx-post:hover .lx-post-title { color: #7dd3fc; }
.lx-post-date { flex: none; font-size: 13px; white-space: nowrap; }
html[data-theme="day"] .lx-post-date { color: #64748b; }
html[data-theme="night"] .lx-post-date { color: rgba(148, 163, 184, .9); }
@media (max-width: 520px) {
  .lx-post { flex-direction: column; gap: 4px; }
}

/* ---------- 文章页头部 ---------- */
.lx-article-head { text-align: center; padding: 44px 0 8px; }
.lx-article-meta { font-size: 13.5px; margin: 0 0 10px; }
html[data-theme="day"] .lx-article-meta { color: #475569; }
html[data-theme="night"] .lx-article-meta { color: rgba(226, 232, 240, .72); }
.lx-article-head h1 {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}
html[data-theme="day"] .lx-article-head h1 { color: #0f172a; }
html[data-theme="night"] .lx-article-head h1 {
  color: #f8fafc;
  text-shadow: 0 2px 20px rgba(37, 99, 235, .5);
}

/* ---------- 长文正文：玻璃卡面，保证长文在渐变背景上可读 ---------- */
.lx-article {
  margin-top: 22px;
  padding: 30px 30px 34px;
  border-radius: 18px;
  border: 1px solid transparent;
}
html[data-theme="day"] .lx-article {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .12);
}
html[data-theme="night"] .lx-article {
  background: rgba(15, 23, 48, .72);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

/* ---------- 富文本排版 ---------- */
.lx-prose { font-size: 16px; line-height: 1.85; }
html[data-theme="day"] .lx-prose { color: #1f2937; }
html[data-theme="night"] .lx-prose { color: rgba(226, 232, 240, .88); }
.lx-prose h2 { font-size: 21px; line-height: 1.4; margin: 30px 0 12px; }
.lx-prose h3 { font-size: 17px; margin: 24px 0 10px; }
html[data-theme="day"] .lx-prose h2, html[data-theme="day"] .lx-prose h3 { color: #0f172a; }
html[data-theme="night"] .lx-prose h2, html[data-theme="night"] .lx-prose h3 { color: #f1f5f9; }
.lx-prose p { margin: 0 0 16px; }
.lx-prose a { text-decoration: underline; }
html[data-theme="day"] .lx-prose a { color: #1d4ed8; }
html[data-theme="night"] .lx-prose a { color: #7dd3fc; }
.lx-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.lx-prose table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14.5px; }
.lx-prose th, .lx-prose td { border: 1px solid transparent; padding: 8px 12px; text-align: left; }
html[data-theme="day"] .lx-prose th, html[data-theme="day"] .lx-prose td { border-color: rgba(15, 23, 42, .12); }
html[data-theme="night"] .lx-prose th, html[data-theme="night"] .lx-prose td { border-color: rgba(255, 255, 255, .14); }
html[data-theme="day"] .lx-prose thead { background: rgba(37, 99, 235, .06); }
html[data-theme="night"] .lx-prose thead { background: rgba(56, 189, 248, .08); }
.lx-prose pre { padding: 14px; overflow-x: auto; border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
html[data-theme="day"] .lx-prose pre { background: #f1f5f9; color: #0f172a; }
html[data-theme="night"] .lx-prose pre { background: rgba(2, 6, 23, .6); color: #e2e8f0; }
.lx-prose blockquote { margin: 16px 0; padding: 10px 16px; border-left: 3px solid #2563eb; }
html[data-theme="day"] .lx-prose blockquote { background: rgba(37, 99, 235, .05); color: #334155; }
html[data-theme="night"] .lx-prose blockquote { background: rgba(56, 189, 248, .08); color: rgba(226, 232, 240, .8); }
.lx-prose ul, .lx-prose ol { padding-left: 22px; margin: 0 0 16px; }
.lx-prose li { margin: 6px 0; }
.lx-prose > :last-child { margin-bottom: 0; }

/* ---------- 相关入口 ---------- */
.lx-links {
  margin-top: 26px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 18px 20px;
}
html[data-theme="day"] .lx-links { background: rgba(255, 255, 255, .90); border-color: rgba(15, 23, 42, .08); }
html[data-theme="night"] .lx-links { background: rgba(15, 23, 48, .68); border-color: rgba(255, 255, 255, .12); }
.lx-links h2 { font-size: 15px; margin: 0 0 10px; }
html[data-theme="day"] .lx-links h2 { color: #0f172a; }
html[data-theme="night"] .lx-links h2 { color: #f1f5f9; }
.lx-links ul { padding-left: 18px; margin: 0; }
.lx-links li { margin: 8px 0; font-size: 14.5px; }
html[data-theme="day"] .lx-links li { color: #475569; }
html[data-theme="night"] .lx-links li { color: rgba(226, 232, 240, .72); }
.lx-links a { text-decoration: none; }
html[data-theme="day"] .lx-links a { color: #1d4ed8; }
html[data-theme="night"] .lx-links a { color: #7dd3fc; }
.lx-links a:hover { text-decoration: underline; }