@charset "UTF-8";
/* ==========================================================================
   forum.css · forum / post / demo / admin 专属版式
   （独立文件，避免与 T03 的 pages.css 并行冲突）
   ========================================================================== */

/* ------------------------------ 论坛列表 ------------------------------ */

.forum-head { display: grid; gap: var(--sp-4); }

@media (min-width: 768px) {
  .forum-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .forum-head__actions { justify-self: end; }
}

.section--filters { padding-block: var(--sp-4); background: #fff; border-bottom: 1px solid rgba(148, 163, 184, .2); }

.forum-filters { display: grid; gap: var(--sp-3); }
.forum-filters__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.forum-filters__row--tools { align-items: center; }
.forum-filters__search { flex: 1 1 220px; max-width: 420px; }
.forum-filters__sort { flex: 0 0 auto; min-width: 130px; }

.forum-layout { display: grid; gap: var(--sp-5); }

@media (min-width: 1024px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.forum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.forum-list li { margin: 0; }

.forum-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(148, 163, 184, .2);
  font-size: var(--fs-xs);
  color: var(--tx-3);
}

.forum-card__stat { color: var(--tx-3); }
.forum-card__author { margin-left: auto; color: var(--tx-3); }

.forum-aside { display: grid; gap: var(--sp-4); }

@media (min-width: 1024px) {
  .forum-aside { position: sticky; top: 88px; }
}

.aside-card {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.aside-card__title { margin-bottom: var(--sp-3); font-size: var(--fs-base); }
.aside-card__text { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }

.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li { display: grid; gap: 2px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }

/* ------------------------------ 悬浮发布按钮 ------------------------------ */

.fab {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-5);
  color: #fff;
  background: var(--grad-btn);
  border: 0;
  border-radius: var(--radius-badge);
  box-shadow: var(--shadow-3);
  font-weight: 700;
}

@media (min-width: 768px) {
  .fab { display: none; }
}

/* ------------------------------ 验证码行 ------------------------------ */

.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.captcha-box { display: inline-flex; border: 1px solid rgba(148, 163, 184, .4); border-radius: var(--radius-ctl); background: #fff; }
.captcha-box svg { display: block; width: 132px; height: 52px; }
.captcha-input { flex: 0 1 160px; min-width: 120px; }

/* ------------------------------ 文章详情 ------------------------------ */

.post-container { max-width: 820px; }

.post__head { margin-bottom: var(--sp-5); }
.post__title { margin: var(--sp-3) 0; font-size: clamp(24px, 4vw, 40px); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tx-3);
}

.post__rating {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.post__rating-title { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--tx-1); }
.post__rating-meta { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--tx-2); }
.post__rating-mine { margin-left: var(--sp-2); color: var(--c-brand); font-weight: 700; }
.post__rating-extra { margin-top: var(--sp-3); }

.post-comments { margin-top: var(--sp-6); }
.post-comments__title { font-size: var(--fs-lg); }
.post-comment-form { margin-top: var(--sp-5); }

.comment-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }

.comment-item {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-ctl);
}

.comment-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.comment-item__nick { font-weight: 700; color: var(--tx-1); }
.comment-item__kind { font-size: var(--fs-xs); }
.comment-item__time { margin-left: auto; font-size: var(--fs-xs); color: var(--tx-3); }
.comment-item__body { margin: 0; color: var(--tx-2); font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; }
.comment-item__score { color: var(--c-amber); font-weight: 700; }

.post-cta {
  padding: var(--sp-5);
  background: var(--bg-light);
  border: 1px dashed rgba(37, 99, 235, .4);
  border-radius: var(--radius-card);
}

.post-cta__title { margin-bottom: var(--sp-3); }

/* ------------------------------ 演示页 ------------------------------ */

.demo-card {
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
}

.demo-card__head { display: flex; align-items: center; gap: var(--sp-3); }

.demo-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tx-3);
  flex: none;
}

.demo-card[data-state="online"] .demo-card__dot { background: var(--c-green); box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
.demo-card[data-state="need_apply"] .demo-card__dot { background: var(--c-brand); box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.demo-card[data-state="offline"] .demo-card__dot { background: var(--c-red); box-shadow: 0 0 0 4px rgba(239, 68, 68, .16); }

.demo-card__title { margin: 0; font-size: var(--fs-lg); }
.demo-card__desc { margin: var(--sp-3) 0; color: var(--tx-2); }
.demo-card__facts { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--tx-2); }
.demo-card__facts li { margin: 0; }
.demo-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.demo-card__foot { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--tx-3); }

/* ------------------------------ 后台 ------------------------------ */

.admin-wrap { max-width: 1100px; }

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.admin-head__title { margin: 0; font-size: var(--fs-xl); }
.admin-head__sub { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }

.admin-filters { margin-bottom: var(--sp-4); }
.admin-filters__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.admin-filters .input { max-width: 320px; }

.admin-status { display: flex; align-items: center; gap: var(--sp-2); }
.admin-status .select { min-width: 110px; }

/* ------------------------------ 抽屉里的表单滚动 ------------------------------ */

.drawer__panel .lead-form { padding-bottom: var(--sp-6); }
.drawer-open { overflow: hidden; }