/* ============================================================
   业务视图：聊天 / 通讯录 / 动态 / 搜索 / 设置 / 通话 / 管理
   ============================================================ */

/* ---------------- 会话列表 ---------------- */
.conv-list { display: flex; flex-direction: column; gap: 2px; }
.conv {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: var(--r-md);
  cursor: pointer; position: relative; transition: background .2s var(--ease);
}
.conv:hover { background: var(--panel); }
.conv.is-active { background: var(--accent-soft); }
.conv.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 99px; background: var(--accent);
}
.conv__body { flex: 1; min-width: 0; }
.conv__top { display: flex; align-items: baseline; gap: 8px; }
.conv__name { font-size: var(--fs-md); font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__time { font-size: 10.5px; color: var(--muted); flex: 0 0 auto; }
.conv__msg { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 5px; align-items: center; }
.conv__msg .lock { opacity: .7; }
/* 「有人@我」/「草稿」：列表上唯一能看出「这条需要处理」的信号，一律不参与省略 */
.conv__flag { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }
.conv__flag--at { color: var(--danger); }
.conv__flag--draft { color: var(--warn); }

.side__group-title {
  font-size: 10.5px; color: var(--muted); padding: 12px 12px 6px; letter-spacing: 1px;
  text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;
}

/* ---- 生日提醒 ---- */
.bd-title { display: inline-flex; color: var(--accent); }
.side__group-sub { text-transform: none; letter-spacing: .2px; font-size: 11px; opacity: .9; }
.bd-row.is-today {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 82%, transparent);
}
.bd-more {
  align-self: flex-start; margin-top: 2px; padding: 2px 0; border: 0; background: none;
  color: var(--accent); font-size: 11.5px; cursor: pointer; opacity: .9;
}
.bd-more:hover { text-decoration: underline; }
.bd-note {
  margin: 8px 0 0; padding: 7px 10px; border-radius: var(--r-sm); font-size: 12px;
  color: var(--text-2); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ---------------- 聊天区 ---------------- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat__head {
  height: 64px; flex: 0 0 64px; display: flex; align-items: center; gap: 12px; padding: 0 18px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), transparent);
}
.chat__peer { display: flex; align-items: center; gap: 11px; cursor: pointer; min-width: 0; }
.chat__peer-name { font-size: var(--fs-lg); font-weight: 700; }
.chat__peer-sub { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.chat__tools { margin-left: auto; display: flex; gap: 4px; }

.chat__scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 18px 8px;
  display: flex; flex-direction: column; gap: 4px; scroll-behavior: auto;
  overscroll-behavior: contain;
}
.chat__scroll::-webkit-scrollbar { width: 6px; }

.msg-day { align-self: center; margin: 12px 0 8px; font-size: 10.5px; color: var(--muted);
  background: var(--panel); padding: 3px 12px; border-radius: 99px; }

.msg {
  display: flex; gap: 10px; max-width: min(72%, 720px); margin-bottom: 10px;
  animation: fadeUp .28s var(--ease-out) both; position: relative;
}
.msg--me { align-self: flex-end; flex-direction: row-reverse; }
.msg__avatar { flex: 0 0 auto; cursor: pointer; }
.msg__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg--me .msg__col { align-items: flex-end; }
.msg__meta { font-size: 10.5px; color: var(--muted); display: flex; gap: 7px; align-items: center; padding: 0 4px; }
.msg__bubble {
  position: relative; padding: 9px 13px; border-radius: var(--r-md);
  background: var(--bubble-other); font-size: var(--fs-md); line-height: 1.6;
  word-break: break-word; white-space: pre-wrap; box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease);
}
.msg--me .msg__bubble { background: var(--bubble-me); color: #fff; }
/* 已撤回：视觉弱化，且不可再撤回 */
.msg.is-recalled { opacity: .78; }
.msg.is-recalled .msg__avatar { filter: grayscale(.5); }
.msg__bubble:hover { box-shadow: var(--shadow-1); }
.msg--me .msg__bubble { border-bottom-right-radius: 6px; }
.msg:not(.msg--me) .msg__bubble { border-bottom-left-radius: 6px; }
.msg__bubble.is-poke { background: transparent; box-shadow: none; font-size: var(--fs-sm); color: var(--accent);
  font-weight: 600; padding: 4px 2px; }
.msg__bubble.is-system { background: transparent; box-shadow: none; text-align: center; color: var(--muted);
  font-size: var(--fs-xs); align-self: center; }
/* 通话记录：与拍一拍同级弱化，左侧带通话类型图标 */
.msg__bubble.is-call {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); padding: 7px 12px; opacity: .95;
}
.msg__call-ico { display: inline-flex; opacity: .9; }
.msg__call-ico svg { width: 15px; height: 15px; }
.msg__quote {
  border-left: 3px solid var(--accent); background: rgba(0, 0, 0, .12);
  padding: 6px 10px; border-radius: 8px; margin-bottom: 7px; font-size: var(--fs-sm); opacity: .9;
  cursor: pointer; transition: background .18s var(--ease), opacity .18s var(--ease);
}
.msg__quote:hover { background: rgba(0, 0, 0, .2); opacity: 1; }
.msg__name { cursor: default; user-select: none; }
.msg.is-flash > .msg__col > .msg__bubble { animation: flashMsg 1.5s var(--ease) both; }
@keyframes flashMsg {
  0%, 100% { box-shadow: var(--shadow-1); }
  15% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-2); }
  60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-1); }
}
.msg--me .msg__quote { border-color: rgba(255, 255, 255, .6); }
.msg__quote-name { font-weight: 600; margin-bottom: 2px; }
.msg__file {
  display: flex; align-items: center; gap: 11px; min-width: 208px; padding: 4px 2px;
}
.msg__file-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); font-size: 20px; }
.msg__file-name { font-weight: 600; font-size: var(--fs-sm); }
.msg__file-size { font-size: 10.5px; opacity: .75; margin-top: 2px; }

/* ---------------- 语音消息 ---------------- */
.msg__voice {
  display: flex; align-items: center; gap: 10px; min-width: 190px; max-width: 290px; padding: 4px 2px;
}
.voice-play {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; cursor: pointer; color: inherit;
  display: grid; place-items: center; background: rgba(255, 255, 255, .18);
  transition: transform .18s var(--ease-out), background .18s;
}
.voice-play:hover { transform: scale(1.06); }
.voice-play.is-playing { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.voice-play.is-loading { opacity: .6; cursor: progress; }
.msg__voice-time { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; flex: none; }
.msg__voice-lock { font-size: 10px; opacity: .6; flex: none; }

.voice-wave { display: flex; align-items: center; gap: 2px; height: 34px; flex: 1; min-width: 0; }
.voice-wave__bar {
  width: 3px; border-radius: 2px; background: currentColor; opacity: .38; flex: none;
  transition: height .12s linear, opacity .12s linear, background .12s linear;
}
.voice-wave__bar.is-played { opacity: 1; background: var(--accent); }
.msg--me .voice-wave__bar.is-played { background: #fff; }
.voice-wave--msg { height: 28px; }

/* 录音面板 */
.voice-rec { display: grid; justify-items: center; gap: 11px; padding: 6px 0 2px; }
.voice-rec__status { font-size: var(--fs-sm); color: var(--text-2); }
.voice-rec__time { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.voice-rec__mic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 0; }
.voice-rec__mic.is-rec { animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 11px var(--accent-soft); } }
.voice-rec__tools { display: flex; gap: 10px; }
.voice-rec__tools[hidden] { display: none; }
.voice-rec .voice-wave { width: 100%; max-width: 320px; justify-content: center; height: 44px; }
.msg__img { max-width: 240px; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; position: relative; }
.msg__img img { width: 100%; display: block; }
.msg__video { max-width: 280px; border-radius: var(--r-sm); overflow: hidden; }
.msg__video video { width: 100%; display: block; background: #000; }
/* ---------------- 群公告条 ---------------- */
.chat__announce {
  display: flex; align-items: center; gap: 9px; margin: 0 16px 2px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  animation: fadeUp .26s var(--ease-out) both;
}
.chat__announce.is-empty { opacity: .72; }
.chat__announce-ico { display: inline-flex; color: var(--warn); flex: none; }
.chat__announce-ico svg { width: 13px; height: 13px; }
.chat__announce-text {
  flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; max-height: 54px; overflow: hidden;
}
.chat__announce-btn {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600; padding: 2px 4px;
}
.chat__announce-btn:hover { text-decoration: underline; }

/* 卡片里的公告块（群聊信息卡） */
.card-note {
  display: grid; gap: 5px; padding: 11px 13px; border-radius: var(--r-sm); margin-bottom: 12px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
}
.card-note__head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; }
.card-note__ico { display: inline-flex; color: var(--warn); }
.card-note__ico svg { width: 12px; height: 12px; }
.card-note__text { font-size: var(--fs-sm); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.card-note .btn { justify-self: start; }

/* ---------------- 表情回应 ---------------- */
.msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.msg__react {
  display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px;
  border-radius: 99px; border: 1px solid var(--line-2); background: var(--panel);
  font-size: 11px; line-height: 1; cursor: pointer; color: var(--text-2);
  transition: transform .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), color .16s var(--ease);
}
.msg__react:hover { border-color: var(--accent); color: var(--text); }
.msg__react.is-mine {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.msg__react-emoji { font-size: 12.5px; line-height: 1; }
.msg__react-count { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.msg--me .msg__reactions { justify-content: flex-end; }

/* 回应选择器：右键「表情回应」弹出，逻辑同 .ctx，内容是一排 emoji */
.react-picker {
  position: fixed; z-index: 400; display: flex; flex-wrap: wrap; gap: 2px;
  max-width: 288px; padding: 5px; border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2); animation: popIn .16s var(--ease-out) both;
}
.react-picker__item {
  width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; font-size: 18px; line-height: 1;
  transition: transform .14s var(--ease), background .14s var(--ease);
}
.react-picker__item:hover { transform: scale(1.18); background: var(--accent-soft); }

.msg__sticker { font-size: 54px; line-height: 1; animation: popIn .3s var(--ease-out) both; }
.msg__recalled { font-size: var(--fs-xs); color: var(--muted); font-style: italic; display: flex; gap: 6px; align-items: center; }
.msg__lock { font-size: 9.5px; opacity: .6; }

/* 输入区 */
.composer { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--panel); padding: 10px 14px 12px; }
.composer__quote {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  background: var(--panel-2); font-size: var(--fs-sm); margin-bottom: 8px;
  border-left: 3px solid var(--accent);
}
.composer__quote span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer__tools { display: flex; gap: 2px; }
.composer textarea {
  flex: 1; min-height: 40px; max-height: 132px; resize: none; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line); padding: 10px 12px; outline: none;
  font-size: var(--fs-md); line-height: 1.5; transition: border-color .2s, box-shadow .2s;
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer__send { height: 40px; }
.composer__hint { font-size: 10.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }

/* 草稿提示条：只在输入框里真有内容时出现，不占永久空间 */
.composer__draft {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 10.5px;
  color: var(--warn); animation: fadeUp .22s var(--ease-out) both;
}
.composer__draft-ico { display: inline-flex; opacity: .85; }
.composer__draft-clear {
  margin-left: auto; font-size: 10.5px; color: var(--muted);
  padding: 2px 8px; border-radius: 8px; transition: color .16s, background .16s;
}
.composer__draft-clear:hover { color: var(--danger); background: var(--danger-soft, var(--panel-2)); }

/* @提及候选浮层：挂在输入行上，跟着输入框而不是贴着视口 */
.mention-panel {
  position: absolute; bottom: 100%; left: 46px; right: 84px; margin-bottom: 8px; z-index: 40;
  max-height: 244px; overflow-y: auto; padding: 6px;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  animation: popIn .18s var(--ease-out) both;
}
.mention-panel__item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
  border-radius: 10px; text-align: left; transition: background .16s var(--ease);
}
.mention-panel__item:hover,
.mention-panel__item.is-active { background: var(--accent-soft); }
.mention-panel__item .avatar { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; flex: none; }
.mention-panel__ico {
  width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent);
}
.mention-panel__name { font-size: var(--fs-sm); flex: 1; min-width: 0; }
.mention-panel__tag { font-size: 10px; color: var(--accent); flex: none; }

/* 正文中被 @ 到的名字 */
.msg__mention { color: var(--accent-2); font-weight: 600; cursor: pointer; }
.msg__mention:hover { text-decoration: underline; }
.msg--me .msg__mention { color: #fff; opacity: .95; }
.msg__mention.is-me { background: var(--accent-soft); border-radius: 5px; padding: 0 3px; }
.msg--me .msg__mention.is-me { background: rgba(255, 255, 255, .22); }

/* 表情面板 */
.emoji-panel {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; z-index: 30;
  width: min(360px, 92vw); background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3); overflow: hidden;
  animation: popIn .22s var(--ease-out) both;
}
.emoji-panel__tabs { display: flex; gap: 2px; padding: 8px 8px 0; overflow-x: auto; }
.emoji-panel__tab { padding: 6px 12px; border-radius: 9px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.emoji-panel__tab.is-active { background: var(--accent-soft); color: var(--accent); }
.emoji-panel__grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px;
  max-height: 210px; overflow-y: auto;
}
.emoji-panel__cell {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 21px; border-radius: 9px;
  transition: transform .14s var(--ease), background .14s;
}
.emoji-panel__cell:hover { background: var(--panel); transform: scale(1.18); }
.emoji-panel__foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
.emoji-panel__custom { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; max-height: 220px; overflow: auto; }
.sticker-cell { aspect-ratio: 1; border-radius: 12px; background: var(--panel); display: grid; place-items: center;
  font-size: 30px; cursor: pointer; transition: transform .16s var(--ease); position: relative; }
.sticker-cell:hover { transform: scale(1.08); }
.sticker-cell__del { position: absolute; top: 2px; right: 4px; font-size: 11px; color: var(--danger); opacity: 0; }
.sticker-cell:hover .sticker-cell__del { opacity: 1; }

/* 通话浮层 */
.call-root { position: fixed; inset: 0; z-index: 600; }
.call {
  position: absolute; inset: 0; background: rgba(8, 7, 18, .92); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  animation: fadeIn .3s var(--ease) both; color: #fff;
}
.call__avatar { animation: floatY 3s ease-in-out infinite; }
.call__name { font-size: 22px; font-weight: 700; }
.call__state { font-size: var(--fs-sm); opacity: .7; }
.call__videos { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.call__video {
  width: min(320px, 44vw); aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden;
  background: #12102a; box-shadow: var(--shadow-3); position: relative;
}
.call__video video { width: 100%; height: 100%; object-fit: cover; }
.call__video.is-min { width: 130px; aspect-ratio: 4/3; }
.call__label { position: absolute; left: 10px; bottom: 8px; font-size: 11px; background: rgba(0,0,0,.5);
  padding: 2px 8px; border-radius: 99px; }
.call__ctrl { display: flex; gap: 16px; margin-top: 10px; }
.call__btn { width: 58px; height: 58px; border-radius: 99px; display: grid; place-items: center; font-size: 22px;
  background: rgba(255, 255, 255, .12); transition: all .2s var(--ease); }
.call__btn:hover { background: rgba(255, 255, 255, .22); }
.call__btn--end { background: var(--danger); }
.call__btn.is-off { background: rgba(255, 255, 255, .32); }

/* ---------------- 通讯录 ---------------- */
.contact-group { margin-bottom: 4px; }
.contact-group__title {
  font-size: 10.5px; color: var(--muted); padding: 10px 12px 6px; letter-spacing: 1px;
}
.contact-item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: var(--r-md);
  cursor: pointer; transition: background .18s; width: 100%; text-align: left; }
.contact-item:hover { background: var(--panel); }
.contact-item__name { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.contact-item__sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; line-height: 1.5; }
.contact-index { position: fixed; right: 8px; top: 50%; transform: translateY(-50%); display: flex;
  flex-direction: column; gap: 1px; font-size: 9.5px; color: var(--muted); z-index: 5; }
.contact-index span { padding: 2px 4px; border-radius: 5px; cursor: pointer; text-align: center; }
.contact-index span:hover { background: var(--panel); color: var(--text); }

/* ---------------- 动态 ---------------- */
/* width:100% 不可省：这些元素是 flex 子项，margin:0 auto 会禁用 stretch 而收缩到内容宽度 */
.moments { max-width: 660px; width: 100%; margin: 0 auto; padding: 18px 18px 40px; }
.moments__compose { display: flex; gap: 10px; margin-bottom: 16px; }
.moment {
  display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line);
  animation: fadeUp .35s var(--ease-out) both;
}
.moment__body { flex: 1; min-width: 0; }
.moment__author { font-weight: 700; font-size: var(--fs-md); color: var(--accent); cursor: pointer; }
.moment__author:hover { text-decoration: underline; }
.moment__text { font-size: var(--fs-md); line-height: 1.65; margin: 7px 0 10px; white-space: pre-wrap; word-break: break-word; }
.moment__media { display: grid; gap: 6px; margin-bottom: 10px; grid-template-columns: repeat(3, 1fr); }
.moment__media--1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.moment__media--2 { grid-template-columns: repeat(2, 1fr); max-width: 380px; }
.moment__media--4 { grid-template-columns: repeat(2, 1fr); max-width: 380px; }
.moment__media-item { aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--panel);
  cursor: zoom-in; position: relative; }
.moment__media-item img, .moment__media-item video { width: 100%; height: 100%; object-fit: cover; }
.moment__foot { display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); color: var(--muted); }
.moment__act { display: flex; align-items: center; gap: 5px; transition: color .2s; }
.moment__act:hover { color: var(--text); }
.moment__act.is-on { color: var(--danger); }
.moment__likes { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px;
  flex-wrap: wrap; align-items: center; }
.moment__comments { background: var(--panel); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px; }
.moment__comment { font-size: var(--fs-sm); line-height: 1.55; word-break: break-word; }
.moment__comment b { color: var(--accent); cursor: pointer; }
.moment__time { font-size: 10.5px; color: var(--muted); }

/* ---- 动态二级评论 ----
   层级只有两级：根评论 + 挂在它下面的回复（回复的回复也并回同一根下，只是保留了被回复人）。 */
.mc-who { color: var(--accent); font-weight: 700; cursor: pointer; }
.mc-who:hover { text-decoration: underline; }
.mc-reply { color: var(--muted); margin: 0 3px; font-size: 11px; }
.moment__replies {
  margin: 3px 0 2px; padding: 3px 0 3px 10px; display: flex; flex-direction: column; gap: 3px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.moment__comment.is-reply { font-size: 12.5px; }
.mc-act {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 0; border: 0;
  background: none; color: var(--muted); font-size: 11.5px; cursor: pointer;
  opacity: .55; transition: opacity .18s var(--ease), color .18s var(--ease);
}
.moment__comment:hover .mc-act { opacity: 1; }
.mc-act:hover { color: var(--accent); }
.mc-act.is-danger:hover { color: var(--danger); }
.mc-more {
  align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none;
  color: var(--accent); font-size: 11.5px; cursor: pointer; opacity: .85;
}
.mc-more:hover { text-decoration: underline; }
.mc-target {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
  font-size: 11.5px; background: var(--accent-soft); color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.mc-target__text { flex: 1; min-width: 0; }
.mc-target__x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.mc-target__x:hover { color: var(--danger); }

/* 聊天中的动态分享卡片（仿 QQ 空间分享卡） */
.moment-card {
  display: flex; align-items: stretch; gap: 10px; width: min(320px, 100%);
  padding: 10px 12px; border-radius: 14px; text-align: left;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
  border: 1px solid var(--line-2); cursor: pointer; overflow: hidden;
  transition: transform .2s var(--ease-out), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.moment-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.moment-card:active { filter: brightness(.97); }
.moment-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.moment-card__title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.moment-card__text {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.moment-card__src {
  display: flex; align-items: center; gap: 4px; margin-top: 3px; padding-top: 6px;
  border-top: 1px dashed var(--line); font-size: 11px; color: var(--muted);
}
.moment-card__src-ico { display: inline-flex; color: var(--accent); }
.moment-card__thumb {
  width: 56px; height: 56px; border-radius: 10px; flex: none; overflow: hidden;
  background: var(--panel); display: grid; place-items: center;
}
.moment-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.moment-card__video { font-size: 20px; }

/* 好友推荐来的联系人名片（聊天里的一类富消息） */
.contact-card {
  width: min(280px, 100%); padding: 10px 12px; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--panel-2) 90%, var(--accent) 10%);
  border: 1px solid var(--line-2);
}
.contact-card__top { display: flex; align-items: center; gap: 10px; }
.contact-card__name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.contact-card__sub { font-size: 11.5px; color: var(--muted); }
.contact-card__sig {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.contact-card__reason {
  font-size: 12px; color: var(--text-2); padding: 6px 8px; border-radius: 8px; word-break: break-word;
  background: var(--panel); border-left: 2px solid var(--accent);
}
.contact-card__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.contact-card__btn {
  padding: 5px 11px; border-radius: 8px; font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.contact-card__btn:hover { color: var(--text); border-color: var(--accent); }
.contact-card__btn.is-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.contact-card__btn.is-primary:hover { color: #fff; filter: brightness(1.08); }
.contact-card__hint { font-size: 11px; color: var(--muted); }
.contact-card__src {
  display: flex; align-items: center; gap: 5px; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--muted);
}
.contact-card__src-ico { display: inline-flex; color: var(--accent); }

/* 多选行：推荐名片 / 选人时用（复用 result-card 的骨架，只加选中态） */
.pick-row { cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); }
.pick-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pick-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
}
.pick-row__check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--accent);
}
.pick-row__check[hidden] { display: none; }

/* 分享详情页顶部的来源提示 */
.moment-share-note {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 4px;
  border-radius: var(--r-sm); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: 12.5px; color: var(--text-2);
}
.moment-share-note__ico { display: inline-flex; color: var(--accent); flex: none; }

/* ---------------- 搜索 ---------------- */
.search-view { max-width: 720px; width: 100%; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.search-sec__title { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 1.2px; margin-bottom: 6px;
  display: flex; justify-content: space-between; }
.result-card { display: flex; gap: 11px; align-items: center; padding: 11px; border-radius: var(--r-md);
  background: var(--panel); cursor: pointer; transition: transform .18s var(--ease), background .2s; }
.result-card:hover { background: var(--panel-2); }
.result-card__snippet { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 设置 ---------------- */
.settings { display: grid; grid-template-columns: 186px 1fr; gap: 18px; padding: 18px;
  max-width: 1020px; width: 100%; margin: 0 auto; }
.settings--single { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.settings__nav { display: flex; flex-direction: column; gap: 3px; }
.settings__navitem { padding: 10px 13px; border-radius: var(--r-sm); font-size: var(--fs-md); text-align: left;
  color: var(--text-2); transition: all .2s var(--ease); }
.settings__navitem:hover { background: var(--panel); color: var(--text); }
.settings__navitem.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings__pane { background: var(--panel); border-radius: var(--r-lg); padding: 20px; min-height: 380px;
  border: 1px solid var(--line); }
.settings__section-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 16px; display: flex;
  align-items: center; gap: 8px; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: none; }
.setting-row__label { font-size: var(--fs-md); }
.setting-row__desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.setting-row__ctrl { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.device-card { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: var(--r-sm);
  background: var(--panel-2); margin-bottom: 8px; }
.device-card__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--panel); display: grid;
  place-items: center; font-size: 18px; }

/* 主题选择器（设置 · 关于） */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 6px; }
.theme-pick__card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); text-align: left;
  transition: transform .22s var(--ease-out), border-color .22s var(--ease), background .22s var(--ease);
}
.theme-pick__card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.theme-pick__card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.theme-pick__swatch {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.theme-pick__name { display: block; font-size: var(--fs-md); font-weight: 600; }
.theme-pick__desc { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.theme-pick__card.is-active .theme-pick__name { color: var(--accent); }
.theme-pick__dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  opacity: 0; transition: opacity .2s var(--ease); }
.theme-pick__card.is-active .theme-pick__dot { opacity: 1; }

/* ---------------- 管理后台 ---------------- */
.admin { padding: 22px 26px 30px; max-width: 1240px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* 小节标题：左侧品牌色方块 + 大字距，给页面切出节奏 */
.admin__sec {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 -4px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--muted);
}
.admin__sec::before {
  content: ''; width: 8px; height: 8px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 页签：裸按钮行升级为分段控制器 */
.admin__tabs {
  display: inline-flex; gap: 4px; padding: 4px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.admin__tabs .seg__item {
  padding: 8px 16px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.admin__tabs .seg__item:hover { color: var(--text); }
.admin__tabs .seg__item.is-active {
  background: linear-gradient(135deg, var(--accent-soft), transparent 150%), var(--panel-solid);
  color: var(--text);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* 统计卡：表面分层（顶部高光线 + 上浮玻璃感），图标从水印升级为渐变芯片 */
.admin__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 46%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.stat::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 42%, transparent), transparent);
}
.stat:hover { border-color: var(--line-2); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .55); }
.stat__ico {
  position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.stat__num { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__label { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; font-weight: 600; letter-spacing: .4px; }
/* 文本型指标（如「内存」「Redis」）字号收敛，避免和数字指标一样大而突兀 */
.stat__num--text { font-size: 17px; letter-spacing: .3px; }
.stat--warn .stat__num { background: linear-gradient(135deg, var(--warn), var(--danger)); -webkit-background-clip: text; background-clip: text; }
.stat--warn .stat__ico { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.stat--ok .stat__num { background: linear-gradient(135deg, var(--ok), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }
.stat--ok .stat__ico { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }

/* 系统信息卡 */
.admin-sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.admin-sys__row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 55%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.admin-sys__row:hover { border-color: var(--line-2); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .5); }
.admin-sys__ico { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 12px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.admin-sys__k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .4px; }
.admin-sys__v { font-size: var(--fs-sm); font-weight: 600; margin-top: 3px; line-height: 1.55; }

/* 工具条：搜索 / 计数 / 刷新 */
.admin__toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin__toolbar .input { flex: 1; min-width: 0; }
.admin__count { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-weight: 600; letter-spacing: .3px; }

/* 表格：吸顶表头 + 斑马纹（长列表可读性） */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.table th {
  position: sticky; top: 0; z-index: 2; background: var(--panel-solid);
  color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: 1.4px;
  box-shadow: 0 1px 0 var(--line);
}
.table tbody tr { transition: background .16s var(--ease); }
.table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); }
.table td .btn + .btn { margin-left: 0; }
/* 状态 tag 加呼吸点：在线 / 待处理 / 已封禁一眼分辨（components.css 没有 tag--warn，后台补一个） */
.admin .tag--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.admin .tag--ok, .admin .tag--warn, .admin .tag--danger { display: inline-flex; align-items: center; gap: 6px; }
.admin .tag--ok::before, .admin .tag--warn::before, .admin .tag--danger::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 7px currentColor;
}
/* 危险/通过操作收敛为淡染描边，悬浮才加光 —— 一排实心粉/实心绿按钮是最显廉价的元素 */
.admin .btn--danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}
.admin .btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--danger) 60%, transparent);
}
.admin .btn--ok {
  background: color-mix(in srgb, var(--ok) 11%, transparent);
  color: var(--ok); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
}
.admin .btn--ok:hover {
  background: color-mix(in srgb, var(--ok) 19%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ok) 55%, transparent);
}
.admin .btn--ok[disabled], .admin .btn--danger[disabled] { opacity: .45; }

/* 举报卡：与统计卡同一套表面语言 */
.admin .device-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 55%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.admin .device-card:hover { border-color: var(--line-2); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .5); }
.admin .device-card__icon {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.table-wrap {
  overflow: auto; border-radius: var(--r-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 45%, transparent);
}
.admin__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.admin__pager .btn { min-width: 78px; }
.admin__pager__info { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 违规词：上千条词条，用自动填充网格铺满而不是一行挤到底 */
.admin__words { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 7px; }
.admin__words .tag { justify-content: space-between; cursor: pointer; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin__words .tag:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }

/* 举报卡里的「被举报内容」：用平台托管密钥解出的正文 */
.admin__quote { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; padding: 7px 9px;
  border-left: 2px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--panel); font-size: var(--fs-xs); line-height: 1.6; word-break: break-all; }

/* 群组详情成员网格 */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.member-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.member-cell__name { font-size: 10.5px; color: var(--text-2); max-width: 72px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.member-cell--add .avatar { background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }

/* 阅后即焚 / 加密角标 */
.e2ee-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 8px; border-radius: 99px;
  background: rgba(61, 220, 151, .12); color: var(--ok);
}

/* ---------------- 公告栏 / 捐赠栏 ---------------- */
.notice {
  flex: 1; min-height: 0; overflow: auto;
  padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 14px;
  max-width: 860px; width: 100%; margin: 0 auto;
}
.notice__hero {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.notice__hero-ico {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);
}
.notice__hero-title { font-size: var(--fs-lg); font-weight: 700; }
.notice__hero-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

.notice__list { display: flex; flex-direction: column; gap: 10px; }

.notice-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 15px 13px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease), background .22s var(--ease);
}
.notice-card:hover { border-color: var(--line-2); background: var(--panel-2); }
.notice-card.is-pinned { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.notice-card__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--notice-color, var(--accent));
}
.notice-card__head { display: flex; align-items: center; gap: 8px; }
.notice-card__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 2px 9px; border-radius: 99px;
  color: var(--notice-color, var(--accent));
  background: color-mix(in srgb, var(--notice-color, var(--accent)) 16%, transparent);
}
.notice-card__time { font-size: var(--fs-xs); color: var(--muted); }
.notice-card__text { font-size: var(--fs-md); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.notice-card__by { font-size: var(--fs-xs); color: var(--muted); text-align: right; }

/* 捐赠 */
.donate { display: flex; flex-direction: column; gap: 14px; }
.donate__intro { font-size: var(--fs-md); line-height: 1.8; color: var(--text-2); }
.donate__note {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.7;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px dashed var(--line-2);
}
.donate__off { font-size: var(--fs-sm); color: var(--muted); padding: 18px; text-align: center; }
.donate__stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-2);
}
.donate__foot { font-size: var(--fs-xs); line-height: 1.7; }

/* 卡片保持自然宽度并居中，避免宽屏下被拉成长条、二维码周围大片留白 */
.donate__grid {
  display: grid; gap: 14px; justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(148px, 176px));
}
.donate-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.donate-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
/* 收款码：正方形自适应卡片宽度，图片完整可见不裁切 */
.donate-card__qr {
  width: 100%; aspect-ratio: 1 / 1; height: auto; max-width: 152px;
  border-radius: 14px; overflow: hidden;
  background: var(--panel-2); display: grid; place-items: center; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.donate-card__qr img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
.donate-card__qr.is-empty { color: var(--accent); opacity: .5; }
.donate-card__name { font-size: var(--fs-md); font-weight: 600; }
.donate-card__hint { font-size: var(--fs-xs); color: var(--muted); }

.donate__placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 30px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--panel);
}
.donate__ph-ico { color: var(--accent); opacity: .6; }
.donate__ph-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.donate__ph-sub { font-size: var(--fs-xs); color: var(--muted); max-width: 380px; line-height: 1.7; }

@media (max-width: 760px) {
  .settings { grid-template-columns: 1fr; }
  .settings__nav { flex-direction: row; overflow-x: auto; }
  .msg { max-width: 88%; }
  .moments { padding: 12px 12px; }
  .notice { padding: 14px 12px 22px; }
}

/* ============================================================
   好友分组标签
   ============================================================ */
.tagchip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 132px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor;
  font-size: 10.5px; line-height: 16px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.tagchip--sm { font-size: 10px; line-height: 15px; padding: 0 6px; }
.tagchip--accent { color: var(--accent); background: var(--accent-soft); }
.tagchip--accent-2 { color: var(--accent-2); background: rgba(37, 217, 198, .14); }
.tagchip--ok { color: var(--ok); background: rgba(61, 220, 151, .14); }
.tagchip--warn { color: var(--warn); background: rgba(255, 180, 58, .16); }
.tagchip--danger { color: var(--danger); background: rgba(255, 93, 125, .14); }
.tagchip.is-active { box-shadow: 0 0 0 2px var(--accent-soft), inset 0 0 0 1px currentColor; }
button.tagchip { cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
button.tagchip:hover { box-shadow: var(--shadow-1); }
.tagchip--more { color: var(--muted); border-color: var(--line-2); opacity: .85; }

.tagchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tagchips--hero { margin: 0 0 4px; }

/* 通讯录顶部的分组筛选条 */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 0 10px; margin-bottom: 2px;
}
.filterbar__chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2);
  font-size: var(--fs-xs); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.filterbar__chip:hover { color: var(--text); border-color: var(--line-2); }
.filterbar__chip.is-active {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; box-shadow: 0 6px 16px -10px var(--accent);
}
.filterbar__manage {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.filterbar__manage:hover { color: var(--accent); border-color: var(--line-2); }

/* 标签管理弹窗 */
.tagmgr__list { display: flex; flex-direction: column; gap: 8px; }
.tagmgr__row { flex-wrap: wrap; gap: 6px; }
.tagmgr__new { display: flex; align-items: center; gap: 8px; }
.tagmgr__swatches { display: flex; gap: 5px; width: 100%; padding-top: 2px; }
.tagmgr__dot {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: currentColor; border: 1px solid currentColor; cursor: pointer; padding: 0;
  color: var(--accent); transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.tagmgr__dot.tagchip--accent { color: var(--accent); }
.tagmgr__dot.tagchip--accent-2 { color: var(--accent-2); }
.tagmgr__dot.tagchip--ok { color: var(--ok); }
.tagmgr__dot.tagchip--warn { color: var(--warn); }
.tagmgr__dot.tagchip--danger { color: var(--danger); }
.tagmgr__dot:hover { transform: scale(1.18); }
.tagmgr__dot.is-active { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3px currentColor; }

/* ================= 安全中心（设备管理 / 登录历史） ================= */
.sec-seg { margin-bottom: 14px; }
.sec-seg .seg__item { display: inline-flex; align-items: center; gap: 7px; flex: 1; justify-content: center; }
.sec-seg__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; line-height: 1;
}
.sec-body { display: flex; flex-direction: column; gap: 10px; }
.sec-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; }
.sec-filter { max-width: 200px; height: 36px; }

/* 设备卡：当前设备蓝描边高亮，其余常规描边 */
.sec-dev {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  padding: 13px 13px 12px; transition: border-color .2s var(--ease), transform .2s var(--ease-out);
}
.sec-dev:hover { border-color: var(--line-2); }
.sec-dev.is-current { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sec-dev.is-revoked { opacity: .55; }
.sec-dev__head { display: flex; align-items: center; gap: 11px; }
.sec-dev__ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  display: grid; place-items: center; color: var(--accent);
}
.sec-dev__name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); }
.sec-dev__cur {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
}
.sec-dev__cur.is-off { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.sec-dev__os { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sec-dev__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
  animation: secPulse 2.2s var(--ease) infinite;
}
@keyframes secPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 8%, transparent); } }
.sec-dev__info {
  margin: 11px 0 11px; padding: 9px 11px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.sec-dev__row { display: flex; gap: 12px; font-size: 12.5px; min-width: 0; }
.sec-dev__k { width: 34px; flex: none; color: var(--muted); }
.sec-dev__v { color: var(--text-2); word-break: break-all; }
.sec-dev__v.mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.sec-dev__btn { --btn-danger-solid: 0; }

/* 登录历史事件卡 */
.sec-ev {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  padding: 10px 13px;
}
.sec-ev__top { display: flex; align-items: center; gap: 8px; }
.sec-ev__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-ev__meta { margin-top: 5px; font-size: 12.5px; color: var(--text-2); }
.sec-ev.is-warn {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 7%, var(--panel-2));
}
.sec-ev__end { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0 2px; }

/* ================= 动态广场 ================= */
.msquare { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; max-width: 1080px; margin: 0 auto; }
.msquare__head { display: flex; align-items: flex-start; gap: 12px; }
.msquare__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.msquare__pub { display: inline-flex; align-items: center; gap: 7px; }
.msquare__seg { width: 100%; }
.msquare__seg .seg__item { flex: 1; justify-content: center; }
.msquare__sorts { display: flex; gap: 8px; margin-top: -4px; }
.msquare__sort {
  padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: all .18s var(--ease);
}
.msquare__sort:hover { border-color: var(--line-2); color: var(--text-2); }
.msquare__sort.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* 双列瀑布流：窄屏回落单列 */
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .mgrid { grid-template-columns: 1fr; } }

/* 卡片化动态：在原列表样式基础上提供卡片变体 */
.moment--card {
  display: block; padding: 15px 16px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.moment--card:hover { box-shadow: var(--shadow-1); border-color: var(--line-2); }
.moment__head { display: flex; align-items: center; gap: 10px; }
.moment__headinfo { flex: 1; min-width: 0; }
.moment__authorline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.moment__ftag { margin-left: 2px; font-size: 11px; padding: 1px 8px; }
.mfollow {
  flex: none; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  font-size: 12.5px; font-weight: 600; transition: all .18s var(--ease);
}
.mfollow:hover { background: var(--accent-soft); }
.mfollow.is-on { border-color: var(--line-2); color: var(--muted); }
.mfollow.is-on:hover { background: transparent; }
.gmark { font-size: 12px; font-weight: 700; line-height: 1; }
.gmark--m { color: #4da3ff; }
.gmark--f { color: #ff7eb0; }

/* 长文折叠：6 行封顶 + 底部渐隐 */
.moment__text.is-folded {
  max-height: calc(1.65em * 6); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.moment__more {
  display: inline-block; background: none; border: 0; padding: 0; margin: 2px 0 8px;
  color: var(--accent); font-size: 13px; cursor: pointer;
}
.moment__more:hover { text-decoration: underline; }

/* ================= 动态个人主页 ================= */
.mprofile { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px; max-width: 1080px; margin: 0 auto; }
.m-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .m-hero { grid-template-columns: 1fr; } }
.m-hero__main {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.m-hero__main > .grow { min-width: 0; }
.m-hero__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; flex-wrap: wrap; }
.m-hero__age {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.m-hero__sig { font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; }
.m-hero__handle { font-size: 12px; color: var(--muted); margin-top: 3px; }
.m-hero__stats { display: flex; gap: 26px; padding: 4px 0; }
.m-hero__stat { display: flex; flex-direction: column; gap: 1px; }
.m-hero__stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.m-hero__stat span { font-size: 12px; color: var(--muted); }
.m-hero__acts { display: flex; gap: 9px; flex-wrap: wrap; }
.m-hero__follow.is-on { opacity: .75; }
.m-hero__block { border: 1px solid var(--line-2); color: var(--text-2); background: transparent; }
.m-hero__block:hover { border-color: var(--danger); color: var(--danger); }
.m-hero__selftip { align-self: center; font-size: 13px; color: var(--muted); padding: 6px 0; }

/* ================= 捐赠页 v2 ================= */
.notice__hero-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  color: var(--accent); opacity: .9; margin-bottom: 2px;
}
.donate-notebar {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.donate-notebar__ico { color: var(--accent); flex: none; margin-top: 2px; }
.donate-notebar__tip { font-size: 13px; line-height: 1.6; color: var(--text-2); }
.donate-notebar__row { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.donate-notebar__val {
  flex: 1; display: flex; align-items: center; padding: 8px 12px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px; overflow-x: auto; white-space: nowrap;
}
.donate-notebar__copy { flex: none; }

.donate-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.donate-pay__btn {
  --pay-color: var(--accent);
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--pay-color) 38%, transparent);
  background: color-mix(in srgb, var(--pay-color) 11%, var(--panel-2));
  color: var(--text-1, var(--text-2)); text-align: left;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.donate-pay__btn:hover { border-color: var(--pay-color); box-shadow: var(--shadow-1); }
.donate-pay__ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--pay-color); color: #fff;
}
.donate-pay__name { font-weight: 700; font-size: var(--fs-md); }

.donate-donors {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 15px 16px;
}
.donate-donors__title { font-weight: 800; font-size: var(--fs-md); }
.donate-donors__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.donate-donors__list { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.donate-donors__item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
}
.donate-donors__ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #7c5cff);
}
.donate-donors__name { font-weight: 600; font-size: 13.5px; }
.donate-donors__msg { font-size: 12px; color: var(--muted); margin-top: 1px; }
.donate-donors__amt { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ================= 后台 · 安全态势 ================= */
.admin-shield {
  --shield-c: var(--muted);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 17px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--shield-c) 30%, var(--line));
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--shield-c) 8%, transparent) 0%, transparent 55%),
    var(--panel-2);
  margin-bottom: 4px;
}
.admin-shield.is-ok { --shield-c: var(--ok); }
.admin-shield.is-warn { --shield-c: var(--warn); }
.admin-shield.is-bad { --shield-c: var(--danger); }
.admin-shield.is-probe { --shield-c: var(--accent); }
.admin-shield__main { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.admin-shield__ico {
  width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--shield-c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--shield-c) 30%, transparent);
  color: var(--shield-c);
}
.admin-shield__t { font-weight: 800; font-size: 15.5px; }
.admin-shield__d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.admin-shield__nums { display: flex; gap: 22px; }
.admin-shield__cell { text-align: center; min-width: 64px; }
.admin-shield__n { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-shield__l { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.admin-shield__go { flex: none; }

/* ---------- 发布时的「发布到」目标条：入口决定目的地，不再提供互切开关 ---------- */
.mpubtarget {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin-bottom: 14px; border-radius: var(--r-md, 12px);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.mpubtarget__ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent);
}
.mpubtarget__t { font-size: 13px; color: var(--muted); }
.mpubtarget__t b { color: var(--text-1, var(--text)); font-weight: 700; margin-left: 4px; }
.mpubtarget__hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---------- 点赞名单：「N 人赞过」可点开看是谁赞的 ---------- */
.moment__likes-host { min-height: 0; }
.moment__likes {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 3px 9px 3px 8px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--muted);
  background: var(--panel-2, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  transition: color .16s var(--ease-out, ease), background .16s var(--ease-out, ease);
}
.moment__likes:hover { color: var(--accent); background: var(--accent-soft); }
.moment__likes-more { font-size: 12px; opacity: .7; }
.moment__act.is-on { color: var(--accent); }

.mlike-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; }
.mlike-chip {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent;
  transition: background .16s var(--ease-out, ease), border-color .16s var(--ease-out, ease);
}
.mlike-chip:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.mlike-chip__n { font-size: var(--fs-sm); font-weight: 600; }

/* ---------- 动态侧栏：好友动态 / 动态广场 两行入口（共用一份，不重复） ---------- */
.moments-side__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 11px; margin: 0 0 4px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: inherit; font: inherit;
  cursor: pointer; transition: background .16s var(--ease-out, ease);
}
.moments-side__item:hover { background: var(--hover, var(--accent-soft)); }
.moments-side__item.is-on {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.moments-side__ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
.moments-side__item.is-on .moments-side__ico { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.moments-side__meta { min-width: 0; }
.moments-side__t { font-size: 13px; font-weight: 600; }
.moments-side__d {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}