/* ============================================================
   post.css — 帖子详情页（增强版 v3）
   CSS 雨线 + 水痕 + 网格背景 + 纸张纹理 + 评论卡片装饰
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  --post-width: 700px;
  --post-text: #2c2c2c;
  --post-text-light: #555;
  --post-muted: #999;
  --post-accent: #2d5a3d;
  --post-gold: #c9b896;
  --post-border: #e8e8e2;
  --post-bg: #fafaf6;
}

/* ============================================================
   淡绿波模拟噪波 Canvas（全页面 fixed 背景）
   ============================================================ */
#post-wave-canvas {
  display: block;
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   背景系统（3 层叠加）
   层1: 雨线  |  层2: 水痕+网格(::after)  |  层3: 纸张(::before)
   ============================================================ */
.post-rain-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --rain: rgba(45,90,61,0.12);
  --rain-dot: rgba(45,90,61,0.06);
  background-color: #fafaf6;
  background-image:
    /* 雨线层 - 12组竖线 + 散点 */
    radial-gradient(3px 90px at 0px 200px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 200px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 100px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 240px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 240px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 120px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 160px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 160px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 80px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 280px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 280px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 140px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 180px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 180px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 90px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 130px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 130px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 65px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 260px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 260px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 130px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 210px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 210px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 105px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 300px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 300px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 150px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 150px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 150px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 75px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 220px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 220px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 110px, var(--rain-dot) 100%, transparent 150%),
    radial-gradient(3px 90px at 0px 190px, var(--rain), transparent),
    radial-gradient(3px 90px at 300px 190px, var(--rain), transparent),
    radial-gradient(2px 2px at 150px 95px, var(--rain-dot) 100%, transparent 150%);
  background-size:
    300px 200px, 300px 200px, 300px 200px,
    300px 240px, 300px 240px, 300px 240px,
    300px 160px, 300px 160px, 300px 160px,
    300px 280px, 300px 280px, 300px 280px,
    300px 180px, 300px 180px, 300px 180px,
    300px 130px, 300px 130px, 300px 130px,
    300px 260px, 300px 260px, 300px 260px,
    300px 210px, 300px 210px, 300px 210px,
    300px 300px, 300px 300px, 300px 300px,
    300px 150px, 300px 150px, 300px 150px,
    300px 220px, 300px 220px, 300px 220px,
    300px 190px, 300px 190px, 300px 190px;
  animation: rainFall 180s linear infinite;
}

/* 层2: 水痕色块 + 网格 (::after) */
.post-rain-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 网格 */
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(45,90,61,0.025) 79px, rgba(45,90,61,0.025) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(45,90,61,0.025) 79px, rgba(45,90,61,0.025) 80px),
    /* 水痕斑块 */
    radial-gradient(ellipse 400px 300px at 15% 85%, rgba(45,90,61,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 350px 250px at 80% 10%, rgba(201,184,150,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 500px 350px at 55% 50%, rgba(45,90,61,0.025) 0%, transparent 60%),
    radial-gradient(ellipse 300px 200px at 25% 30%, rgba(201,184,150,0.035) 0%, transparent 55%),
    radial-gradient(ellipse 250px 180px at 70% 75%, rgba(45,90,61,0.03) 0%, transparent 50%);
}

/* 层3: 纸张纹理噪点 (::before 在正文区的包装上) */

@keyframes rainFall {
  0% { background-position:
    0px 200px,3px 200px,151.5px 300px,
    25px 24px,28px 24px,176.5px 144px,
    50px 16px,53px 16px,201.5px 96px,
    75px 224px,78px 224px,226.5px 364px,
    100px 19px,103px 19px,251.5px 109px,
    125px 120px,128px 120px,276.5px 185px,
    150px 31px,153px 31px,301.5px 161px,
    175px 235px,178px 235px,326.5px 370px,
    200px 121px,203px 121px,351.5px 226px,
    225px 224px,228px 224px,376.5px 374px,
    250px 26px,253px 26px,401.5px 101px,
    275px 75px,278px 75px,426.5px 170px;
  }
  to { background-position:
    0px 6200px,3px 6200px,151.5px 6300px,
    25px 12224px,28px 12224px,176.5px 12344px,
    50px 5216px,53px 5216px,201.5px 5296px,
    75px 16224px,78px 16224px,226.5px 16364px,
    100px 4819px,103px 4819px,251.5px 4909px,
    125px 7920px,128px 7920px,276.5px 7985px,
    150px 9031px,153px 9031px,301.5px 9161px,
    175px 12235px,178px 12235px,326.5px 12370px,
    200px 13521px,203px 13521px,351.5px 13626px,
    225px 18024px,228px 18024px,376.5px 18174px,
    250px 4626px,253px 4626px,401.5px 4701px,
    275px 5775px,278px 5775px,426.5px 5870px;
  }
}

/* ============================================================
   阅读进度条
   ============================================================ */
.reading-progress {
  position: fixed; top: 0; left: 0;
  height: 2px;
  background: var(--post-accent);
  z-index: 9999; width: 0%;
  pointer-events: none;
}

/* ============================================================
   文章页面主体
   ============================================================ */
.post-page {
  position: relative; z-index: 1;
  padding: 48px 2rem 80px;
  max-width: var(--post-width);
  margin: 0 auto;
}

/* 返回 */
.post-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--post-muted);
  text-decoration: none; margin-bottom: 40px;
  transition: color 0.3s; letter-spacing: 0.04em;
}
.post-back:hover { color: var(--post-accent); }

/* ---- 标题 ---- */
.post-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700; line-height: 1.25;
  color: #1a1a1a; letter-spacing: -0.025em;
  margin: 0 0 32px;
}

/* ---- 作者行 ---- */
.post-author-row {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 28px; margin-bottom: 36px;
  border-bottom: 1px solid #e8e8e2;
}
.post-author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  transition: transform 0.4s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.post-author-avatar:hover { transform: scale(1.06); }
.post-author-info { flex: 1; min-width: 0; }
.post-author-name {
  font-size: 0.93rem; font-weight: 600; color: #1a1a1a;
  text-decoration: none; display: block; line-height: 1.2;
  transition: color 0.3s;
}
.post-author-name:hover { color: var(--post-accent); }
.post-publish-time {
  font-size: 0.75rem; color: var(--post-muted);
  margin-top: 2px; display: flex; align-items: center; gap: 4px;
}

/* ---- 作者行操作按钮 ---- */
.post-author-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.post-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; font-size: 0.8rem; font-weight: 500;
  border-radius: 4px; border: 1px solid #e0e0da;
  background: rgba(255,255,255,0.55); color: var(--post-text-light);
  cursor: pointer; text-decoration: none;
  transition: all 0.3s ease;
}
.post-action:hover { border-color: #bbb; color: #1a1a1a; background: rgba(255,255,255,0.9); }
.post-action.liked  { color: #c0392b; border-color: #f0c0c0; background: rgba(254,245,245,0.9); }
.post-action.collected { color: #b8860b; border-color: #ead5a0; background: rgba(255,253,245,0.9); }
.post-action .count { font-size: 0.72rem; font-weight: 600; }

/* ============================================================
   正文排版
   ============================================================ */
.post-body {
  font-family: 'Noto Serif SC', 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', serif;
  font-size: 1.125rem; font-weight: 400; line-height: 1.85;
  color: var(--post-text); word-break: break-word;
}
.post-body p { margin: 0 0 1.6em; }

/* H2: 上方36px绿色横线 + 左侧金色小菱形 */
.post-body h2 {
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.4rem; font-weight: 700; color: #1a1a1a;
  margin: 52px 0 18px; line-height: 1.3;
  padding-top: 16px; position: relative;
}
.post-body h2::before {
  content: '◆ —';
  position: absolute; top: 0; left: 0;
  font-size: 8px; letter-spacing: 0;
  color: var(--post-gold); opacity: 0.6;
}
.post-body h2::after {
  content: '';
  position: absolute; top: 0; left: 24px;
  width: 32px; height: 2px; background: var(--post-accent); opacity: 0.45;
}

/* H3: 双竖线 */
.post-body h3 {
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.18rem; font-weight: 600; color: #1a1a1a;
  margin: 38px 0 12px; line-height: 1.35;
  padding-left: 14px;
  border-left: 2px solid var(--post-accent);
  box-shadow: -7px 0 0 -1px var(--post-gold);
}
.post-body h4 {
  font-size: 1.03rem; font-weight: 600; color: #333;
  margin: 28px 0 8px;
}

/* 引用块：绿色竖线 + 装饰引号 + 斜线纹理 */
.post-body blockquote {
  margin: 2em -8px; padding: 26px 32px;
  border-left: 3px solid var(--post-accent);
  background:
    repeating-linear-gradient(-38deg, transparent, transparent 6px, rgba(45,90,61,0.013) 6px, rgba(45,90,61,0.013) 7px),
    rgba(249,249,246,0.8);
  color: var(--post-text-light); font-style: italic;
  position: relative; border-radius: 0 4px 4px 0;
}
.post-body blockquote::before {
  content: '"'; position: absolute; top: -10px; left: 12px;
  font-size: 4rem; color: rgba(45,90,61,0.07);
  font-family: Georgia, serif; line-height: 1; pointer-events: none;
}
.post-body blockquote p { margin: 0; }

/* 代码块 */
.post-body pre {
  margin: 1.6em 0; padding: 26px 28px 22px;
  background: #f4f4f0; border-radius: 4px; overflow-x: auto;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 0.85rem; line-height: 1.6; color: #333;
  border: 1px solid #eaeae5; position: relative;
}
.post-body code {
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 0.9em; background: rgba(240,240,235,0.7);
  padding: 0.15em 0.45em; border-radius: 3px; color: #555;
}
.post-body pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }

.post-body img {
  display: block; max-width: 100%; height: auto;
  margin: 2.2em auto; border-radius: 2px;
}
.post-body ul, .post-body ol { margin: 1.4em 0; padding-left: 1.6em; }
.post-body li { margin-bottom: 0.35em; line-height: 1.7; }
.post-body li::marker { color: var(--post-accent); }
.post-body a {
  color: var(--post-accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.post-body a:hover { color: #1a1a1a; }

/* 分隔线：三级装饰 */
.post-body hr {
  border: none; margin: 2.6em 0; position: relative;
  text-align: center; color: #ccc;
}
.post-body hr::before {
  content: '— ◆ —';
  font-size: 0.7rem; letter-spacing: 4px;
  color: rgba(201,184,150,0.7);
}

.post-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9rem; }
.post-body th, .post-body td {
  border: 1px solid #e8e8e2; padding: 10px 16px; text-align: left;
}
.post-body th { background: rgba(249,249,246,0.7); font-weight: 600; }

/* ============================================================
   底部操作栏 - "操作岛" 药丸
   ============================================================ */
.post-actions-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  padding: 6px; margin: 44px auto 28px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  border: 1px solid #e8e4dd;
  border-radius: 28px;
  max-width: 360px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.post-actions-bar .post-action {
  padding: 9px 22px; font-size: 0.85rem;
  border: none; border-radius: 24px;
  background: transparent;
  position: relative;
}
.post-actions-bar .post-action:hover {
  background: rgba(45,90,61,0.06);
}
/* 按钮间分隔竖线 */
.post-actions-bar .post-action + .post-action::before {
  content: ''; position: absolute; left: 0; top: 25%; bottom: 25%;
  width: 1px; background: #e8e4dd;
}

/* ============================================================
   项目附件卡片
   ============================================================ */
.post-project {
  margin: 36px 0; padding: 22px 28px;
  background:
    radial-gradient(circle 140px at 95% 10%, rgba(201,184,150,0.06) 0%, transparent 70%),
    rgba(249,249,246,0.7);
  border-radius: 6px;
  border: 1px solid #e8e4dd;
  border-left: 3px solid var(--post-accent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.post-project-info {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 500; color: #1a1a1a;
}
.post-project-info i { color: var(--post-accent); font-size: 1.1rem; }
.post-project-links { display: flex; gap: 10px; }

/* 项目按钮：默认淡绿半透明，hover 反色为深绿底白字 */
.post-project-links .btn {
  font-size: 0.8rem; padding: 7px 18px; border-radius: 4px;
  background: rgba(45,90,61,0.08);
  border: 1px solid rgba(45,90,61,0.18);
  color: var(--post-accent);
  font-weight: 500;
  transition: all 0.3s ease;
}
.post-project-links .btn:hover {
  background: var(--post-accent);
  border-color: var(--post-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   评论区
   ============================================================ */
.post-comments {
  position: relative; z-index: 1; margin-top: 60px;
}

/* 评论标题 */
.comments-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e2; position: relative;
}
.comments-head::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 44px; height: 3px; background: var(--post-accent); opacity: 0.5;
}
.comments-head h3 {
  font-family: 'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size: 1.1rem; font-weight: 600; color: #1a1a1a; margin: 0;
}
.comments-count {
  font-size: 0.75rem; color: #fff; font-weight: 600;
  background: var(--post-accent);
  min-width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

/* ---- 评论卡片系统 ---- */
.comment-card {
  display: flex; gap: 16px; padding: 22px 18px; margin-bottom: 4px;
  position: relative; border-radius: 10px;
  border: 1px solid #e8e4dd;
  transition: all 0.35s ease;
  overflow: visible;
}

/* 4 种底色交替 */
.comment-card:nth-child(4n+1) {
  background: linear-gradient(135deg, #fdfcf9 0%, #f9f7f2 100%);
}
.comment-card:nth-child(4n+2) {
  background: linear-gradient(135deg, #f9f6f0 0%, #f5f2eb 100%);
}
.comment-card:nth-child(4n+3) {
  background: linear-gradient(180deg, #fcfaf7 0%, #f7f4ee 100%);
}
.comment-card:nth-child(4n+4) {
  background: linear-gradient(225deg, #fbf9f5 0%, #f6f3ec 100%);
}

/* 卡片花纹 1：右上角金色圆形水印 */
.comment-card:nth-child(4n+1)::before {
  content: '';
  position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,184,150,0.10) 0%, transparent 70%);
  pointer-events: none;
  transition: transform 0.6s ease;
}
.comment-card:nth-child(4n+1):hover::before { transform: scale(1.15) rotate(15deg); }

/* 卡片花纹 2：左侧线装书装订孔 */
.comment-card:nth-child(4n+2)::before {
  content: '';
  position: absolute; left: 5px; top: 18px; bottom: 18px;
  width: 12px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 6px, #d8d4cc 6px, #d8d4cc 8px);
  pointer-events: none; border-radius: 2px;
}
.comment-card:nth-child(4n+2):hover::before { background:
  repeating-linear-gradient(0deg, transparent, transparent 6px, var(--post-accent) 6px, var(--post-accent) 8px);
  opacity: 0.35;
}

/* 卡片花纹 3：底部水彩渐变带 */
.comment-card:nth-child(4n+3)::after {
  content: '';
  position: absolute; left: 0; bottom: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(45,90,61,0.12) 15%, rgba(201,184,150,0.15) 50%, rgba(45,90,61,0.12) 85%, transparent 100%);
  pointer-events: none;
}

/* 卡片花纹 4：斜纹织物纹理 */
.comment-card:nth-child(4n+4) {
  position: relative;
}
.comment-card:nth-child(4n+4)::before {
  content: '';
  position: absolute; inset: 0; border-radius: 10px;
  background: repeating-linear-gradient(22deg, transparent, transparent 3px, rgba(45,90,61,0.015) 3px, rgba(45,90,61,0.015) 4px);
  pointer-events: none;
}
.comment-card:nth-child(4n+4):hover::before {
  background: repeating-linear-gradient(22deg, transparent, transparent 3px, rgba(45,90,61,0.03) 3px, rgba(45,90,61,0.03) 4px);
}

/* 通用底部花饰（所有卡片） */
.comment-card::after {
  content: '— ◇ —';
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #ddd; letter-spacing: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.comment-card:hover::after { opacity: 1; }

/* hover 左侧竖线生长 */
.comment-card .comment-grow-bar {
  content: ''; /* handled by JS or pseudo on main */
}
.comment-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

/* 头像 */
.comment-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid #e8e4dd;
  transition: all 0.35s ease;
}
/* 作者头像：金色光环 */
.comment-card.author-comment .comment-avatar {
  border-color: var(--post-gold);
  box-shadow: 0 0 0 3px rgba(201,184,150,0.18);
}
.comment-card:hover .comment-avatar {
  transform: scale(1.06) rotate(4deg);
  border-width: 3px;
}

/* 评论内容 */
.comment-main { flex: 1; min-width: 0; }
.comment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.comment-user {
  font-size: 0.88rem; font-weight: 600; color: #1a1a1a;
  text-decoration: none; transition: color 0.3s;
}
.comment-card:hover .comment-user { color: var(--post-accent); }

/* 作者缎带标签 */
.comment-user-badge {
  font-size: 0.65rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--post-gold), #d4c5a5);
  padding: 2px 8px; border-radius: 3px;
  letter-spacing: 0.05em;
  position: relative;
}
.comment-user-badge::after {
  content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: #d4c5a5;
}

.comment-time { font-size: 0.73rem; color: #bbb; }
.comment-text {
  font-size: 0.9rem; line-height: 1.65; color: #444;
  word-break: break-word;
}
.comment-text p { margin: 0 0 0.5em; }
.comment-text p:last-child { margin: 0; }
.comment-actions-row { margin-top: 8px; display: flex; gap: 16px; }
.comment-actions-row a {
  font-size: 0.73rem; color: var(--post-muted);
  text-decoration: none; transition: all 0.25s;
  padding: 2px 0; border-bottom: 1px solid transparent;
}
.comment-actions-row a:hover {
  color: var(--post-accent);
  border-bottom-color: rgba(45,90,61,0.3);
}
.comment-disabled-note { font-size: 0.78rem; color: #ccc; font-style: italic; }

/* ---- 评论表单 ---- */
.comment-form-wrap {
  margin-top: 32px; padding: 22px 24px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(45,90,61,0.012) 8px, rgba(45,90,61,0.012) 9px),
    rgba(250,250,247,0.7);
  border-radius: 8px; border: 1px solid #e8e4dd;
  transition: border-color 0.3s;
}
.comment-form-wrap:focus-within { border-color: rgba(45,90,61,0.3); }
.comment-form-wrap h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 14px; color: #1a1a1a; }
.comment-form-wrap textarea {
  width: 100%; border: none; border-bottom: 1px solid #ddd;
  background: transparent; padding: 10px 4px; font-size: 0.9rem;
  font-family: inherit; resize: vertical; min-height: 70px;
  transition: border-color 0.3s; outline: none;
}
.comment-form-wrap textarea:focus { border-bottom-color: var(--post-accent); }
.comment-form-wrap .btn-submit {
  margin-top: 14px; padding: 8px 22px; font-size: 0.82rem;
  font-weight: 500; background: #1a1a1a; color: #fff;
  border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s;
}
.comment-form-wrap .btn-submit:hover { background: var(--post-accent); transform: translateY(-1px); }

.comment-login-note {
  margin-top: 32px; text-align: center; font-size: 0.85rem;
  color: var(--post-muted); padding: 18px;
  background: rgba(250,250,247,0.5); border-radius: 8px;
  border: 1px dashed #e0e0da;
}
.comment-login-note a { color: var(--post-accent); font-weight: 600; text-decoration: none; }

/* 审核按钮 */
.mod-actions { margin-top: 8px; display: flex; gap: 8px; }
.mod-actions .btn { font-size: 0.73rem; padding: 4px 12px; border-radius: 3px; }

/* ============================================================
   入场动画
   ============================================================ */
@keyframes postFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-back        { animation: postFadeUp 0.5s 0s    ease forwards; }
.post-title       { animation: postFadeUp 0.6s 0.08s ease forwards; }
.post-author-row  { animation: postFadeUp 0.5s 0.16s ease forwards; }
.post-body        { animation: postFadeUp 0.5s 0.22s ease forwards; }
.post-actions-bar { animation: postFadeUp 0.5s 0.28s ease forwards; }
.post-comments    { animation: postFadeUp 0.5s 0.34s ease forwards; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
  .post-page { padding: 32px 1.25rem 56px; }
  .post-body { font-size: 1.05rem; line-height: 1.75; }
  .post-body h2 { font-size: 1.25rem; margin: 40px 0 16px; }
  .post-title { margin-bottom: 24px; }
  .post-author-row { padding-bottom: 20px; margin-bottom: 28px; }
  .post-project { flex-direction: column; align-items: flex-start; }
  .post-actions-bar { max-width: 100%; border-radius: 20px; }
  .post-actions-bar .post-action { padding: 8px 14px; font-size: 0.8rem; }
  .comment-card { padding: 16px 12px; }
  .comment-card:nth-child(4n+1)::before,
  .comment-card:nth-child(4n+2)::before,
  .comment-card:nth-child(4n+3)::after,
  .comment-card:nth-child(4n+4)::before { display: none; }
}
@media (max-width: 480px) {
  .post-page { padding: 24px 1rem 48px; }
  .post-body { font-size: 1rem; line-height: 1.7; }
  .post-author-actions { width: 100%; margin-top: 8px; }
  .post-author-row { flex-wrap: wrap; }
  .post-actions-bar { flex-wrap: wrap; gap: 0; border-radius: 16px; }
  .post-actions-bar .post-action + .post-action::before { display: none; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .post-rain-bg { animation: none; }
  .post-back,.post-title,.post-author-row,.post-body,.post-actions-bar,.post-comments {
    animation: none; opacity: 1;
  }
  .reading-progress { display: none; }
  .comment-card::after { display: none; }
}