/* ============================================================
   Ourtennis 论坛 - 运动风（court blue + 网球黄 + 红土）
   设计语言：场地蓝主色 / 网球黄高光 / 红土暖点缀 / 球缝弧线点缀 / 计分牌字体
   保留弹性动画与微互动
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* —— 主色板：球场蓝 + 网球黄 + 红土 —— */
  --f-bg:           #F4F6FA;      /* 冷净白底 */
  --f-bg-elevated:  #FFFFFF;
  --f-bg-soft:      #EDF1F7;      /* 浅冷次级背景 */

  --f-primary:      #1F3A68;      /* 深 court 蓝（硬地球场） */
  --f-primary-soft: #2C4F8C;
  --f-primary-tint: #DBE5F2;

  --f-tennis:       #D7E64A;      /* 网球黄（真实网球色，比 #DCFF1A 略沉） */
  --f-tennis-soft:  #EEF5B1;
  --f-tennis-deep:  #B5C234;

  --f-clay:         #C9683D;      /* 红土 (Roland-Garros) */
  --f-clay-soft:    #F4D9C9;
  --f-clay-deep:    #A8512E;

  --f-grass:        #2F7A4D;      /* 草地绿 (Wimbledon-ish) */
  --f-grass-soft:   #D2EAD9;      /* 草地浅 */
  --f-grass-deep:   #1F5A37;

  --f-text:         #0F1E3D;
  --f-text-soft:    #3A4663;
  --f-text-muted:   #6B7588;
  --f-text-faint:   #B0B7C5;

  --f-border:       rgba(15, 30, 61, .10);
  --f-border-strong:rgba(15, 30, 61, .18);
  --f-divider:      rgba(15, 30, 61, .07);

  --f-success:      #058C5A;
  --f-warn:         #C9683D;
  --f-danger:       #C9303D;

  /* —— 字体 —— */
  --f-font-display: 'Plus Jakarta Sans', -apple-system, 'PingFang SC', sans-serif;
  --f-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --f-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* —— 度量 —— */
  --f-topbar-h:     64px;       /* 顶栏实际高度（板块导航 sticky 锚点） */
  --f-radius-xs:    6px;
  --f-radius:       12px;
  --f-radius-lg:    18px;
  --f-radius-pill:  999px;

  /* —— 阴影 —— */
  --f-shadow-blue:  0 6px 22px -10px rgba(31, 58, 104, .35);
  --f-shadow-yellow:0 6px 22px -8px rgba(181, 194, 52, .4);
  --f-shadow-grass: 0 6px 22px -10px rgba(47, 122, 77, .35);
  --f-shadow-clay:  0 6px 22px -10px rgba(201, 104, 61, .35);
  --f-shadow-soft:  0 4px 16px -6px rgba(15, 30, 61, .14);
  --f-shadow-pop:   0 12px 32px -12px rgba(15, 30, 61, .25);

  --f-shell-w:      1020px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(ellipse 600px 320px at 0% -10%, rgba(31, 58, 104, .07), transparent 70%),
    radial-gradient(ellipse 500px 320px at 100% 0%, rgba(215, 230, 74, .14), transparent 70%),
    var(--f-bg);
  background-attachment: fixed;
  color: var(--f-text);
  font-family: var(--f-font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body { font-size: 15px; line-height: 1.6; }
a { color: var(--f-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--f-primary-soft); }
button { font-family: inherit; }

/* ===== 网球球缝弧线（装饰用 SVG class） ===== */
.f-tennis-seam {
  display: inline-block;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, var(--f-tennis) 0%, var(--f-tennis-deep) 70%, var(--f-tennis-deep) 100%);
  border-radius: 50%;
  position: relative; overflow: hidden;
}
.f-tennis-seam::before,
.f-tennis-seam::after {
  content: ''; position: absolute;
  width: 200%; height: 200%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  top: 50%; left: 50%;
  pointer-events: none;
}
.f-tennis-seam::before { transform: translate(-50%, -130%); }
.f-tennis-seam::after  { transform: translate(-50%, 30%); }

/* ===== 顶栏 ===== */
.f-topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 246, 250, .85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--f-border);
}
.f-topbar-inner {
  max-width: var(--f-shell-w);
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
}
.f-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--f-text-muted); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--f-radius-pill);
  transition: background .15s, color .15s, transform .15s;
}
.f-back:hover {
  background: var(--f-primary-tint); color: var(--f-primary);
  transform: translateX(-2px);
}
.f-back-text { font-size: 13px; }
.f-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-font-display);
  font-weight: 800; font-size: 21px;
  color: var(--f-primary);
  letter-spacing: -0.02em;
}
.f-logo::before {
  content: ''; width: 22px; height: 22px;
  background: radial-gradient(circle, var(--f-tennis) 0%, var(--f-tennis-deep) 80%);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7),
              0 2px 6px rgba(181, 194, 52, .35);
  animation: ball-bounce 2.4s ease-in-out infinite;
}
@keyframes ball-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-3px) rotate(-12deg); }
  75%      { transform: translateY(-3px) rotate(12deg); }
}
.f-logo-text {
  letter-spacing: -0.015em;
}
.f-spacer { flex: 1; }

.f-lang-switch {
  display: inline-flex; gap: 2px; align-items: center;
  padding: 3px;
  background: var(--f-bg-soft);
  border-radius: var(--f-radius-pill);
  border: 1px solid var(--f-border);
}
.f-lang-switch-icon {
  font-size: 12px; line-height: 1;
  padding: 0 4px 0 6px;
  color: var(--f-text-muted);
  user-select: none;
}
.f-lang-btn {
  background: none; border: none;
  padding: 5px 14px; border-radius: var(--f-radius-pill);
  font-size: 12px; font-weight: 700;
  color: var(--f-text-muted); cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.f-lang-btn:hover { color: var(--f-text); }
.f-lang-btn.active {
  background: var(--f-primary); color: #fff;
  box-shadow: var(--f-shadow-blue);
}

#f-user-area .f-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px; border-radius: var(--f-radius-pill);
  border: 1px solid var(--f-border); background: var(--f-bg-elevated);
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--f-text);
  transition: all .2s;
}
#f-user-area .f-user-btn:hover {
  border-color: var(--f-primary); transform: translateY(-1px);
  box-shadow: var(--f-shadow-blue);
}
#f-user-area .f-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-soft)) center/cover no-repeat;
  position: relative;
  flex: 0 0 auto;
}

/* 未登录态 CTA：对称 padding + 实心主色 + 更厚视觉重量 */
#f-user-area .f-user-btn--cta {
  padding: 8px 18px;                       /* 对称 padding，"登录"二字真正居中 */
  gap: 6px;
  background: linear-gradient(135deg, var(--f-primary) 0%, var(--f-primary-soft) 100%);
  border-color: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  box-shadow: 0 4px 14px -4px rgba(31, 58, 104, .45), 0 1px 2px rgba(31, 58, 104, .25);
}
#f-user-area .f-user-btn--cta:hover {
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(31, 58, 104, .55), 0 2px 4px rgba(31, 58, 104, .3);
  filter: brightness(1.08);
}
#f-user-area .f-user-btn--cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px rgba(31, 58, 104, .4);
}
#f-user-area .f-user-btn--cta:focus-visible {
  outline: 2px solid var(--f-primary-tint);
  outline-offset: 2px;
}
#f-user-area .f-user-btn-icon {
  flex: 0 0 auto;
  opacity: .92;
}

/* ===== 板块导航 ===== */
.f-boards-nav {
  position: sticky;
  top: var(--f-topbar-h, 64px);
  z-index: 99;
  background: rgba(244, 246, 250, .85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--f-border);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.f-boards-nav::-webkit-scrollbar { display: none; }
.f-boards-nav-inner {
  max-width: var(--f-shell-w);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex; gap: 6px;
}
.f-board-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--f-radius-pill);
  background: var(--f-bg-elevated);
  color: var(--f-text); font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--f-border);
  transition: all .2s;
  font-family: inherit;
}
.f-board-chip:hover {
  border-color: var(--f-primary);
  background: var(--f-primary-tint);
}
.f-board-chip.active {
  background: var(--f-primary); color: #fff;
  border-color: var(--f-primary);
  box-shadow: var(--f-shadow-blue);
}
.f-board-chip.active:hover { background: var(--f-primary-soft); }
.f-board-chip .badge {
  font-size: 11px; font-weight: 700;
  font-family: var(--f-font-mono);
  padding: 1px 7px; border-radius: var(--f-radius-pill);
  background: var(--f-tennis-soft); color: var(--f-text);
}
.f-board-chip.active .badge {
  background: var(--f-tennis); color: var(--f-text);
}

/* ===== 浮动发帖按钮（FAB） =====
   - 仅在板块/装备页且锚定的"发帖/写评测"按钮滚出视口时显示
   - 视觉对齐 .f-btn-primary：court 蓝 + --f-shadow-blue
   - 桌面 hover 从圆形扩成药丸露出文字；窄屏固定圆形 */
.f-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;                 /* 低于顶栏(100)/板块导航(99)，远低于 overlay */
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  padding: 0 14px;
  border-radius: var(--f-radius-pill);
  background: var(--f-primary);
  color: #fff;
  border: 1px solid var(--f-primary);
  box-shadow: var(--f-shadow-blue);
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    width .26s cubic-bezier(.34, 1.2, .54, 1),
    padding .26s cubic-bezier(.34, 1.2, .54, 1),
    opacity .22s ease,
    transform .22s ease,
    background .15s,
    box-shadow .2s;
  overflow: hidden;
  white-space: nowrap;
}
.f-fab[hidden] { display: none; }
.f-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.f-fab-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  transition: transform .26s cubic-bezier(.34, 1.2, .54, 1);
}
.f-fab-plus svg { display: block; }
.f-fab-label {
  font-size: 14px; font-weight: 700;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transition:
    max-width .26s cubic-bezier(.34, 1.2, .54, 1),
    opacity .18s ease,
    margin-left .26s cubic-bezier(.34, 1.2, .54, 1);
}
/* 桌面 hover/focus：展开露出文字 */
@media (hover: hover) {
  .f-fab:hover,
  .f-fab:focus-visible {
    width: auto;
    padding: 0 18px 0 14px;
    background: var(--f-primary-soft);
    box-shadow: 0 10px 26px -8px rgba(31, 58, 104, .45);
  }
  .f-fab:hover .f-fab-plus,
  .f-fab:focus-visible .f-fab-plus {
    transform: rotate(90deg);
  }
  .f-fab:hover .f-fab-label,
  .f-fab:focus-visible .f-fab-label {
    max-width: 120px;
    opacity: 1;
    margin-left: 6px;
  }
}
.f-fab:focus-visible { outline: none; }
.f-fab:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .f-fab {
    right: 16px; bottom: 16px;
    width: 44px; height: 44px;
    padding: 0;
  }
  .f-fab-plus { width: 18px; height: 18px; }
}

/* ===== 主体 ===== */
main#f-content {
  max-width: var(--f-shell-w);
  margin: 0 auto;
  padding: 32px 24px 100px;
  min-height: calc(100vh - 130px);
}

/* ===== 首页 Hero（对称双 mascot + 中央文字）===== */
.f-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 360px 240px at 50% 110%, rgba(215, 230, 74, .22), transparent 70%),
    radial-gradient(ellipse 320px 220px at 0% 0%, rgba(47, 122, 77, .12), transparent 70%),
    radial-gradient(ellipse 320px 220px at 100% 0%, rgba(31, 58, 104, .10), transparent 70%),
    linear-gradient(135deg, var(--f-bg-elevated) 0%, var(--f-bg-soft) 100%);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  position: relative;
  overflow: hidden;
}
/* 中下球场底线 */
.f-hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 10px;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--f-tennis-deep), transparent);
  opacity: .35;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* 中央文字 */
.f-hero-text {
  min-width: 0;
  text-align: center;
  position: relative; z-index: 1;
  padding: 0 6px;
}
.f-hero-text h1 {
  font-family: var(--f-font-display);
  font-size: 30px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  color: var(--f-text);
  line-height: 1.1;
  background: linear-gradient(135deg, var(--f-primary), var(--f-grass));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f-hero-text p {
  margin: 0 0 18px;
  font-size: 15px; color: var(--f-text-muted);
  font-weight: 500;
}
/* 两侧人物（对称）*/
.f-hero-mascot {
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
.f-hero-mascot img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(31, 58, 104, .14));
}
/* 左右浮动反相（一上一下，像在对打）*/
.f-hero-mascot--left img  { animation: hero-mascot-float-l 4s ease-in-out infinite; }
.f-hero-mascot--right img { animation: hero-mascot-float-r 4s ease-in-out infinite; }
@keyframes hero-mascot-float-l {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-7px) rotate(-2deg); }
}
@keyframes hero-mascot-float-r {
  0%, 100% { transform: translateY(-7px) rotate(2deg); }
  50%      { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .f-hero-mascot img { animation: none; }
}

/* ===== 首页：板块大卡 + 最新动态 ===== */
.f-home-section { margin-bottom: 44px; }
.f-home-section h2 {
  font-family: var(--f-font-display);
  font-size: 22px; font-weight: 800;
  margin: 0 0 18px;
  color: var(--f-text);
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 12px;
}
.f-home-section h2::before {
  content: ''; width: 4px; height: 22px;
  background: linear-gradient(180deg, var(--f-grass), var(--f-tennis));
  border-radius: var(--f-radius-pill);
}

/* —— 板块大卡（可爱风动画 + 草地绿支线 + 自制 SVG 图标） —— */
.f-board-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.f-board-card {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  padding: 22px;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.34, 1.5, .64, 1),
              border-color .2s, box-shadow .2s;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  overflow: hidden;
}
/* 卡片背景水印：真实球拍图 (CC0 Wikimedia, 用 mask 上色按 slug 主题)
   来源: https://commons.wikimedia.org/wiki/File:Tennis_racquet.svg (CC0) */
.f-board-card-bg {
  position: absolute;
  bottom: -36px; right: -42px;
  width: 220px; height: 220px;
  background-color: var(--f-primary);
  -webkit-mask-image: url('/forum/assets/racquet.svg');
          mask-image: url('/forum/assets/racquet.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom right;
          mask-position: bottom right;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .085;
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.5, .64, 1);
  transform: rotate(-12deg);
  transform-origin: bottom right;
}

.f-board-card:hover {
  border-color: var(--f-primary);
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: var(--f-shadow-pop);
}
.f-board-card:nth-child(2n):hover { transform: translateY(-4px) rotate(0.6deg); }
.f-board-card:hover .f-board-card-bg {
  opacity: .14;
  transform: rotate(-18deg) translate(-4px, -4px);
}

/* 按 slug 给背景水印上色（继承图标主色） */
.f-board-card--gear   .f-board-card-bg { background-color: var(--f-primary); }
.f-board-card--meetup .f-board-card-bg { background-color: var(--f-clay-deep); }
.f-board-card--skills .f-board-card-bg { background-color: var(--f-grass-deep); }
.f-board-card--events .f-board-card-bg { background-color: var(--f-tennis-deep); }
.f-board-card--lounge .f-board-card-bg { background-color: var(--f-text-soft); }
.f-board-card--feedback .f-board-card-bg { background-color: var(--f-primary-soft); }

/* 装备评测卡：把底部水印的剪影换成 zhuangbei 整套装备，
   并沿用上一版彩图的位置/尺寸（贴右下、240×180、不旋转）。
   仍走 mask 路径让剪影染主色，保持水印质感；卡片尺寸与文字换行不动。
   实际 slug 带 region 后缀 (gear-cn / gear-global)，用前缀匹配统一覆盖。 */
[class*="f-board-card--gear"] .f-board-card-bg {
  -webkit-mask-image: url('/forum/assets/zhuangbei.png');
          mask-image: url('/forum/assets/zhuangbei.png');
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: 240px; height: 180px;
  bottom: 4px; right: 4px;
  transform: rotate(0deg);
}
[class*="f-board-card--gear"]:hover .f-board-card-bg {
  transform: translate(-4px, -4px) scale(1.04);
}

/* 技术交流卡：底部水印剪影换成 boy2（与装备评测卡同款做法），
   走 mask 路径让剪影染 grass-deep 主色，保持水印质感。
   slug 带 region 后缀 (skills-cn / skills-global)，用前缀匹配统一覆盖。 */
[class*="f-board-card--skills"] .f-board-card-bg {
  -webkit-mask-image: url('/forum/assets/boy2.png');
          mask-image: url('/forum/assets/boy2.png');
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: 200px; height: 200px;
  bottom: -24px; right: 4px;
  transform: rotate(0deg);
}
[class*="f-board-card--skills"]:hover .f-board-card-bg {
  transform: translate(-4px, -4px) scale(1.04);
}

/* 休闲灌水卡：底部水印剪影换成 talk（与装备评测/技术交流同款做法），
   走 mask 路径让剪影染 text-soft 主色，保持水印质感。
   slug 带 region 后缀 (lounge-cn / lounge-global)，用前缀匹配统一覆盖。 */
[class*="f-board-card--lounge"] .f-board-card-bg {
  -webkit-mask-image: url('/forum/assets/talk.png');
          mask-image: url('/forum/assets/talk.png');
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  width: 220px; height: 180px;
  bottom: 4px; right: 4px;
  transform: rotate(0deg);
}
[class*="f-board-card--lounge"]:hover .f-board-card-bg {
  transform: translate(-4px, -4px) scale(1.04);
}

/* Feedback card: dedicated suggestion silhouette watermark. */
[class*="f-board-card--feedback"] .f-board-card-bg {
  -webkit-mask-image: url('/forum/assets/feedback-silhouette.png');
          mask-image: url('/forum/assets/feedback-silhouette.png');
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  width: 230px; height: 210px;
  bottom: -28px; right: -2px;
  transform: rotate(0deg);
}
[class*="f-board-card--feedback"]:hover .f-board-card-bg {
  transform: translate(-4px, -4px) scale(1.04);
}

/* Events card: dedicated match-watching silhouette watermark. */
[class*="f-board-card--events"] .f-board-card-bg {
  -webkit-mask-image: url('/forum/assets/events-silhouette.png');
          mask-image: url('/forum/assets/events-silhouette.png');
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  width: 230px; height: 190px;
  bottom: 0; right: 0;
  transform: rotate(0deg);
}
[class*="f-board-card--events"]:hover .f-board-card-bg {
  transform: translate(-4px, -4px) scale(1.04);
}

.f-board-card-head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-font-display);
  font-size: 20px; font-weight: 700;
  color: var(--f-text); letter-spacing: -0.01em;
  padding-left: 8px;
  position: relative; z-index: 1;
}

/* —— 规划中标签：板块卡右上角小胶囊 —— */
.f-board-planning-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--f-font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  color: var(--f-clay-deep);
  background: var(--f-clay-soft);
  padding: 3px 9px;
  border-radius: var(--f-radius-pill);
  white-space: nowrap;
}
/* 规划中卡片整体降低存在感（仍可点击触发 toast） */
.f-board-card--planning .f-board-card-stats {
  background: transparent;
  color: var(--f-text-muted);
  padding-left: 0;
  letter-spacing: 0;
  text-transform: none;
}

/* —— 图标方框：圆角方 + 浅色底 + 同色描边图标 —— */
.f-board-card-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--f-primary-tint);
  color: var(--f-primary);
  position: relative;
  transition: transform .35s cubic-bezier(.34, 1.5, .64, 1);
}
.f-board-card:hover .f-board-card-icon { transform: rotate(-6deg) scale(1.06); }
.f-board-card:nth-child(2n):hover .f-board-card-icon { transform: rotate(6deg) scale(1.06); }
.f-board-card-icon svg { width: 24px; height: 24px; }

/* —— 按板块 slug 上色 —— */
.f-board-card--gear   .f-board-card-icon { background: var(--f-primary-tint); color: var(--f-primary); }
.f-board-card--meetup .f-board-card-icon { background: var(--f-clay-soft);    color: var(--f-clay-deep); }
.f-board-card--skills .f-board-card-icon { background: var(--f-grass-soft);   color: var(--f-grass-deep); }
.f-board-card--events .f-board-card-icon { background: var(--f-tennis-soft);  color: var(--f-tennis-deep); }
.f-board-card--lounge .f-board-card-icon { background: var(--f-bg-soft);      color: var(--f-text-soft); }
.f-board-card--feedback .f-board-card-icon { background: var(--f-primary-tint); color: var(--f-primary-soft); }

/* —— 同步：hover 时卡边框颜色随图标主色调 —— */
.f-board-card--meetup:hover { border-color: var(--f-clay); }
.f-board-card--skills:hover { border-color: var(--f-grass); }
.f-board-card--events:hover { border-color: var(--f-tennis-deep); }
.f-board-card--lounge:hover { border-color: var(--f-text-muted); }
.f-board-card--feedback:hover { border-color: var(--f-primary-soft); }

.f-board-card-desc {
  margin-top: 12px; font-size: 14px; color: var(--f-text-muted);
  line-height: 1.55; padding-left: 8px;
  position: relative; z-index: 1;
  flex: 1 1 auto;
}
.f-board-card-stats {
  margin-top: 16px; font-size: 11px; color: var(--f-text-soft);
  font-weight: 700; font-family: var(--f-font-sans);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: var(--f-radius-pill);
  background: var(--f-bg-soft);
  display: inline-block;
  align-self: flex-start;
  letter-spacing: .04em;
  margin-left: 8px;
  position: relative; z-index: 1;
}

/* ===== 帖子卡片（列表用） ===== */
.f-post-list {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  overflow: hidden;
}
.f-post-row {
  display: flex; gap: 14px; padding: 18px 20px;
  border-bottom: 1px solid var(--f-divider);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.f-post-row:last-child { border-bottom: none; }
.f-post-row:hover { background: var(--f-bg-soft); }
.f-post-row::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  background: var(--f-primary); border-radius: 0 3px 3px 0;
  opacity: 0; transition: opacity .15s;
}
.f-post-row:hover::before { opacity: 1; }
.f-post-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-soft)) center/cover no-repeat;
  flex-shrink: 0;
  border: 2px solid var(--f-bg-elevated);
  box-shadow: 0 2px 6px rgba(15, 30, 61, .12);
  position: relative;
}
.f-post-avatar.f-avatar-admin {
  border-color: #fff;
  box-shadow:
    0 0 0 1px rgba(15, 30, 61, .18),
    0 4px 10px rgba(15, 30, 61, .16);
}
.f-post-avatar.f-avatar-admin::before {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 82% 58% at 50% -18%, transparent 58%, rgba(255,255,255,.92) 60% 66%, transparent 68%),
    radial-gradient(ellipse 82% 58% at 50% 118%, transparent 58%, rgba(255,255,255,.86) 60% 66%, transparent 68%),
    radial-gradient(circle at 34% 28%, #f8ff9a 0 14%, var(--f-tennis) 15% 58%, var(--f-tennis-deep) 100%);
  box-shadow:
    0 0 0 2px #fff,
    0 2px 6px rgba(15, 30, 61, .22);
}
.f-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  margin-left: 6px;
  padding: 2px 9px 2px 4px;
  border-radius: var(--f-radius-pill);
  border: 1px solid rgba(31, 58, 104, .18);
  background: rgba(255,255,255,.78);
  color: var(--f-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15, 30, 61, .08);
}
.f-admin-badge::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  background:
    radial-gradient(ellipse 82% 58% at 50% -18%, transparent 58%, rgba(255,255,255,.92) 60% 66%, transparent 68%),
    radial-gradient(ellipse 82% 58% at 50% 118%, transparent 58%, rgba(255,255,255,.86) 60% 66%, transparent 68%),
    radial-gradient(circle at 34% 28%, #f8ff9a 0 14%, var(--f-tennis) 15% 58%, var(--f-tennis-deep) 100%);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(31, 58, 104, .2),
    inset 0 -1px 1px rgba(15,30,61,.16);
}
.f-admin-badge--compact {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-left: 4px;
  padding: 0;
  gap: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  overflow: visible;
}
.f-admin-badge--compact::before {
  width: 15px;
  height: 15px;
}
.f-post-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;   /* 让 meta 能用 margin-top:auto 贴底 */
}
.f-post-title {
  font-family: var(--f-font-display);
  font-size: 16px; font-weight: 700;
  color: var(--f-text); line-height: 1.4;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.f-post-excerpt {
  margin-top: 5px; font-size: 13.5px; color: var(--f-text-muted);
  line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.f-post-meta {
  /* margin-top:auto 把 meta 推到 main 列底部（当右侧 thumb 比内容高时不再悬浮居中） */
  margin-top: auto; padding-top: 8px;
  display: flex; gap: 10px;
  font-size: 12px; color: var(--f-text-muted);
  flex-wrap: wrap; align-items: center; font-weight: 600;
}
.f-post-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.f-post-meta .stat-num {
  font-family: var(--f-font-mono); font-weight: 700; color: var(--f-text-soft);
}
.f-post-flag {
  display: inline-block; font-size: 10px;
  padding: 2px 8px; border-radius: var(--f-radius-xs);
  vertical-align: middle; font-weight: 800;
  background: var(--f-tennis); color: var(--f-text);
  text-transform: uppercase; letter-spacing: .05em;
  margin-right: 6px;
}
.f-post-flag.featured { background: var(--f-clay); color: #fff; }
.f-post-flag.locked { background: var(--f-text-faint); color: #fff; }
.f-post-tr-badge {
  display: inline-block; font-size: 11px; margin-left: 6px;
  vertical-align: middle; opacity: .6; cursor: help;
}

/* ===== 帖子图片槽 (.f-post-cover-slot) =====
   两种布局：
   - hero：放卡片下方，全宽；用于装备/技术/赛事板块（视觉重）
   - thumb：放卡片右侧 96×96；用于闲聊/约球板块（轻量）
   网格数（n1/n2/n3/n4）通过 modifier class 切换。
*/
.f-post-cover-slot {
  --f-cover-radius: 8px;
  --f-cover-gap: 3px;
  position: relative;
  display: grid;
  gap: var(--f-cover-gap);
  background: var(--f-bg-soft);
  border-radius: var(--f-cover-radius);
  overflow: hidden;
}
.f-post-cover-cell {
  position: relative;
  background: var(--f-bg-soft);
  overflow: hidden;
  min-height: 0; min-width: 0;
}
.f-post-cover-cell img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;             /* 不裁切：按比例缩略，缺口由 slot 背景填充 */
  transition: transform .35s ease;
}
.f-post-row:hover .f-post-cover-cell img { transform: scale(1.03); }
.f-post-cover-cell img.is-broken { opacity: .25; }
.f-post-cover-more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  font-family: var(--f-font-display);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* Hero 布局：下方全宽，按图数选不同比例；max-height 兜底避免单张竖图把 feed 撑爆 */
.f-post-cover-slot--hero {
  margin-top: 10px;
  width: 100%;
  max-height: 280px;             /* 桌面绝对高度兜底 */
  overflow: hidden;
}
/* 单图：不强制比例，由图自身决定（封顶 240px），居中显示，不裁切 */
.f-post-cover-slot--hero.f-post-cover-slot--n1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  max-height: 240px;
}
.f-post-cover-slot--hero.f-post-cover-slot--n1 .f-post-cover-cell {
  width: auto; max-width: 100%;
  height: auto; max-height: 240px;
  background: transparent;
}
.f-post-cover-slot--hero.f-post-cover-slot--n1 .f-post-cover-cell img {
  width: auto; height: auto;
  max-width: 100%; max-height: 240px;
}
.f-post-cover-slot--hero.f-post-cover-slot--n2 {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 21 / 9;
}
.f-post-cover-slot--hero.f-post-cover-slot--n3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 9;
}
.f-post-cover-slot--hero.f-post-cover-slot--n3 .f-post-cover-cell:first-child {
  grid-row: span 2;
}
.f-post-cover-slot--hero.f-post-cover-slot--n4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 9;
}

/* Thumb 布局：右侧缩略，固定方形宽，纵向自适应 */
.f-post-cover-slot--thumb {
  width: 96px; height: 96px;
  flex-shrink: 0;
  align-self: center;
}
.f-post-cover-slot--thumb.f-post-cover-slot--n1 { grid-template-columns: 1fr; }
.f-post-cover-slot--thumb.f-post-cover-slot--n2,
.f-post-cover-slot--thumb.f-post-cover-slot--n3,
.f-post-cover-slot--thumb.f-post-cover-slot--n4 {
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.f-post-cover-slot--thumb.f-post-cover-slot--n2 .f-post-cover-cell:first-child {
  grid-column: span 2;
}
.f-post-cover-slot--thumb.f-post-cover-slot--n3 .f-post-cover-cell:first-child {
  grid-row: span 2;
}

/* Feed 布局：首页"最新动态"专用 —— 参考装备列表 .f-gear-thumb 但放大以增加展示面积
   桌面 96×96 / 移动 80×80（移动端覆盖在 @media 块）*/
.f-post-cover-slot--feed {
  width: 96px; height: 96px;
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--f-radius);
  border: 1px solid var(--f-divider);
  background: var(--f-bg-soft);
  overflow: hidden;
}
.f-post-cover-slot--feed .f-post-cover-cell { background: transparent; }
.f-post-cover-slot--feed.f-post-cover-slot--n1 { grid-template-columns: 1fr; }
.f-post-cover-slot--feed.f-post-cover-slot--n2,
.f-post-cover-slot--feed.f-post-cover-slot--n3,
.f-post-cover-slot--feed.f-post-cover-slot--n4 {
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.f-post-cover-slot--feed.f-post-cover-slot--n2 .f-post-cover-cell:first-child {
  grid-column: span 2;
}
.f-post-cover-slot--feed.f-post-cover-slot--n3 .f-post-cover-cell:first-child {
  grid-row: span 2;
}
.f-post-cover-slot--feed .f-post-cover-more { font-size: 15px; }

/* 当 row 带 thumb 时，主区域留出右侧空间感（gap 已经够） */
.f-post-row--with-thumb { align-items: stretch; }

/* ===== 工具栏 ===== */
.f-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  flex-wrap: wrap;
}
.f-toolbar h2 {
  font-family: var(--f-font-display);
  font-size: 26px; font-weight: 800;
  color: var(--f-text); letter-spacing: -0.02em;
  margin: 0;
}
.f-toolbar select, .f-toolbar input {
  font-size: 13px; padding: 7px 12px; font-weight: 600;
  border: 1px solid var(--f-border); border-radius: var(--f-radius);
  background: var(--f-bg-elevated); color: var(--f-text);
  font-family: inherit;
  transition: border-color .15s;
}
.f-toolbar select:hover, .f-toolbar input:hover { border-color: var(--f-text-muted); }
.f-toolbar select:focus, .f-toolbar input:focus {
  outline: none; border-color: var(--f-primary);
}

/* ===== 评测帖行变体：仅靠右侧 tag 标识，不再常驻左竖条/底色，避免遮挡 hover 选中态 ===== */

/* 类型徽标：评测 */
.f-post-type-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: var(--f-radius-xs);
  background: var(--f-clay); color: #fff;
  text-transform: uppercase; letter-spacing: .04em;
  margin-right: 8px;
  vertical-align: middle;
  line-height: 1.4;
}

/* 评测六维评分摘要行 */
.f-post-review-summary {
  margin-top: 8px;
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; color: var(--f-text-muted);
  flex-wrap: wrap;
}
.f-prv-overall {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px;
  background: var(--f-clay-soft); color: var(--f-clay-deep);
  border-radius: var(--f-radius-xs);
  font-weight: 700;
}
.f-prv-overall em {
  font-style: normal; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  opacity: .85;
}
.f-prv-overall strong {
  font-size: 16px; font-weight: 800; line-height: 1;
  font-family: var(--f-font-mono, var(--f-font-display, inherit));
}
.f-prv-dims {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--f-text-muted); font-weight: 600;
}
.f-prv-dim { display: inline-flex; align-items: baseline; gap: 3px; }
.f-prv-dim em {
  font-style: normal; opacity: .7; font-size: 10.5px; font-weight: 600;
}

@media (max-width: 600px) {
  .f-prv-dims { font-size: 10.5px; gap: 3px 8px; }
  .f-prv-overall strong { font-size: 14px; }
}

.f-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border: 1px solid var(--f-border);
  background: var(--f-bg-elevated); color: var(--f-text);
  border-radius: var(--f-radius);
  font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: all .2s cubic-bezier(.34, 1.4, .64, 1);
  font-family: inherit;
}
.f-btn:hover {
  background: var(--f-bg-soft); border-color: var(--f-text-faint);
  transform: translateY(-1px);
}
.f-btn-primary {
  background: var(--f-primary); border-color: var(--f-primary); color: #fff;
  box-shadow: var(--f-shadow-blue);
}
.f-btn-primary:hover {
  background: var(--f-primary-soft); border-color: var(--f-primary-soft);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(31, 58, 104, .45);
}
.f-btn-ghost { background: transparent; border-color: transparent; color: var(--f-text-muted); }
.f-btn-accent {
  background: var(--f-grass); border-color: var(--f-grass); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(47, 122, 77, .45);
}
.f-btn-accent:hover {
  background: var(--f-grass-deep); border-color: var(--f-grass-deep);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(31, 90, 55, .5);
}
.f-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ===== 帖子详情 ===== */
.f-post-detail {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  overflow: hidden;
}
.f-post-detail-head {
  padding: 28px 32px 0;
  position: relative;
}
.f-post-detail-head::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--f-primary) 0%, var(--f-grass) 35%, var(--f-tennis) 70%, var(--f-clay) 100%);
}
.f-post-back-board {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: var(--f-surface-soft, #f3f5f8);
  color: var(--f-text-muted);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
  border: 1px solid var(--f-divider);
}
.f-post-back-board:hover {
  background: var(--f-primary);
  color: #fff;
  border-color: var(--f-primary);
  transform: translateX(-2px);
}
.f-post-back-board-arrow { font-weight: 800; line-height: 1; }
.f-post-back-board-icon { line-height: 1; }
.f-post-back-board-name { line-height: 1.2; }
.f-post-meta-board-link {
  color: var(--f-text-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .15s ease, border-color .15s ease;
}
.f-post-meta-board-link:hover {
  color: var(--f-primary);
  border-bottom-color: var(--f-primary);
}
.f-post-detail-title {
  font-family: var(--f-font-display);
  font-size: 28px; font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.25; color: var(--f-text);
  letter-spacing: -0.02em;
}
.f-post-detail-meta {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
  font-size: 13px; color: var(--f-text-muted);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--f-divider);
  font-weight: 600;
}
.f-post-detail-meta .f-post-avatar { width: 32px; height: 32px; border-radius: 50%; }
.f-post-detail-meta strong { color: var(--f-text); font-weight: 700; }
.f-post-detail-author-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.f-post-detail-author-name .f-admin-badge {
  margin-left: 0;
  transform: translateY(-1px);
}
.f-post-detail-meta .f-author-actions { margin-left: auto; }

/* ===== 作者行小按钮（加好友 / 私信 / 等待 / 回应）===== */
.f-author-actions { display: inline-flex; align-items: center; gap: 6px; }
.f-author-actions:empty { display: none; }
.f-author-act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
  background: transparent; color: var(--f-text-soft);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  line-height: 1;
  white-space: nowrap;
}
.f-author-act:active { transform: scale(.96); }
.f-author-act--add {
  background: var(--f-primary); color: #fff;
}
.f-author-act--add:hover { background: var(--f-primary-soft); }
.f-author-act--dm {
  background: rgba(15,30,61,.04); color: var(--f-text); border-color: var(--f-divider);
}
.f-author-act--dm:hover { background: rgba(15,30,61,.08); }
.f-author-act--muted {
  background: transparent; color: var(--f-text-muted); border-color: var(--f-divider);
  cursor: default;
}
.f-author-act--respond {
  background: #FFF4DB; color: #8A5A00; border-color: #F2D896;
}
.f-author-act--respond:hover { background: #FFE9B8; }
.f-author-act:disabled { opacity: .8; cursor: default; }
@media (max-width: 720px) {
  .f-author-act > span { display: none; }
  .f-author-act { padding: 5px 9px; font-size: 14px; }
}
.f-comment-head .f-author-actions { margin-left: 6px; }

/* ===== 详情页图片画廊（图文解耦后的新帖路径）=====
   位于翻译条之后、正文之前；4 张内用网格，>4 张走 3-col 多行
*/
.f-post-detail-gallery {
  --f-detail-gallery-max-h: min(62vh, 560px);
  margin: 0 32px 24px;
  display: grid;
  gap: 6px;
}
.f-post-detail-gallery--n1 {
  grid-template-columns: 1fr;
  width: min(calc(100% - 64px), 920px);
  margin: 0 auto 24px;
}
.f-post-detail-gallery--n1 .f-post-detail-gallery-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  max-height: var(--f-detail-gallery-max-h);
}
.f-post-detail-gallery--n2 {
  grid-template-columns: 1fr 1fr;
}
.f-post-detail-gallery--n2 .f-post-detail-gallery-cell {
  aspect-ratio: 1 / 1;
}
.f-post-detail-gallery--n3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 9;
}
.f-post-detail-gallery--n3 .f-post-detail-gallery-cell:first-child {
  grid-row: span 2;
}
.f-post-detail-gallery--n4 {
  grid-template-columns: repeat(3, 1fr);
}
.f-post-detail-gallery--n4 .f-post-detail-gallery-cell {
  aspect-ratio: 1 / 1;
}
.f-post-detail-gallery-cell {
  position: relative;
  border: none; padding: 0; margin: 0;
  background: var(--f-bg-soft);
  border-radius: var(--f-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}
.f-post-detail-gallery-cell:hover {
  transform: translateY(-1px);
  box-shadow: var(--f-shadow-soft);
}
.f-post-detail-gallery-cell img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.f-post-detail-gallery-cell:hover img { transform: none; }
.f-post-detail-gallery--n1 .f-post-detail-gallery-cell img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--f-detail-gallery-max-h);
}
.f-post-detail-gallery-cell img.is-broken { opacity: .25; }

/* ===== Lightbox 浮层 =====
   z-index 13800：高于 toast(13000)/confirm(13500)；专为沉浸态阅读
*/
.f-lightbox {
  position: fixed; inset: 0; z-index: 13800;
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
  animation: f-lightbox-in .18s ease-out;
  touch-action: pan-y;
}
@keyframes f-lightbox-in {
  from { opacity: 0; } to { opacity: 1; }
}
.f-lightbox-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  z-index: 2;
}
.f-lightbox-counter {
  color: rgba(255,255,255,.85);
  font-family: var(--f-font-mono);
  font-size: 13px; font-weight: 700;
}
.f-lightbox-close {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.f-lightbox-close:hover { background: rgba(255,255,255,.2); }
.f-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  color: #fff;
  border: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 32px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.f-lightbox-arrow:hover { background: rgba(255,255,255,.22); }
.f-lightbox-arrow--prev { left: 16px; }
.f-lightbox-arrow--next { right: 16px; }
.f-lightbox-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 72px;
}
.f-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.6);
}

@media (max-width: 600px) {
  .f-post-detail-gallery {
    --f-detail-gallery-max-h: min(52vh, 420px);
    margin: 0 16px 16px;
  }
  .f-post-detail-gallery--n1 {
    width: auto;
    margin: 0 16px 16px;
  }
  .f-lightbox-stage { padding: 64px 16px 80px; }
  .f-lightbox-arrow { width: 40px; height: 40px; font-size: 26px; }
  .f-lightbox-arrow--prev { left: 8px; }
  .f-lightbox-arrow--next { right: 8px; }
  .f-lightbox-topbar { height: 48px; padding: 0 10px; }
  .f-lightbox-close { width: 36px; height: 36px; font-size: 22px; }
}

/* ===== 详情页：评测卡片（装备配置 + 六维评分 + 总评）===== */
.f-post-review-card {
  margin: 0 32px 20px;
  padding: 14px 18px;
  border: 1px solid var(--f-divider);
  border-radius: 12px;
  background: var(--f-bg-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
}
.f-prc-setup-title,
.f-prc-ratings-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-text-muted);
  margin-bottom: 10px;
}
.f-prc-setup-body {
  display: flex; gap: 14px; align-items: flex-start;
}
.f-prc-racquet-thumb {
  flex: 0 0 64px;
  width: 64px; height: 96px;
  border: 1px solid var(--f-border);
  border-radius: 8px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.f-prc-racquet-thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.f-prc-setup-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.f-prc-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}
.f-prc-key {
  color: var(--f-text-muted); font-size: 12.5px;
}
.f-prc-val {
  color: var(--f-text); font-weight: 600;
  overflow-wrap: anywhere;
}
.f-prc-val a {
  color: var(--f-text); text-decoration: none;
  border-bottom: 1px dashed var(--f-border-strong);
}
.f-prc-val a:hover { color: var(--f-grass-deep); border-bottom-color: var(--f-grass-deep); }
.f-prc-style-tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--f-grass-soft);
  color: var(--f-grass-deep);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}
.f-prc-ratings-wrap {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--f-border);
  padding-left: 22px;
}
.f-prc-ratings-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.f-prc-overall {
  display: flex; align-items: baseline; gap: 8px;
}
.f-prc-overall-label {
  font-size: 12px; font-weight: 700; color: var(--f-text-muted);
}
.f-prc-overall-num {
  color: var(--f-grass-deep); line-height: 1;
}
.f-prc-overall-num strong {
  font-size: 22px; font-weight: 800; font-family: var(--f-font-display);
}
.f-prc-overall-num em {
  font-style: normal; font-size: 13px; color: var(--f-text-muted); font-weight: 600;
}
.f-prc-radar {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 0 0 14px;
}
.f-prc-radar-svg {
  width: 100%;
  max-width: 180px;
  height: auto;
  overflow: visible;
}
.f-prc-radar-grid { fill: none; stroke: var(--f-border); stroke-width: 0.6; }
.f-prc-radar-grid.is-major { stroke: var(--f-divider); stroke-width: 0.9; }
.f-prc-radar-axis { stroke: var(--f-border); stroke-width: 0.5; stroke-dasharray: 1 1.5; }
.f-prc-radar-fill {
  fill: var(--f-tennis);
  fill-opacity: 0.38;
  stroke: var(--f-tennis-deep);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.f-prc-radar-handle {
  fill: var(--f-tennis-deep);
  stroke: #fff;
  stroke-width: 0.6;
}
.f-prc-radar-handle.is-best  { fill: #EA7C2E;             stroke: #fff; stroke-width: 1; }
.f-prc-radar-handle.is-worst { fill: var(--f-text-muted); stroke: #fff; stroke-width: 0.6; }
.f-prc-radar-label {
  fill: var(--f-text-soft);
  font-weight: 600;
  font-family: var(--f-font-sans);
}
.f-prc-radar-label.is-best  { fill: #EA7C2E;             font-weight: 700; }
.f-prc-radar-label.is-worst { fill: var(--f-text-muted); font-weight: 600; }
.f-prc-radar-num {
  fill: var(--f-grass-deep);
  font-weight: 800;
  font-family: var(--f-font-display);
}
.f-prc-radar-num.is-best  { fill: #EA7C2E; }
.f-prc-radar-num.is-worst { fill: var(--f-text-muted); }

@media (max-width: 720px) {
  .f-post-review-card {
    margin: 0 16px 16px;
    padding: 14px 14px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .f-prc-ratings-wrap {
    border-left: none; border-top: 1px solid var(--f-border);
    padding-left: 0; padding-top: 12px;
  }
  .f-prc-radar-svg { max-width: 160px; }
  .f-prc-overall-num strong { font-size: 20px; }
}

.f-post-detail-body {
  padding: 26px 32px;
  font-size: 17px; line-height: 1.85; color: var(--f-text);
}
.f-post-detail-body p { margin: 0 0 16px; }
.f-post-detail-body p:last-child { margin-bottom: 0; }
.f-post-detail-body img {
  max-width: 100%; height: auto;
  border-radius: var(--f-radius);
  margin: 18px 0; box-shadow: var(--f-shadow-soft);
}
.f-post-detail-body a {
  color: var(--f-primary); font-weight: 600;
  border-bottom: 2px solid var(--f-tennis);
  transition: background .15s;
}
.f-post-detail-body a:hover { background: var(--f-tennis-soft); }
.f-post-detail-body blockquote {
  border-left: 3px solid var(--f-tennis-deep);
  background: var(--f-tennis-soft);
  padding: 12px 18px; margin: 18px 0;
  color: var(--f-text);
  border-radius: 0 var(--f-radius) var(--f-radius) 0;
}
.f-post-detail-body strong { color: var(--f-text); font-weight: 700; }
.f-post-detail-body ul, .f-post-detail-body ol { padding-left: 24px; margin: 0 0 16px; }
.f-post-detail-body li { margin-bottom: 6px; }

.f-post-detail-actions {
  padding: 16px 32px;
  border-top: 1px solid var(--f-divider);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.f-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  background: var(--f-bg-elevated); cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--f-text-soft);
  transition: all .2s cubic-bezier(.34, 1.4, .64, 1);
  font-family: inherit;
}
.f-action-btn:hover {
  background: var(--f-bg-soft);
  transform: translateY(-1px);
}
.f-action-btn.active {
  background: var(--f-tennis); color: var(--f-text);
  border-color: var(--f-tennis-deep);
  box-shadow: var(--f-shadow-yellow);
}

/* ===== 评论 ===== */
.f-comments { margin-top: 32px; }
.f-comments h3 {
  font-family: var(--f-font-display);
  font-size: 18px; font-weight: 800;
  margin: 0 0 18px;
  color: var(--f-text);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
.f-comments h3::before {
  content: ''; width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--f-grass), var(--f-tennis));
  border-radius: var(--f-radius-pill);
}
.f-comments h3 span {
  color: var(--f-text-muted); font-weight: 600; font-size: 14px;
  font-family: var(--f-font-mono);
}

.f-comment {
  display: flex; gap: 12px; padding: 14px 16px;
  background: var(--f-bg-elevated);
  border-radius: var(--f-radius);
  margin-bottom: 10px;
  border: 1px solid var(--f-border);
  transition: border-color .15s;
}
.f-comment:hover { border-color: var(--f-primary-tint); }
.f-comment-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary-tint), var(--f-tennis-soft)) center/cover;
  flex-shrink: 0;
  border: 2px solid var(--f-bg-elevated);
  box-shadow: 0 2px 6px rgba(15, 30, 61, .1);
  position: relative;
}
.f-comment-main { flex: 1; min-width: 0; }
.f-comment-head {
  font-size: 12px; color: var(--f-text-muted); margin-bottom: 4px;
  display: flex; gap: 8px; align-items: center; font-weight: 600;
}
.f-comment-head strong {
  color: var(--f-primary); font-weight: 700; font-size: 13px;
}
.f-comment-body {
  font-size: 14.5px; color: var(--f-text); line-height: 1.6;
}
.f-comment-body a { color: var(--f-primary); font-weight: 600; }
.f-comment-tr-toggle {
  margin-left: auto;
  background: transparent; border: none; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--f-primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.f-comment-tr-toggle:hover { color: var(--f-primary-hover, var(--f-primary)); }
.f-comment-tr-pending {
  margin-left: auto; font-size: 11px;
  color: var(--f-text-faint); font-weight: 500;
}

.f-comment-input {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 14px; margin-top: 16px;
  transition: border-color .15s;
}
.f-comment-input:focus-within { border-color: var(--f-primary); }
.f-comment-input textarea {
  width: 100%; min-height: 60px; border: none; outline: none;
  resize: vertical; font-family: var(--f-font-sans); font-size: 14.5px;
  color: var(--f-text); line-height: 1.55; background: transparent;
  font-weight: 500;
}
.f-comment-input textarea::placeholder { color: var(--f-text-faint); }
.f-comment-input-bar { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ===== 发帖页 ===== */
.f-edit-card {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}
.f-edit-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--f-primary) 0%, var(--f-grass) 35%, var(--f-tennis) 70%, var(--f-clay) 100%);
}
.f-edit-card h2 {
  font-family: var(--f-font-display);
  font-size: 24px; font-weight: 800; margin: 0;
  color: var(--f-text); letter-spacing: -0.02em;
}
.f-edit-card label {
  display: block; font-size: 12px; font-weight: 700;
  margin: 20px 0 8px; color: var(--f-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.f-edit-card input[type="text"] {
  width: 100%; padding: 12px 16px;
  font-family: var(--f-font-display); font-weight: 700;
  font-size: 17px; color: var(--f-text);
  border: 1px solid var(--f-border); border-radius: var(--f-radius);
  background: var(--f-bg);
  transition: border-color .15s;
}
.f-edit-card input[type="text"]:focus { outline: none; border-color: var(--f-primary); }
.f-edit-card select {
  padding: 8px 12px; border: 1px solid var(--f-border);
  border-radius: var(--f-radius); background: var(--f-bg-elevated);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
#f-editor-box {
  background: var(--f-bg);
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius);
  min-height: 300px;
}
.f-edit-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid var(--f-divider);
}

/* ===== Quill 工具栏 ===== */
.ql-toolbar.ql-snow {
  border: 1px solid var(--f-border) !important;
  border-bottom: none !important;
  border-radius: var(--f-radius) var(--f-radius) 0 0;
  background: var(--f-bg-soft);
  padding: 10px 14px;
}
.ql-container.ql-snow {
  border: 1px solid var(--f-border) !important;
  border-radius: 0 0 var(--f-radius) var(--f-radius);
  font-family: var(--f-font-sans);
  font-size: 15px; line-height: 1.7;
}
.ql-editor { min-height: 240px; color: var(--f-text); }
.ql-editor.ql-blank::before { font-style: normal; color: var(--f-text-faint); }
.f-compose-editor.is-ime-composing .ql-editor.ql-blank::before { opacity: 0; }
.ql-snow .ql-stroke { stroke: var(--f-text-soft); }
.ql-snow .ql-fill { fill: var(--f-text-soft); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--f-primary); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--f-primary); }

/* ===== 空状态 ===== */
.f-empty {
  background: var(--f-bg-elevated);
  border: 1px dashed var(--f-border-strong);
  border-radius: var(--f-radius-lg);
  padding: 60px 24px; text-align: center;
  color: var(--f-text-muted);
  font-weight: 600;
}
.f-empty-icon {
  font-size: 40px; margin-bottom: 12px;
  display: inline-block;
  animation: gentle-wiggle 3s ease-in-out infinite;
}
@keyframes gentle-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

/* ===== Loading ===== */
.f-loading {
  padding: 60px; text-align: center;
  color: var(--f-text-muted); font-size: 13px;
  font-weight: 600; letter-spacing: .04em;
}
.f-loading::after {
  content: '';
  display: inline-block; margin-left: 10px; vertical-align: middle;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--f-tennis), var(--f-tennis-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  animation: ball-bounce 1s ease-in-out infinite;
}

/* ===== 未启用遮罩 ===== */
.f-disabled-mask {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 500px 320px at 50% 30%, var(--f-primary-tint), transparent 70%),
    var(--f-bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.f-disabled-card {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  padding: 44px 36px;
  text-align: center; max-width: 380px;
  box-shadow: var(--f-shadow-pop);
}
.f-disabled-icon { font-size: 42px; margin-bottom: 14px; }
.f-disabled-card h2 {
  font-family: var(--f-font-display);
  font-size: 21px; margin: 0 0 8px; font-weight: 800;
  color: var(--f-primary);
}
.f-disabled-card p {
  font-size: 14px; color: var(--f-text-muted);
  margin: 0 0 24px; line-height: 1.6; font-weight: 500;
}

/* ===== Toast ===== */
.f-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: var(--f-text); color: #fff;
  padding: 12px 22px; border-radius: var(--f-radius-pill);
  font-size: 14px; font-weight: 600;
  z-index: 13000;   /* 高于 compose 弹窗(11000) 与登录弹窗(12000)，保证提示可见 */
  box-shadow: var(--f-shadow-pop);
  border: 1px solid rgba(255,255,255,.08);
  animation: f-toast-in .25s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes f-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ===== Confirm 弹窗 (替代浏览器原生 confirm) =====
   z-index 13500：高于 compose(11000) / auth(12000) / toast(13000)，保证阻塞性确认始终在最顶层 */
.f-confirm-overlay {
  position: fixed; inset: 0; z-index: 13500;
  background: rgba(15, 30, 61, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: f-confirm-overlay-in .18s ease-out;
}
@keyframes f-confirm-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.f-confirm-card {
  width: 100%; max-width: 380px;
  background: var(--f-bg-elevated);
  border-radius: var(--f-radius-lg);
  box-shadow: var(--f-shadow-pop);
  padding: 24px 24px 20px;
  animation: f-confirm-card-in .22s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes f-confirm-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.f-confirm-title {
  font-size: 16px; font-weight: 700; color: var(--f-text);
  margin: 0 0 8px; line-height: 1.4;
}
.f-confirm-message {
  font-size: 14px; color: var(--f-text-soft);
  margin: 0 0 20px; line-height: 1.6; font-weight: 500;
  white-space: pre-wrap; word-wrap: break-word;
}
.f-confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.f-confirm-btn {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .1s;
  min-width: 72px;
}
.f-confirm-btn:active { transform: scale(.97); }
.f-confirm-btn-cancel {
  background: transparent;
  border-color: var(--f-border-strong);
  color: var(--f-text-soft);
}
.f-confirm-btn-cancel:hover { background: rgba(15,30,61,.04); color: var(--f-text); }
.f-confirm-btn-confirm {
  background: var(--f-primary); color: #fff;
}
.f-confirm-btn-confirm:hover { background: var(--f-primary-soft); }
.f-confirm-btn-danger {
  background: #E04E5C; color: #fff;
}
.f-confirm-btn-danger:hover { background: #C73D4A; }
.f-confirm-btn:focus-visible {
  outline: 2px solid var(--f-primary);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .f-confirm-card { max-width: 100%; padding: 20px 20px 18px; }
  .f-confirm-actions { flex-direction: column-reverse; gap: 8px; }
  .f-confirm-btn { width: 100%; padding: 11px 18px; }
}

/* fPrompt 输入框样式 */
.f-prompt-input {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 6px;
  padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--f-text);
  background: var(--f-bg-soft);
  border: 1px solid var(--f-border-strong);
  border-radius: 10px;
  resize: vertical; min-height: 76px; max-height: 200px;
  transition: border-color .15s, box-shadow .15s;
}
.f-prompt-input:focus {
  outline: none; border-color: var(--f-primary);
  box-shadow: 0 0 0 3px rgba(30,102,255,.15);
}
.f-prompt-counter {
  font-size: 12px; color: var(--f-text-muted);
  text-align: right; margin: 0 0 14px;
}

/* ===== 我的好友 管理页 ===== */
.f-friends-list {
  display: flex; flex-direction: column; gap: 10px;
}
.f-friend-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-divider);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.f-friend-card:hover {
  border-color: var(--f-border-strong);
  box-shadow: 0 1px 6px rgba(15,30,61,.06);
}
.f-friend-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  background: #d8dde6 50% / cover no-repeat;
}
.f-friend-main { flex: 1 1 auto; min-width: 0; }
.f-friend-name strong {
  font-size: 15.5px; font-weight: 700; color: var(--f-text);
}
.f-friend-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.f-friend-chip {
  display: inline-block; padding: 2px 8px;
  font-size: 12px; color: var(--f-text-soft);
  background: var(--f-bg-soft);
  border-radius: 999px;
}
.f-friend-msg {
  margin-top: 6px;
  font-size: 13px; color: var(--f-text-soft);
  background: var(--f-bg-soft);
  padding: 6px 10px; border-radius: 8px;
  border-left: 3px solid var(--f-divider);
}
.f-friend-bio {
  margin-top: 6px;
  font-size: 13px; color: var(--f-text-muted); line-height: 1.5;
}
.f-friend-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  flex: 0 0 auto;
}
.f-friend-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.f-friend-btn:active { transform: scale(.97); }
.f-friend-btn-primary { background: var(--f-primary); color: #fff; }
.f-friend-btn-primary:hover { background: var(--f-primary-soft); }
.f-friend-btn-ghost {
  background: transparent; color: var(--f-text-soft);
  border-color: var(--f-border-strong);
}
.f-friend-btn-ghost:hover { background: rgba(15,30,61,.04); color: var(--f-text); }
.f-friend-btn-danger {
  background: transparent; color: #C73D4A;
  border-color: rgba(199,61,74,.4);
}
.f-friend-btn-danger:hover { background: rgba(199,61,74,.08); }
@media (max-width: 720px) {
  .f-friend-card { flex-wrap: wrap; padding: 12px 14px; }
  .f-friend-actions { flex-direction: row; width: 100%; margin-top: 4px; }
  .f-friend-btn { flex: 1; }
}

/* ===== 私信页 ===== */
.f-dm-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 520px;
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-divider);
  border-radius: 12px;
  overflow: hidden;
}
.f-dm-side {
  border-right: 1px solid var(--f-divider);
  overflow-y: auto;
  max-height: 70vh;
}
.f-dm-side-empty {
  padding: 32px 18px; text-align: center; color: var(--f-text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.f-dm-side-empty div:first-child { font-size: 28px; }
.f-dm-side-empty p { margin: 0; font-size: 13px; }
.f-dm-conv {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 12px 14px;
  background: transparent; border: none; border-bottom: 1px solid var(--f-divider);
  text-align: left; cursor: pointer;
  transition: background .15s;
}
.f-dm-conv:hover { background: rgba(15,30,61,.03); }
.f-dm-conv.active { background: rgba(30,102,255,.07); }
.f-dm-conv-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  background: #d8dde6 50% / cover no-repeat;
}
.f-dm-conv-main { flex: 1 1 auto; min-width: 0; }
.f-dm-conv-name {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--f-text);
}
.f-dm-conv-name strong { font-weight: 700; }
.f-dm-conv-time { font-size: 11px; color: var(--f-text-muted); font-weight: 500; }
.f-dm-conv-preview {
  font-size: 12.5px; color: var(--f-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.f-dm-conv-unread {
  display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px;
  background: #E04E5C; color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; text-align: center;
  align-self: center;
}
.f-dm-empty-hint {
  padding: 80px 24px; text-align: center; color: var(--f-text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.f-dm-empty-hint h3 { margin: 0; font-size: 16px; color: var(--f-text); }
.f-dm-empty-hint p  { margin: 0; font-size: 13px; }
.f-dm-thread {
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.f-dm-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--f-divider);
  background: var(--f-bg-soft);
}
.f-dm-back {
  display: none;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: var(--f-text-soft);
  padding: 2px 6px;
}
.f-dm-head-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #d8dde6 50% / cover no-repeat;
}
.f-dm-msgs {
  flex: 1 1 auto; min-height: 320px;
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.f-dm-msgs-empty {
  margin: auto; color: var(--f-text-muted); font-size: 13px;
}
.f-dm-day {
  align-self: center;
  font-size: 11px; color: var(--f-text-muted);
  background: var(--f-bg-soft);
  padding: 2px 10px; border-radius: 999px;
}
.f-dm-msg {
  display: flex; gap: 8px; align-items: flex-end;
  max-width: 78%;
}
.f-dm-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.f-dm-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #d8dde6 50% / cover no-repeat;
  flex: 0 0 28px;
}
.f-dm-bubble {
  padding: 8px 12px;
  background: var(--f-bg-soft);
  border-radius: 12px;
  font-size: 14px; line-height: 1.5; color: var(--f-text);
  white-space: pre-wrap; word-wrap: break-word;
}
.f-dm-msg--mine .f-dm-bubble {
  background: var(--f-primary); color: #fff;
}
.f-dm-composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--f-divider);
  background: var(--f-bg-elevated);
}
.f-dm-composer textarea {
  flex: 1 1 auto;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--f-text);
  padding: 8px 12px;
  border: 1px solid var(--f-border-strong);
  border-radius: 10px;
  resize: vertical; min-height: 40px; max-height: 140px;
  background: var(--f-bg-soft);
}
.f-dm-composer textarea:focus {
  outline: none; border-color: var(--f-primary);
  box-shadow: 0 0 0 3px rgba(30,102,255,.15);
}
@media (max-width: 720px) {
  .f-dm-page { grid-template-columns: 1fr; min-height: 0; border-radius: 8px; }
  .f-dm-page--thread .f-dm-side { display: none; }
  .f-dm-page:not(.f-dm-page--thread) .f-dm-thread,
  .f-dm-page:not(.f-dm-page--thread) .f-dm-empty-hint { display: none; }
  .f-dm-side { border-right: none; max-height: none; }
  .f-dm-thread { max-height: calc(100vh - 220px); }
  .f-dm-back { display: inline-flex; }
}

/* ===== 响应式：移动端 ===== */
@media (max-width: 720px) {
  :root { --f-topbar-h: 58px; }
  .f-topbar-inner { padding: 12px 14px; gap: 8px; }
  .f-back-text, .f-logo-text { display: none; }
  .f-logo { font-size: 0; }
  .f-boards-nav-inner { padding: 10px 14px; gap: 6px; }
  .f-board-chip { padding: 6px 12px; font-size: 12.5px; }
  main#f-content { padding: 24px 14px 80px; }

  .f-toolbar h2 { font-size: 22px; }
  .f-home-section h2 { font-size: 18px; }
  .f-board-card { padding: 18px; border-radius: var(--f-radius); }
  .f-board-card-head { font-size: 18px; }
  .f-board-card-icon { width: 34px; height: 34px; }

  .f-post-row { padding: 14px; gap: 12px; }
  .f-post-title { font-size: 15px; }
  .f-post-avatar { width: 38px; height: 38px; }
  .f-post-avatar.f-avatar-admin::before {
    width: 13px;
    height: 13px;
    right: -4px;
    bottom: -4px;
  }

  .f-post-detail { border-radius: var(--f-radius); }
  .f-post-detail-head { padding: 22px 20px 0; }
  .f-post-detail-title { font-size: 22px; }
  .f-post-detail-body { padding: 20px; font-size: 15.5px; }
  .f-post-detail-actions { padding: 14px 20px; }

  .f-edit-card { padding: 22px 18px; border-radius: var(--f-radius); }
  .f-edit-card input[type="text"] { font-size: 16px; }
  .f-edit-card h2 { font-size: 22px; }

  .f-board-grid { grid-template-columns: 1fr; gap: 12px; }

  .f-hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "text text";
    padding: 18px 16px 22px;
    gap: 4px 8px;
  }
  .f-hero-mascot--left  { grid-area: left;  width: auto; height: 130px; justify-content: flex-end; }
  .f-hero-mascot--right { grid-area: right; width: auto; height: 130px; justify-content: flex-start; }
  .f-hero-mascot img { width: 130px; height: 130px; }
  .f-hero-text { grid-area: text; padding: 4px 4px 0; }
  .f-hero-text h1 { font-size: 22px; }
  .f-hero-text p { font-size: 13.5px; margin-bottom: 12px; }
  .f-hero::after { width: 80px; bottom: 6px; }

  /* 移动端：thumb 缩小；feed 同步缩小；hero 进一步压低 max-height（窄屏空间紧） */
  .f-post-cover-slot--thumb { width: 76px; height: 76px; }
  .f-post-cover-slot--feed  { width: 80px; height: 80px; }
  .f-post-cover-slot--hero { max-height: 200px; }
  .f-post-cover-slot--hero.f-post-cover-slot--n1,
  .f-post-cover-slot--hero.f-post-cover-slot--n1 .f-post-cover-cell,
  .f-post-cover-slot--hero.f-post-cover-slot--n1 .f-post-cover-cell img { max-height: 180px; }
  .f-post-cover-slot--hero.f-post-cover-slot--n2 { aspect-ratio: 16 / 9; }
  .f-post-cover-more { font-size: 18px; }
}

/* ============================================================
   发帖 / 写测评 弹窗 (f-compose-*)
   - 复用 f-auth 弹窗的视觉语言 (彩条/动画/关闭按钮)
   - 但更宽 + sticky header/footer + body 可滚
   - z-index 11000：低于登录弹窗(12000)，高于其他浮层
   ============================================================ */
.f-compose-overlay {
  position: fixed; inset: 0; z-index: 11000;
  background:
    radial-gradient(ellipse 600px 400px at 50% 30%, rgba(31, 58, 104, .35), transparent 70%),
    rgba(15, 30, 61, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: f-compose-overlay-in .25s ease-out;
}
.f-compose-overlay[hidden] { display: none !important; }
@keyframes f-compose-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.f-compose-card {
  width: 100%; max-width: 640px;
  background: var(--f-bg-elevated);
  border-radius: var(--f-radius-lg);
  border: 1px solid var(--f-border);
  box-shadow: var(--f-shadow-pop);
  position: relative;
  overflow: hidden;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: f-compose-card-in .35s cubic-bezier(.34, 1.4, .64, 1);
}
.f-compose-card--review { max-width: 760px; }
.f-compose-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--f-primary) 0%, var(--f-grass) 35%, var(--f-tennis) 70%, var(--f-clay) 100%);
  z-index: 1;
}
@keyframes f-compose-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* —— Header（sticky）—— */
.f-compose-header {
  padding: 18px 26px 14px;
  border-bottom: 1px solid var(--f-divider);
  display: flex; align-items: center; gap: 12px;
  background: var(--f-bg-elevated);
  flex-shrink: 0;
}
.f-compose-header-text {
  flex: 1; min-width: 0;
}
.f-compose-header-title {
  font-family: var(--f-font-display);
  font-size: 20px; font-weight: 800;
  color: var(--f-text); letter-spacing: -0.02em;
  margin: 0;
}
.f-compose-header-sub {
  font-size: 12.5px; color: var(--f-text-muted);
  margin-top: 2px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f-compose-close {
  background: var(--f-bg-soft); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--f-text-muted);
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.f-compose-close:hover {
  background: var(--f-primary-tint); color: var(--f-primary); transform: rotate(90deg);
}
.f-compose-close[disabled] {
  opacity: .4; cursor: not-allowed;
}
.f-compose-close[disabled]:hover { background: var(--f-bg-soft); color: var(--f-text-muted); transform: none; }

/* —— Body（可滚）—— */
/* padding-bottom 与 scroll-padding-bottom 留出 IME 候选框安全区：
   输入拼音时候选框出现在光标下方，避免被底部按钮/状态条遮挡 */
.f-compose-body {
  padding: 18px 26px 80px;
  scroll-padding-bottom: 140px;
  overflow-y: auto;
  flex: 1;
}
.f-compose-body label {
  display: block; font-size: 12px; font-weight: 700;
  margin: 16px 0 6px; color: var(--f-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.f-compose-body label:first-of-type { margin-top: 0; }
.f-compose-body input[type="text"] {
  width: 100%; padding: 11px 14px;
  font-family: var(--f-font-display); font-weight: 700;
  font-size: 16px; color: var(--f-text);
  border: 1px solid var(--f-border); border-radius: var(--f-radius);
  background: var(--f-bg);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.f-compose-body input[type="text"]:focus,
.f-compose-body input[type="number"]:focus {
  outline: none; border-color: var(--f-primary);
  box-shadow: 0 0 0 3px var(--f-primary-tint);
}
.f-compose-body select {
  padding: 9px 12px; border: 1px solid var(--f-border);
  border-radius: var(--f-radius); background: var(--f-bg-elevated);
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--f-text);
}
/* Quill 编辑器容器 */
.f-compose-body .ql-toolbar.ql-snow {
  position: sticky; top: -18px; z-index: 2;
  background: var(--f-bg-elevated);
}
.f-compose-body .f-compose-editor {
  background: var(--f-bg);
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius);
  min-height: 200px;
}
/* 写评测专属：body 含大量字段（拍/线/磅数/雷达/标题），编辑器位于最底部，
   光标天然贴近底栏。给 review 模式更大的安全区，防止 IME 候选框被底部按钮挡住。
   同时给 #f-rv-editor 加 scroll-margin-bottom，让 Quill 触发 scrollIntoView 时
   主动留出底部空间。 */
.f-compose-card--review .f-compose-body {
  padding-bottom: 180px;
  scroll-padding-bottom: 220px;
}
#f-rv-editor { scroll-margin-bottom: 200px; }

/* ===== 编辑器多图面板 (.f-compose-images) =====
   - 与 Quill 编辑器解耦：图片单独 JSON 字段，提交时随 images:[] 发出
   - 拖入文件、多选、客户端压缩、上传进度、拖拽重排
*/
.f-compose-images {
  border: 1px dashed var(--f-border-strong);
  border-radius: var(--f-radius);
  padding: 12px;
  background: var(--f-bg);
  transition: background .15s, border-color .15s;
}
.f-compose-images.is-drop-hover {
  border-color: var(--f-primary);
  background: var(--f-primary-tint);
}
.f-compose-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.f-compose-images-hint {
  margin-top: 8px;
  font-size: 11px; color: var(--f-text-faint);
  font-weight: 500;
}
.f-img-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--f-bg-soft);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-xs);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.f-img-tile.is-dragging { opacity: .5; }
.f-img-tile.is-drop-target {
  border-color: var(--f-primary);
  box-shadow: inset 0 0 0 2px var(--f-primary);
}
.f-img-tile:not(.f-img-tile-add):hover { box-shadow: var(--f-shadow-soft); }
.f-img-tile.is-previewable {
  cursor: zoom-in;
}
.f-img-tile.is-previewable::before,
.f-img-tile.is-previewable::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1;
}
.f-img-tile.is-previewable::before {
  inset: 0;
  background: rgba(15, 30, 61, .22);
}
.f-img-tile.is-previewable::after {
  right: 10px; bottom: 10px;
  width: 18px; height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 6px 6px 0 -4px #fff;
  transform: translateY(2px);
}
.f-img-tile.is-previewable:hover::before,
.f-img-tile.is-previewable:hover::after,
.f-img-tile.is-previewable:focus-visible::before,
.f-img-tile.is-previewable:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.f-img-tile.is-previewable:focus-visible {
  outline: 2px solid var(--f-primary);
  outline-offset: 2px;
}
.f-img-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.f-img-tile-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15, 30, 61, .7);
  color: #fff;
  border: none;
  font-size: 16px; line-height: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.f-img-tile-remove:hover { background: var(--f-danger); transform: scale(1.08); }
.f-img-tile-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(15, 30, 61, .15);
}
.f-img-tile-progress-bar {
  height: 100%;
  background: var(--f-primary);
  transition: width .2s linear;
}
.f-img-tile.is-uploading { cursor: default; }
.f-img-tile.is-uploading.is-previewable { cursor: zoom-in; }
.f-img-tile.is-uploading img { opacity: .55; filter: saturate(.7); }
.f-img-tile-fail {
  position: absolute; inset: 0;
  background: rgba(201, 48, 61, .85);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 4px;
}
.f-img-tile-retry {
  background: #fff; color: var(--f-danger);
  border: none; padding: 2px 10px;
  border-radius: var(--f-radius-pill);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.f-img-tile-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--f-bg-elevated);
  border: 1px dashed var(--f-border-strong);
  color: var(--f-text-muted);
  cursor: pointer;
}
.f-img-tile-add:hover {
  border-color: var(--f-primary);
  color: var(--f-primary);
  background: var(--f-primary-tint);
}
.f-img-add-plus {
  font-size: 26px; font-weight: 300; line-height: 1;
  color: var(--f-text-muted);
}
.f-img-tile-add:hover .f-img-add-plus { color: var(--f-primary); }
.f-img-add-count {
  font-size: 11px; font-weight: 700;
  font-family: var(--f-font-mono);
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .f-compose-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }
  .f-img-tile-remove { width: 24px; height: 24px; font-size: 18px; }
}

/* —— Footer（sticky）—— */
.f-compose-footer {
  padding: 14px 26px;
  border-top: 1px solid var(--f-divider);
  background: var(--f-bg-elevated);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.f-compose-footer-status {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--f-text-faint);
  font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  opacity: 0;
  transition: opacity .25s ease-out;
  pointer-events: none;        /* 纯提示，不要抢交互 */
  user-select: none;
}
.f-compose-footer-status.is-visible { opacity: .65; }
.f-compose-footer-status.is-saved { color: var(--f-grass); }
.f-compose-footer-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .55;
}

/* —— 窄屏 bottom sheet —— */
@media (max-width: 600px) {
  .f-compose-overlay { padding: 0; align-items: flex-end; }
  .f-compose-card {
    max-width: 100%;
    border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0;
    max-height: 92vh;
    animation: f-compose-card-in-mobile .35s cubic-bezier(.34, 1.4, .64, 1);
  }
  @keyframes f-compose-card-in-mobile {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .f-compose-header { padding: 16px 18px 12px; }
  .f-compose-header-title { font-size: 18px; }
  .f-compose-body { padding: 14px 18px 100px; scroll-padding-bottom: 160px; }
  .f-compose-card--review .f-compose-body { padding-bottom: 200px; scroll-padding-bottom: 240px; }
  .f-compose-footer { padding: 12px 18px; }
}

/* ============================================================
   编辑功能：已编辑徽标 + 评论操作 + 就地编辑态
   ============================================================ */
.f-edited-flag {
  color: var(--f-text-faint);
  font-size: 11.5px;
  font-style: italic;
  font-weight: 600;
  margin-left: 2px;
}
.f-post-detail-meta .f-edited-flag { font-style: normal; opacity: .85; }

.f-comment-own-actions {
  display: inline-flex; gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
}
.f-comment-action-btn {
  background: none; border: none; padding: 2px 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--f-text-muted); cursor: pointer;
  border-radius: var(--f-radius-xs);
  font-family: inherit;
  transition: color .15s, background .15s;
}
.f-comment-action-btn:hover {
  color: var(--f-primary);
  background: var(--f-primary-tint);
}
.f-comment-action-btn--danger:hover {
  color: var(--f-danger);
  background: rgba(201, 48, 61, .08);
}

.f-comment-edit-area {
  margin-top: 8px;
  padding: 10px;
  background: var(--f-bg-soft);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
}
.f-comment-edit-textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-xs);
  padding: 8px 10px;
  font-family: var(--f-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--f-text);
  background: var(--f-bg-elevated);
  box-sizing: border-box;
}
.f-comment-edit-textarea:focus {
  outline: none; border-color: var(--f-primary);
  box-shadow: 0 0 0 3px var(--f-primary-tint);
}
.f-comment-edit-bar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px;
}
.f-comment-edit-bar .f-btn { padding: 5px 14px; font-size: 13px; }

/* ===== 功能反馈板块顶部入口条（结构对齐 .f-gear-board-cta，配色偏蓝呼应 suggest 插画）===== */
.f-fb-board-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 380px 260px at 88% 90%, rgba(80, 160, 255, .14), transparent 72%),
    radial-gradient(ellipse 360px 240px at 50% 110%, rgba(215, 230, 74, .18), transparent 70%),
    radial-gradient(ellipse 320px 220px at 0% 0%, rgba(31, 58, 104, .14), transparent 70%),
    linear-gradient(135deg, var(--f-bg-elevated) 0%, var(--f-bg-soft) 100%);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  position: relative;
  overflow: hidden;
}
.f-fb-board-cta::after {
  content: '';
  position: absolute;
  left: 32px; bottom: 10px;
  width: 96px; height: 2px;
  background: linear-gradient(90deg, #1f6feb, transparent);
  opacity: .35;
  border-radius: 2px;
}
.f-fb-board-cta-body {
  min-width: 0;
  text-align: left;
  position: relative; z-index: 1;
}
.f-fb-board-cta-eyebrow {
  font-family: var(--f-font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: #1f6feb;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: .9;
}
.f-fb-board-cta-body h1 {
  font-family: var(--f-font-display);
  font-size: 28px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, #1f6feb, var(--f-grass));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f-fb-board-cta-body p {
  margin: 0 0 18px;
  font-size: 15px; color: var(--f-text-muted);
  font-weight: 500;
}
.f-fb-board-cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: flex-start; align-items: center;
}
.f-fb-board-cta-hero {
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.f-fb-board-cta-hero img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(31, 111, 235, .20)) drop-shadow(0 4px 8px rgba(31, 58, 104, .10));
  animation: fb-cta-hero 5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes fb-cta-hero {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .f-fb-board-cta-hero img { animation: none; transform: rotate(-2deg); }
}
@media (max-width: 720px) {
  .f-fb-board-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "text";
    padding: 20px 16px 22px;
    gap: 6px;
    text-align: center;
  }
  .f-fb-board-cta-hero {
    grid-area: hero;
    width: 100%; height: 150px;
    margin: 0 auto;
  }
  .f-fb-board-cta-hero img { width: 150px; height: 150px; }
  .f-fb-board-cta-body {
    grid-area: text;
    text-align: center;
    padding: 4px 4px 0;
  }
  .f-fb-board-cta-body h1 { font-size: 20px; }
  .f-fb-board-cta-body p { font-size: 13.5px; margin-bottom: 12px; }
  .f-fb-board-cta-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .f-fb-board-cta::after { left: 50%; transform: translateX(-50%); width: 80px; bottom: 6px; background: linear-gradient(90deg, transparent, #1f6feb, transparent); }
  .f-fb-board-cta-actions { gap: 10px; justify-content: center; }
}

/* ===== 休闲灌水板块顶部入口条（结构对齐 .f-fb-board-cta，配色偏黄绿呼应 community 插画）===== */
.f-lounge-board-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 380px 260px at 88% 90%, rgba(215, 230, 74, .22), transparent 72%),
    radial-gradient(ellipse 360px 240px at 50% 110%, rgba(46, 160, 67, .14), transparent 70%),
    radial-gradient(ellipse 320px 220px at 0% 0%, rgba(80, 160, 255, .12), transparent 70%),
    linear-gradient(135deg, var(--f-bg-elevated) 0%, var(--f-bg-soft) 100%);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  position: relative;
  overflow: hidden;
}
.f-lounge-board-cta::after {
  content: '';
  position: absolute;
  left: 32px; bottom: 10px;
  width: 96px; height: 2px;
  background: linear-gradient(90deg, var(--f-grass), transparent);
  opacity: .45;
  border-radius: 2px;
}
.f-lounge-board-cta-body {
  min-width: 0;
  text-align: left;
  position: relative; z-index: 1;
}
.f-lounge-board-cta-eyebrow {
  font-family: var(--f-font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--f-grass);
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: .9;
}
.f-lounge-board-cta-body h1 {
  font-family: var(--f-font-display);
  font-size: 28px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--f-grass), #c9b827);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f-lounge-board-cta-body p {
  margin: 0 0 18px;
  font-size: 15px; color: var(--f-text-muted);
  font-weight: 500;
}
.f-lounge-board-cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: flex-start; align-items: center;
}
.f-lounge-board-cta-hero {
  width: 320px; height: 200px;
  padding-right: 28px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.f-lounge-board-cta-hero img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(46, 160, 67, .22)) drop-shadow(0 4px 8px rgba(31, 58, 104, .10));
  animation: lounge-cta-hero 5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes lounge-cta-hero {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .f-lounge-board-cta-hero img { animation: none; transform: rotate(-1.5deg); }
}
@media (max-width: 720px) {
  .f-lounge-board-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "text";
    padding: 20px 16px 22px;
    gap: 6px;
    text-align: center;
  }
  .f-lounge-board-cta-hero {
    grid-area: hero;
    width: 100%; height: 160px;
    margin: 0 auto;
  }
  .f-lounge-board-cta-hero img { width: 180px; height: 160px; }
  .f-lounge-board-cta-body {
    grid-area: text;
    text-align: center;
    padding: 4px 4px 0;
  }
  .f-lounge-board-cta-body h1 { font-size: 20px; }
  .f-lounge-board-cta-body p { font-size: 13.5px; margin-bottom: 12px; }
  .f-lounge-board-cta-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .f-lounge-board-cta::after { left: 50%; transform: translateX(-50%); width: 80px; bottom: 6px; background: linear-gradient(90deg, transparent, var(--f-grass), transparent); }
  .f-lounge-board-cta-actions { gap: 10px; justify-content: center; }
}

/* ===== 技术交流板块顶部入口条（结构对齐 .f-lounge-board-cta，配色偏暖橙呼应 play 插画）===== */
.f-skills-board-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 380px 260px at 88% 90%, rgba(255, 138, 76, .20), transparent 72%),
    radial-gradient(ellipse 360px 240px at 50% 110%, rgba(255, 196, 71, .18), transparent 70%),
    radial-gradient(ellipse 320px 220px at 0% 0%, rgba(215, 230, 74, .14), transparent 70%),
    linear-gradient(135deg, var(--f-bg-elevated) 0%, var(--f-bg-soft) 100%);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  position: relative;
  overflow: hidden;
}
.f-skills-board-cta::after {
  content: '';
  position: absolute;
  left: 32px; bottom: 10px;
  width: 96px; height: 2px;
  background: linear-gradient(90deg, #ff7a59, transparent);
  opacity: .45;
  border-radius: 2px;
}
.f-skills-board-cta-body {
  min-width: 0;
  text-align: left;
  position: relative; z-index: 1;
}
.f-skills-board-cta-eyebrow {
  font-family: var(--f-font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: #ef6a3c;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: .9;
}
.f-skills-board-cta-body h1 {
  font-family: var(--f-font-display);
  font-size: 28px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, #ef6a3c, #d6a328);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f-skills-board-cta-body p {
  margin: 0 0 18px;
  font-size: 15px; color: var(--f-text-muted);
  font-weight: 500;
}
.f-skills-board-cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: flex-start; align-items: center;
}
.f-skills-board-cta-hero {
  width: 320px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.f-skills-board-cta-hero img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(239, 106, 60, .22)) drop-shadow(0 4px 8px rgba(31, 58, 104, .10));
  animation: skills-cta-hero 5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes skills-cta-hero {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .f-skills-board-cta-hero img { animation: none; transform: rotate(-1.5deg); }
}
@media (max-width: 720px) {
  .f-skills-board-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "text";
    padding: 20px 16px 22px;
    gap: 6px;
    text-align: center;
  }
  .f-skills-board-cta-hero {
    grid-area: hero;
    width: 100%; height: 160px;
    margin: 0 auto;
  }
  .f-skills-board-cta-hero img { width: 200px; height: 160px; }
  .f-skills-board-cta-body {
    grid-area: text;
    text-align: center;
    padding: 4px 4px 0;
  }
  .f-skills-board-cta-body h1 { font-size: 20px; }
  .f-skills-board-cta-body p { font-size: 13.5px; margin-bottom: 12px; }
  .f-skills-board-cta-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .f-skills-board-cta::after { left: 50%; transform: translateX(-50%); width: 80px; bottom: 6px; background: linear-gradient(90deg, transparent, #ff7a59, transparent); }
  .f-skills-board-cta-actions { gap: 10px; justify-content: center; }
}

/* ============================================================ */
/* 我的帖子 / 我的收藏                                            */
/* ============================================================ */
.f-mine-page { padding: 4px 0 32px; }

.f-mine-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px 16px;
  border-bottom: 1px solid var(--f-divider);
  margin-bottom: 16px;
}
.f-mine-head-text { min-width: 0; }
.f-mine-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--f-text); }
.f-mine-sub   { margin: 4px 0 0; font-size: 13px; color: var(--f-text-muted); }
.f-mine-back {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--f-divider);
  color: var(--f-text-soft);
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.f-mine-back:hover { background: var(--f-bg-soft); color: var(--f-primary); border-color: var(--f-primary-tint); }

/* 球员主页 */
.f-profile-page {
  padding: 4px 0 40px;
}
.f-profile-page .f-mine-head {
  border-bottom: 0;
  margin-bottom: 14px;
  padding-bottom: 4px;
}
.f-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  background:
    linear-gradient(92deg, transparent 0 70%, rgba(31, 58, 104, .04) 70% 70.35%, transparent 70.35%),
    linear-gradient(0deg, transparent 0 84%, rgba(255,255,255,.42) 84% 84.65%, transparent 84.65%),
    radial-gradient(ellipse 420px 240px at 86% 8%, rgba(215, 230, 74, .20), transparent 68%),
    radial-gradient(ellipse 340px 220px at 0% 100%, rgba(47, 122, 77, .12), transparent 70%),
    linear-gradient(135deg, #fff 0%, var(--f-bg-soft) 100%);
  box-shadow: var(--f-shadow-soft);
  overflow: hidden;
}
.f-profile-hero::before {
  content: '';
  position: absolute;
  right: -22px;
  top: -24px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 88% 54% at 50% -18%, transparent 62%, rgba(255,255,255,.82) 63% 67%, transparent 68%),
    radial-gradient(ellipse 88% 54% at 50% 118%, transparent 62%, rgba(255,255,255,.74) 63% 67%, transparent 68%),
    radial-gradient(circle at 32% 28%, #f7ff92 0 14%, var(--f-tennis) 15% 58%, var(--f-tennis-deep) 100%);
  box-shadow: 0 16px 32px -18px rgba(181, 194, 52, .6);
  opacity: .78;
  pointer-events: none;
}
.f-profile-hero::after {
  content: '';
  position: absolute;
  left: 118px;
  bottom: -36px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 88% 54% at 50% -18%, transparent 62%, rgba(255,255,255,.78) 63% 67%, transparent 68%),
    radial-gradient(ellipse 88% 54% at 50% 118%, transparent 62%, rgba(255,255,255,.68) 63% 67%, transparent 68%),
    radial-gradient(circle at 34% 30%, #f7ff9a 0 14%, var(--f-tennis) 15% 58%, var(--f-tennis-deep) 100%);
  box-shadow: 0 14px 26px -18px rgba(181, 194, 52, .58);
  opacity: .42;
  pointer-events: none;
}
.f-profile-avatar {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-grass)) center/cover no-repeat;
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 30px -16px rgba(15, 30, 61, .45);
  cursor: zoom-in;
  flex: 0 0 auto;
}
.f-profile-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, #f4ff89 0%, var(--f-tennis) 38%, var(--f-tennis-deep) 100%);
  color: var(--f-primary);
  font-size: 42px;
  cursor: default;
}
.f-profile-info {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: 4px;
}
.f-profile-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  color: var(--f-text);
  font-family: var(--f-font-display);
  font-size: 27px;
  line-height: 1.18;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.f-profile-name .f-hc-friend-badge {
  margin-top: 2px;
  letter-spacing: 0;
}
.f-profile-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--f-text-muted);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 12px;
}
.f-profile-info .f-hc-chips {
  padding: 0;
  gap: 8px;
}
.f-profile-info .f-hc-chip {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15, 30, 61, .08);
  color: var(--f-text-soft);
  font-size: 12px;
  line-height: 1.45;
}
.f-profile-bio {
  max-width: 620px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 30, 61, .07);
  border-radius: var(--f-radius);
  background: rgba(255,255,255,.56);
  color: var(--f-text-soft);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.f-profile-bio--empty {
  color: var(--f-text-faint);
  font-style: italic;
}
.f-profile-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 132px;
  padding-top: 6px;
}
.f-profile-actions .f-btn {
  min-height: 40px;
  border-radius: var(--f-radius-pill);
  white-space: nowrap;
  box-shadow: 0 8px 22px -14px rgba(15, 30, 61, .35);
}
.f-profile-actions .f-btn-primary {
  box-shadow: var(--f-shadow-blue);
}
.f-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 22px;
}
.f-profile-stat {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--f-divider);
  border-radius: var(--f-radius);
  background: rgba(255,255,255,.72);
  color: var(--f-text-muted);
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
  box-shadow: 0 4px 14px -12px rgba(15, 30, 61, .3);
}
.f-profile-stat strong {
  display: block;
  margin-bottom: 3px;
  color: var(--f-primary);
  font-family: var(--f-font-mono);
  font-size: 20px;
  line-height: 1.1;
}
.f-profile-stat-dot {
  display: none;
}
.f-profile-posts-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--f-text);
  font-family: var(--f-font-display);
  font-size: 18px;
  font-weight: 800;
}
.f-profile-posts-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: var(--f-radius-pill);
  background: linear-gradient(180deg, var(--f-primary), var(--f-tennis));
}

@media (max-width: 820px) {
  .f-profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: 24px 22px;
  }
  .f-profile-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 0;
  }
  .f-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .f-profile-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .f-profile-page .f-mine-head {
    align-items: flex-start;
    margin-bottom: 10px;
  }
  .f-profile-page .f-mine-back {
    align-self: flex-start;
    margin-top: 0;
  }
  .f-profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding: 22px 16px 18px;
  }
  .f-profile-hero::before {
    right: -30px;
    top: -30px;
    width: 78px;
    height: 78px;
    opacity: .58;
  }
  .f-profile-hero::after {
    left: 18px;
    bottom: -34px;
    width: 56px;
    height: 56px;
    opacity: .30;
  }
  .f-profile-avatar {
    width: 92px;
    height: 92px;
  }
  .f-profile-info {
    width: 100%;
    padding-top: 0;
  }
  .f-profile-name {
    justify-content: center;
    font-size: 22px;
  }
  .f-profile-loc,
  .f-profile-info .f-hc-chips {
    justify-content: center;
  }
  .f-profile-bio {
    margin-top: 12px;
    padding: 10px 12px;
    text-align: left;
  }
  .f-profile-actions {
    width: 100%;
    justify-content: stretch;
  }
  .f-profile-actions .f-btn {
    width: 100%;
  }
  .f-profile-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0 18px;
  }
  .f-profile-stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* segmented control（我的帖子专用，复用首页 chip 视觉语言）
   动效胶囊：.f-mine-seg-pill 是绝对定位的白色背景，
   位置/宽度由 JS 测量 active 按钮后写入 transform/width，
   spring-like cubic-bezier 提供 iOS 风格的弹性滑动 */
.f-mine-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  background: var(--f-bg-soft);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.f-mine-seg::-webkit-scrollbar { display: none; }

.f-mine-seg-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(15, 30, 61, .10);
  transform: translateX(0);
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(.34, 1.45, .54, 1),
    width     380ms cubic-bezier(.34, 1.45, .54, 1),
    opacity   180ms ease-out;
  pointer-events: none;
  z-index: 0;
}

.f-mine-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: var(--f-text-soft); cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease-out;
}
.f-mine-seg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  line-height: 1;
}
/* 关键：让 label 不论 active 与否都按 bold 宽度占位，避免胶囊跳变 */
.f-mine-seg-label {
  line-height: 1;
  display: inline-block;
  position: relative;
}
.f-mine-seg-label::after {
  content: attr(data-text);
  display: block;
  font-weight: 600;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.f-mine-seg-btn em {
  font-style: normal;
  font-size: 11px;
  color: var(--f-text-muted);
  background: rgba(15, 30, 61, .05);
  padding: 1px 7px;
  border-radius: 999px;
  transition: background .25s ease-out, color .25s ease-out;
}
.f-mine-seg-btn:hover { color: var(--f-primary); }
.f-mine-seg-btn.active {
  color: var(--f-primary);
  font-weight: 600;
}
.f-mine-seg-btn.active em { background: var(--f-primary-tint); color: var(--f-primary); }

/* 帖子列表 */
.f-mine-list { gap: 12px; }

/* 卡片 wrapper：hover 时露出右上操作区 */
.f-mine-card { position: relative; }
.f-mine-card-ops {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 2;
}
.f-mine-card:hover .f-mine-card-ops,
.f-mine-card:focus-within .f-mine-card-ops { opacity: 1; pointer-events: auto; }
.f-mine-op {
  background: #fff;
  border: 1px solid var(--f-divider);
  color: var(--f-text-soft);
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 30, 61, .08);
  transition: background .15s, color .15s, border-color .15s;
}
.f-mine-op:hover { background: var(--f-bg-soft); color: var(--f-primary); border-color: var(--f-primary-tint); }
.f-mine-op.danger:hover { background: #fff0f0; color: #d23030; border-color: #f4caca; }

/* 加载更多 / 没有更多 */
.f-mine-more { margin-top: 20px; text-align: center; }
.f-mine-load-more { min-width: 160px; }
.f-mine-no-more {
  color: var(--f-text-muted);
  font-size: 13px;
  padding: 12px 0;
}

/* 空态 */
.f-mine-empty {
  text-align: center;
  padding: 56px 16px 32px;
  background: var(--f-bg-soft);
  border-radius: 14px;
  color: var(--f-text-soft);
}
.f-mine-empty-icon { font-size: 44px; margin-bottom: 12px; }
.f-mine-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--f-text); }
.f-mine-empty p  { margin: 0 0 20px; font-size: 13.5px; color: var(--f-text-muted); }

/* 窄屏适配 */
@media (max-width: 768px) {
  .f-mine-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
  .f-mine-title { font-size: 20px; }
  .f-mine-back { align-self: flex-end; margin-top: -32px; }
  /* 窄屏：板块多时横向滚动；不强制 flex:1，否则胶囊无法精准对齐 */
  .f-mine-seg { display: flex; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .f-mine-seg-btn { flex: 0 0 auto; padding: 5px 11px; font-size: 12.5px; }
  .f-mine-seg-btn em { font-size: 10.5px; padding: 1px 6px; }
  /* 移动端操作区常显（hover 在触屏无效）*/
  .f-mine-card-ops { opacity: 1; pointer-events: auto; top: 8px; right: 8px; }
  .f-mine-op { padding: 3px 8px; font-size: 11px; }
}

/* ============================================================
   评论 1 级嵌套 + 网球主题反应（M3.5）
   ============================================================ */

/* 评论 thread 容器（顶层评论 + 其下 replies）*/
.f-comment-thread { margin-bottom: 10px; }
.f-comment-thread .f-comment { margin-bottom: 0; }

/* 子回复缩进 + 左侧线 */
.f-comment-replies {
  margin: 8px 0 0 46px;     /* avatar 34 + gap 12 = 46 */
  border-left: 2px solid var(--f-divider);
  padding-left: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.f-comment-replies-list { display: flex; flex-direction: column; gap: 8px; }

/* 子回复评论压缩样式（头像更小，padding 略减）*/
.f-comment--reply {
  padding: 10px 14px;
  background: var(--f-bg-soft);
}
.f-comment--reply .f-comment-avatar { width: 28px; height: 28px; }
.f-comment--reply .f-comment-body { font-size: 13.8px; }

/* "回复 @xxx：" 前缀（出现在 body 开头）*/
.f-comment-reply-prefix {
  color: var(--f-text-muted);
  font-size: 13px;
  margin-right: 4px;
}
.f-comment-reply-prefix strong {
  color: var(--f-primary);
  font-weight: 600;
  cursor: pointer;
}

/* 展开折叠按钮 */
.f-comment-show-more {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--f-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.f-comment-show-more:hover { text-decoration: underline; }

/* 评论操作行（反应 + 回复 + own actions）*/
.f-comment-actions-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px;
}
.f-comment-action-btn {
  background: transparent; border: none; padding: 4px 8px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--f-text-muted); cursor: pointer;
  border-radius: var(--f-radius-xs);
  transition: background .15s, color .15s;
}
.f-comment-action-btn:hover { background: var(--f-bg-soft); color: var(--f-primary); }
.f-comment-action-btn--danger:hover { color: var(--f-danger); background: rgba(201,48,61,.08); }

/* 旧"自己评论操作"块统一并入 actions-row（向后兼容残留样式） */
.f-comment-own-actions { display: inline-flex; gap: 4px; }

/* inline 回复 composer */
.f-comment-reply-composer {
  background: var(--f-bg-elevated);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 10px 12px;
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.f-comment-reply-composer:focus-within { border-color: var(--f-primary); }
.f-comment-reply-chip {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  background: var(--f-primary-tint);
  color: var(--f-primary);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 12px; font-weight: 600;
}
.f-comment-reply-chip-x {
  background: transparent; border: none; padding: 0 4px;
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--f-primary);
}
.f-comment-reply-chip-x:hover { color: var(--f-danger); }
.f-comment-reply-textarea {
  width: 100%; min-height: 50px; border: none; outline: none;
  resize: vertical; font-family: var(--f-font-sans); font-size: 14px;
  color: var(--f-text); line-height: 1.55; background: transparent;
}
.f-comment-reply-textarea::placeholder { color: var(--f-text-faint); }
.f-comment-reply-bar { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   反应主按钮 + 飘条 + 计数
   ============================================================ */

.f-react-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}

.f-react-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 6px 10px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--f-text-muted); cursor: pointer;
  border-radius: var(--f-radius-xs);
  transition: background .15s, color .15s, transform .12s;
}
.f-react-btn:hover { background: var(--f-bg-soft); }
.f-react-btn:active { transform: scale(.96); }
.f-react-btn.is-active { background: var(--f-bg-soft); }
.f-react-btn-emoji { font-size: 16px; line-height: 1; }
.f-react-btn-label { line-height: 1.2; }

/* 6 种反应颜色态（is-active 时由内联 style.color 主导，class 仅作 ID 与 hover 微调）*/
.f-react-btn--like:hover  { color: #1d79f2; }
.f-react-btn--love:hover  { color: #e0245e; }
.f-react-btn--ace:hover   { color: #7cb342; }
.f-react-btn--haha:hover  { color: #f7b125; }
.f-react-btn--fire:hover  { color: #ef6c00; }
.f-react-btn--cry:hover   { color: #5e7ce0; }

/* 计数 + top-3 emoji */
.f-react-count {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 13px; color: var(--f-text-muted); cursor: pointer;
  padding: 2px 6px; border-radius: 999px;
  transition: background .15s;
}
.f-react-count:hover { background: var(--f-bg-soft); }
.f-react-count-emojis {
  display: inline-flex;
  font-size: 13px;
  letter-spacing: -3px;       /* 紧贴重叠风 */
  margin-right: 2px;
}

/* 飘条 */
.f-react-bar {
  position: fixed; z-index: 11400;
  display: flex; align-items: center; gap: 4px;
  background: var(--f-bg-elevated);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 8px 28px rgba(15, 30, 61, .22);
  animation: f-react-bar-in .18s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes f-react-bar-in {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.f-react-emoji {
  background: transparent; border: none; padding: 4px;
  font-size: 28px; line-height: 1; cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom center;
}
.f-react-emoji:hover { transform: scale(1.45) translateY(-4px); }
.f-react-emoji:active { transform: scale(1.2); }

/* 反应分布弹窗 */
.f-react-bd-overlay {
  position: fixed; inset: 0; z-index: 11450;
  background: rgba(15, 30, 61, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: f-react-bd-in .15s ease-out both;
}
@keyframes f-react-bd-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.f-react-bd-card {
  background: var(--f-bg-elevated);
  border-radius: var(--f-radius-lg, 16px);
  padding: 22px 24px 18px;
  width: 320px; max-width: 95vw;
  box-shadow: 0 20px 60px rgba(15, 30, 61, .3);
}
.f-react-bd-title {
  margin: 0 0 14px; font-size: 16px; font-weight: 700;
  color: var(--f-text);
}
.f-react-bd-list { display: flex; flex-direction: column; gap: 6px; }
.f-react-bd-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: var(--f-radius-xs);
  background: var(--f-bg-soft);
}
.f-react-bd-row.is-mine {
  background: var(--f-primary-tint);
  outline: 1px solid var(--f-primary);
}
.f-react-bd-emoji { font-size: 22px; line-height: 1; }
.f-react-bd-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--f-text); }
.f-react-bd-count { font-size: 13px; font-weight: 700; color: var(--f-text-muted); }
.f-react-bd-total {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--f-divider);
  font-size: 12.5px; color: var(--f-text-muted); text-align: center;
}
.f-react-bd-close {
  margin-top: 14px; width: 100%;
  background: var(--f-primary); color: #fff; border: none;
  padding: 9px 0; border-radius: var(--f-radius-xs);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.f-react-bd-close:hover { background: var(--f-primary-soft); }

/* 窄屏 */
@media (max-width: 768px) {
  .f-comment-replies { margin-left: 30px; padding-left: 10px; }
  .f-comment--reply .f-comment-avatar { width: 26px; height: 26px; }
  .f-react-btn { padding: 5px 8px; font-size: 13px; }
  .f-react-emoji { font-size: 26px; padding: 3px; }
  .f-react-bar { padding: 5px 8px; }
}

/* ============================================================
   网球周报（首页区块 + 站内 iframe 阅读器）
   渲染逻辑见 forum/forum.js renderWeeklySection / forumOpenWeekly
   ============================================================ */

/* —— 最新一期：大封面卡 —— */
.f-weekly-latest {
  position: relative;
  display: block;
  min-height: 200px;
  border-radius: var(--f-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background-color: var(--f-primary);
  background-size: cover;
  background-position: center 24%;
  border: 1px solid var(--f-border);
  box-shadow: var(--f-shadow-soft);
  transition: transform .28s cubic-bezier(.34, 1.5, .64, 1), box-shadow .2s;
}
.f-weekly-latest::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 61, 0) 30%, rgba(15, 30, 61, .82) 100%);
}
.f-weekly-latest--nocover {
  background-image: linear-gradient(135deg, var(--f-primary) 0%, var(--f-primary-soft) 60%, var(--f-grass-deep) 100%);
}
.f-weekly-latest:hover {
  transform: translateY(-4px);
  box-shadow: var(--f-shadow-pop);
}
.f-weekly-new {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--f-tennis);
  color: var(--f-text);
  font-family: var(--f-font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--f-radius-pill);
  box-shadow: var(--f-shadow-yellow);
}
.f-weekly-latest-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px;
}
.f-weekly-latest-meta strong {
  font-family: var(--f-font-display);
  font-size: 19px; font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.f-weekly-latest-meta small {
  font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— 往期：横向滚动小卡 —— */
.f-weekly-past-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
}
.f-weekly-past-label {
  flex: none;
  font-size: 13px; font-weight: 700;
  color: var(--f-text-muted);
}
.f-weekly-past-scroll {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.f-weekly-past-card {
  flex: none;
  width: 132px;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none;
  color: var(--f-text);
  transition: transform .2s ease;
}
.f-weekly-past-card:hover { transform: translateY(-3px); }
.f-weekly-past-thumb {
  display: block;
  width: 132px; height: 80px;
  border-radius: var(--f-radius);
  background-size: cover;
  background-position: center 24%;
  background-color: var(--f-bg-soft);
  border: 1px solid var(--f-border);
  box-shadow: var(--f-shadow-soft);
}
.f-weekly-past-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: linear-gradient(135deg, var(--f-bg-soft), var(--f-tennis-soft));
}
.f-weekly-past-name {
  font-size: 12.5px; font-weight: 600;
  line-height: 1.35;
  color: var(--f-text-soft);
}

/* —— 站内 iframe 阅读器（z-index 11800：高于 hovercard/用户菜单，低于登录/toast） —— */
.f-weekly-viewer-overlay {
  position: fixed; inset: 0; z-index: 11800;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 30, 61, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fWeeklyFade .18s ease;
}
@keyframes fWeeklyFade { from { opacity: 0; } to { opacity: 1; } }
.f-weekly-viewer {
  display: flex; flex-direction: column;
  width: 100%; max-width: 900px; height: 100%; max-height: 88vh;
  background: var(--f-bg-elevated);
  border-radius: var(--f-radius-lg);
  overflow: hidden;
  box-shadow: var(--f-shadow-pop);
}
.f-weekly-viewer-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--f-divider);
  background: var(--f-bg-elevated);
}
.f-weekly-viewer-title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-font-display);
  font-size: 15px; font-weight: 700;
  color: var(--f-text);
  min-width: 0;
}
.f-weekly-viewer-title strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f-weekly-viewer-actions {
  flex: none;
  display: flex; align-items: center; gap: 6px;
}
.f-weekly-viewer-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-pill);
  background: var(--f-bg-soft);
  color: var(--f-text-soft);
  font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.f-weekly-viewer-btn:hover { background: var(--f-primary-tint); color: var(--f-primary); border-color: var(--f-primary); }
.f-weekly-viewer-btn:disabled { opacity: .4; cursor: not-allowed; }
.f-weekly-viewer-btn:disabled:hover { background: var(--f-bg-soft); color: var(--f-text-soft); border-color: var(--f-border); }
.f-weekly-viewer-close { padding: 0; width: 32px; justify-content: center; font-size: 15px; }
.f-weekly-viewer-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 768px) {
  .f-weekly-latest { min-height: 170px; }
  .f-weekly-latest-meta strong { font-size: 17px; }
  .f-weekly-viewer-overlay { padding: 0; }
  .f-weekly-viewer { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .f-weekly-viewer-btn-label { display: none; }
  .f-weekly-viewer-btn { padding: 0 10px; }
}