:root{
  /* 兼容你现有与参考样式的变量全集 */
  --primary:#1a3a6e;
  --secondary:#e67e22;
  --text-light:#64748b;
  --accent:#3498db;
  --light-bg:#f8fafc;
  --border-color:rgba(0,0,0,.08);

  --bg:#f6f8fb;
  --bg-2:#ffffff;
  --fg:#0e1420;
  --muted:#55637a;
  --brand:#2f6bff;
  --ok:#1aa36f; --warn:#b78000; --bad:#c74c4c;

  --radius:18px;
  --shadow:0 10px 30px rgba(13,22,44,.08);
  --maxw:1200px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --transition-fast:.2s var(--ease-out);
  --transition-normal:.3s var(--ease-out);

  /* 排版与可读性 */
  --content-max:80ch;
  --content-side:2rem;
  --leading:1.8;
  --leading-tight:1.35;
  --para-space:1.8rem;
  --h2-top:3.4rem;
  --h3-top:2.6rem;

  /* 代码与表格 */
  --code-bg:#f8fafc;
  --code-br:8px;
  --table-br:8px;
}

/* 基础重置与字体渲染 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--fg);
  background:linear-gradient(180deg,#fff,var(--bg) 60%,#eef3ff 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:var(--leading);
  overflow-x:hidden;
}

/* ============ 文章头部 ============ */
.article-header{
  padding:5rem 0 2rem;
  background:linear-gradient(to bottom,#ffffff,var(--light-bg));
  position:relative; z-index:5;
  border-bottom:1px solid var(--border-color);
}
.article-header .container{
  max-width:800px; margin:0 auto; padding:0 var(--content-side);
}
.article-title{
  font-size:clamp(2.4rem,2rem + 1.6vw,3.4rem);
  line-height:1.15;
  color:var(--primary);
  text-align:center;
  margin:0 auto 1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-wrap:balance;
  font-variation-settings:"opsz" 32;
}
.article-subtitle{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem);
  color:var(--text-light);
  text-align:center;
  max-width:70ch;
  margin:0 auto 2.2rem;
  line-height:1.6;
  font-weight:450;
  text-wrap:pretty;
}
.article-meta{
  display:flex; justify-content:center; align-items:center; gap:1.2rem;
  margin:1.6rem auto 2.6rem;
  font-size:.98rem; color:var(--text-light);
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:.8rem 1.2rem; width:fit-content;
  background:rgba(241,245,249,.65);
  border-radius:50px; position:relative; z-index:2; max-width:95%;
}
.article-meta>span{display:flex;align-items:center;gap:.4rem}

/* ============ 正文 ============ */
.article-content{
  padding:2rem 0; background:#fff;
  font-size:clamp(1.06rem,1rem + .28vw,1.22rem);
  line-height:var(--leading);
  font-kerning:normal; font-variant-ligatures:common-ligatures;
  overflow-wrap:break-word; position:relative; z-index:3;
}
.article-container{max-width:var(--content-max);margin:0 auto;padding:0 var(--content-side)}

.article-content p{
  margin:var(--para-space) auto;
  line-height:var(--leading);
  color:#222; text-align:left; word-spacing:-.03em;
  text-wrap:pretty;
}
.article-content p:first-of-type{
  font-size:clamp(1.15rem,1.05rem + .38vw,1.32rem);
  line-height:calc(var(--leading) + .05);
  color:#333; font-weight:470;
}

/* 标题层级 */
.article-content h2{
  font-size:clamp(1.75rem,1.55rem + .7vw,2.25rem);
  color:var(--primary);
  margin:var(--h2-top) 0 1.25rem;
  line-height:var(--leading-tight);
  letter-spacing:-.015em; font-weight:760;
  position:relative; text-wrap:balance;
}
.article-content h2::after{
  content:""; position:absolute; bottom:-.7rem; left:0;
  width:4rem; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--secondary),#f39c12);
  opacity:.9;
}
.article-content h3{
  font-size:clamp(1.35rem,1.25rem + .5vw,1.65rem);
  color:var(--primary);
  margin:var(--h3-top) 0 1.1rem;
  line-height:1.45; font-weight:650;
}

/* 段落邻接优化 */
.article-content h2 + p,
.article-content h3 + p{ margin-top:.8rem }
.article-content p + h3{ margin-top:2.1rem }

/* 列表 */
.article-content ul,.article-content ol{
  margin:1.6rem 0; padding-left:2.2rem; position:relative;
}
.article-content li{ margin:.85rem 0; line-height:1.8; padding-left:.2rem }
.article-content ul li::before{
  content:"•"; color:var(--secondary);
  position:absolute; left:calc(2.2rem - 1.5rem);
  font-weight:800; font-size:1.25rem; top:-.05rem;
}

/* 图片与图注 */
.article-content img{
  max-width:min(100%,90ch); height:auto; display:block;
  margin:2.6rem auto; border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.article-content figure{margin:0}
.article-content figcaption{
  text-align:center; font-size:.96rem; color:var(--text-light);
  margin:.7rem 0 1.8rem; font-style:italic;
}

/* 引用 */
.article-content blockquote{
  border-left:4px solid var(--secondary);
  padding:1.6rem 2rem; margin:2.6rem 0;
  background:rgba(26,58,110,.035);
  color:#3a4150; border-radius:0 10px 10px 0;
  font-style:italic; font-size:1.06rem; line-height:1.75;
}

/* 代码与预格式 */
.article-content code{
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  font-size:.92rem; background:rgba(0,0,0,.05);
  padding:.18rem .38rem; border-radius:6px;
}
.article-content pre{
  margin:2.2rem 0; padding:1.3rem 1.5rem;
  background:var(--code-bg);
  border-radius:var(--code-br);
  overflow-x:auto; border-left:4px solid var(--accent);
  font-size:.95rem; line-height:1.6;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.article-content pre code{background:none;padding:0}

/* 链接 */
.article-content a{
  color:var(--accent); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%; background-repeat:no-repeat;
  background-size:0% 2px; transition:background-size .28s ease,color .2s;
  padding-bottom:2px; font-weight:560;
}
.article-content a:hover{ background-size:100% 2px; color:#2c81bf }

/* 表格 */
.article-content table{
  width:100%; margin:2.2rem 0; border-collapse:collapse; display:block; overflow-x:auto;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  border-radius:var(--table-br);
  font-size:.96rem;
}
.article-content thead th{
  position:sticky; top:0; z-index:1;
  background:#f1f5f9;
}
.article-content th{
  padding:.95rem 1.1rem; text-align:left; font-weight:650; color:var(--primary);
  border-bottom:2px solid var(--border-color);
}
.article-content td{
  padding:.85rem 1.1rem; border-bottom:1px solid var(--border-color);
}
.article-content tr:last-child td{border-bottom:none}
.article-content tr:nth-child(even){background:rgba(0,0,0,.015)}

/* 分隔线 */
.article-content hr{
  margin:3.2rem auto; height:1px; border:0;
  background:linear-gradient(to right,transparent,rgba(0,0,0,.12),transparent);
  max-width:70%;
}

/* ============ 导航区域 ============ */
.article-navigation{
  display:flex; justify-content:space-between;
  margin:4rem 0; padding:2.2rem 0;
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
.nav-previous,.nav-next{flex:1}
.nav-next{text-align:right}
.nav-label{font-size:.95rem;color:var(--text-light);margin-bottom:.6rem;display:block}
.nav-title{font-weight:760;color:var(--primary);line-height:1.4;transition:color .2s}
.nav-title:hover{color:var(--secondary)}

/* ============ 相关文章 ============ */
.related-articles{
  padding:4rem 0;
  background:linear-gradient(to bottom,#f1f5f9,#e8edf4);
}
.related-title{
  text-align:center; margin-bottom:2.6rem;
  font-size:clamp(1.6rem,1.4rem + .6vw,2rem);
  color:var(--primary); position:relative;
}
.related-title::after{
  content:""; position:absolute; bottom:-1rem; left:50%; transform:translateX(-50%);
  width:70px; height:4px; background:var(--secondary); border-radius:2px;
}
.related-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2.2rem; max-width:1200px; margin:0 auto; padding:0 var(--content-side);
}
.related-card{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.related-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.1)}
.related-card img{width:100%; height:180px; object-fit:cover}
.related-card-content{padding:1.35rem}
.related-card h3{font-size:1.18rem;margin:.1rem 0 .6rem;color:var(--primary)}
.related-card p{color:var(--text-light);font-size:.96rem;line-height:1.65}

/* ============ CTA ============ */
.article-cta{
  margin:4.6rem auto 3.6rem; padding:3rem;
  background:linear-gradient(90deg,#1a3a6e,#152a4e);
  color:#fff; border-radius:14px; border:none;
  box-shadow:0 6px 25px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  text-align:center; position:relative; overflow:hidden; max-width:75ch;
}
.article-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 200px at 10% 0%,rgba(255,255,255,.12),transparent 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/></svg>');
  background-size:auto,50px 50px;
  opacity:.7; z-index:1;
}
.article-cta-content{position:relative;z-index:2}
.article-cta h3{
  font-size:clamp(1.6rem,1.4rem + .6vw,2.05rem);
  color:#fff; margin-bottom:1.3rem; line-height:1.3; font-weight:760;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.article-cta p{
  color:rgba(255,255,255,.95); margin:0 auto 2rem;
  line-height:1.75; font-size:1.06rem; max-width:55ch;
}
.article-cta .btn{
  display:inline-block; background:var(--secondary); color:#fff;
  padding:.92rem 2.6rem; border-radius:10px; text-decoration:none;
  font-weight:760; border:0; cursor:pointer; letter-spacing:.02em; font-size:1.06rem;
  box-shadow:0 10px 25px rgba(0,0,0,.28);
  transition:transform .2s, box-shadow .2s, background .2s;
  position:relative; z-index:2;
}
.article-cta .btn:hover{background:#d35400; transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.35)}

/* ============ 自适应 ============ */
@media (max-width:768px){
  .article-header{padding:3.4rem 0 1.4rem}
  .article-title{font-size:clamp(2rem,1.8rem + .9vw,2.5rem)}
  .article-meta{gap:1rem; font-size:.92rem; justify-content:flex-start; padding:.8rem 1rem}
  .article-container{padding:0 1.5rem}
  .article-content{padding:1.35rem 0; font-size:1.04rem}
  .article-content pre{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0;padding:1.2rem}
  .article-content ul,.article-content ol{padding-left:2rem}
  .article-content h2{margin:2.8rem 0 1.2rem}
  .article-navigation{flex-direction:column;gap:1.2rem}
}
@media (max-width:480px){
  .article-header{padding:2.4rem 0 1rem}
  .article-title{font-size:clamp(1.8rem,1.7rem + .6vw,2rem)}
  .article-meta{gap:.75rem;padding:.7rem .8rem;font-size:.86rem;max-width:98%}
  .article-container{padding:0 1.1rem}
  .article-content{font-size:1.02rem}
  .article-content p{margin:1.55rem auto}
  .article-content h2{font-size:1.6rem}
  .article-content h3{font-size:1.42rem}
  .article-content blockquote{padding:1.25rem 1.5rem;margin:2.2rem 0}
  .article-content img{margin:2.2rem auto}
  .related-grid{grid-template-columns:1fr}
}

/* ============ 可访问性与动效 ============ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* ============ 暗色主题（自动） ============ */
@media (prefers-color-scheme:dark){
  :root{
    --fg:#e8ecf2; --text-light:#98a6bf; --border-color:rgba(255,255,255,.12);
    --bg:#0b121d; --bg-2:#0f1726; --primary:#cfe0ff; --accent:#89b4ff;
    --code-bg:#0f1a2a;
  }
  body{background:radial-gradient(1000px 500px at 120% -10%,rgba(116,167,255,.12),transparent 60%),radial-gradient(800px 460px at -10% -10%,rgba(184,251,255,.08),transparent 50%),#0b121d}
  .article-header{background:linear-gradient(to bottom,#0f1726,#0b131f)}
  .article-content pre{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .article-content table{box-shadow:0 2px 12px rgba(0,0,0,.35)}
  .article-content tr:nth-child(even){background:rgba(255,255,255,.03)}
  .related-articles{background:linear-gradient(to bottom,#0f1726,#0b121d)}
  .article-cta{box-shadow:0 10px 35px rgba(0,0,0,.55)}
}