:root{
  --m210m-border:#e5e7eb;
  --m210m-muted:#6b7280;
  --m210m-card:#ffffff;
  --m210m-bg:#f6f8fb;
  --m210m-shadow:0 8px 24px rgba(15,23,42,.06);
  --m210m-blue:#2563eb;
}

/* 基础 */
*{box-sizing:border-box}
html,body{margin:0;background:var(--m210m-bg);color:#111827;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial}
a{text-decoration:none;color:#0f172a}
img{max-width:100%;display:block}

.m210m-wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===== 布局：正文 + 目录 ===== */
.m210m-article-layout{
  display:grid;
  grid-template-columns:1fr 280px;  /* 左边自适应，右边固定 280 */
  column-gap:22px;
  justify-content:stretch;
  align-items:start;
  margin:20px 0;
}

/* 目录贴右 */
.m210m-article-aside{justify-self:end;}
.m210m-toc{
  width:280px;
  max-width:100%;
  position:sticky;
  top:16px;
  background:#fff;
  border:1px solid var(--m210m-border);
  border-radius:16px;
  box-shadow:var(--m210m-shadow);
  padding:12px;
}
.m210m-toc-title{font-weight:700;margin-bottom:8px}
.m210m-toc-list a{
  display:block;
  padding:7px 10px;
  border-radius:8px;
  color:#334155;
  margin:2px 0;
  font-size:14px;
}
.m210m-toc-list a.active{background:#eef2ff;color:#1e3a8a}
.m210m-toc-list a.lvl3{padding-left:18px;opacity:.85}

/* 小屏单列 */
@media (max-width:1100px){
  .m210m-article-layout{grid-template-columns:1fr}
  .m210m-article-aside{justify-self:stretch;margin-top:14px}
  .m210m-toc{width:auto;position:static}
}

/* ===== 正文卡片 ===== */
.m210m-post{
  background:var(--m210m-card);
  border:1px solid var(--m210m-border);
  border-radius:18px;
  box-shadow:var(--m210m-shadow);
  width:100%;
  padding-top:20px;
  padding-bottom:20px;
}

/* 统一左右 16px gutter */
.m210m-gutter{padding-left:16px;padding-right:16px}

/* 面包屑 */
.m210m-post-breadcrumb{color:#6b7280;font-size:13px;margin-bottom:6px}
.m210m-sep{margin:0 6px;color:#cbd5e1}

/* 标题 */
.m210m-post-title{margin:6px 0 10px;font-size:28px;line-height:1.25;font-weight:800}

/* 元信息 */
.m210m-post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  color:#6b7280;font-size:14px;margin-bottom:12px
}
.m210m-post-meta .m210m-dot{margin:0 2px;color:#cbd5e1}
.m210m-post-tags{margin-left:auto;display:flex;gap:8px}
.m210m-tag{
  border:1px solid var(--m210m-border);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  background:#fff;
  color:#334155;
}

/* 头图 */
.m210m-post-cover{margin:12px 0 18px}
.m210m-post-cover img{width:100%;border-radius:14px;border:1px solid #e9edf3}
.m210m-post-cover figcaption{color:#94a3b8;font-size:12px;margin-top:6px}

/* 正文 */
.m210m-post-body{font-size:16px;line-height:1.9}
.m210m-post-body p{margin:0 0 16px}
.m210m-post-body h2{margin:26px 0 12px;font-size:22px;line-height:1.4}
.m210m-post-body h3{margin:20px 0 10px;font-size:18px;line-height:1.4}
.m210m-post-body ul,.m210m-post-body ol{margin:0 0 16px 24px}
.m210m-post-body blockquote{
  margin:14px 0;
  padding:10px 14px;
  border-left:4px solid #e5e7eb;
  background:#f8fafc;
  color:#334155;
  border-radius:8px;
}
.m210m-post-body pre{
  margin:14px 0;
  background:#0b1220;
  color:#e5edff;
  border-radius:12px;
  padding:14px;
  overflow:auto;
}
.m210m-post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace
}
.m210m-post-body table{width:100%;border-collapse:collapse;margin:14px 0;border:1px solid #e5e7eb}
.m210m-post-body th,.m210m-post-body td{padding:10px;border:1px solid #e5e7eb}
.m210m-post-body img{border-radius:12px;border:1px solid #e9edf3;cursor:zoom-in}

/* 评论区（如有启用） */
.m210m-comments{margin-top:26px}
.m210m-comments-title{margin:0 0 10px;font-size:20px}
.m210m-comment-list{display:flex;flex-direction:column;gap:12px}
.m210m-comment{
  background:#fff;
  border:1px solid var(--m210m-border);
  border-radius:12px;
  padding:12px
}
.m210m-comment-head{
  display:flex;justify-content:space-between;align-items:center;
  color:#64748b;font-size:13px;margin-bottom:6px
}
.m210m-comment-body{font-size:15px;color:#111827;line-height:1.7}
.m210m-comment-actions{display:flex;gap:8px;margin-top:8px}
.m210m-replies{
  margin-top:10px;margin-left:16px;
  border-left:2px dashed #e5e7eb;
  padding-left:12px;
  display:flex;flex-direction:column;gap:10px
}
.m210m-comment-form{margin-top:16px}
.m210m-comment-form textarea{
  width:100%;min-height:92px;
  border:1px solid #d1d5db;border-radius:10px;
  padding:10px;resize:vertical;font:inherit
}
.m210m-comment-actions{display:flex;gap:10px;margin-top:8px}
.m210m-pagination{
  display:flex;gap:8px;align-items:center;justify-content:center;margin-top:10px
}
.m210m-page-btn,.m210m-page-num{
  min-width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--m210m-border);background:#fff;
  border-radius:10px;cursor:pointer;transition:all .18s
}
.m210m-page-btn[disabled]{opacity:.45;cursor:not-allowed}
.m210m-page-num[data-active="1"]{background:#2563eb;color:#fff;border-color:#2563eb}

/* 图片预览（可选） */
.m210m-lightbox{position:fixed;inset:0;display:grid;place-items:center;z-index:60}
.m210m-lightbox[hidden]{display:none}
.m210m-lightbox-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.72)}
.m210m-lightbox-img{max-width:92vw;max-height:90vh;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.35)}
.m210m-lightbox-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:999px;border:none;
  background:#fff;cursor:pointer;font-size:20px
}
/* 目录跟随滚动（纯 CSS） */
.m210m-article-layout{ overflow: visible; }      /* 祖先不能裁剪滚动 */
.m210m-article-aside{ align-self: start; }       /* 让 aside 从网格顶部开始 */
.m210m-toc{
  position: sticky;   /* 关键：粘性定位 */
  top: 16px;          /* 距离视口顶部 16px 时开始“吸顶” */
  will-change: top;   /* 提示浏览器优化 */
}

/* 确保任意祖先不阻断 sticky（若你某处写了 overflow/transform 会导致失效） */
.m210m-wrap,
.m210m-card,
.m210m-article,
.m210m-article-aside{ overflow: visible; }

/* 统一整页背景为浅灰 */
html, body { background: var(--m210m-bg) !important; }

/* CeoMax 外层常见容器，强制透明 / 继承 */
.header.ceo-background-default,
.ceo-topnav,
.ceo-container,
.ceo-main,
.ceo-content,
#page, #wrap, .site, .content-area,
.footer-widgets, .footer,
.ceo-background-default {
  background: transparent !important;
}

/* 你的卡片本身继续白色，不变 */
.m210m-card { background: var(--m210m-card); }

body, .m210m-wrap{
  background: var !important;
  background-image: none !important;
}

/* 目录允许内部滚动，避免太高顶到页脚 */
.m210m-toc{ max-height: calc(100vh - 32px); overflow:auto; }

/* 避免祖先 overflow/transform 影响定位（常见于主题容器） */
.m210m-wrap, .m210m-article-layout, .m210m-article-aside, .m210m-card,
.ceo-main, .ceo-container, .ceo-content { overflow: visible !important; transform: none !important; }
