/* ============================================
   「咕嘟星球」旅行与生活分享站 — 清新文艺风格
   ============================================ */

/* 主题色板：浅色（默认）— 所有颜色都走变量，dark 主题只需覆盖变量值 */
:root {
  --ink: #2f3a34;          /* 标题 / 主要文字 */
  --ink-body: #3d4a44;     /* 正文 */
  --ink-light: #6b7770;    /* 次要文字 */
  --ink-faint: #9aa5a0;    /* 弱化文字 */

  --paper: #fbfaf6;        /* 页面底色 */
  --card: #ffffff;         /* 卡片 / 面板底色 */
  --bg: #fbfaf6;           /* 输入框 / chip 等中性底（历史上漏定义过，v=58 补上） */
  --hover-bg: #f7f5ef;     /* 中性按钮 hover 底色 */
  --hover-soft: rgba(227, 240, 236, 0.5);  /* 列表项 hover 底色 */
  --warn-soft: #fdf7f5;    /* 危险提示底色 */

  --accent: #3f8f7d;       /* 主色（绿） */
  --accent-soft: #e3f0ec;  /* 主色浅底 */
  --accent-deep: #2e6b5d;  /* 主色深（链接 / hover 文字） */
  --on-accent: #ffffff;    /* 主色底上的文字 */

  --line: #e8e5dc;         /* 分隔线 */
  --line-soft: rgba(232, 229, 220, 0.6);   /* 更轻的边框 */
  --dot: #e0695a;          /* 未读红点底 */
  --dot-ink: #ffffff;      /* 未读红点字 */
  --ring: #ffffff;         /* 头像等圆形描边 */
  --nav-bg: rgba(251, 250, 246, 0.92);
  --toast-bg: rgba(35, 46, 41, 0.92);
  --toast-ink: #ffffff;
  --mark-bg: #fdf1c4;      /* 搜索命中高亮底 */
  --mark-ink: #7a5c12;
  --code-bg: #f0eee6;      /* 行内代码底 */
  --code-ink: #b3573f;     /* 行内代码字 */
  --pre-bg: #2d3733;       /* 代码块底 */
  --pre-ink: #dce7e2;      /* 代码块字 */

  --shadow: 0 2px 12px rgba(63, 111, 99, 0.08);
  --shadow-card: 0 10px 26px rgba(63, 111, 99, 0.14);
  --shadow-moment: 0 4px 14px rgba(60, 90, 80, 0.08);
  --shadow-avatar: 0 3px 8px rgba(63, 111, 99, 0.3);

  --radius: 14px;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* 深色模式：只覆盖变量，其余样式完全复用 */
[data-theme="dark"] {
  --ink: #e9edea;
  --ink-body: #ccd6d1;
  --ink-light: #a3aeaa;
  --ink-faint: #7b8682;

  --paper: #131a17;
  --card: #1b2320;
  --bg: #131a17;
  --hover-bg: #242e2a;
  --hover-soft: rgba(111, 191, 174, 0.1);
  --warn-soft: #2b1e1c;

  --accent: #4fa896;
  --accent-soft: #22332e;
  --accent-deep: #7cc8b7;
  --on-accent: #0e1614;

  --line: #2b3633;
  --line-soft: rgba(255, 255, 255, 0.08);
  --dot: #e5725f;
  --dot-ink: #231715;
  --ring: #1b2320;
  --nav-bg: rgba(19, 26, 23, 0.9);
  --toast-bg: rgba(233, 237, 234, 0.94);
  --toast-ink: #161d1a;
  --mark-bg: #4d3f14;
  --mark-ink: #ffe9a3;
  --code-bg: #232c29;
  --code-ink: #e29a86;
  --pre-bg: #0e1512;
  --pre-ink: #cddbd5;

  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-moment: 0 4px 14px rgba(0, 0, 0, 0.42);
  --shadow-avatar: 0 3px 8px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* 暗色模式专项修复（v=58）：硬编码浅色底的地方，文字会跟着 --ink 变浅色而看不清 */
[data-theme="dark"] .blogger-card {
  background: linear-gradient(160deg, #223330 0%, #1e2a26 55%, var(--card) 100%);
  border-color: rgba(90, 150, 140, 0.3);
}
[data-theme="dark"] .blogger-avatar {
  background: rgba(255, 255, 255, 0.12);
  border-color: #2b3633;
}
[data-theme="dark"] .blogger-stats { border-top-color: rgba(120, 160, 150, 0.25); }
[data-theme="dark"] .recent-cover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

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

html {
  scroll-behavior: smooth;
  /* 移动端：禁止 iOS 自动放大字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  min-height: 100vh;
  /* 触摸端：去掉点按高亮，并去掉 300ms 双击缩放等待 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--accent); }

.nav-links { display: flex; gap: 6px; margin-left: auto; }

.nav-link {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-light);
  transition: all 0.2s;
}
.nav-link:hover { color: var(--accent-deep); text-decoration: none; background: var(--accent-soft); }
.nav-link.active { color: var(--on-accent); background: var(--accent); }

/* 导航个人主页入口：用小头像替代文字 */
.nav-link.nav-avatar {
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link.nav-avatar:hover { background: var(--accent-soft); }
.nav-link.nav-avatar.active { background: var(--accent-soft); }
.nav-link.nav-avatar.active .nav-avatar-img {
  box-shadow: 0 0 0 2px var(--accent);
}
.nav-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--accent-soft);
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

/* 导航右侧：搜索 / 主题切换图标按钮 */
.nav-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.nav-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-light);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.nav-icon:hover { background: var(--accent-soft); border-color: var(--accent-soft); transform: rotate(-8deg); }
.nav-icon.active { background: var(--accent-soft); border-color: var(--accent); }
/* display 会压掉 hidden 属性的 UA 样式，显式补一条：登录态隐藏登录入口用 */
.nav-icon[hidden], .drawer-link[hidden] { display: none; }

/* 顶栏咕嘟小图标：点击显示 / 隐藏右下角吉祥物（隐藏后变灰） */
.nav-mascot-btn img { width: 24px; height: 24px; object-fit: contain; display: block; }
.nav-mascot-btn.off img { filter: grayscale(1); opacity: 0.4; }

/* ---------- 移动端抽屉导航（窄屏 ☰ 打开，桌面隐藏） ---------- */
.nav-menu-btn { display: none; }
.nav-drawer { position: fixed; inset: 0; z-index: 900; }
.drawer-mask {
  position: absolute;
  inset: 0;
  background: rgba(25, 34, 30, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-drawer.open .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 76%;
  max-width: 300px;
  background: var(--card);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 22px 14px;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
}
.nav-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
  padding: 0 10px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  margin-bottom: 2px;
  border-radius: 12px;
  font-size: 15.5px;
  color: var(--ink-light);
  transition: background 0.15s, color 0.15s;
}
.drawer-link:hover { background: var(--hover-soft); color: var(--accent-deep); text-decoration: none; }
.drawer-link.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }

/* 私信入口：右上角未读红点 */
#navChatBtn { position: relative; }
.nav-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  color: var(--dot-ink);
  background: var(--dot);
  border: 1px solid var(--paper);
  border-radius: 999px;
  transform: none;
}
.nav-badge[hidden] { display: none; }

/* ---------- 首页 Hero ---------- */
/* ---------- poetize 式全屏 hero（仅纯首页） ---------- */

/* ---------- 主页双页签：讨论 / 文章 ---------- */
.home-tabs {
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 18px;
}
.home-tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  font-family: var(--sans);
  font-size: 15px;
  padding: 9px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.home-tab:hover { color: var(--accent-deep); border-color: var(--accent); }
.home-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}

/* ---------- 讨论发布框 ---------- */
.discuss-composer {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-moment);
  margin-bottom: 16px;
}
.discuss-composer textarea {
  width: 100%; box-sizing: border-box;
  border: none; resize: vertical;
  font-family: var(--sans); font-size: 15px;
  color: var(--ink-body); background: transparent;
  outline: none; min-height: 64px;
}
.discuss-composer textarea::placeholder { color: var(--ink-faint); }
/* 标题输入（选填）：文章式发布的第一行 */
.discuss-composer .dc-title,
.discuss-composer input#dcTitle {
  width: 100%; box-sizing: border-box;
  border: none; outline: none; background: transparent;
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  color: var(--ink); padding: 0 0 8px;
  border-bottom: 1px dashed var(--line-soft); margin-bottom: 8px;
}
.discuss-composer input#dcTitle::placeholder { color: var(--ink-faint); font-weight: 400; font-family: var(--sans); font-size: 14px; }
.dc-compose-bar {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 12px; margin-top: 4px;
}
.dc-compose-bar input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--paper);
  color: var(--ink-body); font-family: var(--sans); font-size: 13px;
  padding: 7px 10px; outline: none;
}
.dc-compose-bar input:focus { border-color: var(--accent); }
.discuss-composer.guest {
  text-align: center; color: var(--ink-light);
}
.discuss-composer.guest p { margin: 4px 0 12px; font-size: 14.5px; }

/* ---------- 讨论筛选条 ---------- */
.discuss-filterbar {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.df-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.df-label { font-size: 13px; color: var(--ink-faint); }
.df-chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-light);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  user-select: none;
}
.df-chip:hover { color: var(--accent-deep); border-color: var(--accent); }
.df-chip.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent);
}
.df-chip.tag.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.df-search { justify-content: space-between; }
.df-search input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--paper);
  color: var(--ink-body); font-family: var(--sans); font-size: 13.5px;
  padding: 8px 12px; outline: none;
}
.df-search input:focus { border-color: var(--accent); }
.df-clear {
  border: none; background: none;
  color: var(--ink-faint); font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.df-clear:hover { color: var(--dot); }

/* ---------- 讨论卡列表 ---------- */
.discuss-list { display: flex; flex-direction: column; gap: 14px; }
.discuss-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-moment);
  transition: box-shadow 0.25s, transform 0.25s;
}
.discuss-card:hover { box-shadow: var(--shadow-card); }
.dc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dc-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; text-decoration: none;
  overflow: hidden; flex: none;
  border: 2px solid var(--ring);
  box-shadow: var(--shadow-avatar);
}
.dc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-name {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; line-height: 1.3;
}
.dc-name:hover { color: var(--accent-deep); }
.dc-time { font-size: 12px; color: var(--ink-faint); }
.dc-del {
  margin-left: auto;
  border: none; background: none;
  font-size: 15px; cursor: pointer;
  opacity: 0.45; transition: opacity 0.2s;
}
.dc-del:hover { opacity: 1; }
/* 统一信息流：讨论卡沿用文章卡（.p-card）样式，另加类型角标与封面图 */
.p-card { position: relative; }
.p-cover-img { background: var(--accent-soft, rgba(63, 143, 125, 0.1)); }
.p-cover-img::after { display: none; }
.p-cover-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.p-card:hover .p-cover-img img { transform: scale(1.04); }
.p-kind {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: rgba(16, 28, 30, 0.55); color: #fff;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  backdrop-filter: blur(2px);
  text-decoration: none;
}
.p-del {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(16, 28, 30, 0.55); color: #fff;
  font-size: 13px; line-height: 1; opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
}
.p-card:hover .p-del { opacity: 1; }
.p-del:hover { background: var(--dot, #c0392b); }
.dc-cover-n {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(16, 28, 30, 0.62); color: #fff;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.feed-err { margin-top: 12px; }
/* 讨论详情页（poetize 文章页式）：顶部大图横幅 + 860px 窄栏正文 */
/* 横幅统一用站方默认大图（渐变只是图片加载失败时的兜底） */
.dd-hero {
  position: relative; height: 420px;
  background: linear-gradient(135deg, #8fd0bd, #3f8f7d);
  background-image: url("../img/discuss-hero.jpg");
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.dd-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 28, 30, 0.08) 30%, rgba(16, 28, 30, 0.58));
}
.dd-del { opacity: 1; right: 18px; top: 18px; }
.dd-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 860px; margin: 0 auto;
  padding: 0 24px 34px; color: #fff;
}
.dd-title {
  font-family: var(--serif);
  font-size: 30px; font-weight: 700; line-height: 1.45;
  color: #fff; margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(16, 28, 30, 0.45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dd-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  font-size: 13px; color: rgba(255, 255, 255, 0.88);
}
.dd-author {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; font-weight: 600;
}
.dd-author:hover span { text-decoration: underline; }
.dd-author .dc-ava { width: 30px; height: 30px; font-size: 13px; border-color: rgba(255, 255, 255, 0.65); }
.dd-body { max-width: 860px; margin: 0 auto; padding: 34px 24px 56px; }
/* 正文走 Markdown 渲染（article-body 的 md-* 排版），不再 pre-wrap */
.dd-text { font-size: 16px; line-height: 1.9; color: var(--ink-body); word-break: break-word; }
.dd-text .md-p { margin: 16px 0; }
.dd-imgs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin: 20px 0 6px;
}
.dd-img {
  width: 100%; height: 150px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line-soft); display: block;
}
.dd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dd-react {
  display: flex; justify-content: center; gap: 18px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px dashed var(--line);
}
.dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 8px 20px;
  font-size: 14px; color: var(--ink-light); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.15s;
}
.dd-btn em { font-style: normal; font-weight: 600; }
.dd-btn span { font-size: 12.5px; color: var(--ink-faint); }
.dd-btn:hover { color: var(--accent-deep); border-color: var(--accent); transform: translateY(-1px); }
.dd-btn.on { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
.dd-end {
  text-align: center; margin-top: 26px;
  color: var(--ink-faint); font-size: 13.5px; letter-spacing: 4px;
}
/* 讨论配图：发布框预览 */
.dc-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.dc-imgs:empty { display: none; }
.dc-preview {
  position: relative; width: 72px; height: 72px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-soft);
}
.dc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-img-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(16, 28, 30, 0.6); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dc-img-btn {
  border: 1px solid var(--line); background: var(--bg, transparent);
  border-radius: 10px; font-size: 17px; cursor: pointer;
  padding: 6px 12px; line-height: 1;
  transition: border-color 0.18s, background-color 0.18s;
}
.dc-img-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.dc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dc-tag {
  font-size: 12.5px; color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.dc-tag:hover, .dc-tag.active { background: var(--accent); color: var(--on-accent); }
.dc-foot {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.dc-views { font-size: 13px; color: var(--ink-faint); }
.dc-act {
  border: none; background: none;
  color: var(--ink-light); font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.2s, transform 0.15s;
}
.dc-act i { font-style: normal; }
.dc-act:hover { color: var(--accent-deep); transform: translateY(-1px); }
.dc-act.on { color: var(--accent); font-weight: 600; }
.load-more-wrap { text-align: center; margin-top: 16px; }

/* ---------- 讨论评论区（详情页底部） ---------- */
.dd-comments { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--line); }
.ddc-title {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--ink); margin-bottom: 16px;
}
.ddc-title em { font-style: normal; color: var(--accent-deep); margin-left: 4px; }
.ddc-list { display: flex; flex-direction: column; gap: 18px; }
/* poetize 式嵌套：根评论 + 底下缩进的回复串 */
.ddc-thread { display: flex; flex-direction: column; gap: 12px; }
.ddc-replies {
  margin-left: 46px;
  padding-left: 14px;
  border-left: 2px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.ddc-replies-n {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px;
  padding: 2px 10px; margin-bottom: 2px;
}
.ddc-item-sub .ddc-ava { width: 28px; height: 28px; font-size: 12px; }
.ddc-item-sub .ddc-text { font-size: 13.5px; }
.ddc-item-sub .ddc-name { font-size: 13px; }
.ddc-item { display: flex; gap: 10px; }
.ddc-ava {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--accent-deep);
  text-decoration: none;
}
.ddc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ddc-main { flex: 1; min-width: 0; }
.ddc-head { display: flex; align-items: baseline; gap: 8px; }
.ddc-name { font-size: 13.5px; font-weight: 600; color: var(--ink-light); text-decoration: none; }
.ddc-name:hover { color: var(--accent-deep); }
.ddc-time { font-size: 12px; color: var(--ink-faint); }
.ddc-del {
  border: none; background: none;
  color: var(--ink-faint); font-size: 15px; cursor: pointer; line-height: 1;
}
.ddc-del:hover { color: #d96a5a; }
.ddc-text { font-size: 14.5px; line-height: 1.7; color: var(--ink-body); margin-top: 3px; word-break: break-word; }
.ddc-empty { font-size: 14px; color: var(--ink-faint); padding: 8px 0 4px; }
.ddc-form { display: flex; gap: 10px; margin-top: 16px; }
.ddc-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--paper); color: var(--ink-body);
  font-family: var(--sans); font-size: 14px;
  padding: 10px 16px; outline: none;
}
.ddc-form input:focus { border-color: var(--accent); }
.ddc-send {
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; padding: 10px 22px;
  transition: opacity 0.2s, transform 0.15s;
}
.ddc-send:hover { opacity: 0.9; transform: translateY(-1px); }
.ddc-send:disabled { opacity: 0.55; cursor: default; }
.ddc-form.guest { justify-content: center; }
/* 避让右下角鲸鱼娘（尺寸随视口缩放）：发送按钮 / 回复按钮不落进她的范围 */
.dd-comments .ddc-form { margin-right: max(0px, calc(870px - 50vw)); }
.dd-comments .ddc-head { padding-right: max(0px, calc(870px - 50vw)); }
@media (max-width: 900px) {
  .dd-comments .ddc-form { margin-right: calc(var(--mascot-size, 400px) - 8px); }
  .dd-comments .ddc-head { padding-right: calc(var(--mascot-size, 400px) * 0.45); }
}
/* 评论回复（v=58）：回复按钮 / 回复指向标签 / 取消回复条 / 折叠展开 */
.ddc-reply-btn {
  margin-left: auto; margin-top: 0; padding: 0 2px; border: none; background: none;
  font-size: 12.5px; color: var(--ink-faint); cursor: pointer; flex: none;
}
.ddc-reply-btn:hover { color: var(--accent-deep); }
.ddc-replyto {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--accent-soft);
  font-size: 12px; color: var(--accent-deep); vertical-align: 1px;
}
.ddc-replying {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 7px 14px;
  border-radius: 999px; background: var(--accent-soft);
  font-size: 12.5px; color: var(--accent-deep);
}
.ddc-replying button {
  border: none; background: none; color: var(--accent-deep);
  font-size: 14px; cursor: pointer; line-height: 1; padding: 0 2px;
}
.ddc-replying button:hover { color: #d96a5a; }
.ddc-more {
  display: block; margin: 12px auto 0; padding: 6px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-light);
  font-size: 12.5px; cursor: pointer; transition: all 0.18s;
}
.ddc-more:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------- 标签输入：# 前缀 + 站内标签自动补全面板 ---------- */
.dc-tag-sug {
  position: fixed;
  z-index: 1400;
  max-width: 340px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(30, 60, 48, 0.16);
}
.dc-tag-sug-hint {
  font-size: 11px; color: var(--ink-faint);
  padding: 3px 8px 6px; font-family: var(--sans);
}
.dc-tag-sug-item {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--ink-body);
  padding: 6px 10px; border-radius: 8px;
  transition: background 0.12s;
}
.dc-tag-sug-item:hover, .dc-tag-sug-item.on {
  background: var(--accent-soft); color: var(--accent-deep);
}

/* ---------- 收藏夹（个人空间） ---------- */
.fav-postlist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px; padding: 0;
}

@media (max-width: 640px) {
  .discuss-card { padding: 13px 14px; }
  .dd-hero { height: 300px; }
  .dd-title { font-size: 22px; }
  .dd-body { padding: 24px 16px 40px; }
  .dd-text { font-size: 15px; }
  .dc-foot { gap: 10px; }
  .ddc-replies { margin-left: 24px; padding-left: 10px; }
}

/* ---------- poetize 式顶部背景横幅（仅纯首页）：大图 + 居中标题 + 波浪过渡 ---------- */
.home-hero {
  position: relative;
  height: min(58vh, 560px);
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  background-color: #2c4a52;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.home-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 28, 30, 0.20), rgba(16, 28, 30, 0.38) 78%, rgba(16, 28, 30, 0.30));
}
/* 标题块落在图片上部天空区，避开中下部主体人物 */
.home-hero-inner { position: relative; text-align: center; color: #fff; padding: 0 24px; margin-bottom: 14vh; }
.home-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: 10px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
  margin: 0 0 18px;
}
.hero-type {
  font-size: 15.5px;
  letter-spacing: 3px;
  opacity: 0.95;
  min-height: 1.6em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  margin: 0;
}
.hero-type::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.1em;
  margin-left: 3px; vertical-align: -0.18em;
  background: currentColor;
  animation: hero-caret 1.05s steps(1) infinite;
}
@keyframes hero-caret { 50% { opacity: 0; } }

.hero-cue {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: hero-bob 2.4s ease-in-out infinite;
  transition: background-color 0.25s, transform 0.25s;
  z-index: 2;
}
.hero-cue:hover { background: rgba(255, 255, 255, 0.3); transform: translateX(-50%) translateY(-3px); }
@keyframes hero-bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 8px; } }

.home-wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 74px; display: block;
  z-index: 1;
}

/* ---------- 筛选态紧凑页头（#/cat/x、#/tag/x） ---------- */
.hero.hero-compact { padding: 56px 24px 8px; }
.hero.hero-compact h1 { font-size: 30px; letter-spacing: 4px; }

/* ---------- 首页左右分栏（侧栏 + 内容区） ---------- */
.home-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 24px 30px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.home-side {
  flex: 0 0 280px;
  position: sticky; top: 86px;
  display: flex; flex-direction: column; gap: 18px;
}
.home-main { flex: 1; min-width: 0; }

.side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: var(--shadow, 0 6px 20px rgba(60, 80, 70, 0.06));
}
.side-title { font-size: 15px; margin: 0 0 14px; color: var(--ink); letter-spacing: 1px; }

.blogger-card {
  text-align: center;
  background: linear-gradient(160deg, #dff1f7 0%, #e8f4ee 60%, var(--card) 100%);
  border-color: rgba(120, 180, 200, 0.35);
  padding: 30px 20px 22px;
}
.blogger-avatar {
  width: 110px; height: 110px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  background: rgba(255, 255, 255, 0.75);
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(50, 90, 80, 0.18);
}
.blogger-name {
  font-family: var(--serif);
  font-size: 24px; font-weight: 700;
  color: var(--ink); letter-spacing: 3px;
  margin-top: 14px;
}
.blogger-bio { font-size: 13px; color: var(--ink-faint); line-height: 1.7; margin: 8px 0 14px; }
.blogger-stats {
  display: flex; justify-content: center; gap: 0;
  border-top: 1px dashed rgba(120, 160, 150, 0.35); padding-top: 14px;
}
.blogger-stats span {
  flex: 1; font-size: 12px; color: var(--ink-faint);
  display: flex; flex-direction: column; gap: 3px;
}
.blogger-stats b { font-size: 17px; color: var(--ink); font-weight: 700; }

/* 侧栏搜索卡（poetize 式） */
.side-search-box { position: relative; }
.side-search-box input {
  width: 100%; box-sizing: border-box;
  padding: 10px 38px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg, #fff);
  font-size: 13.5px; color: var(--ink);
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.side-search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 143, 125, 0.12);
}
.side-search-box .ss-ico {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: 0.55; pointer-events: none;
}

/* 侧栏最近更新（poetize 式缩略图列表） */
.recent-card .recent-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.recent-card .recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.recent-card .recent-item:first-of-type { padding-top: 0; }
.recent-cover {
  flex: 0 0 52px; width: 52px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.recent-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.recent-info b {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.recent-info i { font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.recent-item:hover b { color: var(--accent-deep, var(--accent)); }

/* 区块标题（poetize 式：图标 + 标题） */
.section-head {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 18px;
}
.section-head .sh-ico { font-size: 17px; }
.section-head h2 {
  font-size: 18px; font-weight: 700; color: var(--ink);
  letter-spacing: 1px; margin: 0;
}

.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.side-tag {
  display: inline-block; padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-light);
  cursor: pointer; transition: all 0.18s;
}
.side-tag i { font-style: normal; font-size: 11px; opacity: 0.6; margin-left: 2px; }
.side-tag:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); }
.side-tag.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.side-tag-more { text-align: center; }
.side-tag-more:hover { transform: none; }
.side-empty-tip { font-size: 13px; color: var(--ink-faint); padding: 4px 0; }

/* 公告横幅 */
.notice-bar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(63, 143, 125, 0.12), rgba(63, 143, 125, 0.04));
  border: 1px solid rgba(63, 143, 125, 0.25);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px; color: var(--ink);
  margin-bottom: 18px;
}
.notice-ico { flex: 0 0 auto; }

/* 首页内的分类页签 / 文章网格：左对齐 + poetize 三列大卡（.home-layout 提升优先级，压过后面的基础样式） */
.home-layout .home-catbar { max-width: none; margin: 0 0 20px; padding: 0; justify-content: flex-start; }
.home-layout .home-postlist { max-width: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.home-postlist + .home-moments { margin-top: 34px; }

/* 筛选态的当前筛选条 */
.tag-bar.home-tagbar { max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; }
.hero-compact + .home-layout { padding-top: 20px; }

/* 分栏响应式：窄屏侧栏落到内容下方 */
@media (max-width: 900px) {
  .home-layout { flex-direction: column-reverse; gap: 26px; padding-top: 24px; }
  .home-side { position: static; flex: none; width: 100%; flex-direction: column; }
  .blogger-avatar { width: 84px; height: 84px; }
  .home-hero { height: 52vh; min-height: 340px; }
  .home-hero-inner { margin-bottom: 12vh; }
  .hero-cue { bottom: 60px; }
}
@media (max-width: 640px) {
  .home-side { flex-direction: column; }
  .home-hero { height: 46vh; min-height: 300px; }
  .home-hero-inner { margin-bottom: 10vh; }
  .home-hero h1 { letter-spacing: 6px; }
  .home-wave { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue { animation: none; }
  .hero-type::after { animation: none; }
}

/* ---------- 筛选态紧凑页头之后的历史样式（保留兼容） ---------- */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--ink);
  margin-bottom: 14px;
}

.hero .sub {
  font-size: 15px;
  color: var(--ink-faint);
  letter-spacing: 3px;
}

.hero .divider {
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin: 26px auto 0;
  border-radius: 2px;
}

/* ---------- 分类页签 ---------- */
.cat-bar {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;  /* 首页主导航：居中呈现 */
}

.cat-chip {
  display: inline-block;
  padding: 8px 26px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 2px;
}
.cat-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.cat-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px rgba(63, 143, 125, 0.25); }
.cat-chip .count { font-size: 12px; opacity: 0.75; margin-left: 3px; }

/* ---------- 标签栏 ---------- */
.tag-bar {
  max-width: 1200px;
  margin: 14px auto 28px;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tag-bar .label { font-size: 13px; color: var(--ink-faint); margin-right: 4px; }

.tag-chip {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.18s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.tag-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tag-chip .count { font-size: 12px; opacity: 0.75; margin-left: 3px; }

/* ---------- 文章列表 ---------- */
.post-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.post-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ---------- poetize 式文章大卡（首页三列） ---------- */
.p-card {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: 1px solid var(--line-soft);
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex;
  flex-direction: column;
}
.p-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}
.p-cover {
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.p-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), transparent 60%);
}
.p-cover .cover-icon { font-size: 46px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); z-index: 1; }
.p-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.p-date { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.5px; }
.p-title {
  font-family: var(--serif);
  font-size: 16.5px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card:hover .p-title { color: var(--accent-deep, var(--accent)); }
.p-meta { font-size: 12px; color: var(--ink-faint); }
.p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* ---------- poetize 式文章大卡（首页三列）end ---------- */

.post-cover {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.post-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), transparent 60%);
}
.post-cover .cover-icon { font-size: 44px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); z-index: 1; }

.post-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }

.post-card-date {
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.post-card-title {
  font-family: var(--serif);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
}

.post-card-summary {
  font-size: 13.8px;
  color: var(--ink-light);
  line-height: 1.7;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }

.mini-tag {
  font-size: 11.5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mini-tag.cat-badge { background: var(--accent); color: var(--on-accent); }

.empty-tip {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--ink-faint);
  font-size: 14px;
}

/* ---------- 文章详情 ---------- */
.article-page { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-bottom: 30px;
  transition: color 0.2s;
}
.back-link:hover { color: var(--accent-deep); }

.article-head { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }

.article-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
}
.article-meta .mini-tag { cursor: pointer; }
.article-meta .mini-tag:hover { background: var(--accent); color: var(--on-accent); }
.article-meta .mini-tag.cat-badge { background: var(--accent); color: var(--on-accent); }
.article-meta .mini-tag.cat-badge:hover { background: var(--accent-deep); }

/* Markdown 正文排版 */
.article-body { font-size: 16px; }

.md-h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
  line-height: 1.4;
}
.md-h3 { font-family: var(--serif); font-size: 19px; font-weight: 700; margin: 32px 0 12px; }
.md-h4, .md-h5, .md-h6 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }

.md-p { margin: 16px 0; color: var(--ink-body); }

.md-quote {
  margin: 24px 0;
  padding: 14px 20px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--accent-deep);
  font-family: var(--serif);
  font-size: 15.5px;
}

.md-ul, .md-ol { margin: 16px 0 16px 4px; padding-left: 22px; color: var(--ink-body); }
.md-ul li, .md-ol li { margin: 7px 0; }

.md-code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.88em;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  color: var(--code-ink);
}

.md-pre {
  background: var(--pre-bg);
  color: var(--pre-ink);
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
}

.md-hr {
  border: none;
  height: 1px;
  margin: 44px auto;
  width: 60%;
  background: linear-gradient(to right, transparent, var(--ink-faint), transparent);
}

.md-img { max-width: 100%; border-radius: 10px; margin: 10px 0; }

.md-table-wrap { overflow-x: auto; margin: 24px 0; }

.md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.md-table th {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 700;
  text-align: left;
}
.md-table th, .md-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.md-table tr:last-child td { border-bottom: none; }

.article-end {
  margin-top: 56px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 2px;
}

/* ---------- 文章页：点赞 + 评论 ---------- */
.article-react {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.article-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-like em { font-style: normal; font-weight: 700; }
.article-like-label { font-size: 12.5px; color: var(--ink-faint); transition: color 0.15s; }
.article-like:hover { border-color: var(--accent); color: var(--accent-deep); }
.article-like:hover .article-like-label { color: var(--accent-deep); }
.article-like.liked {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.article-like.liked .article-like-label { color: var(--accent-deep); }
.article-react-tip { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- 文章页：上一篇 / 下一篇 ---------- */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.art-nav-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.art-nav-item.next { text-align: right; align-items: flex-end; }
.art-nav-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.art-nav-item.is-empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.art-nav-dir {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.art-nav-item:hover .art-nav-dir { color: var(--accent-deep); }
.art-nav-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
  text-decoration: none;
  transition: color 0.2s;
}
.art-nav-item:hover .art-nav-title { color: var(--accent-deep); }

/* ---------- 文章页：AI 速读 ---------- */
.ai-read {
  margin: 26px 0 30px;
  padding: 18px 20px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(63, 143, 125, 0.2);
  border-radius: var(--radius);
}
.ai-read[hidden] { display: none; }
.ai-read-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-read-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--accent-deep);
  background: var(--card);
  border: 1px solid rgba(63, 143, 125, 0.28);
  border-radius: 999px;
  padding: 2px 10px;
}
.ai-read-hint { font-size: 12px; color: var(--ink-faint); }
.ai-read-summary {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.ai-read-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ai-read-item {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft, var(--ink));
}
.ai-read-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.ai-read-for { margin-top: 12px; font-size: 13px; color: var(--accent-deep); }

/* 生成中的骨架屏 */
.ai-read-skel { display: flex; flex-direction: column; gap: 9px; }
.ai-read-skel span {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--line-soft);
  animation: aiSkel 1.4s ease-in-out infinite;
}
.ai-read-skel span:nth-child(1) { width: 100%; }
.ai-read-skel span:nth-child(2) { width: 88%; }
.ai-read-skel span:nth-child(3) { width: 62%; }
@keyframes aiSkel {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-read-skel span { animation: none; }
}
@media (max-width: 640px) {
  .ai-read { margin: 20px 0 24px; padding: 15px 16px 14px; }
  .ai-read-summary { font-size: 14px; }
}

/* ---------- 文章页：相关文章推荐 ---------- */
.related-sec { margin-top: 40px; }
.related-title {
  position: relative;
  padding-left: 12px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.related-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 2px;
  background: var(--accent);
}
.related-list { display: flex; flex-direction: column; gap: 10px; }
.rel-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rel-item:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.rel-bar {
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 2px;
  background: var(--rel-c, var(--accent));
  opacity: 0.85;
  transition: opacity 0.2s;
}
.rel-item:hover .rel-bar { opacity: 1; }
.rel-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rel-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s;
}
.rel-item:hover .rel-title { color: var(--accent-deep); }
.rel-meta { font-size: 12px; color: var(--ink-faint); text-decoration: none; }
.rel-arrow {
  flex: none;
  font-size: 15px;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.rel-item:hover .rel-arrow { opacity: 1; transform: none; color: var(--accent-deep); }

@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; gap: 10px; }
  .art-nav-item.next { text-align: left; align-items: flex-start; }
  .art-nav-item.is-empty { display: none; }
  .related-sec { margin-top: 32px; }
  .rel-item { padding: 12px 14px; gap: 11px; }
  .rel-arrow { display: none; }
}

.article-comments {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px dashed var(--line);
}
.comments-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.comments-title em {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-left: 4px;
}
/* 文章页评论区已经是内容块，不再重复画分隔线 */
.article-comments .comment-panel { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- 标签页 / 关于页 ---------- */
.page-wrap { max-width: 1000px; margin: 0 auto; padding: 48px 24px 80px; }

.page-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.page-sub { font-size: 14px; color: var(--ink-faint); margin-bottom: 36px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.tag-cloud .tag-chip { font-size: 15px; padding: 8px 22px; }

.tag-section h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 30px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}

.tag-post-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 6px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
/* ---------- 文章阅读辅助：进度条 + 目录 ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #7ec8c2);
  border-radius: 0 3px 3px 0;
  z-index: 200;
  pointer-events: none;
}

.article-toc {
  position: fixed;
  top: 104px;
  right: 32px;
  width: 224px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 6px 12px 18px;
  display: none;
}
/* 只有足够宽的屏幕才放得下目录（文章正文 + 右侧余量） */
@media (min-width: 1380px) {
  .article-toc { display: block; }
}
.toc-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.toc-item {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-light);
  padding: 6px 10px 6px 0;
  border-left: 2px solid transparent;
  margin-left: -18px;
  padding-left: 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toc-item.toc-h3 { padding-left: 30px; font-size: 12.5px; }
.toc-item:hover { color: var(--accent-deep); background: var(--hover-soft); }
.toc-item.active {
  color: var(--accent-deep);
  font-weight: 600;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* 目录跳转时给标题留出固定导航的高度 */
.article-body h2, .article-body h3 { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  .read-progress { transition: none; }
}

.tag-post-item:hover { background: var(--hover-soft); }.tag-post-item .t { font-size: 15px; color: var(--ink); }
.tag-post-item .d { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

/* ---------- 归档时间线 ---------- */
.archive-timeline {
  position: relative;
  margin-top: 10px;
  padding-left: 36px;
}
/* 左侧主干线 */
.archive-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}

.arch-year-block { position: relative; margin-bottom: 38px; }
/* 年份节点圆点（压在主干线上） */
.arch-year-block::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.arch-year {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.arch-year-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 1px;
}
.arch-year-count {
  font-size: 12.5px;
  color: var(--ink-faint);
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 2px 10px;
  border-radius: 999px;
}

.arch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.arch-item:hover {
  transform: translateX(6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-moment);
}
.arch-date {
  font-size: 13px;
  color: var(--ink-light);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}
.arch-item .mini-tag { flex-shrink: 0; }
.arch-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arch-arrow {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.arch-item:hover .arch-arrow { opacity: 1; transform: none; }

/* ---------- 归档页：侧栏 ---------- */
.page-wrap.arch-wrap { max-width: 1040px; }

.arch-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}

.arch-side {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.side-block {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}
.side-title {
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

/* 概览：三个数字 */
.side-stats { display: flex; }
.side-stats .stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.side-stats .stat + .stat { border-left: 1px solid var(--line-soft); }
.side-stats .stat em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-deep);
}
.side-stats .stat span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

/* 按时间 / 按分类 */
.side-year {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  padding: 4px 10px 6px;
}
.side-month,
.side-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-light);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.side-month em,
.side-cat em { font-style: normal; }
.side-month:hover,
.side-cat:hover {
  background: var(--hover-soft);
  color: var(--accent-deep);
  border-left-color: var(--accent);
}
.side-month.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-left-color: var(--accent);
  font-weight: 600;
}
.side-count {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.side-month.active .side-count { color: var(--accent-deep); }

/* ---------- 归档时间线：月份分组 ---------- */
.arch-year-block,
.arch-month-block { scroll-margin-top: 84px; }

.arch-month-block { position: relative; }
/* 月份小节点压在主干线上 */
.arch-month-block::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
}
.arch-month-block + .arch-month-block { margin-top: 20px; }

.arch-month {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.arch-month-num {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-light);
}
.arch-month-count { font-size: 11.5px; color: var(--ink-faint); }

@media (max-width: 900px) {
  /* minmax(0,1fr)：否则 1fr 轨道会被侧栏横滑行的最小内容宽度撑破，整页横向溢出 */
  .arch-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .arch-side { position: static; gap: 12px; min-width: 0; }
  .side-block { padding: 13px 14px 11px; min-width: 0; }
  .side-title { margin-bottom: 8px; }
  /* 「按时间 / 按分类」压成横滑单行 */
  .side-body {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .side-body::-webkit-scrollbar { display: none; }
  .side-body.side-stats { overflow: visible; padding-bottom: 0; }
  .side-year {
    flex: none;
    padding: 5px 4px;
    font-size: 12.5px;
  }
  .side-month,
  .side-cat {
    flex: none;
    gap: 6px;
    margin-bottom: 0;
    padding: 5px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
  }
  .side-month.active { border-color: var(--accent); }
  .arch-side .side-body:not(.side-stats) { margin: 0 -2px; }
}

@media (max-width: 640px) {
  .archive-timeline { padding-left: 26px; }
  .arch-year-block::before { left: -25px; }
  .arch-month-block::before { left: -21px; }
  .arch-item { padding: 10px 12px; gap: 8px; }
  .arch-date { min-width: 38px; font-size: 12px; }
}

/* 关于页 */
.about-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  margin-bottom: 28px;
}
.about-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7ec8c2, #3f8f7d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px rgba(63, 143, 125, 0.3);
}
.about-name { font-family: var(--serif); font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.about-motto { font-size: 14px; color: var(--ink-faint); margin-bottom: 22px; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.stat-box {
  background: var(--paper);
  border-radius: 10px;
  padding: 16px 8px;
  text-align: center;
  border: 1px solid var(--line);
}
.stat-num { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--accent-deep); }
.stat-label { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* ---------- 我的足迹（个人主页统计卡） ---------- */
.me-stats-card .me-stats-grid { margin-top: 4px; }
/* 第二行：发过的讨论 / 收到的赞（两列，带图标） */
.me-stats-card .me-stats-grid2 { grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.stat-box-ico { position: relative; }
.stat-box-ico .stat-ico { font-size: 15px; }
.stat-box-ico .stat-num { margin-top: 2px; }
.me-stats-tip { font-size: 12px; color: var(--ink-faint); margin-top: 12px; }

/* ---------- 收藏夹大入口（个人主页资料卡内，v=58） ---------- */
.favs-entry {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 12px 16px;
  border: 1px solid rgba(63, 143, 125, 0.35);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(63, 143, 125, 0.12), rgba(63, 143, 125, 0.04));
  text-decoration: none; transition: all 0.18s;
}
.favs-entry:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow, 0 4px 14px rgba(63, 143, 125, 0.15));
  transform: translateY(-1px);
}
.favs-entry-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid rgba(63, 143, 125, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.favs-entry-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.favs-entry-txt b { font-size: 14.5px; color: var(--ink); }
.favs-entry-txt i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.favs-entry-arrow { font-size: 18px; color: var(--accent-deep); }

.about-list { list-style: none; }
.about-list li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink-body);
  display: flex;
  gap: 10px;
}
.about-list .ico { color: var(--accent); }

/* ---------- 个人主页 ---------- */
.profile-page { max-width: 1100px; }

.profile-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 40px;
  margin-bottom: 24px;
  border: 1px solid var(--line-soft);
}

/* 资料卡：大横排（左头像 + 右信息） */
.profile-main { display: flex; gap: 44px; align-items: flex-start; }

.profile-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 160px;
}

.avatar-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  cursor: pointer;
}

.profile-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: linear-gradient(135deg, #7ec8c2, #3f8f7d);
  box-shadow: 0 8px 20px rgba(63, 143, 125, 0.32);
  border: 3px solid var(--ring);
  transition: transform 0.2s, box-shadow 0.2s;
}
/* hover 时保留头像框的环形描边（--fr-ring 由 .frame-* 挂在 .ava-frame 上，子元素继承） */
.avatar-wrap:hover .profile-avatar {
  transform: scale(1.03);
  box-shadow: 0 0 0 3px var(--fr-ring, transparent), 0 10px 26px rgba(63, 143, 125, 0.42);
}

.avatar-hint { font-size: 12px; color: var(--ink-faint); }

/* ============================================
   头像框
   所有出现头像的地方都套了一层 .ava-frame 外壳，装饰画在外壳的伪元素上。
   之所以要多包一层：头像本身常常是 <img>，而 img 不支持 ::before / ::after。
   位置一律用百分比，所以同一个框在 34px 的预览图和 128px 的大头像上都能用。
   --fr-ring：这一圈描边的颜色，由各 .frame-* 定义、被内部头像继承。
   ============================================ */
.ava-frame {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  vertical-align: middle;
  line-height: 0;
}

/* 描边本身（不戴框时是透明，等于没加） */
.ava-frame > :first-child {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2.5px var(--fr-ring, transparent);
}
/* 个人主页的 128px 大头像：描边粗一点，并保留原来的绿色投影 */
.ava-frame-lg > :first-child {
  box-shadow: 0 0 0 3px var(--fr-ring, transparent), 0 8px 20px rgba(63, 143, 125, 0.32);
}

.ava-frame::before,
.ava-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
/* 不戴框：两个装饰层都关掉 */
.ava-frame.frame-none::before,
.ava-frame.frame-none::after { display: none; }

/* 🐱 猫耳朵（参考 QQ 头像框风格）：描边猫耳头套 + 小爪 + 鱼骨 + 星星 */
.frame-cat { --fr-ring: rgba(160, 174, 168, 0.45); }
.frame-cat::before {
  /* 上扩 34%、左右/下扩 28%，让猫脸整体上移，与头像中心对齐 */
  inset: -34% -28% -22% -28%;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5vIHsgZmlsbDpub25lOyBzdHJva2U6IzhiOWE5Mzsgc3Ryb2tlLXdpZHRoOjMuMjsgc3Ryb2tlLWxpbmVjYXA6cm91bmQ7IHN0cm9rZS1saW5lam9pbjpyb3VuZDsgfQogICAgICAuZCB7IGZpbGw6IzhiOWE5MzsgfQogICAgICAucyB7IGZpbGw6bm9uZTsgc3Ryb2tlOiM4YjlhOTM7IHN0cm9rZS13aWR0aDoyLjQ7IHN0cm9rZS1saW5lY2FwOnJvdW5kOyB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8IS0tIGNhdCBoZWFkIGJhc2UgLS0+CiAgPGVsbGlwc2UgY2xhc3M9Im8iIGN4PSI2MCIgY3k9IjY0IiByeD0iNDQiIHJ5PSI0MCIvPgogIDwhLS0gZWFycyAtLT4KICA8cGF0aCBjbGFzcz0ibyIgZD0iTTMwIDM2IEwxNCAxMCBMNDQgMjggWiIvPgogIDxwYXRoIGNsYXNzPSJvIiBkPSJNOTAgMzYgTDEwNiAxMCBMNzYgMjggWiIvPgogIDxwYXRoIGNsYXNzPSJzIiBkPSJNMjYgMzAgTDE4IDE2IE05NCAzMCBMMTAyIDE2Ii8+CiAgPCEtLSB0aW55IGNhdCBmYWNlIG9uIGZvcmVoZWFkIC0tPgogIDxjaXJjbGUgY2xhc3M9ImQiIGN4PSI0OCIgY3k9IjM4IiByPSIyLjYiLz4KICA8Y2lyY2xlIGNsYXNzPSJkIiBjeD0iNzIiIGN5PSIzOCIgcj0iMi42Ii8+CiAgPHBhdGggY2xhc3M9InMiIGQ9Ik01NiA0NCBRNjAgNDcgNjQgNDQiLz4KICA8Y2lyY2xlIGNsYXNzPSJkIiBjeD0iNjAiIGN5PSI0MCIgcj0iMS42Ii8+CiAgPHBhdGggY2xhc3M9InMiIGQ9Ik00NCA0MiBMMzYgNDAgTTQ0IDQ1IEwzNiA0NiBNNzYgNDIgTDg0IDQwIE03NiA0NSBMODQgNDYiLz4KICA8IS0tIHNpZGUgZmlzaGJvbmVzIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDggNjQpIHJvdGF0ZSgtMTUpIj4KICAgIDxwYXRoIGNsYXNzPSJzIiBkPSJNMCAwIEwxNCAwIE03IC01IEw3IDUgTTMgLTcgTDExIDciLz4KICA8L2c+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyIDY0KSByb3RhdGUoMTUpIj4KICAgIDxwYXRoIGNsYXNzPSJzIiBkPSJNMCAwIEwtMTQgMCBNLTcgLTUgTC03IDUgTS0zIC03IEwtMTEgNyIvPgogIDwvZz4KICA8IS0tIHBhd3MgLS0+CiAgPGVsbGlwc2UgY2xhc3M9Im8iIGN4PSIzNiIgY3k9IjEwMCIgcng9IjkiIHJ5PSI2Ii8+CiAgPGVsbGlwc2UgY2xhc3M9Im8iIGN4PSI4NCIgY3k9IjEwMCIgcng9IjkiIHJ5PSI2Ii8+CiAgPHBhdGggY2xhc3M9InMiIGQ9Ik0zMiA5OCBMMzIgMTAyIE0zNiA5NyBMMzYgMTAzIE00MCA5OCBMNDAgMTAyIE04MCA5OCBMODAgMTAyIE04NCA5NyBMODQgMTAzIE04OCA5OCBMODggMTAyIi8+CiAgPCEtLSBjb3JuZXIgc3BhcmtsZXMgLS0+CiAgPHBhdGggY2xhc3M9ImQiIGQ9Ik0xNiAxNCBMMTggMjAgTDI0IDIyIEwxOCAyNCBMMTYgMzAgTDE0IDI0IEw4IDIyIEwxNCAyMCBaIi8+CiAgPHBhdGggY2xhc3M9ImQiIGQ9Ik0xMDQgMTQgTDEwNiAyMCBMMTEyIDIyIEwxMDYgMjQgTDEwNCAzMCBMMTAyIDI0IEw5NiAyMiBMMTAyIDIwIFoiLz4KICA8cGF0aCBjbGFzcz0iZCIgZD0iTTE2IDEwNiBMMTggMTEyIEwyNCAxMTQgTDE4IDExNiBMMTYgMTIyIEwxNCAxMTYgTDggMTE0IEwxNCAxMTIgWiIvPgogIDxwYXRoIGNsYXNzPSJkIiBkPSJNMTA0IDEwNiBMMTA2IDExMiBMMTEyIDExNCBMMTA2IDExNiBMMTA0IDEyMiBMMTAyIDExNiBMOTYgMTE0IEwxMDIgMTEyIFoiLz4KPC9zdmc+') no-repeat center/contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
}
.frame-cat::after { display: none; }

/* ---------- 聊天背景主题 ---------- */
.chat-main.chat-bg-sakura {
  background:
    radial-gradient(ellipse 18px 10px at 20% 30%, rgba(255, 170, 190, 0.35) 0 50%, transparent 55%),
    radial-gradient(ellipse 16px 9px at 70% 70%, rgba(255, 150, 175, 0.3) 0 50%, transparent 55%),
    linear-gradient(180deg, #fff8fa, #fff0f3);
}
.chat-main.chat-bg-leaf {
  background:
    radial-gradient(circle at 20% 25%, rgba(120, 190, 140, 0.18) 0 24%, transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(140, 210, 160, 0.16) 0 22%, transparent 26%),
    linear-gradient(180deg, #f6fbf8, #eef7f2);
}
.chat-main.chat-bg-dot {
  background: radial-gradient(circle, rgba(63, 143, 125, 0.15) 1.5px, transparent 2px) 0 0 / 20px 20px;
}
.chat-main.chat-bg-paper {
  background: repeating-linear-gradient(180deg, #fffdf5, #fffdf5 26px, #f2ede3 26px, #f2ede3 27px);
}

/* ---------- 聊天气泡主题（仅我的消息） ---------- */
.dm-row.me .dm-bubble.bubble-blue { color: #fff; background: #5b9bd5; border-color: #5b9bd5; }
.dm-row.me .dm-bubble.bubble-warm { color: #fff; background: #e89a5c; border-color: #e89a5c; }
.dm-row.me .dm-bubble.bubble-purple { color: #fff; background: #a888d5; border-color: #a888d5; }
.dm-row.me .dm-bubble.bubble-pink { color: #fff; background: #f28ab2; border-color: #f28ab2; }

/* ---------- 字体主题 ---------- */
/* 字体只作用于聊天页（.chat-main）；其他页面不受影响 */
.chat-main { font-family: var(--sans); }
.chat-main.font-round { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.chat-main.font-hand  { font-family: "Comic Sans MS", "Chalkboard SE", "STXingkai", "KaiTi", cursive; }
.chat-main.font-mono  { font-family: "SF Mono", Menlo, Consolas, "Microsoft YaHei Mono", monospace; }

/* 👑 小皇冠：锯齿冠 + 一圈帽檐 */
.frame-crown { --fr-ring: rgba(226, 178, 74, 0.72); }
.frame-crown::before {
  top: -27%;
  left: 18%;
  width: 64%;
  height: 34%;
  background: linear-gradient(180deg, #ffe9a4, #dfa526);
  clip-path: polygon(0% 100%, 0% 26%, 24% 58%, 50% 0%, 76% 58%, 100% 26%, 100% 100%);
}
.frame-crown::after {
  top: -5%;
  left: 18%;
  width: 64%;
  height: 11%;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff0bd, #cf961f);
}

/* 🌸 花环：一圈粉点 + 散落的几朵小花 */
.frame-bloom { --fr-ring: rgba(232, 154, 180, 0.5); }
.frame-bloom::before {
  inset: -13%;
  border-radius: 50%;
  border: 2px dotted rgba(231, 154, 180, 0.95);
}
.frame-bloom::after {
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f9d2e0 0 30%, transparent 33%) 10% 14% / 30% 30% no-repeat,
    radial-gradient(circle, #ffd9a8 0 30%, transparent 33%) 90% 30% / 28% 28% no-repeat,
    radial-gradient(circle, #c9e8d8 0 30%, transparent 33%) 80% 88% / 26% 26% no-repeat,
    radial-gradient(circle, #f9d2e0 0 30%, transparent 33%) 20% 84% / 24% 24% no-repeat;
}

/* 🌈 霓虹：会发光的双色灯环 */
.frame-neon { --fr-ring: transparent; }
.frame-neon::before {
  inset: -9%;
  border-radius: 50%;
  background: conic-gradient(from 140deg, #5fd9c8, #7fa4f5, #c78bf0, #f39ab6, #5fd9c8);
  -webkit-mask: radial-gradient(closest-side, transparent 0 76%, #000 78% 100%);
  mask: radial-gradient(closest-side, transparent 0 76%, #000 78% 100%);
  filter: drop-shadow(0 0 6px rgba(127, 164, 245, 0.75));
}
.frame-neon::after { display: none; }

/* ⭐ 星尘：右上角一颗小星星 + 一颗小光点 */
.frame-star { --fr-ring: rgba(140, 180, 240, 0.5); }
.frame-star::before {
  right: -6%;
  top: -14%;
  width: 34%;
  height: 34%;
  background: linear-gradient(180deg, #fff3bc, #f3c23c);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 3px rgba(214, 162, 40, 0.55));
  z-index: 3;
}
.frame-star::after {
  left: 0%;
  top: -10%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 40%, transparent 46%);
}

.profile-right { flex: 1; min-width: 0; }

.profile-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

/* 定位（IP 地址）小字：名字右下角，字号约为名字的一半 */
.profile-loc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 名字行：名字 + IP 归属地 + 编辑按钮 */
.profile-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-name-row .profile-name { display: inline; }
.profile-ip {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: var(--hover-bg);
  border-radius: 999px;
  padding: 2px 9px;
  transform: translateY(-2px);
}
.profile-name-row .icon-btn {
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--ink-faint);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  transform: translateY(-2px);
}
.profile-name-row .icon-btn:hover { background: var(--accent-soft); color: var(--accent-deep); }

.profile-motto-edit { cursor: pointer; transition: color 0.15s; }
.profile-motto-edit:hover { color: var(--accent-deep); }

.profile-motto {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 6px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

/* 紧凑信息条：年龄 / 状态 / 简介 整合为小徽章行 */
.profile-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-light);
  background: var(--hover-bg);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.mini-chip:hover { border-color: var(--accent-soft); background: var(--card); }

.mini-chip .icon-btn {
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 6px;
  color: var(--ink-faint);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.mini-chip .icon-btn:hover { background: var(--accent-soft); color: var(--accent-deep); }

.mini-chip .status-badge {
  padding: 2px 10px;
  font-size: 11.5px;
}
.mini-chip .status-tip { font-size: 11px; color: var(--ink-faint); }

#ageInput {
  width: 60px;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  outline: none;
}
#ageInput:focus { box-shadow: 0 0 0 3px rgba(63, 143, 125, 0.18); }

.age-save {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s;
}
.age-save:hover { background: var(--accent-deep); }

.status-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 1px;
  user-select: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.status-badge:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.status-tip { font-size: 11.5px; color: var(--ink-faint); }

/* 文章 / 动态 / 标签：与「关注·粉丝·好友」同款的无框小字链接，只是靠左排
   （用双类提高特异性，避免被后面的 .uid-links 覆盖） */
.uid-links.stat-links {
  justify-content: flex-start;
  max-width: none;
  margin-top: 16px;
  gap: 4px 18px;
}

/* 头像框选择器 */
.frame-picker {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.frame-picker-title {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-light);
}
.frame-picker-title::after {
  content: "点一下就能换，全站同步生效";
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.frame-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.frame-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 64px;
  padding: 13px 6px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}
.frame-chip:hover {
  background: var(--hover-bg);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}
.frame-chip.is-active { border-color: var(--accent); background: var(--accent-soft); }
.frame-chip-name { font-size: 11px; line-height: 1; color: var(--ink-light); }
.frame-chip.is-active .frame-chip-name { color: var(--accent-deep); font-weight: 600; }

/* 选择器里的小头像预览 */
.frame-demo-ava {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
}

/* ---------- 个性装扮入口（紧凑按钮）+ 模态框 ---------- */
.outfit-entry-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.outfit-entry-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-align: left;
}
.outfit-entry-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.outfit-entry-icon { font-size: 22px; line-height: 1; }
.outfit-entry-label { font-weight: 600; }
.outfit-entry-tip {
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  color: var(--ink-faint);
}
.outfit-entry-arrow { font-size: 22px; color: var(--ink-faint); line-height: 1; }

@media (max-width: 720px) {
  .outfit-entry-tip { display: none; }
  .outfit-entry-btn { padding: 12px 16px; }
}

/* 装扮模态框（在 .edit-box 基础上扩展） */
.outfit-modal-box {
  position: relative;
  width: 640px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 26px 26px 22px;
}
.outfit-modal-title { margin-right: 30px; }
.outfit-modal-sub {
  margin: 4px 0 18px;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.outfit-modal .outfit-body { gap: 20px; }

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: var(--hover-bg); color: var(--ink); }

@media (max-width: 720px) {
  .outfit-modal-box { padding: 22px 18px 18px; }
  .outfit-modal .outfit-body { align-items: stretch; }
}

/* 个性装扮 - 模态框内的分区与 chip 样式 */
.outfit-body { display: flex; flex-direction: column; gap: 22px; }
.outfit-body > .frame-picker { margin-top: 0; padding-top: 0; border-top: none; }
.outfit-section-title {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-light);
}
.outfit-section-title span {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.outfit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.outfit-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 66px;
  padding: 11px 6px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}
.outfit-chip:hover {
  background: var(--hover-bg);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}
.outfit-chip.is-active { border-color: var(--accent); background: var(--accent-soft); }
.outfit-chip-name { font-size: 11px; line-height: 1; color: var(--ink-light); }
.outfit-chip.is-active .outfit-chip-name { color: var(--accent-deep); font-weight: 600; }
.outfit-preview {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1;
}

.chat-bg-preview { border-radius: 8px; }
.chat-bg-preview.chat-bg-default { background: var(--card); }
.chat-bg-preview.chat-bg-sakura {
  background:
    radial-gradient(ellipse 18px 10px at 20% 30%, rgba(255, 170, 190, 0.35) 0 50%, transparent 55%),
    radial-gradient(ellipse 16px 9px at 70% 70%, rgba(255, 150, 175, 0.3) 0 50%, transparent 55%),
    linear-gradient(180deg, #fff8fa, #fff0f3);
}
.chat-bg-preview.chat-bg-leaf {
  background:
    radial-gradient(circle at 20% 25%, rgba(120, 190, 140, 0.18) 0 24%, transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(140, 210, 160, 0.16) 0 22%, transparent 26%),
    linear-gradient(180deg, #f6fbf8, #eef7f2);
}
.chat-bg-preview.chat-bg-dot { background: radial-gradient(circle, rgba(63, 143, 125, 0.15) 1.5px, transparent 2px) 0 0 / 20px 20px; }
.chat-bg-preview.chat-bg-paper { background: repeating-linear-gradient(180deg, #fffdf5, #fffdf5 26px, #f2ede3 26px, #f2ede3 27px); }

.bubble-preview {
  border-radius: 10px 10px 2px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.bubble-preview.bubble-default { background: var(--accent); }
.bubble-preview.bubble-blue { background: #5b9bd5; }
.bubble-preview.bubble-warm { background: #e89a5c; }
.bubble-preview.bubble-purple { background: #a888d5; }
.bubble-preview.bubble-pink { background: #f28ab2; }
.font-preview { color: var(--ink); font-weight: 600; }
.font-preview.font-default { font-family: var(--sans); }
.font-preview.font-round  { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.font-preview.font-hand   { font-family: "Comic Sans MS", "Chalkboard SE", "STXingkai", "KaiTi", cursive; }
.font-preview.font-mono   { font-family: "SF Mono", Menlo, Consolas, "Microsoft YaHei Mono", monospace; }

/* 响应式：窄屏回到上下排版 */
@media (max-width: 720px) {
  .profile-page { max-width: 100%; }
  .profile-card { padding: 28px 22px; }
  .profile-main { flex-direction: column; align-items: center; gap: 24px; }
  .profile-left { width: auto; }
  .profile-info { grid-template-columns: 1fr; gap: 10px; }
  .uid-links.stat-links { justify-content: center; }
  .frame-picker { width: 100%; }
  .frame-picker-title { text-align: center; }
  .frame-picker-title::after { display: block; margin: 4px 0 0; }
  .frame-chips { justify-content: center; gap: 6px; }
  .frame-chip { width: 60px; }
  .outfit-body { align-items: center; }
  .outfit-chips { justify-content: center; }
  .outfit-section-title { text-align: center; }
}

.block-title {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}

.moments-list { list-style: none; padding-left: 0; }

/* 历史动态空状态：新用户 / 还没发过动态 */
.moments-empty {
  text-align: center;
  padding: 34px 16px 30px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  background: var(--hover-bg);
}
.moments-empty-ico { font-size: 34px; display: block; margin-bottom: 10px; }
.moments-empty-txt { margin: 0 0 6px; font-family: var(--serif); font-size: 15px; color: var(--ink-light); }
.moments-empty-sub { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-faint); }

/* 线上站点没连上服务器时的顶部提示条（只读提示，不挡内容） */
.conn-banner {
  max-width: 912px;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--hover-bg);
  color: var(--ink-light);
  font-size: 13px;
  line-height: 1.7;
}
@media (max-width: 960px) {
  .conn-banner { max-width: none; margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 860px) {
  .conn-banner { margin: 10px 12px 0; font-size: 12.5px; padding: 9px 12px; }
}

.moment-item {
  position: relative;
  padding: 16px 20px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.18s, transform 0.18s;
}
.moment-item:last-child { margin-bottom: 0; }
.moment-item:hover { box-shadow: var(--shadow-moment); }

/* 头部：头像 + 昵称 + 时间 + 动作 */
.moment-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.moment-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--accent-soft);
}
.moment-avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.moment-user {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.moment-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.moment-time {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.2;
}

.moment-body { margin-bottom: 10px; }
.moment-text { font-size: 14.8px; color: var(--ink-body); line-height: 1.7; font-weight: 500; }
.moment-text .mini-tag { cursor: pointer; margin-left: 4px; }

/* 分区选择（发布 / 编辑动态共用） */
.cat-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.cat-picker-title { font-size: 12px; color: var(--ink-faint); margin-right: 2px; }
.pick-chip {
  padding: 3px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-faint);
  background: var(--card);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pick-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.pick-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* 底部：分区标签 + 互动数据 */
.moment-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
.moment-foot-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.moment-cat-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.moment-cat-tag:hover { background: var(--accent); color: var(--on-accent); }

.moment-stats { display: flex; gap: 6px; color: var(--ink-faint); }
.moment-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-family: var(--sans);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.moment-stat:hover { background: var(--accent-soft); color: var(--accent-deep); }
.moment-stat em { font-style: normal; font-weight: 600; color: var(--ink); }
.moment-stat:hover em { color: var(--accent-deep); }
/* 已点赞 / 已评论：高亮态 */
.moment-stat.liked,
.moment-stat.has {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.moment-stat.liked em,
.moment-stat.has em { color: var(--accent-deep); }

/* ---------- 评论区（动态 + 文章共用） ---------- */
.comment-panel {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.comment-list { display: flex; flex-direction: column; gap: 14px; max-height: 340px; overflow-y: auto; }
.comment-empty { font-size: 13px; color: var(--ink-faint); padding-bottom: 2px; }
.comment-item { display: flex; gap: 10px; align-items: flex-start; }
.comment-ava {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.comment-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 首页 / 标签页：动态同步区 ---------- */
.home-moments { max-width: 960px; margin: 40px auto 0; padding: 0 24px 10px; }
.home-moments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.home-moments-head h3 {
  font-size: 18px;
  color: var(--ink);
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  line-height: 1.2;
}
.home-moments-more { font-size: 13px; color: var(--accent-deep); text-decoration: none; }
.home-moments-more:hover { text-decoration: underline; }

.mini-moment-list { display: flex; flex-direction: column; gap: 10px; }
.mini-moment {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.mini-moment:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-moment);
}
.mini-moment-ava {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mini-moment-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-moment-body { flex: 1; min-width: 0; display: block; text-decoration: none; }
.mini-moment-body * { text-decoration: none; }
.mini-moment-head { display: flex; align-items: center; gap: 8px; }
.mini-moment-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mini-moment-time { font-size: 11.5px; color: var(--ink-faint); }
.mini-moment-edited {
  font-size: 10.5px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 5px;
}
.mini-moment-text {
  display: block;
  font-size: 14px;
  color: var(--ink-body);
  line-height: 1.6;
  margin-top: 4px;
  word-break: break-word;
}
.mini-moment-imgs { display: flex; gap: 6px; margin-top: 8px; }
.mini-moment-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.mini-moment-cat { display: block; margin-top: 8px; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.comment-name:hover { color: var(--accent-deep); }
a.comment-ava { text-decoration: none; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
a.comment-ava:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--accent-soft); }
.comment-time { font-size: 11.5px; color: var(--ink-faint); }
.comment-del {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.comment-item:hover .comment-del { opacity: 1; }
.comment-del:hover { color: #c0392b; }
.comment-text {
  font-size: 13.5px;
  color: var(--ink-body);
  line-height: 1.65;
  margin-top: 2px;
  word-break: break-word;
  white-space: pre-wrap;
}
.comment-form { display: flex; gap: 8px; margin-top: 14px; }
.comment-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color 0.15s;
}
.comment-input:focus { border-color: var(--accent); }
.comment-send {
  flex: 0 0 auto;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s;
}
.comment-send:hover { background: var(--accent-deep); }

/* 发布动态卡片 */
.publish-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.7;
  resize: vertical;
  min-height: 90px;
  background: var(--paper);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.publish-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 143, 125, 0.14);
}
.publish-card textarea::placeholder { color: var(--ink-faint); }

/* 数据备份卡片 */
.backup-card { margin-top: 22px; }
.backup-tip {
  font-size: 13.5px;
  color: var(--ink-light);
  line-height: 1.7;
  margin-bottom: 14px;
}
.backup-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.backup-actions .img-add { flex-shrink: 0; }

/* ============================================
   账号 / 登录（云服务 Auth）
   ============================================ */
.account-card { margin-bottom: 22px; }
.account-card .block-title { display: flex; align-items: center; gap: 10px; }

.acct-badge {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--ink-light);
}
.acct-badge.signed { background: var(--accent-soft); color: var(--accent-deep); }
.acct-badge.ready { background: var(--accent-soft); color: var(--accent-deep); }

.acct-user { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct-ava {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.acct-main { min-width: 0; }
.acct-email { font-size: 15px; color: var(--ink); }
.acct-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.acct-note { font-size: 13.5px; color: var(--ink-light); line-height: 1.7; margin-bottom: 14px; }
.acct-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; margin-top: 14px; }
.backup-actions .acct-primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* 导航里的登录入口：已登录时给一点主色提示 */
.nav-icon.signed { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- 登录 / 注册页 ---------- */
.auth-page { display: flex; flex-direction: column; align-items: center; }
.auth-card {
  width: 100%;
  max-width: 424px;
  margin-top: 6px;
  padding: 34px 30px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-brand { font-size: 30px; line-height: 1; text-align: center; }
.auth-title {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: 2px;
  color: var(--ink);
  text-align: center;
  margin-top: 12px;
}
.auth-sub { font-size: 13px; color: var(--ink-light); text-align: center; margin-top: 6px; }

.auth-tabs {
  display: flex;
  gap: 4px;
  margin: 22px 0 2px;
  padding: 4px;
  background: var(--hover-bg);
  border-radius: 999px;
}
.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink-light);
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.auth-tab.active { background: var(--card); color: var(--accent-deep); font-weight: 500; }

.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auth-label { font-size: 12.5px; color: var(--ink-light); }
.auth-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-input::placeholder { color: var(--ink-faint); }
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.auth-code-btn {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--accent-deep);
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.auth-code-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
.auth-code-btn:disabled { color: var(--ink-faint); cursor: default; }

.auth-submit { width: 100%; margin-top: 4px; }
.auth-submit:disabled { opacity: 0.7; cursor: default; transform: none; }

.auth-msg { margin-top: 14px; padding: 10px 13px; border-radius: 10px; font-size: 13px; line-height: 1.65; }
.auth-msg.err { background: var(--warn-soft); color: var(--code-ink); border: 1px solid rgba(179, 87, 63, 0.22); }
.auth-msg.ok { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid rgba(63, 143, 125, 0.22); }

/* 用户名实时查重的提示行：紧跟在用户名输入框下面 */
.auth-hint { margin: -6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.auth-hint.ok { color: var(--accent-deep); }
.auth-hint.err { color: var(--code-ink); }

.auth-foot { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.auth-link {
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  padding: 3px 1px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-light);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.auth-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

.auth-note {
  max-width: 424px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 640px) {
  .auth-card { padding: 28px 20px 22px; }
  .auth-title { font-size: 21px; }
  .auth-code-btn { padding: 0 11px; font-size: 12.5px; }
  .auth-foot { gap: 14px; }
}

.publish-tools { margin-top: 12px; }

.publish-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.preview-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.preview-del:hover { background: rgba(0, 0, 0, 0.8); }

.publish-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.img-add {
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s;
}
.img-add:hover { background: var(--accent-soft); }

.char-count {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-left: auto;
}
.char-count.warn { color: #d96a5a; font-weight: 700; }

.publish-btn {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 26px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.18s, transform 0.15s;
}
.publish-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* 动态图片：第一张大图 + 其余小图预览（最多 9 张） */
.moment-item.mine { padding-left: 0; border-left: none; }

.moment-imgs {
  margin: 10px 0 8px;
  max-width: 420px;
}

.moment-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.moment-main img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.moment-main:hover img { opacity: 0.96; }

.moment-img-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.moment-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.moment-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.2s;
}
.moment-thumbs img:hover { transform: scale(1.03); }

/* ---------- 图片灯箱（全图查看） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 18, 0.88);
  backdrop-filter: blur(3px);
  animation: lb-fade 0.18s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-img {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1000px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: lb-zoom 0.2s ease;
}
@keyframes lb-zoom { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 16px;
  border-radius: 999px;
  letter-spacing: 1px;
}

.moment-actions {
  display: inline-flex;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 8px;
  background: var(--hover-bg);  /* 始终有底色，让编辑/删除按钮一眼可见 */
  opacity: 1;                    /* 完全常显：重做版编辑/删除功能 */
  transition: background 0.15s;
  flex-shrink: 0;
}
.moment-item:hover .moment-actions,
.moment-item:focus-within .moment-actions,
.moment-actions:focus-within,
.moment-actions:hover { background: var(--accent-soft); }

.moment-edit, .moment-del {
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  transition: background 0.15s, transform 0.15s;
}
.moment-edit:hover { background: var(--accent-soft); transform: scale(1.1); }
.moment-del:hover { background: rgba(217, 106, 90, 0.12); transform: scale(1.1); }

.moment-edited {
  font-size: 11px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: 999px;
  margin: 0 3px;
  vertical-align: middle;
  align-self: center;
  white-space: nowrap;
}
/* 头部动作区内的已编辑徽章（位于删除按钮左侧） */
.moment-actions .moment-edited { line-height: 1.6; }

/* ---------- 编辑动态模态框 ---------- */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.edit-modal[hidden] { display: none; }

.edit-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 22, 0.55);
  cursor: pointer;
}

.edit-box {
  position: relative;
  background: var(--card);
  width: 100%;
  max-width: 560px;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  max-height: 86vh;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
}

/* ---------- 编辑资料模态框（昵称 / IP / 简介） ---------- */
.profile-edit-box { max-width: 420px; }
.pedit-field { margin-bottom: 14px; }
.pedit-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-light);
  margin-bottom: 6px;
}
.pedit-tip { font-size: 11.5px; font-weight: 400; color: var(--ink-faint); }
.pedit-field input[type="text"],
.pedit-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14.5px;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
  resize: none;
}
.pedit-field input[type="text"]:focus,
.pedit-field textarea:focus { border-color: var(--accent); }

/* IP 归属地：只读展示行（自动识别，不可手动修改） */
.pedit-ip-readonly {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink-light);
  background: var(--bg);
  user-select: none;
  cursor: default;
}
.pedit-ip-note { font-size: 11.5px; color: var(--ink-faint); }

.edit-box textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--card);
  outline: none;
  resize: vertical;
  min-height: 72px;
  line-height: 1.6;
}
.edit-box textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 143, 125, 0.15); }

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.edit-cancel {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  padding: 8px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.edit-cancel:hover { background: var(--hover-bg); }

/* 删除确认弹窗 */
.confirm-box { max-width: 380px; text-align: center; }
.confirm-box .block-title { text-align: left; }
.confirm-text {
  font-size: 14.5px;
  color: var(--ink-light);
  line-height: 1.9;
  margin: 8px 0 4px;
  padding: 10px 8px;
  background: var(--warn-soft);
  border: 1px solid rgba(217, 106, 90, 0.25);
  border-radius: 10px;
}
.confirm-box .edit-actions { justify-content: center; }
.danger-btn { background: #d96a5a; }
.danger-btn:hover { background: #c25444; transform: translateY(-1px); }

/* 全局轻提示 toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: var(--toast-ink);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 22px;
  border-radius: 999px;
  z-index: 1200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  max-width: 80vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toast-in 0.22s ease;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 已在 profile 区统一处理响应式 */

/* ---------- 搜索页 ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px 5px 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(63, 143, 125, 0.15);
}
.search-bar-icon { flex: 0 0 auto; font-size: 16px; color: var(--ink-faint); }

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  padding: 9px 0;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.search-clear:hover { background: var(--hover-bg); color: var(--ink); }
/* 输入框为空时不显示清空按钮 */
.search-input:placeholder-shown ~ .search-clear { display: none; }

.search-summary { font-size: 13.5px; color: var(--ink-faint); margin: 18px 2px 12px; }
.search-summary em { color: var(--accent-deep); font-style: normal; font-weight: 700; }

.search-list { display: flex; flex-direction: column; gap: 12px; }

.search-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.search-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--accent-soft);
}

.search-item-cover {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}
.search-item-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), transparent 60%);
}

.search-item-body { flex: 1 1 auto; min-width: 0; }
.search-item-title {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 5px;
}
.search-item-excerpt {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-light);
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}
.search-hit {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11.5px;
}

/* 命中关键词高亮 */
.hl {
  background: var(--mark-bg);
  color: var(--mark-ink);
  border-radius: 3px;
  padding: 0 2px;
  font-style: normal;
}

.search-empty { text-align: center; padding: 44px 20px; color: var(--ink-faint); }
.search-empty .big { display: block; font-size: 40px; margin-bottom: 12px; }
.search-empty p { font-size: 14px; line-height: 1.9; }

.search-hints { margin-top: 30px; }
.search-hints .label { font-size: 13px; color: var(--ink-faint); margin-right: 6px; }

/* ---------- 社交：个人 ID / 好友 / 私信 ---------- */

/* 个人 ID 胶囊：放在个人主页头像图片下方 */
.uid-box {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
  padding: 5px 6px 5px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.uid-label { font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--ink-light); }
.uid-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.uid-copy {
  margin-left: auto;
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-light);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.uid-copy:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 关注 / 粉丝 / 好友：ID 下方的一行文字链接（无背景框，纯文字 + 计数） */
.uid-links {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  width: 100%;
  max-width: 200px;
}
.uid-link {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-light);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.uid-link em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  margin-left: 3px;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.uid-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* 社交列表页（关注 / 粉丝 / 好友） */
.social-page { max-width: 880px; }
.social-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-light);
}
.social-back:hover { color: var(--accent-deep); }

.social-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.social-tab {
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-light);
  background: var(--hover-bg);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.social-tab em {
  font-style: normal;
  font-weight: 600;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.social-tab:hover { color: var(--accent-deep); border-color: var(--accent-soft); }
.social-tab.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.social-tab.is-active em { color: var(--on-accent); opacity: 0.85; }

.group-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-light);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.group-title .count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.user-empty { font-size: 13px; line-height: 1.8; color: var(--ink-faint); padding: 4px 2px; }

/* 用户行（好友卡与搜索结果共用） */
.user-list { display: flex; flex-direction: column; gap: 10px; }
.user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--hover-bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
}
.user-row:hover { background: var(--hover-soft); border-color: var(--accent-soft); transform: translateY(-1px); }
.user-row.is-friend { border-color: var(--accent-soft); }

.user-ava {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.user-ava img { width: 100%; height: 100%; object-fit: cover; }
.user-main { flex: 1; min-width: 0; }
.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.user-uid {
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-faint);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.user-rel { padding: 1px 7px; font-size: 11px; font-weight: 500; border-radius: 999px; }
.user-rel.friend { color: var(--on-accent); background: var(--accent); }
.user-rel.following { color: var(--accent-deep); background: var(--accent-soft); }
.user-rel.follower { color: var(--ink-light); background: var(--card); border: 1px solid var(--line); }
.user-bio {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* 关注 / 私信按钮 */
.follow-btn,
.dm-btn {
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.follow-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.follow-btn.on { color: var(--ink-light); background: transparent; border-color: var(--line); }
.follow-btn.on:hover { color: #d96a5a; border-color: #d96a5a; background: transparent; }

.dm-btn { color: var(--accent-deep); background: transparent; border-color: var(--accent-soft); }
.dm-btn:hover { background: var(--accent-soft); }
.dm-btn.locked { color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; opacity: 0.75; }
.dm-btn.locked:hover { background: transparent; }

.friend-tip {
  margin-top: 22px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-light);
  background: var(--hover-bg);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.friend-link { color: var(--accent-deep); border-bottom: 1px dashed var(--accent); }

/* 搜索页：用户分组 */
.search-group { margin-bottom: 26px; }
.article-group-title { margin-top: 4px; }

/* ---------- 私信页（参考 B 站私信：左会话列表 + 右聊天窗） ---------- */
.chat-page { max-width: 980px; padding-top: 36px; }

/* 两栏外壳 */
.chat-shell {
  display: flex;
  min-height: 580px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 左：会话列表 */
.chat-side {
  flex: 0 0 auto;
  width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--hover-bg);
  border-right: 1px solid var(--line);
}
.side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.side-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}
.side-meta { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.side-list {
  flex: 1;
  min-height: 200px;
  max-height: 540px;
  overflow-y: auto;
  padding: 8px;
}
.side-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.side-item:hover { background: var(--hover-soft); }
.side-item.is-active { background: var(--accent-soft); }

/* B 站头像是圆角方形，不是圆形 */
.side-ava {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  line-height: 1;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.side-ava img { width: 100%; height: 100%; object-fit: cover; }

.side-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.side-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.side-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-time { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); }
.side-msg {
  font-size: 12px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--dot-ink);
  background: var(--dot);
  border-radius: 999px;
}
.side-empty { padding: 32px 14px; text-align: center; font-size: 12.5px; line-height: 1.9; color: var(--ink-faint); }

/* 右：聊天主体 */
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); }

.chat-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.chat-peer-ava {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.chat-peer-ava img { width: 100%; height: 100%; object-fit: cover; }
.chat-peer-info { flex: 1; min-width: 0; }
.chat-peer-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.chat-peer-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head-actions { flex: 0 0 auto; }

/* 消息流 */
.dm-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  max-height: 520px;
  overflow-y: auto;
  padding: 20px;
}
.dm-empty { margin: auto; font-size: 13px; line-height: 1.9; color: var(--ink-faint); text-align: center; }

/* 时间分隔：与上一条间隔超过 5 分钟才出现 */
.dm-divider { text-align: center; }
.dm-divider span {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--ink-faint);
  background: var(--hover-bg);
  border-radius: 999px;
}

.dm-row { display: flex; align-items: flex-start; gap: 10px; }
.dm-row.me { flex-direction: row-reverse; }
.dm-ava {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  border-radius: 9px;
  background: var(--accent-soft);
  overflow: hidden;
}
.dm-ava img { width: 100%; height: 100%; object-fit: cover; }
.dm-bubble {
  flex: 0 1 auto;
  max-width: 74%;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.65;
  border-radius: 10px;
  word-break: break-word;
  white-space: pre-wrap;
}
.dm-row.them .dm-bubble {
  color: var(--ink-body);
  background: var(--hover-bg);
  border: 1px solid var(--line-soft);
}
.dm-row.me .dm-bubble {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}

/* 底部输入区：输入行在上，工具栏在下（B 站的排布） */
.dm-compose {
  position: relative;
  padding: 12px 16px 14px;
  background: var(--hover-bg);
  border-top: 1px solid var(--line);
}
.dm-form { display: flex; gap: 10px; }
.dm-input {
  flex: 1;
  min-width: 0;
  padding: 10px 15px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.dm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dm-input:disabled { background: var(--hover-bg); color: var(--ink-faint); cursor: not-allowed; }
.dm-send {
  flex: 0 0 auto;
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
}
.dm-send:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
.dm-send:disabled { opacity: 0.5; cursor: not-allowed; }

.dm-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dm-tool {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-light);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.dm-tool:hover { background: var(--accent-soft); }
.dm-tool.is-off { opacity: 0.45; cursor: not-allowed; }
.dm-tool.is-off:hover { background: transparent; }
.dm-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.dm-count.is-warn { color: var(--code-ink); }

/* 表情面板 */
.emoji-panel {
  position: absolute;
  left: 16px;
  bottom: calc(100% - 4px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 302px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.emoji-panel[hidden] { display: none; }
.emoji-item {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.emoji-item:hover { background: var(--accent-soft); }

/* 非好友：锁定条 + 禁用输入 */
.dm-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 10px;
  background: var(--warn-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.dm-lock .lock-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.dm-lock .lock-txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-light); }
.lock-actions { flex: 0 0 auto; display: flex; gap: 8px; }

/* 右侧空状态（未选会话 / 自己的 ID / 找不到用户） */
.chat-blank {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 52px 24px;
  text-align: center;
}
.chat-blank .blank-ico { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.chat-blank p { font-size: 13.5px; line-height: 2; color: var(--ink-light); }
.chat-blank p b { color: var(--accent-deep); }
.chat-blank > .btn-ghost { margin-top: 16px; }
.blank-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

.btn-ghost {
  display: inline-block;
  padding: 9px 22px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--accent-deep);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover { background: var(--accent); color: var(--on-accent); }
.btn-ghost.plain { color: var(--ink-light); border-color: var(--line); }
.btn-ghost.plain:hover { background: var(--hover-bg); color: var(--ink); border-color: var(--line); }

/* 搜索页空状态里的推荐用户 chip */
.user-suggest { cursor: pointer; }
.user-suggest:hover { border-color: var(--accent); }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 30px 24px 36px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 1px;
}
.footer .heart { color: #d9815f; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  /* 窄屏：文字链接收进抽屉，导航保持单行；图标加大方便点按 */
  .nav-inner { height: 56px; padding: 0 14px; gap: 8px; }
  .nav-links { display: none; }
  .brand { font-size: 18px; letter-spacing: 1px; }
  .nav-actions { margin-left: auto; gap: 2px; }
  .nav-icon { width: 38px; height: 38px; font-size: 17px; }
  .nav-menu-btn { display: inline-flex; }

  /* 输入框字号提到 16px：低于 16px 时 iOS 聚焦会自动放大整个页面 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 触摸端点击区放大到 36px 以上（桌面视觉不变） */
  .icon-btn { min-width: 30px; min-height: 30px; }
  .moment-edit, .moment-del {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .moment-actions { gap: 4px; }
  .moment-stat { min-height: 36px; padding: 4px 10px; }
  .uid-copy { min-height: 30px; padding: 6px 14px; }
  .pick-chip { min-height: 32px; display: inline-flex; align-items: center; }
  .img-add { min-height: 36px; }
  .publish-btn { min-height: 38px; }
  .tag-chip, .cat-chip { min-height: 30px; display: inline-flex; align-items: center; }
  .comment-send { min-height: 36px; }
  .social-tab { min-height: 32px; }
}

/* 私信页窄屏：左栏折叠成顶部横向滑动的头像一个会话条，聊天窗占满 */
@media (max-width: 820px) {
  .chat-shell { flex-direction: column; min-height: 0; }
  .chat-side { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .side-head { padding: 12px 14px 10px; }
  .side-title { font-size: 15px; }
  .side-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    min-height: 0;
    max-height: none;
  }
  .side-item {
    flex: 0 0 auto;
    width: 68px;
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
  }
  .side-main { align-items: center; gap: 4px; }
  .side-top { justify-content: center; }
  .side-name { max-width: 58px; font-size: 12px; }
  .side-time, .side-msg { display: none; }
  .side-badge { position: absolute; top: 4px; right: 6px; }
  .dm-list { min-height: 220px; max-height: 46vh; padding: 16px; }
  .chat-topbar { gap: 10px; padding: 12px 14px; }
  .dm-compose { padding: 10px 12px 12px; }
  .emoji-panel { left: 12px; width: 274px; }
  .chat-blank { padding: 42px 18px; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 30px; letter-spacing: 3px; }
  .article-title { font-size: 25px; }
  .nav-inner { padding: 0 14px; }
  .post-list, .hero, .cat-bar, .tag-bar, .article-page, .page-wrap { padding-left: 16px; padding-right: 16px; }
  .about-card { padding: 28px 22px; }
  .page-wrap { padding-top: 32px; }

  /* 首页筛选区：横滑单行，不再挤成占满一屏的色块 */
  .cat-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
  }
  .cat-bar::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; padding: 7px 20px; font-size: 13.5px; letter-spacing: 1px; }
  .tag-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 4px;
  }
  .tag-bar::-webkit-scrollbar { display: none; }
  .tag-bar .label { display: none; }
  .tag-chip { flex: 0 0 auto; padding: 5px 14px; font-size: 12.5px; }
  .hero { margin-bottom: 10px; }
  .home-moments-head { margin-top: 22px; }
}

@media (max-width: 560px) {
  .search-item { gap: 12px; padding: 14px; }
  .search-item-cover { width: 44px; height: 44px; font-size: 20px; }
  .search-item-title { font-size: 16px; }
  .search-bar { padding: 4px 6px 4px 14px; }
  .search-input { font-size: 15px; }

  /* 社交：用户行与私信页在窄屏下的收敛 */
  .user-row { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .user-actions { width: 100%; justify-content: flex-end; }
  .user-bio { white-space: normal; }
  .uid-box { max-width: 100%; }
  .uid-links { max-width: 100%; }
  .social-tab { padding: 6px 12px; font-size: 13px; }

  .chat-peer-name { font-size: 14.5px; }
  .chat-topbar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .chat-head-actions { display: none; }
  .dm-bubble { max-width: 82%; }
  .dm-send { padding: 10px 16px; }
  .dm-lock { flex-wrap: wrap; }
  .lock-actions { width: 100%; justify-content: flex-end; }
  .chat-blank { padding: 34px 16px; }
}

/* ---------- 主题切换过渡 ----------
   只过渡与配色相关的属性，避免影响已有的 transform / 动画。
   放在文件末尾，同优先级下覆盖前面的 transition 声明，保持时长统一。 */
body, .nav, .nav-link, .nav-icon, .post-card, .tag-chip, .cat-chip, .pick-chip,
.mini-tag, .mini-chip, .block, .moment-item, .search-item, .search-bar,
.comment-panel, .comment-input, .edit-box, .toast, .page-wrap, .hero,
.article-body, .about-card, .footer, input, textarea, button,
.uid-box, .uid-copy, .uid-link, .friend-tip, .user-row, .user-ava, .user-uid,
.social-tab, .social-back,
.user-rel, .chat-shell, .chat-topbar, .chat-peer-ava, .side-item, .side-ava,
.side-badge, .dm-ava, .dm-bubble, .dm-divider span, .dm-compose, .dm-input,
.dm-send, .dm-tool, .emoji-panel, .emoji-item, .dm-lock, .group-title,
.frame-demo-ava,
.outfit-chip, .outfit-preview {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.22s;
  transition-timing-function: ease;
}

/* ---------- 性能优化：长列表渲染 ----------
   content-visibility 让视口外的动态/文章卡片跳过布局与绘制，
   低端设备滚动长列表时明显更流畅；contain-intrinsic-size 提供占位高度
   避免滚动条跳动。 */
.moment-item,
.post-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

/* ---------- 全站动效：丝滑过渡 ---------- */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes like-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.28); }
}

/* 页面进入：只在真实导航时播放（route() 给 #app 加 .anim），
   点赞 / 评论等原地重渲染会移除 .anim，动画不重播 */
#app.anim .page-wrap { animation: page-in 0.28s ease backwards; }
#app.anim .moment-item,
#app.anim .post-card { animation: item-in 0.32s ease backwards; }
#app.anim .moment-item:nth-child(2), #app.anim .post-card:nth-child(2) { animation-delay: 0.04s; }
#app.anim .moment-item:nth-child(3), #app.anim .post-card:nth-child(3) { animation-delay: 0.08s; }
#app.anim .moment-item:nth-child(4), #app.anim .post-card:nth-child(4) { animation-delay: 0.12s; }
#app.anim .moment-item:nth-child(5), #app.anim .post-card:nth-child(5) { animation-delay: 0.16s; }
#app.anim .moment-item:nth-child(n+6), #app.anim .post-card:nth-child(n+6) { animation-delay: 0.2s; }

/* 弹窗：遮罩淡入 + 内容弹出（模态框从 display:none 变可见时自动播放） */
.edit-modal .edit-mask { animation: lb-fade 0.18s ease backwards; }
.edit-modal .edit-box  { animation: pop-in 0.22s ease backwards; }

/* 评论区：点 💬 展开时滑入（JS 加 .panel-open，只在真实点击时播放） */
.comment-panel.panel-open { animation: panel-in 0.22s ease; }

/* 点赞：点击后 👍 弹跳一下（JS 加 .pop） */
.stat-like.pop { animation: like-pop 0.32s ease; }

/* 导航栏未读红点：轻轻呼吸提示 */
.nav-badge { animation: badge-pulse 1.8s ease-in-out infinite; }

/* 按钮按下的即时反馈 */
.publish-btn:active, .comment-send:active, .dm-send:active, .nav-icon:active,
.moment-edit:active, .moment-del:active, .edit-cancel:active, .img-add:active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

/* 卡片悬停轻微上浮（配合已有的 transform 过渡） */
.post-card:hover { transform: translateY(-2px); }

/* ---------- 生动动画（第二期：细节点缀） ---------- */
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.28); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.18); }
  56%      { transform: scale(1); }
}
@keyframes divider-grow {
  from { width: 0; opacity: 0; }
  to   { width: 48px; opacity: 1; }
}
@keyframes wiggle {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-8deg); }
  50%  { transform: rotate(7deg); }
  75%  { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

/* 品牌句点「.」轻轻呼吸 */
.brand .dot { display: inline-block; animation: dot-blink 2.4s ease-in-out infinite; }

/* 首页分隔线：进入首页时从中间长出来（只在真实导航时播放） */
#app.anim .hero .divider { animation: divider-grow 0.55s 0.12s ease backwards; }

/* 文章封面图标：轻轻漂浮；悬停卡片时放大迎宾 */
.post-cover .cover-icon { animation: float-y 3.4s ease-in-out infinite; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.post-card:hover .cover-icon { animation: none; transform: scale(1.18) rotate(-4deg); }

/* 分类 / 标签 chips：弹性上浮 */
.cat-chip:hover, .tag-chip:hover {
  transform: translateY(-3px) scale(1.05);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 页脚爱心：扑通扑通 */
.footer .heart { display: inline-block; animation: heartbeat 1.9s ease-in-out infinite; }

/* 动态大图：悬停轻微放大（容器已有 overflow:hidden）；缩略图提亮 */
.moment-main img { transition: transform 0.35s ease; }
.moment-main img:hover { transform: scale(1.05); }
.moment-thumbs img { transition: filter 0.25s ease; }
.moment-thumbs img:hover { filter: brightness(1.12); }

/* 动态头像：悬停摇一摇 */
.moment-avatar, .profile-avatar { transition: transform 0.2s ease; }
.moment-avatar:hover, .profile-avatar:hover { animation: wiggle 0.5s ease; }

/* 表情面板：表情弹性放大 */
.emoji-item { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.emoji-item:hover { transform: scale(1.3); }

/* 互动按钮：悬停弹性放大 */
.stat-comment, .stat-like { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s; }
.stat-comment:hover, .stat-like:hover { transform: scale(1.12); }

/* ============================================
   AI：站点体检（#/checkup）
   ============================================ */
.checkup-page { max-width: 800px; }
.checkup-line { font-size: 14px; color: var(--ink-faint); padding: 6px 0; }

/* ---------- 报告头：分数环 + 总评 ---------- */
.checkup-report {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 26px;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.checkup-score-wrap { position: relative; flex: 0 0 auto; width: 116px; height: 116px; }
.checkup-ring { display: block; width: 100%; height: 100%; }
.checkup-ring .ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.checkup-ring .ring-value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
}
.checkup-ring.ok .ring-value { stroke: #d7a13d; }
.checkup-ring.low .ring-value { stroke: #cf7059; }
.checkup-score-num {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkup-score-num b {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.checkup-score-num span { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0 2px; }
.checkup-verdict-wrap { flex: 1; min-width: 0; }
.checkup-verdict {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-body);
  margin-bottom: 10px;
}
.checkup-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-faint);
}
.checkup-again {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: 999px;
  padding: 3px 13px;
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.checkup-again:hover { border-color: var(--accent); color: var(--accent-deep); }

/* 骨架屏（生成中） */
.checkup-ring-skel {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 9px solid var(--line);
  border-top-color: var(--accent);
  animation: checkupSpin 1.1s linear infinite;
}
@keyframes checkupSpin { to { transform: rotate(360deg); } }
.checkup-skel-line {
  height: 12px;
  border-radius: 6px;
  background: var(--line-soft);
  margin-bottom: 10px;
  animation: aiSkel 1.4s ease-in-out infinite;
}
.checkup-skel-line.w80 { width: 80%; }
.checkup-skel-line.w60 { width: 58%; }

/* 未登录 / 离线 / 生成失败：一句人话，不弹红框 */
.checkup-notice {
  padding: 20px 22px;
  margin-bottom: 20px;
  background: var(--accent-soft);
  border: 1px solid rgba(63, 143, 125, 0.2);
  border-radius: var(--radius);
}
.checkup-notice-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.checkup-notice-text { font-size: 13.5px; line-height: 1.75; color: var(--ink-light); }

/* ---------- 发现 / 建议 ---------- */
.checkup-card {
  padding: 22px 24px;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.checkup-card .block-title { margin-bottom: 14px; }
.checkup-tip { font-size: 13px; color: var(--ink-faint); line-height: 1.7; margin: -6px 0 14px; }
.checkup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checkup-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
}
.checkup-item.good { border-left-color: var(--accent); }
.checkup-item.warn { border-left-color: #d7a13d; }
.checkup-item.tip { border-left-color: var(--line); }
.checkup-badge {
  flex: 0 0 auto;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  white-space: nowrap;
}
.checkup-item.warn .checkup-badge { background: rgba(215, 161, 61, 0.16); color: #9a6f14; }
.checkup-item.tip .checkup-badge { background: var(--code-bg); color: var(--ink-light); }
.checkup-item-body { flex: 1; min-width: 0; }
.checkup-item-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.checkup-item-detail { font-size: 13.5px; line-height: 1.75; color: var(--ink-light); }

.checkup-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.checkup-action { display: flex; gap: 12px; align-items: flex-start; }
.act-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.act-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.75; color: var(--ink-body); }

/* ---------- 数据快照 ---------- */
.snap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.snap-cell {
  padding: 12px 8px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.snap-num { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.snap-label { font-size: 11.5px; color: var(--ink-faint); }
.snap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.snap-chip {
  font-size: 12.5px;
  color: var(--ink-light);
  background: var(--hover-bg);
  border-radius: 999px;
  padding: 3px 12px;
}
.snap-chip b { color: var(--accent-deep); font-weight: 700; }

/* 关于页 / 个人主页的入口 */
.about-more { margin-top: 18px; display: flex; justify-content: center; }
.about-more-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.about-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.checkup-entry-card { margin-top: 22px; }

/* ============================================
   AI：评论拟稿（评论区里的 ✨）
   ============================================ */
.comment-form { align-items: center; }
.comment-ai {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.comment-ai:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.08);
}
/* 后端确认没有 AI 能力时，全站入口一起隐藏（不留点了没反应的按钮） */
body.ai-off .comment-ai { display: none; }

.comment-draft {
  margin-top: 12px;
  padding: 13px 15px 11px;
  background: var(--accent-soft);
  border: 1px solid rgba(63, 143, 125, 0.2);
  border-radius: 12px;
}
.comment-draft[hidden] { display: none; }
.draft-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.draft-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--accent-deep);
  background: var(--card);
  border: 1px solid rgba(63, 143, 125, 0.28);
  border-radius: 999px;
  padding: 2px 10px;
}
.draft-hint { font-size: 11.5px; color: var(--ink-faint); }
.draft-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.15s;
}
.draft-close:hover { color: var(--ink); }

.draft-tones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.draft-tone {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: 999px;
  padding: 3px 13px;
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.draft-tone:hover { border-color: var(--accent); color: var(--accent-deep); }
.draft-tone.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.draft-body { display: flex; flex-direction: column; gap: 8px; }
.draft-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink-body);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.65;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.draft-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.draft-text { flex: 1; min-width: 0; }
.draft-tag {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.draft-empty { font-size: 13px; color: var(--ink-faint); padding: 4px 2px; }
.draft-skel { display: flex; flex-direction: column; gap: 8px; }
.draft-skel span {
  display: block;
  height: 34px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  animation: aiSkel 1.4s ease-in-out infinite;
}
.draft-skel span:nth-child(2) { animation-delay: 0.18s; }
.draft-skel span:nth-child(3) { animation-delay: 0.36s; }
.draft-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.draft-more {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: 999px;
  padding: 4px 15px;
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.draft-more:hover { border-color: var(--accent); color: var(--accent-deep); }
.draft-more.busy { opacity: 0.5; cursor: default; }
.draft-note { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 640px) {
  .checkup-report { gap: 18px; padding: 18px 16px; }
  .checkup-score-wrap, .checkup-ring-skel { width: 88px; height: 88px; }
  .checkup-score-num b { font-size: 28px; }
  .checkup-card { padding: 18px 16px; }
  .snap-grid { grid-template-columns: repeat(2, 1fr); }
  .checkup-item { padding: 12px 13px; }
  .draft-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 个人主页：游客版资料卡（线上站点未登录） ---------- */
.profile-guest .avatar-wrap { cursor: default; }
.profile-guest .profile-motto { line-height: 2; }
.guest-login-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.guest-login-link:hover { text-decoration: underline; }

/* ============================================================
   吉祥物「咕嘟」：右下角鲸鱼娘 + 聊天面板
   尺寸随视口等比缩放：clamp(下限, 28vw, 400px)，
   面板/气泡位置全部挂在这个变量上，缩小后跟着走。
   ============================================================ */
:root { --mascot-size: clamp(100px, 28vw, 400px); }
.mascot-btn {
  position: fixed;
  right: 4px;
  bottom: 4px;
  z-index: 1300;
  width: var(--mascot-size);
  height: var(--mascot-size);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
  animation: mascot-float 3.2s ease-in-out infinite;
}
.mascot-btn:hover {
  transform: scale(1.05);
  animation-play-state: paused;
}
.mascot-btn.mascot-active { transform: scale(1.05); animation-play-state: paused; }
/* Q 弹：按下去像捏了一下鲸鱼娘 */
.mascot-btn:active { transform: scale(0.94, 1.06); }
@keyframes mascot-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.mascot-btn svg, .mascot-btn img { display: block; }
/* 图片严格锁进按钮容器：按钮多大图片就多大（手机端缩小靠这里） */
.mascot-btn img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.mascot-face-img { object-fit: contain; }

.mascot-btn-tip {
  position: absolute;
  left: auto;
  right: calc(100% - 8px);
  top: 17%;
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px 12px 12px 3px;
  background: #5aaede;
  color: #fff;
  box-shadow: 0 3px 10px rgba(62, 134, 181, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mascot-btn:hover .mascot-btn-tip { opacity: 1; }
/* 触屏设备没有 hover，气泡常显几秒的方式太吵，直接不展示 */
@media (hover: none) { .mascot-btn-tip { display: none; } }

.mascot-panel {
  position: fixed;
  left: auto;
  right: 12px;
  bottom: calc(var(--mascot-size) + 12px);
  z-index: 1301;
  width: 340px;
  max-width: calc(100vw - 24px);
  height: 460px;
  max-height: min(60vh, 460px, calc(100vh - var(--mascot-size) - 60px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(30, 60, 48, 0.18);
  overflow: hidden;
  /* 收起时藏在按钮下面并缩小，展开时弹出 */
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mascot-panel.mascot-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mascot-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--line-soft);
}
.mascot-head-face { flex: 0 0 auto; display: flex; }
.mascot-head-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.mascot-head-sub { font-size: 11px; font-weight: 400; color: var(--ink-faint); font-family: var(--sans); }
.mascot-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mascot-close:hover { background: var(--accent-soft); color: var(--accent-deep); }

.mascot-msgs {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mascot-msg { display: flex; align-items: flex-start; gap: 8px; }
.mascot-msg-me { justify-content: flex-end; }
.mascot-msg-face { flex: 0 0 auto; display: flex; margin-top: 2px; }
.mascot-msg-text {
  max-width: 76%;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
}
.mascot-msg-gudu .mascot-msg-text {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 4px 14px 14px 14px;
}
.mascot-msg-me .mascot-msg-text {
  background: var(--accent);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.mascot-typing .mascot-dot { animation: mascot-blink 1.2s infinite; display: inline-block; }
.mascot-typing .mascot-dot:nth-child(2) { animation-delay: 0.2s; }
.mascot-typing .mascot-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes mascot-blink { 0%, 60% { opacity: 0.2; } 30% { opacity: 1; } }

.mascot-inputrow {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}
.mascot-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  outline: none;
}
.mascot-input:focus { border-color: var(--accent); }
.mascot-input:disabled { opacity: 0.5; }
.mascot-send {
  flex: 0 0 auto;
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.mascot-send:hover { background: var(--accent-deep); }
.mascot-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
  /* 手机端：贴边不露白，尺寸交给 --mascot-size（28vw，最小 100px） */
  .mascot-btn { right: 0px; bottom: 0px; left: auto; }
  .mascot-panel { left: auto; right: 12px; bottom: calc(var(--mascot-size) + 8px); width: calc(100vw - 24px); height: min(62vh, 440px); }
}