/* ==========================================================================
   Riven（曾墨版）— 补充样式层
   这一层只放「Riven 原版没有、或需要按 ZMBlog 结构微调」的部分，
   颜色全部走 Riven 的 CSS 变量，所以深色模式自动生效。
   加载顺序：在 main/home/post/comment/liuyan 之后。
   ========================================================================== */

/* ---------- 基础 ---------- */
.zm-html { scroll-behavior: smooth; }
.zm-main { display: block; }
main.zm-main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
.zm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; border-radius: 6px;
  border: 1px solid var(--line-primary); background: var(--bg-card);
  color: var(--text-body); font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.zm-btn:hover { background: var(--bg-soft); color: var(--accent-brown); border-color: var(--control-hover-border); text-decoration: none; }
.zm-btn.ghost { background: transparent; }

/* 空状态 */
.zm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.zm-empty img { width: min(220px, 60%); opacity: .9; }
.zm-empty p { margin: 0; color: var(--text-secondary); font-size: 14px; }

/* 需要非空判定的地方，隐藏空元素 */
.home-notice-viewport .home-notice-track p { margin: 0; }

/* ---------- 顶部：搜索弹层 / 明暗切换 ---------- */
.zm-search {
  position: fixed; inset: 0; z-index: 9997;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14vh 16px 0;
  background: color-mix(in srgb, var(--bg-page) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zm-search[hidden] { display: none; }
.zm-search-box {
  display: flex; align-items: center; gap: 10px;
  width: min(560px, 100%); padding: 12px 16px;
  border: 1px solid var(--line-primary); border-radius: 12px;
  background: var(--bg-float); box-shadow: 0 18px 40px rgba(40, 34, 28, .18);
  color: var(--text-secondary);
}
.zm-search-box input {
  flex: 1 1 auto; min-width: 0; height: 34px; border: 0; outline: none;
  background: transparent; color: var(--text-primary);
  font-family: var(--font-main); font-size: 16px;
}
.zm-search-box button {
  height: 32px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--control-border); background: var(--control-bg);
  color: var(--control-text); font-size: 13px;
}
.zm-search-box button:hover { background: var(--control-hover-bg); color: var(--control-hover-text); }

#tp-theme-toggle svg { width: 17px; height: 17px; }

/* ---------- 分页补充 ---------- */
.home-pagination li a[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.home-pagination li.zm-page-gap > span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35px; min-width: 24px; color: var(--text-muted); font-size: 13px;
}
.zm-pagination { margin-top: 8px; }

/* ---------- 文章：元信息 / 版权 / 标签 / 附件 ---------- */
.post-title-block .post-title { margin: 0 0 10px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--text-secondary); font-size: 13px; }
.post-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.post-meta .post-cat-link { color: var(--accent-brown); }
.post-meta-icon, .post-views-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-edit-link { margin-left: auto; color: var(--accent-gold); }

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.article-tags a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid var(--line-secondary); border-radius: 13px;
  background: var(--bg-soft); color: var(--text-secondary); font-size: 13px;
}
.article-tags a:hover { color: var(--accent-brown); border-color: var(--accent-gold); text-decoration: none; }

.post-copyright {
  margin: 26px 0 0; padding: 14px 16px; border: 1px dashed var(--line-primary);
  border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 60%, transparent);
}
.post-copyright-badge {
  display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 4px;
  background: var(--accent-brown); color: #F7F4EE; font-size: 12px;
}
.post-copyright p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.8; }

.zm-attachments { margin: 26px 0 0; padding: 16px; border: 1px solid var(--line-secondary); border-radius: 8px; background: var(--bg-card); }
.zm-attachments h3 { margin: 0 0 10px; font-size: 15px; }
.zm-attachments ul { margin: 0; padding: 0; list-style: none; }
.zm-attachments li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line-soft); }
.zm-attachments li:first-child { border-top: 0; }
.zm-attachments .hint { color: var(--text-muted); font-size: 12px; }

/* 目录面板按钮（Riven 有样式，这里补无障碍焦点与当前项） */
.operator-button:focus-visible, .zm-btn:focus-visible, .search-toggle:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.post-toc-link.is-current { background: var(--bg-soft); color: var(--accent-brown); }

/* 代码复制兜底按钮（Prism 工具栏未启用时） */
.zm-copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  height: 24px; padding: 0 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--control-border); background: var(--control-bg);
  color: var(--control-text); font-size: 12px; line-height: 1;
  opacity: 0; transition: opacity .18s ease;
}
.tp-post-article .post_content pre { position: relative; }
.tp-post-article .post_content pre:hover .zm-copy-btn,
.zm-copy-btn:focus-visible { opacity: 1; }

/* ---------- 归档时间轴 ---------- */
.zm-timeline { margin-top: 12px; }
.zm-timeline-group { margin: 0 0 22px; }
.zm-timeline-month {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
  font-size: 16px; font-weight: 600;
}
.zm-timeline-month a { color: var(--text-primary); }
.zm-timeline-month a:hover { color: var(--accent-brown); text-decoration: none; }
.zm-timeline-month small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.zm-timeline-list { margin: 0; padding: 0; list-style: none; }
.zm-timeline-list li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
.zm-timeline-list time { flex: 0 0 auto; width: 92px; color: var(--text-muted); font-size: 13px; }
.zm-timeline-list a { color: var(--text-body); }
.zm-timeline-list a:hover { color: var(--accent-brown); }
@media (max-width: 480px) {
  .zm-timeline-list li { flex-direction: column; gap: 2px; }
  .zm-timeline-list time { width: auto; }
}

/* ---------- 友情链接 ---------- */
.zm-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 18px; }
.zm-link-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-secondary); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zm-link-card:hover { transform: translateY(-2px); border-color: var(--accent-gold); box-shadow: var(--control-shadow); text-decoration: none; }
.zm-link-avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--bg-soft); }
.zm-link-body { display: flex; flex-direction: column; min-width: 0; }
.zm-link-body strong { font-size: 14px; font-weight: 600; }
.zm-link-body small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 评论区补充 ---------- */
.tp-comment-msg { margin: 8px 0 0; min-height: 18px; font-size: 13px; color: var(--text-secondary); }
.tp-comment-msg.is-ok { color: #3B7A57; }
.tp-comment-msg.is-err { color: #B4483B; }
.tp-reply-tip { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--bg-soft); color: var(--text-secondary); font-size: 13px; }
.tp-reply-tip[hidden] { display: none; }
.tp-reply-tip button { height: 24px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--control-bg); color: var(--control-text); cursor: pointer; font-size: 12px; }
.send_anniu_style { cursor: pointer; }
.tp-emoji-picker { user-select: none; }
.comment-list-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; }
.comment-list-empty img { width: 180px; opacity: .85; }
.comment-list-empty p { margin: 0; color: var(--text-muted); font-size: 13px; }
.tp-comment-closed { margin: 0; padding: 12px 0; color: var(--text-muted); font-size: 14px; }
.comment-pagination { margin-top: 14px; }
.comment-pagination .home-pagination { margin: 0; }

/* ---------- 密码页 / 404 ---------- */
.zm-password, .zm-404 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 46px 16px; }
.zm-password-image { width: min(220px, 55%); opacity: .9; }
.zm-password p { margin: 0; color: var(--text-secondary); }
.zm-password-form { display: flex; gap: 8px; width: min(380px, 100%); margin-top: 6px; }
.zm-password-form input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--control-bg); color: var(--text-primary); font-family: var(--font-main);
}
.zm-password-form button {
  height: 38px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--control-active-border); background: var(--control-active-bg); color: var(--control-active-text);
}
.zm-password-msg { min-height: 18px; font-size: 13px; color: var(--accent-red); }
.zm-password-back a { color: var(--accent-brown); }
.zm-404-code { margin: 0; font-size: 76px; font-weight: 700; line-height: 1; color: var(--accent-gold); letter-spacing: 4px; }
.zm-404-title { margin: 0; font-size: 22px; }
.zm-404-desc { margin: 0; color: var(--text-secondary); }
.zm-404-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- 图片放大（lightbox） ---------- */
.zm-lightbox {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 18, 16, .86); cursor: zoom-out;
}
.zm-lightbox[hidden] { display: none; }
.zm-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.float-right .operator-button { display: inline-flex; align-items: center; justify-content: center; }
.zm-lightbox-close {
  position: absolute; top: 16px; right: 20px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.zm-zoomable { cursor: zoom-in; }

/* ---------- 深色模式补丁 ---------- */
:root[data-theme="dark"] .zm-search { background: rgba(20, 20, 20, .78); }
:root[data-theme="dark"] .zm-btn { background: var(--bg-card); color: var(--text-body); }
:root[data-theme="dark"] .zm-link-card { background: var(--bg-card); }
:root[data-theme="dark"] .post-copyright { background: rgba(51, 51, 51, .5); }
:root[data-theme="dark"] .zm-attachments { background: var(--bg-card); }
:root[data-theme="dark"] .tp-reply-tip { background: var(--bg-soft); }

/* ---------- 段落缩进（主题设置可开） ---------- */
.tp-para-indent .post_content > p { text-indent: 2em; }
.tp-para-indent .post_content > p:has(img), .tp-para-indent .post_content > p:has(> img) { text-indent: 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 800px) {
  .tp-nav { padding-right: 4px; }
  .zm-links { grid-template-columns: 1fr 1fr; }
  .zm-link-body small { display: none; }
}
@media (max-width: 480px) {
  .zm-links { grid-template-columns: 1fr; }
  .post-meta { gap: 6px 10px; }
}

/* ---------- 评论点赞 ---------- */
#comments .tp-comment-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: 13px/22px var(--font-main);
}
#comments .tp-comment-like:hover { color: var(--accent-brown); }
#comments .tp-comment-like .tp-like-icon { font-size: 13px; line-height: 1; filter: grayscale(1); opacity: .8; }
#comments .tp-comment-like.is-active .tp-like-icon { filter: none; opacity: 1; }
#comments .tp-comment-like.is-active .tp-like-num { color: var(--accent-brown); }
#comments .tp-comment-foot > .tp-comment-like { margin-left: 10px; }

/* 回复提示条 */
.tp-reply-tip { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.tp-reply-tip[hidden] { display: none; }