/* 阳光留言本 —— 样式与多主题（粉/蓝/绿/紫） */
/* 设计基调：圆角、柔和阴影、粉彩、青春可爱阳光 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* 字体可在后台「文字外观」里换，默认微软雅黑 */
  font-family: var(--site-font, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif);
  color: #3a3a3a;
  min-height: 100vh;
  line-height: 1.7;
  /* 阻断子元素（如 .topbar 的 margin-top）与 body 的外边距合并，
     否则整页会比视口多出几像素，凭空多出一条滚动条 */
  display: flow-root;
}

/* ---------- 主题变量 ---------- */
body.theme-pink  { --primary:#ff6699; --primary-soft:#ffd6e8; --accent:#ffb3d1; --bg-gradient:linear-gradient(135deg,#ffe6f0,#ffd6ea); }
body.theme-blue  { --primary:#5b9cf0; --primary-soft:#d6e8ff; --accent:#a9c8ff; --bg-gradient:linear-gradient(135deg,#e6f1ff,#d6e8ff); }
body.theme-green { --primary:#3fc28a; --primary-soft:#d6f5e6; --accent:#a9e8cf; --bg-gradient:linear-gradient(135deg,#e6f9f0,#d6f5e6); }
body.theme-purple{ --primary:#a07cf0; --primary-soft:#ece0ff; --accent:#cdb8ff; --bg-gradient:linear-gradient(135deg,#f0e9ff,#ece0ff); }

/* ---------- 顶栏 ---------- */
.topbar {
  /* 与横幅同宽，做成悬浮圆角条，不再整屏铺白盖住背景 */
  position: sticky; top: 0; z-index: 50;
  max-width: 1000px; margin: 10px auto 0; padding: 0 18px;
  background: none; box-shadow: none; backdrop-filter: none;
}
.topbar-inner {
  padding: 7px 16px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(90,70,110,.12);
}
.brand { font-weight: 800; font-size: 18px; color: var(--primary); text-decoration: none; white-space: nowrap; flex: none; }
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; justify-content: center; flex-wrap: wrap; }
.nav a { color: #555; text-decoration: none; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; font-size: 14px; }
.nav a:hover { background: var(--primary-soft); color: var(--primary); }
.admin-link { color: var(--primary) !important; }
.userbox { display: flex; align-items: center; gap: 8px; flex: none; }
.hi { font-size: 13px; color: #666; }
.btn-mini {
  display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 13px;
  background: var(--primary-soft); color: var(--primary); text-decoration: none; border: 0; cursor: pointer; font-weight: 600;
}
.btn-mini:hover { background: var(--primary); color: #fff; }
.btn-mini.primary { background: var(--primary); color: #fff; }
.btn-mini.danger { background: #ffe0e0; color: #e04b4b; }
.btn-mini.danger:hover { background: #e04b4b; color: #fff; }

/* ---------- 容器 ---------- */
.container { max-width: 1000px; margin: 22px auto; padding: 0 18px 40px; }
.page-title { color: var(--primary); font-size: 24px; margin: 8px 0 16px; }
.muted { color: #999; font-size: 13px; }
.danger { color: #e04b4b; }

/* ---------- 卡片 / 表单 ---------- */
.card {
  background: rgba(255,255,255,.92); border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06); margin-bottom: 18px;
}
.form { display: flex; flex-direction: column; gap: 14px; }
.form.narrow { max-width: 460px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: #555; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form textarea, .form select {
  border: 2px solid #eee; border-radius: 12px; padding: 10px 12px; font-size: 15px; font-family: inherit;
  background: #fff; transition: border-color .2s; width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--primary); outline: none; }
.form textarea { resize: vertical; }
.btn-primary {
  align-self: flex-start; background: var(--primary); color: #fff; border: 0; padding: 11px 26px;
  border-radius: 24px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px var(--accent);
}
.btn-primary:hover { filter: brightness(1.05); }
.form > a.btn-mini, .form > div > a.btn-mini { align-self: flex-start; }
.hp { position: absolute; left: -9999px; }

/* 表情栏 */
.emoji-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-bar .emoji {
  border: 0; background: #f6f6f6; border-radius: 10px; font-size: 20px; padding: 4px 7px; cursor: pointer;
}
.emoji-bar .emoji:hover { background: var(--primary-soft); }
.emoji-bar.inline { max-width: 280px; }
/* 聊天室里的表情：单行横向滚动，避免撑高输入区 */
.chat-input .emoji-bar.inline {
  max-width: 190px; flex-wrap: nowrap; overflow-x: auto; flex: none;
  padding: 2px 0; scrollbar-width: thin;
}
.chat-input .emoji-bar.inline .emoji { flex: none; font-size: 18px; padding: 3px 5px; }

/* ---------- 提示 ---------- */
.flash { border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: #e7f8ee; color: #2e9e5b; }
.flash-info { background: #e7f0fb; color: #3a7bd5; }
.flash-warn { background: #fff4e0; color: #c98a00; }
.flash-error { background: #ffe9e9; color: #e04b4b; }

/* ---------- 帖子列表 ---------- */
.board-head { margin-bottom: 16px; }
.post-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.post-card {
  background: rgba(255,255,255,.92); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.avatar.big { width: 48px; height: 48px; font-size: 20px; }
.nick { font-weight: 700; color: #444; }
.time { font-size: 12px; color: #aaa; }
.post-title { display: block; font-size: 18px; font-weight: 800; color: var(--post-title-color, #333); text-decoration: none; margin: 4px 0; }
.post-title:hover { color: var(--primary); }
.post-excerpt { color: var(--post-text-color, #666); margin: 4px 0; }
.thumb { max-width: 160px; max-height: 120px; border-radius: 12px; margin-top: 8px; }
.post-foot { margin-top: 8px; font-size: 13px; color: #999; }

/* ---------- 版块网格 ---------- */
.forum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.forum-grid.small { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
.forum-card {
  display: block; text-decoration: none; color: #333; background: rgba(255,255,255,.9);
  border-radius: 16px; padding: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.06); transition: transform .15s;
}
.forum-card:hover { transform: translateY(-3px); }
.forum-card h3 { margin: 0 0 6px; color: var(--primary); }
.forum-card .count { font-size: 13px; color: #888; margin: 6px 0 0; }
.forum-card .subs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--primary-soft); color: var(--primary); border-radius: 10px; padding: 2px 8px; font-size: 12px; }
.sub-forums { margin: 18px 0; }
.sub-forums h3 { color: var(--primary); }

/* ---------- 各版块最新文章（首页多版块时显示在版块入口下方） ---------- */
.latest-all { margin-top: 28px; }
.latest-list {
  background: rgba(255,255,255,.94); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.latest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; text-decoration: none; border-bottom: 1px solid #f5f2f8;
}
.latest-item:last-child { border-bottom: 0; }
.latest-item:hover { background: var(--primary-soft); }
.latest-badge {
  flex: none; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--primary); background: var(--primary-soft);
  border-radius: 8px; padding: 2px 8px;
}
.latest-item:hover .latest-badge { background: #fff; }
.latest-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--post-title-color, #333); font-weight: 600;
}
.latest-meta { flex: none; font-size: 12px; color: #999; }
@media (max-width: 640px) {
  .latest-meta { display: none; }
  .latest-badge { max-width: 84px; }
}

/* ---------- 帖子详情 ---------- */
.post-detail .post-h { font-size: 24px; color: var(--post-title-color, #333); margin: 10px 0; }
.post-body { white-space: pre-wrap; color: var(--post-text-color, #444); margin: 10px 0; }
/* 正文里识别出来的图片与链接（粘贴带图文章时用） */
.pc-img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.pc-link { color: var(--primary); word-break: break-all; }
.post-img { max-width: 100%; border-radius: 14px; margin-top: 10px; }
.reply-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.reply-card { display: flex; gap: 10px; background: rgba(255,255,255,.85); border-radius: 14px; padding: 12px 14px; }
.reply-main { flex: 1; }
.reply-body { white-space: pre-wrap; color: var(--post-text-color, #444); margin-top: 2px; }
.reply-img { max-width: 200px; border-radius: 12px; margin-top: 6px; }
.reply-form { margin-top: 16px; }
.reply-actions { display: flex; align-items: center; gap: 10px; }

.empty { text-align: center; color: #aaa; padding: 30px; }
.pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin: 18px 0; }
.pager a { background: var(--primary-soft); color: var(--primary); padding: 6px 14px; border-radius: 16px; text-decoration: none; font-weight: 600; }
.pager span { color: #888; }

/* ---------- 聊天室 ---------- */
.online-badge { font-size: 14px; background: var(--primary-soft); color: var(--primary); padding: 3px 12px; border-radius: 14px; vertical-align: middle; }
.chat-wrap { display: flex; flex-direction: column; }
.chat-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: #f1f1f1; align-self: flex-start; }
.chat-msg.me { align-self: flex-end; background: var(--primary); color: #fff; }
/* 按发言人区分气泡颜色：浅底深字，对比度足够（自己仍用主题色） */
.chat-msg.tone-0 { background: #ffe3ef; color: #9c2357; }
.chat-msg.tone-1 { background: #e2f0ff; color: #17517f; }
.chat-msg.tone-2 { background: #e4f7e8; color: #1c6438; }
.chat-msg.tone-3 { background: #fff4d6; color: #7d5200; }
.chat-msg.tone-4 { background: #f0e7ff; color: #532c96; }
.chat-msg.tone-5 { background: #ffe8de; color: #983c17; }
.chat-msg.tone-6 { background: #dff6f5; color: #0c625d; }
.chat-msg.tone-7 { background: #fde9f7; color: #872a70; }
/* 文字消息：昵称与正文同一行「昵称：内容」；图片消息昵称单独一行 */
.chat-msg .who { font-size: 13px; opacity: .9; font-weight: 700; display: inline; margin-right: 1px; }
.chat-msg.has-img .who { display: block; font-size: 12px; opacity: .85; margin: 0 0 4px; }
.chat-msg .chat-text { white-space: pre-wrap; word-break: break-word; }
.chat-msg img { max-width: 200px; border-radius: 10px; display: block; }
.chat-input { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid #eee; flex-wrap: wrap; }
.chat-input #chat-text { flex: 1; min-width: 160px; border: 2px solid #eee; border-radius: 20px; padding: 10px 14px; }
.icon-btn { border: 0; background: var(--primary-soft); border-radius: 50%; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }

/* ---------- 聊天室：语音消息 ---------- */
.chat-msg.has-voice .who { display: block; font-size: 12px; opacity: .85; margin: 0 0 5px; }
.chat-voice { display: flex; flex-direction: column; gap: 4px; }
.chat-voice audio { width: 240px; max-width: 100%; height: 34px; display: block; }
.chat-voice .voice-dur { font-size: 11px; opacity: .75; }
.chat-voice .voice-text {
  font-size: 13px; line-height: 1.55; padding: 4px 9px;
  background: rgba(255,255,255,.72); color: #5f5570;
  border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
  white-space: pre-wrap; word-break: break-word;
}
.chat-msg.me .chat-voice .voice-text { background: rgba(255,255,255,.22); color: #fff; border-left-color: rgba(255,255,255,.75); }
.chat-voice .voice-text.pending { font-style: italic; opacity: .7; }
.chat-voice .voice-text.failed { font-style: normal; opacity: .6; }
/* 录音中的横条 */
.voice-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 9px 14px;
  background: #fff2f6; border: 1px solid #ffd3e2; border-radius: 14px;
}
.voice-bar[hidden] { display: none; }
.voice-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #ff4d6d; flex: none;
  animation: recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
.voice-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: #e0446b; letter-spacing: .5px; }
.voice-tip { flex: 1; min-width: 110px; font-size: 12px; color: #9b8fab; }
.icon-btn.recording { background: #ffe0e8; box-shadow: 0 0 0 4px rgba(255,77,109,.18); animation: recPulse 1.2s ease-in-out infinite; }
/* 手机窄屏：录音条压成一行，别把「发送」挤到第二行 */
@media (max-width: 640px) {
  .voice-bar { gap: 8px; padding: 8px 11px; flex-wrap: nowrap; }
  .voice-bar .voice-tip { display: none; }
  .voice-bar .btn-mini { padding: 4px 11px; font-size: 12px; }
  .chat-voice audio { width: 100%; min-width: 180px; }
}

/* ---------- 后台布局 ---------- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-side { width: 200px; background: rgba(255,255,255,.9); box-shadow: 2px 0 12px rgba(0,0,0,.06); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.admin-brand { font-weight: 800; color: var(--primary); font-size: 18px; margin-bottom: 12px; padding: 0 6px; }
.admin-side nav { display: flex; flex-direction: column; gap: 2px; }
.admin-side nav a { text-decoration: none; color: #555; padding: 9px 12px; border-radius: 10px; font-weight: 600; }
.admin-side nav a:hover { background: var(--primary-soft); color: var(--primary); }
.admin-main { flex: 1; padding: 22px 28px; max-width: 1100px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: rgba(255,255,255,.92); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.stat b { display: block; font-size: 26px; color: var(--primary); }
.stat span { font-size: 13px; color: #888; }
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee; }
.kv li span { color: #888; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; font-size: 14px; }
.tbl th { color: var(--primary); background: var(--primary-soft); }
.tbl tr:hover td { background: #fafafa; }
.alpha-scale { display: flex; justify-content: space-between; font-size: 12px; color: #999; margin: 2px 0 8px; }
.switch-row { display: flex; flex-direction: column; gap: 8px; }
.switch-row label { font-weight: 500; display: flex; flex-direction: row; align-items: center; gap: 8px; }
/* 后台：聊天室高度快捷预设 */
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 8px; }

/* 背景图库 */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }
.bg-item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.06); border: 2px solid transparent; }
.bg-item.active { border-color: var(--primary); }
.bg-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.bg-name { font-size: 12px; color: #666; padding: 6px 8px; word-break: break-all; }
.bg-roles { color: var(--primary); font-size: 11px; margin-top: 2px; line-height: 1.4; }
.bg-acts { display: flex; gap: 6px; padding: 0 8px 8px; }

.site-foot { text-align: center; padding: 18px; color: #aaa; font-size: 13px; }
.site-foot p { margin: 2px 0; }

/* ---------- 顶部横幅 ---------- */
.banner { max-width: 1000px; margin: 16px auto 0; padding: 0 18px; }
.banner-inner {
  position: relative; display: flex; align-items: center; gap: 18px;
  height: 150px; padding: 0 26px; border-radius: 22px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #eaf4fb;
  box-shadow: 0 10px 26px rgba(90,140,180,.18); text-decoration: none;
}
.banner-inner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 35%, rgba(255,255,255,.18) 60%, rgba(255,255,255,.55) 100%);
}
.banner-logo {
  position: relative; flex: none; width: 82px; height: 82px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 3px solid rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(120,160,200,.25);
}
.banner-logo span {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
  font-size: 42px; line-height: 1; color: var(--primary);
}
.banner-center { position: relative; flex: 1; text-align: center; min-width: 0; }
.banner-title {
  margin: 0; font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", serif;
  font-size: 44px; font-weight: 700; letter-spacing: 10px; text-indent: 10px;
  color: #3d6580; text-shadow: 0 1px 0 #fff, 0 0 20px rgba(255,255,255,.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.banner-sub {
  margin: 6px 0 0; font-size: 13px; letter-spacing: 4px; color: #5f7f96;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.banner-mascots { position: relative; flex: none; display: flex; gap: 2px; font-size: 34px; }
.banner-mascots span {
  display: inline-flex; width: 52px; height: 52px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.75); box-shadow: 0 4px 12px rgba(120,160,200,.2);
}
.banner-mascots span:last-child { transform: translateY(10px); }

/* ---------- 帖子单行列表：标题 | 作者 | 点击/回复 | 最后回复 ---------- */
.post-table {
  background: rgba(255,255,255,.94); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.post-tr {
  display: grid; grid-template-columns: 1fr 185px 86px 185px;
  grid-template-areas: "title author count last";
  gap: 10px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid #f4f4f4; font-size: 14px;
}
.post-tr:last-child { border-bottom: 0; }
.post-tr:hover { background: #fffafd; }
.post-th {
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: 13px; letter-spacing: 1px;
}
.post-th:hover { background: var(--primary-soft); }
.pt-title { grid-area: title; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; }
.pt-title a {
  color: var(--post-title-color, #333); font-weight: 700; text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-tag { flex: none; }
.pt-title a:hover { color: var(--primary); }
.pt-tag {
  display: inline-block; font-style: normal; font-size: 11px; color: var(--primary);
  background: var(--primary-soft); border-radius: 8px; padding: 0 6px; margin-left: 4px;
  vertical-align: 1px;
}
.pt-author, .pt-last { display: flex; flex-direction: column; line-height: 1.45; color: #555; font-size: 13px; min-width: 0; }
.pt-author { grid-area: author; }
.pt-last { grid-area: last; }
.pt-author i, .pt-last i { font-style: normal; color: #aaa; font-size: 12px; }
.pt-count { grid-area: count; color: #888; font-size: 13px; text-align: center; }

/* ---------- 底部统计 ---------- */
.site-foot { max-width: 1000px; margin: 0 auto; }
.foot-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  background: rgba(255,255,255,.85); border-radius: 14px;
  padding: 10px 16px; margin: 6px 0 10px; font-size: 13px; color: #667;
}
.foot-stats b { color: var(--primary); }
.foot-online {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: #888; margin-bottom: 8px;
}
.foot-label { color: #999; }
.tag.guest { background: #f0f0f0; color: #999; }

/* ---------- 聊天室布局（成员列表在左） ---------- */
/* 成员列表收窄，把更多宽度留给聊天框 */
.chat-layout { display: grid; grid-template-columns: 176px 1fr; gap: 12px; align-items: start; }
/* 消息区高度：默认 = 常规高度 + 约 5 行（每行约 44px），后台可改（--chat-h / 手机端 --chat-h-m） */
.chat-wrap { height: var(--chat-h, calc(66vh + 220px)); margin-bottom: 0; display: flex; flex-direction: column; }
/* 简洁模式（后台可开）：隐藏顶部横幅与页脚，页面上下留白收紧，空间全给聊天框 */
body.chat-simple .topbar { margin-top: 8px; }
body.chat-simple .container { margin-top: 12px; padding-bottom: 16px; }
body.chat-simple .page-title { font-size: 20px; margin: 0 0 10px; }
.chat-side { position: sticky; top: 78px; margin-bottom: 0; padding: 14px 10px; }
.chat-side h3 { margin: 0 0 10px; font-size: 14px; color: var(--primary); display: flex; align-items: center; gap: 6px; }
.online-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.online-item {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  border-radius: 10px; cursor: pointer; font-size: 13px; color: #444;
}
.online-item span:not(.online-avatar):not(.online-dot) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-item:hover { background: var(--primary-soft); color: var(--primary); }
.online-item em { font-style: normal; font-size: 11px; color: var(--primary); margin-left: auto; flex: none; }
.online-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none;
}
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #4cd07d; flex: none; }
.side-tip { margin: 10px 0 0; }

/* 聊天内容框：背景层独立，滚动消息时背景图固定不动
   --chat-box-img  自定义背景图（可空）
   --chat-box-alpha 白纱浓度 0~1（越大文字越清晰） */
.chat-box-frame {
  flex: 1; min-height: 0; position: relative; overflow: hidden; border-radius: 14px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(255,255,255,var(--chat-box-alpha,.72)), rgba(255,255,255,var(--chat-box-alpha,.72))),
    var(--chat-box-img, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.chat-box {
  height: 100%; overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
  /* 滚动条常驻占位 + 滚动不带动整页，避免消息增减时文字宽度变化造成抖动 */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.chat-text-wrap { position: relative; flex: 1; min-width: 160px; display: flex; }
.chat-text-wrap #chat-text { width: 100%; }
.mention-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
  background: #fff; border-radius: 12px; padding: 6px; min-width: 170px;
  border: 1px solid #f0e6f5;
  box-shadow: 0 10px 28px rgba(90,60,110,.18);
}
.quip-bar { position: relative; z-index: 1; }
.mention-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; padding: 6px 8px; border-radius: 8px;
  cursor: pointer; font-size: 14px; font-family: inherit; color: #444;
}
.mention-item:hover { background: var(--primary-soft); color: var(--primary); }
.chat-msg.mention-me { box-shadow: 0 0 0 2px var(--accent); }
.chat-msg .at { color: var(--primary); font-weight: 700; }
.chat-msg[class*="tone-"] .at { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.me .at { color: #fff; text-decoration: underline; }
.quip-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px dashed #f0f0f0;
}
.quip-label { font-size: 12px; color: #aaa; }
.quip-chip {
  background: var(--primary-soft); color: var(--primary); border: 0; border-radius: 13px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quip-chip:hover { background: var(--primary); color: #fff; }
.quip-dice { background: #fff3f9; }

/* 进出场播报：居中细字，像系统旁白 */
.chat-sys {
  align-self: center; max-width: 92%; text-align: center;
  font-size: 12px; color: #9a8fa8; line-height: 1.7;
  padding: 2px 10px;
}
.chat-sys-name { color: var(--primary); font-weight: 700; }

/* 动作与调侃：斜体旁白，左侧留一点缩进 */
.chat-act {
  align-self: center; max-width: 92%; text-align: center;
  font-size: 13px; color: #7d6b86; font-style: italic; line-height: 1.7;
  padding: 3px 10px;
}
.chat-act-who { font-style: normal; font-weight: 700; color: var(--primary); }
.chat-act-mark { font-style: normal; color: var(--accent); }
.chat-act.mine { color: var(--primary); }

/* 动作面板 */
.act-wrap { position: relative; }
.act-bar { border-top: 0; padding-top: 0; }
.act-toggle { background: linear-gradient(135deg, #ffe6f2, #e8f0ff); color: #8a5b93; }
.act-hint { font-size: 12px; color: #c0b6c8; }
.act-panel {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: #fff; border-radius: 16px; padding: 10px 12px 12px;
  border: 1px solid #f1e8f7;
  box-shadow: 0 14px 36px rgba(90,60,110,.18);
}
.act-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.act-panel-head b { font-size: 14px; color: var(--primary); }
.act-panel-head .muted { font-size: 12px; }
.act-x {
  margin-left: auto; border: 0; background: #f5f2f7; color: #8a7f93;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1;
}
.act-x:hover { background: var(--primary-soft); color: var(--primary); }
.act-list { display: flex; flex-direction: column; gap: 4px; max-height: 232px; overflow-y: auto; }
.act-item {
  text-align: left; border: 0; background: #faf7fc; color: #55495e;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1.5;
}
.act-item:hover { background: var(--primary-soft); color: var(--primary); }

/* ---------- 徽章 / 帖子标记 ---------- */
.badge {
  display: inline-block; font-style: normal; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 8px; margin-left: 4px; vertical-align: 1px;
  background: #f1f1f1; color: #777;
}
.badge.role-admin { background: #ffe1e1; color: #d94b4b; }
.badge.role-vip { background: #fff1d6; color: #c98a00; }
.badge.role-cert { background: #e2f4ff; color: #2d86b8; }
.badge.role-level { background: var(--primary-soft); color: var(--primary); }
.badge.role-attr { background: #eef3ff; color: #4a72c4; }
.flag {
  display: inline-block; font-style: normal; font-size: 11px; font-weight: 700;
  line-height: 17px; padding: 0 5px; border-radius: 5px; margin-right: 5px;
  vertical-align: 1px;
}
.flag-top { background: #ffdfe8; color: #e0447a; }
.flag-best { background: #fff2cc; color: #c58a00; }
.flag-lock { background: #ececec; color: #777; }
.flag-shield { background: #f0e6f7; color: #8b5bb8; }
.flag-wait { background: #e6f0ff; color: #3f74c9; }

/* ---------- 面包屑 / 版块操作 ---------- */
.post-crumb { font-size: 13px; color: #999; margin: 4px 0 10px; }
.post-crumb a { color: var(--primary); text-decoration: none; }
.board-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- 公告 ---------- */
.announce-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.announce {
  display: flex; gap: 10px; background: rgba(255,255,255,.92); border-left: 4px solid var(--primary);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 3px 10px rgba(0,0,0,.04);
}
.announce p { margin: 2px 0 0; font-size: 13px; color: #666; }

/* ---------- 版块分类 ---------- */
.forum-group { margin-bottom: 18px; }
.group-title {
  font-size: 16px; color: var(--primary); margin: 6px 0 10px;
  padding-left: 10px; border-left: 4px solid var(--primary); line-height: 1.2;
}

/* ---------- 版主工具条 ---------- */
.mod-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; }
.mod-label { font-size: 13px; font-weight: 700; color: var(--primary); margin-right: 4px; }
.fav-form { display: inline; }
.btn-mini.active { background: #fff1c9; color: #b4800b; }

/* ---------- 回复可见 ---------- */
.hidden-reply {
  margin: 14px 0; padding: 26px; text-align: center; color: #8a7f96;
  background: repeating-linear-gradient(45deg, #faf6ff, #faf6ff 10px, #f4eefc 10px, #f4eefc 20px);
  border-radius: 12px; font-size: 14px;
}

/* ---------- 会员资料 / 我的面板 ---------- */
.profile-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.profile-main { flex: 1; min-width: 200px; }
.profile-name { font-size: 22px; color: #333; margin: 0 0 6px; }
.profile-sign { color: #7a6b86; font-style: italic; margin: 6px 0 0; }
.profile-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.profile-stats .stat { padding: 12px; }
.profile-stats .stat b { font-size: 20px; }
.level-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: #888; flex-wrap: wrap; }
.level-track { flex: 1; min-width: 140px; height: 8px; background: #f0eef4; border-radius: 6px; overflow: hidden; }
.level-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 6px; }
.my-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- 选项卡 ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.tab {
  padding: 7px 16px; border-radius: 18px; background: rgba(255,255,255,.9);
  color: #666; text-decoration: none; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tab:hover { color: var(--primary); }
.tab.active { background: var(--primary); color: #fff; }

/* ---------- 好友/人员列表 ---------- */
.people-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
.people-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
.people-list li:last-child { border-bottom: 0; }
.nick-link { color: #444; font-weight: 700; text-decoration: none; }
.nick-link:hover { color: var(--primary); }

/* ---------- 回复历史 ---------- */
.reply-history { display: flex; flex-direction: column; gap: 12px; }
.rh-item { padding-bottom: 10px; border-bottom: 1px dashed #f0f0f0; }
.rh-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rh-title { color: #444; font-weight: 700; text-decoration: none; }
.rh-title:hover { color: var(--primary); }
.rh-body { color: #666; font-size: 14px; margin: 2px 0; }

/* ---------- 短消息 ---------- */
.mail-list { padding: 6px; }
.mail-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #444; font-size: 14px;
}
.mail-item:hover { background: var(--primary-soft); }
.mail-item.unread { font-weight: 700; }
.mail-peer { flex: none; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snippet { flex: 1; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-time { flex: none; font-size: 12px; color: #aaa; }
.mail-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6699; flex: none; }
.mail-body { white-space: pre-wrap; color: #444; margin: 10px 0; }
.mail-acts { display: flex; gap: 8px; align-items: center; }

/* ---------- 后台表单/筛选 ---------- */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > label { flex: 1; min-width: 200px; }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar input[type=text], .filter-bar select {
  border: 2px solid #eee; border-radius: 10px; padding: 7px 10px; font-size: 14px; font-family: inherit;
}
.batch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.batch-bar select { border: 1px solid #eee; border-radius: 8px; padding: 5px 8px; }
/* 转移到版块：未选操作时目标下拉禁用，选中后高亮，避免"以为点了却没生效" */
.batch-bar select.to-forum:disabled { opacity: .5; cursor: not-allowed; background: #f7f4fa; }
.batch-bar select.to-forum.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 154, 191, .25);
  background: #fff;
}
.move-tip { font-size: 12px; color: #9b8fab; }
/* 「版块」列直接下拉移动：选中别的版块即确认提交 */
.mv-select {
  border: 1px solid transparent; border-radius: 8px; padding: 3px 4px;
  font-size: 13px; max-width: 110px; background: #f7f4fa; color: #6b6178;
  cursor: pointer; transition: .15s;
}
.mv-select:hover, .mv-select:focus { border-color: var(--primary); background: #fff; color: var(--primary); outline: none; }
.post-admin-tbl th, .post-admin-tbl td { white-space: nowrap; }
.post-admin-tbl .pt-cell { white-space: normal; }
.hidden-form { display: none; }
.inline-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: #777; }
.inline-flags input[type=number] { border: 1px solid #eee; border-radius: 6px; padding: 2px 4px; }
.post-admin-tbl .pt-cell { max-width: 320px; }

/* 文字外观：颜色选择器 + 实时预览 */
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type=color] {
  width: 54px; height: 38px; padding: 3px; flex: none;
  border: 1px solid #e6e0ec; border-radius: 10px; background: #fff; cursor: pointer;
}
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.hex-input {
  width: 104px; font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 13px; letter-spacing: .5px; text-transform: lowercase;
}
.font-preview {
  background: rgba(255,255,255,.72); border: 1px dashed #e2d8ee;
  border-radius: 12px; padding: 12px 14px; margin: 2px 0 6px;
}
.font-preview .fp-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.4; }
.font-preview .fp-body { margin: 0; font-size: 15px; line-height: 1.7; }
.ops-cell .btn-mini { margin: 1px 2px 1px 0; }
.nav-badge {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  background: #ff5d8f; color: #fff; border-radius: 9px; font-size: 11px; margin-left: 3px;
  text-align: center; vertical-align: 1px;
}
.foot-links { font-size: 12px; }
.foot-links a { color: #8a7f96; text-decoration: none; margin: 0 6px; }
.foot-links a:hover { color: var(--primary); }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .admin-layout { flex-direction: column; }
  .admin-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .admin-side nav { flex-direction: row; flex-wrap: wrap; }
  .topbar { padding: 0 10px; margin-top: 8px; }
  .topbar-inner { flex-wrap: wrap; row-gap: 4px; border-radius: 18px; padding: 8px 12px; }
  .brand { font-size: 16px; }
  .nav { order: 3; flex-basis: 100%; justify-content: center; gap: 0; font-size: 12.5px; }
  .nav a { padding: 3px 6px; }

  .banner { padding: 0 10px; margin-top: 10px; }
  .banner-inner { height: 112px; padding: 0 14px; gap: 10px; border-radius: 16px; }
  .banner-logo { width: 56px; height: 56px; }
  .banner-logo span { font-size: 28px; }
  .banner-title { font-size: 26px; letter-spacing: 4px; text-indent: 4px; }
  .banner-sub { font-size: 11px; letter-spacing: 2px; }
  .banner-mascots { display: none; }

  .post-tr { grid-template-columns: 1fr auto; grid-template-areas: "title count" "author last"; gap: 4px 10px; padding: 10px 12px; }
  .post-th { display: none; }
  .pt-author, .pt-last { flex-direction: row; gap: 6px; align-items: baseline; }
  .pt-author i, .pt-last i { font-size: 11px; }

  .chat-layout { grid-template-columns: 1fr; }
  .chat-wrap { order: 1; height: var(--chat-h-m, calc(100vh - 310px)); min-height: 420px; }
  .chat-side { order: 2; position: static; }
  .online-list { max-height: 180px; }
  .quip-chip { max-width: 150px; }

  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-name { font-size: 19px; }
  .mail-peer { width: 70px; }
  .post-crumb { font-size: 12px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tab { white-space: nowrap; }
}