:root {
  --bg: #faf5ee;
  --card: #ffffff;
  --ink: #3d3229;
  --ink-soft: #8a7d70;
  --accent: #d97b4a;
  --accent-deep: #c05f2f;
  --danger: #c0392b;
  --danger-deep: #922b21;
  --line: #eadfd2;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* v5 修复：任何带 hidden 属性的元素必须隐藏（display:flex 等会覆盖 UA 默认值）*/
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

/* ========== 顶部用户栏 ========== */
.topbar {
  background: rgba(255,253,249,0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand {
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}
.user-area { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-area .btn { white-space: nowrap; flex-shrink: 0; }
.user-menu-btn { white-space: nowrap; min-width: 0; }
.user-no-chip {
  background: linear-gradient(135deg,#e8a87c,#d97b4a);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.chip-nick {
  min-width: 0;
  max-width: 32vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-chip {
  background: linear-gradient(135deg,#7b6a9d,#5b4a86);
  color:#fff; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600;
}

/* v5：账户下拉菜单（退出/注销收进账户下级）*/
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 2px;
  background: none; border: none; padding: 2px; cursor: pointer;
  font-family: inherit; max-width: 68vw; border-radius: 999px;
}
.user-menu-btn .user-no-chip,
.user-menu-btn .admin-chip {
  display: inline-flex; align-items: center;
  max-width: 56vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.user-menu-btn .caret { color: #b95c30; font-size: 12px; line-height: 1; padding: 0 3px; transition: transform .15s; }
.user-menu.open .caret { transform: rotate(180deg); }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(120,80,40,.18);
  padding: 6px; min-width: 152px;
  display: none; z-index: 100;
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 12px;
  font-size: 13px; font-family: inherit; color: var(--ink);
  cursor: pointer; border-radius: 8px; white-space: nowrap;
}
.user-dropdown button:hover { background: #faf3ea; }
.user-dropdown button.danger { color: var(--danger); }
.user-dropdown button.danger:hover { background: #fdeeec; }

/* ========== Hero ========== */
.hero {
  background: linear-gradient(135deg, #e8a87c 0%, #d97b4a 55%, #b95c30 100%);
  color: #fff8f0;
  text-align: center;
  padding: 52px 20px 44px;
}
.hero h1 { font-size: 42px; letter-spacing: 12px; text-indent: 12px; font-weight: 600; }
.slogan { margin-top: 10px; font-size: 16px; opacity: 0.95; }
.sub    { margin-top: 6px; font-size: 13px; opacity: 0.75; }

.container {
  max-width: 640px;
  margin: -24px auto 0;
  padding: 0 16px 60px;
  position: relative;
}

/* ========== 卡片通用 ========== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(120, 90, 60, 0.06);
}

/* ========== 通用按钮 ========== */
.btn {
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.solid { background: var(--accent); color:#fff; border-color: var(--accent); }
.btn.solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); color:#fff; }
.btn.ghost { background: transparent; }
.btn.block { display: block; width: 100%; padding: 10px; font-size: 14px; font-weight: 600; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }

.muted { color: var(--ink-soft); }
.muted.small { font-size: 12px; margin-top: 6px; }

/* ========== 发布区 ========== */
.composer { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.composer-header {
  background: #fdf6ee;
  border: 1px dashed #e3c8ab;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--accent-deep);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.composer-header b { color: var(--accent-deep); }
.composer input[type="text"],
.composer textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: #fdfaf6;
  outline: none;
  font-family: inherit;
}
.composer textarea { padding: 12px; font-size: 15px; resize: vertical; }
.composer input[type="text"]:focus,
.composer textarea:focus { border-color: var(--accent); }

.category-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fdfaf6;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.cat-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.bottom-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.img-btn {
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.img-btn:hover { border-color: var(--accent); color: var(--accent); }
.char-count { margin-left: auto; font-size: 12px; color: #c0b5a8; white-space: nowrap; }
.submit-btn {
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
  font-family: inherit;
}
.submit-btn:hover { background: var(--accent-deep); }
.submit-btn:disabled { background: #d8cfc4; cursor: not-allowed; }

.img-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.img-preview .thumb { position: relative; }
.img-preview img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}
.img-preview .remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; cursor: pointer; line-height: 1;
}

/* ========== 板块 tabs ========== */
.tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0 16px;
  flex-wrap: wrap;
  align-items: center;
}
.tab {
  padding: 7px 16px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-link { text-decoration: none; }
.tab-link:hover { border-color: var(--accent); color: var(--accent); }

/* ========== 搜索 ========== */
.search {
  flex: 1;
  min-width: 200px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.search:focus { border-color: var(--accent); }

/* ========== 帖子流 ========== */
.feed { display: flex; flex-direction: column; gap: 14px; }
.post { padding: 16px 18px; }
.post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff; flex-shrink: 0;
}
.post-name { font-size: 14px; font-weight: 600; }
.post-meta { font-size: 12px; color: var(--ink-soft); }
.tag {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f6ede3;
  color: #a26a3f;
  flex-shrink: 0;
}
.post-content { font-size: 15px; white-space: pre-wrap; word-break: break-word; }

/* v4：公告标题 / 地点 */
.post-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 6px;
  line-height: 1.5;
}
.post-location {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--accent-deep);
}
.post-meta .post-location { margin-left: 8px; }

/* v4：站点公告卡片（暖色高亮） */
.post.post-notice {
  background: linear-gradient(180deg, #fff8ee 0%, #fffdf8 60%);
  border-color: #eccfa6;
  border-left: 4px solid var(--accent);
}
.post.post-notice .post-title { color: var(--accent-deep); }
.tag.tag-notice {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* v4：发布区地点/标题输入框 */
.post-title-input {
  font-weight: 600;
}

/* v4：管理台公告发布区 */
.admin-notice-box {
  padding: 18px;
  margin: 14px 0;
  background: linear-gradient(180deg, #fff8ee, #fffdf8);
  border-color: #eccfa6;
}
.admin-notice-box textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: #fdfaf6;
  outline: none;
  font-family: inherit;
  resize: vertical;
}
.admin-notice-box textarea:focus,
.admin-notice-box input:focus { border-color: var(--accent); background: #fff; }
.admin-notice-box .field input[type="text"] { background: #fdfaf6; }

.post-images { display: grid; gap: 6px; margin-top: 10px; }
.post-images.count-1 { grid-template-columns: minmax(0, 320px); }
.post-images.count-2, .post-images.count-3 { grid-template-columns: repeat(2, 1fr); }
.post-images img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  cursor: zoom-in;
}
.post-images.count-3 img:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

.post-foot {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.foot-info {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-soft);
}
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); }
.action-btn.on { background: #fdeee2; border-color: var(--accent); color: var(--accent-deep); }
.action-btn.agree.on { background: #e8f3ea; border-color: #5b8a72; color: #3d6b56; }
.action-btn.stomp.on { background: #eceff3; border-color: #8a97a8; color: #4a5568; }
.action-btn.delete { margin-left: auto; color: var(--danger); border-color: #f0c5bf; }
.action-btn.delete:hover { border-color: var(--danger); background: #fdeeec; color: var(--danger-deep); }
/* v7：发布日期时间 */
.post-datetime { color: #b0a493; font-size: 11px; white-space: nowrap; }

/* ========== 评论区 ========== */
.comments-section {
  margin-top: 12px;
  background: #fdfaf6;
  border: 1px solid #f1e5d2;
  border-radius: 10px;
  padding: 12px;
}
.comment-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.comment-form textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  resize: vertical;
  outline: none;
  min-height: 40px;
  max-height: 140px;
  font-family: inherit;
}
.comment-form textarea:focus { border-color: var(--accent); }
.comment-form button {
  align-self: flex-end;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.comment-form button:disabled { background: #d8cfc4; cursor: not-allowed; }

.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment-item {
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #f0e4d0;
}
.comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  gap: 8px;
  margin-bottom: 4px;
}
.comment-head .mini-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: #d97b4a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.comment-item .c-name { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.comment-item .c-meta { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.comment-item .c-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; }

/* ========== 空状态与页脚 ========== */
.empty { text-align: center; padding: 60px 0; color: var(--ink-soft); }
.empty-sub { font-size: 13px; margin-top: 6px; opacity: 0.7; }

.footer { text-align: center; padding: 30px 16px 40px; color: var(--ink-soft); font-size: 13px; }

/* ========== Toast ========== */
.toast {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translateX(-50%);
  background: rgba(50, 40, 32, 0.92);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 99;
}

/* ========== Lightbox ========== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 98; cursor: zoom-out;
}
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* ========== Modal（登录/注册） ========== */
.modal { position: fixed; inset: 0; z-index: 200; }
.modal-mask {
  position: absolute; inset: 0;
  background: rgba(50,40,32,0.55);
  backdrop-filter: blur(3px);
}
.modal-body {
  position: relative;
  max-width: 420px;
  margin: 6vh auto;
  background: var(--card);
  border-radius: 16px;
  padding: 26px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: pop .2s ease;
  max-height: 88vh;            /* 小屏手机字段多时弹窗可滚动，不会被截断 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f4ecdf; color: var(--ink-soft);
  cursor: pointer;
}
.modal-close:hover { background: var(--line); color: var(--ink); }
.modal-body h2 { font-size: 19px; }
.modal-body .muted { margin-bottom: 16px; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfaf6;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.field input:focus { border-color: var(--accent); background: #fff; }

.switch-register {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
}
.switch-register a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.switch-register a:hover { text-decoration: underline; }

/* 昵称开关 */
.register-fields {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 6px;
}
.nickname-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.switch {
  position: relative;
  width: 38px; height: 22px;
  display: inline-block;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 22px;
  cursor: pointer;
  transition: 0.2s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch-label { font-size: 13px; color: var(--ink-soft); }

/* v5：注册性别选择 */
.gender-ctrl { display: flex; gap: 10px; }
.gender-btn {
  flex: 1;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfaf6;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.gender-btn .g-ico { width: 22px; height: 22px; display: block; }
.gender-btn:hover { border-color: var(--accent); }
.gender-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* v5：性别徽章（卡通 SVG：女生粉色 / 男生黑色）*/
.gender-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
}
.gender-badge svg { width: 18px; height: 18px; display: block; }
.comment-item .gender-badge svg { width: 16px; height: 16px; }
.user-no-chip .gender-badge svg { width: 15px; height: 15px; }

/* v5：评论删除按钮 */
.c-del {
  background: none;
  border: none;
  color: #c9b8a8;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
  border-radius: 6px;
}
.c-del:hover { color: var(--danger); background: #fdeeec; }
#fNickname {
  flex: 1; min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfaf6;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
#fNickname:disabled { background: #f5ede1; color: var(--ink-soft); }

/* ========== 管理员登录卡片 ========== */
.admin-login {
  padding: 28px 24px;
  margin-top: 30px;
}
.stats-bar {
  display: flex; gap: 18px; align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 13px;
}
.stats-bar b { font-size: 18px; margin-left: 6px; color: var(--accent-deep); }

.admin-post-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-actions {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.admin-comments {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-comment {
  background: #fdfaf6;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #f1e5d2;
  font-size: 13px;
}
.admin-comment .btn.danger { margin-top: 6px; }

/* v7：管理台用户管理 */
.admin-users-box { margin: 14px 0; }
.admin-users { display: flex; flex-direction: column; gap: 8px; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fdfaf6; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.admin-user-row.is-disabled { background: #f1efec; }
.admin-user-row .au-info { min-width: 0; }
.admin-user-row .au-actions { display: flex; gap: 6px; flex-shrink: 0; }
.au-badge {
  font-size: 11px; color: #fff; background: #8a97a8; border-radius: 999px;
  padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
@media (max-width: 480px) {
  .admin-user-row { flex-direction: column; align-items: stretch; }
  .admin-user-row .au-actions { justify-content: flex-end; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 32px; letter-spacing: 8px; }
  .modal-body { margin: 3vh 12px; padding: 20px 18px; }
  .post-images.count-2, .post-images.count-3 { grid-template-columns: 1fr 1fr; }
  .stats-bar { flex-wrap: wrap; }
}

/* ========== v10：打招呼 / 聊天 / 个人主页 ========== */
/* 作者名链接（帖子/评论里点击进主页） */
.name-link { color: inherit; text-decoration: none; }
.name-link:hover { color: var(--accent-deep); text-decoration: underline; }
.c-name.name-link { display: inline; }
.avatar-link { display: inline-flex; flex-shrink: 0; }
.avatar-link:hover .avatar { opacity: .85; }

/* 顶栏消息入口 + 未读红点 */
.msg-entry { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.unread-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 4px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 17px;
}
.unread-total {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px;
}
.dropdown-link {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; font-size: 13px; color: var(--ink);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; border-radius: 8px; white-space: nowrap; box-sizing: border-box;
}
.dropdown-link:hover { background: #faf3ea; text-decoration: none; }

.section-title { font-size: 15px; margin: 20px 2px 10px; color: var(--ink); }

/* 会话列表 */
.chat-list { display: flex; flex-direction: column; gap: 8px; }
.chat-row {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .15s;
}
.chat-row:hover { border-color: var(--accent); }
.chat-row-main {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit;
}
.chat-row-info { flex: 1; min-width: 0; }
.chat-row-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.chat-row-last {
  font-size: 13px; color: var(--ink-soft); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-admin-tag {
  font-size: 10px; color: #fff; background: #7b6a9d; border-radius: 6px;
  padding: 1px 6px; margin-left: 2px;
}
.chat-gone-tag {
  font-size: 10px; color: #fff; background: #9a9a9a; border-radius: 6px;
  padding: 1px 6px; margin-left: 2px;
}

/* 找人列表 */
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
}
.user-row-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.user-row-info { min-width: 0; }
.big-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
}

/* 聊天窗口 */
.chat-window { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fdfaf6;
}
.chat-peer {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.chat-peer:hover .chat-peer b, .chat-peer:hover { color: var(--accent-deep); }
.chat-peer .mini-avatar { flex-shrink: 0; }
.chat-peer b { font-size: 15px; }
.msg-box {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 14px; background: #faf6ef;
  display: flex; flex-direction: column; gap: 12px;
}
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; }
.msg-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.theirs { align-self: flex-start; }
.msg-row .mini-avatar { flex-shrink: 0; width: 32px; height: 32px; font-size: 14px; }
.msg-content { min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.msg-bubble {
  padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55;
  word-break: break-word; overflow-wrap: anywhere;
  max-width: 100%;
}
.theirs .msg-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mine .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg-time { font-size: 10px; opacity: .5; margin-top: 3px; }
.mine .msg-time { text-align: right; }
.chat-input {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--line); background: #fff;
}
.chat-input textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; background: #fdfaf6;
}
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
.chat-img-btn { flex-shrink: 0; font-size: 18px; padding: 8px 10px; }
.img-preview {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #fdfaf6; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.img-preview-item {
  position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-del {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: 0;
  font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.msg-images { display: flex; gap: 4px; flex-wrap: wrap; max-width: 200px; margin-top: 2px; }
.msg-images img {
  width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line);
}
.msg-images img:hover { opacity: .85; }
.mine .msg-images img { border-color: rgba(255,255,255,.3); }

/* 个人主页 */
.profile-card { padding: 22px 20px; }
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 700;
}
.profile-info { min-width: 0; flex: 1; }
.profile-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-name-row h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.profile-name-row span { display: inline-flex; align-items: center; }
.profile-stats { display: flex; gap: 28px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats b { font-size: 20px; margin-top: 2px; }
.profile-post .post-foot { border: 0; padding-top: 4px; }

/* 聊天页布局：聊天窗撑满视口、贴住底部 */
.chat-page { margin-top: 16px; padding-bottom: 40px; }
body.in-chat .chat-page { margin-top: 12px; padding-bottom: 12px; }
body.in-chat .chat-window { height: calc(var(--vvh, 100dvh) - 84px); min-height: 380px; }
.mini-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
img.mini-avatar, img.big-avatar {
  object-fit: cover; background: #efe9dd;
}
img.big-avatar { width: 44px; height: 44px; }

@media (max-width: 480px) {
  body.in-chat .chat-window { height: calc(var(--vvh, 100dvh) - 80px); }
  .chat-header .btn { padding: 4px 8px; font-size: 12px; }
  .send-btn { white-space: nowrap; flex-shrink: 0; }
}

/* 手机端顶栏与发布区紧凑化 */
@media (max-width: 480px) {
  .msg-entry .msg-txt { display: none; }
  .msg-entry { gap: 0; padding: 6px 10px; }
  .topbar-inner { padding: 8px 10px; gap: 6px; }
  .user-no-chip { padding: 4px 8px; }
  .chip-nick { max-width: 26vw; }
  .bottom-row { gap: 8px; }
  .bottom-row .img-btn { font-size: 12px; padding: 6px 8px; }
  .submit-btn { padding: 8px 14px; font-size: 13px; }
}

/* ---- 备案号（页面最底部） ---- */
.footer a.icp { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer a.icp:hover { color: var(--ink); }