:root {
  --red: #ff2442;
  --red-dark: #e01c37;
  --text: #333333;
  --text-2: #666666;
  --text-3: #999999;
  --line: #f0f0f0;
  --line-dark: #dbdbdb;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --radius: 16px;
  --radius-modal: 20px;    /* 详情弹窗圆角 */
  --shadow: 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-hi: 0 10px 30px rgba(0, 0, 0, .12);
  --topbar-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 顶部栏 ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 60;
}
.topbar__inner {
  position: relative;
  max-width: 1720px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.logo__mark {
  font-size: 22px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(135deg, #ff2442, #ff6a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo__sub { font-size: 11px; color: var(--text-3); letter-spacing: 2px; }

/* 电脑版：logo 旁的小二维码图标（扫码用手机访问）；小屏默认隐藏 */
.qrbtn {
  display: none;
  position: relative;
  width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--text-2); cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.qrbtn:hover { color: var(--red); border-color: var(--red); box-shadow: 0 2px 8px rgba(255,36,66,.12); }
.qrbtn svg { width: 18px; height: 18px; }
.qrbtn.is-active { color: var(--red); border-color: var(--red); }
.qrtip {
  position: absolute; top: calc(100% + 10px); left: 0;
  z-index: 70;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-hi);
  padding: 12px; width: 184px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qrtip[hidden] { display: none; }
.qrtip__arrow {
  position: absolute; top: -7px; left: 18px;
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.qrtip img { width: 160px; height: 160px; border-radius: 8px; display: block; background: #fafafa; }
.qrtip__txt { margin: 0; font-size: 12px; color: var(--text-2); text-align: center; }
@media (min-width: 901px) {
  .qrbtn { display: inline-flex; }
}

.search { position: relative; flex: 1; max-width: 680px; }
.search__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-3); pointer-events: none;
}
.search input {
  width: 100%; height: 40px;
  padding: 0 84px 0 42px;
  border: none; outline: none;
  border-radius: 20px;
  background: #f5f5f5;
  font-size: 14px;
  transition: background .2s, box-shadow .2s;
}
.search input:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--red) inset; }
.search__btn {
  position: absolute; right: 4px; top: 4px;
  height: 32px; padding: 0 18px;
  border-radius: 16px;
  background: var(--line); color: #c7c7c7; font-size: 13px; font-weight: 600;
  transition:0.3s all;
}
.search__btn:hover { background: var(--line-dark);color: #fff; }
.search__panel {
  position: absolute; top: 50px; left: 0; right: 0;
  background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-hi);
  padding: 14px 6px 8px;
  display: none;
}
.search__panel.is-open { display: block; }
.search__hot { padding: 0 14px 8px; }
.search__hot-title { font-size: 12px; color: var(--text-3); }
.search__panel ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 6px; }
.search__panel li button {
  padding: 6px 12px; border-radius: 14px; background: #f5f5f5; font-size: 13px; color: var(--text-2);
}
.search__panel li button:hover { background: #ffeef1; color: var(--red); }

.topbar__left {
  display: flex; align-items: center; gap: 24px;
  flex: 1 1 0%; min-width: 0;
}

.topbar__center {
  flex: 2;
}

.topnav {
  position: static;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.topbar__right {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 0%; justify-content: flex-end;
  min-width: 0;
}
.btn-login {
  padding: 7px 18px; border-radius: 18px;
  border: 1px solid var(--red); color: var(--red); font-size: 14px; font-weight: 600;
}
.btn-login:hover { background: #fff0f2; }
.btn-login[hidden] { display: none; }

/* 用户头像菜单 */
.userchip { position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 20px; }
.userchip[hidden] { display: none; }
.userchip:hover { background: #f5f5f5; }
.userchip img { width: 30px; height: 30px; border-radius: 50%; }
.userchip span { font-size: 14px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu {
  position: absolute; right: 0; top: 42px; min-width: 140px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-hi);
  padding: 6px; display: none; z-index: 70;
}
.usermenu.is-open { display: block; }
.usermenu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
/* hidden 属性必须能压过上面的 display:block，否则非管理员也会看到「会员管理」入口 */
.usermenu button[hidden] { display: none; }
.usermenu button:hover { background: #f5f5f5; }
.usermenu button:last-child { color: var(--text-2); }
.btn-publish {
  display: flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 16px; margin-left: 6px;
  border-radius: 18px; background: var(--red); color: #fff; font-weight: 600; font-size: 14px;
  transition: transform .15s, box-shadow .2s;
}
.btn-publish svg { width: 16px; height: 16px; }
.btn-publish:hover { box-shadow: 0 4px 14px rgba(255, 36, 66, .35); transform: translateY(-1px); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: #f5f5f5; }
.topbar__menu { display: none; }

/* 移动端顶部导航：左侧站点名 · 中间板块 tab · 右侧搜索 */
.mobnav { display: none; }
.mobnav__tabs { display: flex; align-items: center; gap: 22px; }
.mobnav__tab {
  position: relative; padding: 7px 2px; font-size: 15px; color: var(--text-3);
  background: none; border: none; white-space: nowrap;
}
.mobnav__tab.is-active { color: var(--text); font-weight: 700; }
.mobnav__tab.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); width: 18px; height: 3px;
  background: var(--red); border-radius: 3px;
}
.mobnav__logo {
  display: none;
  font-size: 20px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, #ff2442, #ff6a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mobnav__search {
  /* PC 端顶栏自带搜索框，这里再放一个图标按钮会重复，统一隐藏；
     只有 ≤900px（顶栏收起、.search 隐藏）时才由媒体查询打开。 */
  display: none;
  width: 36px; height: 36px; place-items: center;
  border-radius: 50%; color: var(--text); flex-shrink: 0;
  position: absolute;
	right: 10px;
	z-index: 999;
}
.mobnav__search svg { width: 22px; height: 22px; }

/* ---------- 独立页面（登录 / 发布）：不是弹窗，整页切换 ---------- */
.pageview {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.pageview[hidden] { display: none; }

/* ---------- 搜索页（/search）：顶部搜索框 + 历史记录 + 猜你想搜 ---------- */
.srp__box {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  background: #f5f5f7; border-radius: 18px;
  min-width: 0;
}
.srp__box:focus-within { background: #fff; box-shadow: 0 0 0 1.5px var(--red) inset; }
.srp__icon { width: 17px; height: 17px; color: var(--text-3, #999); flex-shrink: 0; }
.srp__box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text);
}
.srp__go {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-size: 14px; color: var(--text); padding: 4px 6px;
}
.srp__go:active { color: var(--red); }
.srp__body { padding-top: 18px; }
.srp__sec { margin-bottom: 26px; }
.srp__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.srp__title { font-size: 15px; font-weight: 700; color: var(--text); }
.srp__clear {
  border: none; background: none; cursor: pointer; padding: 4px;
  color: var(--text-3, #999); display: grid; place-items: center;
}
.srp__clear svg { width: 17px; height: 17px; }
.srp__clear:hover { color: var(--red); }
.srp__words { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.srp__words li button {
  border: none; cursor: pointer; padding: 7px 14px;
  background: #f5f5f7; border-radius: 16px;
  font-size: 13px; color: var(--text-2, #666);
}
.srp__words li button:hover { background: #ffeef1; color: var(--red); }
/* 猜你想搜：两列、文字靠左（小红书式） */
.srp__words--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.srp__words--grid li { border-bottom: 1px solid var(--line); }
.srp__words--grid li:nth-last-child(-n+2) { border-bottom: none; }
.srp__words--grid li button {
  width: 100%; text-align: left; background: none; border-radius: 0;
  padding: 13px 2px; font-size: 14px; color: var(--text);
}
.srp__words--grid li button:hover { background: none; color: var(--red); }
.pageview__bar {
  position: relative; flex: none; display: flex; align-items: center;
  gap: 8px; height: 52px; padding: 0 8px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.pageview__back,
.pageview__act {
  min-width: 56px; height: 34px; display: grid; place-items: center;
  border: none; background: none; border-radius: 17px;
  font-size: 15px; color: var(--text-2);
}
.pageview__back { justify-items: start; padding-left: 4px; }
.pageview__back svg { width: 22px; height: 22px; }
.pageview__act.is-red { color: var(--red); font-weight: 600; }
.pageview__title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: var(--text);
}
.pageview__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px 16px calc(28px + env(safe-area-inset-bottom));
}
.pageview__body--center { display: grid; place-items: start center; }
/* 内容区自己滚，顶栏不动 */
.pageview__body > .pub,
.pageview__body > .auth {
  width: 100%; max-width: 640px; margin: 0 auto;
  min-height: 0;
}
.pageview__body > .auth { max-width: 380px; }
.pageview .auth { padding: 8px 0 0; }
/* 发布按钮吸底 */
.pageview .pub .btn-block {
  position: sticky; bottom: 0; z-index: 2;
  box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .45);
}
/* 独立页面打开时，列表 / 页脚 / 底栏全部让位 */
body.is-subpage .layout,
body.is-subpage .sitefoot,
body.is-subpage .tabbar,
body.is-subpage .to-top { display: none; }
body.is-subpage { overflow: hidden; }

/* ---------- 布局 ---------- */
.layout {
  max-width: 1720px;
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 16px) 24px 80px;
}
.content { flex: 1; min-width: 0; }

/* ---------- 频道 ---------- */
.channel {
  position: sticky; top: calc(var(--topbar-h));
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  margin: 0 -8px 12px;
  padding: 4px 8px;
}
.channel__scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
/* 频道条过长时：左右渐变提示「还有内容」+ 悬停给一条可拖的细滚动条。
   纯 overflow-x:auto 在桌面上等于没法用——普通鼠标没有横向滚轮，纵向滚轮
   又只会滚页面，滚动条藏起来后就完全无从下手。JS 侧 bindChannelScroll()
   负责打 is-more-left / is-more-right 并把纵向滚轮映射成横向滚动。 */
.channel__scroll::-webkit-scrollbar { display: none; }
.channel:hover .channel__scroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; }
.channel:hover .channel__scroll::-webkit-scrollbar { display: block; height: 5px; }
.channel:hover .channel__scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 3px; }
.channel:hover .channel__scroll::-webkit-scrollbar-track { background: transparent; }
.channel::before, .channel::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 2;
}
.channel::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0));
}
.channel::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0));
}
.channel.is-more-left::before { opacity: 1; }
.channel.is-more-right::after { opacity: 1; }
.channel__item {
  flex-shrink: 0; padding: 7px 16px; border-radius: 18px;
  background: #f5f5f5; font-size: 14px; color: var(--text-2);
  white-space: nowrap;
  transition: all .18s;
}
.channel__item:hover { background: #eee; }
.channel__item.is-active { background: var(--text); color: #fff; font-weight: 600; }

/* 板块（穿搭 / 实拍 / 单品）：桌面端在频道条上方；移动端顶部 tab 已承载，隐藏 */
.boardbar { display: flex; gap: 8px; margin-bottom: 8px; padding: 4px 0; }
.boardbar__item {
  flex-shrink: 0; padding: 7px 18px; border-radius: 18px;
  background: #f5f5f5; font-size: 14px; color: var(--text-2);
  white-space: nowrap; border: none;
  transition: all .18s;
}
.boardbar__item:hover { background: #eee; }
/* 板块是「内容筛选」这一层级，比页面页签（发现/关注/收藏/我的）低一层，
   所以选中态用浅红胶囊；实心红留给 .navpill.is-active，
   同屏最多只有一个实心红，视线不会打架。 */
.boardbar__item.is-active { background: #fff0f2; color: var(--red); font-weight: 600; }

/* 导航行：左边板块胶囊、右边「发现 / 关注 / 收藏 / 我的」页签，两者并排一整行。
   #pageNav 的内容由 renderNav() 渲染成一组 .navpill；窄屏整行让位给
   顶部 tab（板块）和底部 tabbar（页面），在 ≤900px 统一隐藏。 */
.navline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; padding: 4px 0;
}
.navline .boardbar { margin-bottom: 0; padding: 0; flex-wrap: wrap; }
.navrow {
  display: flex; gap: 8px; flex: none;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.navrow::-webkit-scrollbar { display: none; }
.navpill {
  flex: none; padding: 7px 18px; border: none; border-radius: 18px;
  background: #f5f5f5; font-size: 14px; font-family: inherit;
  color: var(--text-2); white-space: nowrap; cursor: pointer;
  transition: all .18s;
}
.navpill:hover { background: #eee; }
.navpill.is-active { background: var(--red); color: #fff; font-weight: 600; }

.feed-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.feed-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.feed-head__sort { display: flex; gap: 8px; }
.chip {
  padding: 5px 14px; border-radius: 16px; background: #f5f5f5; color: var(--text-2); font-size: 13px;
}
.chip.is-active { background: #fff0f2; color: var(--red); font-weight: 600; }
/* 「视频」是筛选开关（可和热门/最新叠加），不是排序项：用间距和竖线跟排序组分开 */
.chip--media { margin-left: 10px; position: relative; }
.chip--media::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: #e3e3e3;
}

/* ---------- 瀑布流 ---------- */
.masonry { position: relative; width: 100%; transition: height .2s; }
.card {
  position: absolute; top: 0; left: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .2s, opacity .32s ease;
  will-change: transform;
  contain: layout paint;
}
.card:hover { box-shadow: var(--shadow-hi); z-index: 2; }
.card.is-enter { opacity: 0; transition: none; }
/* 入场：交错延迟（Stagger Delay）+ 微弱弹性上滑（Spring Cascade）。
   位移用独立属性 translate / scale——卡片定位靠 transform:translate3d，两个属性互不覆盖；
   fill-mode:backwards 只负责延迟期间藏住，动画一结束即交还，不会长期压住 hover 等后续样式。
   延迟量 --card-d 由 appendBatch 按「批次内序号」写入（75ms 步进、封顶 750ms，长列表不拖尾）。
   整体节奏刻意放慢（.85s + 75ms 步进）：太快的弹性人眼几乎感知不到，慢一点才看得清「依次弹入」。 */
@keyframes cardSpringIn {
  from { opacity: 0; translate: 0 16px; scale: .96; animation-timing-function: cubic-bezier(.16, .8, .3, 1); }
  60%  { opacity: 1; translate: 0 -3px; scale: 1.008; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
.masonry .card:not(.is-enter) { animation: cardSpringIn .85s backwards; animation-delay: var(--card-d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .masonry .card:not(.is-enter) { animation: none; }
}
.card:hover .card__cover img { transform: scale(1.05); }
.card__cover { position: relative; overflow: hidden; background: #f2f2f2; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card__badge {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px;
  backdrop-filter: blur(4px);
}
/* 多选属性角标容器：横向排列多个 .card__badge，容器自身定位。
   z-index 必须显式写 3：封面图是 position:relative + z-index:1（为了压住 .imgph
   占位图标），而 z-index:auto 的定位元素排在它下面，角标会被图片整个盖住。
   层级约定：imgph 0 → 封面图 1 → 实况预览视频 2 → 角标/播放键 3 → LIVE 4 */
.card__badges {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  display: flex; gap: 4px; flex-wrap: wrap;
  max-width: 72%;
}
.card__badges .card__badge { position: static; }
/* 多图数量角标（右下角），与左上属性角标、右上 LIVE 互不重叠 */
.card__multi {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px;
  line-height: 1.4; backdrop-filter: blur(4px);
}
.card__multi svg { width: 13px; height: 13px; display: block; }
.card__play {
  position: absolute; inset: 0; margin: auto;
  z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
.card__play::before {
  content: ''; border-left: 14px solid currentColor;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 4px;
}
/* —— 实况图（LIVE）角标：深色胶囊 + 圆圈点线图标，仿系统实况样式 —— */
.card__live {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; line-height: 1;
  backdrop-filter: blur(4px); pointer-events: auto; cursor: pointer;
}
.card.is-live-playing .card__live { background: rgba(255, 64, 96, .85); }
.card.is-live-playing .card__live i { border-style: solid; animation: livePulse 1s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.card__live i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px dotted #fff; box-sizing: border-box; flex-shrink: 0;
}
/* —— 图片占位图标：图还没加载出来（或加载失败）时显示，不再是一块空灰底 ——
   图叠在占位之上（z-index:1），所以加载成功的瞬间自然盖住，无需额外处理。 */
.imgph {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  color: #c6c6cd; pointer-events: none;
}
.imgph svg { width: 30px; height: 30px; animation: imgphPulse 1.5s ease-in-out infinite; }
@keyframes imgphPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* 加载失败：占位图标偏灰红并停止呼吸，和「还在加载」区分开 */
.imgph.is-bad { color: #d3a3a8; }
.imgph.is-bad svg { animation: none; opacity: .8; }
/* 图在上面盖住占位；加载失败时藏掉浏览器的碎图标，让占位露出来 */
.card__cover img, .mncard__cover img, .swiper__slide img { position: relative; z-index: 1; }
img.img-bad { visibility: hidden; }
.swiper__slide .imgph { background: var(--bg-soft); }

/* 悬停预览：实况短视频铺满封面（盖在图片上、角标之下） */
.card__livevideo {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.card__body { padding: 12px 14px 14px; }
/* 详情页视频页：黑底居中，不裁切 */
.swiper__slide--video { background: #000; position: relative; }
/* 关键：video 必须绝对定位铺满 slide。只写 height:100% 时，grid/flex 容器里的
   <video> 会退化成按原始分辨率撑开（实测 720x1280 的竖屏视频被撑到 1244px，
   比 760px 的容器高出一截，播放条被顶到可视区外，看着就是一张播不了的图）。 */
.swiper__slide--video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  z-index: 1;                 /* 稳压 .imgph 占位层(z-index:0)，双保险 */
}
/* —— 详情页实况 slide：视频盖在静态图上，默认隐藏，播放时露出 —— */
.swiper__slide--live { position: relative; }
.swiper__slide--live .swiper__livevideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: none;
  background: transparent;
}
.swiper__slide--live.is-playing .swiper__livevideo { display: block; }
.swiper__slide--live.is-playing img { visibility: hidden; }
/* LIVE 角标（详情页可点）：右下角，不与翻页箭头 / 缩放按钮打架 */
.livebadge {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .8px; line-height: 1;
  backdrop-filter: blur(4px); cursor: pointer;
}
.livebadge i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px dotted #fff; box-sizing: border-box; flex-shrink: 0;
}
.livebadge:hover { background: rgba(0, 0, 0, .72); }
.swiper__slide--live.is-playing .livebadge { opacity: .55; }
/* 发布页视频预览 */
.pub__videothumb { position: relative; margin-top: 8px; }
.pub__videothumb video { width: 100%; max-height: 240px; background: #000; border-radius: 10px; display: block; }
.card__title {
  margin: 0 0 5px; font-size: 15px; font-weight: 500; line-height: 1.45; color: #222;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__foot { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.card__avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.card__author { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card__author-txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.card__name {
  font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.card__date { font-size: 11px; color: var(--text-3, #9a9a9a); }
.card__tags {
  /* margin-top: 6px; */
  display: flex; flex-wrap: wrap; gap: 2px 10px;
  font-size: 12px; line-height: 1.2;
}
.card__tags a { color: var(--red); }
.card__tags a:hover { text-decoration: underline; }
/* 小屏（手机/小平板）列表里隐藏话题标签，让卡片更紧凑 */
@media (max-width: 900px) {
  .card__tags { display: none; }
}

.card__like {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2);
}
.card__like svg { width: 15px; height: 15px; }
.card__like.is-liked { color: var(--red); }
.card__like.is-liked svg { fill: currentColor; stroke: currentColor; }
.card__like svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* 骨架屏 */
.skeleton { position: absolute; border-radius: var(--radius); overflow: hidden; background: #fff; }
.skeleton__img, .skeleton__t1, .skeleton__t2 {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: 8px;
}
.skeleton__t1 { height: 14px; margin: 14px 14px 8px; }
.skeleton__t2 { height: 12px; width: 60%; margin: 0 14px 14px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty { padding: 90px 0; text-align: center; color: var(--text-3); }
.empty[hidden] { display: none; }
.empty__act { margin-top: 18px; }
.empty__icon { font-size: 46px; margin-bottom: 12px; }
.empty p { margin: 0 0 4px; font-size: 16px; color: var(--text-2); }
.empty span { font-size: 13px; }

.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 0; color: var(--text-3); font-size: 13px; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #eee; border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sentinel { height: 1px; }

/* ---------- 个人主页 ---------- */
.profile {
  display: flex; gap: 20px; align-items: start;
  padding: 22px 24px; margin-bottom: 8px;
  background: linear-gradient(135deg, #fff6f7, #fff);
  border-radius: 20px;
}
.profile[hidden] { display: none; }
.profile__avatar { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; }
.profile__main { flex: 1; min-width: 0; }
.profile__top { display: flex; align-items: center; gap: 12px; }
.profile__top h2 { margin: 0; font-size: 22px; }
/* 「编辑资料」：只在看自己的主页时出现（app.js 按 is_me 切 hidden），
   所以和 .btn-follow 互斥，两者都靠 margin-left:auto 顶到行尾。 */
.btn-edit {
  margin-left: auto; padding: 6px 18px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; font-weight: 600;
}
.btn-edit:hover { border-color: var(--red); color: var(--red); }
.btn-edit[hidden] { display: none; }
.profile__bio { margin: 6px 0 12px; color: var(--text-2); font-size: 14px; }
/* 统计行：标签必须 white-space:nowrap。
   中文的最小内容宽度是「一个字」——一旦窄屏把 li 压到比标签还窄，
   浏览器会在两个汉字之间断行，5 项统计就变成 笔/关/粉/收/赞 一列竖排。
   flex:none 保住每项的自然宽度，实在放不下时由 flex-wrap 整项换行。 */
.profile__stats { display: flex; gap: 28px; flex-wrap: wrap; row-gap: 10px; }
.profile__stats li { display: flex; flex-direction: column; align-items: center; flex: none; }
.profile__stats b { font-size: 18px; white-space: nowrap; }
.profile__stats span { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* 移动端：资料卡整体收一档，给 5 项统计留出横向空间 */
@media (max-width: 700px) {
  .profile { gap: 14px; padding: 16px; border-radius: 16px; }
  .profile__avatar { width: 64px; height: 64px; }
  .profile__top { gap: 8px; }
  .profile__top h2 { font-size: 19px; }
  .profile__bio { font-size: 13px; margin: 5px 0 10px; }
  .profile__stats { gap: 18px; }
  .profile__stats b { font-size: 16px; }
}
/* 极窄屏（iPhone SE 一类）：再收一档，避免 5 项被挤成两行 */
@media (max-width: 360px) {
  .profile__stats { gap: 13px; }
}

/* ---------- 登录 / 注册 ---------- */
.modal--sm[hidden] { display: none; }
.modal__body--sm { width: min(400px, 92vw); height: auto; padding: 34px 30px 26px; }
.auth { text-align: center; }
.auth__logo {
  font-size: 26px; font-weight: 800; letter-spacing: 1px; margin-bottom: 18px;
  background: linear-gradient(135deg, #ff2442, #ff6a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth__tabs { display: flex; gap: 24px; justify-content: center; margin-bottom: 20px; }
.auth__tabs button { font-size: 16px; color: var(--text-3); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.auth__tabs button.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--red); }
.field { display: block; text-align: left; margin-bottom: 14px; }
.field[hidden] { display: none; }
/* 只作用于字段自己的标题行（.field 的直接子 span）。
   以前写成后代选择器 `.field span`，会连话题标签 .tagchip 一起命中——
   它的优先级 (0,1,1) 高于 .tagchip (0,1,0)，把标签强制成 display:block，
   结果每个话题各占一行（颜色也被盖成灰色）。必须用直接子选择器限定范围。 */
.field > span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.field input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid #e5e5e5; border-radius: 10px; outline: none; font-size: 14px;
}
.field input:focus { border-color: var(--red); }
.auth__err { min-height: 18px; margin: 2px 0 10px; font-size: 13px; color: var(--red); }
.btn-block { width: 100%; height: 44px; border-radius: 22px; font-size: 16px; }
.btn-primary:disabled { opacity: .6; }
.auth__tip { margin: 16px 0 0; font-size: 12px; color: var(--text-3); }

/* ---------- 个人资料页 /profile ---------- */
.pf { width: 100%; max-width: 640px; margin: 0 auto; }
.pf__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pf__avatar {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  object-fit: cover; background: #f5f5f7; box-shadow: 0 0 0 1px var(--line);
}
.pf__head-main { min-width: 0; }
.pf__avatar-btn {
  height: 34px; padding: 0 16px; border-radius: 17px; cursor: pointer;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; color: var(--text);
}
.pf__avatar-btn:hover { border-color: var(--red); color: var(--red); }
.pf__hint { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }

/* 统计：和个人主页 .profile__stats 同一套「禁止折行」规则（中文能被逐字断行） */
.pf__stats {
  display: flex; gap: 12px; flex-wrap: wrap; row-gap: 10px;
  margin: 0 0 22px; padding: 14px 16px;
  background: #fff; border-radius: 14px;
}
.pf__stats li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.pf__stats b { font-size: 17px; white-space: nowrap; }
.pf__stats span { font-size: 12px; color: var(--text-3); white-space: nowrap; }

.pf .field input:disabled { background: #fafafa; color: var(--text-3); cursor: not-allowed; }
.pf textarea {
  width: 100%; padding: 10px 14px; resize: vertical;
  border: 1px solid #e5e5e5; border-radius: 10px; outline: none;
  font-family: inherit; font-size: 14px; line-height: 1.6;
}
.pf textarea:focus { border-color: var(--red); }

.pf__sec { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pf__sec-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--text); }
.btn-ghost {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-ghost:disabled { opacity: .6; }
.pf__logout {
  width: 100%; height: 44px; margin-top: 22px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  font-size: 15px; color: var(--red);
}
.pf__logout:hover { background: #fff5f6; }

/* ---------- 发布笔记 ---------- */
.pub h3 { margin: 0 0 18px; font-size: 18px; }
/* 「发布」按钮吸底：内容再长也随时能点 */
.pub .btn-block { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .45); }
.pub textarea {
  width: 100%; padding: 10px 14px; resize: vertical;
  border: 1px solid #e5e5e5; border-radius: 10px; outline: none;
  font-family: inherit; font-size: 14px; line-height: 1.6;
}
.pub textarea:focus { border-color: var(--red); }
.field select {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid #e5e5e5; border-radius: 10px; outline: none;
  font-size: 14px; background: #fff;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.pub__boards {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pub__board {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 18px;
  background: #f5f5f5; border: 1px solid #e5e5e5;
  font-size: 14px; color: var(--text-2); cursor: pointer;
  transition: all .15s;
}
.pub__board.is-active {
  background: #fff0f2; border-color: var(--red); color: var(--red); font-weight: 600;
}
.pub__board input {
  width: 16px; height: 16px; accent-color: var(--red);
}
.pub__board span {
  margin-bottom:0;
}
.pub__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pub__thumbs:not(:empty) { margin-bottom: 8px; }
.pub__thumb { position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: #f2f2f2; cursor: grab; }
.pub__thumb:active { cursor: grabbing; }
.pub__thumb.is-drag { opacity: .4; }
.pub__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pub__thumb-del {
  position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.pub__thumb-tag {
  position: absolute; left: 0; bottom: 0; width: 100%; text-align: center;
  font-size: 10px; color: #fff; background: rgba(0, 0, 0, .45); padding: 1px 0;
}
/* —— 发布页：实况缩略角标 + 绑定/移除按钮 —— */
.pub__thumb-livetag {
  position: absolute; left: 3px; top: 3px; z-index: 2;
  padding: 2px 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .5px; line-height: 1;
}
.pub__thumb-livebtn {
  position: absolute; left: 3px; bottom: 3px; z-index: 2;
  border: 0; border-radius: 6px; cursor: pointer;
  padding: 2px 5px; font-size: 10px; line-height: 1.2;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.pub__thumb-livebtn:hover { background: rgba(0, 0, 0, .75); }
.pub__thumb-livebtn.is-on { background: var(--red); }
.pub__preview[hidden] { display: none; }
.pub__preview {
  width: 100%; height: 130px; border: 1px dashed #ddd; border-radius: 12px;
  display: grid; place-items: center; gap: 4px; font-size: 26px; color: var(--text-3);
  background: #fafafa; overflow: hidden;
}
/* margin-bottom 以前是靠 `.field span` 继承来的；改成 .field > span 后需显式补回，保持原样 */
.pub__preview span { display: block; font-size: 13px; margin-bottom: 6px; }
.pub__preview img { width: 100%; height: 100%; object-fit: cover; }
.pub__preview:hover { border-color: var(--red); }
.pub__tip { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }

/* ---------- 详情页 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.page--simple[hidden] { display: none; }
.modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
/* 详情弹窗（#modal）用暗色半透明遮罩：小红书同款 25% 黑，列表若隐若现；
   登录/分享/发布等小弹窗保持更重的暗底 */
#modal .modal__mask { background: rgba(0, 0, 0, .25); }
.modal__body {
  position: relative;
  width: min(1100px, 92vw); height: min(760px, 86vh);
  background: #fff; border-radius: var(--radius-modal); overflow: hidden;
  /* 白遮罩上靠一道柔影勾出容器边缘，否则白上白、形变时「连续缩放」看不出来 */
  box-shadow: 0 24px 80px rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .06);
}
/* 进出：小红书式「整体淡入 + 轻微放大」——不改尺寸、不逐帧形变，
   既没有重排抖动，也不会有白卡挡住内容、内容迟到的问题。
   例外：从列表卡片点进来时走共享元素转场（见下方 .modal.is-morph），由 JS FLIP 驱动。 */
.modal.is-open .modal__mask { animation: sgFadeIn .18s ease both; }
.modal.is-open .modal__body { animation: sgPopIn .22s cubic-bezier(.16, .84, .3, 1) both; }
.modal.is-closing { pointer-events: none; }
.modal.is-closing .modal__mask { animation: sgFadeOut .16s ease both; }
.modal.is-closing .modal__body { animation: sgPopOut .16s cubic-bezier(.4, 0, .7, .2) both; }
@keyframes sgFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sgPopIn   { from { opacity: 0; transform: scale(.955); } to { opacity: 1; transform: scale(1); } }
@keyframes sgPopOut  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  .modal.is-open .modal__mask, .modal.is-open .modal__body,
  .modal.is-closing .modal__mask, .modal.is-closing .modal__body { animation-duration: .01s; }
}

/* ---------- 共享元素转场（列表 Card → 详情弹窗） ----------
   打开：卡片封面作为「共享元素」连续放大成详情媒体区里的图；白色弹窗容器从封面矩形
   连续平滑缩放撑开成弹窗；白色遮罩只做纯淡入，不缩放、不跟随容器节奏。
   关闭：整体反向——容器缩回卡片封面，幽灵图同步飞回后交叉淡出。
   降级：无来源卡片（分享链接直开）/ 卡片滚出视口 / prefers-reduced-motion → 上面的淡入放大。 */
/* 遮罩：独立的纯淡入 / 淡出（只动 opacity，不与弹窗一起缩放） */
.modal.is-morph .modal__mask { animation: sgFadeIn .3s ease both; }
.modal.is-morph.is-closing .modal__mask { animation: sgFadeOut .24s ease both; }
/* 形变期间弹窗本体的 transform / border-radius 由 JS FLIP 驱动，关掉 CSS 动画免得打架 */
.modal.is-morph .modal__body, .modal.is-morph.is-closing .modal__body { animation: none; }
/* 内容晚一步淡入：形变途中文字不被拉伸；is-in 由 JS 在容器快落位时加上 */
.modal .detail { transition: opacity .16s ease; }
.modal.is-morph .detail { opacity: 0; }
.modal.is-morph .detail.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .modal.is-morph .modal__mask, .modal.is-morph.is-closing .modal__mask { animation-duration: .01s; }
}

/* 共享元素「幽灵层」：一张会飞的封面图。边界直接动画 left/top/width/height，
   配合 object-fit:cover——盒子两端都是原图比例，全程不裁剪、不变形，
   终点与详情里的真实图像素级重合，交叉淡出零接缝。 */
.morph-ghost {
  position: fixed; z-index: 400; overflow: hidden;
  border-radius: var(--radius);
  background: #f2f2f2;                 /* 与卡片封面同色，图没到位时不露白 */
  pointer-events: none;
}
.morph-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.morph-ghost.is-out { opacity: 0; transition: opacity .13s ease; }

/* ---------- 图片查看器（详情弹窗里点图片放大） ---------- */
/* 层级要盖在详情弹窗（100）和 toast（200）之上 */
.viewer { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.viewer[hidden] { display: none; }
.viewer__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .93); }
.viewer.is-open .viewer__mask { animation: sgFadeIn .18s ease both; }
.viewer.is-open .viewer__stage { animation: sgPopIn .2s cubic-bezier(.16, .84, .3, 1) both; }
.viewer.is-closing { pointer-events: none; }
.viewer.is-closing .viewer__mask { animation: sgFadeOut .16s ease both; }
.viewer.is-closing .viewer__stage { animation: sgPopOut .16s cubic-bezier(.4, 0, .7, .2) both; }

/* stage 不再用 grid：每屏 .viewer__slide 自己居中图片，stage 只要当裁剪容器。
   之前 stage 是 display:grid + place-items:center，轨道就成了 grid item，
   它的 min-width:auto 会自动抬到「内容最小宽度」（各屏图片内在宽度之和）——
   图片越多越大轨道越宽，实测 1920 宽下翻页后 track 从 1920 涨到 2217，
   于是每屏都变宽、按旧宽算的位移就偏得越来越离谱（图不在中间，且偏移随页码递增）。 */
.viewer__stage {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
/* 查看器是真实 track 轮播（与详情轮播同款）：拖动时邻图跟手滑入，
   松手按阈值翻页或回弹。翻页/平移都只动 transform，合成器执行不读布局。
   min-width:0 是硬保险：轨道宽度必须恒等于可视区，任何情况下都不许被内容顶大。 */
.viewer__track {
  display: flex; width: 100%; height: 100%; min-width: 0;
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
.viewer__slide {
  flex: 0 0 100%; width: 100%; height: 100%; min-width: 0;
  display: grid; place-items: center; position: relative;
}
/* ---- 加载态（2026-10-13）----
   原图是渐进式 JPEG：下载到一半浏览器就会把「解了一半」的像素画进元素框，
   于是加载过程中看到的是一张半透明鬼影（且框会从 0×0 突然长到全尺寸）。
   三层兜底：
   ① .viewer__ph 骨架按原图宽高比（JS 写入 --arn）预留出「最终图片的框」→ 加载中不跳动；
   ② 先铺详情页已缓存的缩略图并模糊（.is-lqip）→ 有内容可看，不是空白；
   ③ 原图另起 Image() 探针预载完再换上 → 不会出现半成品像素。 */
.viewer__ph {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, calc(92vh * var(--arn, .75)));
  height: min(92vh, calc(92vw / var(--arn, .75)));
  border-radius: 3px; overflow: hidden;
  background: #17171a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: opacity .26s ease;
}
.viewer__ph::after {                 /* 微光横扫，表示还在加载 */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .06) 50%, transparent 82%);
  transform: translateX(-100%);
  animation: phShimmer 1.3s ease-in-out infinite;
}
@keyframes phShimmer { to { transform: translateX(100%); } }
.viewer__slide.is-ready .viewer__ph, .viewer__slide.is-error .viewer__ph { opacity: 0; }
/* 模糊底图正中的加载指示器：底环 + 缺角弧转圈。
   旋转放在伪元素上——父元素的 translate(-50%,-50%) 居中 transform 不能被动画覆盖。 */
.viewer__load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, .46); backdrop-filter: blur(2px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .2s ease;
}
.viewer__slide.is-loading .viewer__load { opacity: 1; }
.viewer__load::before, .viewer__load::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #fff;
  animation: viewerSpin .78s linear infinite;
}
.viewer__load::before { inset: 5px; }
.viewer__load::after {                              /* 外圈慢半拍反向转，转起来更有层次 */
  inset: -2px; opacity: .4; border-top-color: rgba(255, 255, 255, .85);
  animation-duration: 1.5s; animation-direction: reverse;
}
@keyframes viewerSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .viewer__load::before, .viewer__load::after { animation-duration: 2.4s; }
  .viewer__ph::after { animation: none; }
}
.viewer__slide.is-lqip img { opacity: .92; filter: blur(16px); }
.viewer__slide.is-ready img { opacity: 1; }
/* 失败态压过一切：哪怕状态类意外共存，也绝不显示空白框或残影 */
.viewer__slide.is-error img { opacity: 0; filter: none; }
.viewer__err {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: none; flex-direction: column; align-items: center; gap: 9px;
  padding: 20px 24px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .8); font-size: 13px;
}
.viewer__err svg { width: 26px; height: 26px; opacity: .8; }
.viewer__slide.is-error .viewer__err { display: flex; }
/* img 保持 max-width/max-height 固有尺寸（元素盒=图片盒），
   缩放定位数学（viewerBase 反解）才准；object-fit 仅兜底。
   opacity 默认 0：探针把原图换上来之前，绝不把「解了一半」的像素露给用户。 */
.viewer__slide img {
  max-width: 92vw; max-height: 92vh; display: block;
  object-fit: contain; background: transparent;
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .3s ease, filter .3s ease;
  cursor: zoom-out; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer__stage.is-zoom img { cursor: grab; }
.viewer__stage.is-dragging img { cursor: grabbing; }

.viewer__close {
  position: absolute; right: 18px; top: 18px;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(4px);
  text-align:center;line-height:38px;
}
.viewer__close svg { width: 20px; height: 20px; }
.viewer__close:hover { background: rgba(255, 255, 255, .24); }

.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(4px); opacity: .85; transition: opacity .2s, background .2s;
}
.viewer__nav:hover { opacity: 1; background: rgba(255, 255, 255, .24); }
.viewer__nav svg { width: 22px; height: 22px; }
.viewer__nav[hidden] { display: none; }
.viewer__nav--prev { left: 20px; }
.viewer__nav--next { right: 20px; }

.viewer__counter {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px;
  backdrop-filter: blur(4px);
}
.viewer__counter[hidden] { display: none; }
.viewer__dots {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 12px;
}
.viewer__dots:empty { display: none; }
.viewer__dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .4); transition: background .2s;
}
/* 当前项不再靠「圆点自己变宽」表现——变宽会挤乱相邻点的间距，滑动时也没法连续插值。
   改成一条独立的白色药丸跨在点上：拖动中按滑动进度在相邻两点之间插值（跟手），
   松手才带过渡落到目标点。跟手期间必须关掉过渡（.is-tracking），
   否则药丸会「追」手指，看着发飘。
   ⚠ 尺寸是算出来的，别随手改：药丸宽 P、圆点宽 d、点距 step=d+gap 时，
     药丸两侧的净间隔恒为 step-(P+d)/2，比普通间隔 gap 少 (P-d)/2。
     原先 P=18 / gap=7 → 两侧只剩 1.5px，看上去「贴」在邻点上，很不自然；
     现 P=15 / gap=12 → 两侧 8px（普通 12px），差值也从 5.5px 收窄到 4px。 */
.viewer__pill {
  position: absolute; left: 0; top: 50%; z-index: 1; pointer-events: none;
  width: 15px; height: 7px; border-radius: 4px; background: #fff;
  transform: translate3d(0, -50%, 0);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
.viewer__dots.is-tracking .viewer__pill { transition: none; }
.viewer__dot.is-on { background: rgba(255, 255, 255, .8); }
.viewer__tip {
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 12px; color: rgba(255, 255, 255, .5); pointer-events: none;
}
@media (max-width: 700px) {
  .viewer__slide img { max-width: 96vw; max-height: 84vh; }
  .viewer__nav { width: 36px; height: 36px; }
  .viewer__nav--prev { left: 8px; }
  .viewer__nav--next { right: 8px; }
  .viewer__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__pill { transition-duration: .01s; }
  .viewer.is-open .viewer__mask, .viewer.is-open .viewer__stage,
  .viewer.is-closing .viewer__mask, .viewer.is-closing .viewer__stage { animation-duration: .01s; }
}

/* 打开弹窗锁背景滚动时，补一条 padding-right 抵消滚动条消失的宽度，
   否则整个页面（含固定顶栏 / 底栏）会横移一下，看起来就是"闪动" */
html.is-scroll-locked body { overflow: hidden; padding-right: var(--sbw, 0px); }
html.is-scroll-locked .topbar { padding-right: var(--sbw, 0px); }
html.is-scroll-locked .tabbar { padding-right: var(--sbw, 0px); }

/* 小弹窗（登录 / 发布 / 关注列表）：内容变高时在弹窗内部滚动，
   否则加了话题/图片后会把「发布」按钮顶到屏幕外又没法滚 */
.modal__body--sm {
  height: auto;
  max-height: min(820px, calc(100vh - 56px));
  max-height: min(820px, calc(100dvh - 56px));
  overflow-x: hidden;
  overflow-y: auto;            /* 兜底：万一内容区没收缩，弹窗自己也能滚 */
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
/* 内容区自己滚，右上角的关闭按钮和弹窗边框保持不动 */
.modal--sm .modal__body > .pub,
.modal--sm .modal__body > .auth,
.modal--sm .modal__body > .people {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__body--sm::-webkit-scrollbar,
.modal--sm .modal__body > .pub::-webkit-scrollbar,
.modal--sm .modal__body > .people::-webkit-scrollbar { width: 8px; }
.modal__body--sm::-webkit-scrollbar-thumb,
.modal--sm .modal__body > .pub::-webkit-scrollbar-thumb,
.modal--sm .modal__body > .people::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 8px; }
.modal__body--sm::-webkit-scrollbar-thumb:hover,
.modal--sm .modal__body > .pub::-webkit-scrollbar-thumb:hover,
.modal--sm .modal__body > .people::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .32); }
.modal__close {
  position: absolute; right: 14px; top: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center;
  text-align:center;
  line-height:34px;
}
.modal__close svg { width: 18px; height: 18px; }
.detail { display: flex; height: 100%; }
.detail__media { flex: 1.15; background: #f7f7f7; overflow: hidden; }
/* 多图轮播 */
.swiper { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; }
.swiper.is-dragging { cursor: grabbing; }
.swiper__slide img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.swiper__track { display: flex; width: 100%; height: 100%; transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.swiper__slide { flex: 0 0 100%; width: 100%; height: 100%; display: grid; place-items: center; }
/* 每屏都必须是定位上下文（position:relative）。
   否则屏内的 `position:absolute; inset:0` 子元素（.imgph 占位层、实况视频、翻页按钮）
   会向上找到 .swiper 作为包含块，从「本屏」逃逸成「铺满整个轮播区」——
   实测：视频笔记的第一屏是视频（黑底），第二屏是图片且 .swiper__slide 为 static，
   于是第二屏的 .imgph（#f7f7f7）逃逸后横跨在视频屏之上，视频在正常解码播放
   （readyState=4、presentedFrames 持续增长）却完全看不见，只剩一个灰底占位图标。 */
.swiper__slide { position: relative; }
/* 关键：img 必须绝对定位铺满 slide，与上方视频同款处理。只写 width/height:100% 时，
   grid 子项默认的 min-height:auto 会按内容（固有高度）把 height:100% 顶破——
   实测 810x1080 的竖图在 700px 宽的媒体区被撑成 700x933，比 760px 的容器高出一截，
   底部被 overflow 裁掉；共享元素转场时幽灵图还会飞到这个溢出矩形上、直接撑破弹窗，
   落位后再替换成被裁过的真图，就是「窗口完全打开后图片尺寸/位置跳一下」。
   object-fit:cover（2026-10-13 起）：图铺满整个 slide，短边溢出被裁，
   与列表卡片封面同款——容器里不留灰边。视频 slide 仍是 contain（黑底不裁切）。 */
.swiper__slide img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in;
}
.swiper__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .2s;
}
.swiper__nav svg { width: 18px; height: 18px; }
.swiper:hover .swiper__nav { opacity: 1; }
.swiper__nav--prev { left: 12px; }
.swiper__nav--next { right: 12px; }
.swiper__nav[hidden] { display: none; }
.swiper__counter {
  position: absolute; left: 50%;margin-left:-20px; top: 14px;
  padding: 3px 9px; border-radius: 10px;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px;
  backdrop-filter: blur(4px);
}
.swiper__counter[hidden] { display: none; }
.swiper__dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px;
}
.swiper__dot {
  width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5); transition: all .2s;
}
.swiper__dot.is-on { background: #fff; width: 16px; border-radius: 3px; }
.swiper__dots:empty { display: none; }
/* 右上角「放大」入口：提示这张图可以点开看大图 */
.swiper__zoom {
  position: absolute; right: 12px; bottom: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .38); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, background .2s; backdrop-filter: blur(4px);
}
.swiper__zoom svg { width: 17px; height: 17px; }
.swiper:hover .swiper__zoom { opacity: 1; }
.swiper__zoom:hover { background: rgba(0, 0, 0, .58); }
@media (max-width: 700px) { .swiper__zoom { opacity: 1; } }
.detail__side { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.detail__author { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px;flex: auto 2 auto border-bottom: 1px solid var(--line); }
.detail__author img { width: 40px; height: 40px; border-radius: 50%; }
.detail__author button { width: 85px;  }
.detail__author-info { display: flex; flex-direction: column; min-width: 0; }
.detail__author-info strong { font-size: 15px; }
.detail__author-info span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-follow {
  margin-left: auto; padding: 6px 18px; border-radius: 16px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 600;
}
.btn-follow.is-on { background: #f5f5f5; color: var(--text-2); }
.detail__scroll { flex: 1; overflow-y: auto; padding: 18px 20px 10px; }
.detail__scroll h1 { margin: 0 0 12px; font-size: 19px; line-height: 1.4; }
.detail__text { font-size: 15px; line-height: 1.85; color: #333; white-space: pre-wrap; }
.detail__tags { margin: 14px 0 10px; color: #13386c; font-size: 14px; line-height: 2; }
.detail__meta { font-size: 12px; color: var(--text-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.detail__comments-head { font-size: 13px; color: var(--text-2); padding: 16px 0 10px; }
.detail__comments ul { display: flex; flex-direction: column; gap: 18px; padding-bottom: 20px; }
.cmt { display: flex; gap: 10px; }
.cmt img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.cmt__main { flex: 1; min-width: 0; }
.cmt__name { font-size: 13px; color: var(--text-3); cursor: pointer; }
.cmt__text { font-size: 14px; line-height: 1.6; margin: 2px 0 4px; word-break: break-word; }
.cmt__text .cmt__rto { color: var(--text-3); }
.cmt__time { font-size: 12px; color: var(--text-3); }
.cmt__foot { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.cmt__foot button { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.cmt__foot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cmt__more-rep { margin-top: 8px; }
.cmt__more-rep button { font-size: 13px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.cmt__more-rep button:hover { color: var(--text); }
/* 回复（子评论）：缩进 + 小头像 */
.cmt__replies { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.cmt--sub { gap: 8px; }
.cmt--sub img { width: 24px; height: 24px; }
.cmt--sub .cmt__text { font-size: 13.5px; }
.cmt--sub .cmt__foot { margin-top: 4px; gap: 14px; }
.cmt__del { color: var(--text-3); }
.cmt__loading { font-size: 13px; color: var(--text-3); padding: 8px 0; }
.detail__author-info strong { cursor: pointer; }
.detail__author img { cursor: pointer; }
.btn-follow[hidden] { display: none; }
.detail__bar {
  border-top: 1px solid var(--line); background: #fff;
}
.detail__bar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
}
/* display:flex 会压过 hidden 的 UA 样式（同二维码那个坑），必须显式声明，
   否则输入区展开时底栏行还挤在下面（截图里两行同时出现的根因） */
.detail__bar-row[hidden] { display: none; }
/* 详情页返回顶部：桌面端不显示（弹窗高度有限、内容一屏内） */
.detail__totop { display: none; }

/* ---------- 分享弹窗（详情页 → 分享按钮，底部弹出） ---------- */
.sharesheet { position: fixed; inset: 0; z-index: 130; }
.sharesheet[hidden] { display: none; }
.sharesheet__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.sharesheet__panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 100%);
  background: #fff; border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
}
.sharesheet.is-open .sharesheet__panel { animation: sgSheetUp .22s cubic-bezier(.2, .8, .3, 1) both; }
.sharesheet.is-open .sharesheet__mask { animation: sgFadeIn .18s ease both; }
@keyframes sgSheetUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sharesheet__title { text-align: center; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.sharesheet__friends {
  min-height: 170px; display: grid; place-items: center;
  border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.sharesheet__empty { display: grid; justify-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.sharesheet__empty svg { width: 58px; height: 58px; color: #ddd; }
.sharesheet__actions { display: flex; justify-content: space-around; }
/* hidden 属性会被上面的 display:flex 干掉，这里必须显式压回来 */
.sharesheet__actions[hidden], .sharesheet__qr[hidden] { display: none; }
.sharesheet__actions button { display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.sharesheet__actions i {
  width: 54px; height: 54px; border-radius: 50%;
  background: #f5f5f5; color: var(--text);
  display: grid; place-items: center; transition: transform .15s;
}
.sharesheet__actions i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }
.sharesheet__actions button:active i { background: #ffeef1; color: var(--red); transform: scale(.94); }
.sharesheet__qr { text-align: center; }
/* img 全局是 display:block，text-align 管不到它，必须 margin:auto 居中 */
.sharesheet__qr img { width: 200px; height: 200px; margin: 0 auto; background: #f7f7f7; border-radius: 12px; }
.sharesheet__qr p { font-size: 12px; color: var(--text-3); margin: 10px 0 12px; word-break: break-all; }
.sharesheet__qr button { padding: 8px 24px; border-radius: 18px; background: #f5f5f5; font-size: 13px; color: var(--text-2); }
/* 二维码视图下隐藏好友区，面板收紧 */
.sharesheet.is-qr .sharesheet__friends { display: none; }
.sharesheet.is-qr .sharesheet__panel { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* PC 端：不再是底部弹层，JS 锚定到分享按钮上方的小浮层 */
@media (min-width: 901px) {
  .sharesheet.is-pop .sharesheet__panel {
    width: 360px;
    left: auto; right: auto; bottom: auto; transform: none;
    border-radius: 18px;
    box-shadow: var(--shadow-hi);
    animation: sgPopIn .18s ease both;
  }
  .sharesheet.is-pop .sharesheet__friends { min-height: 120px; }
}
@keyframes sgPopIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 三个按钮不参与收缩，尺寸固定；空间不够时让下面的输入框让位 */
.act { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-2); flex-shrink: 0; }
.act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.act em { font-style: normal; }
.act.is-on { color: var(--red); }
.act.is-on svg { fill: currentColor; }
/* 左侧「说点什么...」胶囊（带头像），点击展开评论输入区 */
.detail__opener {
  flex: 1 1 0%; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: #f5f5f5; border-radius: 20px; padding: 5px 14px 5px 5px;
  text-align: left; color: var(--text-3); font-size: 14px;
}
.detail__opener img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.detail__opener span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail__bar-acts { display: flex; align-items: center; gap: 10px; }

/* ---------- 评论输入区（点胶囊展开） ---------- */
.composer { padding: 0 16px 10px; }
.composer[hidden] { display: none; }
.composer__box {
  display: flex; align-items: center; gap: 6px;
  background: #f5f5f5; border-radius: 12px; padding: 6px 10px;
}
.composer__box input { flex: 1; border: none; background: none; outline: none; font-size: 14px; min-width: 0; }
.composer__quick { display: flex; gap: 4px; flex-shrink: 0; }
.composer__quick button { font-size: 18px; line-height: 1; padding: 2px; }
.composer__row { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.composer__tool {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; color: var(--text-2); background: transparent;
}
.composer__tool:hover, .composer__tool:active { background: #f5f5f5; color: var(--text); }
.composer__spacer { flex: 1; }
.composer__send {
  padding: 8px 22px; border-radius: 19px;
  background: var(--red); color: #fff; font-size: 14px; font-weight: 600;
}
.composer__send:disabled { opacity: .6; }
.composer__cancel {
  padding: 8px 18px; border-radius: 19px;
  background: #f5f5f5; color: var(--text-2); font-size: 14px;
}
.composer__palette {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  background: #fafafa; border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; margin-top: 10px;
}
.composer__palette[hidden] { display: none; }
.composer__palette button { font-size: 20px; padding: 4px 0; border-radius: 8px; }
.composer__palette button:hover { background: #f0f0f0; }

/* ---------- 其他页 / toast / 回到顶部 ---------- */
.page--simple { position: fixed; inset: 0; z-index: 90; background: #fff; display: grid; place-items: center; }
.page__box { text-align: center; max-width: 380px; padding: 24px; }
.page__emoji { font-size: 52px; }
.page__box h3 { margin: 12px 0 8px; font-size: 20px; }
.page__box p { color: var(--text-2); margin: 0 0 22px; }
.btn-primary { padding: 10px 26px; border-radius: 22px; background: var(--red); color: #fff; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  padding: 10px 20px; border-radius: 10px;
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 200;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.to-top {
  position: fixed; right: 26px; bottom: 30px;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-hi); color: var(--text-2);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 50;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-show { opacity: 1; pointer-events: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .topnav__item[data-page="video"], .topnav__item[data-page="follow"] { display: none; }
}
@media (max-width: 900px) {
  .layout { padding: calc(var(--topbar-h) + 8px) 12px 70px; }
  .logo { display: flex; position: relative; z-index: 2; }
  .logo__sub { display: none; }
  .topbar__right { display: none; }
  .topnav { display: none; }
  .search { display: none; }
  .mobnav__search { display: grid; }   /* 小屏没有常驻搜索框，才需要这个入口 */
  .topbar__inner { position: relative; padding: 0 12px; }
  .mobnav {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px;
  }
  .mobnav__logo { display: block; position: relative; z-index: 2; }
  .mobnav__tabs { position: absolute; left: 50%; transform: translateX(-50%); gap: 18px; }
  .boardbar { display: none; }
  .navline { display: none; }
  /* iOS Safari 的老规矩：input / textarea 字号 < 16px 时一旦获取焦点就会把
     整页放大，而且不会自动缩回。站内输入框原本都是 13/14px，所以移动端统一
     提到 16px（桌面端保持原字号，视觉不变）。 */
  .search input,
  .field input,
  .field select,
  .pub textarea,
  .pub__tagwrap input,
  /* 原规则是 .pub__tagwrap input#pTagInput（带 id，且写在文件更后面），
     必须比它更具体才能覆盖，所以前面加一层 .pub */
  .pub .pub__tagwrap input#pTagInput,
  input, textarea, select { font-size: 16px; }
  /* 移动端用 dvh：100vh 会把浏览器地址栏算进去，底部一截被顶出屏幕 */
  .modal__body { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .detail {
    flex-direction: column;
    overflow-y: auto;                    /* 详情整体滚动（图片不再固定在顶部） */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;        /* 滚到底不把背景页面一起带着滚 */
  }
  /* 详情页整体滚动：.detail 自己成为滚动容器，图片随内容一起滚走（不再固定在顶部），
     操作栏 sticky 吸底；替代旧方案（图片钉在 42%、文字区内部滚）。 */
  .detail__media { flex: none; height: 100vw; max-height: 70vh; }
  .detail__side { width: 100%; flex: none; min-height: 0; border-left: none; }
  /* 侧栏内部不再滚动，让内容自然撑开、交给 .detail 统一滚 */
  .detail__scroll { flex: none; overflow: visible; }
  .detail__bar {
    position: sticky; bottom: 0; z-index: 6;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* 详情页返回顶部：浮在吸底操作栏上方，PC 端隐藏（桌面弹窗不需要） */
  .detail__totop {
    position: absolute; right: 14px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-hi); color: var(--text-2);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 8;
  }
  .detail__totop svg { width: 19px; height: 19px; }
  .detail__totop.is-show { opacity: 1; pointer-events: auto; }
  /* 评论输入区展开时按钮会盖住「发送/取消」，由 JS 加 is-hide 强制隐藏 */
  .detail__totop.is-hide { opacity: 0 !important; pointer-events: none !important; }
  .tabbar { display: flex; }
	.to-top {
	   bottom: 80px;right: 15px;
	}
}
@media (min-width: 901px) { .tabbar { display: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  height: 56px; background: #fff; border-top: 1px solid var(--line);
  align-items: center; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-3); }
.tabbar__item i { font-style: normal; font-size: 20px; }
.tabbar__item.is-active { color: var(--red); }
.tabbar__plus span {
  width: 46px; height: 32px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 22px;
  display: grid; place-items: center; line-height: 1;
}

/* 列宽：由 JS 计算，这里只保证默认 */
@media (max-width: 560px) {
  .logo__sub { display: none; }
  .topbar__inner { padding: 0 12px; gap: 12px; }
  .card__title { font-size: 14px; }
}

/* ---------- 关注 / 粉丝列表 ---------- */
.profile__stats li.is-link { cursor: pointer; }
.profile__stats li.is-link:hover b { color: var(--red); }
.people { display: flex; flex-direction: column; height: 100%; min-height: 320px; }
.people__tabs { display: flex; gap: 24px; justify-content: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.people__tabs button { font-size: 15px; color: var(--text-3); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.people__tabs button.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--red); }
.people__list { flex: 1; overflow-y: auto; padding: 6px 0; }
.people__item { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.people__item img { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.people__item-main { flex: 1; min-width: 0; }
.people__item-name { font-size: 14px; font-weight: 600; cursor: pointer; }
.people__item-bio { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people__more { margin: 0; padding: 10px 0 0; text-align: center; font-size: 13px; color: var(--red); cursor: pointer; }
.people__empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--text-3); }

/* ---------- 评论操作 ---------- */
.cmt__foot button.is-on { color: var(--red); }
.cmt__del { color: var(--text-3); }
.cmt__del:hover { color: var(--red); }

/* ---------- 无障碍隐藏标题 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 加载到底：不再转圈 */
.loading.is-end .spinner { display: none; }
.loading.is-end { color: var(--text-3); }

/* ---------- 服务端渲染的列表（无 JS / 爬虫可见，瀑布流就绪后移除） ---------- */
.seo-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
/* 有 JS 时立刻不画这份 SSR 列表：否则会「先渲染一次内容、JS 接管后再换成
   骨架屏重载一次」，用户看到内容消失又重现（网络越慢闪得越明显）。
   不跑 JS 的爬虫/环境仍然能看到它，SEO 不受影响。
   标记由 <head> 里那行内联脚本documentElement.classList.add('js') 打上。 */
.js .seo-feed { display: none; }
.seo-feed__empty { color: var(--text-3); font-size: 13px; padding: 20px 0; }
.seo-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.seo-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.seo-item__cover { display: block; background: var(--bg-soft); }
.seo-item__cover img { width: 100%; height: 190px; object-fit: cover; }
.seo-item__body { padding: 12px 14px 14px; }
.seo-item__title {
  margin: 0 0 6px; font-size: 15px; font-weight: 500; line-height: 1.45; color: #222;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seo-item__title a:hover { color: var(--red); }
.seo-item__excerpt {
  margin: 0 0 8px; font-size: 13px; color: var(--text-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seo-item__meta { margin: 0; font-size: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.seo-item__meta a { color: var(--red); }
.seo-item__meta a:hover { text-decoration: underline; }

/* ---------- 站点页脚 ---------- */
.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 34px 24px 90px;
}
.sitefoot__inner {
  max-width: 1720px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.sitefoot__brand strong { font-size: 16px; }
.sitefoot__brand p { margin: 8px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.8; max-width: 560px; }
.sitefoot__nav h5 { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.sitefoot__nav ul { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.sitefoot__nav a { font-size: 13px; color: var(--text-2); }
.sitefoot__nav a:hover { color: var(--red); }
.sitefoot__copy {
  max-width: 1720px; margin: 24px auto 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); text-align: center;
}
.sitefoot__icp {
  max-width: 1720px; margin: 8px auto 0;
  font-size: 12px; color: var(--text-3); text-align: center;
}
.sitefoot__icp a { color: var(--text-3); }
.sitefoot__icp a:hover { color: var(--red); text-decoration: underline; }
.sitefoot__ga { margin-top: 4px; }
.sitefoot__legal {
  max-width: 1720px; margin: 20px auto 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); line-height: 1.9; text-align: center;
}
.sitefoot__legal p { margin: 0 0 6px; }
.sitefoot__legal p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .sitefoot__inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- 独立详情页 note.php ---------- */
.notepage {
  max-width: 1180px; margin: 0 auto;
  padding: calc(var(--topbar-h) + 24px) 20px 60px;
  display: flex; gap: 28px; align-items: flex-start;
}
.notepage__main { flex: 1; min-width: 0; background: #fff; }
.notepage__crumb { font-size: 13px; color: var(--text-3); display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.notepage__crumb a:hover { color: var(--red); }
.notepage__title { margin: 0 0 14px; font-size: 24px; line-height: 1.4; }
.notepage__author {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.notepage__author img { width: 44px; height: 44px; border-radius: 50%; }
.notepage__author > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notepage__author strong { font-size: 15px; }
.notepage__author .dim { font-size: 12px; color: var(--text-3); }
.notepage__author .btn-follow {
  border: 1px solid var(--red); color: var(--red); border-radius: 999px;
  padding: 6px 16px; font-size: 13px; background: #fff;
}
.notepage__gallery { display: flex; flex-direction: column; gap: 10px; }
.notepage__gallery figure { margin: 0; }
.notepage__gallery img { width: 100%; border-radius: var(--radius); background: var(--bg-soft); }
.notepage__text { margin: 18px 0 0; font-size: 15px; line-height: 1.9; color: #333; white-space: normal; }
.notepage__tags { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.notepage__tags a { color: var(--red); font-size: 13px; }
.notepage__meta { margin: 14px 0 0; font-size: 13px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.notepage__comments { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.notepage__comments h2 { font-size: 16px; margin: 0 0 14px; }
.notepage__cmts { display: flex; flex-direction: column; gap: 16px; }
.notepage__cmts li { display: flex; gap: 10px; }
.notepage__cmts img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.notepage__cmts strong { font-size: 13px; }
.notepage__cmts p { margin: 4px 0 4px; font-size: 14px; line-height: 1.7; }
.notepage__cmts .dim { font-size: 12px; color: var(--text-3); }
.notepage__side {
  width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--topbar-h) + 24px);
}
.notepage__side h2 { font-size: 15px; margin: 0 0 12px; }
.notepage__side ul { display: flex; flex-direction: column; gap: 12px; }
.notepage__side a { display: flex; gap: 10px; align-items: center; }
.notepage__side img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.notepage__side span {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notepage__side a:hover span { color: var(--red); }
.dim { color: var(--text-3); }
@media (max-width: 900px) {
  .notepage { flex-direction: column; padding-left: 14px; padding-right: 14px; }
  .notepage__side { width: 100%; position: static; }
  .notepage__title { font-size: 20px; }
}

/* ---------- 发布弹窗：话题输入 ---------- */
.pub__tagwrap {
  /* 话题标签从左到右依次排布，排满一行再自动换行（不是一条一行） */
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1px solid #e5e5e5; border-radius: 10px;
  padding: 7px 10px; background: #fff; cursor: text;
}
.pub__tagwrap:focus-within { border-color: var(--red); }
/* 提高优先级：确保标签盒为行内排布，不会被 .field > span 之类的规则盖掉 */
.pub__tagwrap .pub__tagchips { display: contents; }
.pub__tagwrap input#pTagInput {
  flex: 1 1 110px; min-width: 110px; width: auto;
  height: 26px; padding: 0; border: 0; font-size: 13px; outline: none; background: transparent;
}
.pub__tagwrap .tagchip {
  display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto;
  padding: 3px 4px 3px 9px; border-radius: 999px; white-space: nowrap;
  background: #fff0f1; color: var(--red); font-size: 12px; line-height: 1.5;
}
.pub__tagwrap .tagchip button {
  border: 0; background: none; color: inherit; font-size: 14px; line-height: 1;
  padding: 0 3px; cursor: pointer; opacity: .65;
}
.pub__tagwrap .tagchip button:hover { opacity: 1; }
.pub__hots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pub__hots-label { font-size: 12px; color: var(--text-3); }
.pub__hot {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--text-2); cursor: pointer;
}
.pub__hot:hover { border-color: var(--red); color: var(--red); }
/* 发布页「保存草稿」次按钮 */
#pSubmit {flex:2 }
#pDraftBtn {flex:1 }

/* ---------- 发布弹窗：拖拽上传 ---------- */
.pub__cover { position: relative; }
.pub__cover.is-drag .pub__preview { border-color: var(--red); background: #fff6f7; }
.pub__dropmask {
  position: absolute; inset: 0; display: none; place-items: center;
  border: 2px dashed var(--red); border-radius: 12px;
  background: rgba(255, 36, 66, .06); color: var(--red);
  font-size: 14px; font-weight: 600; pointer-events: none;
}
.pub__cover.is-drag .pub__dropmask { display: grid; }

/* ---------- 详情页话题可点击 ---------- */
.detail__tags a { color: var(--red); cursor: pointer; margin-right: 6px; }
.detail__tags a:hover { text-decoration: underline; }

/* ---------- SEO 列表里的话题 ---------- */
.seo-item__tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.seo-item__tags a { font-size: 12px; color: var(--red); }
.seo-item__tags a:hover { text-decoration: underline; }

/* ---------- 笔记管理（挂在「我的」页 /me 的「我的笔记」列表里） ---------- */
.mn {  margin: 0 auto; }
.mn__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.mn__count { font-size: 15px; font-weight: 600; color: var(--text); }
.mn__hint { font-size: 12px; color: var(--text-3); }
.mn__headacts { display: flex; align-items: center; gap: 8px; }
/* 笔记管理 → 草稿箱 入口 */
.mn__drafts {
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.mn__drafts:hover { border-color: var(--red); color: var(--red); }
/* 笔记管理 → 会员管理 入口（仅超级管理员可见） */
.mn__members {
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.mn__members:hover { border-color: var(--red); color: var(--red); }
.mn__members[hidden] { display: none; }
/* ---------------- 会员管理页 ---------------- */
.mem { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.mem__tip { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 0; }
.mem__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mem__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.mem__item.is-off { opacity: .6; }
.mem__ava { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--bg-soft); object-fit: cover; }
.mem__info { flex: 1 1 auto; min-width: 0; }
.mem__name {
  font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mem__sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.mem__badge {
  font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2); background: var(--bg-soft);
}
.mem__badge--admin { border-color: rgba(255, 36, 66, .38); color: var(--red); background: rgba(255, 36, 66, .06); }
.mem__badge--pub   { border-color: rgba(31, 138, 255, .38); color: #1f8aff; background: rgba(31, 138, 255, .06); }
.mem__badge--me    { border-color: rgba(46, 160, 110, .40); color: #2ea06e; background: rgba(46, 160, 110, .06); }
.mem__badge--off   { border-color: var(--line-dark); color: var(--text-3); background: transparent; }
.mem__acts { display: flex; gap: 8px; flex: none; }
.mem__selfhint { font-size: 12px; color: var(--text-3); }
.mem__acts button, .mem__pw button {
  border: 1px solid var(--line); background: var(--bg); color: var(--text-2);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.mem__acts button:hover, .mem__pw button:hover { border-color: var(--red); color: var(--red); }
.mem__acts button:disabled { opacity: .5; cursor: default; }
.mem__pw {
  flex: 1 1 100%; display: flex; gap: 8px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.mem__pw[hidden] { display: none; }
.mem__pw input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; font-size: 13px; background: var(--bg-soft); color: var(--text);
}
.mem__pw button.is-primary { background: var(--red); border-color: var(--red); color: #fff; }
.mem__pw button.is-primary:hover { filter: brightness(1.06); color: #fff; }
/* 笔记管理 → 发布笔记 */
.mn__pub {
  border: 0; background: var(--red); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mn__pub:hover { filter: brightness(1.06); }

/* 草稿箱入口的篇数徽标（「草稿箱 5」；为 0 时整块隐藏） */
.dotnum {
  display: inline-block; min-width: 17px; margin-left: 5px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
  vertical-align: 1px;
}
.dotnum[hidden] { display: none; }
.mn__drafts .dotnum { background: var(--red); }
/* 状态筛选条：全部 / 展示中 / 已隐藏 / 草稿 */
.mn__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.mn__filter--acct { margin-top: 2px; }
.mn__fchip {
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.mn__fchip:hover { border-color: var(--red); color: var(--red); }
.mn__fchip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.mn__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 26px;   /* 给卡片上方悬浮的操作条留出空间 */
}
@media (min-width: 720px)  { .mn__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mn__grid { grid-template-columns: repeat(4, 1fr); } }

.mncard {
  position: relative;   /* 操作条相对整张卡片定位（可溢出到卡片外） */
  background: #fff; border-radius: 12px;
  border: 1px solid var(--line); cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
}
.mncard:hover { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .3); }
.mncard.is-offline { opacity: .85; }
.mncard__cover { position: relative; aspect-ratio: 3 / 4; background: #f2f3f5;
  overflow: hidden; border-radius: 12px 12px 0 0; }
.mncard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mncard__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff;
}
.mncard__badge--pin { background: var(--red); }
.mncard__badge--off { background: rgba(0, 0, 0, .55); }
.mncard__badge--draft { background: #f59e0b; }
.mncard__dur {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 1px 6px; border-radius: 8px; font-size: 12px; color: #fff;
  background: rgba(0, 0, 0, .55);
}
/* 管理卡片：实况角标（没有时长可显示时紧挨右上是它自己的位置） */
.mncard__live {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; line-height: 1.4;
}
.mncard__live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.6px dotted #fff; box-sizing: border-box;
}
.mncard__dur + .mncard__live { right: auto; left: 8px; top: 34px; }
/* 操作条：固定在封面（图片层）底部，图标常驻显示 */
.mncard__acts {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: row; align-items: center; justify-content: space-around;
  flex-wrap: wrap;
  padding: 5px ;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: 1; transform: none; pointer-events: auto;
}
.mncard__acts button {
  border: none; cursor: pointer; padding: 5px; border-radius: 8px;
  color: #fff; background: rgba(255, 255, 255, .14);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.mncard__acts button svg { width: 17px; height: 17px; display: block; }
.mncard__acts button:hover { background: var(--red); transform: translateY(-1px); }
.mncard__acts button.is-danger:hover { background: #e53935; }

.mncard__body { padding: 10px 12px 12px; }
.mncard__title {
  margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #222;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mncard__date { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
/* 卡片上展示「本篇来源发布账号」 */
.mncard__src {
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
  font-size: 12px; color: var(--text-2);
}
.mncard__src img { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.mncard__src span { line-height: 1.2; }
.mncard__stats {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  margin: 0; padding: 9px 0 0; border-top: 1px solid var(--line); text-align: center;
}
.mncard__stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mncard__stats li span { font-size: 11px; color: var(--text-3); }
.mncard__stats li b { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mncard__stats li b:empty::after { content: '0'; }

.pub__tagchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: #f5f5f7; border-radius: 14px; font-size: 13px; color: var(--text-2);
}
.pub__tagchip i { cursor: pointer; font-style: normal; color: var(--text-3); }
.pub__tagchip i:hover { color: var(--red); }

/* 移动端：操作条本就常驻底部，窄屏卡片更小，图标略缩小避免换行过多 */
@media (max-width: 640px) {
  .mn__grid { margin-top: 0; }
  .mncard__acts button svg { width: 15px; height: 15px; }
}

/* ---------- 未保存提醒（发布 / 编辑页退出时） ---------- */
.askbox { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center; }
.askbox[hidden] { display: none; }   /* display:flex 会盖掉 [hidden] 的 display:none，必须显式补一条 */
.askbox__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.askbox__panel {
  position: relative; width: min(320px, calc(100vw - 48px));
  background: var(--bg, #fff); border-radius: 14px; padding: 22px 20px 14px;
  box-shadow: 0 18px 46px -18px rgba(0, 0, 0, .45); text-align: center;
}
.askbox__title { font-size: 16px; font-weight: 600; color: var(--text); }
.askbox__desc { margin: 6px 0 16px; font-size: 13px; color: var(--text-3); }
.askbox__btn {
  display: block; width: 100%; margin-bottom: 8px; padding: 10px 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--text); font-size: 14px; cursor: pointer;
}
.askbox__btn:hover { border-color: var(--red); color: var(--red); }
.askbox__btn.is-primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.askbox__btn.is-primary:hover { color: #fff; filter: brightness(1.06); }
.askbox__btn.is-ghost { border: 0; color: var(--text-3); }
.askbox__btn.is-ghost:hover { color: var(--text-2); }
/* 「存草稿」：把已发布笔记退回草稿箱，用橙色区分于「保存并退出」 */
.askbox__btn.is-draft { border-color: #f59e0b; color: #b45309; }
.askbox__btn.is-draft:hover { border-color: #f59e0b; color: #92400e; }

/* ---------------- 微信内分享提示 ---------------- */
.wx-tip { max-width: 320px; text-align: center; }
.wx-tip__head {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 2px 0 14px;
}
.wx-tip__dots { display: inline-flex; gap: 5px; }
.wx-tip__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #07c160; display: inline-block;
}
.wx-tip__more {
  font-size: 30px; line-height: 1; font-weight: 700; color: #111;
  letter-spacing: 2px;
}
.wx-tip .askbox__desc { margin: 6px 0 18px; line-height: 1.7; }
.wx-tip .askbox__desc b { color: #07c160; }

/* ---------------- 服务端分页导航（SEO 友好翻页；JS 接管后随 #seoFeed 一起移除） ---------------- */
.seo-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 0 6px;
}
.js .seo-pagination { display: none; }   /* JS 正常时瀑布流无限滚动接管，导航只给爬虫 / 无 JS 环境 */
.seo-pagination__btn, .seo-pagination__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--text); font-size: 13px; text-decoration: none;
}
.seo-pagination__btn:hover, .seo-pagination__num:hover { border-color: var(--red); color: var(--red); }
.seo-pagination__num.is-current { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; pointer-events: none; }
.seo-pagination__btn.is-disabled { color: var(--text-3); opacity: .55; pointer-events: none; }
.seo-pagination__total { font-size: 12px; color: var(--text-3); margin-left: 4px; }