/* ============ 博客全局样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.8;
  color: #333;
  background: #faf9f7;
}

.container { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ---------- 顶部导航 ---------- */
header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav .logo { font-size: 1.15em; font-weight: 700; color: #2d6cdf; text-decoration: none; }
.nav .links a {
  color: #555;
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.95em;
}
.nav .links a:hover { color: #2d6cdf; }

/* ---------- 首页 ---------- */
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: 1.9em; margin-bottom: 8px; }
.hero p { color: #777; font-size: 1.05em; }

.post-list { padding: 16px 0 64px; }
.post-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 16px;
  transition: box-shadow .2s, transform .2s;
}
.post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-2px); }
.post-card h2 { font-size: 1.3em; margin-bottom: 6px; }
.post-card h2 a { color: #222; text-decoration: none; }
.post-card h2 a:hover { color: #2d6cdf; }
.post-card .meta { font-size: 0.85em; color: #999; margin-bottom: 10px; }
.post-card p { color: #555; font-size: 0.97em; }

/* ---------- 文章页 ---------- */
.article { padding: 40px 0 64px; }
.article h1 { font-size: 1.9em; line-height: 1.45; margin-bottom: 10px; }
.article .meta { color: #999; font-size: 0.9em; margin-bottom: 28px; }
.article h2 { font-size: 1.35em; margin: 32px 0 12px; }
.article h3 { font-size: 1.12em; margin: 24px 0 10px; }
.article p { margin-bottom: 16px; }
.article ul, .article ol { margin: 0 0 16px 24px; }
.article li { margin-bottom: 6px; }
.article code {
  background: #f2f2f2;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.article pre {
  background: #282c34;
  color: #abb2bf;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  margin-bottom: 16px;
}
.article pre code { background: none; padding: 0; color: inherit; }
.article blockquote {
  border-left: 4px solid #2d6cdf;
  background: #f4f7fd;
  padding: 12px 16px;
  margin: 16px 0;
  color: #555;
  border-radius: 0 6px 6px 0;
}
.article table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.95em; }
.article th, .article td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.article th { background: #f5f5f5; }
.article img { max-width: 100%; border-radius: 8px; }
.back-link { display: inline-block; margin-bottom: 20px; color: #2d6cdf; text-decoration: none; font-size: 0.95em; }
.back-link:hover { text-decoration: underline; }

/* ---------- 关于页 ---------- */
.about { padding: 40px 0 64px; }
.about h1 { font-size: 1.8em; margin-bottom: 20px; }
.about p { margin-bottom: 16px; }

/* ---------- 页脚 ---------- */
footer {
  border-top: 1px solid #eee;
  padding: 24px 0;
  text-align: center;
  color: #aaa;
  font-size: 0.85em;
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.6em; }
  .article h1 { font-size: 1.6em; }
}

/* ============ 编辑器 / 管理页（/admin） ============ */
.admin-wrap { padding: 32px 0 64px; }
.admin-wrap h1 { font-size: 1.7em; margin-bottom: 20px; }
.token-bar { display: flex; gap: 10px; margin-bottom: 24px; }
.token-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95em;
}
.token-bar input:focus { outline: 2px solid #2d6cdf; border-color: transparent; }

.btn {
  background: #2d6cdf;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95em;
  cursor: pointer;
}
.btn:hover { background: #2457b3; }
.btn.ghost { background: #f0f0f0; color: #444; }
.btn.ghost:hover { background: #e2e2e2; }
.btn.danger { background: #d9534f; }
.btn.danger:hover { background: #c9302c; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.admin-list { margin: 24px 0; }
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.admin-row .info { flex: 1; min-width: 0; }
.admin-row .info .t { font-weight: 600; }
.admin-row .info .m { font-size: 0.82em; color: #999; }
.badge {
  display: inline-block;
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  background: #eee;
  color: #666;
}
.badge.published { background: #e3f1e3; color: #2e7d32; }
.badge.draft { background: #fdecea; color: #c62828; }

.editor-panel { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 24px; margin-top: 24px; }
.editor-panel h2 { font-size: 1.2em; margin-bottom: 16px; }
.editor-panel label { display: block; font-size: 0.88em; color: #666; margin: 14px 0 6px; }
.editor-panel input[type="text"], .editor-panel select, .editor-panel textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
}
.editor-panel textarea { min-height: 320px; line-height: 1.7; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
.editor-actions { display: flex; gap: 10px; margin-top: 18px; }
.preview-box {
  background: #fafaf8;
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 14px;
  min-height: 120px;
  font-size: 0.95em;
}
.preview-box h1, .preview-box h2, .preview-box h3 { margin: 14px 0 8px; }
.preview-box p { margin-bottom: 10px; }
.preview-box ul, .preview-box ol { margin: 0 0 10px 22px; }
.preview-box code { background: #f0f0f0; padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }
.preview-box pre { background: #282c34; color: #abb2bf; padding: 14px; border-radius: 8px; overflow-x: auto; }
.preview-box pre code { background: none; color: inherit; }
.hint { font-size: 0.8em; color: #999; margin-top: 4px; }

/* 文章正文 Markdown 渲染样式 */
.md-body h1, .md-body h2, .md-body h3 { margin: 28px 0 12px; }
.md-body h2 { border-left: 4px solid #8b5e34; padding-left: 12px; }
.md-body p { margin-bottom: 16px; }
.md-body ul, .md-body ol { margin: 0 0 16px 24px; }
.md-body li { margin-bottom: 6px; }
.md-body code { background: #f2f2f2; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; font-family: "SF Mono", Menlo, Consolas, monospace; }
.md-body pre { background: #282c34; color: #abb2bf; padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 0.9em; margin-bottom: 16px; }
.md-body pre code { background: none; padding: 0; color: inherit; }
.md-body blockquote { border-left: 4px solid #2d6cdf; background: #f4f7fd; padding: 12px 16px; margin: 16px 0; color: #555; border-radius: 0 6px 6px 0; }
.md-body table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.95em; }
.md-body th, .md-body td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.md-body th { background: #f5f5f5; }
.md-body a { color: #2d6cdf; }
.md-body hr { border: none; border-top: 1px solid #eee; margin: 24px 0; }