/* ============================================================
   橙子的空间 · QQ 动态主题（moment.css）
   在 blog.css 之后加载：只做换肤（青绿博客 → QQ 空间蓝白）
   和动态流组件，不改动页面骨架与后台。
   ============================================================ */

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

:root {
  --paper:        #eef3f8;
  --paper-2:      #e2ecf5;
  --paper-3:      #ffffff;
  --ink:          #1c2a3a;
  --ink-soft:     #46586e;
  --muted:        #8296ab;
  --rule:         #e6edf4;
  --rule-strong:  #ccdae8;
  --accent:       #12b7f5;
  --accent-deep:  #0e9cd6;
  --danger:       #e5484d;
  --grid-line:    transparent;
  --shadow-lift:  0 10px 30px rgba(40, 100, 160, .12);

  /* 空间主题新增的语义色 */
  --nick-blue:    #507daf;   /* QQ 空间昵称蓝 */
  --like-red:     #ff4d6a;
  --bubble:       #f5f7fa;   /* 评论区气泡底 */
  --liker-bg:     #f3f8fd;   /* 「觉得很赞」条底色 */
}

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

/* 顶部背景：去掉博客的坐标纸 + 照片，换成 QQ 空间式浅蓝渐变 */
body::before {
  height: 46vh;
  height: 46svh;
  background-image: linear-gradient(180deg, #d9ecfb 0%, rgba(238, 243, 248, 0) 100%);
  background-size: 100% 100%;
  background-position: center;
}

/* 动态页有自己的星空横幅，不再要顶部浅蓝渐变 */
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%, #131c46 34%, #1f3162 58%, #2c4474 78%, #3a5686 100%);
}

/* 底部晨雾：夜色草场柔和淡入页面底色，避免深色横幅硬切浅色内容（文字在雾线以上，不受影响） */
.qz-banner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 54px;
  background: linear-gradient(180deg,
    rgba(238, 243, 248, 0) 0%,
    rgba(226, 236, 245, .38) 38%,
    rgba(238, 243, 248, .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: #ff9ecb;
  --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: #8fe7ff; --fw-c2: #ffffff; --fw-dur: 8.6s; --fw-delay: -4s;   }
.pr-fw--c { left: 66%; top: 28%; --fw-c1: #ff8ad4; --fw-c2: #ffe08a; --fw-dur: 9.4s; --fw-delay: -6.4s; }
.pr-fw--d { left: 33%; top: 13%; --fw-c1: #a8ff9e; --fw-c2: #9edcff; --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;
  box-shadow: 0 1px 5px rgba(30, 70, 120, .08);
}
.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: #f0f7fe; color: var(--accent-deep); }
.qz-menu a.current { background: #e8f5fe; 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: #e8f5fe;
  border: 1px solid #cfe8fb;
  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;
  box-shadow: 0 1px 5px rgba(30, 70, 120, .08);
}
.qz-drop { position: relative; }
.qz-drop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #f3f6fa;
  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: #e9f3fb; 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(30, 70, 120, .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: #f0f7fe; color: var(--accent-deep); }
.qz-drop-menu a.current { background: #e8f5fe; 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;
  box-shadow: 0 1px 5px rgba(30, 70, 120, .08);
}
.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: linear-gradient(160deg, #35c3f7, #0e9cd6);
  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: linear-gradient(160deg, #12b7f5, #0b86ba); }
.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: linear-gradient(135deg, #ff9d4d 0%, #ff7a3c 55%, #f4593b 100%);
  transition: transform .18s, box-shadow .18s;
}
.qz-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(244, 100, 50, .35); }
.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-radius: 14px;
  padding: 16px 18px 13px;
  margin-bottom: 14px;
  box-shadow: 0 1px 5px rgba(30, 70, 120, .08);
}
.mo-new:hover { box-shadow: 0 6px 22px rgba(30, 70, 120, .12); }
.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: #f3f6fa;
  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(30, 70, 120, .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: #f3f6fa;
  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, 35, 55, .55);
  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: #f8fafd;
  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: #f0f8fe; }
.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-radius: 14px;
  padding: 16px 18px 13px;
  margin-bottom: 14px;
  box-shadow: 0 1px 5px rgba(30, 70, 120, .08);
}
.mo-card:hover { box-shadow: 0 6px 22px rgba(30, 70, 120, .12); }

.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: #232c38;
  font-size: 15px; line-height: 1.85;
  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: #f3f6fa;
  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: #e9f3fb; 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: #eef3f8; }
.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: #2f7cf6;
  color: #fff;
  font-size: 10px; font-style: normal;
}
.mq-liker-names { color: #4a5568; 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: #232c38;
  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: #232c38; }
.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(59, 130, 246, .12);
}
.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: #232c38;
  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;
}
.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(30, 70, 120, .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: #fdecea; color: #c0392b; }
.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: #f3f6fa;
  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: #e9f3fb; }
.mo-vis-btn .ico, .mo-visflag .ico { margin-right: 3px; }
.mo-vis-btn.on {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}
.mo-visflag {
  font-size: 12px;
  color: var(--ink-soft);
  background: #f3f6fa;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}