/* ==========================================================================
   ElecMPN Community Forum — Unified Design System
   Pages: Homepage, Brand Section (list), Topic Detail
   ========================================================================== */

/* ---- Layout ---- */
.forum-main {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px 70px;
  box-sizing: border-box;
}
/* SSR pages render <main class="forum-main">; keep the community aligned with the site-wide 1380px container */
body.desktop-only main.forum-main {
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 0 24px 70px !important;
  box-sizing: border-box !important;
}
.forum-container { width: 100%; }

/* ---- Community page background ---- */
body.desktop-only.forum-page { background: var(--bg2, #f5f7fa); padding-top: 150px !important; overflow-x: clip !important; overflow-y: visible !important; }
/* 全局 html,body{overflow-x:hidden} 会让 html/body 成为滚动容器，破坏侧栏 position:sticky。
   论坛页恢复 html 的 overflow（两轴），并用 clip 处理 body 横向溢出（clip 不产生滚动容器），
   使 sticky 侧栏能正常吸附在视口下方。 */
html:has(body.forum-page) { overflow: visible; }
body.forum-page { overflow-x: clip !important; overflow-y: visible !important; }
body.forum-page .forum-main { background: transparent; }

/* ---- Shared surface card ---- */
.fc-card {
  background: var(--bg, var(--bg));
  border: 1px solid var(--rule, var(--rule));
  border-radius:4px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .08);
}

/* ==========================================================================
   1. HOMEPAGE
   ========================================================================== */

/* ---- Hero ---- */
.community-hero {
  position: relative;
  text-align: center;
  padding: 56px 16px 40px;
  overflow: hidden;
}
.community-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(0,102,204,.10), transparent 60%),
    radial-gradient(800px 300px at 85% 0%, rgba(0,102,204,.08), transparent 60%);
  pointer-events: none;
}
.community-hero-inner { max-width: 760px; margin: 0 auto; position: relative; }
.community-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius:4px;
  background: var(--accent-soft, #e8f4fd); color: var(--accent, var(--accent));
  font-size: 13px; font-weight: 600; letter-spacing: .4px; margin-bottom: 18px;
}
.community-hero h1 { font-size: 40px; margin: 0 0 12px; line-height: 1.15; letter-spacing: -.5px; }
.community-hero-sub {
  color: var(--muted, var(--muted)); font-size: 16px; line-height: 1.7; margin: 0 auto 26px;
  max-width: 620px;
}
.community-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 11px 22px; border-radius:4px;
  font-weight: 600; box-shadow: 0 6px 16px -8px rgba(0,102,204,.5);
}
.community-hero .forum-search-bar { max-width: 620px; margin: 0 auto; }

/* ---- Stats ---- */
.community-stats {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 4px 0 40px;
}
.stat-item {
  background: var(--bg, var(--bg)); border: 1px solid var(--rule, var(--rule));
  border-radius:4px; padding: 10px 22px; text-align: center;
  display: inline-flex; align-items: baseline; gap: 8px;
  transition: transform .15s, box-shadow .2s;
}
.stat-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(16,24,40,.14); }
.stat-num {
  font-size: 18px; font-weight: 700; color: var(--accent, var(--accent));
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 12px; color: var(--muted, var(--muted)); letter-spacing: .2px; }

/* ---- Home blocks ---- */
.home-block { margin-bottom: 44px; }
.home-block-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;
}
.home-block-title { font-size: 22px; margin: 0; letter-spacing: -.3px; }
.home-block-title::before {
  content: ""; display: inline-block; width: 4px; height: 18px; border-radius:4px;
  background: var(--accent, var(--accent)); margin-right: 10px; vertical-align: -2px;
}
.home-block-sub { font-size: 13px; color: var(--muted, var(--muted)); }
.home-topics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.home-topics-col .forum-topic-list {
  border: 1px solid var(--rule, var(--rule)); border-radius:4px; overflow: hidden; background: var(--bg, var(--bg));
}
.home-topics-col .forum-topic-item:last-child { border-bottom: 0; }

/* ---- Pinned cards (home) ---- */
/* ---- Special section entry cards (top of content area) ---- */
.special-entries {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px;
}
.special-entry-card {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius:4px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #f0f5ff, #e8efff);
  border: 1px solid #d3def5;
  transition: box-shadow .2s, border-color .2s, transform .15s;
}
.special-entry-card:hover {
  border-color: var(--accent, var(--accent));
  box-shadow: 0 10px 24px -12px rgba(0,102,204,.25);
  transform: translateY(-2px);
}
.special-entry-card .sec-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--bg); border-radius:4px;
}
.special-entry-card .sec-info { flex: 1; min-width: 0; }
.special-entry-card .sec-name {
  font-size: 15px; font-weight: 700; color: var(--text, var(--ink)); margin-bottom: 2px;
}
.special-entry-card .sec-desc {
  font-size: 11px; color: var(--muted, var(--muted));
}
.special-entry-card .sec-count {
  font-size: 20px; font-weight: 700; color: var(--accent, var(--accent));
  text-align: right; flex-shrink: 0; line-height: 1;
}
.special-entry-card .sec-count span {
  display: block; font-size: 10px; font-weight: 500; color: var(--muted, var(--muted2));
  margin-top: 4px; text-transform: uppercase; letter-spacing: .3px;
}
/* 暗黑模式：首页三个特殊版块卡片 */
[data-theme="dark"] .special-entry-card {
  background: linear-gradient(135deg, #172033, #1a2740); border-color: #2c3a55;
}
[data-theme="dark"] .special-entry-card:hover {
  border-color: #4da3ff; box-shadow: 0 10px 24px -12px rgba(77,163,255,.35);
}
[data-theme="dark"] .special-entry-card .sec-icon { background: #263449; }
[data-theme="dark"] .special-entry-card .sec-name { color: var(--ink); }
[data-theme="dark"] .special-entry-card .sec-desc { color: var(--muted); }
[data-theme="dark"] .special-entry-card .sec-count { color: #4da3ff; }

/* ---- Home filter tab bar ---- */
.home-filter {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.home-filter-tabs {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--rule, var(--rule));
  flex: 1;
}
.home-filter .forum-new-btn { white-space: nowrap; margin-bottom: 6px; }
.home-filter-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--muted, var(--muted));
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.home-filter-tab:hover { color: var(--text, var(--ink)); }
.home-filter-tab.active {
  color: var(--accent, var(--accent)); font-weight: 600; border-bottom-color: var(--accent, var(--accent));
}

/* ---- Brand section grid ---- */
.forum-sections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.forum-section-card {
  border: 1px solid var(--rule, var(--rule)); border-radius:4px; padding: 18px 20px;
  text-decoration: none; color: inherit; background: var(--bg, var(--bg));
  display: flex; align-items: center; gap: 16px;
  transition: box-shadow .2s, border-color .2s, transform .15s;
}
.forum-section-card:hover {
  border-color: var(--accent, var(--accent)); box-shadow: 0 10px 24px -12px rgba(0,102,204,.18); transform: translateY(-2px);
}
.forum-section-card .fsc-logo {
  width: 52px; height: 52px; border-radius:4px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--rule, var(--bg3)); padding: 6px; flex-shrink: 0;
}
.forum-section-card .fsc-logo-fallback {
  width: 52px; height: 52px; border-radius:4px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent, var(--accent)), #3b82d0);
  color: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.forum-section-card .fsc-info { flex: 1; min-width: 0; }
.forum-section-card .fsc-name { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.forum-section-card .fsc-count { font-size: 12px; color: var(--muted, var(--muted)); }
.forum-section-card .fsc-count b { color: var(--text, var(--ink)); font-weight: 600; }
.forum-section-card .fsc-active { font-size: 12px; color: var(--muted2); margin-top: 3px; }
.forum-section-card .fsc-arrow {
  font-size: 22px; color: #c3cad4; font-weight: 300; flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.forum-section-card:hover .fsc-arrow { color: var(--accent, var(--accent)); transform: translateX(3px); }

/* ==========================================================================
   2. TOPIC LIST ITEM (home & section)
   ========================================================================== */
.forum-topic-list { display: flex; flex-direction: column; gap: 0; }
.forum-topic-item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--rule, var(--bg3));
  text-decoration: none; color: inherit; transition: background .15s;
}
.forum-topic-item:hover { background: var(--bg-hover, #f7f9fc); }
.fti-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.fti-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius:4px;
  background: var(--accent-soft, #e8f4fd); color: var(--accent, var(--accent));
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.fti-rank.top { background: linear-gradient(135deg, #ff8a3d, #ff5c1f); color: var(--bg); }
.fti-rank.top2 { background: linear-gradient(135deg, #ffb03d, #ff8a00); color: var(--bg); }
.fti-rank.top3 { background: linear-gradient(135deg, #ffce5c, #f0a500); color: var(--bg); }
.fti-title {
  font-size: 15px; font-weight: 400; color: var(--text, var(--ink)); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fti-title:hover { color: var(--accent, var(--accent)); }
/* Featured (highlighted) topics: title text shown in red (regular weight) */
.fti-title-featured { color: #e02424; }
.fti-title-featured:hover { color: #b91c1c; }
[data-theme="dark"] .fti-title-featured { color: #ff6b6b; }
[data-theme="dark"] .fti-title-featured:hover { color: #ff9999; }
.fti-mpn { font-size: 12px; color: var(--accent, var(--accent)); font-family: monospace; flex-shrink: 0; font-weight: 600; }
.fti-mpn.lc-obsolete { color: #c02828; }
.fti-mpn.lc-active { color: var(--accent); font-size: 13px; }
.fti-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted, var(--muted)); white-space: nowrap; }
.fti-meta .fti-stat { display: inline-flex; align-items: center; gap: 4px; }
.fti-meta .fti-stat svg { width: 13px; height: 13px; opacity: .7; }
.fti-author { display: inline-flex; align-items: center; gap: 6px; }
.fti-avatar {
  width: 22px; height: 22px; border-radius:50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent, var(--accent)), #3b82d0);
  color: var(--bg); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.fti-hot { color: #ff5c1f; font-weight: 600; }

/* ==========================================================================
   3. SECTION (LIST) PAGE
   ========================================================================== */

/* ---- Breadcrumb ---- */
.forum-breadcrumb {
  font-size: 13px; color: var(--muted, var(--muted)); margin: 18px 0 20px; padding: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.forum-breadcrumb a { color: var(--accent, var(--accent)); text-decoration: none; font-weight: 500; }
.forum-breadcrumb a:hover { text-decoration: underline; }
.forum-breadcrumb .sep { color: #c3cad4; }

/* ---- Section header ---- */
.forum-section-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 26px;
  padding: 16px 28px; border-radius:4px;
  background: linear-gradient(120deg, var(--bg, var(--bg)), var(--bg-hover, #f5f8fc));
  border: 1px solid var(--rule, var(--rule));
}
.forum-section-header .fs-avatar {
  width: 100px; height: 100px; border-radius:4px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--rule, var(--bg3)); padding: 8px; flex-shrink: 0;
}
.forum-section-header .fs-avatar-fallback {
  width: 100px; height: 100px; border-radius:4px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent, var(--accent)), #3b82d0);
  color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700;
}
.forum-section-header .fs-info { flex: 1; min-width: 0; }
.forum-section-header h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.4px; display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap; min-width: 0; }
.forum-section-header .fs-desc { font-size: 14px; color: var(--muted, var(--muted)); margin: 0; }
.forum-section-header .fs-stats { display: inline-flex; align-items: baseline; gap: 16px; margin: 0 0 2px; font-size: 13px; color: var(--muted, var(--muted)); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.forum-section-header .fs-stats b { color: var(--accent, var(--accent)); font-size: 15px; margin-right: 2px; font-weight: 600; }
.forum-new-btn { white-space: nowrap; }

/* ---- Section toolbar ---- */
.forum-section-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.forum-section-toolbar .fst-title { font-size: 16px; font-weight: 600; }
.forum-section-toolbar .fst-count { font-size: 13px; color: var(--muted, var(--muted)); }

/* ==========================================================================
   4. TOPIC DETAIL PAGE
   ========================================================================== */

/* ---- Component comparison bar ---- */
.forum-comp-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 20px; margin-bottom: 24px;
  background: linear-gradient(135deg, #f0f5ff, #e8efff); border: 1px solid #d3def5; border-radius:4px;
  box-sizing: border-box;
}
.forum-spec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; flex: 1; min-width: 0;
}
.fsg-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fsg-label { font-size: 11px; color: var(--muted, var(--muted)); text-transform: uppercase; letter-spacing: .4px; }
.fsg-val { font-size: 14px; font-weight: 400; color: var(--text, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsg-cell.fsg-brand { grid-column: span 1; }
.fsg-cell.fsg-brand .fsg-val { display: flex; align-items: center; gap: 8px; }
.fsg-cell.fsg-mpn .fsg-val { color: var(--accent, var(--accent)); font-family: monospace; font-weight: 400; }
.fsg-val.fsg-price { color: #e03131; font-weight: 400; }
.fsg-val.fsg-stock { color: #1e7e46; font-weight: 400; }
.fsg-cell.fsg-status .fsg-val { display: inline-flex; align-items: center; gap: 6px; }
.fsg-cell.fsg-status .fsg-val.fsg-status-obsolete { color: #c02828; }
.fsg-cell.fsg-status .fsg-val.fsg-status-active { color: #1e7e46; }
.forum-comp-bar .fcb-link {
  font-size: 13px; color: var(--accent, var(--accent)); text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.forum-comp-bar .fcb-link:hover { text-decoration: underline; }
/* ---- 右侧操作区：View Component Details 链接 + 规格书/制造商链接（垂直排列） ---- */
.forum-comp-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-left: auto; flex-shrink: 0;
}
/* ---- 规格书 + 制造商链接行（链接下方，纯文字小链接，无底框无LOGO） ---- */
.forum-comp-docs {
  display: flex; align-items: center; gap: 12px;
}
.fcd-link {
  font-size: 11px; color: var(--text, var(--ink)); text-decoration: none;
  font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.fcd-link-mfr { color: var(--text, var(--ink)); }
.fcd-link-ds { color: #e03131; }
.fcd-link:hover { text-decoration: underline; }
[data-theme="dark"] .fcd-link-mfr { color: var(--bg3); }
[data-theme="dark"] .fcd-link-ds { color: #ff6b6b; }
/* 暗黑模式：组件参数条（forum-comp-bar）背景/边框/语义色适配 */
[data-theme="dark"] .forum-comp-bar {
  background: linear-gradient(135deg, #172033, #1a2740); border-color: #2c3a55;
}
[data-theme="dark"] .fsg-val.fsg-price { color: #ff6b6b; }
[data-theme="dark"] .fsg-val.fsg-stock { color: #4ade80; }
[data-theme="dark"] .fsg-cell.fsg-status .fsg-val.fsg-status-obsolete { color: #f87171; }
[data-theme="dark"] .fsg-cell.fsg-status .fsg-val.fsg-status-active { color: #4ade80; }
[data-theme="dark"] .forum-comp-bar-empty { background: #172033; border-color: #2c3a55; color: var(--muted); }
.forum-comp-bar-empty { background: #f7f8fa; border-color: var(--rule); color: var(--muted, var(--muted)); font-size: 14px; }
.forum-comp-bar-empty .fcb-link { margin-left: auto; }

/* ---- Community search page ---- */
.forum-search-head { padding: 4px 0 16px; }
.forum-search-title { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--text, var(--ink)); }
.forum-search-form { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.forum-search-input { flex: 1; min-width: 0; padding: 0 14px; height: 40px; font-size: 15px; border: 1.5px solid var(--accent, var(--accent)); border-radius:4px 0 0 4px; outline: none; background: var(--bg2, var(--bg)); color: var(--ink, var(--ink)); }
.forum-search-btn { padding: 0 20px; height: 40px; font-size: 14px; font-weight: 600; background: var(--accent, var(--accent)); color: var(--bg); border: none; border-radius:0 4px 4px 0; cursor: pointer; white-space: nowrap; }

/* ---- Topic detail card ---- */
.forum-topic-card { padding: 28px 30px; margin-bottom: 28px; }
.ftd-title { font-size: 26px; margin: 0 0 16px; line-height: 1.35; letter-spacing: -.4px; }
.ftd-title-featured { color: #7c3aed; }
[data-theme="dark"] .ftd-title-featured { color: #a78bfa; }
/* Site-wide pin -> red title; section pin -> blue title; featured -> purple title */
.ftd-title-globalpin { color: #e02424; }
[data-theme="dark"] .ftd-title-globalpin { color: #ff6b6b; }
.ftd-title-pinned { color: #0b66c3; }
[data-theme="dark"] .ftd-title-pinned { color: #4da3ff; }

/* ---- Site-wide pinned topics (same row style as the list below) ---- */
.home-global-pin-list {
  margin-bottom: 4px;
}
.home-global-pin-list .ftd-row {
  background: rgba(224,36,36,.04);
  border-radius:4px;
  padding: 10px 12px;
}
[data-theme="dark"] .home-global-pin-list .ftd-row {
  background: rgba(255,107,107,.06);
}
/* Pinned topic title stays red (override the default list title color) */
.home-global-pin-list .ftd-title.ftd-title-globalpin,
.ftd-list .ftd-title.ftd-title-globalpin,
.ftd-list .ftd-title.ftd-title-globalpin:hover,
.ftd-title.ftd-title-globalpin {
  color: #e02424;
}
[data-theme="dark"] .home-global-pin-list .ftd-title.ftd-title-globalpin,
[data-theme="dark"] .ftd-list .ftd-title.ftd-title-globalpin,
[data-theme="dark"] .ftd-list .ftd-title.ftd-title-globalpin:hover,
[data-theme="dark"] .ftd-title.ftd-title-globalpin {
  color: #ff6b6b;
}
.ftd-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  font-size: 13px; color: var(--muted, var(--muted));
  padding-bottom: 18px; border-bottom: 1px solid var(--rule, var(--bg3)); margin-bottom: 20px;
}
.ftd-meta .ftd-author { color: var(--text, var(--ink)); font-weight: 600; }
.ftd-mpn-txt { color: var(--accent, var(--accent)); font-family: monospace; font-weight: 600; }
.ftd-txt { color: var(--muted, var(--muted)); }
.ftd-content { font-size: 15px; line-height: 1.75; color: var(--text, #232d3f); }
.ftd-images { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.forum-topic-image { max-width: 320px; max-height: 320px; border-radius:4px; border: 1px solid var(--rule, var(--bg3)); }

/* ---- Replies ---- */
.forum-replies-card { padding: 26px 28px 14px; margin-bottom: 28px; }
.forum-replies-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.forum-replies-title {
  font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px;
}
.forum-replies-title .r-count {
  font-size: 13px; font-weight: 600; color: var(--accent, var(--accent));
  background: var(--accent-soft, #e8f4fd); padding: 2px 10px; border-radius:4px;
}
.forum-replies-sub { font-size: 13px; color: var(--muted, var(--muted)); margin: 0; }
.forum-reply { padding: 18px 0; border-bottom: 1px solid var(--rule, #f0f2f6); }
.forum-reply:last-child { border-bottom: 0; }
.fr-body { min-width: 0; }
.fr-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; }
.fr-header strong { color: var(--text, var(--ink)); }
.fr-floor {
  color: var(--muted, var(--muted2)); font-size: 12px; background: var(--bg-hover, #f5f8fc);
  padding: 1px 8px; border-radius:4px;
}
.fr-time { color: var(--muted, var(--muted2)); font-size: 12px; }
.fr-content { font-size: 14px; line-height: 1.7; color: var(--text, #232d3f); }
.forum-reply-image { max-width: 220px; max-height: 220px; border-radius:4px; margin-top: 10px; border: 1px solid var(--rule, var(--bg3)); }

/* ---- Image viewer overlay (click to view full size) ---- */
.forum-img-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 16, 28, .86);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: forumImgFade .18s ease;
}
.forum-img-overlay .forum-img-full {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  border-radius:4px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.6);
  cursor: default; background: var(--bg);
}
@keyframes forumImgFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Reply form ---- */
.forum-reply-form {
  background: linear-gradient(180deg, var(--bg, var(--bg)), var(--bg-hover, #f7f9fc));
  border: 1px solid var(--rule, var(--rule)); border-radius:4px; padding: 24px 26px;
}
.forum-reply-form h3 { margin: 0 0 14px; font-size: 14px; }
.forum-upload-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.forum-upload-btn {
  display: inline-block; cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--accent, var(--accent)); background: var(--accent-soft, #e8f4fd);
  border: 1px solid var(--accent-soft, #d6e9fb); border-radius:4px; padding: 7px 14px;
  transition: background .15s;
}
.forum-upload-btn:hover { background: var(--accent-soft, #d6e9fb); }
.forum-upload-row input[type="file"] { display: none; }
.forum-upload-name { font-size: 13px; color: var(--muted, var(--muted)); }
.forum-reply-form textarea {
  width: 100%; min-height: 105px; padding: 12px 14px; border: 1px solid var(--rule, #d6dce6);
  border-radius:4px; font-size: 14px; resize: vertical; box-sizing: border-box; background: var(--bg, var(--bg));
}
.forum-reply-form textarea:focus { outline: none; border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 3px rgba(0,102,204,.12); }
.forum-reply-form .btn { margin-top: 12px; }

/* ==========================================================================
   5. NEW TOPIC + SEARCH + FORMS
   ========================================================================== */

/* ---- Generic form card ---- */
.forum-form-card { padding: 28px 30px; }
.forum-form-card h1 { font-size: 24px; margin: 0 0 20px; letter-spacing: -.3px; }
.forum-form-group { margin-bottom: 20px; }
.forum-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.forum-form-group input, .forum-form-group textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--rule, #d6dce6); border-radius:4px;
  font-size: 14px; box-sizing: border-box; background: var(--bg, var(--bg));
}
.forum-form-group input:focus, .forum-form-group textarea:focus { outline: none; border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 3px rgba(0,102,204,.12); }
.forum-form-hint { font-size: 12px; color: var(--muted, var(--muted)); margin-top: 5px; }
.forum-validation { padding: 10px 14px; border-radius:4px; font-size: 13px; margin-bottom: 14px; }
.forum-validation.ok { background: #e8f7ee; color: #1e7e46; border: 1px solid #c9ecda; }
.forum-validation.warn { background: #fff6e8; color: #b45309; border: 1px solid #ffe4bf; }
.forum-validation.err { background: #fdecec; color: #c02828; border: 1px solid #f8c9c9; }

/* ---- MPN verified 参数卡片：验证成功后自动展示完整参数 ---- */
.mpn-param-card {
  background: #f0f4f8; border: 1px solid #dbe4ee; border-radius:4px;
  padding: 14px 16px; margin-bottom: 14px;
}
.mpn-param-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .3px;
  margin-bottom: 12px; text-transform: uppercase;
}
.mpn-param-link { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; text-transform: none; letter-spacing: 0; }
.mpn-param-link:hover { text-decoration: underline; }
.mpn-param-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px;
}
.mpn-param-cell { min-width: 0; }
.mpn-param-label {
  font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 3px;
}
.mpn-param-value { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; }
.mpn-param-value.mpn-param-price { color: #dc2626; }
.mpn-param-value.mpn-param-stock { color: #16a34a; }
.mpn-param-value.mpn-param-obsolete { color: #dc2626; }
.mpn-param-value.mpn-param-active { color: #16a34a; }
.mpn-param-mpn { color: var(--accent); text-decoration: none; }
.mpn-param-mpn:hover { text-decoration: underline; }
/* ---- 规格书 + 制造商行 ---- */
.mpn-param-docs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #dbe4ee;
}
.mpn-param-doc-cell { min-width: 0; }
.mpn-param-mfr, .mpn-param-ds { color: var(--accent); text-decoration: none; font-weight: 600; }
.mpn-param-mfr:hover, .mpn-param-ds:hover { text-decoration: underline; }
.mpn-param-ds { word-break: break-all; }
@media (max-width: 640px) {
  .mpn-param-docs { grid-template-columns: 1fr; }
}
[data-theme="dark"] .mpn-param-docs { border-top-color: var(--ink-soft); }
[data-theme="dark"] .mpn-param-mfr, [data-theme="dark"] .mpn-param-ds { color: var(--accent); }
@media (max-width: 640px) {
  .mpn-param-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-theme="dark"] .mpn-param-card { background: #172033; border-color: #2c3a55; }
[data-theme="dark"] .mpn-param-head { color: #e6edf7; }
[data-theme="dark"] .mpn-param-label { color: var(--muted); }
[data-theme="dark"] .mpn-param-value { color: var(--bg3); }
[data-theme="dark"] .mpn-param-mpn { color: var(--accent); }
[data-theme="dark"] .mpn-param-link { color: var(--accent); }

/* ---- Search bar ---- */
.forum-search-bar { display: flex; gap: 10px; margin-bottom: 24px; }
.forum-search-bar input {
  flex: 1; padding: 13px 18px; border: 1px solid var(--rule, #d6dce6); border-radius:4px;
  font-size: 15px; background: var(--bg, var(--bg));
}
.forum-search-bar input:focus { outline: none; border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 3px rgba(0,102,204,.12); }
.forum-search-bar button { border-radius:4px; padding: 13px 24px; }

/* ---- Empty state ---- */
.forum-empty {
  text-align: center; padding: 40px 20px; color: var(--muted, var(--muted)); font-size: 15px;
}
.forum-empty .fe-title { font-size: 15px; font-weight: 600; color: var(--text, var(--ink)); display: inline; }
.forum-empty .fe-sub { font-size: 15px; color: var(--muted, var(--muted)); display: inline; margin-left: 8px; }

/* ==========================================================================
   6. PRODUCT PAGE DISCUSSION BLOCK
   ========================================================================== */
/* ========== 供应商页社区贴子区块（分栏：最新 / 最多访问） ========== */
.product-forum-block { margin-top: 40px; padding-top: 8px; }
.pfd-wrap { width: 100%; }
.pfd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--rule, var(--rule));
}
.pfd-head-title {
  font-size: 16px; font-weight: 700; margin: 0; color: var(--text, var(--ink));
  display: flex; align-items: center; gap: 10px;
}
.pfd-head-title::before {
  content: ''; width: 4px; height: 18px; border-radius:4px;
  background: linear-gradient(180deg, var(--accent), var(--accent));
}
.pfd-head-more {
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.pfd-head-more:hover { text-decoration: underline; }
.pfd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.pfd-col { min-width: 0; }
.pfd-col-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text, var(--ink));
  margin-bottom: 12px; letter-spacing: .2px;
}
.pfd-col-bar { width: 3px; height: 14px; border-radius:4px; background: var(--accent); }
.pfd-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule, var(--rule)); border-radius:4px; overflow: hidden;
  background: var(--bg, var(--bg));
}
.pfd-item {
  display: block; text-decoration: none; color: inherit;
  padding: 7px 14px; background: var(--bg, var(--bg));
  border-bottom: 1px solid var(--rule, var(--bg3));
  transition: background .15s;
}
.pfd-item:last-child { border-bottom: 0; }
.pfd-item:hover { background: var(--bg-hover, #f6f8fb); }
.pfd-title {
  font-size: 14px; font-weight: 400; color: var(--text, var(--ink));
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pfd-item:hover .pfd-title { color: var(--accent); }
.pfd-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--muted, var(--muted)); flex-wrap: wrap;
}
.pfd-author { display: inline-flex; align-items: center; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfd-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pfd-stat svg { width: 13px; height: 13px; flex-shrink: 0; }
.pfd-time { margin-left: auto; white-space: nowrap; }
.pfd-empty {
  border: 1px dashed var(--rule, #d3d9e2); border-radius:4px;
  padding: 28px 16px; text-align: center; color: var(--muted, var(--muted)); font-size: 13px;
}
[data-theme="dark"] .pfd-item { background: transparent; }
[data-theme="dark"] .pfd-list { background: #172033; }
[data-theme="dark"] .pfd-item:hover { background: #263449; }
@media (max-width: 720px) {
  .pfd-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   9. HOMEPAGE — FORUM.TRAE.CN STYLE (category bar + topic table + hot cards)
   ========================================================================== */

/* ---- Category tab bar (brand sections as horizontal chips) ---- */
.forum-cat-section { margin-bottom: 28px; }
.forum-cat-bar {
  display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto;
  padding: 14px 16px; background: var(--bg, var(--bg)); border: 1px solid var(--rule, var(--rule));
  border-radius:4px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.forum-cat-tab {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 14px; border-radius:4px; text-decoration: none;
  color: var(--text, var(--ink)); background: var(--bg2, #f0f3f8);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.forum-cat-tab:hover { background: var(--bg-hover, #e6ecf5); }
.forum-cat-tab.active {
  background: var(--accent, var(--accent)); color: var(--bg); border-color: var(--accent, var(--accent));
}
.forum-cat-tab .fct-logo { width: 20px; height: 20px; border-radius:4px; object-fit: contain; }
.forum-cat-tab .fct-fallback {
  width: 20px; height: 20px; border-radius:4px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent, var(--accent)), #3b82d0); color: var(--bg); font-size: 11px; font-weight: 700;
}
.forum-cat-tab .fct-all-icon { width: 18px; height: 18px; }
.forum-cat-tab .fct-name { font-size: 13px; font-weight: 500; }
.forum-cat-tab .fct-count {
  font-size: 11px; font-weight: 600; color: var(--muted, var(--muted));
  background: rgba(127,127,127,.14); border-radius:4px; padding: 1px 8px; min-width: 18px; text-align: center;
}
.forum-cat-tab.active .fct-count { color: var(--bg); background: rgba(255,255,255,.22); }
[data-theme="dark"] .forum-cat-tab { background: #172033; color: #e6edf7; }
[data-theme="dark"] .forum-cat-tab:hover { background: #263449; }
[data-theme="dark"] .forum-cat-tab .fct-count { color: #aab4c4; }
[data-theme="dark"] .forum-cat-tab.active { background: var(--accent); color: var(--bg); }

/* ---- Topic table (forum.trae.cn style) ---- */
.forum-topic-table {
  background: var(--bg, var(--bg)); border: 1px solid var(--rule, var(--rule));
  border-radius:4px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.forum-topic-table .ftt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 170px 62px 62px 96px;
  gap: 12px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--rule, var(--bg3));
  transition: background .15s;
}
.forum-topic-table .ftt-row:last-child { border-bottom: 0; }
.forum-topic-table .ftt-row:not(.ftt-head):hover { background: var(--bg-hover, #f7f9fc); }
.forum-topic-table .ftt-row.ftt-head {
  background: var(--bg2, #f2f5fa); padding: 10px 18px; border-bottom: 1px solid var(--rule, var(--rule));
}
.forum-topic-table .ftt-head span {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted, var(--muted2));
}
/* topic column */
.ftt-c-topic { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ftt-titlerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ftt-title { font-size: 15px; font-weight: 500; color: var(--text, var(--ink)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftt-title:hover { color: var(--accent, var(--accent)); }
.ftt-title-featured, .ftt-title-featured:hover { color: #e02424; }
[data-theme="dark"] .ftt-title-featured { color: #ff6b6b; }
.ftt-mpn { font-size: 12px; color: var(--accent, var(--accent)); font-family: monospace; font-weight: 600; }
/* admin moderation buttons inside table topic column */
.ftt-admin { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ftti-admin-btn {
  font-size: 11px; padding: 2px 8px; border-radius:4px; cursor: pointer;
  border: 1px solid var(--rule, var(--rule)); background: var(--bg2, #f0f3f8); color: var(--text, var(--ink));
}
.ftti-admin-btn:hover { border-color: var(--accent, var(--accent)); color: var(--accent, var(--accent)); }
.ftti-admin-danger { color: #d92d20; }
.ftti-admin-danger:hover { border-color: #d92d20; color: #d92d20; background: #fef3f2; }
/* category */
.ftt-c-cat { min-width: 0; }
.ftt-cat { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text, var(--ink)); font-size: 13px; font-weight: 500; }
.ftt-cat:hover { color: var(--accent, var(--accent)); }
.ftt-cat-logo { width: 20px; height: 20px; border-radius:4px; object-fit: contain; }
.ftt-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* author */
.ftt-c-author { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text, var(--ink)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftt-avatar { width: 24px; height: 24px; border-radius:50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent, var(--accent)), #3b82d0); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
/* numbers */
.ftt-c-replies, .ftt-c-views { font-size: 13px; color: var(--muted, var(--muted)); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ftt-c-replies svg, .ftt-c-views svg { width: 14px; height: 14px; opacity: .6; }
.ftt-c-activity { font-size: 12px; color: var(--muted, var(--muted2)); text-align: right; white-space: nowrap; }
/* empty row */
.ftt-empty { display: flex !important; justify-content: center; color: var(--muted, var(--muted)); font-size: 13px; padding: 28px 18px; }

/* ==========================================================================
   9B. SECTION LIST — FORUM.TRAE.CN STYLE (large title + subline left, replies + time right)
   ========================================================================== */
.ftd-list {
  background: transparent; border: 0; border-radius:0; overflow: hidden; box-shadow: none;
}
.ftd-row-link { display: block; text-decoration: none; color: inherit; }
.ftd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; position: relative;
  border-bottom: 1px solid #d8dde6 !important;
  transition: background .15s;
}
.ftd-row:last-child { border-bottom: 0; }
.ftd-row:hover { background: var(--bg-hover, #f7f9fc); }
.ftd-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; }
.ftd-titlerow { min-width: 0; width: 100%; display: flex; align-items: center; gap: 8px; }
.ftd-list .ftd-title {
  font-size: 16px; font-weight: 400; color: var(--text, var(--ink));
  text-decoration: none; line-height: 1.3; margin: 0; overflow-wrap: break-word;
  display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftd-list .ftd-title:hover { color: var(--accent, var(--accent)); }
.ftd-list .ftd-title-featured, .ftd-list .ftd-title-featured:hover { color: #7c3aed; }
[data-theme="dark"] .ftd-list .ftd-title-featured { color: #a78bfa; }
.ftd-list .ftd-title-pinned, .ftd-list .ftd-title-pinned:hover { color: #0b66c3; }
[data-theme="dark"] .ftd-list .ftd-title-pinned { color: #4da3ff; }
.ftd-sub {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; line-height: 1; margin-top: 5px; color: var(--muted, var(--muted)); flex-wrap: nowrap; overflow: hidden;
}
.ftd-cat { font-size: 12px; font-weight: 400; color: var(--accent, var(--accent)); flex-shrink: 0; }
.ftd-dot { color: #c3cad6; flex-shrink: 0; }
.ftd-mpn { font-size: 12px; font-weight: 400; color: var(--accent, var(--accent)); flex-shrink: 0; }
.ftd-mpn.lc-obsolete { color: #e02424; }
.ftd-side { flex-shrink: 0; display: flex; align-items: center; gap: 16px; }
.ftd-side .ftd-author { font-weight: 400; color: var(--text, var(--ink)); white-space: nowrap; }
.ftd-replies { font-size: 12px; color: var(--muted, var(--muted)); white-space: nowrap; }
.ftd-reply-num { font-weight: 400; color: var(--text, var(--ink)); font-variant-numeric: tabular-nums; }
.ftd-time { font-size: 12px; color: var(--muted, var(--muted2)); white-space: nowrap; }
.ftd-empty { display: flex; justify-content: center; color: var(--muted, var(--muted)); font-size: 13px; padding: 32px 20px; }
.ftd-loading {
  text-align: center; color: var(--muted, var(--muted)); font-size: 13px; padding: 18px 0 30px;
}
.ftd-loading::before {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid var(--rule, #d6e9fb); border-top-color: var(--accent, var(--accent));
  border-radius:50%; vertical-align: -2px; animation: ftd-spin .8s linear infinite;
}
@keyframes ftd-spin { to { transform: rotate(360deg); } }
/* admin buttons inside ftd row */
.ftd-admin { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
[data-theme="dark"] .ftd-list { background: transparent; }
[data-theme="dark"] .ftd-row:hover { background: #263449; }
[data-theme="dark"] .ftd-dot { color: #3a4965; }
@media (max-width: 640px) {
  .ftd-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
  .ftd-side { width: 100%; justify-content: space-between; }
}

/* ---- Hot topic ranking cards ---- */
.forum-topics-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.forum-hot-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--bg, var(--bg));
  border: 1px solid var(--rule, var(--rule)); border-radius:4px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.forum-hot-card:hover { border-color: var(--accent, var(--accent)); box-shadow: 0 8px 20px -10px rgba(0,102,204,.18); transform: translateY(-1px); }
.fhc-rank {
  flex-shrink: 0; width: 26px; height: 26px; border-radius:4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2, #f0f3f8); color: var(--muted, var(--muted));
  font-size: 13px; font-weight: 700;
}
.fhc-rank-top { background: linear-gradient(135deg, #ff8a3d, #ff5c1f); color: var(--bg); }
.fhc-body { min-width: 0; }
.fhc-title { font-size: 14px; font-weight: 600; color: var(--text, var(--ink)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fhc-title:hover { color: var(--accent, var(--accent)); }
.fhc-title-featured { color: #e02424; }
[data-theme="dark"] .fhc-title-featured { color: #ff6b6b; }
.fhc-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted, var(--muted)); flex-wrap: wrap; }
.fhc-cat { font-weight: 600; color: var(--accent, var(--accent)); }
.fhc-stat { display: inline-flex; align-items: center; gap: 4px; }
.fhc-stat svg { width: 13px; height: 13px; opacity: .65; }
.fhc-time { margin-left: auto; white-space: nowrap; }

[data-theme="dark"] .forum-topic-table, [data-theme="dark"] .forum-hot-card { background: #172033; }
[data-theme="dark"] .forum-topic-table .ftt-row.ftt-head { background: #16213a; }
[data-theme="dark"] .forum-topic-table .ftt-row:not(.ftt-head):hover { background: #263449; }

@media (max-width: 900px) {
  .forum-topic-table .ftt-row { grid-template-columns: minmax(0, 1fr) 130px 90px 60px 60px; }
  .forum-topic-table .ftt-c-author, .forum-topic-table .ftt-h-author { display: none; }
  .forum-topics-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .forum-topic-table .ftt-row { grid-template-columns: minmax(0, 1fr) 70px 60px; }
  .forum-topic-table .ftt-c-cat, .forum-topic-table .ftt-h-cat,
  .forum-topic-table .ftt-c-views, .forum-topic-table .ftt-h-views { display: none; }
  .forum-cat-bar { padding: 10px 12px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .home-topics-row { grid-template-columns: 1fr; gap: 32px; }
  .forum-sections-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 768px) {
  .forum-main { padding: 0 12px 50px; }
  body.desktop-only main.forum-main { padding: 0 12px 50px !important; }
  .community-hero { padding: 40px 12px 28px; }
  .community-hero h1 { font-size: 28px; }
  .community-stats { flex-wrap: wrap; gap: 8px; }
  .stat-num { font-size: 16px; }
  .forum-sections-grid { grid-template-columns: 1fr; }
  .forum-section-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .forum-section-header .fs-info { width: 100%; }
  .forum-new-btn { width: 100%; text-align: center; }
  .forum-comp-bar { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .forum-spec-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .forum-comp-actions { width: 100%; align-items: flex-end; }
  .fcb-link { margin-left: 0; width: auto; text-align: right; }
  .forum-topic-card, .forum-replies-card, .forum-form-card { padding: 20px 18px; }
  .ftd-title { font-size: 22px; }
  .forum-topic-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fti-meta { gap: 10px; flex-wrap: wrap; }
  .fti-main { flex-wrap: wrap; }
  .forum-section-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   7. MODERATION — PIN / FEATURE / MAINTENANCE / BAN / REPORT
   ========================================================================== */

/* ---- Topic tags (PINNED / FEATURED) ---- */
.fti-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  padding: 2px 7px; border-radius:4px; margin-right: 6px; vertical-align: 2px;
  text-transform: uppercase; line-height: 1.4;
}
.fti-tag-pin { background: #eef0ff; color: #4f46e5; border: 1px solid #d6d9ff; }
.fti-tag-feat { background: #fff6e0; color: #b45309; border: 1px solid #ffe4b3; }
[data-theme="dark"] .fti-tag-pin { background: #262a4a; border-color: #3a3f6b; color: #a5b4fc; }
[data-theme="dark"] .fti-tag-feat { background: #3a2f14; border-color: #5a4a1f; color: #fbbf24; }

/* ---- Maintenance / empty (homepage overlay) ---- */
.forum-maintenance {
  max-width: 560px; margin: 24px auto; border: 1px dashed var(--rule, #d3d9e2);
  border-radius:4px; background: var(--bg, var(--bg));
}

/* ---- Ban / maintenance banner inside reply form ---- */
.forum-banned-banner {
  padding: 14px 16px; border-radius:4px; font-size: 14px; font-weight: 600;
  background: #fdecec; color: #c02828; border: 1px solid #f8c9c9;
}
[data-theme="dark"] .forum-banned-banner { background: #3a2323; border-color: #5a3333; color: #fca5a5; }

/* ---- Report buttons (topic + reply) ---- */
.ftd-report, .fr-report {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--muted, var(--muted2)); padding: 2px 6px; border-radius:4px;
  transition: color .15s, background .15s; line-height: 1.4;
}
.fr-header .fr-report { margin-left: auto; }
.ftd-report:hover, .fr-report:hover {
  color: #c02828; background: rgba(192,40,40,.08);
}

/* ---- Admin moderation buttons (topic detail, admin/manager only) ---- */
.ftd-admin-actions {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ftd-admin-btn {
  border: 1px solid var(--rule, #d9dfe8); background: var(--bg, var(--bg));
  color: var(--text, var(--ink)); cursor: pointer; font-size: 12px;
  padding: 3px 10px; border-radius:4px; line-height: 1.5;
  transition: all .15s;
}
.ftd-admin-btn:hover { border-color: var(--accent, var(--accent)); color: var(--accent, var(--accent)); }
.ftd-admin-btn.danger { color: #c02828; }
.ftd-admin-btn.danger:hover { border-color: #c02828; background: rgba(192,40,40,.06); color: #c02828; }
.ftd-admin-btn.on { background: var(--accent, var(--accent)); border-color: var(--accent, var(--accent)); color: var(--bg); }

/* ---- Topic edit form (owner only) ---- */
.forum-topic-edit {
  margin-top: 18px; padding: 18px; border: 1px solid var(--rule, var(--rule));
  border-radius:4px; background: var(--bg2, #f7f9fc);
}
[data-theme="dark"] .forum-topic-edit { background: #1c2430; }
.forum-edit-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text, var(--ink));
  margin: 12px 0 6px;
}
.forum-edit-input, .forum-edit-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--rule, #d9dfe8); border-radius:4px;
  font-size: 14px; background: var(--bg, var(--bg)); color: var(--text, var(--ink));
}
.forum-edit-input:focus, .forum-edit-textarea:focus {
  outline: none; border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 3px rgba(0,102,204,.12);
}
.forum-edit-actions { display: flex; gap: 10px; margin-top: 16px; }
.ftd-edit {
  border: 1px solid var(--rule, #d9dfe8); background: var(--bg, var(--bg));
  color: var(--accent, var(--accent)); cursor: pointer; font-size: 12px;
  padding: 3px 10px; border-radius:4px; line-height: 1.5;
}
.ftd-edit:hover { border-color: var(--accent, var(--accent)); background: rgba(0,102,204,.06); }

/* ---- Report modal ---- */
.forum-modal-backdrop {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(10, 16, 28, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: forumFade .15s ease;
}
.forum-modal {
  width: 100%; max-width: 460px; background: var(--bg, var(--bg));
  border-radius:4px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.4); overflow: hidden;
  animation: forumPop .18s ease;
}
.forum-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--rule, var(--bg3));
}
.forum-modal-head h3 { margin: 0; font-size: 16px; }
.forum-modal-x {
  border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--muted, var(--muted2)); padding: 0 4px;
}
.forum-modal-body { padding: 18px 20px; }
.forum-modal-body textarea {
  width: 100%; min-height: 96px; padding: 11px 14px; box-sizing: border-box;
  border: 1px solid var(--rule, #d6dce6); border-radius:4px; font-size: 14px; resize: vertical;
  background: var(--bg, var(--bg)); color: var(--text, var(--ink));
}
.forum-modal-body textarea:focus { outline: none; border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 3px rgba(0,102,204,.12); }
.forum-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--rule, var(--bg3));
}
@keyframes forumFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes forumPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .forum-modal-backdrop { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .forum-modal { background: #172033; }
[data-theme="dark"] .forum-modal-body textarea { background: #16213a; color: #e6edf7; }

/* ==========================================================================
   8. SECTION PAGE — TWO-COLUMN LAYOUT + BRAND SECTION SIDEBAR
   ========================================================================== */
.forum-layout {
  display: flex; gap: 24px; align-items: flex-start;
}
/* ---- Left sidebar (all brand sections) — fixed full-screen height, independent scroll ---- */
.forum-side {
  width: 240px; flex-shrink: 0;
  background: var(--bg, var(--bg)); border: 1px solid var(--rule, var(--rule)); border-radius:4px;
  padding: 14px; display: flex; flex-direction: column;
  position: sticky; top: 150px;
  height: calc(100vh - 170px);
  min-height: 980px; /* 默认高度：约显示30个版块 */
  overflow-y: auto;
}
.forum-side .fs-side-list { flex: 1 1 auto; min-height: 0; }
.forum-side .fs-side-head { padding: 4px 6px 12px; border-bottom: 1px solid var(--rule, var(--bg3)); margin-bottom: 8px; }
.forum-side .fs-side-title { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, var(--muted2)); }
.forum-side .fs-side-home {
  display: inline-flex; align-items: center; text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.forum-side .fs-side-home:hover { color: var(--accent, var(--accent)); }
.forum-side .fs-side-head .fs-side-search-entry { margin-top: 8px; color: var(--accent, var(--accent)); font-weight: 400; }
.forum-side .fs-side-head .fs-side-search-entry .fs-side-name { font-size: 15px; font-weight: 400; }
.forum-side .fs-side-search {
  display: flex; align-items: center; gap: 8px; margin: 8px 0;
  background: var(--bg2, #f0f3f8); border: 1px solid var(--rule, var(--rule)); border-radius:4px;
  padding: 7px 10px;
}
.forum-side .fs-side-search svg { width: 14px; height: 14px; color: var(--muted, var(--muted2)); flex-shrink: 0; }
.forum-side .fs-side-search input {
  border: 0; outline: none; background: transparent; color: var(--text, var(--ink));
  font-size: 13px; width: 100%; min-width: 0;
}
.forum-side .fs-side-list { display: flex; flex-direction: column; gap: 0; }
.forum-side .fs-side-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius:4px;
  color: var(--text, var(--ink)); text-decoration: none; transition: background .15s;
}
.forum-side .fs-side-item:hover { background: var(--bg-hover, #f2f5fa); }
.forum-side .fs-side-item.active { background: rgba(0,102,204,.08); color: var(--accent, var(--accent)); font-weight: 600; }
.forum-side .fs-side-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-side .fs-side-count { font-size: 10px; color: var(--muted, var(--muted2)); background: var(--bg2, #f0f3f8); border-radius:4px; padding: 0 6px; min-width: 18px; text-align: center; }
.forum-side .fs-side-item.active .fs-side-count { background: rgba(0,102,204,.12); color: var(--accent, var(--accent)); font-weight: 600; }
.forum-side .fs-side-empty { padding: 16px 8px; color: var(--muted, var(--muted2)); font-size: 13px; text-align: center; }
.forum-side .fs-side-divider {
  height: 1px; background: var(--rule, var(--bg3)); margin: 10px 8px;
}
.forum-side .fs-special-item { font-weight: 500; color: var(--accent, var(--accent)); }
/* ---- Right main column ---- */
.forum-side-main { flex: 1; min-width: 0; }

@media (max-width: 820px) {
  .forum-layout { display: block; }
  .forum-side { position: static; width: 100%; max-height: none; height: auto; overflow: visible; }
}

/* ---- Admin moderation buttons on topic list items ---- */
.forum-topic-item .fti-admin {
  flex-basis: 100%; display: flex; gap: 6px; margin-top: 2px; padding-top: 8px;
  border-top: 1px dashed var(--rule, var(--bg3));
}
.fti-admin-btn {
  border: 1px solid var(--rule, #d6dce6); background: var(--bg, var(--bg)); color: var(--text, var(--ink));
  font-size: 12px; padding: 3px 10px; border-radius:4px; cursor: pointer; transition: background .15s, border-color .15s;
}
.fti-admin-btn:hover { background: var(--bg-hover, #f2f5fa); border-color: var(--accent, var(--accent)); }
.fti-admin-btn.fti-admin-danger:hover { border-color: #c02828; background: #fdecec; color: #c02828; }
[data-theme="dark"] .forum-side .fs-side-search { background: #16213a; border-color: #2a3a55; }
[data-theme="dark"] .fti-admin-btn { background: #172033; border-color: #2c3a55; color: #e6edf7; }
[data-theme="dark"] .fti-admin-btn.fti-admin-danger:hover { border-color: #f87171; background: #3a2323; color: #fca5a5; }

/* ---- In-page confirm dialog ---- */
.forum-confirm { max-width: 380px; }
.forum-confirm .fc-icon {
  width: 40px; height: 40px; border-radius:50%; margin: 0 auto 12px;
  background: #fdecec; color: #c02828; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .forum-confirm .fc-icon { background: #3a2323; color: #fca5a5; }