* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:#f5f6f7;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#333;
    padding-bottom: 70px; /* 给固定footer留出空间，防止底部内容被遮挡 */
}
/* 顶部导航 */
.topbar {
    background:#fff;
    border-bottom:1px solid #eee;
    position:sticky; top:0; z-index:100;
}
.topbar-inner {
    max-width:960px; margin:0 auto; padding:10px 16px;
    display:flex; align-items:center; gap:16px;
}
.logo { font-size:19px; font-weight:700; color:#1989fa; white-space:nowrap; }
.search-box {
    flex:1; display:flex; align-items:center; gap:6px;
    background:#f2f3f5; border-radius:20px; padding:7px 14px;
}
.search-box input {
    flex:1; border:none; outline:none; background:transparent; font-size:14px;
}
.search-btn {
    border:none; background:transparent; color:#1989fa; cursor:pointer; font-size:14px;
}
.container {
    max-width:960px; margin:16px auto 0; padding:0 16px 16px;
    display:grid; grid-template-columns:240px 1fr; gap:16px; align-items:start;
}
/* 侧边栏 */
.sidebar-card {
    background:#fff; border-radius:12px; padding:20px;
    position:sticky; top:66px; box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.avatar {
    width:76px;height:76px;border-radius:50%;object-fit:cover;background:#e8e8e8;
    margin:0 auto 12px;display:block;
}
.username { font-size:18px;font-weight:700;text-align:center;margin-bottom:6px; }
.bio { font-size:13px;color:#666;text-align:center;line-height:1.6;margin-bottom:16px; }
.stat-row { display:flex;justify-content:space-around;font-size:13px;padding-bottom:14px;border-bottom:1px solid #f2f2f2;margin-bottom:14px; }
.stat-item span{ display:block;text-align:center;font-weight:700;font-size:16px; }
.tag-title { font-size:14px;font-weight:600;margin-bottom:10px;color:#555; }
.tag-list { display:flex;flex-direction:column;gap:6px; }
.tag-item {
    padding:7px 12px;border-radius:8px;font-size:13px;color:#666;cursor:pointer;
    transition:all .2s;
}
.tag-item:hover { background:#f2f3f5;color:#1989fa; }
.tag-item.active { background:#e8f2ff;color:#1989fa;font-weight:600; }
/* 信息流 */
.feed-wrap { display:flex;flex-direction:column;gap:14px;min-width:0;}
.article-card { background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;transition:box-shadow .2s;margin-bottom: 16px;}
.article-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.card-header { display:flex;align-items:center;gap:12px;margin-bottom:10px; }
.mini-avatar { width:42px;height:42px;border-radius:50%;background:#eee;flex-shrink:0; }
.author-info .name { font-weight:600;font-size:15px; }
.author-info .time { font-size:12px;color:#999;margin-top:2px; }
.card-tags { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.pill { font-size:12px;color:#1989fa;background:#e8f2ff;padding:2px 8px;border-radius:10px; }
.card-title { font-size:17px;font-weight:600;margin-bottom:8px;color:#222; }
.card-content { font-size:14px;line-height:1.7;color:#555;margin-bottom:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; }
.card-imgs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px; }
.card-imgs img { width:90px;height:90px;object-fit:cover;border-radius:8px;cursor:zoom-in; }
.card-footer { display:flex;gap:24px;font-size:14px;color:#888; }
.card-footer div{ display:flex;align-items:center;gap:4px; }
/* 按钮 */
.load-more { width:100%;padding:12px;border:none;background:#fff;border-radius:10px;font-size:15px;color:#1989fa;cursor:pointer;margin-top:10px; }
.load-more:disabled { color:#999;cursor:not-allowed; }
.loading { text-align:center;padding:20px;color:#999; }
.empty { text-align:center;padding:40px;color:#999;background:#fff;border-radius:12px; }
/* 详情弹窗 */
.mask { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none; }
.detail-modal {
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(640px,92vw);max-height:84vh;overflow-y:auto;
    background:#fff;border-radius:14px;padding:28px;z-index:201;display:none;
    box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.detail-modal .d-close {
    position:absolute;top:14px;right:18px;font-size:24px;color:#999;cursor:pointer;line-height:1;
}
.d-title { font-size:22px;font-weight:700;margin-bottom:12px;padding-right:30px; }
.d-meta { font-size:13px;color:#999;margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap; }
.d-body { font-size:15px;line-height:1.9;color:#333;white-space:pre-wrap; }
.d-imgs { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.d-imgs img { width:120px;height:120px;object-fit:cover;border-radius:8px;cursor:zoom-in; }
/* 图片预览 lightbox */
.lightbox {
    position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:300;display:none;
    align-items:center;justify-content:center;flex-direction:column;
}
.lightbox img { max-width:90vw;max-height:84vh;border-radius:6px; }
.lb-close { position:absolute;top:20px;right:30px;color:#fff;font-size:34px;cursor:pointer; }
.lb-prev,.lb-next {
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:40px;color:#fff;cursor:pointer;padding:10px;user-select:none;
}
.lb-prev { left:20px; } .lb-next { right:20px; }
.lb-counter { color:#ccc;font-size:14px;margin-top:12px; }

/* ========== 固定底部 Footer 新增样式 ========== */
.page-footer{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#ffffff;
    border-top:1px solid #eee;
    padding:12px 0;
    z-index:99;
}
.footer-inner{
    max-width:960px;
    margin:0 auto;
    padding:0 16px;
    text-align:center;
    font-size:13px;
    color:#777;
}
.footer-inner a{
    color:#1989fa;
    text-decoration:none;
    margin:0 6px;
}
.footer-inner a:hover{
    text-decoration:underline;
}

.link-item {
    padding:7px 12px;border-radius:8px;font-size:13px;color:#666;cursor:pointer;
    transition:all .2s;
}
.link-item:hover { background:#f2f3f5;color:#1989fa; }
.link-item a{ color:inherit;text-decoration:none;display:block; }

@media (max-width:768px){
    .container{ grid-template-columns:1fr; }
    .sidebar-card{ position:static; }
    .card-imgs img{ width:31%;height:80px; }
    .page-footer { padding:10px 0; }
}