/* AI 学习社区 - 在线会员区域美化 */

/* 在线统计区域容器 */
#online, .bm .online, .wp .online {
    background: rgba(15, 20, 40, 0.6) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
}

/* 在线统计标题 */
#online .mt, .online .mt, .online h4 {
    color: #00d4ff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* 在线统计内容 */
#online .mbm, .online .mbm, .online .ct2a {
    color: #8fa3bf !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* 在线用户组列表 */
#online p, .online p, .online .pd2 {
    margin: 8px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 用户组图标 */
#online img, .online img, .online .useric {
    border-radius: 4px !important;
    transition: transform 0.3s !important;
}

#online img:hover, .online img:hover {
    transform: scale(1.2) !important;
}

/* 用户组名称链接 */
#online a, .online a {
    color: #c0d0e0 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    background: rgba(0, 212, 255, 0.08) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 6px !important;
    transition: all 0.3s !important;
}

#online a:hover, .online a:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    color: #00f0ff !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

/* 在线数字高亮 */
#online .xi1, .online .xi1, .online em {
    color: #00d4ff !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* 最高记录 */
#online .xg1, .online .xg1 {
    color: #5a6f8a !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(0, 212, 255, 0.1) !important;
}

/* 隐身用户提示 */
#online .pd2 .xg1, .online .pd2 .xg1 {
    color: #5a6f8a !important;
    font-size: 12px !important;
}


/* 用户组图标 - 隐藏默认img，用CSS绘制科技感图标 */
#online p a, .online p a {
    position: relative !important;
    padding-left: 28px !important;
    overflow: hidden !important;
}

/* 隐藏默认小图标 */
#online p a img, .online p a img {
    display: none !important;
}

/* 用伪元素添加科技感图标 */
#online p a::before, .online p a::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    background-size: cover !important;
}

/* 管理员 - 盾牌图标 */
#online p a[href*="admin"], .online p a[href*="admin"] {
    position: relative !important;
}

#online p a[href*="admin"]::before, .online p a[href*="admin"]::before {
    background: linear-gradient(135deg, #ff4444, #ff6b6b) !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
}

/* 超级版主 - 闪电图标 */
#online p a[href*="super"], .online p a[href*="super"],
#online p a[href*="founder"], .online p a[href*="founder"] {
    position: relative !important;
}

#online p a[href*="super"]::before, .online p a[href*="super"]::before,
#online p a[href*="founder"]::before, .online p a[href*="founder"]::before {
    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

/* 版主 - 齿轮图标 */
#online p a[href*="mod"], .online p a[href*="mod"] {
    position: relative !important;
}

#online p a[href*="mod"]::before, .online p a[href*="mod"]::before {
    background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
}

/* 会员 - 用户图标 */
#online p a[href*="member"], .online p a[href*="member"] {
    position: relative !important;
}

#online p a[href*="member"]::before, .online p a[href*="member"]::before {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5) !important;
}

/* 在线会员列表里的用户名链接 */
#online .pd2 a, .online .pd2 a {
    margin: 2px !important;
}