/* ============================================================
   橙子的空间 · 作业本与萤火（moment.css）
   在 blog.css 之后加载：把登录后的页面统一到「课堂作业本」纸面，
   与夜色草原横幅（萤火、风车）衔接。只做换肤和动态流组件，
   不改动页面骨架与后台。
   ============================================================ */

/* ---------- 换肤：重定义 blog.css 的主题变量 ---------- */

:root {
  --paper:        #f5f9f3;   /* 淡绿作业本纸 */
  --paper-2:      #ecf4e9;
  --paper-3:      #ffffff;   /* 纸卡 */
  --ink:          #1d3a2f;   /* 深绿墨 */
  --ink-soft:     #3c5a4b;
  --muted:        #6c8577;
  --rule:         #dde9d8;
  --rule-strong:  #c2d6bc;
  --accent:       #db580f;   /* 橙子皮（白字按钮可读） */
  --accent-deep:  #a84608;   /* 深橙：链接与悬停 */
  --accent-soft:  #fce9da;   /* 荧光笔涂抹底 */
  --danger:       #c2433b;
  --grid-line:    transparent;
  --shadow-lift:  6px 6px 0 rgba(29, 58, 47, .09);  /* 贴纸硬投影 */

  /* 夜色横幅的借色：萤火与叶绿，横幅之外只做小面积点缀 */
  --firefly:      #ffb84d;
  --leaf:         #2e7d52;

  /* 空间主题语义色（沿用旧变量名，值随新皮肤走） */
  --nick-blue:    #a84608;   /* 用户名链接色 */
  --like-red:     #e5484d;
  --bubble:       #f4f8f1;   /* 评论区气泡底 */
  --liker-bg:     #fdf3ea;   /* 「觉得很赞」条底色 */

  /* 楷体：动态、评论、私信这些「人写的字」，像写在作业本上 */
  --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;
}

body {
  background-color: var(--paper);
  font-size: 15px;
  line-height: 1.8;
}

/* 顶部背景：作业本横线纸——32px 一道淡绿横线，向下渐隐让位给内容 */
body::before {
  height: 46vh;
  height: 46svh;
  background-image:
    linear-gradient(180deg, rgba(29, 58, 47, 0) 72%, var(--paper) 100%),
    linear-gradient(to bottom, transparent 31px, rgba(46, 125, 82, .075) 31px, rgba(46, 125, 82, .075) 32px, transparent 32px);
  background-size: 100% 100%, 100% 32px;
  background-position: center, center top;
}

/* 动态页有自己的星空横幅，不再要顶部浅蓝渐变 */
body.page-feed::before { display: none; }

/* ---------- 顶栏：白色吸顶，不再做「透明白字 → 滚动变色」 ---------- */

.site-head {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-head.scrolled { border-bottom-color: var(--rule); }

/* blog.css 里「未滚动时导航白字浮于照片上」的整套规则，在无照片背景的页面
   还原成深色；首页 / 商店（body.home / body.page-goods）保留白字透明导航 */
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .brand { color: var(--ink); }
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .brand b { color: var(--ink); text-shadow: none; }
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .brand small { color: var(--muted); text-shadow: none; }
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .site-nav a { color: var(--ink-soft); text-shadow: none; }
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .site-nav > a:hover,
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .site-nav > a.active { color: var(--accent-deep); }
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .login-link {
  color: var(--accent-deep); border-bottom-color: var(--accent); text-shadow: none;
}
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .whoami {
  color: var(--ink-soft); background: var(--paper-3); border-color: var(--rule);
}
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .ghost-btn {
  color: var(--ink-soft); background: var(--paper-3); border-color: var(--rule-strong);
}
body:not(.home):not(.page-goods) .site-head:not(.scrolled) .nav-avatar { border-color: var(--rule-strong); }

/* ---------- 首页欢迎大屏：保留原来的「透明导航浮于大图上」效果 ---------- */

body.home .site-head { background: rgba(255, 255, 255, var(--nav-opacity)); }
body.home .site-head:not(.scrolled) .brand { color: #fff; }
body.home .site-head:not(.scrolled) .brand b { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
body.home .site-head:not(.scrolled) .brand small { color: rgba(255, 255, 255, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
body.home .site-head:not(.scrolled) .site-nav a { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
body.home .site-head:not(.scrolled) .site-nav > a:hover,
body.home .site-head:not(.scrolled) .site-nav > a.active { color: #fff; }
body.home .site-head:not(.scrolled) .login-link {
  color: #fff; border-bottom-color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
body.home .site-head:not(.scrolled) .whoami {
  color: #fff; background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .35);
}
body.home .site-head:not(.scrolled) .ghost-btn {
  color: #fff; background: rgba(0, 0, 0, .14); border-color: rgba(255, 255, 255, .5);
}
body.home .site-head:not(.scrolled) .nav-avatar { border-color: rgba(255, 255, 255, .6); }

/* ---------- 主体：玻璃大面板 → 浅蓝灰底上的窄栏信息流 ----------
   首页 / 商店（有整页照片背景）豁免，保留 blog.css 的玻璃大面板。
   :where() 把两个 :not 的优先级清零：动态/好友/空间页的单 class
   加宽规则（body.page-feed main 等）才能压过这条 820px 窄栏 */

:where(body:not(.home):not(.page-goods)) main {
  max-width: 820px;
  margin: 16px auto 44px;
  padding: 14px 14px 30px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* 动态页：QQ 空间三栏，比其他页更宽，紧贴星空横幅下方 */
body.page-feed main {
  max-width: 1400px;
  margin-top: 18px;
  padding: 0 16px 40px;
}

.site-foot .foot-brand { color: var(--muted); }

/* ---------- 横幅：夜色草原（动态页与好友页共用，装饰元素见 Prairie.tsx） ---------- */

.qz-banner {
  position: relative;
  overflow: hidden;
  padding: 30px 0 62px;
  color: #fff;
  background: linear-gradient(180deg, #0b1130 0%, #12213f 34%, #16332e 58%, #22453a 78%, #2d5747 100%);
}

/* 底部晨雾：夜色草场柔和淡入页面底色，避免深色横幅硬切浅色内容（文字在雾线以上，不受影响） */
.qz-banner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 54px;
  background: linear-gradient(180deg,
    rgba(245, 249, 243, 0) 0%,
    rgba(236, 244, 233, .38) 38%,
    rgba(245, 249, 243, .92) 78%,
    var(--paper) 100%);
  z-index: 1;
  pointer-events: none;
}

/* 内容区两行两端撑开：好友页内容少时也撑到与动态页同一条底线上 */
.qz-banner-inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 0 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 148px;
}

/* 宽版页（动态/空间/好友）主体加宽后，横幅里的名字/签名与下方三栏对齐到同一条更宽的中线 */
body.page-feed .qz-banner-inner,
body.page-space .qz-banner-inner,
body.page-friends .qz-banner-inner { max-width: 1400px; }

/* 月亮：奶白带环形山，挂在统计牌与风车之间的空档 */
.pr-moon {
  position: absolute; top: 9%; right: 41%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle 5px   at 64% 38%, rgba(148, 156, 168, .38) 62%, transparent 63%),
    radial-gradient(circle 3.4px at 42% 60%, rgba(148, 156, 168, .32) 62%, transparent 63%),
    radial-gradient(circle 2.6px at 60% 68%, rgba(148, 156, 168, .30) 62%, transparent 63%),
    radial-gradient(circle 2.2px at 34% 40%, rgba(148, 156, 168, .25) 62%, transparent 63%),
    radial-gradient(circle at 40% 38%, #fffdf6 0%, #f3eed8 55%, #e9e2c6 74%, rgba(233, 226, 198, 0) 76%);
  box-shadow:
    0 0 30px 14px rgba(255, 250, 225, .22),
    0 0 90px 40px rgba(200, 215, 255, .10);
  pointer-events: none;
}

/* 星空：两层错相位闪烁的小星星，只铺横幅上半部 */
.pr-stars {
  position: absolute; top: 0; left: 0; right: 0; height: 60%;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.6px at 7%  22%, #fff     98%, transparent),
    radial-gradient(circle 1.2px at 13% 48%, #dfe9ff  98%, transparent),
    radial-gradient(circle 2px   at 22% 12%, #fff     98%, transparent),
    radial-gradient(circle 1.4px at 31% 38%, #fff6d8  98%, transparent),
    radial-gradient(circle 1.2px at 38% 18%, #fff     98%, transparent),
    radial-gradient(circle 1.8px at 49% 30%, #dfe9ff  98%, transparent),
    radial-gradient(circle 1.2px at 57% 12%, #fff     98%, transparent),
    radial-gradient(circle 1.6px at 66% 44%, #fff6d8  98%, transparent),
    radial-gradient(circle 1.3px at 74% 22%, #fff     98%, transparent),
    radial-gradient(circle 1.9px at 83% 36%, #dfe9ff  98%, transparent),
    radial-gradient(circle 1.2px at 90% 14%, #fff     98%, transparent),
    radial-gradient(circle 1.5px at 96% 42%, #fff6d8  98%, transparent);
  animation: pr-twinkle 3.6s ease-in-out infinite alternate;
}
.pr-stars--b {
  background-image:
    radial-gradient(circle 1.3px at 10% 34%, #fff     98%, transparent),
    radial-gradient(circle 1.7px at 18% 20%, #dfe9ff  98%, transparent),
    radial-gradient(circle 1.2px at 27% 52%, #fff     98%, transparent),
    radial-gradient(circle 1.5px at 36% 28%, #fff6d8  98%, transparent),
    radial-gradient(circle 1.2px at 45% 10%, #fff     98%, transparent),
    radial-gradient(circle 1.6px at 54% 46%, #dfe9ff  98%, transparent),
    radial-gradient(circle 1.2px at 62% 24%, #fff     98%, transparent),
    radial-gradient(circle 1.4px at 71% 8%,  #fff6d8  98%, transparent),
    radial-gradient(circle 1.2px at 80% 50%, #fff     98%, transparent),
    radial-gradient(circle 1.5px at 88% 26%, #dfe9ff  98%, transparent);
  animation-duration: 5.4s;
  animation-delay: -2.2s;
}
@keyframes pr-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* 烟花：::before 是升空的小火箭，::after 是双层彩点炸裂。
   一个周期内先升空（0–28%）再爆开（28–72%），四发错峰循环 */
.pr-fw {
  position: absolute;
  width: 0; height: 0;
  --fw-c1: #ffd66e;
  --fw-c2: #ffedb8;
  --fw-dur: 8s;
  --fw-delay: 0s;
  pointer-events: none;
}
.pr-fw--a { left: 22%; top: 34%; --fw-dur: 7s;   --fw-delay: -1.2s; }
.pr-fw--b { left: 47%; top: 16%; --fw-c1: #ffe08a; --fw-c2: #fffdf4; --fw-dur: 8.6s; --fw-delay: -4s;   }
.pr-fw--c { left: 66%; top: 28%; --fw-c1: #ffb84d; --fw-c2: #ffe9c4; --fw-dur: 9.4s; --fw-delay: -6.4s; }
.pr-fw--d { left: 33%; top: 13%; --fw-c1: #ffc466; --fw-c2: #fff3d6; --fw-dur: 7.8s; --fw-delay: -2.8s; }

.pr-fw::before {
  content: "";
  position: absolute; left: -1.5px; top: -7px;
  width: 3px; height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 214, 120, .5) 45%, rgba(255, 180, 80, 0) 100%);
  filter: drop-shadow(0 0 5px rgba(255, 205, 130, .95));
  opacity: 0;
  animation: pr-fw-rise var(--fw-dur) cubic-bezier(.3, .5, .8, 1) infinite;
  animation-delay: var(--fw-delay);
}
@keyframes pr-fw-rise {
  0%        { transform: translateY(86px) scaleY(1.15); opacity: 0; }
  4%        { opacity: 1; }
  26%, 27%  { transform: translateY(2px) scaleY(1); opacity: 1; }
  28%, 100% { transform: translateY(0); opacity: 0; }
}

.pr-fw::after {
  content: "";
  position: absolute; left: -2.5px; top: -2.5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    /* 内圈 12 点 */
    24px   0     var(--fw-c1), 20.8px 12px  var(--fw-c1),
    12px   20.8px var(--fw-c1), 0      24px var(--fw-c1),
    -12px  20.8px var(--fw-c1), -20.8px 12px var(--fw-c1),
    -24px  0     var(--fw-c1), -20.8px -12px var(--fw-c1),
    -12px -20.8px var(--fw-c1), 0     -24px var(--fw-c1),
    12px  -20.8px var(--fw-c1), 20.8px -12px var(--fw-c1),
    /* 外圈 12 点（错开 15°） */
    38.6px  10.4px var(--fw-c2), 28.3px  28.3px var(--fw-c2),
    10.4px  38.6px var(--fw-c2), -10.4px 38.6px var(--fw-c2),
    -28.3px 28.3px var(--fw-c2), -38.6px 10.4px var(--fw-c2),
    -38.6px -10.4px var(--fw-c2), -28.3px -28.3px var(--fw-c2),
    -10.4px -38.6px var(--fw-c2), 10.4px -38.6px var(--fw-c2),
    28.3px -28.3px var(--fw-c2), 38.6px -10.4px var(--fw-c2),
    /* 爆点白闪 */
    0 0 0 3px rgba(255, 255, 255, .95);
  filter: drop-shadow(0 0 6px var(--fw-c1));
  animation: pr-fw-pop var(--fw-dur) cubic-bezier(.16, .6, .4, 1) infinite;
  animation-delay: var(--fw-delay);
}
@keyframes pr-fw-pop {
  0%, 27%   { transform: translateY(0) scale(calc(var(--fw-s, 1) * .05)); opacity: 0; }
  29%       { transform: translateY(0) scale(calc(var(--fw-s, 1) * .22)); opacity: 1; }
  55%       { transform: translateY(6px) scale(calc(var(--fw-s, 1) * .9)); opacity: .9; }
  72%, 100% { transform: translateY(14px) scale(calc(var(--fw-s, 1) * 1.08)); opacity: 0; }
}

/* 草地：两层山坡 + 一层近处草皮，铺满横幅下半部（夜色深绿） */
.pr-hills {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 46%;
  pointer-events: none;
}
/* 流萤：夜草丛里两层错相位呼吸的黄绿光点 */
.pr-fireflies {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px   at 8%  42%, rgba(224, 255, 158, .95) 26%, rgba(224, 255, 158, 0) 74%),
    radial-gradient(circle 2.4px at 21% 68%, rgba(255, 244, 170, .90) 26%, rgba(255, 244, 170, 0) 74%),
    radial-gradient(circle 2.8px at 44% 36%, rgba(224, 255, 158, .95) 26%, rgba(224, 255, 158, 0) 74%),
    radial-gradient(circle 2.2px at 63% 62%, rgba(255, 244, 170, .90) 26%, rgba(255, 244, 170, 0) 74%),
    radial-gradient(circle 2.6px at 82% 44%, rgba(224, 255, 158, .95) 26%, rgba(224, 255, 158, 0) 74%),
    radial-gradient(circle 2.2px at 94% 70%, rgba(255, 244, 170, .90) 26%, rgba(255, 244, 170, 0) 74%);
  animation: pr-glow 3.2s ease-in-out infinite alternate;
}
.pr-fireflies--b {
  background-image:
    radial-gradient(circle 2.4px at 14% 52%, rgba(224, 255, 158, .90) 26%, rgba(224, 255, 158, 0) 74%),
    radial-gradient(circle 2.8px at 30% 26%, rgba(255, 244, 170, .95) 26%, rgba(255, 244, 170, 0) 74%),
    radial-gradient(circle 2.2px at 52% 58%, rgba(224, 255, 158, .90) 26%, rgba(224, 255, 158, 0) 74%),
    radial-gradient(circle 2.6px at 72% 30%, rgba(255, 244, 170, .95) 26%, rgba(255, 244, 170, 0) 74%),
    radial-gradient(circle 2.2px at 88% 56%, rgba(224, 255, 158, .90) 26%, rgba(224, 255, 158, 0) 74%);
  animation-duration: 4.4s;
  animation-delay: -1.6s;
}
@keyframes pr-glow { from { opacity: .25; } to { opacity: .95; } }

/* 风车：一对立在右侧远坡上（大前小后），塔身开了扇亮灯的小窗 */
.pr-mill {
  position: absolute;
  bottom: 15%;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 10, 5, .45));
}
.pr-mill--big   { width: 88px; right: 30%; }
.pr-mill--small { width: 52px; right: 40%; bottom: 17.5%; opacity: .97; }
.pr-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: pr-spin 9s linear infinite;
}
.pr-rotor--reverse { animation-duration: 13s; animation-direction: reverse; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* 减少动效：星星流萤定格、扇叶停、烟花不升不炸（基础 opacity 为 0，自然隐去） */
@media (prefers-reduced-motion: reduce) {
  .pr-stars, .pr-fireflies { animation: none; }
  .pr-rotor { animation: none; }
  .pr-fw::before, .pr-fw::after { animation: none; }
}

.qz-nick-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.qz-badge {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  font-size: 13px; border-radius: 7px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* 右上角访客数：仿 QQ 空间「今日访客 / 访客总量」 */
.qz-visit {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.qz-visit-paw { font-size: 20px; }
.qz-visit p {
  margin: 0;
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .85);
}
.qz-visit p b { color: #ffd76e; font-family: var(--mono); font-size: 14px; }

/* 空间名 + 签名：贴横幅底部 */
.qz-me-row {
  display: flex; align-items: flex-end; gap: 16px;
  margin-top: 30px;
}
.qz-space-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px; font-weight: 700; letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.qz-me-sign {
  margin: 4px 0 0;
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 44em;
}
.qz-me-sign .hero-quote-src { opacity: .75; font-size: 11.5px; }

/* ---------- 三栏布局：左菜单 | 信息流 | 右栏小卡 ---------- */

.qz-layout {
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr) 264px;
  gap: 16px;
  align-items: start;
}
.qz-side { display: grid; gap: 14px; min-width: 0; }

/* 左栏菜单卡（QQ 空间「好友动态」那列的位置） */
.qz-menu {
  background: var(--paper-3);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--rule);
}
.qz-menu-title {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 6px 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.qz-menu-title i, .qz-menu--tools a i { font-style: normal; }
.qz-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px; color: var(--ink-soft);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.qz-menu a:hover { background: var(--paper-2); color: var(--accent-deep); }
.qz-menu a.current { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.qz-menu-n { font-style: normal; font-size: 11px; font-family: var(--mono); color: var(--muted); }
.qz-menu a.current .qz-menu-n { color: var(--accent-deep); }
.qz-menu--tools a { justify-content: flex-start; gap: 9px; }

/* 左栏好友行：小头像 + 名字（头像规则与动态卡一致，没头像取首字色块） */
.qz-menu-friend {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.qz-menu-av {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
}
span.qz-menu-av {
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.qz-menu-name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qz-menu-empty {
  margin: 4px 6px 6px;
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.qz-menu-empty a { color: var(--accent-deep); }

/* 只看某位好友时，信息流顶部的提示条（点 ✕ 回到全部动态） */
.qz-who {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 9px 12px;
  background: var(--accent-soft);
  border: 1px solid #f0cfb0;
  border-radius: 12px;
  font-size: 13px; color: var(--ink-soft);
}
.qz-who b { color: var(--nick-blue); }
.qz-who a {
  flex: none;
  font-size: 12.5px; color: var(--accent-deep); text-decoration: none;
}
.qz-who a:hover { text-decoration: underline; }

/* 筛选条：当前标签下拉 + 总数 + 刷新（QQ 空间「全部动态 ▾」那一条） */
.qz-filter {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  padding: 8px 10px 8px 8px;
  background: var(--paper-3);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.qz-drop { position: relative; }
.qz-drop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--paper-2);
  border: 0; border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.qz-drop-btn:hover { background: var(--accent-soft); color: var(--accent-deep); }
.qz-drop-caret { font-style: normal; font-size: 11px; color: var(--muted); transition: transform .18s; }
.qz-drop.open .qz-drop-caret { transform: rotate(180deg); }
.qz-drop-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 160px;
  padding: 6px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(29, 58, 47, .18);
  z-index: 20;
}
.qz-drop.open .qz-drop-menu { display: grid; }
.qz-drop-menu a {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13.5px; color: var(--ink-soft);
  text-decoration: none;
}
.qz-drop-menu a:hover { background: var(--paper-2); color: var(--accent-deep); }
.qz-drop-menu a.current { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.qz-filter-total { flex: 1; text-align: right; font-size: 12.5px; color: var(--muted); }
.qz-refresh {
  padding: 4px 9px;
  font-size: 16px; color: var(--muted);
  text-decoration: none; border-radius: 8px;
  transition: color .18s, transform .45s;
}
.qz-refresh:hover { color: var(--accent-deep); transform: rotate(180deg); }

/* 右栏小卡：签到式打卡卡 / 小铺推广卡 / 访客统计卡 */
.qz-card {
  background: var(--paper-3);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.qz-signin { display: flex; align-items: stretch; overflow: hidden; text-decoration: none; }
.qz-signin-date {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 88px; padding: 14px 8px;
  background: var(--leaf);
  color: #fff; font-size: 12px;
  transition: background .2s;
}
.qz-signin-date b { font-family: var(--mono); font-size: 20px; }
.qz-signin:hover .qz-signin-date { background: #256742; }
.qz-signin-info {
  padding: 12px 14px;
  font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.qz-signin-info b { margin: 0 2px; font-family: var(--mono); font-size: 18px; color: var(--accent-deep); }
.qz-signin-info small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

.qz-promo {
  position: relative; display: block; overflow: hidden;
  padding: 15px 16px 13px;
  color: #fff; text-decoration: none;
  background: var(--accent);
  transition: transform .18s, box-shadow .18s;
}
.qz-promo:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(29, 58, 47, .12); }
.qz-promo::after {
  content: "🍊";
  position: absolute; right: -8px; bottom: -16px;
  font-size: 64px; opacity: .22; transform: rotate(-12deg);
}
.qz-promo-tag {
  position: absolute; top: 0; right: 0;
  padding: 3px 9px;
  font-size: 10px; letter-spacing: .1em;
  background: rgba(0, 0, 0, .18);
  border-radius: 0 12px 0 10px;
}
.qz-promo b { font-size: 15.5px; }
.qz-promo p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.qz-promo-go { font-size: 12.5px; font-weight: 600; }

.qz-visitors { padding: 14px 16px; }
.qz-vis-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.qz-vis-title i { font-style: normal; }
.qz-vis-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  font-size: 13px; color: var(--ink-soft);
}
.qz-vis-row + .qz-vis-row { border-top: 1px dashed var(--rule); }
.qz-vis-row b { font-family: var(--mono); font-size: 15px; color: var(--accent-deep); }
.qz-vis-foot { margin: 10px 0 0; font-size: 11px; color: var(--muted); }

/* ---------- 「写动态」入口卡（动态流顶部） + 写动态页 ---------- */

.mo-new {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px 13px;
  margin-bottom: 14px;
}
.mo-new--entry { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s; }
.mo-new--entry:hover {
  transform: translate(-2px, -2px);
  border-color: var(--rule-strong);
  box-shadow: 5px 5px 0 rgba(29, 58, 47, .1);
}
.mo-new--entry {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer;
}
.mo-new--entry .mo-avatar { width: 40px; height: 40px; font-size: 16px; }
.mo-new-ph { flex: 1; font-size: 14px; color: var(--muted); transition: color .18s; }
.mo-new--entry:hover .mo-new-ph { color: var(--ink-soft); }
.mo-new-go {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px;
  background: var(--paper-2);
  border-radius: 9px;
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  transition: background .18s, color .18s;
}
.mo-new--entry:hover .mo-new-go { background: var(--accent); color: #fff; }

/* 未登录时的提示卡（整卡可点，去登录） */
.mo-new--guest {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.mo-new-pen { font-style: normal; font-size: 18px; }
.mo-new--guest p { flex: 1; font-size: 13.5px; color: var(--ink-soft); }
.mo-new-login {
  font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  white-space: nowrap;
}
.mo-new--guest:hover .mo-new-login { text-decoration: underline; }

/* ---------- 写动态页（/posts/new） ---------- */

.mo-edit {
  max-width: 680px;
  margin: 26px auto 60px;
  background: var(--paper-3);
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 2px 14px rgba(29, 58, 47, .10);
}
.mo-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.mo-edit-head h1 { font-size: 20px; font-weight: 700; color: var(--ink); }
.mo-edit-back {
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color .18s;
}
.mo-edit-back:hover { color: var(--danger); }

/* 发布表单（头像行 / 输入框 / 图片格 / 底栏） */
.mo-new-head { display: flex; align-items: center; gap: 12px; }
.mo-new-head .mo-avatar { width: 40px; height: 40px; font-size: 16px; }
.mo-new-name { font-size: 14px; font-weight: 600; color: var(--nick-blue); }
.mo-new-text {
  width: 100%;
  margin: 12px 0 10px;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--ink);
  resize: vertical;
  transition: background .18s, border-color .18s;
}
.mo-new-text::placeholder { color: var(--muted); }
.mo-new-text:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
}
.mo-new-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 10px; }
.mo-new-img {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule);
}
.mo-new-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-new-del {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(20, 32, 26, .6);
  border: 0; border-radius: 50%;
  font-family: inherit; font-size: 11px; line-height: 1; color: #fff;
  cursor: pointer;
  transition: background .18s;
}
.mo-new-del:hover { background: var(--danger); }
.mo-new-add {
  width: 104px; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--paper-2);
  border: 1.5px dashed var(--rule-strong); border-radius: 10px;
  font-family: inherit; color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.mo-new-add b { font-size: 24px; font-weight: 400; line-height: 1; }
.mo-new-add i { font-style: normal; font-size: 11px; }
.mo-new-add:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.mo-new-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.mo-new-count { flex: 1; text-align: right; font-size: 12px; color: var(--muted); }
.mo-new-count.near { color: var(--danger); }
.mo-new-send {
  padding: 8px 22px;
  background: var(--accent);
  border: 0; border-radius: 9px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #fff;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.mo-new-send:hover:not(:disabled) { background: var(--accent-deep); }
.mo-new-send:active:not(:disabled) { transform: scale(.96); }
.mo-new-send:disabled { opacity: .5; cursor: default; }

/* ---------- 动态卡片 ---------- */

.mo-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px 13px;
  margin-bottom: 14px;
}

.mo-head { display: flex; align-items: flex-start; gap: 12px; }
.mo-avatar {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--rule);
}
span.mo-avatar {
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 18px;
}
.mo-head-main { flex: 1; min-width: 0; }
.mo-name {
  display: inline-block;
  font-size: 15px; font-weight: 600;
  color: var(--nick-blue); text-decoration: none;
}
a.mo-name:hover { text-decoration: underline; }
.mo-time {
  display: block;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.mo-time a { color: inherit; text-decoration: none; }
.mo-time a:hover { text-decoration: underline; }
.mo-cat {
  flex: none;
  font-size: 11.5px; color: var(--accent-deep);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 10px;
  opacity: .85;
}

/* 正文 */
.mo-title {
  margin: 12px 0 0;
  font-size: 16.5px; line-height: 1.55; font-weight: 700;
  color: var(--ink);
}
.mo-text {
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--kai);
  font-size: 15.5px; line-height: 1.95;
  white-space: pre-line;
  word-break: break-word;
}
.mo-text.folded {
  display: -webkit-box;
  -webkit-line-clamp: 14;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mo-fold-btn {
  display: block;
  margin-top: 4px;
  background: none; border: 0;
  color: var(--accent-deep); font-size: 13.5px;
  padding: 2px 0;
}
.mo-fold-btn:hover { text-decoration: underline; }

/* 九宫格配图 */
.mo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.mo-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bubble);
}
.mo-grid img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s var(--ease-out);
}
.mo-grid a:hover img { transform: scale(1.045); }
.mo-grid.n1 { grid-template-columns: minmax(0, 66%); }
.mo-grid.n1 a { aspect-ratio: auto; }
.mo-grid.n1 img { max-height: 430px; }
.mo-grid.n2, .mo-grid.n4 { grid-template-columns: repeat(2, 1fr); max-width: 74%; }

/* 底部操作栏：赞 | 评论（QQ 动态同款双按钮） */
.mo-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.mo-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 0;
  background: var(--paper-2);
  border: 0; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-soft);
  text-decoration: none;
  transition: background .18s, color .18s;
}
.mo-act:hover { background: var(--accent-soft); color: var(--accent-deep); }
.mo-act .mo-ico { font-style: normal; font-size: 14px; line-height: 1; }
button.mo-act { cursor: pointer; }
button.mo-act.liked { background: var(--like-red); color: #fff; }
button.mo-act.liked .mo-ico { animation: mo-heart .45s var(--ease-out); }
@keyframes mo-heart {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* 「觉得很赞」名单条 */
.mo-likers {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--liker-bg);
  border-radius: 8px;
  font-size: 13px; line-height: 1.7; color: var(--ink-soft);
}
.mo-likers .mo-ico { color: var(--like-red); font-style: normal; flex: none; }
.mo-liker-names b { color: var(--nick-blue); font-weight: 600; }

/* ---------- QQ 空间风卡片（mq-*：浏览数条 / 图标操作 / 楼中楼评论 / 内联评论框） ---------- */

/* 头部右侧收起开关 */
.mq-caret {
  flex: none;
  background: none; border: 0;
  color: var(--muted);
  font-size: 14px; line-height: 1;
  padding: 6px 2px;
  cursor: pointer;
  transition: transform .22s var(--ease-out), color .18s;
}
.mq-caret:hover { color: var(--ink-soft); }
.mq-caret.collapsed { transform: rotate(-90deg); }

/* 折叠包装：收起时整块（正文/操作/评论）消失，只留头部 */
.mq-foldwrap {
  animation: mq-unfold .22s var(--ease-out);
}
@keyframes mq-unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* 浏览数 + 赞/评论/转发 图标条 */
.mq-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
}
.mq-views { font-size: 12.5px; color: var(--muted); }
.mq-acts { display: flex; align-items: center; gap: 4px; }
.mq-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px;
  background: none; border: 0; border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, transform .16s;
}
.mq-act:hover { background: var(--paper-2); }
.mq-act:active { transform: scale(.9); }
.mq-ico { font-style: normal; font-size: 16px; line-height: 1; }
.mq-like.liked { color: var(--like-red); }
.mq-like.liked .mq-ico { animation: mo-heart .45s var(--ease-out); }

/* 点赞名单条：蓝圈 👍 + 名单 */
.mq-likers {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  font-size: 13px; line-height: 1.7;
}
.mq-liker-ico {
  flex: none;
  display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 3px;
  border-radius: 50%;
  background: var(--like-red);
  color: #fff;
  font-size: 10px; font-style: normal;
}
.mq-liker-names { color: var(--ink-soft); word-break: break-word; }
.mq-liker-names b { color: var(--nick-blue); font-weight: 500; margin-left: 2px; }

/* 评论区：头像 + 楼中楼 */
.mq-cmts {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: grid; gap: 12px;
}
.mq-cmt { display: flex; gap: 9px; }
.mq-cmt-av {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
}
span.mq-cmt-av {
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700;
}
.mq-cmt-main { flex: 1; min-width: 0; }
.mq-cmt-line {
  font-size: 13.5px; line-height: 1.65;
  color: var(--ink);
  font-family: var(--kai);
  word-break: break-word;
}
.mq-cmt-name { color: var(--nick-blue); font-weight: 600; }
.mq-cmt-reply { color: var(--nick-blue); }
.mq-cmt-colon { color: var(--ink); }
.mq-cmt .up-flag {
  display: inline-block;
  margin: 0 4px;
  font-size: 10px; color: #fff;
  background: var(--like-red);
  border-radius: 4px; padding: 0 5px;
  vertical-align: 1.5px;
  letter-spacing: .05em;
}
.mq-cmt-meta {
  display: flex; gap: 12px;
  margin-top: 2px;
  font-size: 11.5px; color: var(--muted);
}
.mq-cmt-meta button {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--muted);
  cursor: pointer;
}
.mq-cmt-meta button:hover { color: var(--accent-deep); text-decoration: underline; }
.mq-cmt--sub { margin-top: 8px; }
.mq-cmt--sub .mq-cmt-av { width: 26px; height: 26px; }
.mq-cmt-more {
  font-size: 12.5px; color: var(--accent-deep);
  text-decoration: none;
}
.mq-cmt-more:hover { text-decoration: underline; }

/* 底部内联评论框（圆角输入 + 发送，无拍照上传） */
.mq-cmtform {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.mq-cmtform--guest {
  text-align: center;
  font-size: 13px;
}
.mq-cmtform--guest a { color: var(--accent-deep); text-decoration: none; }
.mq-cmtform--guest a:hover { text-decoration: underline; }
.mq-cmtform-tip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  font-size: 12px; color: var(--muted);
}
.mq-cmtform-tip b { color: var(--nick-blue); font-weight: 600; }
.mq-cmtform-tip button {
  background: none; border: 0; padding: 0 2px;
  color: var(--muted); font-size: 11px;
  cursor: pointer;
}
.mq-cmtform-tip button:hover { color: var(--danger); }
.mq-cmtform-row { display: flex; align-items: center; gap: 8px; }
.mq-cmtform-av {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
}
span.mq-cmtform-av {
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
}
.mq-cmtform-row input {
  flex: 1; min-width: 0;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit; font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.mq-cmtform-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(219, 88, 15, .14);
}
.mq-cmtform-send {
  flex: none;
  padding: 7px 18px;
  background: var(--accent);
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #fff; cursor: pointer;
  transition: background .18s, opacity .18s;
}
.mq-cmtform-send:hover:not(:disabled) { background: var(--accent-deep); }
.mq-cmtform-send:disabled { opacity: .45; cursor: default; }

/* 内联评论（动态卡片下的浅灰气泡区） */
.mo-cmts {
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--bubble);
  border-radius: 8px;
  display: grid; gap: 6px;
}
.mo-cmt {
  font-size: 13.5px; line-height: 1.75;
  color: var(--ink);
  font-family: var(--kai);
  word-break: break-word;
}
.mo-cmt b { color: var(--nick-blue); font-weight: 600; }
.mo-cmt .up-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px; color: #fff;
  background: var(--like-red);
  border-radius: 4px; padding: 0 5px;
  vertical-align: 2px;
  letter-spacing: .05em;
}
.mo-cmt-more {
  font-size: 12.5px; color: var(--accent-deep);
  text-decoration: none;
}
.mo-cmt-more:hover { text-decoration: underline; }

/* ---------- 动态详情页 ---------- */

.mo-detail { padding: 20px 22px 16px; }
.mo-detail .mo-title { font-size: 20px; margin-top: 12px; }
.mo-detail .mo-full {
  margin-top: 12px;
  white-space: normal;
  font-size: 15.5px;
  font-family: var(--kai);
}
.mo-detail .mo-likers { margin-top: 14px; }
.mo-detail .mo-foot { max-width: 420px; }

/* 详情页的点赞行沿用 blog.css .like-row，稍微收窄让它贴近卡片 */
.mo-detail .like-row { margin-top: 14px; }

/* 正文拍平：动态详情里不再套博客时代的白盒边框 */
.mo-detail .post-body {
  max-width: none;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 15.5px;
  line-height: 1.9;
}

/* ---------- 分页 / 空态微调 ---------- */

.pager { margin-top: 20px; }
.pager a, .pager span {
  background: var(--paper-3);
  border-color: var(--rule);
  box-shadow: 0 1px 3px rgba(29, 58, 47, .05);
}

/* ---------- 响应式 ---------- */

/* 平板：三栏收成单栏，左菜单变横排小胶囊 */
@media (max-width: 1020px) {
  .qz-layout { grid-template-columns: minmax(0, 1fr); }
  .qz-side--left .qz-menu { display: flex; flex-wrap: wrap; gap: 6px; }
  .qz-side--left .qz-menu-title { width: 100%; margin: 2px 4px 4px; }
  .qz-side--left .qz-menu a { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  main { padding: 10px 10px 24px; margin-top: 10px; }
  .qz-banner { padding: 22px 0 50px; }
  .qz-banner::after { height: 46px; }
  .qz-banner-inner { min-height: 128px; }
  .pr-moon { width: 38px; height: 38px; top: 7%; right: 30%; }
  /* 手机上统计牌换行占掉半截横幅：只留两发缩小烟花，
     一发塞在标题与月亮的空档，一发藏在玻璃统计牌后面透光 */
  .pr-fw { --fw-s: .66; }
  .pr-fw--a { left: 55%; top: 9%; }
  .pr-fw--b { left: 78%; top: 32%; }
  .pr-fw--c, .pr-fw--d { display: none; }
  .pr-mill--small { display: none; }
  .pr-mill--big { width: 48px; right: 4%; bottom: 26%; }
  .qz-nick-row { flex-wrap: wrap; }
  .qz-visit { width: 100%; max-width: 320px; }
  .qz-me-row { margin-left: 0; margin-top: 22px; }
  .qz-space-name { font-size: 18px; }
  .qz-me-sign { font-size: 12px; }
  .mo-card { padding: 14px 14px 11px; border-radius: 12px; }
  .mo-avatar { width: 40px; height: 40px; }
  .mo-detail { padding: 16px 15px 13px; }
  .mo-grid.n2, .mo-grid.n4 { max-width: 100%; }
  .mo-grid.n1 { grid-template-columns: 1fr; }
}

/* 作者操作区：编辑 / 删除独占一行靠右（mo-foot 是两列 grid，越界行占满整行） */
.mo-own-ops {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mo-own-ops .mo-act { padding: 7px 18px; }
.mo-act--own:hover { background: #fbe9e4; color: var(--danger); }
.mo-own-ops--detail {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.mo-own-ops--detail .mo-act { padding: 7px 18px; }

/* 可见范围选择器（发布/编辑动态）与卡片徽标 */
.mo-vis { display: inline-flex; gap: 4px; margin-right: auto; }
.mo-vis-btn {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mo-vis-btn:hover { background: var(--accent-soft); }
.mo-vis-btn .ico, .mo-visflag .ico { margin-right: 3px; }
.mo-vis-btn.on {
  background: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  color: #fff;
}
.mo-visflag {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}