/* ---
 * generated_by: kimi-k2.8 (Track C1 好友地基前端)
 * date: 2026-09-17
 * core_logic: #page-friends 好友页（搜索区/结果与好友行/两步删除确认/状态块）+ #page-settings
 *   「可被好友找到」开关 + #page-home 增长飞轮卡。视觉令牌全取 styles/tokens.css
 *   （纸墨/苔绿/陶锈），与全站 D26 语言一致；触控目标 ≥44px；:focus-visible 指示；
 *   390/1280 双断点（2026-09-18 拍板：reduce 分支全站移除，见 AGENTS.md 红线）。
 * --- */

/* === HOME 增长飞轮卡（今日气候槽之下、页脚之上；产品锁 GROWTH-FLYWHEEL-HOME §1） === */
#page-home .home-flywheel {
  margin-top: var(--reflect-space-32, 32px);
  padding: var(--reflect-space-24, 24px) var(--reflect-space-16, 16px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12, 12px);
}

#page-home .home-flywheel .section-h {
  font-family: var(--reflect-serif);
}

#page-home .home-flywheel-actions {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
}

#page-home .home-flywheel-actions .btn-primary,
#page-home .home-flywheel-actions .btn-ghost {
  min-height: 44px; /* 触控目标 */
  justify-content: center;
}

@media (min-width: 640px) {
  #page-home .home-flywheel-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* === #page-friends === */
#page-friends .friends-search {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  margin-top: var(--reflect-space-16, 16px);
}

#page-friends .friends-label {
  font-family: var(--reflect-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reflect-ink-soft);
}

#page-friends #friends-search-input {
  font-family: var(--reflect-sans);
  font-size: 16px;
  color: var(--reflect-ink);
  background: var(--reflect-paper-light);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  padding: 12px 14px;
  min-height: 44px; /* 触控目标 */
  width: 100%;
}

#page-friends #friends-search-input:focus-visible {
  outline: 2px solid var(--reflect-moss);
  outline-offset: 2px;
}

#page-friends .friends-hint,
#page-friends .friends-status-line {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

/* 2026-09-22 默认用户名拍板：自己的用户名行（口头/复制分享给朋友；名字用等宽体便于拼读） */
#page-friends #friends-own-username {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#page-friends #friends-own-username[hidden] { display: none; }
#page-friends #friends-own-username strong {
  font-family: var(--reflect-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--reflect-ink);
}
#page-friends #friends-own-username .friends-copy-username {
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--reflect-ink-soft);
  border-radius: 999px;
  background: transparent;
  font-family: var(--reflect-sans);
  font-size: 11px;
  color: var(--reflect-ink-soft);
  cursor: pointer;
}
#page-friends #friends-own-username .friends-copy-username:hover {
  border-color: var(--reflect-ink);
  color: var(--reflect-ink);
}

/* 搜索结果与好友列表共用行 */
#page-friends .friends-list,
#page-friends #friends-search-results {
  list-style: none;
  margin: var(--reflect-space-12, 12px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
}

#page-friends .friends-row {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  padding: var(--reflect-space-12, 12px) var(--reflect-space-16, 16px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

#page-friends .friends-row-name {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 17px;
  color: var(--reflect-ink);
}

#page-friends .friends-row-user {
  margin: 0;
  font-family: var(--reflect-mono, monospace);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

#page-friends .friends-row-three {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 13px;
  color: var(--reflect-ink);
}

#page-friends .friends-row-since {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

#page-friends .friends-add,
#page-friends .friends-remove {
  align-self: flex-start;
  min-height: 44px;
}

#page-friends .friends-remove.is-confirm {
  color: var(--reflect-rust);
  border-color: var(--reflect-rust);
}

#page-friends .friends-note {
  margin: var(--reflect-space-8, 8px) 0 0;
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-rust);
}

#page-friends .friends-list-title {
  margin-top: var(--reflect-space-24, 24px);
}

#page-friends .btn-ghost:focus-visible,
#page-friends .btn-primary:focus-visible {
  outline: 2px solid var(--reflect-moss);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  #page-friends .friends-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--reflect-space-16, 16px);
  }

  #page-friends .friends-add,
  #page-friends .friends-remove {
    flex: none;
  }
}

/* === #page-settings「可被好友找到」开关 === */
#page-settings .friends-discovery {
  margin-top: var(--reflect-space-8, 8px);
}

#page-settings .friends-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--reflect-space-12, 12px);
  min-height: 44px; /* 触控目标 */
  cursor: pointer;
}

#page-settings .friends-switch input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#page-settings .friends-switch-track {
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background: var(--reflect-line);
  position: relative;
  transition: background-color 150ms ease;
}

#page-settings .friends-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--reflect-paper-light);
  box-shadow: 0 1px 3px rgba(17, 24, 20, 0.25);
  transition: transform 150ms ease;
}

#page-settings .friends-switch input:checked + .friends-switch-track {
  background: var(--reflect-moss);
}

#page-settings .friends-switch input:checked + .friends-switch-track .friends-switch-knob {
  transform: translateX(20px);
}

#page-settings .friends-switch input:focus-visible + .friends-switch-track {
  outline: 2px solid var(--reflect-moss);
  outline-offset: 2px;
}

#page-settings .friends-switch input:disabled {
  cursor: default;
}

#page-settings .friends-switch input:disabled + .friends-switch-track {
  opacity: 0.5;
}

#page-settings .friends-switch-text {
  font-family: var(--reflect-sans);
  font-size: 15px;
  color: var(--reflect-ink);
}

#page-settings #friends-discovery-note {
  margin: var(--reflect-space-4, 4px) 0 0;
  font-family: var(--reflect-sans);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}

/* 390 窄屏：行内边距收紧，飞轮卡满宽 */
@media (max-width: 390px) {
  #page-home .home-flywheel {
    padding: var(--reflect-space-16, 16px) var(--reflect-space-12, 12px);
  }

  #page-friends .friends-row {
    padding: var(--reflect-space-12, 12px);
  }
}

/* 1280 宽屏：好友页与飞轮卡限阅读列宽 */
@media (min-width: 1280px) {
  #page-home .home-flywheel {
    max-width: 560px;
  }

  #page-friends .friends-search,
  #page-friends .friends-list,
  #page-friends #friends-search-results {
    max-width: 640px;
  }
}

/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */

/* ============================================================
 * F-21/F-22 修复（2026-09-22 需求实现走查）：设置页 username 输入行 + 好友请求收件箱
 * ============================================================ */

#page-settings .friends-username {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  margin-top: var(--reflect-space-16, 16px);
}

#page-settings .friends-username-edit {
  display: flex;
  align-items: center;
  gap: var(--reflect-space-8, 8px);
  max-width: 360px;
}

#page-settings .friends-username-at {
  font-family: var(--reflect-sans);
  color: var(--reflect-ink-soft, inherit);
}

#page-settings .friends-username-edit input {
  flex: 1;
  min-width: 0;
  font-family: var(--reflect-sans);
  padding: 8px 10px;
  border: 1px solid var(--reflect-line, currentColor);
  border-radius: var(--reflect-radius, 8px);
  background: transparent;
  color: inherit;
}

#page-friends #friends-inbox {
  margin-top: var(--reflect-space-16, 16px);
}

/* ============================================================
 * 任务F（2026-09-22）：设置页通知偏好/隐私区行内提示（note/hint 由 shell.js 控制显隐）
 * ============================================================ */

#page-settings .friends-note {
  margin: var(--reflect-space-8, 8px) 0 0;
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-rust);
}

#page-settings .friends-hint {
  margin: var(--reflect-space-8, 8px) 0 0;
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

/* ============================================================
 * FRIENDS F3（2026-10-08，图纸 friends_empty/invite/hub/entries.png）：
 * 空态 EROS 招待卡 + 邀请第三态 + hub 邀请再来/手动添加区 + 毛毡头像行 +
 * 首页 EROS 分流底板 + 卡牌分享 sheet + You 行头像叠（.home-eros* 基类在 home.css 全站复用）
 * ============================================================ */

/* 三态通用：块间距 + 行毛毡头像（44px 圆形，装饰分色） */
#page-friends [data-friends-state] {
  margin-top: var(--reflect-space-8, 8px);
}

#page-friends .friends-row-avatar,
#home-eros-picker .friends-row-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--reflect-line);
  background: var(--reflect-paper-light);
}

/* F3 毛毡首视灰→彩（notes F1：灰→原色交叉淡入 1.2s，只在第一次看到时播放）：
   friends-view.js paintLinks 装 IntersectionObserver，命中即上 .felt-on + unobserve，
   内存 flag 每页装载只装一次，重渲染直出原色不重播（零本地存储）。
   作用域只 #page-friends 列表行——#home-eros-picker 同类名不受影响；
   空态灰毡 felt-pair-waiting 本身即灰态素材，不加滤镜。
   红线：零 prefers-reduced-motion 分支（手册 PR-F3 明文）；零新颜色 token。 */
#page-friends .friends-row-avatar {
  filter: grayscale(1);
}

#page-friends .friends-row-avatar.felt-on {
  filter: grayscale(0);
  transition: filter 1.2s ease;
}

/* 列表行横向布局：头像 + 文 + 动作列（窄屏纵排回退沿用原 column） */
#page-friends #friends-links-list .friends-row .friends-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#page-friends .friends-compare {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 640px) {
  #page-friends .friends-compare {
    flex: none;
  }
}

/* 空态：EROS 招待卡（.home-eros 复用 home.css）+「别的加法」 */
#page-friends .fr-eros {
  display: block; /* 覆盖 .home-eros 的整卡链接布局：此处非链接，是展示容器 */
}

#page-friends .fr-eros .home-eros-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}

#page-friends .fr-other-ways {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: var(--reflect-space-12, 12px);
}

/* 邀请第三态：分享卡预览 + 动作行 + 三步 + 开关 */
#page-friends .fr-card {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12, 12px);
  padding: var(--reflect-space-16, 16px);
  margin-top: var(--reflect-space-16, 16px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

#page-friends .fr-card-art {
  position: relative;
  border-radius: var(--reflect-radius, 8px);
  overflow: hidden;
}

#page-friends .fr-card-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* 装饰插图防裁切（DESIGN.md 图片规则） */
}

#page-friends .fr-card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-4, 4px);
}

#page-friends .fr-card-copy strong {
  font-family: var(--reflect-serif);
  font-size: 17px;
  color: var(--reflect-ink);
}

#page-friends .fr-card-copy span {
  font-family: var(--reflect-sans);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}

#page-friends .fr-card-free {
  align-self: flex-start;
  margin-top: var(--reflect-space-4, 4px);
  padding: 2px 10px;
  border: 1px solid var(--reflect-moss);
  border-radius: 9999px;
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-moss);
  font-style: normal;
}

#page-friends .fr-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--reflect-space-8, 8px);
  margin-top: var(--reflect-space-16, 16px);
}

#page-friends .fr-invite-actions .btn-primary {
  min-height: 44px;
}

#page-friends .fr-steps {
  margin: var(--reflect-space-8, 8px) 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-6, 6px);
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-ink);
}

#page-friends .fr-toggle {
  display: flex;
  align-items: center;
  gap: var(--reflect-space-10, 10px);
  min-height: 44px; /* 触控目标 */
  margin-top: var(--reflect-space-16, 16px);
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-ink);
  cursor: pointer;
}

#page-friends .fr-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--reflect-moss);
}

#page-friends .fr-toggle input:disabled {
  cursor: default;
  opacity: 0.55;
}

#page-friends [data-friends-state="invite"] .friends-hint {
  margin-top: var(--reflect-space-8, 8px);
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

/* hub：邀请再来一张 + 手动添加区 */
#page-friends .fr-again {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  padding: var(--reflect-space-16, 16px);
  margin-top: var(--reflect-space-16, 16px);
  border: 1px dashed var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

#page-friends .fr-again p {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 13px;
  color: var(--reflect-ink-soft);
}

#page-friends .fr-again .btn-ghost {
  align-self: flex-start;
  min-height: 44px;
}

#page-friends .fr-custom {
  margin-top: var(--reflect-space-24, 24px);
}

#page-friends .fr-custom-add {
  display: flex;
  align-items: center;
  gap: var(--reflect-space-12, 12px);
  min-height: 56px;
  padding: var(--reflect-space-8, 8px) var(--reflect-space-12, 12px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
  text-decoration: none;
  color: inherit;
}

#page-friends .fr-custom-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--reflect-line);
  background: var(--reflect-paper);
}

#page-friends .fr-custom-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-friends .fr-custom-add span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--reflect-sans);
  font-size: 14px;
  color: var(--reflect-ink);
}

/* 首页 EROS 分流底板（#home-eros-picker，在 page-home；全站样式统一在本档收口） */
.fr-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 22, 17, 0.32);
}

.fr-picker[hidden] {
  display: none;
}

.fr-picker-card {
  width: min(420px, calc(100% - 24px));
  margin-bottom: 18px;
  padding: var(--reflect-space-16, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-10, 10px);
  background: var(--reflect-paper);
  border: 1px solid var(--reflect-line);
  border-radius: 14px 14px 12px 12px;
  box-shadow: 0 18px 40px rgba(15, 20, 16, 0.28);
}

.fr-picker-card .section-h {
  margin: 0;
}

#home-eros-picker .friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  max-height: 38dvh;
  overflow-y: auto;
}

#home-eros-picker .friends-row {
  display: flex;
  align-items: center;
  gap: var(--reflect-space-12, 12px);
  padding: var(--reflect-space-8, 8px) var(--reflect-space-12, 12px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

#home-eros-picker .friends-row-name {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 16px;
  color: var(--reflect-ink);
  text-decoration: none;
}

.fr-picker-card .btn-primary,
.fr-picker-card .btn-ghost {
  min-height: 44px;
  width: 100%;
}

/* 卡牌解读页分享片（#cards-share-sheet.fr-share-sheet，在 page-cards 读牌尾钩子下方内嵌展开） */
.fr-share-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8, 8px);
  padding: var(--reflect-space-16, 16px);
  margin-top: var(--reflect-space-12, 12px);
  border: 1px dashed var(--reflect-line);
  border-radius: var(--reflect-radius-md, 8px);
  background: var(--reflect-paper-light);
}

.fr-share-sheet[hidden] {
  display: none;
}

.fr-share-sheet .section-h,
.fr-share-sheet .body-p {
  margin: 0;
}

.fr-share-sheet .btn-primary,
.fr-share-sheet .btn-ghost {
  align-self: flex-start;
  min-height: 44px;
}

.fr-share-sheet #cards-share-note {
  margin: 0;
  font-family: var(--reflect-sans);
  font-size: 13px;
  color: var(--reflect-rust);
}

/* You 页好友行头像叠 + 计数（#page-you；配 you.css 的行布局） */
.you-felt-stack {
  display: inline-flex;
  align-items: center;
}

.you-felt-stack .you-felt-item {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--reflect-paper);
  margin-left: -7px;
}

.you-felt-stack .you-felt-item:first-child {
  margin-left: 0;
}

#page-you #you-friends-count {
  font-style: normal;
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}

/* 390 窄屏：邀请动作行纵排满宽 */
@media (max-width: 390px) {
  #page-friends .fr-invite-actions .btn-primary {
    width: 100%;
  }
}

/* ================= FRIENDS F3 补：按钮语言回归纸感色板（2026-10-08 视觉QA终裁） =================
   根因：index.html 内联脚手架 .btn-primary/.btn-ghost 是靛蓝（#4f46e5 文本/#eef2ff hover/
   #6366f1 焦点环），此前仅 home/crush/couple 页有作用域覆盖；friends 页全量按钮与 F3 新增
   cards 分享单裸吃脚手架，与冻结图纸 friends_invite.png（墨绿实心主钮+描边幽灵次钮，零靛蓝）
   冲突。配方=home.css 已证令牌写法；作用面钉在 F3 触达的 #page-friends 全页 + #cards-share-sheet，
   cards 页其余按钮（Draw your cards 等）留待卡片批统一，不在此扩散。 */
#page-friends .btn-primary,
#cards-share-sheet .btn-primary {
  min-height: 44px;             /* GC#7 触控目标 */
  padding: 0 20px;
  border: 1px solid var(--reflect-ink);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  font-family: var(--reflect-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--reflect-ease), border-color .18s var(--reflect-ease);
}
#page-friends .btn-primary:hover,
#cards-share-sheet .btn-primary:hover {
  background: var(--reflect-moss);
  border-color: var(--reflect-moss);
}
#page-friends .btn-primary[disabled],
#cards-share-sheet .btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
#page-friends .btn-primary[disabled]:hover,
#cards-share-sheet .btn-primary[disabled]:hover { background: var(--reflect-ink); border-color: var(--reflect-ink); }
#page-friends .btn-ghost,
#cards-share-sheet .btn-ghost {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: transparent;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--reflect-ease), color .18s var(--reflect-ease);
}
#page-friends .btn-ghost:hover,
#cards-share-sheet .btn-ghost:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#page-friends .btn-primary:focus-visible,
#page-friends .btn-ghost:focus-visible,
#cards-share-sheet .btn-primary:focus-visible,
#cards-share-sheet .btn-ghost:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}

/* ================= FRIENDS F4：分享卡预览 + 二维码底板（2026-10-08） =================
   预览=合成卡 1/4 等比缩略（270×480 canvas → 展示宽 150px），创建前由静态装饰卡占位，
   创建成功后 friends-view 切换；底板复用 fr-picker 骨架，img 走 image-rendering 保锐利模块。 */
#page-friends .fr-share-preview {
  width: 166px;
  margin: var(--reflect-space-12, 12px) auto var(--reflect-space-4, 4px);
  padding: 8px;
  border: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-lg, 12px);
  background: var(--reflect-paper-light);
}
#page-friends .fr-share-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
#page-friends .fr-qr-sheet .fr-picker-card {
  align-items: center;
}
#page-friends .fr-qr-sheet img {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  image-rendering: pixelated;
}

/* ================= FRIENDS F4 ⑥：邀请态接管 + 返回链 token 化（2026-10-08 视觉 QA 裁决）
   图纸 friends_invite＝邀请子视图整体接管面板（顶部只剩它自己的返回链）；实现先前保留了
   页头三件（返回/大标题/导语）→ 双返回链。包 .fr-page-head 由 render() 隐显。
   返回链：scaffold .back-link 兜底是 indigo 系（同 ⑨ 按钮泄漏一类），照 chart.css 模式
   本页覆写为 ink-soft/mono；页头/邀请子视图两条都吃。 */
#page-friends .fr-page-head {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 复刻 .page-pad 的列间节奏（包层后外层 gap 仍在，视觉零变化） */
}
#page-friends .fr-page-head[hidden] {
  display: none; /* flex 规则会顶掉 UA 的 [hidden] 隐藏，须显式守卫 */
}
#page-friends .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s var(--reflect-ease);
}
#page-friends .back-link:hover {
  color: var(--reflect-ink);
}

/* ================= FRIENDS F5：手动添加的人列表（图纸 friends_hub，2026-10-08） =================
   行=蚀刻方头像+名+「☉ 日 › 月 ↑ 升」小字（星名=服务端正名，全站惯例）+右侧解锁态；
   锁定=「Full chart/$1.49」两行价签（价与 catalog 同源 USD，不走 i18n）；
   解锁=moss「Unlocked」。添加行=虚线圈+副题，列表空/非空常驻（图纸同序：行在上、添加行在下）。 */
#page-friends .fr-custom-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#page-friends .fr-custom-head .section-h {
  margin: 0;
}
#page-friends .fr-custom-count {
  font-family: var(--reflect-mono);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}
#page-friends .fr-custom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--reflect-hairline);
  text-decoration: none;
  color: inherit;
}
#page-friends .fr-custom-row .entry-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-friends .fr-custom-row strong {
  font-family: var(--reflect-sans);
  font-size: 15px;
  color: var(--reflect-ink);
}
#page-friends .fr-custom-bt {
  font-family: var(--reflect-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--reflect-rust);
}
#page-friends .fr-custom-side {
  flex: none;
  text-align: right;
  font-family: var(--reflect-mono);
}
#page-friends .fr-custom-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--reflect-ink-soft);
}
#page-friends .fr-custom-price b {
  font-size: 13px;
  font-weight: 600;
  color: var(--reflect-rust);
}
#page-friends .fr-custom-unlocked {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--reflect-moss);
}
#page-friends .fr-custom-add-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px dashed var(--reflect-ink-soft);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--reflect-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--reflect-ink-soft);
}
#page-friends .fr-custom-add-sub {
  font-family: var(--reflect-sans);
  font-size: 12px;
  color: var(--reflect-ink-soft);
}