/* ============================================================
   夜色微醺 · 精修层（refine-social）
   ------------------------------------------------------------
   覆盖页面：看一看/关注、相册、统计、成员图鉴、排行榜、个人页

   纪律（与全站约定一致）：
   1. 只做视觉，不改路由 / 接口 / 数据口径 / data-action 契约；
   2. 不改 styles.css / tokens.css / ds-*.css / index.html / 任何 .js；
   3. 不使用 !important；
   4. 颜色一律走变量：通用值用 tokens.css 的 --ds-*，本文件新增的
      图表专用值用 --rs-* 前缀，并同时给浅色(:root)与深色两套。

   加载顺序：本文件必须在 ds-theme-dark.css 之后引入。
   选择器统一以 html.force-mobile 起头（0,2,0），用于压过 styles.css
   里同为 html.force-mobile 的旧规则；需要压过 ds-theme-dark.css
   （同为 0,2,0）的深色值，再补 html.force-mobile[data-theme="dark"]。

   圆角分级（设计稿 anti-slop ④：禁止一切同圆角的 SaaS 卡片套件）：
     面板 / 浮层  20px  → var(--ds-radius-card)
     列表行 / 卡片 14px → --rs-radius-row
     缩略图 / 小控件 10px → --rs-radius-chip
     柱体 5px / 进度轨道 999px（轨道用胶囊，柱体用方角，形状即语义）
   ============================================================ */

/* ============================================================
   1. 本文件自有的 --rs-* 变量
   ============================================================ */

:root {
  /* ---- 图表色板：由 theme-factory「Ocean Depths」派生 ----
     取舍理由（详见 design/20261023_精修_其余页面与图表_v1.md）：
     · Golden Hour / Sunset Boulevard 的橙黄与强调色琥珀 #E8A34A 同族，
       图表会和按钮、选中态抢注意力，图形退不出背景 → 弃用；
     · Midnight Galaxy 的深紫 #2b1e3e 与夜色底 #15121A 几乎同色，
       柱体会"沉进"背景；薰衣草 #a490c2 又与次要文字 #A79FB0 撞色 → 弃用；
     · Ocean Depths 的 teal 与暖色强调色成互补、与墨紫底成冷暖对比，
       在浅底/深底上都站在"背景之外"，且不与状态色（--ds-success 绿）
       同框出现（图表容器内没有状态 pill）。
     取值：#A8DADC(seafoam) → #2D8B8B(teal) 两端线性插值出中间档，
     末档 #1A2332(deep navy) 只给"当前周期"那一根柱子。 */
  --rs-chart-1: #A8DADC;
  --rs-chart-2: #6FB4B5;
  --rs-chart-3: #2D8B8B;
  --rs-chart-4: #1A2332;

  /* 轨道与刻度：进度条底槽 + 每 25% 的刻度线（非颜色通道） */
  --rs-track: rgba(26, 26, 26, .07);
  --rs-track-tick: rgba(26, 26, 26, .16);

  /* 图片 1px 描边：浅色用墨色低透明，深色沿用既有的纯白低透明口径 */
  --rs-hairline: rgba(26, 26, 26, .10);

  /* 个人页头图：浅色沿用青铜绿深底，深色换成墨紫深底，文字随底换色 */
  --rs-hero-from: #4A5D4E;
  --rs-hero-to: #2B3830;
  --rs-hero-ink: #FFFFFF;
  --rs-hero-ring: rgba(255, 255, 255, .82);
  --rs-hero-chip-bg: rgba(255, 255, 255, .16);
  --rs-hero-chip-line: rgba(255, 255, 255, .28);

  --rs-radius-row: 14px;
  --rs-radius-chip: 10px;
  --rs-radius-bar: 5px;
  --rs-row-min: 56px;
}

html[data-theme="dark"] {
  /* 深色下 ramp 方向反转：亮度随数值上升（浅底是深度随数值上升），
     两端都指向"与该底对比最强"的那一端，保证末柱永远是最高对比。 */
  --rs-chart-1: #3E6E70;
  --rs-chart-2: #4E9295;
  --rs-chart-3: #6FB8B9;
  --rs-chart-4: #A8DADC;

  --rs-track: rgba(243, 239, 234, .10);
  --rs-track-tick: rgba(243, 239, 234, .22);

  --rs-hairline: rgba(255, 255, 255, .10);

  --rs-hero-from: #2A2437;
  --rs-hero-to: #17131F;
  --rs-hero-ink: #F3EFEA;
  --rs-hero-ring: rgba(243, 239, 234, .20);
  --rs-hero-chip-bg: rgba(243, 239, 234, .10);
  --rs-hero-chip-line: rgba(243, 239, 234, .18);
}

/* ============================================================
   2. 数字：全部 tabular-nums，成列对齐
   依据：设计稿 E4「所有动态数字加 tabular-nums 防跳动」。
   只用 tabular-nums，不换成等宽字族（避免 anti-slop ⑤ 的
   "monospace 小数据标签"套路）。
   ============================================================ */

html.force-mobile :is(
  .stat-tile .n,
  .leader-row .rank-num,
  .leader-row .score,
  .rank-row .rank-num,
  .rank-row .rank-value,
  .podium-value,
  .podium-medal,
  .my-rank b,
  .bar-item b,
  .bar-item small,
  .person-metric b,
  .album-count,
  .album-sub,
  .calendar-day
) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   3. 列表行（关注页 / 消息页 / 个人页入口）
   信息层级：主标题 14px/650 墨色 → 副标题 11.5px 次级 → 右侧元信息
   最小高度 56px（触摸目标与视觉稳定），行内纵向节奏 3px。
   ============================================================ */

html.force-mobile .me-row {
  min-height: var(--rs-row-min);
  padding: 10px 14px;
  gap: 12px;
  align-items: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  font-size: 13px;
  color: var(--ds-ink);
  transition: border-color .15s ease, background .15s ease;
}

/* 中间列改成 grid：主副标题各自成行，长昵称/长副标题只截中间列 */
html.force-mobile .me-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

html.force-mobile .me-row > div > b {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.force-mobile .me-row > div > small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ds-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 行内小标（虚拟 / @账号名）：不参与主标题竞争，压到 10px */
html.force-mobile .me-row .pill {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
}

/* 右侧元信息：箭头与操作按钮都不可压缩 */
html.force-mobile .me-row .arrow-ico {
  flex: none;
  width: 16px;
  color: var(--ds-text-tertiary);
}

html.force-mobile .me-row > .btn {
  flex: none;
  min-height: 32px;
}

html.force-mobile .me-list {
  gap: 8px;
}

/* ---- 消息行：未读用「左侧条 + 底纹 + 字重」三通道，不单靠颜色 ---- */
html.force-mobile .msg-row {
  min-height: var(--rs-row-min);
  padding: 10px 12px;
  gap: 10px;
  align-items: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  transition: border-color .15s ease, background .15s ease;
}

html.force-mobile .msg-row.unread {
  border-left: 3px solid var(--ds-brand);
  background: var(--ds-surface-soft);
}

html.force-mobile .msg-row.unread .msg-text {
  font-weight: 650;
  color: var(--ds-ink);
}

html.force-mobile .msg-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

html.force-mobile .msg-copy small {
  font-size: 11.5px;
  color: var(--ds-text-tertiary);
}

/* ============================================================
   4. 相册页（#album-feed 信息流 + .album-grid 瀑布流）
   ============================================================ */

html.force-mobile .album-feed {
  padding: 6px 14px 40px;
}

/* 行节奏：行间 8px（原来是 6px 且由 margin 给），日期组上方 14px */
html.force-mobile .album-row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  transition: border-color .15s ease;
}

html.force-mobile .album-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--rs-radius-chip);
  background: var(--ds-surface-soft);
  overflow: hidden;
}

/* 图片 1px 描边：浅色墨色低透明，深色纯白低透明（沿用 ds-theme-dark 口径，
   带色调的中性色会被底色吸成脏边）。用 outline 而非 inset shadow，
   因为 inset shadow 会被图片内容盖住。 */
html.force-mobile .album-thumb img {
  outline: 1px solid var(--rs-hairline);
  outline-offset: -1px;
}

/* 已删除/已过期的占位图是 core.js art() 生成的暖色渐变，深底上会成"白疤"，
   降亮降饱和后与 .album-grid svg 的既有处理一致 */
html.force-mobile .album-thumb.gone img {
  filter: grayscale(.35) brightness(.88);
}

html.force-mobile[data-theme="dark"] .album-thumb.gone img {
  filter: brightness(.78) saturate(.82);
}

html.force-mobile .album-title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ds-ink);
}

html.force-mobile .album-title .album-kind {
  font-size: 11.5px;
  font-weight: 400;
  margin-left: 4px;
  color: var(--ds-text-secondary);
}

html.force-mobile .album-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ds-text-tertiary);
}

html.force-mobile .album-side {
  gap: 6px;
  align-items: center;
}

/* 行内的「⋯」按钮：补齐 32px 触摸区，颜色降到三级 */
html.force-mobile .album-side .album-more {
  min-width: 32px;
  min-height: 32px;
  padding: 0 4px;
  border-radius: 8px;
  color: var(--ds-text-tertiary);
}

/* 日期分组头：只做一条安静的分组标记，不做卡片 */
html.force-mobile .album-date {
  margin: 14px 0 8px;
}

html.force-mobile .album-date b {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ds-ink);
}

html.force-mobile .album-feed > .album-date:first-child {
  margin-top: 2px;
}

/* 底部加载提示（直接子元素，与行内「⋯」同名但层级不同，用 > 隔开） */
html.force-mobile .album-feed > .album-more {
  padding: 12px 0 18px;
  font-size: 11.5px;
  color: var(--ds-text-tertiary);
}

html.force-mobile .album-feed > .album-more.is-clickable {
  color: var(--ds-brand);
}

/* ---- 瀑布流（.album-grid，聚会回顾页共用同一容器） ---- */
html.force-mobile .album-grid {
  column-gap: 10px;
}

html.force-mobile .album-grid .photo-tile {
  /* 瀑布流形态在上下文内自洽：基类 .photo-tile 是 aspect-ratio:1/1.15 的方形 tile，
     瀑布流要保留真实比例，就在这里显式写 auto —— 不去改基类，
     让"方形 tile"与"瀑布流 tile"各自在自己的上下文里成立（与 refine-home 约定一致） */
  aspect-ratio: auto;
  margin: 0 0 10px;
  border-radius: var(--rs-radius-row);
}

html.force-mobile .album-grid :is(.photo-tile img, .photo-tile svg) {
  outline: 1px solid var(--rs-hairline);
  outline-offset: -1px;
}

/* ============================================================
   5. 统计页
   ============================================================ */

/* ---- 5.1 数值卡 ---- */
html.force-mobile .stat-grid {
  gap: 10px;
  margin: 14px 0 20px;
}

html.force-mobile .stat-tile {
  padding: 13px 15px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
}

html.force-mobile .stat-tile .muted.small {
  font-size: 11.5px;
  color: var(--ds-text-secondary);
}

/* 数字：26px / 行高 1.25（原来是 28px / 1.45，行高过大把卡片撑虚胖） */
html.force-mobile .stat-tile .n {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ds-ink);
}

html.force-mobile .stat-tile small {
  font-size: 10.5px;
  color: var(--ds-text-tertiary);
}

/* ---- 5.2 柱状趋势 ----
   编码通道顺序：① 高度（长度）② 柱顶数值标签 ③ 末柱颜色。
   颜色排最后，去掉颜色后图表依然可读。 */
html.force-mobile .bars {
  height: 148px;
  gap: 8px;
  padding-top: 18px;
  align-items: flex-end;
}

html.force-mobile .bar-item {
  gap: 6px;
}

/* D1：柱体独立容器——柱高百分比相对 .bar-track（固定 88px），
   不再相对 .bar-item 全高，柱顶数值 <b> 与底部日期 <small> 永不被 flex 压缩。 */
html.force-mobile .bar-track {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 88px;
}

html.force-mobile .bar {
  width: 100%;
  max-width: 34px;
  min-height: 4px;
  border-radius: var(--rs-radius-bar) var(--rs-radius-bar) 2px 2px;
  background: var(--rs-chart-2);
}

/* 末柱（当前周期）：颜色取 ramp 端点 + 标签加粗，双通道 */
html.force-mobile .bar-item:last-child .bar {
  background: var(--rs-chart-4);
}

html.force-mobile .bar-item:last-child b {
  font-weight: 700;
  color: var(--ds-ink);
}

html.force-mobile .bar-item:last-child small {
  font-weight: 600;
  color: var(--ds-text-secondary);
}

html.force-mobile .bar-item b {
  font-size: 10.5px;
  font-weight: 550;
  color: var(--ds-text-secondary);
}

html.force-mobile .bar-item small {
  font-size: 10px;
  color: var(--ds-text-tertiary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 5.3 排行行（.leader-row：名次 / 名称 / 进度条 / 数值） ---- */
html.force-mobile .leader-row {
  gap: 12px;
  padding: 12px 0;
  align-items: center;
  border-bottom: 1px solid var(--ds-border);
}

html.force-mobile .leader-row:last-child {
  border-bottom: 0;
}

/* 名次列：固定 26px 右对齐成列；设计稿 E3 要求去衬线，
   这里显式用 UI 字族（原 .rank-num 是 Georgia，浅色下还是宋体） */
html.force-mobile .leader-row > .rank-num {
  flex: none;
  width: 26px;
  text-align: right;
  font-family: var(--ds-font-ui);
  font-size: 14px;
  font-weight: 650;
  color: var(--ds-text-secondary);
}

html.force-mobile .leader-row > div {
  min-width: 0;
}

html.force-mobile .leader-row > div > div:first-child {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.force-mobile .leader-row small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ds-text-tertiary);
}

/* 数值列：固定宽度右对齐，字形等宽，一列数字右侧齐平。
   颜色让位给进度条（同一行只允许一个强调色），靠字重与对齐成列。 */
html.force-mobile .leader-row .score {
  flex: none;
  min-width: 4.2em;
  margin-left: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-ink);
}

/* ---- 5.4 进度条 ----
   非颜色通道：① 长度本身就是数值 ② 轨道每 25% 一条刻度线
   ③ 右侧并列打印真实数值。去掉颜色后仍然可读。 */
html.force-mobile .meter {
  height: 6px;
  margin-top: 7px;
  border-radius: 999px;
  background-color: var(--rs-track);
  background-image: repeating-linear-gradient(
    to right,
    var(--rs-track-tick) 0 1px,
    transparent 1px 25%
  );
}

html.force-mobile .meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--rs-chart-3);
}

/* ---- 5.5 月历 ---- */
html.force-mobile .month-grid {
  gap: 6px;
}

html.force-mobile .calendar-day {
  height: auto;
  min-height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: var(--rs-radius-chip);
  background: var(--ds-surface-soft);
  color: var(--ds-text-secondary);
  font-size: 12px;
  border-color: transparent;
}

html.force-mobile .calendar-day.has {
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  border-color: transparent;
}

/* 有聚会的日子额外给一个点形标记（形状通道，不靠颜色） */
html.force-mobile .calendar-day .dot {
  width: 4px;
  height: 4px;
  margin-top: 3px;
  border-radius: 50%;
  background: currentColor;
}

html.force-mobile .calendar-day .tick {
  font-size: 10px;
  line-height: 1;
}

/* ============================================================
   6. 排行榜（首页 Tab 4）
   ============================================================ */

html.force-mobile .rank-list {
  margin-top: 10px;
  padding: 0 12px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
}

html.force-mobile .rank-row {
  min-height: 48px;
  gap: 12px;
  padding: 0 8px;
  border-top: 1px solid var(--ds-border);
}

html.force-mobile .rank-list .rank-row:first-child {
  border-top: 0;
}

/* 名次：右对齐成列（1 / 10 / 100 右侧齐平） */
html.force-mobile .rank-row .rank-num {
  flex: none;
  width: 20px;
  text-align: right;
  font-family: var(--ds-font-ui);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ds-text-tertiary);
}

html.force-mobile .rank-name {
  font-size: 13.5px;
  color: var(--ds-ink);
}

html.force-mobile .rank-who {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ds-text-tertiary);
}

html.force-mobile .rank-row .rank-value {
  flex: none;
  min-width: 4em;
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-ink);
}

/* ml 分榜：不再是独立的浅色块，与主榜同材质 */
html.force-mobile .rank-ml {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
}

html.force-mobile .rank-ml-head {
  margin-bottom: 2px;
}

html.force-mobile .rank-ml-head b {
  font-size: 13px;
}

html.force-mobile .rank-ml .rank-row {
  min-height: 42px;
}

/* 领奖台：高度差本身就是排名通道（1 名最高），颜色只做辅助
   ⚠️ `.podium` 是同名类：app.js:2002 的 themePodium()（聚会回顾页「领奖台」主题）
   也输出 .podium，但内部是 .p1/.p2/.p3 + .base 的小人台，由 ds-gather.css 负责。
   这里用 `.rank-switch ~` 限定到排行榜页（榜单切换条的后续兄弟），避免踩到回顾页；
   下面的 .podium-card* 天然安全——该类只存在于排行榜页。 */
html.force-mobile .rank-switch ~ .podium {
  gap: 8px;
}

html.force-mobile .podium-card {
  padding: 12px 6px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
}

html.force-mobile .podium-card.rank-1 {
  min-height: 112px;
}

html.force-mobile .podium-card.rank-2,
html.force-mobile .podium-card.rank-3 {
  min-height: 100px;
}

html.force-mobile .podium-medal {
  min-width: 22px;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  font-weight: 700;
}

html.force-mobile .podium-card b {
  font-size: 13px;
}

html.force-mobile .podium-value {
  font-size: 13px;
  font-weight: 650;
}

/* 我的排名：sticky 浮起层，阴影只给浮起层 */
html.force-mobile .my-rank {
  margin-top: 12px;
  padding: 11px 14px;
  gap: 10px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  box-shadow: var(--ds-shadow-floating);
}

html.force-mobile .my-rank b {
  font-size: 14px;
}

html.force-mobile .my-rank .muted {
  font-size: 11.5px;
  color: var(--ds-text-secondary);
}

/* 榜单切换条 */
html.force-mobile .rank-switch {
  padding: 8px 2px 0;
}

html.force-mobile :is(.member-tab, .rank-tab) {
  font-size: 12.5px;
  min-height: 40px;
}

/* ============================================================
   7. 成员图鉴
   ============================================================ */

html.force-mobile .member-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

html.force-mobile .member-card {
  gap: 4px;
  padding: 12px 6px 10px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}

html.force-mobile .member-card .avatar {
  width: 50px;
  height: 50px;
  font-size: 15px;
}

html.force-mobile .member-card b {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ds-ink);
}

html.force-mobile .member-who {
  font-size: 10px;
  color: var(--ds-text-tertiary);
}

html.force-mobile .member-card .muted {
  font-size: 10.5px;
  color: var(--ds-text-secondary);
}

/* 虚拟成员：底纹 + 虚线描边两个通道（昵称下方本来就有"虚拟成员"文字），
   不做冒犯性标识 */
html.force-mobile .member-card.virtual {
  background: var(--ds-surface-soft);
  border-style: dashed;
}

html.force-mobile .member-head {
  padding: 8px 2px 0;
}

/* ============================================================
   8. 个人页
   ============================================================ */

/* 头图：浅色青铜绿深底，深色换墨紫深底（深色下 --ds-bronze 是绿色，
   绿底配白字对比度不足，是"按钮发白廉价感"的同源问题） */
html.force-mobile .person-hero {
  padding: 0 16px 16px;
  color: var(--rs-hero-ink);
  background: linear-gradient(150deg, var(--rs-hero-from) 0%, var(--rs-hero-to) 100%);
}

/* ⚠️ .hero-id / .hero-meta / .hero-chip 是跨域同名类：
   app.js:1509 首页「进行中」主卡 .gather-hero 里也有 .hero-meta 与 .hero-chip
   （且那个 chip 是 .pill.green.hero-chip 带状态圆点）。
   本段一律带 .person-hero 前缀，禁止写裸 .hero-*，否则会同时踩到首页域。
   与 refine-home 约定：两边各自带 .person-hero / .gather-hero 前缀写。 */
html.force-mobile .person-hero .hero-id .avatar {
  box-shadow: 0 0 0 3px var(--rs-hero-ring), 0 8px 20px rgba(0, 0, 0, .25);
}

html.force-mobile .person-hero .hero-id b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}

html.force-mobile .person-hero .hero-id small {
  font-size: 12px;
  color: var(--rs-hero-ink);
  opacity: .82;
}

html.force-mobile .person-hero .hero-meta {
  gap: 8px;
  margin-top: 12px;
}

html.force-mobile .person-hero .hero-chip {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--rs-hero-chip-bg);
  border: 1px solid var(--rs-hero-chip-line);
  color: var(--rs-hero-ink);
}

/* 上浮信息卡 */
html.force-mobile .person-sheet {
  margin-top: -18px;
  padding: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

html.force-mobile .person-quote {
  padding: 2px 4px 12px;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.7;
  color: var(--ds-ink);
  border-bottom: 1px dashed var(--ds-border);
}

html.force-mobile .person-metrics {
  gap: 4px;
  padding-top: 12px;
}

html.force-mobile .person-metric b {
  font-size: 20px;
  font-weight: 650;
  color: var(--ds-ink);
}

/* 四格数据条只给第一个（累计杯数）强调色，其余墨色，避免四个红/琥珀数字 */
html.force-mobile .person-metric:first-child b {
  color: var(--ds-brand);
}

html.force-mobile .person-metric span {
  font-size: 10.5px;
  color: var(--ds-text-tertiary);
}

/* 资料键值表 */
html.force-mobile .kv-list {
  padding: 2px 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--rs-radius-row);
  box-shadow: none;
}

html.force-mobile .kv-row {
  min-height: 44px;
  padding: 10px 0;
  border-top: 1px solid var(--ds-border);
  font-size: 13px;
}

/* 只给标签列定宽：.kv-tag 也是 span，必须排除，否则标签被压成 76px */
html.force-mobile .kv-row > span:not(.kv-tag) {
  width: 76px;
  flex: none;
  font-size: 12px;
  color: var(--ds-text-secondary);
}

html.force-mobile .kv-row > b {
  font-weight: 600;
  color: var(--ds-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.force-mobile .kv-row > .kv-tag {
  flex: none;
  margin-left: 6px;
}

/* 近 30 天折线：与柱状图共用同一条图表色，趋势语言统一 */
html.force-mobile .line-path {
  stroke: var(--rs-chart-3);
  stroke-width: 2;
}

html.force-mobile .line-area {
  fill: var(--rs-chart-3);
  opacity: .12;
}

html.force-mobile .line-chart circle {
  fill: var(--rs-chart-3);
}

html.force-mobile :is(.line-axis, .line-labels) {
  font-size: 11px;
  color: var(--ds-text-tertiary);
}

/* 分组标题的呼吸：只在我负责的页面上下文里收紧，不全局改 .section-title */
html.force-mobile .page-head + .section-title {
  margin-top: 20px;
}

html.force-mobile :is(.me-list, .kv-list, .clamp-list, .panel) + .section-title {
  margin-top: 22px;
}

/* ============================================================
   9. 空态：不再是突兀的色块
   原来 .empty 是「浅底 + 虚线描边 + 40px 内边距」的一整块，
   在一屏卡片中间会被读成另一张卡片。这里在我负责的容器内改成
   无底无框的一段提示，占位图形缩小并降为三级色。
   ============================================================ */

html.force-mobile :is(.album-feed, .panel) .empty,
html.force-mobile .section-title + .empty {
  padding: 28px 16px;
  background: none;
  border: 0;
  color: var(--ds-text-secondary);
}

html.force-mobile :is(.album-feed, .panel) .empty .empty-art,
html.force-mobile .section-title + .empty .empty-art {
  width: 44px;
  height: 44px;
  border-radius: var(--rs-radius-row);
  background: var(--ds-surface-soft);
  color: var(--ds-text-tertiary);
}

/* ============================================================
   10. 焦点与动效
   ============================================================ */

html.force-mobile :is(
  .me-row,
  .msg-row,
  .member-card,
  .album-row,
  button.rank-row,
  .leader-row[data-action]
):focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  html.force-mobile :is(
    .me-row,
    .msg-row,
    .member-card,
    .album-row,
    button.rank-row
  ) {
    transition: none;
  }
}