:root{
  --bg: #fffaf0; /* 象牙白基底 */
  --ink: #22202a; /* 深紫灰文本 */
  --muted: #6f6a73;
  --accent: #3e2f47; /* 深紫灰色系 */
  --surface-border: rgba(30,24,34,0.06);
  --radius: 2px; /* 2px 小圆角 */
  --max-wide: 1280px;
  --gap: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 16px;
  line-height: 1.5;
}

*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0}

/* 报头：左右分置的编辑部报头，双层但第二层极窄 */
.site-header{border-bottom:1px solid var(--surface-border);background:transparent}
.header-top{max-width:var(--max-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gap)}
.site-brand{font-weight:700;color:var(--accent);text-decoration:none}
.header-right{color:var(--muted);font-size:13px}
.header-narrow .header-strip{height:6px;background:transparent;border-top:1px solid var(--surface-border)}

/* 广告独立容器：不得悬浮/黏贴 */
.ad-wrapper{max-width:var(--max-wide);margin:12px auto;padding:8px;border:1px dashed var(--surface-border);border-radius:var(--radius);background:transparent;color:var(--muted);font-size:13px}

/* 中心主区容器 */
.page-main{padding:18px 12px 40px}
.center-wrap{max-width:var(--max-wide);margin:0 auto}

/* 标题区域：大标题配窄元信息列（窄元信息在右侧） */
.article-header{padding:8px 12px;border:1px solid transparent}
.title-grid{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
.title{margin:0;color:var(--ink);font-size:28px;line-height:1.15;word-break:break-word}
.meta-col{font-size:13px;color:var(--muted);border-left:1px solid var(--surface-border);padding-left:12px}
.meta-col .meta-item{margin-bottom:8px}
.meta-col .summary{font-size:13px;color:var(--muted)}

/* 文章主体区：中轴向两侧展开（桌面） */
.article-body-wrap{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;margin-top:14px;align-items:start}
.sidebar{border:1px solid var(--surface-border);border-radius:var(--radius);padding:12px;background:transparent;color:var(--muted);font-size:13px}
.aside-heading{font-weight:600;color:var(--accent);margin-bottom:8px}
.article-main{padding:6px 12px;border:1px solid transparent}
.article-meta-inline{display:none;font-size:13px;color:var(--muted);margin-bottom:8px}

/* 正文：技术资讯紧凑型，紧凑密度，首字强调为视觉签名 */
.article-content{color:var(--ink);font-size:15px;line-height:1.6}
.article-content p{margin:0 0 12px}
.article-content p:first-of-type::first-letter{font-weight:700;color:var(--accent);font-size:1.22em;padding-right:2px}

/* FAQ：编号式问答（依赖内容提供，但视觉上支持有序列表样式） */
.faq{margin-top:18px;padding-top:8px;border-top:1px solid var(--surface-border)}
.faq h2{font-size:16px;margin:0 0 10px}
.faq .faq-body ol{padding-left:20px;margin:0}
.faq .faq-body li{margin:8px 0}

/* 相关阅读：底部三列短卡但不用阴影 */
.related{margin-top:18px;padding-top:8px;border-top:1px solid var(--surface-border)}
.related h2{font-size:16px;margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{border:1px solid var(--surface-border);padding:10px;border-radius:var(--radius);background:transparent;font-size:14px;color:var(--ink)}

/* 页脚 */
.site-footer{border-top:1px solid var(--surface-border);padding:14px 12px;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-wide);margin:0 auto;display:flex;justify-content:space-between}

/* 可视密度调整 */
@media (min-width: 1024px){
  :root{font-size:16px}
  .center-wrap{padding:12px}
  /* 确保内容容器在 1120px—1440px 区间（当视窗足够大时） */
  .center-wrap{max-width:1280px}
  .title{font-size:34px}
  /* 桌面端：中轴布局更明显 —— 主列 + 注释栏（注释栏在左，正文主列在右） */
  .article-body-wrap{grid-template-columns:280px minmax(720px,1fr);gap:28px}
  .sidebar{order:0}
  .article-main{order:1}
  .article-meta-inline{display:block}
  .meta-col{padding-left:14px}
  /* 相关阅读三列样式成立 */
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 手机端：中轴布局解除，全部左对齐单列，避免窄正文 */
@media (max-width: 767px){
  :root{font-size:15px}
  .header-top{padding:12px}
  .header-narrow .header-strip{height:4px}
  .ad-wrapper{margin:10px 12px}
  .center-wrap{max-width:100%;padding:0}
  .title-grid{grid-template-columns:1fr;gap:8px}
  .meta-col{border-left:none;padding-left:0}
  .title{font-size:20px;text-align:left}
  .article-body-wrap{display:block}
  .sidebar{border:1px solid var(--surface-border);margin:12px;color:var(--muted);padding:10px;border-radius:var(--radius)}
  .article-main{padding:0 12px}
  .article-meta-inline{display:none}
  .article-content{font-size:15px}
  .related-grid{display:block}
  .related-grid > *{margin:8px 12px}
  .footer-inner{flex-direction:column;gap:6px}
}

/* 中性交互及辅助样式 */
a{color:var(--accent)}
button{font-family:inherit}

/* 禁止常见被禁用的模板套路：无多个彩色胶囊标签、不使用重阴影和大圆角 */