/* ============================================================
   articles/_theme.css?v=3 — 博客阅读排版
   ============================================================ */

/* 基础 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  background:#0a0c10;color:#c9d2de;margin:0;padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.85;font-size:16px;
}

/* ===== 导航 ===== */
.pf-nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;background:rgba(10,12,16,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.18em;
}
.pf-nav a{color:#7a8698;text-decoration:none;transition:color .18s}
.pf-nav a:hover{color:#ffb454}
.pf-nav .pf-title{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  font-size:13.5px;letter-spacing:0;color:#d8e0ea;font-weight:620}

/* ===== 文章容器 ===== */
.article{
  max-width:720px;margin:0 auto;padding:56px 28px 70px;
}

/* ===== 标题层级 ===== */
.article-header{margin-bottom:40px}
.article-header h1{
  font-size:clamp(26px,4.5vw,36px);font-weight:760;letter-spacing:-.025em;
  line-height:1.25;color:#fff;margin:0;
}
.article h2{
  font-size:clamp(19px,3vw,24px);font-weight:700;letter-spacing:-.015em;
  color:#fff;margin:52px 0 16px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
}
.article h2:first-of-type{margin-top:40px}
.article h3{
  font-size:16.5px;font-weight:650;color:#dde5ee;margin:36px 0 10px;
}

/* ===== 正文 ===== */
.article p.body-text{
  color:#aab6c8;font-size:15.5px;line-height:1.95;
  margin:18px 0;max-width:680px;
}
.article p.body-text:first-of-type{color:#c3cbda;font-size:16px}
.article p.caption{
  color:#6b7687;font-size:13px;line-height:1.8;
  text-align:center;margin:10px 0 26px;
}

/* ===== 列表 ===== */
.article-list{
  list-style:none;margin:22px 0;padding:0;
  border-left:2px solid rgba(255,180,84,.35);
  padding-left:22px;
}
.article-list li{
  color:#aab6c8;font-size:15px;line-height:1.9;
  margin:0 0 12px;padding-left:2px;
}
.article-list li::before{
  content:"";margin-right:8px;
}

/* ===== 图片 & demo ===== */
figure{margin:28px 0;text-align:center}
figure img{max-width:100%;height:auto;border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.4)}
.demo{
  margin:28px 0;padding:22px;border-radius:12px;
  background:#0e121a;border:1px solid rgba(255,255,255,.06);
}
.demo canvas{display:block;max-width:100%;margin:0 auto;border-radius:8px;background:#000}

/* 兼容旧的 canvas 容器 div（带 id 但类 demo 处理）*/
div[id]{min-height:20px}

/* ===== 代码 ===== */
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{background:#0e1219!important;border:1px solid rgba(255,255,255,.07)!important;
  border-radius:10px;padding:18px 22px!important;overflow-x:auto;
  font-size:13px;line-height:1.7;color:#c9d2de!important}
code{background:rgba(255,180,84,.08);padding:2px 7px;border-radius:4px;
  font-size:13px;color:#ffb454}
pre code{background:none;padding:none;border-radius:none;color:inherit}

/* ===== 链接 ===== */
a{color:#ffb454!important;text-decoration:none;transition:color .15s}
a:hover{color:#ffd28a}

/* ===== 页脚 ===== */
.article-footer{
  max-width:720px;margin:0 auto;padding:0 28px 50px;
  border-top:1px solid rgba(255,255,255,.06);
}
.article-footer a{
  display:inline-block;margin-top:26px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:#7a8698;
}
.article-footer a:hover{color:#ffb454}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
th,td{padding:10px 14px;border:1px solid rgba(255,255,255,.06);color:#b0bcc9!important;text-align:left}
th{background:rgba(255,180,84,.06);color:#ffb454!important;font-weight:600}

@media(max-width:640px){
  .article{padding:40px 20px 50px}
  .pf-nav{padding:13px 18px}
  .pf-nav .pf-title{font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}