/* ============ 前端样式 按模板1:1 + 动画 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:#fff; color:#333; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* ---------- 加载动画 ---------- */
#loader {
  position:fixed; inset:0; background:#fff; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s, visibility .4s;
}
#loader.hide { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; color:#888; font-size:13px; }
.loader-ring {
  width:46px; height:46px; margin:0 auto 14px;
  border:3px solid #e5e7eb; border-top-color:#667eea;
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- 头部 ---------- */
.site-head { text-align:center; padding:48px 20px 20px; }
.site-title { font-size:30px; font-weight:600; letter-spacing:1px; color:#111; }
.site-sub { margin-top:6px; color:#999; font-size:13px; }
.notice-bar {
  display:inline-block; margin-top:12px; padding:8px 20px;
  background:linear-gradient(135deg,#fff7ed,#fef3c7); border:1px solid #fde68a;
  border-radius:999px; font-size:13px; color:#92400e;
}

/* ---------- 导航 ---------- */
.nav-bar {
  max-width:900px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #eee; gap:16px; flex-wrap:wrap;
}
.nav-left { display:flex; gap:28px; }
.nav-left a { font-size:15px; color:#555; position:relative; padding:4px 0; transition:color .2s; }
.nav-left a:hover, .nav-left a.active { color:#111; font-weight:600; }
.nav-left a.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:#667eea; border-radius:2px;
}
.search-box { display:flex; }
.search-box input {
  width:220px; padding:8px 14px; border:1px solid #ddd; border-right:none;
  border-radius:6px 0 0 6px; font-size:13px; outline:none; transition:.2s;
}
.search-box input:focus { border-color:#667eea; }
.search-box button {
  padding:8px 18px; background:#333; color:#fff; border:none;
  border-radius:0 6px 6px 0; cursor:pointer; font-size:13px; transition:.2s;
}
.search-box button:hover { background:#667eea; }

/* ---------- 列表 ---------- */
.container { max-width:900px; margin:0 auto; padding:10px 20px 60px; }
.ad-area { margin:16px 0; text-align:center; }
.ad-top { margin-top:14px; }
.ad-bottom { margin:24px 0; padding:16px; background:#fafbff; border-radius:10px; }
.post-list { list-style:none; }
.post-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 6px; border-bottom:1px solid #f5f5f5;
  transition:background .2s, transform .2s;
  opacity:0;
}
.post-item.fade-in { animation:fadeUp .5s ease forwards; }
.post-item:hover { background:#fafbff; transform:translateX(3px); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
.post-main { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.top-badge { color:#ef4444; font-weight:600; font-size:14px; }
.post-title { font-size:15px; color:#333; transition:color .2s; }
.post-item:hover .post-title { color:#667eea; }
.post-title.red { color:#e53e3e; font-weight:600; }
.tag {
  display:inline-block; padding:1px 8px; border-radius:4px;
  color:#fff; font-size:11px; line-height:18px;
}
.price-tag {
  display:inline-block; padding:1px 8px; border-radius:4px;
  background:#fef3c7; color:#d97706; font-size:11px; line-height:18px;
}
.post-meta { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.time { color:#999; font-size:13px; }
.dl-btn {
  padding:4px 14px; background:#667eea; color:#fff; border:none;
  border-radius:5px; font-size:12px; cursor:pointer; transition:.2s;
  opacity:0; transform:translateX(-4px);
}
.post-item:hover .dl-btn { opacity:1; transform:none; }
.dl-btn:hover { background:#5568d3; }
.empty { text-align:center; color:#bbb; padding:60px 0; }

/* ---------- 分页 ---------- */
.pagination { display:flex; justify-content:center; gap:8px; margin:36px 0; }
.pagination a, .pagination span {
  min-width:34px; height:34px; line-height:34px; text-align:center;
  border-radius:6px; font-size:14px; color:#666; transition:.2s;
}
.pagination a:hover { background:#eef1ff; color:#667eea; }
.pagination a.cur { background:#667eea; color:#fff; }
.pagination .dots { color:#aaa; }

/* ---------- 底部 ---------- */
.site-foot { text-align:center; padding:30px 20px 60px; color:#999; font-size:13px; }
.friend-links { margin-bottom:8px; }
.friend-links a:hover { color:#667eea; }

/* ---------- 悬浮客服 ---------- */
.kefu {
  position:fixed; right:18px; bottom:24px; z-index:900;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff; padding:8px 14px; border-radius:8px; font-size:12px;
  box-shadow:0 6px 20px rgba(124,58,237,.4);
  animation:float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow:auto;
}
.modal-mask.show { display:flex; animation:fadeIn .25s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:#fff; border-radius:12px; width:100%; max-width:640px;
  animation:modalUp .3s ease;
}
@keyframes modalUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:none; }
}
.modal-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; border-bottom:1px solid #eee;
}
.modal-head h2 { font-size:17px; font-weight:600; }
.modal-close {
  width:32px; height:32px; border:none; background:#f3f4f6; border-radius:50%;
  font-size:20px; cursor:pointer; color:#666; transition:.2s;
}
.modal-close:hover { background:#e5e7eb; transform:rotate(90deg); }
.modal-body { padding:24px; max-height:70vh; overflow:auto; }
.loading-bar {
  height:4px; background:#eef1ff; border-radius:2px; overflow:hidden;
  margin:40px auto; max-width:200px; position:relative;
}
.loading-bar::after {
  content:''; position:absolute; left:0; top:0; height:100%; width:40%;
  background:#667eea; animation:slide 1.2s infinite;
}
@keyframes slide {
  0% { left:-40%; } 100% { left:100%; }
}
.detail-cover { width:100%; border-radius:8px; margin-bottom:16px; }
.detail-desc { color:#555; font-size:14px; margin-bottom:16px; }
.detail-content { font-size:14px; color:#444; line-height:1.8; }
.detail-content img { border-radius:6px; margin:8px 0; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.gallery img { width:100%; border-radius:6px; cursor:pointer; transition:.2s; }
.gallery img:hover { transform:scale(1.04); }
.dl-list { margin-top:18px; border-top:1px dashed #eee; padding-top:16px; }
.dl-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:#f8fafc; border-radius:8px; margin-bottom:8px;
}
.dl-item .dl-name { font-size:14px; }
.dl-item .dl-url { color:#667eea; font-size:13px; }
.buy-btn {
  display:inline-block; padding:10px 28px; background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff; border-radius:8px; border:none; font-size:14px; cursor:pointer; margin-top:10px;
  transition:.2s;
}
.buy-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(102,126,234,.4); }
.pay-channels { display:flex; gap:10px; margin:14px 0; }
.pay-channels label {
  flex:1; padding:10px; border:1px solid #ddd; border-radius:8px; text-align:center;
  cursor:pointer; font-size:13px; transition:.2s;
}
.pay-channels input { display:none; }
.pay-channels label.on { border-color:#667eea; background:#eef1ff; color:#667eea; }
.notice-tip { background:#fffbeb; color:#92400e; padding:10px 14px; border-radius:8px; font-size:13px; margin-top:10px; }

/* 响应式 */
@media (max-width:640px) {
  .nav-bar { flex-direction:column; align-items:stretch; }
  .nav-left { justify-content:space-around; }
  .search-box input { width:100%; }
  .post-item { flex-direction:column; align-items:flex-start; gap:6px; }
  .post-meta { align-self:flex-end; }
  .dl-btn { opacity:1; transform:none; }
  .gallery { grid-template-columns:repeat(2,1fr); }
}