/* ==========================================================================
   PIXEL LOG — 像素抖动博客 / 全局样式
   --------------------------------------------------------------------------
   修改指南（最常用）：
   1. 改配色：:root 是夜间、:root[data-theme="day"] 是日间，各 14 色；canvas 会自动跟随。
   2. 改字体：--font-display / --font-ui / --font-body / --font-mono。
   3. 改间距/宽度：--max-w、--gap。
   4. 本文件无任何构建步骤、无预处理器，改完保存即可在浏览器看到效果。
   ========================================================================== */

/* ---------- 设计 Token：PICO-8 暗夜霓虹（14 色限定调色板） ---------- */
:root {
  --c0:  #0d0221;  /* 深靛蓝 · 页面底色 */
  --c1:  #1d2b53;  /* 暗蓝 · 卡片 / 面板底 */
  --c2:  #7e2553;  /* 深紫 · 次级面板 / 选中态 */
  --c3:  #2de2e6;  /* 青 · 主强调 / 数据 / 链接 */
  --c4:  #ffa300;  /* 橙 · CTA / 高亮 */
  --c5:  #ffec27;  /* 黄 · 标题 / 标记 */
  --c6:  #ff77a8;  /* 粉 · hot accent / hover */
  --c7:  #fff1e8;  /* 白 · 正文 / 边框 */
  --c8:  #83769c;  /* 淡紫灰 · 次要文字 */
  --c9:  #5f574f;  /* 暗灰 · 分隔线 / 暗边框 */
  --c10: #008751;  /* 深绿 · 成功 / 底纹 */
  --c11: #ff004d;  /* 红 · 危险 / 删除 */
  --c12: #00e436;  /* 亮绿 · 在线状态 */
  --c13: #29adff;  /* 蓝 · 链接 / 信息 */

  /* 语义别名 —— 想整体换主题只改上面 14 个色值即可 */
  --bg: var(--c0);
  --panel: var(--c1);
  --panel-2: var(--c2);
  --ink: var(--c7);
  --dim: var(--c8);
  --line: var(--c9);
  --accent: var(--c3);
  --cta: var(--c4);
  --hot: var(--c6);

  --font-display: "Press Start 2P", "Silkscreen", monospace;
  --font-ui: "Silkscreen", "Press Start 2P", monospace;
  --font-mono: "VT323", "IBM Plex Mono", Consolas, monospace;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;

  --max-w: 1120px;
  --gap: 24px;
  --shadow: 6px 6px 0 var(--c0);
  --shadow-sm: 4px 4px 0 var(--c0);
  --title-shadow: var(--c1);
  --scan-color: rgba(13, 2, 33, .18);
  --scan-opacity: .5;
}

/* ---------- 日间主题：同样是 14 色限定调色板，暖纸底 + 深墨字 ---------- */
:root[data-theme="day"] {
  --c0:  #fff8ee;  /* 奶油白 · 页面底 */
  --c1:  #f2e2cc;  /* 浅杏 · 卡片 / 面板 */
  --c2:  #ffd7b0;  /* 浅橙 · 图表填充 / 选中 */
  --c3:  #006f78;  /* 深青 · 主强调 / 链接 */
  --c4:  #b85c00;  /* 深橙 · CTA */
  --c5:  #8a5a00;  /* 深金棕 · 标题 / 标记 */
  --c6:  #b8255f;  /* 深玫红 · hot / hover */
  --c7:  #1d2b53;  /* 深墨蓝 · 正文 / 边框 */
  --c8:  #5f574f;  /* 中灰 · 次要文字 */
  --c9:  #c8b9a6;  /* 浅灰褐 · 分隔线 */
  --c10: #008751;  /* 深绿 */
  --c11: #d0003a;  /* 红 · 危险 */
  --c12: #1a7f3c;  /* 亮绿 · 在线 */
  --c13: #1a5fb4;  /* 蓝 · 链接 */

  --shadow: 6px 6px 0 var(--c7);
  --shadow-sm: 4px 4px 0 var(--c7);
  --title-shadow: var(--c9);
  --scan-color: rgba(93, 78, 63, .09);
  --scan-opacity: .32;
}


/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
/* 所有缩放位图 / canvas 一律硬像素，禁止插值 */
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--c3); text-decoration: none; }
a:hover { color: var(--c5); }
::selection { background: var(--c6); color: var(--c0); }
:focus-visible { outline: 3px solid var(--c5); outline-offset: 3px; }
hr { border: 0; border-top: 3px dashed var(--c9); margin: 32px 0; }

/* 扫描线：只用调色板底色的透明变体，不用新颜色 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan-color) 0 1px, transparent 1px 3px);
  opacity: var(--scan-opacity);
}

/* ---------- 版心 ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; }
.stack > * + * { margin-top: var(--gap); }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--c0);
  border-bottom: 3px solid var(--c7);
}
.nav-in {
  max-width: var(--max-w); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-avatar {
  width: 40px; height: 40px; flex: none;
  border: 3px solid var(--c7); border-radius: 50%;
  object-fit: cover; image-rendering: auto; background: var(--c0);
  box-shadow: var(--shadow-sm); display: block;
}
.brand-text { font-family: var(--font-display); font-size: 14px; color: var(--c5); line-height: 1.4; }
.brand-text small { display: block; font-family: var(--font-mono); font-size: 15px; color: var(--c8); letter-spacing: 1px; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-link {
  font-family: var(--font-ui); font-size: 12px; text-transform: uppercase;
  color: var(--c7); padding: 9px 12px; border: 3px solid transparent; white-space: nowrap;
}
.nav-link:hover {
  color: var(--c0); background: var(--c3); border-color: var(--c7);
  box-shadow: 3px 3px 0 var(--c7);
}
.nav-link.is-active {
  color: var(--c0); background: var(--c5); border-color: var(--c7);
  box-shadow: 3px 3px 0 var(--c7);
}
.nav-admin {
  font-family: var(--font-ui); font-size: 12px; text-transform: uppercase;
  background: var(--c6); color: var(--c0); border: 3px solid var(--c7);
  padding: 9px 14px; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.nav-admin:hover { background: var(--c5); color: var(--c0); }
.nav-admin:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c0); }
/* ---------- 日夜模式切换按钮 ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 11px; text-transform: uppercase;
  background: var(--c1); color: var(--c7);
  border: 3px solid var(--c7); box-shadow: 3px 3px 0 var(--c7);
  padding: 7px 11px; cursor: pointer; line-height: 1.4; white-space: nowrap;
}
.theme-toggle:hover { background: var(--c5); color: var(--c0); box-shadow: 4px 4px 0 var(--c7); }
.theme-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c0); }
.tt-dot { width: 14px; height: 14px; flex: none; border: 2px solid var(--c7); background: var(--c4); border-radius: 50%; }
:root[data-theme="night"] .tt-dot { background: var(--c5); }
.nav-toggle { display: none; }

/* ---------- 通用像素组件 ---------- */
.px-card {
  border: 3px solid var(--c7);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 24px;
}
.px-card.flat { box-shadow: none; }
.px-card.hot { border-color: var(--c4); box-shadow: 6px 6px 0 var(--c4); }
.px-card--pad-sm { padding: 16px; }

.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12px; text-transform: uppercase;
  background: var(--c4); color: var(--c0);
  border: 3px solid var(--c7); box-shadow: var(--shadow-sm);
  padding: 10px 16px; cursor: pointer; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
}
.px-btn:hover { background: var(--c5); color: var(--c0); }
.px-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c0); }
.px-btn.secondary { background: var(--c3); }
.px-btn.secondary:hover { background: var(--c7); }
.px-btn.ghost { background: transparent; color: var(--c7); }
.px-btn.ghost:hover { background: var(--c2); color: var(--c7); }
.px-btn.danger { background: var(--c11); color: var(--c7); }
.px-btn.danger:hover { background: var(--c6); color: var(--c0); }
.px-btn.sm { font-size: 10px; padding: 7px 11px; border-width: 2px; box-shadow: 3px 3px 0 var(--c0); }
.px-btn[disabled] { opacity: .45; cursor: not-allowed; }

.px-input, .px-select, .px-textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  background: var(--c0); color: var(--c7);
  border: 3px solid var(--c8); padding: 10px 12px; border-radius: 0;
  outline: none;
}
.px-input:focus, .px-select:focus, .px-textarea:focus { border-color: var(--c3); }
.px-textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.px-textarea.code { font-family: var(--font-code); font-size: 14px; min-height: 340px; }
.px-select { cursor: pointer; }
.px-label {
  display: block; font-family: var(--font-ui); font-size: 11px;
  text-transform: uppercase; color: var(--c3); margin-bottom: 8px;
}
.field { margin-bottom: 18px; }
.field-hint { font-size: 12px; color: var(--c8); margin-top: 6px; }

.px-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 15px; line-height: 1.2;
  color: var(--c0); background: var(--c3); border: 2px solid var(--c7);
  padding: 2px 7px; margin: 0 5px 5px 0;
}
.px-tag.alt { background: var(--c5); }
.px-tag.pink { background: var(--c6); }
.px-tag.mute { background: var(--c9); color: var(--c7); }

.px-kicker {
  font-family: var(--font-mono); font-size: 20px; letter-spacing: 2px;
  color: var(--c3); text-transform: uppercase;
}
.px-title {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(20px, 3vw, 30px);
  color: var(--c5); line-height: 1.4; text-transform: uppercase;
}
.px-title::before { content: "▸ "; color: var(--c6); }
.px-h2 { font-family: var(--font-ui); font-size: 18px; color: var(--c5); text-transform: uppercase; margin-bottom: 20px; }
.px-h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--c7); }

.px-bar { border: 3px solid var(--c7); height: 18px; background: var(--c0); }
.px-bar > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--c3) 0 8px, transparent 8px 10px);
}
.px-bar.alt > i { background: repeating-linear-gradient(90deg, var(--c6) 0 8px, transparent 8px 10px); }

.px-notice {
  border: 3px solid var(--c5); background: var(--c2); color: var(--c7);
  padding: 14px 18px; font-size: 14px;
}
.px-notice.danger { border-color: var(--c11); }
.px-notice.ok { border-color: var(--c12); }

/* ---------- Hero ---------- */
.hero { position: relative; border-bottom: 3px solid var(--c7); overflow: hidden; min-height: 70vh; display: flex; align-items: center; }
.hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 88px 24px 72px;
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.hero-main { flex: 1 1 440px; min-width: 0; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(26px, 6vw, 60px);
  color: var(--c6); line-height: 1.5; text-shadow: 5px 5px 0 var(--title-shadow);
  margin-bottom: 24px; word-break: break-word;
}
.hero h1 em { font-style: normal; color: var(--c5); }
.hero-sub { font-family: var(--font-mono); font-size: clamp(20px, 2.6vw, 28px); color: var(--c3); max-width: 720px; }
.hero-sub b { color: var(--c5); font-weight: normal; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 44px; max-width: 620px; }
.hero-stat { flex: 1 1 160px; }
.hero-stat .stat-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 19px; color: var(--c3); }
.hero-stat .stat-row span:last-child { color: var(--c5); }
.cursor-blink { display: inline-block; width: 12px; height: 22px; background: var(--c4); vertical-align: -3px; animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- 双栏布局 ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.sidebar { position: sticky; top: 92px; }
.side-block { margin-bottom: 26px; }
.side-block .px-h2 { font-size: 14px; }

/* 博主名片 */
.profile { text-align: center; }
.profile canvas { width: 88px; height: 88px; border: 3px solid var(--c7); background: var(--c0); display: block; margin: 0 auto 16px; }
.profile-name { font-family: var(--font-ui); font-size: 16px; color: var(--c5); }
.profile-bio { font-size: 13px; color: var(--c8); margin: 10px 0 16px; }
.profile-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* 分类统计（dither 柱状图） */
canvas.chart { width: 100%; border: 3px solid var(--c7); background: var(--c0); display: block; }

/* ---------- 文章列表 ---------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.toolbar .search { flex: 1 1 220px; min-width: 180px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  font-family: var(--font-mono); font-size: 18px; line-height: 1.2;
  padding: 6px 12px; background: transparent; color: var(--c8);
  border: 3px solid var(--c9); cursor: pointer;
}
.tab:hover { color: var(--c7); border-color: var(--c7); }
.tab.is-active { background: var(--c4); color: var(--c0); border-color: var(--c7); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; }
.post-card { display: flex; flex-direction: column; border: 3px solid var(--c7); background: var(--panel); box-shadow: var(--shadow); }
.post-card:hover { border-color: var(--c4); box-shadow: 6px 6px 0 var(--c4); }
.post-cover { width: 100%; height: 120px; display: block; border-bottom: 3px solid var(--c7); background: var(--c0); }
img.post-cover { object-fit: cover; image-rendering: pixelated; }

/* 文章详情页顶部封面 */
.article-cover { width: 100%; height: 260px; display: block; margin-top: 24px;
  border: 3px solid var(--c7); box-shadow: var(--shadow-sm); background: var(--c0);
  object-fit: cover; image-rendering: pixelated; }
.post-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-family: var(--font-mono); font-size: 17px; color: var(--c8); letter-spacing: 1px; display: flex; gap: 12px; flex-wrap: wrap; }
.post-meta .cat { color: var(--c3); }
.post-card h3 { font-size: 19px; line-height: 1.5; margin: 10px 0; color: var(--c7); }
.post-card h3 a { color: var(--c7); }
.post-card h3 a:hover { color: var(--c5); }
.post-summary { font-size: 14px; color: var(--c8); flex: 1; margin-bottom: 14px; line-height: 1.7; }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.read-more { font-family: var(--font-ui); font-size: 11px; color: var(--c4); text-transform: uppercase; }
.pin-flag { font-family: var(--font-mono); font-size: 16px; color: var(--c0); background: var(--c5); padding: 1px 7px; }

.empty {
  border: 3px dashed var(--c9); padding: 48px 24px; text-align: center; color: var(--c8);
  font-family: var(--font-mono); font-size: 22px;
}

/* ---------- 文章详情 ---------- */
.article-head { padding: 48px 0 28px; border-bottom: 3px dashed var(--c9); margin-bottom: 36px; }
.article-head h1 { font-family: var(--font-ui); font-size: clamp(24px, 4vw, 40px); color: var(--c5); line-height: 1.45; margin: 14px 0 18px; }
.crumb { font-family: var(--font-mono); font-size: 18px; color: var(--c8); }
.crumb a { color: var(--c3); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; align-items: start; }
.article-toc { position: sticky; top: 92px; font-size: 13px; }
.article-toc a { display: block; padding: 5px 0; color: var(--c8); border-bottom: 2px dotted var(--c9); }
.article-toc a:hover { color: var(--c3); }

/* Markdown 正文 */
.md { font-size: 16px; line-height: 1.9; color: var(--c7); overflow-wrap: break-word; }
.md > * + * { margin-top: 18px; }
.md h1, .md h2, .md h3, .md h4 {
  font-family: var(--font-ui); color: var(--c5); line-height: 1.5; margin-top: 38px;
  scroll-margin-top: 96px;
}
.md h1 { font-size: 24px; } .md h2 { font-size: 20px; } .md h3 { font-size: 16px; } .md h4 { font-size: 14px; }
.md h2::before { content: "▸ "; color: var(--c6); }
.md p { margin: 0; }
.md strong { color: var(--c5); font-weight: 700; }
.md em { color: var(--c3); }
.md a { color: var(--c3); border-bottom: 2px dotted var(--c3); }
.md a:hover { color: var(--c5); border-color: var(--c5); }
.md ul, .md ol { padding-left: 26px; }
.md li + li { margin-top: 6px; }
.md li::marker { color: var(--c4); }
.md blockquote {
  border-left: 6px solid var(--c4); background: var(--c1); padding: 14px 18px; color: var(--c3);
}
.md code {
  font-family: var(--font-code); font-size: .9em; background: var(--c0);
  color: var(--c5); border: 2px solid var(--c9); padding: 1px 5px;
}
.md pre {
  background: var(--c0); border: 3px solid var(--c8); padding: 16px; overflow-x: auto;
  font-family: var(--font-code); font-size: 13px; line-height: 1.7; color: var(--c3);
}
.md pre code { background: none; border: 0; padding: 0; color: inherit; }
.md img { max-width: 100%; height: auto; border: 3px solid var(--c7); display: block; margin: 16px 0; box-shadow: var(--shadow-sm); cursor: zoom-in; image-rendering: auto; }

/* 带图注的图片 */
.md-fig { margin: 16px 0; }
.md-fig img { margin: 0; }
.md-fig figcaption { font-family: var(--font-mono); font-size: 16px; color: var(--c8); text-align: center; margin-top: 8px; letter-spacing: 1px; }

/* 正文视频嵌入：16:9 + 像素边框 */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 16px 0;
  border: 3px solid var(--c7); box-shadow: var(--shadow-sm); background: var(--c1); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* 图片灯箱 */
.lb-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(13, 2, 33, .9);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lb-overlay img { max-width: 92%; max-height: 86vh; border: 3px solid var(--c0);
  box-shadow: var(--shadow); image-rendering: pixelated; cursor: default; }
.lb-close { position: absolute; top: 16px; right: 16px; font-family: var(--font-ui); font-size: 12px;
  background: var(--c6); color: var(--c0); border: 3px solid var(--c0); box-shadow: 3px 3px 0 var(--c0);
  padding: 6px 10px; cursor: pointer; }
.lb-close:hover { background: var(--c11); }
.lb-close:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c0); }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { border: 2px solid var(--c8); padding: 8px 10px; text-align: left; }
.md th { background: var(--c2); color: var(--c7); font-family: var(--font-ui); font-size: 11px; }
.md hr { border: 0; border-top: 3px dashed var(--c9); margin: 32px 0; }

.article-nav { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 48px; padding-top: 28px; border-top: 3px dashed var(--c9); }
.article-nav a { flex: 1 1 220px; border: 3px solid var(--c9); padding: 14px; font-size: 13px; color: var(--c8); }
.article-nav a:hover { border-color: var(--c3); color: var(--c7); }
.article-nav b { display: block; font-family: var(--font-mono); font-size: 16px; color: var(--c3); margin-bottom: 4px; }

/* ---------- 工具分享页 ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.tool-card { display: flex; flex-direction: column; border: 3px solid var(--c7); background: var(--panel); box-shadow: var(--shadow); padding: 20px; }
.tool-card:hover { border-color: var(--c3); box-shadow: 6px 6px 0 var(--c3); }
.tool-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tool-icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border: 3px solid var(--c7); background: var(--c4); color: var(--c0);
  font-family: var(--font-display); font-size: 18px; overflow: hidden;
}
.tool-icon img {
  width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto;
}
.tool-card h3 { font-size: 17px; color: var(--c7); line-height: 1.5; }
.tool-card .tool-cat { font-family: var(--font-mono); font-size: 16px; color: var(--c3); }
.tool-desc { font-size: 14px; color: var(--c8); flex: 1; margin-bottom: 14px; line-height: 1.7; }
.tool-info { border: 2px dashed var(--c9); padding: 10px 12px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 16px; color: var(--c8); }
.tool-info .code-val { color: var(--c5); user-select: all; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-actions .px-btn { flex: 1 1 auto; }

/* ---------- 后台 ---------- */
.admin-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-menu { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 8px; }
.admin-menu button {
  text-align: left; font-family: var(--font-ui); font-size: 12px; text-transform: uppercase;
  background: transparent; color: var(--c8); border: 3px solid var(--c9);
  padding: 12px 14px; cursor: pointer; width: 100%;
}
.admin-menu button:hover { color: var(--c7); border-color: var(--c7); }
.admin-menu button.is-active { background: var(--c2); color: var(--c7); border-color: var(--c7); }
.admin-pane { display: none; }
.admin-pane.is-active { display: block; }
.admin-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

/* 文章正文：源码 + 实时预览 双栏，预览里直接显示图片 */
/* 正文编辑区：所见即所得（默认直接显示渲染结果），可切回源码
   注意：.post-body 同时被前台文章详情页复用（style.css#304 给了 padding/ flex），
   这里用 #post-body 限定后台编辑器，去掉那 18px 内缩并补齐上下间距，使正文区与
   上方表单字段左右对齐、上下间距一致。 */
#post-body { display: block; padding: 0; margin-bottom: 16px; }
.post-body-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.post-body-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.post-source { width: 100%; min-height: 360px; font-family: var(--font-mono); }
.post-preview { border: 3px solid var(--c8); background: var(--c0); padding: 12px 14px; min-height: 360px; max-height: min(76vh, 720px); overflow: auto; }
.post-body.editing .post-preview { display: none; }
.post-body.previewing .post-source { display: none; }
.item-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 6px; }
.item-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--c7);
  background: var(--c0); border: 3px solid var(--c9); padding: 10px 12px;
}
.item-row:hover { border-color: var(--c7); }
.item-row.is-active { background: var(--c2); border-color: var(--c7); }
.item-row .row-meta { display: block; font-family: var(--font-mono); font-size: 15px; color: var(--c8); margin-top: 3px; }
.item-row .row-meta .draft { color: var(--c11); }
.item-row .row-meta .pinned { color: var(--c5); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 3px dashed var(--c9); }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c7); cursor: pointer; }
.checkbox-row input { width: 20px; height: 20px; accent-color: var(--c4); cursor: pointer; }

/* 分类管理行 */
.cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cat-row .px-input { flex: 1 1 120px; width: auto; min-width: 100px; }
.cat-row .count { font-family: var(--font-mono); font-size: 17px; color: var(--c8); white-space: nowrap; min-width: 56px; }

/* 后台正文已插图缩略图条 */
.img-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.img-thumb { position: relative; width: 72px; height: 54px; border: 3px solid var(--c7);
  background: var(--c0); cursor: pointer; flex: none; overflow: visible; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.img-thumb:hover { border-color: var(--c4); }
.img-del { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; padding: 0;
  font-family: var(--font-ui); font-size: 10px; line-height: 1; cursor: pointer;
  background: var(--c11); color: var(--c0); border: 2px solid var(--c7); box-shadow: 2px 2px 0 var(--c7); }
.img-del:hover { background: var(--c6); }

.mode-badge {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 18px;
  border: 3px solid var(--c7); padding: 6px 12px; background: var(--c1); color: var(--c5);
}
.mode-badge .dot { width: 12px; height: 12px; background: var(--c12); }
.mode-badge.local .dot { background: var(--c4); }

/* 登录门 */
.gate { max-width: 460px; margin: 80px auto; }
.gate h1 { font-family: var(--font-display); font-size: 20px; color: var(--c5); line-height: 1.6; margin-bottom: 18px; }

/* Toast */
#toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 10000;
  border: 3px solid var(--c7); background: var(--c4); color: var(--c0);
  font-family: var(--font-ui); font-size: 12px; padding: 14px 18px;
  box-shadow: var(--shadow-sm); max-width: 340px; display: none;
}
#toast.show { display: block; animation: toast-in .18s steps(3) both; }
#toast.err { background: var(--c11); color: var(--c7); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- 页脚 ---------- */
.footer { border-top: 3px solid var(--c7); margin-top: 72px; padding: 36px 0 48px; text-align: center; }
.footer .foot-logo { font-family: var(--font-display); font-size: 13px; color: var(--c6); margin-bottom: 12px; }
.footer p { font-family: var(--font-mono); font-size: 17px; color: var(--c8); letter-spacing: 1px; }
.footer .foot-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .side-block { margin-bottom: 0; }
  /* 正文编辑区在窄屏保持单栏（源码/预览互斥显示） */
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { display: none; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-menu { position: static; flex-direction: row; flex-wrap: wrap; }
  .admin-menu button { width: auto; flex: 1 1 auto; }
  /* 窄屏：文章列表移到编辑器上方，编辑器占满整行；卡片去掉左右内边距，与上方列表满宽对齐 */
  .admin-split { grid-template-columns: 1fr; }
  #pane-posts .px-card { padding-left: 0; padding-right: 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .nav-in { padding: 12px 16px; gap: 12px; }
  .nav-links { order: 3; width: 100%; display: none; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; order: 2; }
  .brand-text { font-size: 11px; }
  .hero-in { padding: 60px 16px 52px; }
  .section { padding: 40px 0; }
  .sidebar { grid-template-columns: 1fr; }
  .item-list { max-height: 260px; }
  .form-grid { grid-template-columns: 1fr; }
  .post-grid, .tool-grid { grid-template-columns: 1fr; }
  .px-card { padding: 18px; }
}

/* ---------- 无障碍：减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cursor-blink { opacity: 1; }
}