/*
 * 央知见（央行媒体）前端样式。
 *
 * 视觉基线来自首页参考图：很浅的灰蓝底、白卡片、约 22px 圆角、极轻阴影、明显间距。
 *
 * 三条硬约束：
 *   1. 这个前端就是 App 本体（iOS 是 WebView 壳），按 iPhone 竖屏设计，贴边处都要吃
 *      env(safe-area-inset-*)。
 *   2. **不要用 color-mix()**：deploymentTarget 是 iOS 15，而它要 iOS 16.2 才认，
 *      在更老的机器上整条声明会被丢掉，这类失败在桌面浏览器里看不出来。语义色写成 rgba 常量。
 *   3. 不要在样式里写资源版本号（?v= 之类属于构建标识，不许自拟或自增）。
 */

:root {
  color-scheme: light dark;

  /* 品牌色全站一套：取自登录页的浅绿。
     首页（频道下划线、底栏选中、徽章、按钮）与登录页现在是同一个来源，
     不要再各写一份色值。 */
  --brand: #21c46b;
  --brand-deep: #17a75a;
  --brand-ink: #0f8a49;          /* 需要压深时用（品牌名这类） */
  --brand-tint: rgba(33, 196, 107, 0.12);
  --brand-line: rgba(33, 196, 107, 0.3);
  --brand-ring: rgba(33, 196, 107, 0.18);

  --alert: #ff3b30;
  --info: #2d8cf0;              /* 与第三方入口里的蓝同一个色，用于区分徽章 */

  --bg: #eef3f9;            /* 很浅的灰蓝，不纯白 */
  --surface: #ffffff;
  --surface-soft: #f1f5fa;
  --text: #151a22;
  --text-soft: #5c6675;     /* 摘要：中灰 */
  --muted: #98a1af;         /* 来源 / 时间：浅灰 */
  --line: rgba(21, 26, 34, 0.08);
  --shadow-card: 0 1px 2px rgba(21, 26, 34, 0.04), 0 6px 18px rgba(21, 26, 34, 0.05);
  --surface-glass: rgba(255, 255, 255, 0.94);

  --tint-info: rgba(45, 140, 240, 0.14);
  --tint-info-line: rgba(45, 140, 240, 0.32);
  --tint-accent: rgba(200, 54, 44, 0.1);
  --tint-accent-line: rgba(200, 54, 44, 0.28);
  --tint-warn: rgba(184, 134, 11, 0.13);
  --tint-warn-line: rgba(184, 134, 11, 0.32);
  --skeleton-a: #e4eaf2;
  --skeleton-b: #f2f6fb;

  /* 正文字体用系统原生（iOS 上是 SF Pro + 苹方）。
     品牌区另有一套"标题类"字体（见 --font-display），两者分工明确。 */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
                 "Helvetica Neue", "Microsoft YaHei", sans-serif;
  /* 品牌名 / 副标题 / 那两句小字专用：衬线标题字体，不是常规无衬线标题。
     iOS 落到宋体（Songti SC），Windows 落到宋体（SimSun），都是同一类东西。 */
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif;

  --radius-card: 22px;      /* 参考图：卡片圆角 20~24px */
  --radius-media: 16px;
  --gap-card: 12px;
  --tabbar-height: 56px;        /* 底栏本体高度（不含 iPhone 安全区） */
  --tabbar-scroll-gap: 22px;    /* 滚动内容到底栏的额外留白 */
  --tabbar-toast-gap: 18px;     /* 提示条与底栏之间的间距 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1319;
    --surface: #171c24;
    --surface-soft: #1f252f;
    --text: #eef1f6;
    --text-soft: #b4bcc8;
    --muted: #7d8593;
    --line: rgba(238, 241, 246, 0.12);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --surface-glass: rgba(23, 28, 36, 0.94);
    --skeleton-a: #1f252f;
    --skeleton-b: #27303b;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-system);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.screen { display: none; height: 100%; }

body[data-view="login"] #screen-login,
body[data-view="app"] #screen-app,
body[data-view="placeholder"] #screen-placeholder,
body[data-view="following"] #screen-following,
body[data-view="article"] #screen-article,
body[data-view="profile"] #screen-profile,
body[data-view="messages"] #screen-messages {
  display: flex;
  flex-direction: column;
}

/* ── 「加载中」那三个会动的点 ──────────────────────────────────────────
 *
 * 用户 2026-09-22 明确**不要转圈动画**（在真机上看着是静止的圈），改成「加载中」
 * 后面一串依次亮起来的点。用法见 screens/login.js 的 dots()。
 * 冷启动核对会话时它出现在「注册新账号」下方（.auth-checking）。 */

.auth-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 3px; }

.auth-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  -webkit-animation: auth-dot 1.2s ease-in-out infinite;
  animation: auth-dot 1.2s ease-in-out infinite;
}

.auth-dots i:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.auth-dots i:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

@-webkit-keyframes auth-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

@keyframes auth-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

/* 冷启动核对会话：「注册新账号」下方那行状态文案 */
.auth-checking {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ── 通用按钮（重试 / 退出登录这类次要操作）──────────────────────────── */

.btn {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn:active { background: var(--brand-deep); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn--ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--line); }

/* ── 登录 / 注册页 ─────────────────────────────────────────────────────
 *
 * 这一屏按登录页参考图走**浅绿品牌风**，与首页的蓝色强调色不同。
 * 绿色是本屏局部变量（--auth-*），没有动全局 --brand：首页的频道下划线、
 * 底栏选中态、徽章仍是蓝的。要不要统一成全站绿色是另一个决定，见 README「首页」一节。
 */

:root {
  /* 登录页的绿不再自己定义，直接引用全站品牌色 */
  --auth-green: var(--brand);
  --auth-green-deep: var(--brand-deep);
  --auth-green-ink: var(--brand-ink);
  --auth-green-tint: var(--brand-tint);
  --auth-green-line: var(--brand-line);
  --auth-field: #f4f7f5;         /* 极浅灰白，不用明显边框 */
  --auth-field-line: rgba(21, 26, 34, 0.06);
  --auth-warn: rgba(200, 54, 44, 0.1);
  --auth-warn-line: rgba(200, 54, 44, 0.26);
}

@media (prefers-color-scheme: dark) {
  :root {
    --auth-field: #1b2320;
    --auth-field-line: rgba(238, 241, 246, 0.08);
  }
}

#screen-login {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 淡绿 → 页面底色。用实色多段而不是"透明到透明"的 rgba：
     后者在有些 WebKit 版本上会插值出偏灰的脏色，还会在中间留下一道色带。 */
  background: linear-gradient(180deg, #e8f7ef 0%, #f1f9f5 20%, #edf4f8 44%, var(--bg) 66%);
}

.auth {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 关键是 flex: 1 0 auto：**不许收缩**。只写 min-height:100% 的话，矮屏（如 iPhone SE）
     上这个 flex 项会被压回容器高度，内容溢出到滚动区之外，协议那一行就永远滚不到了。 */
  flex: 1 0 auto;
  min-height: 100%;
  padding: 0 24px calc(env(safe-area-inset-bottom) + 18px);
}

/* 整屏背景装饰层。
 *
 * position: fixed + inset: 0 —— 通铺整个视口。**不要**挂到带内边距的容器里：
 * 那样装饰会跟着内容的宽度走，两侧会露出硬边（就是"两层背景"那个错觉）。
 * 固定定位还能让它不随内容滚动。 */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.auth-bg svg { display: block; width: 100%; height: 100%; }

/* 装饰层之外的所有内容都要浮在它上面；核对遮罩自己带 fixed/更高 z-index，排除在外 */
.auth > *:not(.auth-bg) { position: relative; z-index: 1; }

/* 品牌区 */
.auth-hero {
  flex: none;
  padding: calc(env(safe-area-inset-top) + 64px) 0 52px;
  text-align: center;
}

.auth-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  left: -6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.auth-close svg { width: 22px; height: 22px; }
.auth-close:active { background: rgba(21, 26, 34, 0.06); }

.auth-hero__identity { position: relative; }

.auth-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.16em;
  /* 字间距会在最后一个字后面留一格，居中的时候看起来偏左，这里补回来 */
  text-indent: 0.16em;
  line-height: 1.15;
  color: var(--auth-green-ink);
  /* 品牌名带一点极淡的光晕，贴近参考图的浮雕感 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.auth-hero__tagline {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-soft);
}

/* 这两句小字已按用户要求删掉文字，但**占位与高度保留**（只删文字、不动间距）：
   min-height = 两行 × 1.9 行高，空着也占原来的高度。 */
.auth-hero__motto {
  position: relative;
  margin: 20px 0 0;
  min-height: 3.8em;
  font-family: var(--font-display);
  text-align: right;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.auth-hero__motto span { display: block; }

/* 输入区 */
.auth-form { display: flex; flex-direction: column; }

.auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  margin-bottom: 14px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--auth-field);
  border: 1px solid var(--auth-field-line);
}

.auth-field:focus-within {
  border-color: var(--auth-green-line);
  background: var(--surface);
}

.auth-field__icon { flex: none; width: 20px; height: 20px; color: var(--muted); }

.auth-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 16px; /* 小于 16px 时 iOS 会自动放大页面 */
  color: var(--text);
  outline: none;
}

.auth-field__input::placeholder { color: var(--muted); }

.auth-field__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.auth-field__toggle svg { width: 20px; height: 20px; }

.auth-notice {
  margin: 2px 2px 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--auth-warn);
  border: 1px solid var(--auth-warn-line);
  color: var(--text);
}

.auth-notice[data-kind="info"] { background: var(--surface-soft); border-color: var(--line); }

.auth-forgot-row { display: flex; justify-content: flex-end; margin: 0 2px 18px; }

.auth-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-green-deep);
  font-size: 13px;
  cursor: pointer;
}

.auth-link--plain { font-size: 13px; color: var(--text-soft); }

.auth-btn {
  /* inline-flex：按钮里要放「转圈 + 登录中…」，文字与转圈居中对齐 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 18px;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
}

/* 主按钮里的「登录中」+ 点：绿底上点跟着白字走（currentColor） */
.auth-btn .auth-dots { margin-left: 1px; }

.auth-btn--primary {
  background: var(--auth-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(33, 196, 107, 0.24);
}

.auth-btn--primary:active { background: var(--auth-green-deep); }

.auth-btn--secondary {
  margin-top: 12px;
  background: var(--auth-green-tint);
  color: var(--auth-green-ink);
}

.auth-btn--secondary:active { background: rgba(33, 196, 107, 0.18); }
.auth-btn[disabled] { opacity: 0.6; cursor: default; }

/* 其他登录方式：夹在很细的浅灰线中间 */
.auth-others { margin-top: auto; padding-top: 56px; }

.auth-divider { display: flex; align-items: center; gap: 14px; }

.auth-divider__line { flex: 1; height: 1px; background: var(--line); }
.auth-divider__text { flex: none; font-size: 12.5px; color: var(--muted); }

.auth-socials {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 30px;
}

.auth-social {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-soft);
  cursor: pointer;
}

.auth-social:active { transform: scale(0.94); }
.auth-social svg { width: 24px; height: 24px; }

/* 图标颜色按参考图各归各色，底色统一走极浅圆底 */
.auth-social--apple { color: #12161f; }
.auth-social--wechat { color: #21c46b; }
.auth-social--qq { color: #2d8cf0; }
.auth-social--more { color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .auth-social--apple { color: #eef1f6; }
}

/* 协议 */
.auth-agreement {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: 4px;
}

.auth-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 0;
  border: 1.5px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.auth-check__tick { width: 13px; height: 13px; opacity: 0; color: #fff; }

.auth-check.is-checked {
  border-color: var(--auth-green);
  background: var(--auth-green);
}

.auth-check.is-checked .auth-check__tick { opacity: 1; }

.auth-agreement__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

.is-shaking { animation: auth-shake 0.32s ease; }

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── 首页骨架 ─────────────────────────────────────────────────────── */

/* 整屏一条竖渐变：顶部浅绿 → **到大卡片处淡成纯白**，大卡片以下整片纯白
   （用户 2026-09-22 口径：绿色到大卡片就终结，下面不要有色）。
   顶部三段色保持原样不动；白点用 % 定在大卡片所在的高度区间里 —— 卡片是不透明的，
   落点在卡片上或其后都不会露馅。 */
#screen-app {
  background: linear-gradient(180deg, #e8f7ef 0%, #f1f9f5 15%, #edf4f8 28%, var(--surface) 44%);
}

.home {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.home__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* 给固定底栏让位，否则最后一张卡永远压在 Tab Bar 下面 */
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--tabbar-scroll-gap));
}

/* ── NewsHeader ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  flex: none;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 4px;
  overflow: hidden;
}

/* 山峦 / 云雾 / 太阳：只作氛围，压到很低的不透明度，绝不抢内容。
   底部用遮罩渐隐（而不是让图形直接顶到品牌区下缘再被切一刀）——
   这样装饰是"化"进下面那层底色的，不会出现一道横线。 */
.hero__scenery {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0) 100%);
}

.hero__scenery svg { display: block; width: 100%; height: 100%; }

.hero__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hero__identity { flex: 1; min-width: 0; }

.hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--brand-ink); /* 与登录页的品牌名同色 */
}

.hero__tagline {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.hero__actions { display: flex; gap: 10px; flex: none; }

.hero__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(21, 26, 34, 0.05);
  cursor: pointer;
}

.hero__btn:active { transform: scale(0.95); }
.hero__btn svg { width: 20px; height: 20px; }

/* .hero__motto（品牌区右下那两句小字）2026-09-22 已删：用户要求去掉，
   删掉后频道那一行自然上移。品牌名、副标题与两个图标都不动。 */

/* ── CategoryTabs ─────────────────────────────────────────────────── */

.tabs {
  flex: none;
  display: flex;
  gap: 24px;
  padding: 10px 18px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
  position: relative;
  flex: none;
  padding: 2px 0 8px;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.tabs__item.is-active { color: var(--text); font-size: 16px; font-weight: 700; }

/* 选中的短蓝色下划线（参考图） */
.tabs__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
}

/* ── FeaturedNewsCard ─────────────────────────────────────────────── */

.featured-strip {
  display: flex;
  gap: 12px;
  /* 左右只留 10px：焦点大卡要「差不多铺到屏幕边」（2026-09-22 用户口径），
     比下面的列表（16px）更靠边是有意的，焦点区本来就该更满。 */
  padding: 8px 10px 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 吸附对齐到左内边距，第一张才不会被居中推到中间去 */
  scroll-padding-left: 10px;
  scrollbar-width: none;
}

.featured-strip::-webkit-scrollbar { display: none; }

/* 满内容宽度：一张就占满，不再露下一张的角（原来是 0.8 倍宽 + 露一角）。
   多张时仍可左右滑，吸附对齐照旧。 */
.featured {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0f1a2b;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

/* 焦点图**固定 16:9**（2026-09-22 用户口径，从 3:2 改为 16:9）：封面是什么比例都只露 16:9。
   只作用于**首页大卡**；文章详情页的封面图走自己的 .article__figure-*，不受影响。
   用 padding 撑高度（不依赖 aspect-ratio，老 WebView 上也稳——真机上 aspect-ratio
   没生效，卡片会跟着封面比例变高），img 绝对定位铺满 + cover 裁切。 */
.featured__media { position: relative; }
.featured__media::before { content: ""; display: block; padding-top: 56.25%; } /* 9 ÷ 16 = 16:9 */
.featured__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* 暗色蒙层压在图片底部，是图片的一部分，不是页面装饰 */
.featured__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0) 36%, rgba(8, 14, 24, 0.34) 62%, rgba(8, 14, 24, 0.8) 100%);
}

.featured__pill {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1b2430;
  font-size: 11px;
  font-weight: 600;
}

.featured__counter {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.featured__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px 13px;
  color: #fff;
}

/* 标题占卡片 **3/5**（2026-09-22 用户口径，从原来的 1/2 放宽）：右边 2/5 留给图片本身。
   最多两行，行内超出的按省略号截断。 */
.featured__title {
  margin: 0 0 5px;
  max-width: 60%;
  font-size: 18px;
  line-height: 1.36;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 焦点卡的文字容量：字号/宽度在 2026-09-22 调整为**标题 18px、占 3/5**，
   副标题 **14px**。原来那张逐字符实测表（17px / 占 1/2）已不适用 ——
   本机没有 Chromium 量测环境，这里**不编新数字**；docs/焦点卡字数口径.md 的
   表格与「写作口径」需按新字号/宽度重测后再更新。 */
.featured__summary {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── NewsCard ─────────────────────────────────────────────────────── */

.news-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.news-card:active { background: var(--surface-soft); }

/* 左图右文：图占 44%（原来是 32%，按用户要求放大到约 1.3 倍），**固定 4:3**。
   用 padding 撑高度（不依赖 aspect-ratio，老 WebView 上也稳），img 绝对铺满 + cover 裁切；
   coverless 的空框同样是 4:3。 */
.news-card__media {
  flex: 0 0 44%;
  position: relative;
  align-self: flex-start;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--surface-soft);
}

.news-card__media::before { content: ""; display: block; padding-top: 75%; }

.news-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-soft);
}

.news-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.news-card__title {
  /* 上边距 2px = 大标题整体下移 2px；下边距 4→5px = 副标题再下移 1px
     （用户 2026-09-22 口径）。 */
  margin: 2px 0 5px;
  font-size: 16.5px;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 间距（用户 2026-09-22 口径）：标题↔副标题贴近（4px），
   而**来源行↔副标题要比它更远**（≥10px，且用 margin-top:auto 把它压到卡片底部，
   视觉上也就不再"太上"）。 */
.news-card__summary {
  margin: 2px 0 10px;   /* 上边距 2px = 副标题再下移 2px（用户 2026-09-22 口径） */
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;   /* 来源/时间字号 11 → 12px（用户 2026-09-22 口径） */
  color: var(--muted);
}

/* 「样稿」标记：真稿一篇都没有时，列表垫的那几条样稿会带上它（见 data-source.js 的
   SAMPLE_WHEN_EMPTY）。有它就不会有人把样稿当成真发出来的稿子。 */
.news-card__tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--text-soft);
}

.news-card__views { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.news-card__views svg { width: 13px; height: 13px; }

.feed-note {
  margin: 16px 16px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

/* ── 下拉刷新 / 提示条 ───────────────────────────────────────────── */

.pull {
  height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  transition: height 0.18s ease;
}

.pull[data-state="ready"] { color: var(--brand); }

.banner {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--tint-warn);
  border: 1px solid var(--tint-warn-line);
}

/* ── 骨架屏 / 空态 / 失败态 ───────────────────────────────────────── */

.feed-skeleton { padding: 8px 16px 0; }

.skeleton-feature {
  position: relative;
  width: 80%;
  overflow: hidden;
  margin-bottom: var(--gap-card);
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

/* 与焦点图同比例（16:9），用 padding 撑高度 */
.skeleton-feature::before { content: ""; display: block; padding-top: 56.25%; }

.skeleton-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* 与普通新闻卡左图同比例（44% 宽、4:3） */
.skeleton-row__img {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--skeleton-a);
}

.skeleton-row__img::before { content: ""; display: block; padding-top: 75%; }

.skeleton-row__lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

.skeleton-line--title { height: 13px; width: 88%; }
.skeleton-line--short { width: 52%; }

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.state { padding: 56px 24px; text-align: center; color: var(--muted); }
.state--page { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.state__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--surface-soft);
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
}

.state__title { margin: 0 0 4px; font-size: 16px; color: var(--text); font-weight: 600; }
.state__text { margin: 0 auto; max-width: 300px; font-size: 13px; line-height: 1.7; }
.state__action { margin-top: 18px; }
.state__action .btn { width: auto; padding: 9px 20px; font-size: 14px; }

/* ── BottomTabBar ─────────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: none;
  align-items: stretch;
  padding: 5px 6px calc(env(safe-area-inset-bottom) + 5px);
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line);
}

body[data-tabs="on"] .tabbar { display: flex; }

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 0 3px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 10.5px;
  cursor: pointer;
}

.tabbar__item.is-active { color: var(--brand); }
.tabbar__glyph { position: relative; display: grid; place-items: center; }
.tabbar__item svg { width: 23px; height: 23px; }

.tabbar__dot {
  position: absolute;
  top: -1px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--alert);
  border: 1.5px solid var(--surface);
}

/* ── 顶栏 / 正文 ──────────────────────────────────────────────────── */

/* 仅剩「尚未实现」那张占位屏在用。正文页有自己的顶栏（见下面 .article-bar）。 */
.plain-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--surface-glass);
  border-bottom: 1px solid var(--line);
}

.plain-bar__title { margin: 0; font-size: 17px; font-weight: 600; }

/* ── 正文 ────────────────────────────────────────────────────────────
 *
 * 版式照央行 APP 的文章详情页复刻（那边是 pages/home.html 的 .home-article-* 骨架，
 * 加上 ui/styles/overlays/home/home-r1755-article-floating-actions.css 的 R17.48/R17.55 两节）。
 * 下面的数值是从那边**量出来的最终生效值**，不是另配的一套：
 *   字体    公众号阅读页那一套（苹果原生 -apple-system，落到 SF Pro + 苹方）
 *   正文    17px / 行高 1.88 / 字距 .02em / #3f3f3f，段间距 15px，无首行缩进
 *   标题    非粗体、clamp(22px,6vw,27px)、行高 1.38、字距 .035em、#191919
 *   元信息  13px 灰字 + 账号名蓝色（#576b95），圆点分隔
 *   章节    20px/600 + 底部 1px 分隔线 + 01 序号胶囊
 *   图片    圆角 20px + 0 17px 32px 投影 + 图注
 *
 * 两处**刻意不照搬**，改动前先读这段：
 *   1. 正文页固定白底，不跟深色模式。央行那份也是硬白底；阅读页要不要跟着变暗是另一件事，
 *      没定下来之前先与主项目一致。
 *   2. 底部点赞/评论/转发是**数据条**，不是 <button>。央行那份虽然写成 button，但没有任何
 *      点击行为（全库搜 data-article-action 只有 HTML 与渲染函数），本项目不摆不可点的按钮。
 */
#screen-article {
  --article-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                  "Helvetica Neue", Arial, sans-serif;
  /* 纸面是硬白底，所以这一屏内部一律按**浅色**取色。
     不这么钉住的话，深色模式下「载入中 / 载入失败」那类空态会拿到深色主题的浅色文字，
     变成白底白字（:root 的那套变量是被 @media prefers-color-scheme 换过的）。 */
  --bg: #eef3f9;
  --surface: #ffffff;
  --surface-soft: #f1f5fa;
  --text: #151a22;
  --text-soft: #5c6675;
  --muted: #98a1af;
  --line: rgba(21, 26, 34, 0.08);
  --surface-glass: rgba(255, 255, 255, 0.94);
  position: relative;
  background: #fff;
  color: #191919;
  font-family: var(--article-font);
  /* 系统字体没有这些合成字重，开着只会把中文渲染糊。 */
  font-synthesis: none;
  animation: article-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 从右侧滑入。display 由 none 切回来时动画会重跑，所以每次进正文都会播一次。 */
@keyframes article-enter {
  from { opacity: 0; transform: translateX(8%); }
  to { opacity: 1; transform: translateX(0); }
}

/* 顶栏：左返回箭头 —— 中间整片留白 —— 右侧三个点。
   没有标题、没有底色、没有下边框，图标也没有按钮容器视觉（无边框、无圆角矩形、无背景）。 */
.article-bar {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(53px + env(safe-area-inset-top));
  padding: calc(5px + env(safe-area-inset-top)) 20px 5px;
  background: #fff;
}

/* 两个图标按钮共用一套：只有图标本身，占位 22px 与正文左边缘对齐。
   点击区域扩到 44px —— 视觉不变、命中区够大（22px 的点击区在手机上太小）。 */
.article-bar__back,
.article-bar__more {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: #191919;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.article-bar__back::after,
.article-bar__more::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.article-bar__back svg,
.article-bar__more svg { width: 22px; height: 22px; }

.article-bar__back:active,
.article-bar__more:active { opacity: 0.5; }

/* 正文滚动区。左右 20px 是页边留白，纸面自己另有 760px 上限。
   底部不再留「悬浮条」那 118px —— 互动区已改成滚动区之外的普通一行。 */
.article-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0 20px;
}

/* 顶栏到标题之间留出呼吸空间：正文纸面上内边距 32px。 */
.article { max-width: 760px; margin: 0 auto; padding: 32px 0 36px; }

/* 文章大标题 = 预设里的「黑大标题」（22px / 600 / #191919）。
   字号、颜色、字重走 --type-* 变量，套装见下面的 .type--* 一节。 */
.article__title {
  margin: 0;
  color: var(--type-color, #191919);
  font-size: var(--type-size, 22px);
  font-weight: var(--type-weight, 600);
  line-height: var(--type-line, 1.35);
  letter-spacing: 0;
}

/* 元信息行：账号名 + 日期 + 阅读数，连续排列，靠自然间距分开（不用圆点分隔）。
   下外边距 16px 就是它与正文之间的那段留白。中文不加人为字距。
   2026-09-22 第二轮：整行回到 13px；日期与阅读数用「小正文」的 #606060，
   账号名回到原来的公众号蓝 + 字重 500。 */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
  color: #606060;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
}

/* 账号名：保留公众号那种蓝色链接色；**字重不另加**，跟着整行走常规体 ——
   与正文页底部那条账号名（.article-account__name）同一套字，那种细一点的观感。
   2026-09-22 真机验收后按用户口径改：原来这里写了 font-weight: 500，偏粗。 */
.article__agency { color: #576b95; }

/* 正文文字：摘要、导语、章节段落共用一套排版。中文不加人为字距。
   默认值 15px / #444444 就是预设里的「深灰正文」——2026-09-22 第二轮把「黑正文」这个名字
   去掉了，正文的基准色从 #333333 换成 #444444。
   white-space:pre-line 不能省 —— 主项目一个块里常写「（一）…（二）…」并自带换行，
   折叠掉就挤成一整段，读起来完全不是那个样子。 */
.article__summary,
.article__lead p,
.article__section p {
  margin: 0 0 15px;
  color: var(--type-color, #444444);
  font-size: var(--type-size, 15px);
  font-weight: var(--type-weight, 400);
  line-height: var(--type-line, 1.72);
  letter-spacing: 0;
  white-space: pre-line;
}

/* 摘要不画分隔线：层级靠留白建立（公众号正文就是这么做的）。
   下内距留着当呼吸空间，摘要为空时整块不渲染。 */
.article__summary { padding-bottom: 16px; }

/* 会议地点：正文里的普通一行文字（小标签 + 地点名），不做卡片、不要图标。 */
.article__location {
  margin-top: 16px;
  color: #3f3f3f;
  font-size: 15px;
  line-height: 1.6;
}

.article__location-label { margin-right: 8px; color: #8c8c8c; }

.article__section { margin-top: 28px; }

/* 章节小标题：普通文章小标题，靠上下外边距与正文区分。
   没有序号胶囊、没有下划线、不做成组件。
   2026-09-22 第二轮：17px / 行高倍数 1.45（原 19px / 1.35）。 */
.article__heading {
  margin: 0 0 14px;
  color: var(--type-color, #222);
  font-size: var(--type-size, 17px);
  font-weight: var(--type-weight, 600);
  line-height: var(--type-line, 1.45);
  letter-spacing: 0;
}

/* ── 文字样式预设（2026-09-22 用户定名）────────────────────────────────
   名字与取值就是这张表；要调字号或颜色，只动这一节：

     黑大标题   22px / 600 / #191919   —— 文章大标题的现行样子
     近黑标题   22px / 700 / #1a1a1a   —— 与大标题同字号，更黑更重
     深灰正文   15px / 400 / #444444   —— 正文的基准（摘要、导语用的就是它）
     黑灰正文   15px / 400 / #222222
     小正文     13px / 400 / #606060

   六个（现在是五个）预设都只写 --type-* 四个变量，取值由上面几条 .article__* 规则读走，
   所以同一个预设既能套在标题上，也能套在段落上，不用为「标题版 / 正文版」各写一份。
   变量会继承 —— 套在容器上会连带里面所有文本一起变，要精确到块就套在那一段/那一个标题上。

   行高一律写倍数（1.35 / 1.45 / 1.72），**不写固定像素**：写死了字号一改行距就不跟着走。
   「黑正文」（16px / #333333）在第二轮被去掉。 */
.type--black-title { --type-color: #191919; --type-size: 22px; --type-weight: 600; --type-line: 1.35; }
.type--near-black-title { --type-color: #1a1a1a; --type-size: 22px; --type-weight: 700; --type-line: 1.35; }
.type--dark-gray-body { --type-color: #444444; --type-size: 15px; --type-weight: 400; --type-line: 1.72; }
.type--charcoal-body { --type-color: #222222; --type-size: 15px; --type-weight: 400; --type-line: 1.72; }
.type--small-body { --type-color: #606060; --type-size: 13px; --type-weight: 400; --type-line: 1.72; }

/* 验版分区的小标签（正文页分区试样式时用，见 app.js 的 TEXT_STYLE_ZONE_TAGS）。
   定稿后关掉开关，这个类就没人用；留着是因为它本身不做任何装饰，只是把区块名字写在行首。 */
.type-zone-tag {
  display: block;
  margin: 0 0 7px;
  color: #b8b8b8;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* 正文插图。比例由主项目的 ratio 写在行内，这里只兜住形状。
   不加阴影、不做大圆角 —— 插图就自然铺在正文内容宽度里。 */
.article__figure { margin: 20px 0 0; }

.article__figure-img {
  display: block;
  width: 100%;
  border-radius: 0;
  object-fit: cover;
}

.article__caption { margin: 9px 0 0; color: #64748b; font-size: 14.4px; line-height: 1.45; }

/* 重点框：左侧竖条 + 大引号。 */
.article__pullquote {
  margin: 17px 0 1px;
  padding: 15px 16px 15px 13px;
  border-left: 3px solid #818cf8;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(100deg, rgba(224, 231, 255, 0.78), rgba(245, 243, 255, 0.4));
}

.article__pullquote span {
  float: left;
  margin: -3px 5px 0 0;
  color: #6366f1;
  font-family: Georgia, serif;
  font-size: 31px;
  line-height: 1;
}

.article__pullquote strong { color: #3730a3; font-size: 14px; line-height: 1.6; }

/* 信息卡：图标 + 主副标题 + 角标。 */
.article__info {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0;
  padding: 13px;
  border: 1px solid rgba(165, 180, 252, 0.4);
  border-radius: 15px;
  background: linear-gradient(105deg, rgba(238, 242, 255, 0.95), rgba(245, 243, 255, 0.75));
}

.article__info-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #6366f1;
  color: #fff;
  font-size: 19px;
}

.article__info-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.article__info-copy strong { color: #312e81; font-size: 13px; }
.article__info-copy small { color: #64748b; font-size: 10px; }

.article__info-badge {
  padding: 4px 6px;
  border-radius: 7px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  font-size: 9px;
  white-space: nowrap;
}

/* 引用框：左侧渐变小竖条 + 引用文字。 */
.article__quote { display: flex; gap: 12px; align-items: stretch; padding: 15px 16px; }
.article__quote-line { width: 3px; flex: 0 0 3px; border-radius: 3px; background: linear-gradient(#818cf8, #c4b5fd); }
.article__quote p { margin: 0; color: #4338ca; font-size: 14px; font-weight: 650; line-height: 1.75; }

/* 页脚署名：只署名「来源」。主项目把来源（source，通讯社）与发布账号（publisher）分开，
   source 为空时央行那份整块不渲染，这里照做。阅读数不在这里重复——元信息行已经有一份。 */
.article__foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid #dfe3e8;
  color: #999;
  font-size: 12px;
  line-height: 1.8;
}

/* 正文之后的账号与互动区（照公众号文章页底部那条）：左账号、右四格互动。
   不悬浮、不遮挡正文 —— 它是滚动区之外的普通一行，内容滚完就是它；
   也没有渐变、圆角胶囊与阴影。 */
.article-actions {
  flex: none;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
}

.article-actions__dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 左：发布账号 —— 方形头像占位 + 名字 + 认证标。 */
.article-account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.article-account__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #f1f5fa;
  color: #5c6675;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.article-account__name {
  overflow: hidden;
  color: #191919;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-account__verified { flex: none; width: 14px; height: 14px; color: #576b95; }

/* 右：点赞 / 转发 / 收藏 / 写留言，图标在上、数字或名字在下。 */
.article-actions__cells { display: flex; align-items: center; flex: none; gap: 14px; }

.article-actions__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: #7f7f7f;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.article-actions__item:active { opacity: 0.5; }
.article-actions__logo { width: 22px; height: 22px; }
.article-actions__count { color: inherit; font-size: 11px; font-weight: 400; }

@media (max-width: 430px) {
  .article__section { margin-top: 26px; }
}

/* ── 「我的」全屏页（screens/profile.js）────────────────────────────
 *
 * 版式照个人主页参考图：浅绿山景顶区 → 白色大面板（统计 / 个人信息 / 功能卡）
 * → 另一块白色圆角面板（Tab + 空状态）。两块白面板之间留一条灰缝 + 圆角，
 * 形成「大白色面板从下面托起」的分界。
 * 用的是全站同一套变量与圆角/阴影，不另立设计系统。 */

.profile-page {
  /* flex: 1 0 auto —— **不许收缩**（同登录页 .auth 那条）。宿主 #screen-profile 是
     flex 列容器，只写 min-height:100% 的话这个 flex 项会被压回一屏高、内容溢出被裁掉。 */
  flex: 1 0 auto;
  min-height: 100%;
  /* 自己也是 flex 列：让最后那张白卡片能撑满剩余高度（见 .profile-content 的 flex:1）。
     否则内容不足一屏时，白卡下面会露出页面底色 —— 用户能往下滑进那片灰色
     （2026-09-22 反馈）。底栏留白**下放到白卡自己的 padding**，不再留在页面层。 */
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* 整屏自己滚：顶区 + 两块面板会超过一屏 */
#screen-profile { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 顶区：浅绿山景氛围（SVG 来自 components/scenery.js） */
.profile-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
  background: linear-gradient(180deg, #ddf2e5 0%, #ecf7f0 62%, rgba(236, 247, 240, 0) 100%);
}

.profile-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.profile-hero__bg svg { display: block; width: 100%; height: 100%; }
.profile-hero > *:not(.profile-hero__bg) { position: relative; z-index: 1; }

/* 顶栏只有右上两个入口（设置 / 更多）——「我的」是主界面，没有返回按钮 */
.profile-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 4px;
}

.profile-topbar__actions { display: flex; gap: 2px; }

.profile-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.profile-icon-btn svg { width: 23px; height: 23px; }
.profile-icon-btn:active { background: rgba(21, 26, 34, 0.06); }

.profile-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px 0;
}

.profile-avatar {
  position: relative;
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(21, 26, 34, 0.1);
}

.profile-avatar__img { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.profile-avatar--fallback { display: grid; place-items: center; font-size: 34px; font-weight: 700; color: var(--brand-ink); }

/* 头像右下角的绿色编辑角标 */
.profile-avatar__edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

.profile-avatar__pencil { width: 14px; height: 14px; }

.profile-identity__text { flex: 1; min-width: 0; text-align: left; }

.profile-name-row { display: flex; align-items: center; gap: 10px; }

.profile-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;   /* 行高压紧：名字正好落在账号正上方，不再与账号拉太开 */
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「编辑资料」白色圆角胶囊，黑字（照参考图） */
.profile-edit {
  flex: none;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #151a22;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(21, 26, 34, 0.1);
  cursor: pointer;
}

.profile-edit:active { background: #f2f5f9; }

.profile-account {
  margin: 2px 0 0;   /* 紧贴名字下方（原来 8px 太空） */
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 认证状态：未认证只写「暂未认证」，不加「认证：」前缀 */
.profile-verify { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.profile-verify--ok { color: var(--brand-ink); }
.profile-verify__icon { width: 15px; height: 15px; }

/* 白色大面板：统计 + 个人信息 + 功能卡，圆角顶托起在顶区之上 */
.profile-panel {
  position: relative;
  z-index: 1;
  margin-top: -22px;
  padding: 26px 18px 20px;
  background: var(--surface);
  border-radius: 28px 28px 0 0;
}

/* 统计栏：数字在上、标签在下，四项均分，中间细分割线 */
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); }

.profile-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.profile-stat + .profile-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: var(--line);
}

.profile-stat__value { font-size: 21px; font-weight: 800; color: var(--text); }
.profile-stat__label { font-size: 13px; color: var(--muted); }

/* 个人信息卡片：简介一行 + IP/性别一行，**同一个卡片** */
.profile-bio { margin-top: 22px; padding: 16px; border-radius: 18px; background: var(--surface-soft); }
.profile-bio__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.profile-bio__line--empty { color: var(--muted); }
.profile-bio__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-soft);
}

.profile-chip__icon { width: 14px; height: 14px; color: var(--muted); }

/* 功能卡：我的发布 / 我的好友，同宽并排 */
.profile-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }

.profile-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
}

.profile-feature:active { background: #f7fafc; }

.profile-feature__glyph {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
}

.profile-feature__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-feature__title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-feature__sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-feature__chevron { flex: none; width: 16px; height: 16px; color: var(--muted); }

/* 内容区：另一块白色圆角面板。
   · flex:1 —— 撑满剩余高度，白卡直达屏幕底部，下面不再有灰色；
   · 底部 padding 里含底栏让位（原在 .profile-page 那层），这样白色一直铺到底栏后面；
   · margin-top 把「我的发布 / 我的好友」与这块内容区明显分开（各是各的白卡）。 */
.profile-content {
  flex: 1;
  margin-top: 16px;
  padding: 6px 0 calc(24px + var(--tabbar-height) + env(safe-area-inset-bottom) + var(--tabbar-scroll-gap));
  background: var(--surface);
  border-radius: 28px 28px 0 0;
}

/* Tab 复用首页 .tabs / .tabs__item（含绿色短下划线），这里只改成四项均分 */
.profile-tabs { justify-content: space-between; gap: 0; padding: 12px 22px 2px; }
.profile-tabs .tabs__item { flex: 1; text-align: center; padding: 4px 0 10px; font-size: 15px; }

.profile-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px 40px; text-align: center; }
.profile-empty__icon { width: 56px; height: 56px; color: #c2d6cd; }
.profile-empty__title { margin: 18px 0 0; font-size: 16px; font-weight: 600; color: var(--text); }
.profile-empty__text { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* ── 右上两个菜单（设置齿轮 / 更多三条杠）───────────────────────────────
 * 固定层 = 透明背板（点外部关闭，不压暗背景）+ 贴右上角的白色圆角卡片。
 * 里面只有「退出登录」是真功能，其余条目点了如实说「尚未实现」。 */

.profile-menu-layer { position: fixed; inset: 0; z-index: 40; }
.profile-menu__backdrop { position: absolute; inset: 0; background: transparent; }

.profile-menu {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 52px);
  right: 12px;
  min-width: 176px;
  padding: 6px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(21, 26, 34, 0.16);
}

.profile-menu__item {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.profile-menu__item:active { background: var(--surface-soft); }
.profile-menu__item--danger { color: var(--alert); }

/* 暗色下顶区改成一层深绿微光，别拿浅绿底配浅色字 */
@media (prefers-color-scheme: dark) {
  .profile-hero {
    background: linear-gradient(180deg, rgba(33, 196, 107, 0.26) 0%, rgba(33, 196, 107, 0.09) 60%, rgba(33, 196, 107, 0) 100%);
  }
  .profile-avatar { border-color: rgba(255, 255, 255, 0.14); }
  .profile-edit:active { background: #e7ecf3; }
  .profile-feature:active { background: var(--surface-soft); }
}

/* ── 消息页（底栏第三个 tab）────────────────────────────────────────────
 *
 * 结构：标题 → 搜索 → 新的好友 / 聊天中心 → 消息内容区（会话列表 + 常驻空态插画）。
 * 顶区沿用「我的」页那套浅绿山景氛围（components/scenery.js 复用，不新画一份）；
 * 圆角 / 阴影 / 颜色全部走全站变量，不另立设计系统。底栏由外壳负责，这里不再建导航。 */

#screen-messages { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.msg-page {
  /* flex: 1 0 auto —— 不许收缩（同「我的」页 .profile-page），否则内容会被压回一屏高 */
  flex: 1 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* 主界面、底栏常驻：内容给底栏让位（同一套变量） */
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--tabbar-scroll-gap));
  /* 整页一条连续渐变：最上方浅绿 → 逐渐淡到页面底色。**不再分段**，
     所以顶区与内容区之间看不到一条硬分界（用户 2026-09-22 口径）。
     用 px 收尾（而不是 %）是为了让淡出位置不受页面高度影响。 */
  background: linear-gradient(180deg, #ddf2e5 0, #e9f6ef 140px, var(--bg) 330px);
}

/* 顶区：只放内容，浅绿底由 .msg-page 的整页渐变给（这里不能再自己铺一层，
   否则又会在交界处露出色带）。 */
.msg-top {
  position: relative;
  overflow: hidden;
  padding: 0 0 14px;
}

.msg-top__bg { position: absolute; inset: 0 0 -1px; z-index: 0; pointer-events: none; opacity: 0.75; }
.msg-top__bg svg { display: block; width: 100%; height: 100%; }
.msg-top > *:not(.msg-top__bg) { position: relative; z-index: 1; }

/* 顶栏：左标题、右两个 logo（设置 / 更多） */
.msg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 0;
}

.msg-topbar__actions { display: flex; gap: 2px; }

.msg-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.msg-icon-btn svg { width: 23px; height: 23px; }
.msg-icon-btn:active { background: rgba(21, 26, 34, 0.06); }

.msg-title {
  margin: 0;
  padding: 0 10px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* 搜索：浅白半透明胶囊 + 极轻阴影，左侧放大镜（不是传统网页输入框） */
.msg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 36px);
  height: 44px;
  margin: 16px 18px 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(21, 26, 34, 0.04);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.msg-search:active { background: rgba(255, 255, 255, 0.92); }
.msg-search__icon { flex: none; width: 18px; height: 18px; }
.msg-search__ph { font-size: 15px; }

/* 两个功能入口：白色独立圆角卡，之间留明显间距；与上面的搜索框也留出间隔（不贴在一起） */
.msg-entries { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; }

.msg-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
}

.msg-entry:active { background: #f7fafc; }

.msg-entry__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #fff;
}

/* 新的好友用绿、聊天中心用蓝绿（照参考图的两枚入口配色） */
.msg-entry__icon--friends { background: linear-gradient(160deg, #5fd28f 0%, #2fbe6e 100%); }
.msg-entry__icon--chat { background: linear-gradient(160deg, #74cdf0 0%, #3d9fe0 100%); }
.msg-entry__glyph { width: 26px; height: 26px; }

.msg-entry__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-entry__title { font-size: 17px; font-weight: 600; color: var(--text); }
.msg-entry__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-entry__chevron { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* 内容区：会话列表 + 常驻插画（空列表时插画居中，有会话时插画跟在列表下方） */
.msg-content { flex: 1; display: flex; flex-direction: column; padding-top: 4px; }

.msg-list { list-style: none; margin: 0; padding: 4px 16px 0; display: flex; flex-direction: column; gap: 10px; }

.msg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.msg-item:active { background: #f7fafc; }

.msg-item__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 18px;
  font-weight: 700;
}

.msg-item__avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.msg-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msg-item__row { display: flex; align-items: baseline; gap: 8px; }
.msg-item__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item__time { flex: none; font-size: 12px; color: var(--muted); }
.msg-item__summary { font-size: 13px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 未读：克制的小红点 / 数字徽标，不做大面积红 */
.msg-item__badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--alert);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* 常驻空态插画：只要下方还空着就显示；文案随真实会话状态改变（见 messages.js）。 */
.msg-empty { display: flex; flex-direction: column; align-items: center; padding: 44px 24px 56px; text-align: center; }
.msg-empty--solo { margin: auto; }
.msg-empty__art { width: 132px; height: auto; }
.msg-empty__title { margin: 18px 0 0; font-size: 16px; font-weight: 600; color: var(--text); }
.msg-empty__text { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .msg-page {
    background: linear-gradient(180deg, rgba(33, 196, 107, 0.24) 0, rgba(33, 196, 107, 0.06) 140px, var(--bg) 330px);
  }
  .msg-entry:active, .msg-item:active { background: var(--surface-soft); }
  .msg-search { background: rgba(255, 255, 255, 0.1); }
  .msg-icon-btn:active { background: rgba(238, 241, 246, 0.1); }
}

/* ── 关注页（screens/following.js）──────────────────────────────────
 *
 * 版式照关注页参考图：浅绿山景顶区（返回 + 标题 + 副标题 + 圆形搜索框）→ 分类 Tab
 * → 关注列表 / 空状态。复用全站色板、圆角与阴影，不另立设计系统。
 * 与「我的」同为主界面，底栏常驻，内容底部给底栏让位（同一套变量，改一处全站生效）。 */

#screen-following { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.follow-page {
  /* position: relative 不能省：「好友还不够多」的判定要量列表相对本页的 offsetTop
     （见 screens/following.js 的 scheduleFooterCheck），它要求本页是 offsetParent。 */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--tabbar-scroll-gap));
  background: var(--bg);
}

/* 顶区：浅绿山景氛围（SVG 来自 components/scenery.js），与「我的」顶区同一套绿 */
.follow-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 22px;
  /* 收尾色直接写成页面底色 #eef3f9，而不是"透明"——透明尾会在顶区下缘
     露出一道色带（顶区的浅绿与页面底色交界）。写死底色就无缝衔接。 */
  background: linear-gradient(180deg, #ddf2e5 0%, #ecf7f0 54%, #eef3f9 100%);
}

.follow-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.follow-hero__bg svg { display: block; width: 100%; height: 100%; }
.follow-hero > *:not(.follow-hero__bg) { position: relative; z-index: 1; }

/* 顶栏一行：左「关注」标题、右「添加关注」。没有返回键（主界面靠底栏切换）。 */
.follow-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 0;
}

.follow-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.follow-icon-btn svg { width: 24px; height: 24px; }
.follow-icon-btn:active { background: rgba(21, 26, 34, 0.06); }

.follow-hero__text { padding: 6px 22px 0; }

/* 标题进了顶栏那一行（原来返回键的位置），左内边距与顶栏 12px 相加对齐原来的 22px。 */
.follow-title {
  margin: 0;
  padding-left: 10px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text);
}

.follow-subtitle { margin: 8px 0 0; font-size: 14px; color: var(--text-soft); }

/* 圆形搜索框：白色半透明胶囊、极轻的边与影，左侧放大镜 */
.follow-search { padding: 16px 18px 0; }

.follow-search__box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: 0 2px 10px rgba(21, 26, 34, 0.05);
}

.follow-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 16px; /* 小于 16px 时 iOS 会自动放大页面 */
  color: var(--text);
}

.follow-search__input::placeholder { color: var(--muted); }
.follow-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 分类 Tab：复用首页 .tabs / .tabs__item（含绿色短下划线），这里改成四项均分 */
.follow-tabs {
  justify-content: space-between;
  gap: 0;
  padding: 16px 22px 4px;
  background: transparent;
  overflow: visible;
}

.follow-tabs .tabs__item { flex: 1; text-align: center; padding: 4px 0 10px; font-size: 15px; }
.follow-tabs .tabs__item.is-active { font-size: 15px; font-weight: 700; color: var(--brand-ink); }

.follow-content { flex: 1; display: flex; flex-direction: column; }

/* ── 关注列表 ─────────────────────────────────────────────────────── */

.follow-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.follow-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.follow-item:active { background: var(--surface-soft); }

.follow-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
  color: var(--brand-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.follow-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.follow-avatar--topic { border-radius: 15px; background: var(--brand-tint); }

.follow-item__body { flex: 1; min-width: 0; }

.follow-item__name-row { display: flex; align-items: center; gap: 5px; }

.follow-item__name {
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follow-item__badge { flex: none; width: 15px; height: 15px; color: var(--info); }

.follow-item__label {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--tint-info);
  color: var(--info);
  font-size: 10px;
  white-space: nowrap;
}

.follow-item__bio {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.follow-item__action {
  flex: none;
  padding: 7px 15px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.follow-item__action:active { background: rgba(33, 196, 107, 0.2); }

/* ── 空状态 ───────────────────────────────────────────────────────── */

.follow-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* 主空状态：一条关注都没有 —— 在剩下的整片空间里居中 */
.follow-empty--primary { flex: 1; justify-content: center; padding: 24px 32px 44px; }
/* 列表底部那版：有关注但还不够多 —— 紧跟在列表下方，不再是整屏居中 */
.follow-empty--footer { padding: 30px 32px 20px; }

.follow-empty__mark { width: 150px; height: 141px; }
.follow-empty__mark svg { display: block; width: 100%; height: 100%; }
.follow-empty--footer .follow-empty__mark { width: 108px; height: 101px; }

.follow-empty__title { margin: 14px 0 0; font-size: 21px; font-weight: 700; color: var(--text); }
.follow-empty--footer .follow-empty__title { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--text-soft); }

.follow-empty__text {
  margin: 9px 0 0;
  max-width: 250px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
}

.follow-empty__action { margin-top: 26px; }

.follow-empty__btn {
  min-width: 168px;
  padding: 13px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(33, 196, 107, 0.24);
  cursor: pointer;
}

.follow-empty__btn:active { background: var(--brand-deep); }

/* ── 载入骨架（复用全站 .skeleton-line 的微光）─────────────────────── */

.follow-skeleton { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 10px; }

.follow-skeleton__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.follow-skeleton__avatar { flex: none; width: 50px; height: 50px; border-radius: 999px; background: var(--skeleton-a); }
.follow-skeleton__lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }

@media (prefers-color-scheme: dark) {
  .follow-hero {
    background: linear-gradient(180deg, rgba(33, 196, 107, 0.26) 0%, rgba(33, 196, 107, 0.09) 58%, rgba(33, 196, 107, 0) 100%);
  }
  .follow-search__box { border-color: rgba(238, 241, 246, 0.1); }
  .follow-icon-btn:active { background: rgba(238, 241, 246, 0.1); }
  .follow-item:active { background: var(--surface-soft); }
}

/* ── 提示条 ───────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-height) + var(--tabbar-toast-gap));
  z-index: 30;
  transform: translate(-50%, 12px);
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(18, 22, 31, 0.88);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body[data-toast="visible"] .toast { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* 例外：加载的点必须能看见它在动（否则用户以为卡死了）。系统「减弱动态效果」
     开着时其余动画（骨架微光、入场等）照旧停掉，只把加载点放行。 */
  .auth-dots i { animation-duration: 1.2s !important; }
}