/**
 * 微语（Moments）前台样式。
 * 视觉语言与 default 主题同源：细边框、近黑标题、强调色点缀、低强度柔光。
 * 全部规则以 .mb- 前缀作用域隔离，避免影响主题其它部分。
 * 主题令牌取自页面 CSS 变量（--accent 等），缺失时回退到插件内联值。
 */
.mb-wrap{
  --mb-accent:var(--accent,#2e6da3);
  --mb-accent-dark:var(--accent-dark,#225680);
  --mb-accent-soft:var(--accent-soft,#edf4fa);
  --mb-ink:var(--ink,#1a2027);
  --mb-line:var(--line,#ececf1);
  --mb-line-2:var(--line-2,#e0e1e8);
  --mb-muted:var(--muted,#6f7885);
  --mb-faint:var(--faint,#9aa3ae);
  --mb-radius:10px;
  --mb-shadow:0 6px 18px rgba(15,23,42,.08);
  --mb-ring:0 0 0 3px rgba(46,109,163,.12);
  /* 深色主题下卡片/头像环的自适应底色（主题未给 --bg 时回退白） */
  --mb-surface:#fff;
  --mb-bg:var(--bg,#fbfcfd);
  /* 图片描边：与主题正文图片共用同一令牌 --img-line（default 主题为 #d7dae1）。
     页面底色是纯白，白底截图/长图若无描边会与背景融成一片、看不出边界。 */
  --mb-img-line:var(--img-line,#d7dae1);
  /* 滚动条宽度占位：供通栏封面 width 计算，避免 100vw 撑出横向滚动条 */
  --mb-sbw:0px;
  margin:0 0 8px;
}
.mb-wrap *{box-sizing:border-box}

/* ---------- 顶部封面（朋友圈式背景图 + 头像昵称叠层） ----------
   严格照搬设计稿 microblog-demo.html 的 .cover：208px 高、**通栏**、不设圆角，
   底部 78px 渐隐融入页面底色，让下面的资料叠层过渡自然。
   ⚠️ 通栏靠「负边距冲出 .prose 窄栏 + 撑满视口 + 让出滚动条宽度」实现：
      宿主 .prose 在 .shell 内有左右内边距，直接绝对定位/100vw 都会被裁或溢出；
      margin-left:50%; transform:translateX(-50%) 配合 calc(100vw - 滚动条宽) 才能
      既占满视口又不多出一条横向滚动条。这一条是显示效果的关键，改动前先读本注释。 */
.mb-cover{
  position:relative;height:208px;overflow:hidden;
  margin-left:50%;margin-right:50%;
  width:calc(100vw - var(--mb-sbw, 0px));
  transform:translateX(-50%);
  /* 占位封面：品牌色渐变 + 两团柔光 + 细点纹理；换真实照片只需加 background-image 覆盖渐变 */
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(46,109,163,.20), transparent 52%),
    radial-gradient(95% 130% at 96% 108%, rgba(13,148,136,.16), transparent 50%),
    radial-gradient(70% 90% at 55% -25%, rgba(255,255,255,.92), transparent 68%),
    linear-gradient(135deg,#e9f1fb 0%, #dbeaf7 46%, #e6eef6 100%);
  background-size:cover;background-position:center;
}
.mb-cover::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);background-size:22px 22px}
/* 实测照片作封面时不叠细点纹理，避免噪点 */
.mb-cover.has-img::after{display:none}
/* 底部渐隐融入页面底色：渐隐终点用 --mb-bg 而非硬编码白，
   深色主题下才不会在封面下缘露出一条白边 */
.mb-cover::before{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;
  background:linear-gradient(to bottom, rgba(251,252,253,0), var(--mb-bg))}

/* ---------- 内容容器 ----------
   微语页借宿主「单页」承载，宿主 .shell 宽度由后台「整页宽度」决定；
   这里把资料区与时间线收回 720px 窄栏并居中，保证任何页宽设置下版心稳定。 */
.mb-inner{max-width:720px;margin:0 auto}

/* ---------- 资料叠层（头像 + 昵称压在封面上，朋友圈经典结构） ---------- */
.mb-profile{position:relative;display:flex;align-items:flex-end;gap:14px;margin-top:-38px;margin-bottom:24px;z-index:2}
.mb-avatar-lg{flex:none;width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--mb-accent),var(--mb-accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:27px;user-select:none;box-shadow:0 0 0 4px var(--mb-surface), var(--mb-shadow)}
.mb-who{min-width:0;padding-bottom:4px}
.mb-nick{font-size:21px;font-weight:800;letter-spacing:-.2px;color:var(--mb-ink)}
.mb-bio{font-size:13px;color:var(--mb-muted);margin-top:3px;line-height:1.6}
.mb-k{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mb-accent);font-weight:700;margin-right:8px}

/* ---------- 发布框 ---------- */
.mb-composer{position:relative;background:#fff;border:1px solid var(--mb-line);border-left:3px solid var(--mb-accent);border-radius:var(--mb-radius);padding:14px 16px;margin-bottom:30px;transition:border-color .15s, box-shadow .15s}
.mb-composer:focus-within{border-color:var(--mb-accent);box-shadow:var(--mb-ring)}
.mb-composer textarea{width:100%;border:0;resize:none;outline:none;font:inherit;font-size:15px;color:var(--mb-ink);background:transparent;line-height:1.6;min-height:52px}
.mb-composer textarea::placeholder{color:var(--mb-faint)}
.mb-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--mb-line)}
.mb-tools{display:flex;gap:6px}
.mb-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--mb-muted);cursor:pointer;transition:background .15s,color .15s}
.mb-icon-btn:hover{background:var(--mb-accent-soft);color:var(--mb-accent)}
.mb-icon-btn svg{width:17px;height:17px}
.mb-btn{appearance:none;border:0;cursor:pointer;background:linear-gradient(135deg,var(--mb-accent),var(--mb-accent-dark));color:#fff;font:inherit;font-size:14px;font-weight:600;padding:8px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(46,109,163,.22);transition:transform .12s, box-shadow .15s, filter .15s;text-decoration:none;display:inline-block}
.mb-btn:hover{filter:brightness(1.04);box-shadow:0 6px 16px rgba(46,109,163,.30)}
.mb-btn:active{transform:translateY(1px)}
.mb-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}
.mb-imgs-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mb-imgs-preview:empty{display:none}
.mb-imgs-preview span{position:relative;width:64px;height:64px;border-radius:8px;background:#eef2f7 center/cover no-repeat}
.mb-imgs-preview span::after{content:"×";position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:16px;text-align:center;border-radius:50%;background:#5b6470;color:#fff;font-size:13px;cursor:pointer}
/* 拖拽/粘贴落点提示：仅在发布框处于拖放悬停时显示，不改变常态外观 */
.mb-composer.mb-drop{border-color:var(--mb-accent);border-style:dashed;background:var(--mb-accent-soft)}

/* ---------- 时间线 ---------- */
.mb-feed{position:relative;display:flex;flex-direction:column;gap:18px}
.mb-feed::before{content:"";position:absolute;left:33px;top:6px;bottom:10px;width:2px;background:linear-gradient(var(--mb-line-2),var(--mb-line))}
.mb-day{display:flex;align-items:center;gap:10px;margin:6px 0 -4px;padding-left:64px;color:var(--mb-faint);font-size:12.5px;font-weight:600}
.mb-day::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mb-line-2)}
.mb-empty{color:var(--mb-faint);font-size:14px;text-align:center;padding:40px 0}

.mb-post{position:relative;display:flex;gap:14px}
.mb-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--mb-accent),var(--mb-accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;user-select:none;box-shadow:0 0 0 4px var(--bg,#fff);z-index:1}
.mb-body{flex:1;min-width:0;background:#fff;border:1px solid var(--mb-line);border-radius:var(--mb-radius);padding:13px 16px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.mb-post:hover .mb-body{transform:translateY(-2px);box-shadow:var(--mb-shadow);border-color:var(--mb-line-2)}
.mb-meta{display:flex;align-items:center;gap:8px}
.mb-name{font-weight:700;color:var(--mb-ink);font-size:15px}
.mb-tag{font-size:11px;color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:5px;padding:1px 6px}
.mb-time{font-size:12px;color:var(--mb-faint);margin-left:auto}
.mb-text{margin:6px 0 0;color:var(--mb-ink);font-size:15px;white-space:pre-wrap;word-break:break-word}
.mb-del{position:absolute;top:11px;right:11px;opacity:0;border:0;background:transparent;color:#5b6470;font:inherit;font-size:12px;cursor:pointer;padding:4px 7px;border-radius:6px;transition:opacity .15s}
.mb-post:hover .mb-del{opacity:1}
.mb-del:hover{color:#c0392b;background:#fbeaea}

/* 图片九宫格 */
.mb-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px;max-width:430px}
.mb-imgs.mb-single{grid-template-columns:1fr;max-width:260px}
.mb-ph{aspect-ratio:1/1;border-radius:9px;background:#eef2f7 center/cover no-repeat;border:1px solid var(--mb-img-line);background-clip:padding-box;transition:transform .2s ease;display:block}
.mb-imgs.mb-single .mb-ph{aspect-ratio:4/3}
.mb-ph:hover{transform:scale(1.02)}

/* 赞 + 评论 */
.mb-acts{display:flex;gap:20px;margin-top:11px;padding-top:9px;border-top:1px solid var(--mb-line)}
.mb-act{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--mb-muted);font:inherit;font-size:13px;cursor:pointer;padding:3px 0;transition:color .15s}
.mb-act svg{width:15px;height:15px;transition:transform .2s}
.mb-act:hover{color:var(--mb-accent)}
.mb-act.liked{color:var(--mb-accent)}
.mb-act.liked svg{fill:var(--mb-accent);stroke:var(--mb-accent);animation:mb-like-pop .32s ease}
@keyframes mb-like-pop{0%{transform:scale(1)}42%{transform:scale(1.28)}100%{transform:scale(1)}}
.mb-comments{margin-top:10px;display:none;flex-direction:column;gap:7px}
.mb-comments.show{display:flex}
/* 评论行：左侧头像 + 右侧内容。头像规则与文章评论一致（有邮箱走 cravatar，
   无邮箱显示昵称首字），尺寸略小以适配微语的紧凑节奏。 */
.mb-cm{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2,#3e4650);background:#fafbfc;border:1px solid var(--mb-line);border-radius:8px;padding:7px 11px;line-height:1.6}
.mb-cm-ava{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background-color:var(--mb-accent-soft,#eaf2fa);color:var(--mb-accent);font-size:12px;font-weight:700;margin-top:1px;background-repeat:no-repeat;background-position:center;background-size:cover}
/* 有邮箱（走 cravatar）时用背景图，无文字 */
.mb-cm-ava.has-img{text-indent:-9999px}
.mb-cm-main{flex:1;min-width:0;word-break:break-word}
.mb-cm b{color:var(--mb-ink);font-weight:700;margin-right:6px}
.mb-cm-form{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.mb-cm-id{display:flex;gap:8px}
.mb-cm-row{display:flex;gap:8px}
.mb-cm-input{flex:1;min-width:0;border:1px solid var(--mb-line);border-radius:8px;padding:6px 11px;font:inherit;font-size:13px;outline:none;transition:border-color .15s, box-shadow .15s;background:#fff;color:var(--mb-ink)}
.mb-cm-input:focus{border-color:var(--mb-accent);box-shadow:var(--mb-ring)}
.mb-cm-name{flex:0 0 32%;max-width:180px}
.mb-cm-mail{flex:1 1 auto;min-width:0}
/* 评论删除按钮：仅登录用户渲染，悬停该条评论时才显现（与 .mb-del 同一语言） */
.mb-cm-del{flex:none;align-self:center;opacity:0;border:0;background:transparent;color:#5b6470;font:inherit;font-size:12px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:opacity .15s}
.mb-cm:hover .mb-cm-del,.mb-cm-del:focus-visible{opacity:1}
.mb-cm-del:hover{color:#c0392b;background:#fbeaea}

/* 分页 */
.mb-pager{display:flex;gap:6px;justify-content:center;margin-top:26px}
.mb-pager a{min-width:34px;height:34px;line-height:32px;text-align:center;border:1px solid var(--mb-line);border-radius:8px;color:var(--mb-muted);font-size:13px;padding:0 8px;text-decoration:none}
.mb-pager a.on{background:var(--mb-accent);border-color:var(--mb-accent);color:#fff;font-weight:600}

/* ---------- 后台管理页 ---------- */
.mbadm{--mb-accent:#2e6da3;--mb-line:#ececf1}
.mbadm-note{background:#f7f9fb;border:1px solid #ececf1;border-radius:10px;padding:11px 14px;font-size:13px;color:#4a5563;margin-bottom:18px;line-height:1.7}
.mbadm-note code{background:#e9eef4;padding:1px 6px;border-radius:5px;font-size:12px;color:#2e6da3}
.mbadm-count{float:right;color:#8a93a0}
.mbadm-form{background:#fff;border:1px solid #ececf1;border-left:3px solid #2e6da3;border-radius:10px;padding:14px 16px;margin-bottom:22px}
.mbadm-form textarea{width:100%;min-height:70px;border:0;outline:none;resize:vertical;font:inherit;font-size:15px;line-height:1.6;color:#1a2027;background:transparent}
.mbadm-form-row{display:flex;align-items:center;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid #ececf1;flex-wrap:wrap}
.mbadm-radio{font-size:13px;color:#4a5563;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mbadm-hint{font-size:12px;color:#9aa3ae}
.mbadm-cancel{margin-left:auto;font-size:13px;color:#6f7885;text-decoration:none}
.mbadm-list{display:flex;flex-direction:column;gap:10px}
.mbadm-empty{color:#9aa3ae;font-size:14px}
.mbadm-item{display:flex;gap:14px;background:#fff;border:1px solid #ececf1;border-radius:10px;padding:13px 16px}
.mbadm-item-main{flex:1;min-width:0}
.mbadm-item-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:#9aa3ae}
.mbadm-tag{color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:5px;padding:1px 6px;font-size:11px}
.mbadm-stat{margin-left:auto;color:#8a93a0}
.mbadm-item-text{margin-top:6px;font-size:14.5px;color:#2a3038;line-height:1.7;word-break:break-word}
.mbadm-thumbs{display:flex;gap:6px;margin-top:9px}
.mbadm-thumbs:empty{display:none}
.mbadm-thumbs span{width:46px;height:46px;border-radius:7px;background:#eef2f7 center/cover no-repeat}
.mbadm-pick{appearance:none;font-family:inherit;font-size:12.5px;color:#2e6da3;background:#edf4fa;border:1px solid #d3e3f2;border-radius:7px;padding:5px 11px;cursor:pointer;transition:background .15s}
.mbadm-pick:hover{background:#e2eef8}
.mbadm-pick:disabled{opacity:.55;cursor:not-allowed}
.mbadm-item-acts{display:flex;flex-direction:column;gap:6px;flex:none}
.mbadm-item-acts a,.mbadm-item-acts button{font-size:12.5px;color:#6f7885;background:transparent;border:0;cursor:pointer;padding:3px 8px;border-radius:6px;text-decoration:none;font-family:inherit}
.mbadm-item-acts a:hover{background:#edf4fa;color:#2e6da3}
.mbadm-item-acts button:hover{background:#fbeaea;color:#c0392b}

/* ---------- 与「单页」宿主环境协调 ----------
   微语页借单页承载，框架会额外渲染「站点头图 + 面包屑 + 标题 + 更新时间 + 通用评论区」，
   对微语来说这些是噪音。用 :has() 精准隐藏——仅当存在 .mb-wrap 时生效，
   不影响其它任何单页。:has() 已获全部现代浏览器支持；不支持时优雅降级
   （只是多显示一段面包屑标题与通用评论框，功能不受影响）。 */
/* 0) 站点头图横幅（HALO 式全宽 banner，主题设置 → 页眉）。
      微语页自带朋友圈封面，再叠一层站点头图会变成「双 banner」：
      而且头图上 .site-cover-title 的白色标题叠在微语封面浅色渐变上会糊成一片。
      这里只在微语页隐藏，其它页面（首页/文章/归档…）原样保留站点头图。
      用 ~ 兄弟选择器：.site-cover 与 main 同在 body 下，.mb-wrap 在 main 内。 */
.site-cover:has(~ main .mb-wrap) { display: none; }
/* 1) 面包屑 + 标题 + 更新时间的 page-head（与 .prose 同在 .post-main 内） */
.post-main:has(.mb-wrap) .page-head { display: none; }
/* 2) 通用评论区 #comments（.post-body 的兄弟节点） */
.post-body:has(.mb-wrap) ~ #comments { display: none; }
/* 3) 单页正文的 prose 上边距（原为 34px，微语不需要） */
.prose:has(.mb-wrap) { margin-top: 0 !important; }
/* 4) 微语页不需要单页封面 */
.post-main:has(.mb-wrap) .post-cover { display: none; }
/* 5) 该页专属锚点：admin 后台编辑器的「页面跳转」下拉可直接指向本页 */
.mb-wrap { scroll-margin-top: 84px; }

/* ---------- 通栏封面：让出宿主 .prose 与 .shell 的内边距 ----------
   .mb-wrap 落在 .post-main > .prose 内，.prose 无左右内边距，
   但外层 .shell 有 padding:0 24px（移动端 18px）。
   封面要用「撑满视口」的负边距技巧，先把这条链上的内边距归零，
   否则 calc(100vw - …) 按视口宽算而实际可用宽更小 → 差多少就溢出多少、出横向滚动条。
   :where() 特异性为 0，不与主题的 .shell 定义打架，也不影响其它规则。 */
.mb-wrap:where(.prose, .prose > *) { padding-left: 0; padding-right: 0; }

/* ---------- 抵抗宿主 .prose 排版(#) ----------
   单页正文外层是 .prose，其 `.prose p{margin:0 0 1.35em}`、`.prose a{underline}`
   等规则比单个 .mb-* 类权重更高（class+元素 > class），会污染微语内部段落，
   导致每条微语正文下方多出 1.35em 空隙。这里用 .mb-wrap 父级前缀提升权重抵消。 */
.mb-wrap .prose, .mb-wrap p, .mb-wrap .mb-text,
.mb-wrap .mb-cm, .mb-wrap .mb-nick, .mb-wrap .mb-bio { line-height: inherit; }
.mb-wrap .mb-text { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--mb-ink); }
.mb-wrap .mb-cm { margin: 0; }
.mb-wrap a { text-decoration: none; }
.mb-wrap a:hover { text-decoration: none; }

/* ---------- 移动端 ---------- */
@media (max-width:760px){
  .mb-inner{max-width:100%}
}
@media (max-width:560px){
  .mb-cover{height:132px}
  .mb-cover::before{height:54px}
  .mb-profile{margin-top:-30px;gap:11px;margin-bottom:20px}
  .mb-avatar-lg{width:56px;height:56px;font-size:21px}
  .mb-nick{font-size:18px}
  .mb-bio{font-size:12px}
  .mb-composer{padding:13px 13px}
  .mb-body{padding:12px 13px}
  .mb-text{font-size:14.5px}
  .mb-imgs{max-width:100%}
  .mb-del{opacity:1;top:9px;right:9px}
  .mb-cm-del{opacity:1}
  .mb-feed::before{left:33px}
}