/* =========================================
   1. 全局背景优化 (融合 NodeSeek 护眼网格)
   ========================================= */
body {
    background-color: #fffcf8 !important; /* 护眼暖黄底色 */
    background-image: 
        linear-gradient(#d4d4d4 1px, transparent 1px), 
        linear-gradient(to right, #d4d4d4 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-attachment: fixed !important;
}

/* =========================================
   1. 顶部固顶导航栏 (Sticky Header)
   ========================================= */
.navbar {
    position: sticky !important;
    top: 0;
    z-index: 1030; /* 确保悬浮在所有内容之上 */
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; /* 精致的悬浮阴影 */
    min-height: 56px;
    padding: 0.5rem 0 !important;
    margin-bottom: 15px !important; /* 这里由 25px 改为 15px，缩减与下方内容的间距 */
}
/* =========================================
   8. 侧边栏用户状态卡片 (智能切换版)
   ========================================= */

/* 未登录状态排版 (精准复刻 22.jpg) */
.nsk-guest-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 12px; }
.nsk-guest-desc { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 16px; }
.nsk-guest-btns { display: flex; gap: 12px; justify-content: flex-start; } /* 按钮靠左排列 */

/* 专属的绿色实心大按钮 */
.nsk-btn-green { 
    display: inline-block;
    padding: 6px 20px; 
    border-radius: 4px; 
    font-size: 15px; 
    font-weight: bold; 
    text-decoration: none !important; 
    color: #fff !important; 
    background: #35a046; /* 提取自图片的温和绿色 */
    border: 1px solid #2d8f3d;
    transition: all 0.2s; 
}
.nsk-btn-green:hover { 
    background: #2a8238; 
    box-shadow: 0 2px 6px rgba(53, 160, 70, 0.3);
}

/* 登录后状态排版 (保持原有的头像和胶囊菜单) */
.nsk-user-header { display: flex; align-items: center; gap: 12px; }
.nsk-user-avatar { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; border: 1px solid #eee; }
.nsk-user-info { flex: 1; min-width: 0; }
.nsk-username { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsk-username:hover { color: #009688; }
.nsk-user-actions { display: flex; gap: 8px; margin-top: 6px; }
.nsk-user-actions a { color: #888; font-size: 12px; text-decoration: none; background: #f4f5f7; padding: 2px 8px; border-radius: 10px; transition: 0.2s; }
.nsk-user-actions a:hover { color: #333; background: #e5e7eb; }

/* 底部双列统计面板 */
.nsk-stats-grid { 
    background: #fbfaf5; border-radius: 4px; padding: 10px 12px; display: grid; 
    grid-template-columns: repeat(2, 1fr); gap: 8px 12px; font-size: 13px; color: #444; border: 1px solid #f0efe9;
}
.nsk-stat-item { display: flex; justify-content: space-between; align-items: center; }
.nsk-stat-item b { color: #009688; font-family: Arial, sans-serif; font-size: 14px;}


/* =========================================
   9. NodeSeek 原生质感重构 (容器、列表、标签)
   ========================================= */

/* 1. 外层立体大容器 (覆盖之前的扁平样式) */
.portal-container {
    border-radius: 1rem !important; 
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important; 
    padding: 25px 30px !important;
}

/* 2. 列表父级 (必须设为相对定位，才能使用绝对定位的标签) */
.thread { 
    position: relative !important; 
}

/* 3. NodeSeek 专属头像 */
.nsk-avatar {
    border-radius: 15% !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px !important;
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
}

/* 4. 版块标签 (绝对定位，直接钉死在右下角) */
.nsk-category {
    background: #f4f5f7;
    border-radius: 2px;
    bottom: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px;
    color: #666;
    height: 20px;
    line-height: 20px;
    padding: 0px 6px;
    position: absolute;
    right: 5px; 
    font-size: 11px;
    text-decoration: none;
    transition: all 0.2s;
}
.nsk-category:hover {
    background: #e9ecef;
    color: #333;
}

/* =========================================
   2. 帖子列表项 (完美适配 Xiuno 的 .thread 结构)
   ========================================= */
.thread { 
    display: flex; 
    align-items: flex-start; /* 改为顶部对齐，让头像和标题更紧凑 */
    padding: 10px 0 !important; /* 核心：去掉左右 15px 的内边距，实现左侧绝对对齐 */
    border-bottom: 1px solid #f6f6f6 !important; 
    border-radius: 0; /* 既然去掉了内边距，就不需要圆角了 */
    transition: background-color 0.2s;
    margin-bottom: 0 !important; 
}


.thread:hover { 
    background-color: #fafafa; 
}
.thread:last-child { 
    border-bottom: none !important; 
}

/* 列表标题部分 */
.thread .subject a { 
    font-size: 15px; 
    font-weight: bold; 
    color: #444; 
    text-decoration: none; 
    transition: color 0.2s; 
}
.thread .subject a:hover { 
    color: #009688; 
}

/* 帖子小标签 (分类等) */
.topic-tag { 
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    background: #fff;
    color: #666;
    box-shadow: 0 0 2px rgba(0,0,0,0.5); 
    font-size: 11px; 
    transition: all 0.2s;
}
.topic-tag:hover { 
    box-shadow: 0 0 4px rgba(0,0,0,0.7); 
    color: #333; 
}

/* =========================================
   3. 右侧边栏 NodeSeek 风格卡片
   ========================================= */
.xiaobai-card, .nsk-user-card { 
    border-radius: 1px;
    color: #888;
    padding: 15px;
    margin: 0 0 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px, rgba(0, 0, 0, 0.1) 0 0 1px;
    background: #fff;
    box-sizing: border-box;
}

/* 发帖大按钮 */
.sidebar-post-btn { 
    display: block; 
    width: 100%; 
    padding: 9px 0; 
    background: #2ea44f; 
    color: #fff; 
    text-align: center; 
    border-radius: 5px; 
    font-size: 15px; 
    font-weight: bold; 
    box-shadow: 0 3px 7px rgba(46, 164, 79, 0.2); 
    transition: all 0.3s; 
    margin-bottom: 15px;
}
.sidebar-post-btn:hover { 
    background: #22863a; 
    color: #fff;
}

/* =========================================
   4. 侧边栏双列小组件 (排行榜/板块列表)
   ========================================= */
.modern-sidebar-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: board-rank;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 6px 8px; 
}
.modern-sidebar-list li {
    display: flex;
    align-items: center;
    padding: 4px 8px; 
    background: #fbfaf5; 
    border: 1px solid #f0efe9;
    border-radius: 4px; 
    transition: background 0.2s, border-color 0.2s; 
}
.modern-sidebar-list li:hover {
    background: #fff;
    border-color: #009688;
}
.modern-sidebar-list li::before {
    counter-increment: board-rank;
    content: counter(board-rank);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px; 
    height: 16px;
    border-radius: 3px;
    background: #f0f2f5;
    color: #8a919f;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    flex-shrink: 0;
}
/* 前三名马卡龙高亮 */
.modern-sidebar-list li:nth-child(1)::before { background: #ffe8eb; color: #ff5b71; }
.modern-sidebar-list li:nth-child(2)::before { background: #fff2e0; color: #ffa22a; }
.modern-sidebar-list li:nth-child(3)::before { background: #e6f4ff; color: #1890ff; }

.modern-sidebar-list a {
    flex: 1;
    min-width: 0;
    color: #444;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modern-sidebar-list li:hover a { color: #009688; }

/* =========================================
   5. 极简横排数据条 (论坛统计)
   ========================================= */
.nsk-forum-stats ul {
    list-style: none;
    padding: 10px 15px; 
    margin: 0 0 15px 0;
    display: flex;
    justify-content: space-around; 
    background: #fbfaf5; 
    border: 1px solid #f0efe9;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s;
}
.nsk-forum-stats ul:hover {
    background: #fff;
    border-color: #009688; 
}
.nsk-forum-stats li {
    display: flex;
    align-items: baseline; 
    gap: 6px; 
}
.nsk-forum-stats .stat-label { font-size: 13px; color: #8a919f; }
.nsk-forum-stats .stat-num { font-size: 15px; color: #333; font-weight: bold; }

/* =========================================
   6. 分页条美化 (覆盖 Bootstrap 默认)
   ========================================= */
.pagination { 
    justify-content: flex-end; 
    margin-top: 15px; 
}
.page-item .page-link {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 10px; 
    min-width: 32px; 
    height: 32px; 
    border-radius: 4px; 
    background: #fff; 
    border: 1px solid #eee; 
    color: #666; 
    font-size: 13px; 
    margin-left: 4px;
}
.page-item.active .page-link {
    background: #009688; 
    color: #fff; 
    border-color: #009688; 
}
.page-item .page-link:hover:not(.active) {
    border-color: #009688; 
    color: #333; 
}

/* =========================================
   7. 列表顶部标签切换栏 (.sorter 原汁原味极简灰)
   ========================================= */
.sorter { 
    display: inline-flex; 
    overflow: hidden; 
    border-radius: 3px; 
    border: 1px solid #737373; /* 恢复原版的深灰边框 */
    background-color: #888;    /* 恢复原版的灰色背景底座 */
    padding: 0;
    margin: 0;
    list-style: none;
}
.sorter > li > a { 
    display: block; 
    background-color: #fff; 
    padding: 3px 12px; 
    font-size: 13px; 
    font-weight: 500;
    color: #666; /* 恢复原版的浅灰文字 */
    text-decoration: none; 
    margin: 0;
    transition: all 0.2s;
}
/* 鼠标悬停时的效果 */
.sorter > li > a:hover:not(.active) { 
    color: #333; /* 悬停时文字变深黑 */
}
/* 当前选中状态 */
.sorter > li > a.active { 
    background-color: #888 !important; /* 恢复原版的灰色实心背景 */
    color: #fff !important; 
}