/* ============================================================
   forum 模板 — 论坛风格（参考土狗社区）
   顶栏白底 / 左侧板块导航 / 帖子列表 + 右侧社区侧栏 / 楼层回帖
   ============================================================ */
:root {
  --f-primary: #2f6fed;
  --f-accent: #f97316;
  --f-bg: #f4f6f9;
  --f-card: #ffffff;
  --f-text: #1f2733;
  --f-sub: #9aa4b2;
  --f-line: #e8ebf0;
  --f-radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--f-bg); color: var(--f-text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
a { color: inherit; }

/* ---------- 顶栏 ---------- */
.f-topbar { background: #fff; border-bottom: 1px solid var(--f-line); position: sticky; top: 0; z-index: 100; }
.f-topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 20px; }
.f-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; color: var(--f-text); flex-shrink: 0; }
.f-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--f-primary), #6366f1); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.f-search { flex: 1; max-width: 420px; display: flex; }
.f-search-input { flex: 1; height: 36px; border: 1.5px solid var(--f-line); border-right: 0; border-radius: 8px 0 0 8px; padding: 0 12px; font-size: 13px; outline: none; background: #f8fafc; }
.f-search-input:focus { border-color: var(--f-primary); background: #fff; }
.f-search-btn { width: 40px; height: 36px; border: 1.5px solid var(--f-line); border-left: 0; border-radius: 0 8px 8px 0; background: #f8fafc; color: var(--f-sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.f-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.f-signin-btn { height: 34px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--f-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.f-signin-btn:hover { opacity: .9; }
.f-signin-btn.signed { background: #e5e7eb; color: #6b7280; cursor: pointer; }
.f-user-chip { display: flex; align-items: center; gap: 7px; text-decoration: none; font-size: 13px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--f-line); }
.f-user-chip:hover { border-color: var(--f-primary); }
.f-user-pts { color: var(--f-sub); font-size: 11px; }
.f-top-link { color: var(--f-sub); text-decoration: none; font-size: 13px; }
.f-top-link-strong { color: var(--f-primary); font-weight: 600; }

/* ---------- 布局 ---------- */
.f-wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }
.f-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .f-layout { grid-template-columns: minmax(0, 1fr) 280px; } .f-boardnav { grid-row: 2; grid-column: 1 / -1; flex-direction: row; overflow-x: auto; } }
@media (max-width: 760px) { .f-layout { grid-template-columns: 1fr; } .f-sidebar { order: 3; } }

/* ---------- 左侧板块导航 ---------- */
.f-boardnav { background: var(--f-card); border-radius: var(--f-radius); border: 1px solid var(--f-line); padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.f-boardnav a { padding: 9px 12px; border-radius: 8px; text-decoration: none; color: #4b5563; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.f-boardnav a:hover { background: #f3f4f6; }
.f-boardnav a.on { background: #eef4ff; color: var(--f-primary); font-weight: 600; }
.f-boardnav .f-boardnav-cur { padding: 9px 12px; color: var(--f-sub); font-size: 13.5px; }
/* 横向变体（用户中心页头导航条） */
.f-boardnav.f-boardnav-h { flex-direction: row; overflow-x: auto; position: static; margin-bottom: 14px; padding: 6px; }
.f-boardnav.f-boardnav-h a { white-space: nowrap; }

/* ---------- Tabs ---------- */
.f-main { min-width: 0; }
.f-tabs { background: var(--f-card); border-radius: var(--f-radius) var(--f-radius) 0 0; border: 1px solid var(--f-line); border-bottom: 0; padding: 10px 16px 0; display: flex; gap: 4px; align-items: center; }
.f-tabs a { padding: 8px 14px; text-decoration: none; color: #6b7280; font-size: 14px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; }
.f-tabs a:hover { color: var(--f-text); }
.f-tabs a.on { color: var(--f-primary); font-weight: 600; border-bottom-color: var(--f-primary); }
.f-tabs-post { margin-left: auto; color: var(--f-accent) !important; font-weight: 600; }
.f-tabs a.f-tabs-post { display: inline-flex; align-items: center; gap: 5px; }
.f-tabs a.f-tabs-post svg { width: 15px; height: 15px; flex: 0 0 auto; }