/* 统一变量与系统字体，遵循“藏蓝与纸白” */
:root{
  --bg:#f7f5ef; /* 纸白 */
  --ink:#0b2b4a; /* 深藏蓝 */
  --accent:#0b3a61; /* 主题深色 */
  --muted:#6b6f72;
  --card-bg:#ffffff;
  --gap:14px;
  --radius:2px; /* 方形信息块，轻微圆角 */
  --line:1px;
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* 贯穿页面的1px主题竖线（visual_signature） */
.vline{
  position:fixed;
  left:64px;
  top:0;
  bottom:0;
  width:var(--line);
  background:var(--accent);
  opacity:0.9;
  z-index:1;
}

.masthead{background:var(--accent);color:#fff;padding:12px 0 8px 0}
.toolbar{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:0 20px}
.tool-left{display:flex;align-items:center;gap:8px;font-weight:700}
.tool-left .site{color:#fff;text-decoration:none}
.tool-left .sep{opacity:.6}
.tool-right{opacity:.85;font-size:13px}
.editor-head{max-width:1280px;margin:6px auto 0;padding:6px 20px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.editor-head .head-left{font-weight:600}

.container{margin:22px auto;padding:0 20px}
/* 默认中等布局（平板） */
.article{background:transparent}
.article-head{margin-bottom:12px}
.head-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.title-wrap h1{margin:0;font-size:1.5rem;line-height:1.1;font-weight:700}
.meta-wrap{font-size:0.95rem;color:var(--muted)}
.meta-row{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.summary{background:var(--card-bg);padding:10px;border-radius:var(--radius);box-shadow:none;border:1px solid rgba(11,58,97,0.06)}

.article-body-layout{display:block}
.content{background:var(--card-bg);padding:16px;border-radius:var(--radius);border:1px solid rgba(11,58,97,0.06);color:var(--ink)}
.content p{margin:0 0 12px}

.sidebar{margin-top:14px}
.section-title{font-size:0.95rem;margin:0 0 8px 0;color:var(--accent);font-weight:700}
.faq-list{margin:0;padding-left:18px;color:var(--ink)}
.faq-list li{margin:0 0 10px;padding:6px;background:#fff;border:1px solid rgba(11,58,97,0.04);border-radius:var(--radius);font-size:0.95rem}
.related-grid{display:block}
.related-grid > *{display:block;padding:8px 0;border-bottom:1px solid rgba(11,58,97,0.04);font-size:0.95rem}

.ad{background:transparent;margin:18px 0}
.ad .ad-inner{min-height:50px}

.site-footer{padding:18px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:0 20px}

/* MOBILE FIRST: 手机端规则（max-width:767px）
   标题与摘要上下排列，正文、FAQ、推荐依序显示。*/
@media (max-width:767px){
  .vline{display:none}
  .editor-head{padding:8px 14px}
  .toolbar{padding:0 14px}
  .container{padding:0 14px}
  .head-split{grid-template-columns:1fr;gap:8px}
  .title-wrap h1{font-size:1.25rem}
  .summary{padding:8px}
  .article-body-layout{display:block}
  .content{padding:12px}
  .sidebar{margin-top:12px}
  .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .related-grid > *{border-bottom:none;padding:6px;border:1px solid rgba(11,58,97,0.04);border-radius:var(--radius)}
  .footer-inner{flex-direction:column;gap:8px;align-items:flex-start}
}

/* DESKTOP: >=1024px 必须有不同结构
   标题与摘要左右各半，正文下方进入7/5两栏；右栏承载FAQ和推荐，不使用常规顶部卡片。*/
@media (min-width:1024px){
  body{font-size:16px}
  .container{min-width:1120px;max-width:1280px}
  .vline{left:88px}
  .toolbar{padding:0 28px}
  .editor-head{padding:10px 28px}
  .head-split{grid-template-columns:1fr 1fr;align-items:start}
  .title-wrap h1{font-size:2rem}
  /* 正文与右栏 7/5 分栏 */
  .article-body-layout{display:grid;grid-template-columns:7fr 5fr;gap:22px;align-items:start}
  .content{order:1}
  .sidebar{order:2;background:transparent;padding:0}
  /* 右栏内部：FAQ 用编号式问答，RELATED 使用四列紧凑标题网格 */
  .faq-list{list-style:decimal;margin-left:18px}
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .related-grid > *{padding:6px 4px;border-radius:var(--radius);background:var(--card-bg);border:1px solid rgba(11,58,97,0.04);font-size:0.92rem}
}

/* 中间断点（768px ~ 1023px）采用紧凑排列但保持可读 */
@media (min-width:768px) and (max-width:1023px){
  .vline{left:64px}
  .container{max-width:960px;padding:0 20px}
  .head-split{grid-template-columns:1fr;gap:10px}
  .article-body-layout{display:block}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .related-grid > *{padding:6px;border-radius:var(--radius);background:var(--card-bg);border:1px solid rgba(11,58,97,0.04)}
}

/* 可访问性与打印友好 */
@media print{body{background:#fff;color:#000} .vline{display:none} .ad{display:none}}