/* 干货007 - 前台样式 v3.0 */
*{margin:0;padding:0;box-sizing:border-box;}
body {
  font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  min-height:100vh;color:#fff;
  position:relative;overflow-x:hidden;
}
a{text-decoration:none;}

/* ─── 背景 ─── */
#bgCarousel{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden;}
#bgCarousel .bg-item{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s;}
#bgCarousel .bg-item.active{opacity:1;}
#bgCarousel .bg-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(15,12,41,0.82),rgba(48,43,99,0.72),rgba(36,36,62,0.65));
  z-index:1;
}

/* ─── 顶部 ─── */
.header{padding:24px 20px 10px;text-align:center;position:relative;}
.header h1{font-size:28px;background:linear-gradient(90deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.header p{color:#aaa;font-size:14px;margin-top:5px;}
.header-actions{position:absolute;right:20px;top:20px;display:flex;gap:8px;}
.header-actions a{
  color:#aaa;font-size:13px;text-decoration:none;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
  padding:6px 14px;border-radius:16px;transition:all 0.3s;
}
.header-actions a:hover{color:#f5576c;border-color:#f5576c;background:rgba(245,87,108,0.1);}

.container{max-width:800px;margin:0 auto;padding:0 20px 40px;}

/* ─── 搜索 ─── */
.search-bar{margin:15px 0;display:flex;gap:8px;}
.search-bar input{
  flex:1;padding:10px 16px;border-radius:10px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:#fff;font-size:14px;outline:none;
}
.search-bar input:focus{border-color:#f5576c;}
.search-bar button{
  padding:10px 20px;border-radius:10px;
  background:linear-gradient(135deg,#f093fb,#f5576c);border:none;color:#fff;font-size:14px;cursor:pointer;
}

/* ─── 分类 ─── */
.categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px;}
.cat-tag{
  padding:5px 14px;border-radius:20px;font-size:13px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  color:#aaa;text-decoration:none;transition:all 0.3s;
}
.cat-tag:hover,.cat-tag.active{background:rgba(245,87,108,0.12);border-color:#f5576c;color:#f5576c;}

/* ─── 排序 ─── */
.sort-bar{display:flex;gap:10px;margin-bottom:15px;align-items:center;}
.sort-bar .label{font-size:12px;color:#666;}
.sort-btn{font-size:13px;color:#888;text-decoration:none;padding:3px 10px;border-radius:12px;border:1px solid transparent;}
.sort-btn:hover{color:#f5576c;}
.sort-btn.active{color:#f5576c;border-color:#f5576c;background:rgba(245,87,108,0.08);}

/* ─── 文章卡片 ─── */
.post-card{
  background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);
  border-radius:14px;padding:18px;margin-bottom:12px;
  transition:background 0.3s;border:1px solid rgba(255,255,255,0.04);
  display:block;text-decoration:none;color:inherit;
}
.post-card:hover{background:rgba(255,255,255,0.08);}
.post-card .post-title{font-size:17px;font-weight:600;margin-bottom:5px;color:#eee;line-height:1.4;}
.post-card .post-title .type-icon{margin-right:4px;}
.post-card .post-meta{display:flex;gap:12px;font-size:12px;color:#888;margin-bottom:8px;flex-wrap:wrap;}
.post-card .post-meta span{display:flex;align-items:center;gap:3px;}
.post-card .post-excerpt{font-size:13px;color:#999;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;word-break:break-word;}
.post-card .post-footer{display:flex;gap:16px;font-size:12px;color:#666;}
.post-card .post-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.post-card .post-tags .tag{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.04);color:#888;}

.no-posts{text-align:center;padding:60px 20px;color:#666;}
.no-posts .icon{font-size:48px;margin-bottom:10px;}

/* ─── 热搜 ─── */
.hot-section{margin:20px 0;}
.hot-title{font-size:15px;color:#ccc;margin-bottom:10px;font-weight:500;}
.hot-tags{display:flex;flex-wrap:wrap;gap:8px;}
.hot-tag{
  display:inline-block;padding:5px 14px;border-radius:20px;
  background:rgba(245,87,108,0.08);color:#f5576c;font-size:13px;
  text-decoration:none;transition:all 0.2s;border:1px solid rgba(245,87,108,0.15);
}
.hot-tag:hover{background:rgba(245,87,108,0.18);color:#fff;}

/* ─── 活跃用户 ─── */
.active-users{margin:20px 0;}
.users-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none;}
.users-row::-webkit-scrollbar{display:none;}
.user-card{
  flex:0 0 auto;width:80px;text-align:center;
  background:rgba(255,255,255,0.04);border-radius:12px;
  padding:10px 4px;text-decoration:none;transition:background 0.2s;border:1px solid rgba(255,255,255,0.04);
}
.user-card:hover{background:rgba(255,255,255,0.08);}
.user-avatar{
  width:40px;height:40px;border-radius:50%;margin:0 auto 4px;
  background:linear-gradient(135deg,#f093fb,#f5576c);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;overflow:hidden;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;}
.user-name{font-size:11px;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-stats{font-size:10px;color:#666;margin-top:2px;}

/* ─── 分页 ─── */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.pagination a,.pagination span{
  padding:8px 14px;border-radius:8px;font-size:13px;
  background:rgba(255,255,255,0.04);color:#aaa;text-decoration:none;
}
.pagination a:hover{background:rgba(245,87,108,0.1);color:#f5576c;}
.pagination .current{background:rgba(245,87,108,0.15);color:#f5576c;}

/* ─── 详情页 ─── */
.post-detail .post-card{padding:24px;}
.post-detail .post-card .post-title{font-size:22px;margin-bottom:12px;}
.post-detail .post-content{font-size:15px;color:#ccc;line-height:1.8;margin:16px 0;word-break:break-word;overflow-wrap:break-word;}
.post-detail .post-content img{max-width:100%;border-radius:8px;margin:10px 0;}
.post-detail .post-content video{max-width:100%;border-radius:8px;}
.post-detail .post-content a{color:#f5576c;}
.post-detail .video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin:10px 0;}
.post-detail .video-container video{position:absolute;top:0;left:0;width:100%;height:100%;}
.action-bar{display:flex;gap:12px;margin:20px 0;}
.action-btn{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:#ccc;padding:10px 20px;border-radius:10px;cursor:pointer;
  font-size:14px;transition:all 0.3s;font-family:inherit;
}
.action-btn:hover{border-color:#f5576c;color:#f5576c;}
.action-btn.liked{background:rgba(245,87,108,0.15);border-color:#f5576c;color:#f5576c;}
.attachments{margin:20px 0;}
.attach-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.04);border-radius:8px;margin-bottom:6px;}
.attach-item:hover{background:rgba(255,255,255,0.08);}

/* ─── 评论区 ─── */
.comments{margin:24px 0;}
.comment-box{display:flex;gap:8px;margin:10px 0;}
.comment-box textarea{
  flex:1;padding:10px;border-radius:10px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);color:#fff;font-size:13px;resize:none;font-family:inherit;outline:none;
}
.comment-box textarea:focus{border-color:#f5576c;}
.comment-box button{padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,#f093fb,#f5576c);border:none;color:#fff;cursor:pointer;font-size:13px;align-self:flex-end;}
.comment-item{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.comment-item .comment-user{font-size:13px;color:#f5576c;font-weight:500;}
.comment-item .comment-time{font-size:11px;color:#666;margin-left:8px;}
.comment-item .comment-text{font-size:14px;color:#ccc;margin-top:6px;line-height:1.5;}

/* ─── 搜索页面 ─── */
.search-header{margin:20px 0;}
.search-stats{font-size:13px;color:#888;margin:10px 0;}

/* ─── 用户个人主页 ─── */
.profile-header{text-align:center;padding:20px 0;}
.profile-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;overflow:hidden;background:linear-gradient(135deg,#f093fb,#f5576c);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-name{font-size:22px;font-weight:600;color:#eee;}
.profile-bio{font-size:13px;color:#999;margin-top:4px;}
.profile-stats{display:flex;justify-content:center;gap:24px;margin:12px 0;}
.profile-stats div{text-align:center;}
.profile-stats .num{font-size:18px;font-weight:600;color:#eee;}
.profile-stats .label{font-size:12px;color:#888;}

/* ─── 底部备案 ─── */
.icp-footer{display:block;text-align:center;padding:20px;font-size:13px;color:#ffffff;text-decoration:none;}
.icp-footer:hover{color:#f5576c;}