:root{
  --brand:#ff2442;
  --bg:#fff;
  --bg-soft:#f5f7f8;
  --text:#0f1419;
  --muted:#687684;
  --line:#edf0f2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text); background:var(--bg);
  /* 确保body不会影响fixed定位 */
  position: relative;
  overflow-x: hidden;
}

/* 布局 */
.container{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:260px minmax(0,1fr) 320px;
  gap:20px; padding:24px 20px;
}
.sidebar-left .brand{margin:0 0 8px}
.sidebar-left .brand span{color:var(--brand)}
.sidebar-left .menu{display:flex;flex-direction:column;gap:10px;margin:14px 0 20px}
.sidebar-left .menu a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:#14202b;text-decoration:none}
.sidebar-left .menu a:hover,.sidebar-left .menu a.active{background:var(--bg-soft)}
.sidebar-left .primary{display:inline-flex;justify-content:center;align-items:center;height:44px;padding:0 16px;border-radius:999px;border:none;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}

.sidebar-right .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.sidebar-right .trend{margin:8px 0 0;padding:0;list-style:none}
.sidebar-right .trend li{padding:6px 0}

.feed{min-width:0}
.feed-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:0 8px;margin-bottom:8px}
.feed-tabs .tab{appearance:none;background:transparent;border:none;cursor:pointer;padding:14px 4px;margin:0;color:#536471;font-weight:700;position:relative}
.feed-tabs .tab.active{color:#111}
.feed-tabs .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand);border-radius:3px}

/* 帖子卡片 */
.feed-list{display:flex;flex-direction:column;gap:12px}
.post{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.post-head{display:flex;gap:10px;padding:12px 14px 8px}
.post-head .avatar{width:40px;height:40px;border-radius:50%;background:#e9eef2;flex:none}
.post-head .author{font-weight:700}
.muted{color:var(--muted);font-size:12px}
.post-text{padding:0 14px 10px;white-space:pre-wrap;word-break:break-word}

/* 媒体容器 */
.post-media{padding:0 10px 12px}
.pv-media{width:100%;border-radius:10px;margin-top:6px}

/* ===== 多图随机布局 ===== */
.post-images{margin-top:6px}
.post-images .img{position:relative;overflow:hidden;border-radius:8px;background:#f4f7f8;cursor:pointer}
.post-images .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease}
.post-images .img:hover img{transform:scale(1.03)}
.post-images .img.more::after{
  content: attr(data-more);
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;pointer-events:none;
  border-radius:8px;
}

/* ≤ 4 张：简单网格 */
.post-images.layout-grid{
  display:grid; gap:6px;
  grid-template-columns:repeat(2,1fr);
}
.post-images.layout-grid .img{padding-top:100%}
.post-images.layout-grid .img img{position:absolute;inset:0}

/* 布局 A */
.post-images.layout-a{
  display:grid; gap:6px;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
}
.post-images.layout-a .img:nth-child(1){grid-row:1 / span 2; padding-top:0; height:100%}
.post-images.layout-a .img:nth-child(1) img{height:100%}
.post-images.layout-a .img:not(:nth-child(1)){padding-top:100%}
.post-images.layout-a .img:not(:nth-child(1)) img{position:absolute;inset:0}

/* 布局 B */
.post-images.layout-b{
  display:grid; gap:6px;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto;
}
.post-images.layout-b .img{padding-top:100%}
.post-images.layout-b .img img{position:absolute;inset:0}

/* 布局 C：左 1 大 + 右 3 小竖排 */
.post-images.layout-c{
  display:grid; gap:6px;
  grid-template-columns:2fr 1fr;
  grid-template-rows:repeat(3, 1fr);
}
.post-images.layout-c .img:nth-child(1){grid-row:1 / span 3;height:100%}
.post-images.layout-c .img:nth-child(1) img{height:100%}
.post-images.layout-c .img:not(:nth-child(1)){padding-top:100%}
.post-images.layout-c .img:not(:nth-child(1)) img{position:absolute; inset:0}

/* 布局 D：2行 × 3列 拼贴 */
.post-images.layout-d{
  display:grid; gap:6px;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 120px);
}
.post-images.layout-d .img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* 数字与操作 */
.post-stats{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.post-stats .dot{color:#c6cdd3}
.post-stats .num{font-weight:600;color:#111}
.post-actions.row3{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 8px 12px;border-top:1px solid var(--line)}
.post-actions.row3 button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:8px;border:none;background:transparent;color:#536471;font-weight:700;cursor:pointer;font-size:12px}
.post-actions.row3 button:hover{background:var(--bg-soft)}
.post-actions .btn-like.active{color:var(--brand)}
.post-actions .btn-like.liked{color:var(--brand);background:rgba(255, 36, 66, 0.1)}
.post-actions .btn-share{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:8px;border:none;background:transparent;color:#536471;font-weight:700;cursor:pointer;font-size:12px;text-decoration:none}
.post-actions .btn-share:hover{background:var(--bg-soft)}
.post-actions .btn-share.active{color:var(--brand)}
.post-actions .btn-bookmark.bookmarked{color:var(--brand);background:rgba(255, 36, 66, 0.1)}

/* 评论气泡 */
.comments-panel{padding:8px 12px}
.comment-form{position:relative;background:#f2f4f7;border-radius:16px;padding:12px 52px 40px 16px}
.comment-form textarea{width:100%;border:none;outline:none;background:transparent;resize:none;font-size:16px;line-height:22px;color:var(--text)}
.comment-form .cmt-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#9aa6b2;font-size:18px;cursor:pointer}
.comment-form .c-previews{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* ===== Lightbox ===== */
.mt-lightbox[hidden]{display:none}
.mt-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.mt-lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.9)}
.mt-lb-stage{position:relative;max-width:95vw;max-height:90vh}
.mt-lb-img{max-width:95vw;max-height:90vh;display:block;object-fit:contain;border-radius:4px}
.mt-lb-close,.mt-lb-prev,.mt-lb-next{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);color:#fff;font-size:26px;cursor:pointer}
.mt-lb-close{top:22px;right:22px;transform:none}
.mt-lb-prev{left:16px}
.mt-lb-next{right:16px}
.mt-lb-close:hover,.mt-lb-prev:hover,.mt-lb-next:hover{background:rgba(255,255,255,.25)}
.mt-lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:12px}

/* ===== Auth/User Card (左侧栏) ===== */
.auth-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  position: relative;
}

/* 让带 hidden 的下拉真正隐藏 */
.profile-menu[hidden]{ display:none; }

/* 左侧栏固定在可视区域，避免“掉下去” */
.sidebar-left{
  align-self: start;      /* 让 grid 高度不被拉伸 */
  position: sticky;
  top: 16px;              /* 你喜欢的吸顶距离 */
}

/* 确保卡片宽度、层级稳定，不受下拉绝对定位影响 */
.sidebar-left .auth-card{ width:100%; z-index: 1; }

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px; border-radius:999px;
  font-weight:800; letter-spacing:.5px; border:none;
  text-decoration:none;
  transition:transform .06s ease, filter .15s ease;
  background:var(--brand); color:#fff;
}
.btn-cta:hover{ filter:brightness(0.98); }
.btn-cta:active{ transform:translateY(1px); }
.btn-cta-block{ width:100%; margin-bottom:16px; }

/* mini profile */
.profile-mini{ display:flex; align-items:center; gap:12px; }
.profile-mini .avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:#f3f5f7;border:1px solid #eef1f3;
}
.profile-mini .meta{ flex:1; min-width:0; }
.profile-mini .name{
  font-size:16px; font-weight:800; line-height:1.2;
  color:#0f1419; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-mini .uid{
  font-size:13px; color:#536471; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-mini .more{
  font-size:22px; 
  color:#94a3b8; 
  cursor:pointer; 
  user-select:none;
  padding:0 4px; 
  line-height:1;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}
.profile-mini .more:hover{ color:#64748b; }

/* ===== 左栏用户菜单 Dropdown ===== */
.profile-menu {
  position: absolute;
  margin-top: 8px;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: 6px 0;
  z-index: 1000;
  min-width: 180px;
}

.profile-menu .menu-list {
  margin: 0;
  padding: 0;
}

.profile-menu .menu-item,
.profile-menu .logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.profile-menu .menu-item:hover,
.profile-menu .logout-btn:hover {
  background: var(--bg-soft);
}

.profile-menu .logout {
  color: var(--brand);
  font-weight: 700;
}

/* 关注按钮 */
.btn-follow {
  background-color: var(--brand) !important;
  color: white !important;
  border-color: var(--brand) !important;
  font-weight: 700;
}

/* 已关注状态的按钮 */
.btn-muted {
  background-color: #f2f2f2 !important;
  color: var(--muted) !important;
  border-color: #e0e0e0 !important;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  padding: 10px;
  flex-wrap: wrap;
}

.page-link {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 4px;
  border-radius: 4px;
  background-color: #fff;
  color: var(--brand);
  text-decoration: none;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}

.page-link:hover {
  background-color: var(--bg-soft);
  border-color: var(--brand);
}

.page-link.active {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.page-link.disabled {
  color: var(--muted);
  pointer-events: none;
  cursor: default;
}

/* ===== 移动端底部导航栏 ===== */
.mobile-bottom-nav {
  display: none; /* 默认隐藏，只在移动端显示 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 9999; /* 提高z-index确保在最顶层 */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  justify-content: space-around;
  align-items: center;
  /* 确保底部导航不会被滚动影响 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-width: 0;
  flex: 1;
}

.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item.active {
  color: var(--brand);
  background: rgba(255, 36, 66, 0.1);
}

.mobile-bottom-nav .nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
  line-height: 1;
}

.mobile-bottom-nav .nav-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}



/* 响应式 */
@media (max-width:1200px){.container{grid-template-columns:220px minmax(0,1fr) 300px}}
@media (max-width:992px){.container{grid-template-columns:180px minmax(0,1fr)}.sidebar-right{display:none}}
@media (max-width:720px){
  .container{grid-template-columns:1fr;gap:12px;padding:12px 12px 100px} /* 增加底部padding为底部导航栏留空间 */
  .sidebar-left{display:none}
  .mobile-bottom-nav{display:flex} /* 在移动端显示底部导航栏 */
  
  /* 确保页面内容不被底部导航遮挡 */
  body {
    padding-bottom: 80px;
  }
  .post-media{padding:0 8px 10px}
  .pagination{padding:5px}
  .page-link{padding:6px 10px;margin:0 2px;font-size:14px}
  
  /* 移动端profile菜单样式 */
  .pf-uid-row {
    position: relative;
  }
  
  .pf-profile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: 6px 0;
    z-index: 1000;
    min-width: 180px;
  }
  
  .pf-profile-menu[hidden] {
    display: none;
  }
  
  .pf-profile-menu .menu-list {
    margin: 0;
    padding: 0;
  }
  
  .pf-profile-menu .logout-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--brand);
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
  }
  
  .pf-profile-menu .logout-btn:hover {
    background: var(--bg-soft);
  }
}

/* ===== 发帖组件 ===== */
.post-composer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.composer-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.composer-header .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.composer-input {
  flex: 1;
}

.composer-input textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  min-height: 48px;
  padding: 12px 0;
}

.composer-input textarea::placeholder {
  color: var(--muted);
}

.composer-media {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}

.media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

.media-item img,
.media-item video {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
}

.media-item audio {
  width: 200px;
  height: 40px;
}

.media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.media-buttons {
  display: flex;
  gap: 8px;
}

.media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.media-btn:hover {
  background: var(--bg-soft);
}

.media-btn.recording {
  background: var(--brand);
  color: #fff;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.post-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.post-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.post-btn:not(:disabled):hover {
  background: #e6213d;
}

.recording-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 500;
}

.recording-timer {
  font-family: monospace;
}

/* 媒体预览样式 */
.media-preview {
  margin-top: 15px;
  padding: 15px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  display: none;
}

.media-preview-item {
  position: relative;
  display: inline-block;
  margin: 0 10px 10px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.media-preview-item img,
.media-preview-item video {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.media-preview-item video {
  width: 200px;
  height: 120px;
}

.audio-preview-item {
  position: relative;
  padding: 15px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.audio-preview-item audio {
  width: 100%;
  max-width: 300px;
}

.media-remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.media-remove-btn:hover {
  background: rgba(255, 0, 0, 0.8);
}

.audio-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--danger-color);
}

.audio-remove:hover {
  background: var(--danger-hover);
}

/* 录音状态样式 */
.composer-record-btn.recording {
  background: var(--danger-color) !important;
  color: white !important;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* 发布按钮禁用状态 */
.composer-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 移动端适配 */
@media (max-width: 720px) {
  .post-composer {
    margin: 0 -12px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .composer-input textarea {
    font-size: 16px;
  }
  
  .media-item img,
  .media-item video {
    width: 80px;
    height: 80px;
  }
  
  .media-item audio {
    width: 150px;
  }
  
  .media-preview-item img,
  .media-preview-item video {
    max-width: 120px;
    max-height: 120px;
  }
  
  .media-preview-item video {
    width: 160px;
    height: 90px;
  }
}

/* 无限滚动样式 */
.loading-indicator {
  display: none;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
}

.loading-indicator.show {
  display: block;
}

.no-more-posts {
  display: none;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}

.no-more-posts.show {
  display: block;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 50%;
  border-top-color: var(--brand);
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 搜索和通知区域样式 */
.search-section,
.notification-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}