/* 基本变量与重置 */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --accent: #c92222; /* 朱红 */
  --container-min: 1120px;
  --container-max: 1440px;
  --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  font-size:16px;
}
a{color:inherit;text-decoration:none}
.container{margin:28px auto;padding:0 20px}
.toolbar{border-bottom:1px solid #eee;background:transparent}
.toolbar-inner{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.masthead{display:flex;align-items:baseline;gap:16px}
.site-link{font-weight:700;font-size:18px;color:var(--text)}
.crumb{font-size:13px;color:var(--muted)}
.toolbar-right .seed{font-size:12px;color:var(--muted)}
.ad-slot{max-width:1300px;margin:12px auto;padding:10px;background:#fafafa;color:var(--muted);border:1px solid #f0f0f0;font-size:14px}
/* 布局骨架：桌面与移动有截然不同的组织 */
.layout-grid{display:grid;gap:24px}
/* 文章基础 */
.article{background:transparent}
.article-header{margin-bottom:12px}
.title{margin:0 0 10px 0;font-size:28px;line-height:1.15;font-weight:700;color:var(--text);max-height:3.05em;overflow:hidden;text-overflow:ellipsis}
.lead{display:flex;flex-direction:row;gap:12px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.summary{color:var(--text);font-weight:500}
.published{color:var(--muted);font-size:13px}
.current-time{font-size:13px;color:var(--muted)}
.content{margin-top:14px;color:var(--text);font-size:16px}
.content p{margin:0 0 1em}
.faq{margin-top:22px;padding-top:14px}
.faq-inner{border-top:3px solid var(--accent);padding-top:12px}
.related{margin-top:18px}
.related-title{font-size:15px;margin:0 0 10px 0}
.related-grid{display:grid;gap:10px}
.side-info{background:transparent}
.side-block{background:transparent;padding:10px 0}
.block-title{font-size:14px;margin:0 0 8px 0;color:var(--text)}
.side-block ul{margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.side-block li{margin:6px 0}
.mini-desc{color:var(--text)}
.meta-edge{display:none}
.page-footer{border-top:1px solid #eee;padding:18px 20px;color:var(--muted);font-size:13px}
.footer-inner{max-width:1300px;margin:0 auto}

/* ========== 桌面规则 (>=1024px) ========== */
@media (min-width:1024px){
  .container{width:clamp(var(--container-min),84vw,var(--container-max));padding:0}
  .toolbar-inner{max-width:none;padding:18px}

  /* 使用非对称仪表板式网格：正文占 8 / 12 列，右侧为 3 列信息区，最右为元信息窄轨 */
  .layout-grid{grid-template-columns:1fr 300px 40px;align-items:start}
  .article{grid-column:1/2}
  .side-info{grid-column:2/3}
  .meta-edge{grid-column:3/4;display:block;align-self:start}

  /* 标题构成：超大但不超过两行（通过行高与 max-height 控制） */
  .title{font-size:34px;line-height:1.05;max-height:2.2em}

  /* 正文采用多栏感但保持单列阅读；宽屏充足留白，正文区更宽敞 */
  .content{font-size:17px;max-width:960px}

  /* 侧栏：两个不同高度的信息区 */
  .side-block{padding:18px;border-left:3px solid transparent}
  .side-top{min-height:160px}
  .side-bottom{min-height:260px}
  .side-block .note{color:var(--muted);font-size:13px}

  /* 元信息纵向排列，沿桌面端边缘形成视觉标识 */
  .meta-edge{position:relative}
  .meta-vertical{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(0deg);color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:6px;align-items:center}
  .meta-vertical .m-item{padding:4px 0}

  /* 相关阅读四列紧凑网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);display:grid}
}

/* ========== 手机规则 (<=767px) ========== */
@media (max-width:767px){
  body{font-size:15px}
  .container{margin:10px;padding:0 14px}
  .layout-grid{display:block}
  .toolbar-inner{padding:12px}
  .title{font-size:20px;margin-bottom:8px}
  .lead{flex-direction:column;align-items:flex-start;gap:6px}

  /* 信息区成为正文后的两段列表（side-info 下移） */
  .side-info{order:2;padding-top:12px;border-top:1px solid #f2f2f2;margin-top:12px}
  .side-top,.side-bottom{padding:10px 0}

  /* 元信息不做纵向沿边排列，改为隐藏以免占用空间 */
  .meta-edge{display:none}

  /* 相关阅读四列变单列 */
  .related-grid{display:block}
  .related-grid > *{margin-bottom:10px}

  /* 广告在移动端保持区块化并垂直堆叠 */
  .ad-slot{margin:10px 0}
}

/* 辅助：紧凑型技术资讯风格 */
.title, .block-title{letter-spacing:0.2px}
.article-header .summary{font-size:15px}
.content ol, .content ul{padding-left:1.2em}
.content pre, .content code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Noto Mono', monospace;background:#fafafa;padding:6px;border-radius:3px;overflow:auto}

/* 可访问性与打印友好 */
@media print{.toolbar,.ad-slot,.meta-edge{display:none}.container{width:100%;padding:0}}