:root{--bg:#f7f8fb;--card:#ffffff;--text:#0f172a;--muted:#64748b;--line:#e5e7eb;--shadow:0 10px 24px rgba(15,23,42,.08);--radius:18px;--brand:#0f172a}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji;color:var(--text);background:var(--bg)}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:18px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,248,251,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-weight:1000}
.title{font-size:18px;font-weight:1000}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.search{flex:1;min-width:240px;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 12px;outline:none;background:#fff}
.select{height:40px;border:1px solid var(--line);border-radius:12px;padding:0 10px;background:#fff;outline:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:8px;padding-bottom:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:360px}
.cover{height:190px;background:linear-gradient(135deg,#e2e8f0,#f1f5f9)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px;flex-wrap:wrap}
.badge{font-size:12px;color:#0f172a;background:#f1f5f9;border:1px solid #e2e8f0;padding:3px 8px;border-radius:999px;font-weight:1000}
.badge.video{background:#ecfeff;border-color:#a5f3fc}
.badge.article{background:#eef2ff;border-color:#c7d2fe}
.badge.pin{background:#fff7ed;border-color:#fed7aa}
.badge.rec{background:#ecfccb;border-color:#bef264}
.h1{font-size:18px;font-weight:1000;line-height:1.25;margin:0}
.p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}
.more{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:#0b2a6f;font-weight:1000;padding-top:8px}
.hr{height:1px;background:var(--line);margin:16px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:inherit;font-weight:1000;background:#fff;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.danger{border-color:#fecaca;background:#fff1f2}
.emptyBox{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.footer{border-top:1px solid var(--line);margin-top:16px;background:#fff}
.footerInner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.postWrap{max-width:980px}
.postTitle{font-size:28px;font-weight:1100;line-height:1.2;margin:0}
.postCover{width:100%;max-height:380px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.player{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.player iframe{width:100%;height:100%;border:0}
.content{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-top:14px}
/* 正文图片：居中 + 限制最大宽度 + 避免超高撑爆页面 */
/* 正文图片：居中 + 限制宽度 + 限制高度（避免太大） */
/* 正文图片：覆盖 ToastUI 默认样式（它可能给 img 强制 width:100%） */
.content .toastui-editor-contents img,
.content img{
  display:block;
  margin:14px auto;
  width:auto !important;        /* 关键：干掉 width:100% */
  max-width:680px !important;   /* 你想更小/更大就改这里 */
  height:auto !important;
  max-height:60vh !important;
  object-fit:contain;
  border-radius:14px;
  border:1px solid var(--line);
}
/* 正文整体阅读宽度：别让内容铺满整屏 */
.postWrap{max-width:980px;margin:0 auto;padding:0 16px;} /* 如果已有就别重复 */

/* 正文里常见块（iframe/表格/引用/代码块）统一限宽并居中 */
.content iframe,
.content video,
.content table,
.content blockquote,
.content pre,
.content .player,
.content .msg,
.content .card,
.content .box{
  max-width:760px;
  width:100%;
  margin:14px auto;
}

/* iframe 播放器保持比例 */
.content iframe{
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:14px;
}


.content pre{overflow:auto;background:#0b1020;color:#e5e7eb;padding:14px;border-radius:14px}
.content code{background:transparent;border:0;padding:0;color:inherit}
.toc{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px;margin-top:14px}
.toc a{display:block;text-decoration:none;color:var(--muted);padding:6px 8px;border-radius:10px}
.toc a:hover{background:#f1f5f9;color:var(--text)}
.relGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.relItem{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;text-decoration:none;display:block}
.relItem:hover{box-shadow:var(--shadow)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.relGrid{grid-template-columns:1fr}}
@media (max-width:620px){.grid{grid-template-columns:1fr}.tools{flex-direction:column;align-items:stretch}.search{min-width:auto}}
@media (max-width: 900px){
  .content img{
    max-width:100%;
    max-height:50vh;
  }
}
/* ========= 教程正文内容样式优化 ========= */

/* 默认：文字左对齐 */
.content p, .content li, .content blockquote, .content pre, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  text-align: left;
}

/* 图片居中显示 */
.content img {
  display: block;
  margin: 16px auto;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: contain;
}

/* 引用块更美观 */
.content blockquote {
  border-left: 4px solid var(--brand);
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  color: #334155;
}

/* 视频 iframe 居中且响应式 */
.content iframe {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  border-radius: 12px;
}