/* ==========================================================================
   谷里 GULI · pc/css/community.css
   社区：广场（三栏）· 帖子卡 · 帖子详情 · 发布页 · 榜单 / 拼团侧栏
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 三栏骨架
   -------------------------------------------------------------------------- */
.cm {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 304px;
  gap: 26px;
  align-items: start;
}
.cm__side, .cm__right { position: sticky; top: 136px; display: flex; flex-direction: column; gap: 16px; }

/* 左侧：话题导航 */
.sidecard {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.sidecard__h {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ink-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidecard__h em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.tnav { display: flex; flex-direction: column; gap: 2px; }
.tnav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tnav__item:hover { background: var(--paper-2); color: var(--ink); }
.tnav__item.is-active { background: var(--indigo-soft); color: var(--indigo-ink); font-weight: 700; }
.tnav__hash { font-family: var(--font-mono); color: var(--ink-3); }
.tnav__item.is-active .tnav__hash { color: var(--indigo); }
.tnav__n { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* 发帖按钮 */
.postcta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(110deg, var(--indigo) 0%, #4B3FA8 100%);
  color: #FFF;
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.postcta:hover { transform: translateY(-2px); box-shadow: var(--sh-indigo); }
.postcta__ico { font-size: 20px; }
.postcta__t { font-size: var(--fs-base); font-weight: 800; }
.postcta__d { font-size: var(--fs-xs); opacity: 0.8; }

/* --------------------------------------------------------------------------
   2. 工具栏
   -------------------------------------------------------------------------- */
.cmbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cmbar__search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 180px;
  height: 34px;
  padding: 0 10px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.cmbar__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--fs-md); }
.cmbar__search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.cmbar__sort { display: flex; gap: 2px; }
.cmbar__sort button {
  padding: 6px 11px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.cmbar__sort button:hover { background: var(--paper-2); }
.cmbar__sort button.is-active { background: var(--ink); color: #FFF; }

/* --------------------------------------------------------------------------
   3. 帖子卡
   -------------------------------------------------------------------------- */
.feed { display: flex; flex-direction: column; gap: 16px; }
.post {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post:hover { border-color: var(--line-2); box-shadow: var(--sh-xs); }
.post--mine { border-left: 3px solid var(--coral); }

.post__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post__head .author { flex: 1; }
.post__lv {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--indigo-ink);
  background: var(--indigo-soft);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  margin-left: 6px;
}
.post__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.post__badges span {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0 5px;
}
.followbtn {
  flex: none;
  height: 28px;
  padding: 0 11px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--indigo-ink);
  background: var(--indigo-soft);
  border-radius: var(--r-pill);
}
.followbtn:hover { background: #DDE1F6; }
.followbtn.is-on { color: var(--ink-3); background: var(--paper-2); }

.post__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
  display: block;
}
.post__title:hover { color: var(--indigo-ink); }
.post__text {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post--full .post__text { -webkit-line-clamp: unset; display: block; }
.post__text strong { color: var(--ink); font-weight: 700; }

.post__products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pchip:hover { background: var(--indigo-soft); color: var(--indigo-ink); }
.pchip img { width: 22px; height: 22px; border-radius: var(--r-pill); object-fit: cover; }

.post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.post__foot .dim { font-size: var(--fs-sm); }

/* 帖子详情页：标题更大、无行数限制 */
.postpage { max-width: 860px; }
.postpage__topic { margin-bottom: 10px; }
.postpage__title { font-size: var(--fs-3xl); line-height: 1.3; letter-spacing: -0.9px; margin-bottom: 14px; }
.postpage__body { font-size: var(--fs-lg); line-height: 1.9; color: var(--ink); white-space: pre-wrap; }
.postpage__body strong { background: linear-gradient(transparent 62%, var(--gold-soft) 62%); font-weight: 700; }

/* --------------------------------------------------------------------------
   4. 评论区
   -------------------------------------------------------------------------- */
.cmts { margin-top: 28px; }
.cmts__h {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmts__h span { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--ink-3); }
.cmtbox {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
}
.cmtbox__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cmtbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cmtbox__foot .dim { font-size: var(--fs-sm); }

.cmt { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.cmt:last-child { border-bottom: 0; }
.cmt__main { flex: 1; min-width: 0; }
.cmt__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt__name { font-size: var(--fs-md); font-weight: 700; }
.cmt__lv { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.cmt__text { font-size: var(--fs-base); line-height: 1.75; margin: 7px 0; }
.cmt__acts { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.cmt__acts button:hover { color: var(--indigo-ink); }
.cmt__replies {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmt__reply { font-size: var(--fs-md); line-height: 1.7; }
.cmt__reply b { color: var(--indigo-ink); }
.cmt--mine { background: var(--indigo-soft); border-radius: var(--r-md); padding: 14px; border-bottom: 0; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   5. 右侧栏：榜单 / 拼团 / 新人礼
   -------------------------------------------------------------------------- */
.rank { display: flex; flex-direction: column; gap: 2px; }
.rank__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease);
}
.rank__row:hover { background: var(--paper-2); }
.rank__no {
  width: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  flex: none;
  text-align: center;
}
.rank__row:nth-child(1) .rank__no { color: var(--gold); }
.rank__row:nth-child(2) .rank__no { color: #A8AEB8; }
.rank__row:nth-child(3) .rank__no { color: #C08457; }
.rank__name { font-size: var(--fs-md); font-weight: 700; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__tag { font-size: 10px; color: var(--ink-3); }
.rank__score { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--indigo-ink); }

/* 图鉴进度榜 */
.codexrank__row { padding: 9px 6px; }
.codexrank__bar { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.codexrank__bar .bar { flex: 1; height: 5px; }

/* 拼团（侧栏紧凑版） */
.gmin { display: flex; flex-direction: column; gap: 12px; }
.gmin__row { display: flex; gap: 10px; align-items: center; }
.gmin__img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-2); flex: none; }
.gmin__body { flex: 1; min-width: 0; }
.gmin__t { font-size: var(--fs-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmin__m { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
.gmin__m b { color: var(--coral-d); font-family: var(--font-mono); }

.newbie {
  padding: 16px;
  background: linear-gradient(120deg, var(--coral-soft) 0%, var(--indigo-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.newbie__t { font-size: var(--fs-base); font-weight: 800; margin-bottom: 6px; }
.newbie__d { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
.newbie__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   6. 发布页
   -------------------------------------------------------------------------- */
.pub { max-width: 780px; }
.pub__topics { display: flex; flex-wrap: wrap; gap: 8px; }
.pub__uploads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pub__drop {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  transition: all var(--dur) var(--ease);
}
.pub__drop:hover { border-color: var(--indigo); color: var(--indigo-ink); background: var(--indigo-soft); }
.pub__drop svg { width: 22px; height: 22px; }
.pub__thumb { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.pub__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pub__thumb button {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: #FFF;
  background: rgba(22, 23, 28, 0.62);
  border-radius: var(--r-xs);
}
.pub__pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pub__pickitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.pub__pickitem:hover { border-color: var(--indigo-l); }
.pub__pickitem.is-on { border-color: var(--indigo); background: var(--indigo-soft); color: var(--indigo-ink); }
.pub__pickitem img { width: 24px; height: 24px; border-radius: var(--r-pill); object-fit: cover; }

/* --------------------------------------------------------------------------
   7. 话题聚合页头
   -------------------------------------------------------------------------- */
.topichero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 20px;
  background: linear-gradient(115deg, var(--indigo) 0%, #4B3FA8 58%, var(--coral) 130%);
  color: #FFF;
  border-radius: var(--r-xl);
}
.topichero__hash { font-size: 40px; line-height: 1; opacity: 0.55; font-family: var(--font-mono); }
.topichero__t { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.6px; }
.topichero__d { font-size: var(--fs-base); opacity: 0.85; margin-top: 4px; }
.topichero__meta { margin-left: auto; text-align: right; }
.topichero__meta b { font-family: var(--font-mono); font-size: var(--fs-2xl); display: block; }
.topichero__meta span { font-size: var(--fs-sm); opacity: 0.8; }
.topichero .btn { --btn-bg: rgba(255,255,255,0.16); --btn-bd: rgba(255,255,255,0.5); }
.topichero .btn:hover { --btn-bg: rgba(255,255,255,0.28); box-shadow: none; }

/* --------------------------------------------------------------------------
   8. 帖子详情页补充（作者卡 / 同话题帖子 / 评论点赞）
   -------------------------------------------------------------------------- */
.authorcard { display: flex; align-items: center; gap: 12px; }
.authorcard__name { font-size: var(--fs-lg); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorcard__lv { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.authorcard__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}
.authorcard__stats div { text-align: center; }
.authorcard__stats b { display: block; font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--indigo-ink); }
.authorcard__stats span { font-size: 11px; color: var(--ink-3); }

.relposts { display: flex; flex-direction: column; gap: 2px; }
.relpost {
  display: block;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease);
}
.relpost:hover { background: var(--paper-2); }
.relpost__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.55;
}
.relpost:hover .relpost__t { color: var(--indigo-ink); }
.relpost__m { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }

.cmt__acts button { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cmt__acts .cmt-like.is-on { color: var(--coral-d); }

/* 帖子详情页里的帖子卡去掉外框（页面本身已是主体） */
.postpage .post--full { border: 0; padding: 0; background: transparent; }
.postpage .post--full:hover { border: 0; box-shadow: none; }

/* --------------------------------------------------------------------------
   9. 发布页：已选配图缩略 / 内置图库弹层
   -------------------------------------------------------------------------- */
.pub__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.pub__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub__thumbx {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 13px;
  line-height: 1;
  color: #FFF;
  background: rgba(22, 23, 28, 0.62);
  border-radius: var(--r-pill);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pub__thumb:hover .pub__thumbx { opacity: 1; }
.pub__thumbflag {
  position: absolute;
  left: 4px; bottom: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #FFF;
  background: var(--indigo);
  border-radius: var(--r-xs);
}

.libgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.libgrid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--paper-2);
  transition: border-color var(--dur) var(--ease);
}
.libgrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.libgrid__item:hover { border-color: var(--indigo-l); }
.libgrid__item.is-on { border-color: var(--indigo); }
.libgrid__tick {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFF;
  background: var(--indigo);
  border-radius: var(--r-pill);
}