/* ============================================================
   圈子 · 微博风格打磨
   ============================================================ */

/* 顶部话题条 */
.trend-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid #2c3a20;
  background: linear-gradient(100deg, rgba(140, 226, 42, .09), rgba(14, 20, 9, .9) 55%);
  overflow: hidden;
  position: relative;
}
.trend-bar::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(140, 226, 42, .10), transparent);
  animation: trendSweep 6s linear infinite;
}
@keyframes trendSweep { to { left: 120%; } }
.trend-label {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  color: #8ce22a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trend-label::before {
  content: "🔥";
  font-size: 13px;
}
.trend-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.trend-list::-webkit-scrollbar { display: none; }
.trend-tag {
  flex: none;
  font-size: 12.5px;
  color: #b9c9ab;
  background: rgba(140, 226, 42, .07);
  border: 1px solid #2c4a18;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
}
.trend-tag:hover { color: #08120a; background: #8ce22a; border-color: transparent; }

/* 帖子卡片：更像信息流 */
.post {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #23301a;
  /* 背景图很花，帖子必须实心，否则文字看不清 */
  background: #0e1409;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  transform: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.post:hover { border-color: #3d5c22; background: #111a0c; }
.post::before { display: none; }

.p-avatar {
  width: 46px; height: 46px;
  font-size: 15px;
  border: 2px solid #233016;
  box-shadow: 0 0 0 2px rgba(140, 226, 42, .10);
}
.p-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.p-head { gap: 8px; }
.p-head b {
  font-size: 14.5px;
  font-weight: 800;
  color: #f0f7ea;
}
.p-head .timeago {
  font-size: 11.5px;
  color: #6d86a3;
}
.p-head .badge { transform: translateY(-1px); }

.p-text {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #dbe7d3;
}

/* #话题# 高亮 */
.p-text .topic {
  color: #8ce22a;
  cursor: pointer;
}
.p-text .topic:hover { text-decoration: underline; }

/* 图片：圆角 + 悬停放大 */
.p-img {
  border-radius: 12px;
  border: 1px solid #233016;
  max-height: 420px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.p-img:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}

/* 操作行：等宽分布，图标 + 数字 */
.p-acts {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid rgba(35, 48, 22, .7);
  padding-top: 8px;
}
.act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #7d8b70;
  background: none;
  border: none;
  cursor: pointer;
  transition: .18s;
  font-family: inherit;
}
.act:hover { background: rgba(140, 226, 42, .07); color: #8ce22a; }
.act.on { color: #8ce22a; font-weight: 700; }
.act.on .ic { transform: scale(1.1); }
.act .ic { font-size: 14px; line-height: 1; transition: transform .18s; }

/* 评论区：缩进 + 浅底 */
.p-cmts {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(17, 26, 12, .6);
  border: 1px solid #1d2a14;
  border-top: 1px solid #1d2a14;
}
.cmt { font-size: 12.8px; line-height: 1.7; }
.cmt + .cmt { margin-top: 7px; }
.cmt b { color: #c9f08c; }

/* 空状态 */
.feed .empty {
  padding: 54px 16px;
  font-size: 13.5px;
  color: #6d86a3;
  border: 1px dashed #233016;
  border-radius: 14px;
  background: rgba(14, 20, 9, .5);
}

/* 图片灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 2, .92);
  backdrop-filter: blur(6px);
  padding: 24px;
  cursor: zoom-out;
}
.lightbox.on { display: flex; }
.lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8);
  animation: lbIn .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}