*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#ff4757;--primary-dark:#ff6b81;--bg:#0f0f23;--bg-card:#1a1a2e;--bg-hover:#16213e;--text:#eaeaea;--text-muted:#888;--border:#2a2a4a}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 15px}
header{background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid var(--border);padding:20px 0;position:sticky;top:0;z-index:100}
header h1 a{color:var(--primary);text-decoration:none;font-size:28px;font-weight:700}
header nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
header nav a{color:var(--text);text-decoration:none;padding:8px 16px;background:var(--bg);border-radius:20px;font-size:14px;transition:all .3s}
header nav a:hover,header nav a.active{background:var(--primary);color:#fff;transform:translateY(-2px)}
main{padding:30px 0}
.cta-banner{text-align:center;padding:40px;background:linear-gradient(135deg,#ff4757,#ff6b81);border-radius:16px;margin-bottom:30px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,.4)}50%{box-shadow:0 0 0 15px rgba(255,71,87,0)}}.btn-primary{display:inline-block;padding:18px 50px;background:#fff;color:#ff4757;text-decoration:none;border-radius:30px;font-weight:700;font-size:20px;transition:all .3s;animation:bounce 1s infinite;box-shadow:0 4px 15px rgba(0,0,0,.3)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.btn-primary:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.4)}.threads{background:var(--bg-card);border-radius:16px;padding:25px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.thread-list{list-style:none}
.thread-item{padding:18px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;transition:all .2s}
.thread-item:last-child{border-bottom:none}
.thread-item:hover{background:var(--bg-hover);margin:0 -25px;padding-left:25px;padding-right:25px;border-radius:8px}
.thread-item .city{background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap}
.thread-item a{color:var(--text);text-decoration:none;font-size:16px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-item a:hover{color:var(--primary)}
.thread-item .author{color:var(--text-muted);font-size:13px;white-space:nowrap}
.thread{background:var(--bg-card);border-radius:16px;padding:40px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.thread h2{font-size:26px;margin-bottom:20px;color:var(--text);padding-bottom:15px;border-bottom:2px solid var(--border)}
.thread .meta{display:flex;gap:15px;margin-bottom:25px;color:var(--text-muted);font-size:14px}
.thread .meta .city{background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;padding:5px 15px;border-radius:15px;font-weight:600}
.thread .content{font-size:16px;line-height:1.8}
.thread .content p{margin-bottom:15px}
.thread .cta{text-align:center;margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;padding:30px}
.pagination a,.pagination span{display:inline-block;padding:10px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);transition:all .2s}
.pagination a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
footer{text-align:center;padding:40px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:50px}
@media (max-width:768px){header h1 a{font-size:22px}header nav a{padding:6px 12px;font-size:13px}.thread{padding:25px}.thread h2{font-size:20px}.thread-item .author{display:none}}