/* =====================================================================
   xn-base.css  —  星诺云 用户中心 基础层（所有 clientarea 页面共用）
   设计原则：
   1. 不重写布局定位，PC/平板/手机响应式交给原生 app.min.css；
   2. 品牌主色用近黑 #1a1a1a（与 login/www 一致的简约中性风）；
   3. 保留语义色（success/danger/warning/info）用于状态；
   4. 不对任何图片/图标/国旗/头像做去色(grayscale)，全部保持原色；
   5. 只做圆角、细边框、间距、字体的克制统一。
   ===================================================================== */

:root{
    --xn-ink:#1a1a1a;        /* 品牌主色（近黑） */
    --xn-ink-2:#383c40;
    --xn-muted:#8a8f98;
    --xn-line:#e9ecef;
    --xn-bg:#f5f6f8;
    --xn-brand:#1a1a1a;      /* 主按钮/选中 */
    --xn-danger:#dc3545;
    --xn-radius:10px;
}

/* ---------- 基础排版 ---------- */
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#2b2f36; background:var(--xn-bg);
    -webkit-font-smoothing:antialiased;
}
.main-content{ background:var(--xn-bg); }

/* ---------- 顶栏 / 侧栏 中性化（light 主题） ---------- */
#page-topbar{ background:#fff !important; border-bottom:1px solid var(--xn-line); box-shadow:none !important; height:60px !important; z-index:10002 !important; }
.navbar-header{ height:60px !important; min-height:60px !important; }
.navbar-header{ background:#fff !important; }
.vertical-menu{ background:#fff !important; border-right:1px solid var(--xn-line); box-shadow:none !important; }
.vertical-menu #sidebar-menu{ padding-top:60px !important; padding-bottom:20px !important; }

/* 顶部功能按钮 */
.header-item{ color:#4b5158 !important; }
.header-item:hover{ background:#f3f4f6 !important; color:var(--xn-ink) !important; }
#page-topbar .dropdown-menu{ border:1px solid var(--xn-line); box-shadow:0 6px 20px rgba(0,0,0,.08) !important; border-radius:8px; }
#page-topbar .dropdown-item{ color:#333; }
#page-topbar .dropdown-item:hover{ background:#f5f6f8; color:var(--xn-ink); }
#page-topbar .dropdown-item.text-danger{ color:var(--xn-danger) !important; }

/* 语言国旗：保持原色，不做任何滤镜 */
#header-lang-img, .language img, .header-item img{ filter:none !important; }

/* ---------- 侧边菜单（metismenu） ---------- */









/* 原生品牌蓝 #0064ff 统一替换为品牌黑（hover/激活/链接等），仅作用于菜单与控件 */



/* ---------- 侧边栏底部用户信息 ---------- */
.xn-menu-user-footer{ padding:12px 16px; border-top:1px solid #eee; background:#fafafa; margin-top:auto; }
.xn-menu-user-box{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; margin-bottom:8px;
}
.xn-menu-user-avatar{
    width:36px; height:36px; border-radius:50%; object-fit:cover;
    background:#eee; border:1px solid #eee; flex-shrink:0;
}
.xn-menu-avatar-fallback{
    width:36px; height:36px; border-radius:50%; background:#1a1a1a; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:600; flex-shrink:0;
}
.xn-menu-user-info{ min-width:0; flex:1; }
.xn-menu-user-name{ font-size:13px; font-weight:600; color:#1a1a1a; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xn-menu-user-uid{ font-size:11px; color:var(--xn-muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }



/* ---------- 卡片 / 面板 ---------- */
.card{
    border:1px solid var(--xn-line) !important;
    border-radius:var(--xn-radius) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.03) !important;
    margin-bottom:18px;
}
.card-header{ background:#fff; border-bottom:1px solid var(--xn-line); border-radius:var(--xn-radius) var(--xn-radius) 0 0 !important; }

/* ---------- 品牌主按钮（仅 primary 用黑），语义按钮保留本色 ---------- */
.btn-primary{
    background-color:var(--xn-brand) !important; border-color:var(--xn-brand) !important; color:#fff !important;
}
.btn-primary:hover,.btn-primary:focus{ background-color:#000 !important; border-color:#000 !important; color:#fff !important; }
.btn-outline-primary{ color:var(--xn-ink) !important; border-color:var(--xn-ink) !important; background:transparent !important; }
.btn-outline-primary:hover{ background:var(--xn-ink) !important; color:#fff !important; border-color:var(--xn-ink) !important; }
/* success/danger/warning/info/secondary 维持语义色，不覆盖 */

/* ---------- 链接：主文字链接用黑，语义链接保留 ---------- */
.main-content a{ color:#2b2f36; }
.main-content a:hover{ color:#000; }
.text-success,.text-danger,.text-warning,.text-info,
a.text-success,a.text-danger,a.text-warning,a.text-info{ /* 保留语义颜色，不覆盖 */ }

/* ---------- 表格 ---------- */
.table thead th{ background:#fafbfc; color:#4b5158; border-bottom:1px solid var(--xn-line); font-weight:600; }
.table td,.table th{ border-color:#f0f1f3; }

/* ---------- 表单 ---------- */
.form-control,.custom-select,.form-control:read-only{
    border:1px solid #dfe2e6; border-radius:8px; color:#2b2f36;
}
.form-control:focus,.custom-select:focus{
    border-color:var(--xn-ink) !important; box-shadow:0 0 0 2px rgba(0,0,0,.07) !important;
}

/* ---------- 分页 ---------- */
.pagination .page-link{ color:#3a3f45; border-color:#e4e6ea; border-radius:6px; margin:0 2px; }
.pagination .page-item.active .page-link,
.pagination .active .page-link{ background:var(--xn-ink) !important; border-color:var(--xn-ink) !important; color:#fff !important; }

/* ---------- 导航/标签页品牌色 ---------- */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active{ color:var(--xn-ink); }
a{ text-decoration:none; }

/* ---------- 页脚（自定义统一页脚） ---------- */
.xn-footer{ background:var(--xn-ink); color:#9a9fa6; padding:26px 0; text-align:center; margin-top:24px; }
.xn-footer-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.xn-footer-links a{ color:#cfd2d6 !important; font-size:12px; }
.xn-footer-links a:hover{ color:#fff !important; }
.xn-footer-copy{ font-size:11px; color:#7a7f86; line-height:1.8; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-thumb{ background:#c9ccd1; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:#a8acb3; }
::-webkit-scrollbar-track{ background:transparent; }


/* ---------- 顶栏国旗 / 用户头像尺寸约束（防止被拉伸） ---------- */
#header-lang-img{ width:auto !important; height:16px !important; border-radius:2px; object-fit:cover; }
.dropdown-menu .language img{ width:auto !important; height:12px !important; }
.header-profile-user{ width:34px !important; height:34px !important; object-fit:cover; border-radius:50%; }
#page-header-user-dropdown{ gap:6px; }

/* ===== footer 全宽对齐（xn r4） ===== */
.xn-footer{width:100%!important;max-width:100%!important;clear:both;box-sizing:border-box;}
@media (min-width:992px){.xn-footer{margin-left:250px;}}
@media (max-width:991.98px){.xn-footer{margin-left:0!important;}}

/* ===== 星诺云统一：移动端侧边栏滑入 + 遮罩 + 全局字体缩小 (r5) ===== */
html,body{font-size:12px;}
body{font-size:12px;line-height:1.5;}
.card,.card-body,.table,label,.form-control,.btn,select,input,textarea{font-size:12px;}
h1{font-size:20px;} h2{font-size:17px;} h3{font-size:15px;} h4{font-size:13px;} h5{font-size:12px;}
.page-title-box h4{font-size:14px;}

@media (max-width:991.98px){
    .vertical-menu{
        display:block !important; position:fixed !important; top:0 !important; left:-280px !important;
        width:260px !important; height:100vh !important; z-index:10001 !important;
        transition:left .25s ease !important; overflow-y:auto !important; overflow-x:hidden;
        box-shadow:2px 0 12px rgba(0,0,0,.18) !important; background:#fff !important;
    }
    body.sidebar-open .vertical-menu{left:0 !important;}
    .xn-sidebar-overlay{
        display:none; position:fixed; top:0; left:0; right:0; bottom:0;
        background:rgba(0,0,0,.45); z-index:10000;
    }
    body.sidebar-open .xn-sidebar-overlay{display:block;}
    body.sidebar-open{overflow:hidden;}
    #page-topbar{left:0 !important; position:fixed !important; width:100% !important;}
    .main-content{margin-left:0 !important; padding-top:60px !important;}
    .page-content{padding:12px !important;}
    .container-fluid{padding:0 !important;}
}
@media (min-width:992px){
    .xn-sidebar-overlay{display:none !important;}
}

/* ===== 星诺云 r6：综合页面修复（黑白风格+移动端） ===== */
/* 支付方式居中 */
.addfunds-payment{
    display:flex !important; align-items:center; justify-content:center;
    height:60px; border:2px solid #e5e5e5; border-radius:8px; cursor:pointer;
    margin-bottom:10px; transition:all .2s; background:#fff; position:relative;
}
.addfunds-payment:hover{border-color:#1a1a1a;}
.addfunds-payment.active{border-color:#1a1a1a; background:#fafafa;}
.addfunds-payment img{max-height:32px; max-width:100%; object-fit:contain;}
.addfunds-payment input[type=radio]{position:absolute; opacity:0; pointer-events:none;}
.pay-now-btn{
    background:#1a1a1a !important; border-color:#1a1a1a !important; color:#fff !important;
    padding:8px 24px; border-radius:6px; font-size:12px;
}
.pay-now-btn:hover{background:#333 !important;}

/* 搜索框 */
.search-box .form-control{
    border:1px solid #ddd; border-radius:6px; padding:8px 12px; font-size:12px;
    height:36px;
}
.search-box .search-icon{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    color:#999; font-size:16px;
}

/* 按钮统一黑白 */
.btn-primary{background:#1a1a1a !important; border-color:#1a1a1a !important; color:#fff !important;}
.btn-primary:hover{background:#333 !important; border-color:#333 !important;}
.btn-outline-primary{color:#1a1a1a !important; border-color:#1a1a1a !important;}
.btn-outline-primary:hover{background:#1a1a1a !important; color:#fff !important;}
.btn-success{background:#1a1a1a !important; border-color:#1a1a1a !important;}
.btn-warning{background:#666 !important; border-color:#666 !important; color:#fff !important;}
.btn-danger{background:#1a1a1a !important; border-color:#1a1a1a !important;}
.text-primary{color:#1a1a1a !important;}
a{color:#1a1a1a;}
a:hover{color:#555;}

/* 关于/联系页面 */
.xn-page{max-width:900px; margin:0 auto; padding:20px 16px;}
.xn-page-hero{text-align:center; padding:40px 20px; border-bottom:1px solid #eee; margin-bottom:30px;}
.xn-page-hero h1{font-size:24px; font-weight:700; color:#1a1a1a; margin-bottom:8px;}
.xn-page-hero p{font-size:13px; color:#666;}
.xn-page-content{padding:0 10px;}
.xn-info-tabs{display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap;}
.xn-info-tab{
    padding:8px 20px; border:1px solid #ddd; border-radius:6px; cursor:pointer;
    font-size:12px; transition:all .2s; background:#fff;
}
.xn-info-tab.active{background:#1a1a1a; color:#fff; border-color:#1a1a1a;}
.xn-info-detail{display:none; line-height:1.8; color:#333; font-size:12px;}
.xn-info-detail.active{display:block;}
.xn-info-detail h3{font-size:16px; margin-bottom:12px; color:#1a1a1a;}

/* 联系页面 */
.xn-contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:30px;}
.xn-contact-card{
    border:1px solid #eee; border-radius:8px; padding:24px; text-align:center;
    background:#fff; transition:all .2s;
}
.xn-contact-card:hover{border-color:#1a1a1a; box-shadow:0 2px 8px rgba(0,0,0,.06);}
.xn-contact-icon{font-size:32px; color:#1a1a1a; margin-bottom:12px;}
.xn-contact-card h3{font-size:14px; margin-bottom:8px; color:#1a1a1a;}
.xn-contact-card p{font-size:12px; color:#666; line-height:1.6;}
.xn-contact-value{font-weight:600; color:#1a1a1a !important; margin-top:8px;}
.xn-contact-info{border-top:1px solid #eee; padding-top:24px;}
.xn-contact-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px;}
.xn-contact-item h4{font-size:12px; color:#999; margin-bottom:4px;}
.xn-contact-item p{font-size:13px; color:#1a1a1a; font-weight:500;}

/* 帮助中心/新闻分类可点击 */
.list-unstyled li a{cursor:pointer;}
.verti-timeline .event-list{cursor:pointer; padding:10px 0; border-bottom:1px solid #f5f5f5;}
.verti-timeline .event-list:hover{background:#fafafa;}

/* 移动端适配 */
@media (max-width:768px){
    .xn-page-hero{padding:24px 16px;}
    .xn-page-hero h1{font-size:20px;}
    .xn-info-tab{padding:6px 14px; font-size:11px;}
    .xn-contact-grid{grid-template-columns:1fr;}
    .addfunds-payment{height:50px;}
    .card{margin-bottom:12px;}
    .card-body{padding:12px !important;}
    .table{font-size:11px;}
    .table-responsive{overflow-x:auto;}
}

/* ===== 星诺云 r7：推介计划/工单/帮助中心 黑白风格修复 ===== */
/* 推介计划橙色改黑白 */
.affiliates .card[style*="f78400"],
.card[style*="background-color:#f78400"]{
    background-color:#1a1a1a !important; color:#fff !important;
}
.aff-amo-num{color:#fff !important;}
.aff-amo-title{color:#ccc !important;}
.btn[style*="color: #f7a200"],#withdrawNow{
    color:#1a1a1a !important; background:#fff !important;
}
.aff-item-title{color:#1a1a1a !important;}
.aff-item .bx{color:#1a1a1a !important;}

/* 提交工单页面黑白 */
.os-container{background:#fff !important;}
.os-main__left-col{background:#fafafa !important; border-right:1px solid #eee;}
.os-menu__item.is-active a{background:#1a1a1a !important; color:#fff !important;}
.os-menu__item a:hover{background:#f0f0f0 !important;}
.os-text{color:#333 !important;}
.os-text--weak{color:#999 !important;}
.os-chat__header{border-bottom:1px solid #eee !important;}
.os-badge a{color:#1a1a1a !important;}
.os-chat__body{background:#fff !important;}

/* 帮助中心/新闻搜索框 */
.search-box{margin-bottom:0 !important;}
.search-box p{margin-bottom:8px; font-size:12px; color:#666;}
#searchInp{
    border:1px solid #ddd !important; border-radius:6px !important;
    padding:8px 36px 8px 12px !important; font-size:12px !important; height:36px !important;
}
.search-icon{color:#999 !important; right:10px !important;}

/* 帮助中心/新闻分类 */
.list-unstyled.font-weight-medium li a{
    display:block; padding:8px 0; border-bottom:1px solid #f5f5f5;
    color:#333 !important; font-size:12px; text-decoration:none;
}
.list-unstyled.font-weight-medium li a:hover{color:#1a1a1a !important; background:#fafafa; padding-left:8px;}
.badge-soft-success{background:#f0f0f0 !important; color:#666 !important;}

/* 时间线样式 */
.verti-timeline{margin:0; padding:0;}
.verti-timeline .event-list{
    padding:12px 0; border-bottom:1px solid #f5f5f5; list-style:none;
}
.verti-timeline .event-list:hover{background:#fafafa;}
.verti-timeline .event-list a{color:#1a1a1a; text-decoration:none; font-size:13px;}
.verti-timeline .event-list a:hover{color:#555;}
.event-timeline-dot i{color:#1a1a1a !important;}

/* 推介计划未开通页面 */
.verified_not_certified .not_certified_title{
    font-size:18px; font-weight:700; color:#1a1a1a; text-align:center; margin-bottom:16px;
}
.affiliates-item-icon img{max-width:64px; max-height:64px;}
.affiliates-item-title{font-size:14px; color:#1a1a1a; font-weight:600;}
.affiliates-item-text{font-size:12px; color:#666;}

/* 全局卡片和表格黑白 */
.card{border:1px solid #eee !important; border-radius:8px !important; box-shadow:none !important;}
.card-header{background:#fafafa !important; border-bottom:1px solid #eee !important;}
.table thead th{background:#fafafa !important; color:#1a1a1a !important; border-bottom:2px solid #eee !important;}
.table td,.table th{border-color:#f0f0f0 !important; font-size:12px;}
.badge{font-size:10px; padding:3px 8px; border-radius:10px;}
.badge-soft-primary{background:#f0f0f0 !important; color:#1a1a1a !important;}
.badge-soft-warning{background:#f5f5f5 !important; color:#666 !important;}
.badge-soft-danger{background:#f0f0f0 !important; color:#1a1a1a !important;}
.badge-soft-success{background:#f0f0f0 !important; color:#1a1a1a !important;}
.alert-info{background:#fafafa !important; color:#333 !important; border-color:#eee !important;}
.alert-warning{background:#fafafa !important; color:#333 !important; border-color:#eee !important;}
.alert-danger{background:#fafafa !important; color:#1a1a1a !important; border-color:#ddd !important;}

/* 移动端表格横向滚动 */
@media (max-width:768px){
    .table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .table{min-width:600px;}
    .card-body{padding:12px !important;}
    .os-main__left-col{display:none !important;}
    .os-main__right-col{width:100% !important;}
    .affiliates-item{margin-bottom:20px;}
    .verti-timeline .event-list{padding:10px 0;}
    .verti-timeline .event-list a{font-size:12px;}
}

/* ===== 首页同款侧边栏样式 ===== */
.xn-sidebar-overlay{
    display:none !important;
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.45);
    z-index:10000;
}
body.sidebar-open .xn-sidebar-overlay{
    display:block !important;
}
.vertical-menu{
    position:fixed !important;
    top:0 !important;
    left:-280px !important;
    width:260px !important;
    height:100vh !important;
    z-index:10001 !important;
    transition:left 0.25s ease !important;
    overflow-y:auto;
    background:#fff;
    border-right:1px solid #e5e5e5;
}
body.sidebar-open .vertical-menu{
    left:0 !important;
}
body.sidebar-open{
    overflow:hidden;
}
/* PC端侧边栏常驻 */
@media(min-width:992px){
    .vertical-menu{
        left:0 !important;
    }
    .xn-sidebar-overlay{
        display:none !important;
    }
}
/* 侧边栏底部用户区 */
.xn-menu-user-footer{
    margin-top:auto;
    padding:12px 16px;
    border-top:1px solid #eee;
    background:#fafafa;
}
.xn-menu-user-box{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;margin-bottom:8px;
}
.xn-menu-user-avatar{
    width:36px;height:36px;border-radius:50%;
    object-fit:cover;background:#eee;border:1px solid #eee;
}
.xn-menu-user-info{min-width:0;flex:1;}
.xn-menu-user-name{
    font-size:13px;font-weight:600;color:#1a1a1a;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.xn-menu-user-uid{font-size:10px;color:#999;}
.xn-menu-logout-btn{
    display:block;text-align:center;
    padding:6px 12px;
    background:#1a1a1a !important;
    color:#fff !important;
    border-radius:6px;
    font-size:11px;
    text-decoration:none;
}
.xn-menu-logout-btn:hover{
    background:#333 !important;
    color:#fff !important;
}
/* 可折叠箭头黑白风格 */
.vertical-menu .has-arrow:after{
    content:"\25BE" !important;
    font-family:inherit !important;
    font-size:10px;
    color:#999;
    float:right;
    margin-top:2px;
    transition:transform 0.2s;
}
.vertical-menu .has-arrow[aria-expanded="true"]:after,
.vertical-menu .mm-active > .has-arrow:after{
    transform:rotate(180deg);
    color:#1a1a1a;
}


/* ===== 最终强制统一（覆盖所有旧规则）===== */
.vertical-menu #sidebar-menu{
    display:block !important;
    padding-top:60px !important;
    padding-bottom:20px !important;
}
.vertical-menu .xn-menu-user-footer{
    display:block !important;
    position:relative !important;
    margin-top:auto !important;
    border-top:1px solid #eee !important;
    border-bottom:none !important;
    order:0 !important;
}
.vertical-menu #sidebar-menu ul li a{
    padding:12px 20px !important;
    font-size:13px !important;
}
.vertical-menu #sidebar-menu ul li a i{
    font-size:1.3rem !important;
    min-width:1.5rem !important;
    margin-right:8px !important;
}


/* ===== r6: 修复html根字体12px导致rem缩放，侧边栏全部用固定px ===== */
.vertical-menu #sidebar-menu ul li a,
.vertical-menu #side-menu li a{
    display:flex !important;
    align-items:center !important;
    padding:12px 20px !important;
    font-size:13px !important;
    line-height:1.5 !important;
    position:relative !important;
}
.vertical-menu #sidebar-menu ul li a i,
.vertical-menu #side-menu li a i{
    font-size:21px !important;
    min-width:24px !important;
    width:24px !important;
    margin-right:8px !important;
    margin-left:0 !important;
    padding-bottom:0 !important;
    line-height:1 !important;
    text-align:center !important;
    flex-shrink:0 !important;
}
.vertical-menu #sidebar-menu ul li a span,
.vertical-menu #side-menu li a span{
    vertical-align:middle !important;
    line-height:1.5 !important;
    flex:1 !important;
}
.vertical-menu .has-arrow:after{
    font-size:10px !important;
    float:none !important;
    margin-left:auto !important;
    display:inline-block !important;
    line-height:1 !important;
}

/* 侧边栏用户信息贴底 */
.vertical-menu #sidebar-menu{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
}
.vertical-menu #sidebar-menu #side-menu{
    flex:1 !important;
}

/* ===== 侧边栏底部用户信息（参考chat.aozio.cn简洁样式）===== */
.xn-menu-user-footer{
    padding:10px !important;
    border-top:1px solid #eee !important;
    border-bottom:none !important;
    background:#fff !important;
    margin-top:auto !important;
}
.xn-menu-user-footer .xn-menu-user-info{
    font-size:11px;
    color:#999;
    padding:6px 8px;
    margin-bottom:8px;
    background:#fafafa;
    border-radius:6px;
}
.xn-menu-user-footer .xn-menu-user-name{
    font-size:11px;
    color:#999;
    margin-bottom:2px;
}
.xn-menu-user-footer .xn-menu-user-name b{
    color:#1a1a1a;
    font-weight:600;
}
.xn-menu-user-footer .xn-menu-user-uid{
    font-size:10px;
    color:#999;
}
.xn-menu-user-footer .xn-menu-logout-btn,
.xn-menu-user-footer .xn-menu-login-btn{
    display:block;
    text-align:center;
    padding:6px 12px;
    background:#f0f0f0;
    color:#1a1a1a;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:opacity 0.15s;
    line-height:1.4;
}
.xn-menu-user-footer .xn-menu-logout-btn:hover,
.xn-menu-user-footer .xn-menu-login-btn:hover{
    opacity:0.75;
    background:#e0e0e0;
}

/* ===== 修复侧边栏底部用户信息显示 ===== */
.vertical-menu{
    display:flex !important;
    flex-direction:column !important;
}
.vertical-menu > .h-100{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
}
.vertical-menu .simplebar-wrapper,
.vertical-menu .simplebar-mask,
.vertical-menu .simplebar-offset,
.vertical-menu .simplebar-content-wrapper{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
}
.vertical-menu .simplebar-content{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
}
.vertical-menu #sidebar-menu{
    display:flex !important;
    flex-direction:column !important;
    flex:1 !important;
    min-height:0 !important;
}
.vertical-menu #sidebar-menu #side-menu{
    flex:1 !important;
}
.vertical-menu .xn-menu-user-footer{
    margin-top:auto !important;
    flex-shrink:0 !important;
}

/* 确保侧边栏图标可见 */
.vertical-menu #side-menu li a i,
.vertical-menu #sidebar-menu ul li a i{
    color:#6c757d !important;
}

/* ===== 侧边栏底部用户信息 - 固定底部 ===== */
.vertical-menu{
    padding-bottom:80px !important;
}
.vertical-menu .xn-menu-user-footer{
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    margin-top:0 !important;
    padding:10px !important;
    border-top:1px solid #eee !important;
    border-bottom:none !important;
    background:#fff !important;
    z-index:10 !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-info{
    font-size:11px;
    color:#999;
    padding:6px 8px;
    margin-bottom:8px;
    background:#fafafa;
    border-radius:6px;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-name{
    font-size:11px;
    color:#999;
    margin-bottom:2px;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-name b{
    color:#1a1a1a;
    font-weight:600;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-uid{
    font-size:10px;
    color:#999;
}
.vertical-menu .xn-menu-user-footer .xn-menu-logout-btn,
.vertical-menu .xn-menu-user-footer .xn-menu-login-btn{
    display:block;
    text-align:center;
    padding:6px 12px;
    background:#f0f0f0;
    color:#1a1a1a;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    text-decoration:none;
}
.vertical-menu .xn-menu-user-footer .xn-menu-logout-btn:hover,
.vertical-menu .xn-menu-user-footer .xn-menu-login-btn:hover{
    background:#e0e0e0;
}

/* ===== 侧边栏底部用户信息（最终版，参考chat.aozio.cn）===== */
.vertical-menu .xn-menu-user-footer{
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    padding:10px !important;
    border-top:1px solid #eee !important;
    border-bottom:none !important;
    background:#fff !important;
    z-index:10 !important;
    margin-top:0 !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-info{
    font-size:11px !important;
    color:#999 !important;
    padding:6px 8px !important;
    margin-bottom:8px !important;
    background:#fafafa !important;
    border-radius:6px !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-name{
    font-size:11px !important;
    color:#999 !important;
    margin-bottom:2px !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-name b{
    color:#1a1a1a !important;
    font-weight:600 !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-user-uid{
    font-size:10px !important;
    color:#999 !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-logout-btn,
.vertical-menu .xn-menu-user-footer .xn-menu-login-btn{
    display:block !important;
    text-align:center !important;
    padding:6px 12px !important;
    background:#f0f0f0 !important;
    color:#1a1a1a !important;
    border-radius:6px !important;
    font-size:11px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    border:none !important;
    line-height:1.4 !important;
}
.vertical-menu .xn-menu-user-footer .xn-menu-logout-btn:hover,
.vertical-menu .xn-menu-user-footer .xn-menu-login-btn:hover{
    background:#e0e0e0 !important;
    color:#1a1a1a !important;
}
/* 确保侧边栏有底部padding */
.vertical-menu{
    padding-bottom:80px !important;
}

/* ===== 确保用户中心和首页侧边栏按钮完全一致 ===== */
.vertical-menu #side-menu li a,
.vertical-menu #sidebar-menu ul li a{
    display:flex !important;
    align-items:center !important;
    padding:12px 20px !important;
    font-size:13px !important;
    line-height:1.5 !important;
    color:#6c757d !important;
    border-left:none !important;
    background:transparent !important;
    position:relative !important;
}
.vertical-menu #side-menu li a:hover,
.vertical-menu #sidebar-menu ul li a:hover{
    background:#f5f5f5 !important;
    color:#1a1a1a !important;
}
.vertical-menu #side-menu li a i,
.vertical-menu #sidebar-menu ul li a i{
    font-size:21px !important;
    min-width:24px !important;
    width:24px !important;
    margin-right:8px !important;
    margin-left:0 !important;
    line-height:1 !important;
    text-align:center !important;
    color:#6c757d !important;
    flex-shrink:0 !important;
}
.vertical-menu #side-menu li a span,
.vertical-menu #sidebar-menu ul li a span{
    flex:1 !important;
    vertical-align:middle !important;
    line-height:1.5 !important;
}
.vertical-menu .has-arrow:after{
    float:none !important;
    margin-left:auto !important;
    display:inline-block !important;
    line-height:1 !important;
    font-size:10px !important;
    color:#999 !important;
}

/* ===== 直接复制chat.aozio.cn侧边栏底部CSS ===== */
.vertical-menu .sidebar-footer{
    padding:10px !important;
    border-top:1px solid #eee !important;
    border-bottom:none !important;
    background:#fff !important;
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:10 !important;
}
.vertical-menu .sidebar-user{
    font-size:11px !important;
    color:#999 !important;
    padding:6px 8px !important;
    margin-bottom:8px !important;
    background:#fafafa !important;
    border-radius:6px !important;
}
.vertical-menu .sidebar-user b{
    color:#1a1a1a !important;
    font-weight:600 !important;
}
.vertical-menu .btn{
    border:none !important;
    padding:6px 12px !important;
    border-radius:6px !important;
    background:#f0f0f0 !important;
    color:#1a1a1a !important;
    cursor:pointer !important;
    font-size:11px !important;
    font-family:inherit !important;
    font-weight:600 !important;
    transition:opacity 0.15s !important;
    line-height:1.4 !important;
}
.vertical-menu .btn:hover{
    opacity:0.82 !important;
}
.vertical-menu .btn-primary{
    background:#1a1a1a !important;
    color:#fff !important;
}
.vertical-menu .btn-block{
    display:block !important;
    width:100% !important;
    text-align:center !important;
}
/* 确保侧边栏有底部padding */
.vertical-menu{
    padding-bottom:80px !important;
}

/* 确保sidebar-footer在vertical-menu底部（移到simplebar外后） */
.vertical-menu .sidebar-footer{
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:10 !important;
}
.vertical-menu{
    padding-bottom:0 !important;
}
.vertical-menu .h-100{
    padding-bottom:80px !important;
}

/* ===== 强制侧边栏底部用户信息显示 ===== */
.vertical-menu{
    overflow:visible !important;
}
.vertical-menu .sidebar-footer{
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    display:block !important;
    z-index:999 !important;
    padding:10px !important;
    border-top:1px solid #eee !important;
    background:#fff !important;
}
.vertical-menu .sidebar-footer .sidebar-user{
    font-size:11px !important;
    color:#999 !important;
    padding:6px 8px !important;
    margin-bottom:8px !important;
    background:#fafafa !important;
    border-radius:6px !important;
    display:block !important;
}
.vertical-menu .sidebar-footer .sidebar-user b{
    color:#1a1a1a !important;
    font-weight:600 !important;
}
.vertical-menu .sidebar-footer .btn{
    border:none !important;
    padding:6px 12px !important;
    border-radius:6px !important;
    background:#f0f0f0 !important;
    color:#1a1a1a !important;
    font-size:11px !important;
    font-weight:600 !important;
    line-height:1.4 !important;
    display:block !important;
    width:100% !important;
    text-align:center !important;
    text-decoration:none !important;
}
.vertical-menu .sidebar-footer .btn-primary{
    background:#1a1a1a !important;
    color:#fff !important;
}
/* simplebar内容区留出底部空间 */
.vertical-menu [data-simplebar]{
    padding-bottom:80px !important;
}

/* ===== 确保侧边栏高度和背景正确 ===== */
.vertical-menu{
    height:calc(100vh - 70px) !important;
    min-height:calc(100vh - 70px) !important;
    background:#fff !important;
    overflow:visible !important;
}
.vertical-menu .h-100{
    height:100% !important;
    padding-bottom:80px !important;
}
.vertical-menu .sidebar-footer{
    background:#fff !important;
}

/* ===== 用户中心电脑端侧边栏默认折叠 ===== */
@media (min-width:1025px){
    .vertical-menu{left:-250px !important;transition:left .25s ease !important;z-index:10001 !important;box-shadow:2px 0 12px rgba(0,0,0,.18) !important;}
    body.sidebar-open .vertical-menu{left:0 !important;}
    .main-content, .page-content{margin-left:0 !important;}
    .navbar-header{margin-left:0 !important;}
}
/* 移动端适配 */
@media (max-width:767px){
    .vertical-menu{width:260px !important;top:0 !important;height:100vh !important;}
    .sidebar-footer{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;}
}