/* =============================================
   图片/视频论坛 - 论坛专属样式
   复用 styles.css 的 :root 变量、.top-nav-bar、.container、.footer
============================================= */

/* 顶部发帖按钮 */
.nav-post-btn {
    margin-left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: var(--transition);
}
.nav-post-btn:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* 右上角操作按钮区：Regist / Login 是按钮，不是导航菜单项 */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 14px;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    text-decoration: none;
    line-height: 1;
    transition: var(--transition);
    white-space: nowrap;
}
.nav-btn:hover { background: var(--primary-color); color: #fff; }
.nav-btn-primary { background: var(--primary-color); color: #fff; }
.nav-btn-primary:hover { background: var(--primary-dark); color: #fff; }
@media (max-width: 768px) {
    .nav-actions { margin-left: 8px; gap: 6px; }
    .nav-btn { padding: 6px 12px; font-size: 0.82rem; }
}

/* 过滤/搜索工具条 */
.forum-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.filter-tabs {
    display: inline-flex;
    gap: 8px;
}
.filter-tab {
    padding: 7px 18px;
    background: #efefef;
    color: var(--text-gray);
    border-radius: 20px;
    font-size: 0.9rem;
    transition: var(--transition);
}
.filter-tab:hover { background: #dcdcdc; }
.filter-tab.active {
    background: var(--primary-color);
    color: #fff;
}
.forum-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    background: #efefef;
    border-radius: 20px;
    padding: 0 12px;
}
.forum-search input {
    background: none;
    border: none;
    outline: none;
    padding: 9px 4px;
    font-size: 0.9rem;
    width: 220px;
    color: var(--text-white);
}
.forum-search button {
    color: var(--text-gray);
    display: flex;
    align-items: center;
}
.forum-search button:hover { color: var(--primary-color); }

/* 分区（图片区 / 视频区 / 爽文区） */
.feed-section { margin-bottom: 38px; }
.home .feed-section {
    max-width: 1235px;
    margin-left: auto;
    margin-right: auto;
}
.section-head {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* 标题栏左侧：🎬 + Title + More... —— 一个白色容器 */
.section-head::before {
    content: none;
    display: none;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    letter-spacing: 0.5px;
    padding: 16px 0 16px 18px;
    flex-shrink: 0;
}
.section-more {
    margin-left: auto;
    margin-right: 20px;
    align-self: center;
    font-size: 1rem;
    color: var(--text-gray);
    transition: var(--transition);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    flex-shrink: 0;
}
.section-more:hover { color: var(--primary-color); background: rgba(220,38,38,0.08); }

/* 标题栏描述文字（首页会通过 JS 移入标题栏） */
.section-head .section-desc {
    display: block;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 12px;
    align-self: center;
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧热门推荐标题容器（Hot Picks）——第二个白色容器 */
.section-hot-head {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: 300px;
    max-width: 300px;
    box-sizing: border-box;
    padding: 16px 20px 16px 0;
    margin-left: 0;
    border-left: none;
    background: #fff;
    flex: 0 0 300px;
}
.home .section-hot-head { display: flex; }
.hot-bar {
    display: inline-block;
    width: 3px;
    height: 28px;
    background-color: var(--primary-color);
    border-radius: 2px;
    flex-shrink: 0;
}
.hot-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* 分区主体：左右两列布局（左侧卡片网格 + 右侧热门榜 + 广告），仅 .home 生效 */
.section-body {
    display: block;
}
.home .section-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    column-gap: 15px;
    align-items: start;
}
.section-left {
    flex: 1 1 auto;
    min-width: 0;
}
.section-right {
    display: none;
    flex: 0 0 300px;
    flex-direction: column;
    gap: 16px;
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    justify-self: end;
}
.home .section-right { display: flex; }

/* 热门榜列表：Top 10 —— 与广告同宽 300px */
.hot-list {
    background: var(--bg-card);
    border-radius: 0;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
}
.hot-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}
.hot-list-item:last-child { border-bottom: none; }
.hot-list-item:hover { background: rgba(220,38,38,0.04); }
.hot-rank {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #9ca3af;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hot-list-item:nth-child(1) .hot-rank { background: var(--primary-color); }
.hot-list-item:nth-child(2) .hot-rank { background: var(--primary-color); }
.hot-list-item:nth-child(3) .hot-rank { background: var(--primary-color); }
.hot-title-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-score {
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #f59e0b;
}

/* 右列下方广告位 300x250 —— 与右列热门榜同宽 300px */
.right-col-ad {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
}
.right-col-ad ins,
.right-col-ad iframe {
    width: 300px !important;
    height: 250px !important;
    max-width: 300px !important;
    max-height: 250px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.right-col-ad > div {
    width: 300px !important;
    height: 250px !important;
    max-width: 300px !important;
    max-height: 250px !important;
    overflow: hidden !important;
}

/* 窄屏适配：屏幕太窄时收起右列
   3列卡片: 3×300 + 2×10 = 920px; 右列 300px; 总 gap 20px => 最小 1240px
   低于 1240 折行（右列移到下方居中） */
@media (max-width: 1239px) {
    .home .section-body { grid-template-columns: 1fr; row-gap: 20px; }
    .home .section-right { justify-self: center; margin: 0; }
    .right-col-ad { width: 300px; }
}
.section-desc {
    margin: 0 0 16px;
    padding-left: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-gray);
}
/* Homepage only: when the 文案 is pulled into .section-head (via JS) it
   shares the row with the 图片区标题. Scoped so individual pages (where the
   文案 is hidden / replaced by the ad) are unaffected. */
.section-head .section-desc {
    flex: 1 1 auto;
    margin: 0;
    padding-left: 16px;
    align-self: center;
}
/* Homepage: the 文案 is now inline in the header, so the (emptied) desc row
   below the title only adds dead whitespace. Hide it and tighten the gap
   under the 图片区标题. Scoped to .home so individual pages keep their
   full layout (title row + ad row). */
.home .section-desc-row { display: none; }
.home .section-head { margin-bottom: 12px; }
/* Asia section: 文案 on the left, 300x100 ad on the right */
.section-desc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding-left: 16px;
}
.section-desc-row .section-desc {
    margin: 0;
    padding-left: 0;
    flex: 1 1 auto;
}
.section-ad {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* 区域页（?region=*）：为与首页（.home）显示宽度一致，导航栏与内容容器均放宽到
   1280px。首页靠 .home .container 实现，区域页靠 JS 给 body 加 .region 类后由本规则
   实现，二者对称。区头 900x250 与右侧 300x250 仍强制同一行（仅 #sec-cartoon）。 */
.region .container { max-width: 1280px; }
/* 区域页（body.region）：卡片间隙统一为 5px（原默认 20px），作用于 Asia / Western /
   Cartoon / Other 四个图片分区，不影响首页（首页本就是 10px）与 Stories 文字区。 */
.region #sec-asia .post-grid,
.region #sec-western .post-grid,
.region #sec-cartoon .post-grid,
.region #sec-other .post-grid { gap: 5px; }

/* Cartoon 区页：图片卡片统一 250x250 正方形（仅作用于 region 页，不影响首页预览区） */
.region #sec-cartoon .post-grid {
    grid-template-columns: repeat(4, 250px);
    gap: 10px;
    justify-content: center;
}
.region #sec-cartoon .post-card {
    width: 250px;
    height: 250px;
}
@media (max-width: 1080px) { .region #sec-cartoon .post-grid { grid-template-columns: repeat(3, 250px); } }
@media (max-width: 820px)  { .region #sec-cartoon .post-grid { grid-template-columns: repeat(2, 250px); } }
@media (max-width: 560px)  { .region #sec-cartoon .post-grid { grid-template-columns: 250px; } }
#sec-cartoon .section-desc-row { flex-wrap: nowrap; }
@media (max-width: 1260px) {
    #sec-cartoon .section-desc-row { flex-wrap: wrap; }
}

/* Cartoon / Western 区页：顶部 900x250 已清除，改为右侧 160x600 摩天楼广告列（仅 region 页） */
/* 结构：区标题整行置顶，其下 2 列（卡片 feed + 右侧 sticky 广告），使广告顶部与卡片顶部对齐 */
.region #sec-cartoon .section-desc-row,
.region #sec-western .section-desc-row,
.region #sec-asia .section-desc-row { display: none; }
.region #sec-cartoon,
.region #sec-western,
.region #sec-asia { display: block; }
.region #sec-cartoon .cartoon-body,
.region #sec-western .cartoon-body,
.region #sec-asia .cartoon-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.region #sec-cartoon .cartoon-feed,
.region #sec-western .cartoon-feed,
.region #sec-asia .cartoon-feed {
    flex: 0 0 auto;
    min-width: 0;
}
.region #sec-cartoon .cartoon-sidebar-ad,
.region #sec-western .cartoon-sidebar-ad,
.region #sec-asia .cartoon-sidebar-ad {
    flex: 0 0 160px;
    align-self: flex-start;
    position: sticky;
    top: 20px;
}
@media (max-width: 768px) {
    .region #sec-cartoon .cartoon-body,
    .region #sec-western .cartoon-body,
    .region #sec-asia .cartoon-body { display: block; }
    .region #sec-cartoon .cartoon-sidebar-ad,
    .region #sec-western .cartoon-sidebar-ad,
    .region #sec-asia .cartoon-sidebar-ad { display: none; }
}

/* Western 区页：图片卡片统一 250x250 正方形（仅作用于 region 页，不影响首页预览区） */
.region #sec-western .post-grid {
    grid-template-columns: repeat(4, 250px);
    gap: 10px;
    justify-content: center;
}
.region #sec-western .post-card {
    width: 250px;
    height: 250px;
}
@media (max-width: 1080px) { .region #sec-western .post-grid { grid-template-columns: repeat(3, 250px); } }
@media (max-width: 820px)  { .region #sec-western .post-grid { grid-template-columns: repeat(2, 250px); } }
@media (max-width: 560px)  { .region #sec-western .post-grid { grid-template-columns: 250px; } }

/* Asia 区页：图片卡片统一 250x250 正方形（仅作用于 region 页，不影响首页预览区） */
.region #sec-asia .post-grid {
    grid-template-columns: repeat(4, 250px);
    gap: 10px;
    justify-content: center;
}
.region #sec-asia .post-card {
    width: 250px;
    height: 250px;
}
@media (max-width: 1080px) { .region #sec-asia .post-grid { grid-template-columns: repeat(3, 250px); } }
@media (max-width: 820px)  { .region #sec-asia .post-grid { grid-template-columns: repeat(2, 250px); } }
@media (max-width: 560px)  { .region #sec-asia .post-grid { grid-template-columns: 250px; } }

/* Other 区页：图片卡片保持默认网格（仅作用于 region 页，不影响首页预览区） */
.region #sec-other .post-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.region #sec-other .post-card {
    height: 250px;
}

/* 帖子网格：任何屏幕都严格 4 列 */
.post-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 首页：卡片精确 300x250，严格 3 列（含上方 Asia/Western/Cartoon 等图片区
   与爽文区）。作用域仅 .home，区域页（?region=*，无 .home 类）保持基础 1fr 布局。
   3×300 + 2 个 10px 间距 = 920px，左右两列（左卡片 + 右热门榜）在 1280 容器内。 */
.home .container { max-width: 1280px; }
.home .post-grid {
    grid-template-columns: repeat(3, 300px);
    gap: 10px;
    justify-content: start;
}
.home .post-card {
    width: 300px;
    height: 250px;
}
/* 首页卡片区广告：隐藏（已移到右列热门榜下方） */
.home .ad-slot {
    display: none !important;
}
/* 窄屏降级：固定 300px 列宽放不下 3 列时减少列数，避免横向溢出（仅 .home）。 */
@media (max-width: 1079px) { .home .post-grid { grid-template-columns: repeat(2, 300px); } }
@media (max-width: 719px)  { .home .post-grid { grid-template-columns: 300px; } }
@media (max-width: 359px)  { .home .post-grid { grid-template-columns: minmax(250px, 1fr); } .home .post-card { width: 100%; } }

/* 爽文区：纯文字卡片，按需求 8 行 x 4 列与图片/视频一致 */
.text-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .text-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .text-grid { grid-template-columns: 1fr; } }
.text-card { padding: 0; }
.text-card .post-body { padding: 16px 18px 18px; gap: 10px; }
.text-card .post-excerpt {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card {
    background: var(--bg-card);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 250px;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.post-thumb {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #1f1f1f;
    overflow: hidden;
}
.post-thumb img,
.post-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.post-thumb .empty-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 0.85rem;
}
.post-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}
.post-type-badge.video { background: var(--primary-color); }
.post-type-badge.multi { background: rgba(0,0,0,0.65); }

/* 详情页多图画廊 */
.detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    background: #000;
}
.detail-gallery img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.detail-gallery img:hover { opacity: 0.92; }

/* ===== Image lightbox / magnifier ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.lightbox.show { display: flex; }
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.lightbox-img:active { cursor: grabbing; }
.lightbox-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-zoom-in { bottom: 18px; right: 74px; }
.lightbox-zoom-out { bottom: 18px; right: 18px; }
.lightbox-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
}
.lightbox-hint {
  position: absolute;
  bottom: 18px;
  left: 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.post-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.post-play svg { width: 22px; height: 22px; margin-left: 3px; color: #fff; }
.post-body { padding: 8px 10px 8px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.post-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-gray);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
}
.post-meta .author {
    color: var(--primary-color);
    font-weight: 600;
}
.post-meta-row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.post-meta-label {
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 4px;
    flex-shrink: 0;
}
.post-meta-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-tags {
    display: none;
}
.tag-chip {
    font-size: 0.7rem;
    padding: 2px 9px;
    background: #efefef;
    color: #555;
    border-radius: 12px;
}
.tag-chip:hover { background: var(--primary-color); color: #fff; cursor: pointer; }

/* 分页（沿用 styles.css 的 .pagination） */
.forum-pagination { margin-top: 28px; }

/* =============================================
   帖子详情页
============================================= */
.post-detail-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
.post-detail-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.post-detail-media {
    width: 100%;
    max-height: 70vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-detail-media img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.post-detail-media video { max-width: 100%; max-height: 70vh; }
.post-detail-head { padding: 16px 20px 4px; }
.post-detail-head h1 { font-size: 1.4rem; color: var(--text-white); margin: 0 0 8px; }
.post-detail-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-gray); }
.post-detail-meta .author { color: var(--primary-color); font-weight: 600; }
.post-detail-content {
    padding: 10px 20px 18px;
    color: var(--text-light);
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}
.post-detail-tags { padding: 0 20px 16px; display: flex; flex-wrap: wrap; gap: 6px; }

/* 评论区 */
.comments-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px 22px;
}
.comments-section h2 { font-size: 1.1rem; color: var(--text-white); margin-bottom: 14px; }
.comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.comment-form .row { display: flex; gap: 10px; }
.comment-form input,
.comment-form textarea {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    color: var(--text-white);
    background: #fff;
}
.comment-form input { width: 220px; }
.comment-form textarea { resize: vertical; min-height: 70px; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--primary-color); }
.comment-submit {
    align-self: flex-start;
    background: var(--primary-color);
    color: #fff;
    padding: 9px 26px;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: var(--transition);
}
.comment-submit:hover { background: var(--primary-dark); }
.comment-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-item { display: flex; gap: 10px; }
.comment-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
}
.comment-main { flex: 1; min-width: 0; }
.comment-author { font-size: 0.85rem; font-weight: 600; color: var(--text-white); }
.comment-time { font-size: 0.72rem; color: var(--text-gray); margin-left: 8px; }
.comment-text { font-size: 0.9rem; color: var(--text-light); line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.comment-empty { color: var(--text-gray); font-size: 0.9rem; padding: 10px 0; }

/* =============================================
   发帖页
============================================= */
.composer-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px 26px;
    max-width: 760px;
    margin: 0 auto;
}
.composer-card h1 { font-size: 1.3rem; color: var(--text-white); margin-bottom: 18px; }
.composer-field { margin-bottom: 16px; }
.composer-field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 7px;
}
.composer-field .hint { font-weight: 400; color: var(--text-gray); font-size: 0.78rem; margin-left: 6px; }
.composer-field input[type="text"],
.composer-field textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 11px 13px;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    color: var(--text-white);
    background: #fff;
}
.composer-field textarea { resize: vertical; min-height: 110px; }
.composer-field input:focus,
.composer-field textarea:focus { border-color: var(--primary-color); }

.composer-type { display: inline-flex; gap: 8px; }
.composer-type label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}
.composer-type input { display: none; }
.composer-type label.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.upload-drop {
    display: block;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition);
}
.upload-drop:hover, .upload-drop.drag { border-color: var(--primary-color); color: var(--primary-color); }
.upload-preview {
    margin-top: 12px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: none;
}
.upload-preview.show { display: block; }
.upload-preview img,
.upload-preview video { max-width: 100%; max-height: 360px; display: block; margin: 0 auto; }
.upload-remove {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,0.6); color: #fff;
    border-radius: 50%; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}
.upload-filename { font-size: 0.8rem; color: var(--text-gray); margin-top: 8px; }

/* 多文件预览网格 */
.upload-preview-grid {
    margin-top: 12px;
    display: none;
    flex-wrap: wrap;
    gap: 10px;
}
.upload-preview-grid.show { display: flex; }
.preview-item {
    position: relative;
    width: 130px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border-color);
}
.preview-item img,
.preview-item video {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.preview-remove:hover { background: #dc2626; }
.preview-name {
    display: block;
    font-size: 0.68rem;
    color: var(--text-gray);
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer-submit {
    background: var(--primary-color);
    color: #fff;
    padding: 12px 34px;
    border-radius: 6px;
    font-size: 0.98rem;
    font-weight: 600;
    transition: var(--transition);
}
.composer-submit:hover { background: var(--primary-dark); }
.composer-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.composer-msg { margin-top: 14px; font-size: 0.9rem; }
.composer-msg.ok { color: #16a34a; }
.composer-msg.err { color: #dc2626; }

.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-gray); font-size: 0.88rem; margin-bottom: 14px; }
.back-link:hover { color: var(--primary-color); }

/* 加载/空状态 */
.feed-loading, .feed-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-gray);
}
.inline-spinner {
    width: 30px; height: 30px;
    border: 4px solid rgba(220,38,38,0.25);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: inlineSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes inlineSpin { to { transform: rotate(360deg); } }

/* =============================================
   导航登录态 / 登录用户显示
============================================= */
.nav-user {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 4px;
}
#navLogout { color: var(--primary-color); }

/* =============================================
   分页器
============================================= */
.pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 0 4px;
    min-height: 1px;
}
.pager-btn, .pager-num {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-light);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}
.pager-btn:hover:not(:disabled), .pager-num:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pager-num.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-ellipsis { color: var(--text-gray); padding: 0 4px; }

/* 评论登录提示 */
.comment-login-hint {
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 16px;
    color: var(--text-gray);
    font-size: 0.92rem;
    margin-bottom: 16px;
}
.comment-login-hint a { color: var(--primary-color); font-weight: 600; }

/* 发帖页：当前登录作者 */
.composer-posting-as {
    padding: 11px 13px;
    background: #f6f6f6;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.92rem;
}

/* 登录/注册卡片 */
.auth-card { max-width: 420px; }
.auth-switch { margin-top: 16px; font-size: 0.88rem; color: var(--text-gray); text-align: center; }
.auth-switch a { color: var(--primary-color); font-weight: 600; }