@charset "utf-8";
/* ==========================================================================
   QICLOUD 云用户中心主题 - 设计系统 (design system)
   参照 QRuser 模板框架参数与变量，一比一还原参考稿
   ========================================================================== */

:root{
    --ql-primary:#2563eb;          /* 主按钮：操作 / 立即开启 / 充值 */
    --ql-primary-hover:#1d4fd7;
    --ql-primary-active:#1a45bd;
    --ql-primary-disabled:#a9c4f5;
    --ql-link:#1890ff;             /* 链接 / 选中菜单 / tab */
    --ql-link-hover:#40a9ff;
    --ql-deep:#0052d9;             /* VNC / 立即认证 等深蓝按钮 */
    --ql-deep-hover:#0046b8;
    --ql-info-bg:#e6f2fe;          /* 蓝色提示块 */
    --ql-info-bg-2:#e4f2fd;        /* 蓝色提示块（头部） */
    --ql-green:#3dbe8b;            /* 运行状态 / 播放按钮 */
    --ql-green-text:#52c41a;       /* 已激活文字 */
    --ql-green-bg:#f0f9eb;
    --ql-green-border:#c2e7b0;
    --ql-orange:#f5a623;           /* 待开通 */
    --ql-red:#f5222d;
    --ql-yellow:#faad14;
    --ql-cyan:#13c2c2;
    --ql-text:#1d2129;
    --ql-text-2:#4e5969;
    --ql-text-3:#86909c;
    --ql-text-4:#c9cdd4;
    --ql-border:#ebeef5;
    --ql-border-2:#f2f3f5;
    --ql-page-bg:#f5f7fa;
    --ql-fill:#f7f8fa;             /* 浅灰填充（输入框 / 说明块） */
    --ql-radius:2px;
    --ql-sidebar-w:240px;
    --ql-topbar-h:56px;
    --ql-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* ---------------------------------------------------------------- base */
*{-webkit-box-sizing:border-box;box-sizing:border-box}
html{height:100%}
body{
    margin:0;padding:0;min-height:100%;
    background:var(--ql-page-bg);
    color:var(--ql-text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:13px;line-height:1.5715;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--ql-link);text-decoration:none;background-color:transparent}
a:hover{color:var(--ql-link-hover);text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:var(--ql-text)}
p{margin:0 0 8px}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;vertical-align:middle;border-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
::selection{background:var(--ql-link);color:#fff}
.pointer{cursor:pointer}
.text-primary{color:var(--ql-primary)!important}
.text-muted{color:var(--ql-text-3)!important}
.text-dark{color:var(--ql-text)!important}
.text-danger{color:var(--ql-red)!important}
.text-warning{color:var(--ql-yellow)!important}
.text-success{color:var(--ql-green-text)!important}
.fs-12{font-size:12px!important}.fs-14{font-size:14px!important}
.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}
.fz-12{font-size:12px!important}.fz-14{font-size:14px!important}
.fz-20{font-size:20px!important}.fz-28{font-size:28px!important}
.bg-light{background:var(--ql-fill)!important}
.rounded-circle{border-radius:50%!important}
.rounded-sm{border-radius:var(--ql-radius)!important}
.hidden{display:none!important}
.fr{float:right}

/* 滚动条 */
.ql-sidebar__scroll::-webkit-scrollbar,.ql-scroll::-webkit-scrollbar{width:6px;height:6px}
.ql-sidebar__scroll::-webkit-scrollbar-thumb,.ql-scroll::-webkit-scrollbar-thumb{background:#dcdfe6;border-radius:3px}
.ql-sidebar__scroll::-webkit-scrollbar-track,.ql-scroll::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------- layout */
.ql-sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--ql-sidebar-w);
    background:#fff;border-right:1px solid var(--ql-border);
    display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;
    z-index:1030;
}
.ql-sidebar__logo{
    height:var(--ql-topbar-h);flex:0 0 var(--ql-topbar-h);
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    padding:0 16px;border-bottom:1px solid var(--ql-border-2);overflow:hidden;
}
.ql-sidebar__logo img{max-height:30px}
.ql-sidebar__logo .logo-lg{display:block}
.ql-sidebar__logo .logo-sm{display:none}
.ql-sidebar__scroll{-webkit-box-flex:1;flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0 48px}
.ql-sidebar__bottom{padding:10px 16px;border-top:1px solid var(--ql-border-2);color:var(--ql-text-3);font-size:12px}

.ql-main{
    margin-left:var(--ql-sidebar-w);min-height:100vh;
    display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;
}
.ql-topbar{
    height:var(--ql-topbar-h);flex:0 0 var(--ql-topbar-h);
    background:#fff;border-bottom:1px solid var(--ql-border);
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    padding:0 16px;position:sticky;top:0;z-index:1020;
}
.ql-topbar__left{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;min-width:0}
.ql-topbar__right{margin-left:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-content{-webkit-box-flex:1;flex:1;padding:0 16px 32px}
.ql-container{padding:0}
.ql-footer{
    padding:14px 16px;color:var(--ql-text-3);font-size:12px;
    border-top:1px solid var(--ql-border);background:#fff;
}

/* 顶部当前板块胶囊 */
.ql-section{
    display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;
    height:30px;padding:0 12px;margin-left:16px;
    background:#eaf3ff;color:var(--ql-link);border-radius:var(--ql-radius);font-size:13px;
}
.ql-section i{margin-right:6px;font-size:15px}

/* 顶部导航 */
.ql-topnav{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:100%}
.ql-topnav__item{
    display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;
    -webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    min-width:64px;height:100%;color:var(--ql-text-2);font-size:12px;padding:0 6px;
}
.ql-topnav__item i{font-size:16px;line-height:1;margin-bottom:2px;color:var(--ql-text-2)}
.ql-topnav__item:hover,.ql-topnav__item:hover i{color:var(--ql-link)}
.ql-topnav__icon{
    position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    -webkit-box-pack:center;justify-content:center;width:40px;height:100%;color:var(--ql-text-2);font-size:18px;
}
.ql-topnav__icon:hover{color:var(--ql-link)}
.ql-topnav__icon .badge{
    position:absolute;top:12px;right:4px;min-width:15px;height:15px;line-height:15px;
    padding:0 4px;border-radius:8px;background:var(--ql-red);color:#fff;font-size:10px;text-align:center;
}
.ql-userbox{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:100%;padding:0 8px;cursor:pointer;position:relative}
.ql-userbox__avatar{
    width:30px;height:30px;border-radius:var(--ql-radius);background:var(--ql-link);color:#fff;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    font-size:13px;overflow:hidden;
}
.ql-userbox__avatar img{width:100%;height:100%;object-fit:cover}
.ql-userbox__info{margin-left:8px;line-height:1.2}
.ql-userbox__name{display:block;font-size:12px;color:var(--ql-text-2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-userbox__tag{display:block;font-size:11px;color:var(--ql-text-3)}
.ql-userbox__square{
    width:30px;height:30px;margin-left:10px;background:var(--ql-link);border-radius:var(--ql-radius);
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    color:#fff;font-size:14px;
}
.ql-helpdoc{margin-left:auto;font-size:12px;color:var(--ql-text-2);display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-helpdoc i{margin-right:4px;color:var(--ql-link)}
.ql-menu-btn{
    display:none;width:32px;height:32px;margin-right:8px;border:none;background:transparent;
    color:var(--ql-text-2);font-size:18px;cursor:pointer;
}

/* 下拉面板 */
.ql-dropdown{
    position:absolute;top:100%;right:0;min-width:150px;background:#fff;
    border:1px solid var(--ql-border);border-radius:var(--ql-radius);
    box-shadow:0 4px 12px rgba(0,0,0,.08);padding:4px 0;display:none;z-index:1050;
}
.ql-dropdown.show{display:block}
.ql-dropdown a,.ql-dropdown .item{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    padding:8px 14px;color:var(--ql-text-2);font-size:13px;white-space:nowrap;
}
.ql-dropdown a:hover{background:var(--ql-fill);color:var(--ql-link)}

/* --------------------------------------------------------- sidebar nav */
.ql-nav-group{padding:14px 16px 6px;color:var(--ql-text-4);font-size:12px;line-height:1}
.ql-nav-item{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    height:40px;padding:0 16px;color:var(--ql-text-2);font-size:13px;
    position:relative;transition:background .15s,color .15s;
}
.ql-nav-item i,.ql-nav-item .ql-nav-icon{width:16px;margin-right:10px;font-size:15px;text-align:center;color:var(--ql-text-3)}
.ql-nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-nav-item:hover{background:#f5f8ff;color:var(--ql-link)}
.ql-nav-item:hover i{color:var(--ql-link)}
.ql-nav-item.active{background:var(--ql-link);color:#fff}
.ql-nav-item.active i{color:#fff}
.ql-nav-item .ql-nav-badge{margin-left:auto;background:var(--ql-red);color:#fff;font-size:10px;line-height:16px;padding:0 5px;border-radius:8px}

/* ------------------------------------------------------------ 面包屑 */
.ql-breadcrumb{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    padding:12px 0;color:var(--ql-text-3);font-size:12px;
}
.ql-breadcrumb a{color:var(--ql-text-3)}
.ql-breadcrumb a:hover{color:var(--ql-link)}
.ql-breadcrumb .sep{margin:0 6px;color:var(--ql-text-4)}
.ql-breadcrumb .current{color:var(--ql-text-2)}

/* 页面标题（列表页） */
.ql-page-title{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    font-size:16px;font-weight:600;color:var(--ql-text);padding:8px 0 16px;
}
.ql-page-title .ql-title-right{margin-left:auto;font-size:13px;font-weight:400}

/* 卡片头（返回 + 标题） */
.ql-card-head{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    height:48px;padding:0 20px;border-bottom:1px solid var(--ql-border);
}
.ql-card-head .ql-back{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;color:var(--ql-text-2);font-size:16px;margin-right:6px}
.ql-card-head .ql-back:hover{color:var(--ql-link)}
.ql-card-head .ql-card-title{font-size:15px;font-weight:600;color:var(--ql-text)}
.ql-card-head .ql-card-tools{margin-left:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-card-head .ql-card-tools .btn{margin-left:8px}
.ql-card-head .sep{color:var(--ql-text-4);margin:0 10px;font-size:15px}

/* 蓝条装饰（详情页卡头下沿） */
.ql-bluebar{height:2px;background:var(--ql-link)}
.ql-bluebar-light{height:2px;background:#bcd9ff}

/* 区块标题：左侧蓝条 */
.ql-block-title{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    font-size:14px;font-weight:600;color:var(--ql-text);margin-bottom:14px;
}
.ql-block-title::before{
    content:"";display:inline-block;width:3px;height:14px;background:var(--ql-link);margin-right:8px;border-radius:1px;
}
.ql-block-title.plain::before{display:none}
.ql-block-title .more{margin-left:auto;font-size:12px;font-weight:400;color:var(--ql-text-3)}
.ql-block-title .more:hover{color:var(--ql-link)}

/* --------------------------------------------------------------- card */
.ql-card{background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);margin-bottom:16px;position:relative}
.ql-card__body{padding:20px}
.ql-card__body.p-0{padding:0}
.ql-card__title{font-size:15px;font-weight:600;margin-bottom:16px}
.ql-card__title--line{border-bottom:1px solid var(--ql-border-2);padding-bottom:12px}
.ql-card__divider{height:1px;background:var(--ql-border-2);margin:16px 0}

/* 兼容框架内 bootstrap card 用法 */
.card{background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);margin-bottom:16px;position:relative}
.card-body{padding:20px}
.card-body.p-0{padding:0}
.card-title{font-size:15px;font-weight:600;color:var(--ql-text);margin-bottom:16px}
.card .card-body a{text-decoration:none}

/* ------------------------------------------------------------- button */
.btn{
    display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    height:32px;padding:0 16px;font-size:13px;line-height:1;
    border:1px solid transparent;border-radius:var(--ql-radius);
    background:transparent;color:var(--ql-text-2);cursor:pointer;
    transition:all .15s;white-space:nowrap;outline:none!important;box-shadow:none!important;
}
.btn i{margin-right:4px;font-size:14px}
.btn-primary{background:var(--ql-primary);border-color:var(--ql-primary);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--ql-primary-hover);border-color:var(--ql-primary-hover);color:#fff}
.btn-primary:active{background:var(--ql-primary-active);border-color:var(--ql-primary-active);color:#fff}
.btn-primary.disabled,.btn-primary:disabled{background:var(--ql-primary-disabled);border-color:var(--ql-primary-disabled);color:#fff;cursor:not-allowed;opacity:1}
.btn-deep{background:var(--ql-deep);border-color:var(--ql-deep);color:#fff}
.btn-deep:hover{background:var(--ql-deep-hover);border-color:var(--ql-deep-hover);color:#fff}
.btn-default,.btn-outline-light,.btn-secondary,.btn-light{background:#fff;border-color:#dcdfe6;color:var(--ql-text-2)}
.btn-default:hover,.btn-outline-light:hover,.btn-secondary:hover,.btn-light:hover{background:#fff;border-color:var(--ql-link);color:var(--ql-link)}
.btn-outline-primary{background:#fff;border-color:var(--ql-primary);color:var(--ql-primary)}
.btn-outline-primary:hover{background:var(--ql-primary);border-color:var(--ql-primary);color:#fff}
.btn-link{background:transparent;border-color:transparent;color:var(--ql-link);padding:0 4px}
.btn-link:hover{color:var(--ql-link-hover)}
.btn-sm{height:26px;padding:0 10px;font-size:12px}
.btn-sm i{font-size:12px}
.btn-lg{height:40px;padding:0 20px;font-size:14px}
.btn-block{display:-webkit-box;display:flex;width:100%}
.btn.w-xs{min-width:auto}
.btn-group{position:relative;display:-webkit-inline-box;display:inline-flex}
.btn-group .btn{margin-left:-1px;border-radius:0}
.btn-group .btn:first-child{border-radius:var(--ql-radius) 0 0 var(--ql-radius)}
.btn-group .btn:last-child{border-radius:0 var(--ql-radius) var(--ql-radius) 0}
.not-allowed{cursor:not-allowed!important}
.ql-link{color:var(--ql-link);font-size:13px}
.ql-link i{font-size:12px;margin-left:2px}

/* -------------------------------------------------------------- alert */
.ql-alert{
    display:-webkit-box;display:flex;align-items:flex-start;
    background:var(--ql-info-bg);color:var(--ql-text);font-size:13px;line-height:22px;
    padding:12px 16px;border-radius:var(--ql-radius);margin-bottom:16px;
}
.ql-alert i.ql-alert__icon{color:var(--ql-link);font-size:15px;margin-right:8px;line-height:22px}
.ql-alert--head{font-weight:600}
.ql-alert p{margin:0}
.ql-alert--danger{background:#fff1f0;color:var(--ql-red)}
.ql-alert--danger i.ql-alert__icon{color:var(--ql-red)}
.alert{border-radius:var(--ql-radius);font-size:13px;border:1px solid transparent;padding:10px 16px}
.alert-danger{background:#fff1f0;border-color:#ffccc7;color:var(--ql-red)}
.alert-info{background:var(--ql-info-bg);border-color:#bae0ff;color:var(--ql-text)}
.ql-note{background:var(--ql-fill);border-radius:var(--ql-radius);padding:12px 16px;color:var(--ql-text-3);font-size:12px;line-height:22px}
.ql-note ol,.ql-note ul{padding-left:16px;list-style:decimal}
.ql-note li{margin-bottom:2px}

/* --------------------------------------------------------------- tabs */
.ql-tabs{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;border-bottom:1px solid var(--ql-border);background:#fff;padding:0 20px}
.ql-tabs__item{
    position:relative;padding:0 2px;margin-right:32px;height:44px;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    font-size:14px;color:var(--ql-text-2);cursor:pointer;
}
.ql-tabs__item:hover{color:var(--ql-link)}
.ql-tabs__item.active{color:var(--ql-link);font-weight:500}
.ql-tabs__item.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ql-link)}
.ql-tab-pane{display:none}
.ql-tab-pane.active{display:block}
.nav-tabs{border-bottom:1px solid var(--ql-border);padding:0 20px;background:#fff;display:-webkit-box;display:flex;flex-wrap:wrap}
.nav-tabs .nav-item{margin:0 32px 0 0}
.nav-tabs .nav-link{border:none!important;background:transparent!important;padding:12px 0;font-size:14px;color:var(--ql-text-2)}
.nav-tabs .nav-link.active{color:var(--ql-link)!important;font-weight:500;box-shadow:inset 0 -2px 0 var(--ql-link)}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}

/* -------------------------------------------------------------- table */
.table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ql-text)}
.table thead th{
    background:var(--ql-fill);color:var(--ql-text-2);font-weight:500;font-size:13px;
    padding:10px 12px;border-bottom:1px solid var(--ql-border);text-align:left;white-space:nowrap;
}
.table tbody td{padding:12px;border-bottom:1px solid var(--ql-border-2);vertical-align:middle}
.table tbody tr:hover{background:#fafcff}
.table-responsive{width:100%;overflow-x:auto}
.table-container{width:100%}
.table-header{padding:0 0 12px}
.table-filter,.table-search{padding:4px 0}
.search-box .position-relative{position:relative;max-width:280px;margin-left:auto}
.search-box .search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--ql-text-3);cursor:pointer}
.table-footer{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;
    padding:14px 0 0;flex-wrap:wrap;
}
.table-tools{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.table-pagination{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:auto}
.table-pageinfo{margin-right:12px;color:var(--ql-text-3);font-size:12px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.table-pageinfo select{height:28px;border:1px solid #dcdfe6;border-radius:var(--ql-radius);margin:0 4px;padding:0 4px;color:var(--ql-text-2)}
.pagination{display:-webkit-box;display:flex;margin:0}
.pagination li{margin-left:4px}
.pagination li a,.pagination li span{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    min-width:28px;height:28px;padding:0 6px;border:1px solid #dcdfe6;border-radius:var(--ql-radius);
    color:var(--ql-text-2);font-size:12px;background:#fff;
}
.pagination li.active a,.pagination li.active span{background:var(--ql-link);border-color:var(--ql-link);color:#fff}
.pagination li a:hover{border-color:var(--ql-link);color:var(--ql-link)}

/* 状态徽标 */
.badge{
    display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;
    height:22px;padding:0 8px;font-size:12px;font-weight:400;border-radius:var(--ql-radius);
    border:1px solid transparent;line-height:1;
}
.badge-pill{border-radius:var(--ql-radius)}
.status-active{background:var(--ql-green-bg);border-color:var(--ql-green-border);color:var(--ql-green-text)}
.status-pending{background:#fff7e6;border-color:#ffd591;color:#fa8c16}
.status-suspended{background:#fff1f0;border-color:#ffccc7;color:var(--ql-red)}
.status-other{background:var(--ql-fill);border-color:var(--ql-border);color:var(--ql-text-3)}
.badge-danger{background:var(--ql-red);color:#fff}
.ql-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ql-green-text);margin-right:6px;vertical-align:middle}
.ql-dot--orange{background:var(--ql-orange)}
.ql-dot--red{background:var(--ql-red)}
.ql-dot--gray{background:var(--ql-text-4)}

/* -------------------------------------------------------------- forms */
.form-group{margin-bottom:16px}
.form-control{
    display:block;width:100%;height:32px;padding:0 12px;font-size:13px;color:var(--ql-text);
    background:#fff;border:1px solid #dcdfe6;border-radius:var(--ql-radius);
    transition:border-color .15s;outline:none;box-shadow:none!important;
}
.form-control:focus{border-color:var(--ql-link)}
.form-control::placeholder{color:var(--ql-text-4)}
textarea.form-control{height:auto;padding:6px 12px;line-height:20px}
select.form-control{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 6px center;background-size:16px;padding-right:26px;
}
.col-form-label{font-size:13px;color:var(--ql-text-2);line-height:32px}
/* 复选框 / 单选框：直接显示原生控件
   说明：bootstrap.min.css 中 .custom-control-input 是 {position:absolute;z-index:-1;opacity:0}，
   必须显式覆盖，否则真实控件透明、伪元素又被隐藏，勾选框会整体“消失” */
.custom-control{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;min-height:20px;padding-left:0}
.custom-control-input{
    position:static!important;left:auto!important;top:auto!important;
    opacity:1!important;z-index:auto!important;
    -webkit-appearance:auto!important;appearance:auto!important;
    width:15px!important;height:15px!important;
    margin:0 8px 0 0!important;
    -webkit-box-flex:0 0 15px;flex:0 0 15px;
    cursor:pointer;accent-color:var(--ql-link);
}
.custom-control-input:disabled{cursor:not-allowed}
.custom-checkbox,.custom-radio{padding-left:0}
.custom-control-label{
    position:relative;display:inline-block;margin-bottom:0;
    min-height:20px;line-height:20px;font-size:13px;color:var(--ql-text-2);cursor:pointer;
}
/* 关闭 Bootstrap 的伪元素方框，避免出现两个勾选框 */
.custom-checkbox .custom-control-label::before,.custom-checkbox .custom-control-label::after,
.custom-radio .custom-control-label::before,.custom-radio .custom-control-label::after{
    display:none!important;content:none!important;
}
.custom-control-input:disabled~.custom-control-label{color:var(--ql-text-4);cursor:not-allowed}
/* 未使用 Bootstrap 自定义结构时的原生勾选框 */
input[type=checkbox]:not(.custom-control-input),input[type=radio]:not(.custom-control-input){accent-color:var(--ql-link)}
.bootstrap-select .btn{background:#fff;border:1px solid #dcdfe6;color:var(--ql-text-2);height:32px}
.bootstrap-select .btn:hover{border-color:var(--ql-link);color:var(--ql-link)}
.dropdown-menu{border:1px solid var(--ql-border);border-radius:var(--ql-radius);box-shadow:0 4px 12px rgba(0,0,0,.08);font-size:13px;padding:4px 0}
.dropdown-item{padding:7px 14px;color:var(--ql-text-2);font-size:13px}
.dropdown-item:hover{background:var(--ql-fill);color:var(--ql-link)}
.dropdown-toggle::after{display:none}
/* 开关：仍为自绘（原生控件作为透明点击层） */
.custom-switch{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-left:0}
.custom-switch .custom-control-input{
    position:absolute!important;left:0!important;top:0!important;
    width:38px!important;height:20px!important;margin:0!important;
    opacity:0!important;z-index:1!important;
    -webkit-appearance:none!important;appearance:none!important;cursor:pointer;
}
.custom-switch .custom-control-label{position:relative;width:38px;height:20px;background:#dcdfe6;border-radius:10px;display:inline-block;min-height:20px;line-height:20px}
.custom-switch .custom-control-label::before{display:none!important;content:none!important}
.custom-switch .custom-control-input:checked~.custom-control-label{background:var(--ql-link)}
.custom-switch .custom-control-label::after{content:""!important;display:block!important;position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.custom-switch .custom-control-input:checked~.custom-control-label::after{left:20px}
.input-group{display:-webkit-box;display:flex;width:100%}
.input-group .form-control{border-radius:var(--ql-radius) 0 0 var(--ql-radius)}
.input-group-append .btn{border-radius:0 var(--ql-radius) var(--ql-radius) 0;margin-left:-1px}

/* ------------------------------------------------------------ modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;display:none;overflow-x:hidden;overflow-y:auto;background:rgba(0,0,0,.45);outline:0}
.modal.show,.modal.in{display:block}
.modal-dialog{position:relative;width:auto;margin:80px auto;max-width:520px;padding:0 16px}
.modal-dialog-centered{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;min-height:calc(100% - 160px)}
.modal-lg{max-width:800px}
.modal-content{background:#fff;border-radius:var(--ql-radius);border:none;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.modal-header{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ql-border)}
.modal-title{font-size:15px;font-weight:600;margin:0}
.modal-header .close{background:transparent;border:none;font-size:20px;line-height:1;color:var(--ql-text-3);cursor:pointer;margin-left:auto;padding:0}
.modal-body{padding:20px;font-size:13px}
.modal-footer{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--ql-border)}
.modal-footer .btn{margin-left:8px}
.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1990}

/* --------------------------------------------------------------- 其他 */
.no-data{padding:40px 0;text-align:center;color:var(--ql-text-3)}
.no-data img{width:80px;opacity:.9}
.empty{display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;-webkit-box-align:center;align-items:center}
.avatar{border-radius:var(--ql-radius);overflow:hidden}
.avatar-md{width:48px;height:48px}
.w-100{width:100%!important}.h-100{height:100%!important}
.d-flex{display:-webkit-box!important;display:flex!important}
.d-inline-flex{display:-webkit-inline-box!important;display:inline-flex!important}
.d-block{display:block!important}
.d-none{display:none!important}
.flex-column{-webkit-box-orient:vertical;flex-direction:column}
.flex1{-webkit-box-flex:1;flex:1}
.align-items-center{-webkit-box-align:center;align-items:center}
.justify-content-center{-webkit-box-pack:center;justify-content:center}
.justify-content-between{-webkit-box-pack:justify;justify-content:space-between}
.text-center{text-align:center}
.text-right{text-align:right}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:4px!important}.mb-2{margin-bottom:8px!important}
.mb-3{margin-bottom:12px!important}.mb-4{margin-bottom:16px!important}.mb-5{margin-bottom:24px!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:4px!important}.mt-2{margin-top:8px!important}
.mt-3{margin-top:12px!important}.mt-4{margin-top:16px!important}.mt-5{margin-top:24px!important}
.ml-1{margin-left:4px!important}.ml-2{margin-left:8px!important}.ml-3{margin-left:12px!important}
.mr-1{margin-right:4px!important}.mr-2{margin-right:8px!important}.mr-3{margin-right:12px!important}
.p-0{padding:0!important}.p-5{padding:24px!important}
#preloader{display:none}

/* 返回顶部 */
.pls-back2top{
    position:fixed;right:24px;bottom:32px;z-index:1040;display:none;
    width:40px;height:40px;border-radius:var(--ql-radius);background:#fff;border:1px solid var(--ql-border);
    color:var(--ql-text-3);font-size:0;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;
}
.pls-back2top.show{display:block}
.pls-back2top:hover{color:var(--ql-link)}
.pls-back2top i{font-size:20px;line-height:38px;display:block;text-align:center}

/* ==========================================================================
   业务页面样式
   ========================================================================== */

/* ---------------------------------------------------- 概览 / 用户中心 */
.ql-overview-row{display:-webkit-box;display:flex;gap:16px;margin-bottom:16px;-webkit-box-align:stretch;align-items:stretch}
.ql-overview-row>.ql-card{margin-bottom:0}
.ql-user-card{-webkit-box-flex:1.45;flex:1.45;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column}
.ql-user-card__head{display:-webkit-box;display:flex;align-items:flex-start;padding:20px 20px 0}
.ql-user-card__avatar{
    width:46px;height:46px;border-radius:var(--ql-radius);background:var(--ql-link);color:#fff;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    font-size:20px;flex:0 0 46px;
}
.ql-user-card__meta{margin-left:12px;-webkit-box-flex:1;flex:1;min-width:0}
.ql-user-card__name{font-size:15px;font-weight:600;color:var(--ql-text);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-user-card__link{font-size:12px;color:var(--ql-text-3);white-space:nowrap}
.ql-user-card__tags{display:-webkit-box;display:flex;flex-wrap:wrap;gap:8px}
.ql-tag{
    display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;
    height:22px;padding:0 8px;border:1px solid #91caff;color:var(--ql-link);background:#fff;
    border-radius:var(--ql-radius);font-size:12px;
}
.ql-tag i{margin-right:4px;font-size:12px}
.ql-tag--gray{border-color:#dcdfe6;color:var(--ql-text-3)}
.ql-user-card__grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ql-border-2);
    margin:16px 20px 20px;border-radius:var(--ql-radius);overflow:hidden;
}
.ql-user-card__cell{background:#f4f8ff;padding:12px 16px}
.ql-user-card__cell .lbl{display:block;color:var(--ql-text-3);font-size:12px;margin-bottom:4px}
.ql-user-card__cell .val{display:block;color:var(--ql-text);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ql-fee-card{-webkit-box-flex:1.15;flex:1.15;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column}
.ql-fee-card__body{padding:20px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;-webkit-box-flex:1;flex:1}
.ql-fee-card__top{display:-webkit-box;display:flex;align-items:flex-start}
.ql-fee-card__label{color:var(--ql-text-3);font-size:12px;margin-bottom:6px}
.ql-fee-card__amount{font-size:26px;font-weight:600;color:var(--ql-text);line-height:1.1}
.ql-fee-card__btn{margin-left:auto}
.ql-fee-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ql-border-2);margin-top:auto;border-radius:var(--ql-radius);overflow:hidden}
.ql-fee-card__cell{background:#f4f8ff;padding:10px 14px}
.ql-fee-card__cell .lbl{display:block;color:var(--ql-text-3);font-size:12px;margin-bottom:4px}
.ql-fee-card__cell .val{display:block;color:var(--ql-text);font-size:14px;font-weight:600}

.ql-visit-card{-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column}
.ql-visit-card__body{padding:0 20px 20px;color:var(--ql-text-3);font-size:12px;line-height:22px}

.ql-safe-card{-webkit-box-flex:1.45;flex:1.45}
.ql-safe-card__head{display:-webkit-box;display:flex;align-items:flex-start}
.ql-safe-card__gauge{width:150px;height:88px;flex:0 0 150px;margin-left:auto;margin-right:8px}
.ql-safe-card__level{color:var(--ql-text-3);font-size:12px;margin-bottom:6px}
.ql-safe-card__level em{font-style:normal;color:var(--ql-red)}
.ql-safe-card__score{font-size:30px;font-weight:600;color:var(--ql-text);line-height:1}
.ql-safe-card__desc{color:var(--ql-text-3);font-size:12px;line-height:20px;margin-top:10px}
.ql-safe-card__more{display:inline-block;margin-top:12px;font-size:12px}

.ql-stat-row{display:-webkit-box;display:flex;gap:16px;margin-bottom:16px}
.ql-stat-card{
    -webkit-box-flex:1;flex:1;background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);
    padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;min-width:0;
}
.ql-stat-card__head{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:10px}
.ql-stat-card__title{font-size:13px;font-weight:600;color:var(--ql-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ql-stat-card__icon{margin-left:auto;color:var(--ql-text-3);font-size:17px}
.ql-stat-card__line{height:2px;width:34px;border-radius:1px;background:var(--ql-link);margin-bottom:12px}
.ql-stat-card__num{font-size:26px;font-weight:600;color:var(--ql-text);line-height:1.1}
.ql-stat-card__num small{font-size:13px;font-weight:400;color:var(--ql-text-2);margin-left:4px}
.ql-stat-card__foot{margin-top:auto;padding-top:20px;display:-webkit-box;display:flex;gap:12px}
.ql-stat-card__foot a{font-size:12px;color:var(--ql-text-3)}
.ql-stat-card__foot a:hover{color:var(--ql-link)}

.ql-bottom-row{display:-webkit-box;display:flex;gap:16px}
.ql-bottom-row>.ql-card{margin-bottom:0}
.ql-products-card{-webkit-box-flex:1.05;flex:1.05}
.ql-notice-card{-webkit-box-flex:1.3;flex:1.3}
.ql-notice-list li{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    background:var(--ql-fill);border-radius:var(--ql-radius);padding:9px 12px;margin-bottom:6px;
}
.ql-notice-list li:last-child{margin-bottom:0}
.ql-notice-list .tt{font-size:12px;color:var(--ql-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql-notice-list .tt:hover{color:var(--ql-link)}
.ql-notice-list .dt{margin-left:auto;color:var(--ql-text-3);font-size:12px;flex:0 0 auto;padding-left:12px}
.ql-empty-text{color:var(--ql-text-3);font-size:13px;padding:6px 0}

/* ---------------------------------------------------- 产品实例卡片列表 */
.ql-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ql-service-card{background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column}
.ql-service-card__head{display:-webkit-box;display:flex;align-items:flex-start;padding:18px 20px 0}
.ql-service-card__logo{
    width:40px;height:40px;flex:0 0 40px;border-radius:var(--ql-radius);border:1px solid var(--ql-border-2);
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;overflow:hidden;background:#fff;
}
.ql-service-card__logo img{max-width:30px;max-height:30px}
.ql-service-card__name{
    margin-left:12px;font-size:15px;font-weight:600;color:var(--ql-text);
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;padding-top:2px;
}
.ql-service-card__name a{color:var(--ql-text)}
.ql-service-card__name a:hover{color:var(--ql-link)}
.ql-status-tag{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;height:22px;padding:0 8px;font-size:12px;border-radius:var(--ql-radius);line-height:1;white-space:nowrap}
.ql-status-tag--active{background:var(--ql-green-bg);border:1px solid var(--ql-green-border);color:var(--ql-green-text)}
.ql-status-tag--pending{background:var(--ql-orange);border:1px solid var(--ql-orange);color:#fff}
.ql-status-tag--suspended{background:#fff1f0;border:1px solid #ffccc7;color:var(--ql-red)}
.ql-status-tag--other{background:var(--ql-fill);border:1px solid var(--ql-border);color:var(--ql-text-3)}
.ql-service-card__tools{margin-left:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;flex:0 0 auto}
.ql-service-card__tools .btn{margin-left:8px}
.ql-service-card__more{
    width:32px;height:32px;padding:0;border:1px solid #dcdfe6;background:#fff;border-radius:var(--ql-radius);
    color:var(--ql-text-2);display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
}
.ql-service-card__more:hover{border-color:var(--ql-link);color:var(--ql-link)}
.ql-service-card__meta{padding:14px 20px 0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-align:center;align-items:center}
.ql-service-card__meta .it{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;color:var(--ql-text-2);font-size:13px;padding:0 12px;position:relative}
.ql-service-card__meta .it:first-child{padding-left:0}
.ql-service-card__meta .it+.it::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:var(--ql-border)}
.ql-service-card__meta .it.muted{color:var(--ql-text-3)}
.ql-service-card__meta .it i{color:var(--ql-link);margin-left:6px;font-size:13px}
.ql-service-card__foot{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;
    border-top:1px solid var(--ql-border-2);margin-top:16px;padding:12px 20px;color:var(--ql-text-3);font-size:13px;
}
.ql-service-card__foot .renew{color:var(--ql-link);font-size:13px}
.ql-service-card__foot .renew i{font-size:12px}

/* ------------------------------------------------------- 服务详情页 */
.ql-detail-head{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    background:#fff;border:1px solid var(--ql-border);height:56px;padding:0 20px;
    border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.ql-detail-head .ql-back{color:var(--ql-link);font-size:13px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-detail-head .ql-back i{font-size:18px}
.ql-detail-head .sep{color:var(--ql-text-4);margin:0 12px}
.ql-detail-head .title{font-size:16px;font-weight:600;color:var(--ql-text)}
.ql-detail-head .tools{margin-left:auto;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-detail-head .tools .btn{margin-left:8px}
.ql-tabs-wrap{background:#fff;border-left:1px solid var(--ql-border);border-right:1px solid var(--ql-border);border-bottom:1px solid var(--ql-border);margin-bottom:16px}
.ql-detail-cols{display:-webkit-box;display:flex;gap:16px;-webkit-box-align:flex-start;align-items:flex-start}
.ql-detail-col-left{-webkit-box-flex:0 0 34%;flex:0 0 34%;max-width:34%}
.ql-detail-col-left.wide{-webkit-box-flex:0 0 38%;flex:0 0 38%;max-width:38%}
.ql-detail-col-right{-webkit-box-flex:1;flex:1;min-width:0}
.ql-info-list{padding:2px 0}
.ql-info-row{display:-webkit-box;display:flex;padding:11px 0;font-size:13px;line-height:22px}
.ql-info-row .lbl{flex:0 0 96px;width:96px;color:var(--ql-text-3)}
.ql-info-row .val{-webkit-box-flex:1;flex:1;color:var(--ql-text);word-break:break-all;min-width:0}
.ql-info-row .val.muted{color:var(--ql-text-3)}
.ql-info-row .val i.copy{color:var(--ql-text-3);margin-left:6px;cursor:pointer}
.ql-info-row .val i.copy:hover{color:var(--ql-link)}
.ql-info-spec .line{display:-webkit-box;display:flex;line-height:24px}
.ql-info-spec .line .k{color:var(--ql-text-3);flex:0 0 66px}
.ql-run-status{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-run-btn{
    width:44px;height:44px;border-radius:50%;background:var(--ql-green);border:none;color:#fff;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    font-size:20px;cursor:pointer;margin-right:12px;
}
.ql-run-btn i{margin-left:2px}
.ql-run-btn.off{background:var(--ql-text-4)}
.ql-login-info{margin-top:16px;border-top:1px solid var(--ql-border-2);padding-top:16px}
.ql-login-info__head{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;font-size:14px;font-weight:600;margin-bottom:10px}
.ql-login-info__head i{color:var(--ql-text-3);margin-left:6px;font-size:14px;cursor:pointer}
.ql-login-info__body{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}
.ql-login-info__rows{-webkit-box-flex:1;flex:1;min-width:0}
.ql-login-info__row{display:-webkit-box;display:flex;align-items:center;font-size:13px;padding:5px 0}
.ql-login-info__row .lbl{color:var(--ql-text-3);flex:0 0 60px}
.ql-login-info__row .val{color:var(--ql-text)}
.ql-login-info .btn{margin-left:12px;flex:0 0 auto}

/* 监控图表 */
.ql-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.ql-chart-item{padding:4px 0 12px;min-width:0}
.ql-chart-item h4{font-size:13px;font-weight:600;color:var(--ql-text);margin-bottom:12px}
.ql-chart-date{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.ql-chart-date .box{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;
    border:1px solid #dcdfe6;border-radius:var(--ql-radius);height:28px;padding:0 8px;background:#fff;min-width:0;
}
.ql-chart-date .box input{border:none;outline:none;font-size:12px;color:var(--ql-text-2);width:100%;min-width:96px;background:transparent}
.ql-chart-date .box i{color:var(--ql-text-3);font-size:13px;margin-left:4px}
.ql-chart-date .to{margin:0 8px;color:var(--ql-text-3);font-size:12px}
.ql-chart-canvas{width:100%;height:190px}
.chartbox{width:100%!important}
.module_chart{min-width:0}

/* -------------------------------------------------- 提交工单 / 部门 */
.ql-dept-title{font-size:13px;color:var(--ql-text-2);margin:20px 0 12px}
.ql-dept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ql-dept-card{background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);padding:18px 20px;cursor:pointer}
.ql-dept-card h5{font-size:14px;font-weight:600;margin-bottom:12px}
.ql-dept-card .lbl{color:var(--ql-text-3);font-size:12px;margin-bottom:8px}
.ql-dept-card .txt{font-size:13px;color:var(--ql-text-2);line-height:24px}
.ql-dept-card:hover{border-color:#91caff}
.ql-ticket-steps{font-size:13px;color:var(--ql-text-2);line-height:26px;padding:0 4px}
.ql-ticket-steps .promise{margin-top:8px}

/* -------------------------------------------------------- 账户充值 */
.ql-balance-row{display:-webkit-box;display:flex;-webkit-box-align:baseline;align-items:baseline;padding:24px 0 16px}
.ql-balance-row .lbl{color:var(--ql-text-2);font-size:13px;margin-right:12px}
.ql-balance-row .num{font-size:26px;font-weight:600;color:var(--ql-text);line-height:1}
.ql-balance-row .unit{font-size:13px;color:var(--ql-text-2);margin-left:4px}
.ql-balance-row .links{margin-left:auto}
.ql-balance-row .links a{font-size:13px;margin-left:14px}
.ql-form-row{display:-webkit-box;display:flex;padding:14px 0;align-items:flex-start}
.ql-form-row>.lbl{flex:0 0 96px;width:96px;color:var(--ql-text-2);font-size:13px;line-height:32px}
.ql-form-row>.ctrl{-webkit-box-flex:1;flex:1;min-width:0}
/* 支付方式（在线充值网关，点击整块切换） */
.ql-pay-ways{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-align:center;align-items:center;gap:12px;padding-top:2px}
.ql-pay-way{display:-webkit-box;display:flex}
.ql-pay-way .addfunds-payment{
    position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:8px;
    min-height:44px;padding:0 38px 0 14px;background:#fff;
    border:1px solid #e5e6eb;border-radius:4px;cursor:pointer;
    -webkit-transition:border-color .15s,background .15s,box-shadow .15s;transition:border-color .15s,background .15s,box-shadow .15s;
}
.ql-pay-way .addfunds-payment:hover{border-color:#91caff}
.ql-pay-way .addfunds-payment.active{border-color:var(--ql-link);background:#f5f9ff;box-shadow:0 0 0 1px var(--ql-link) inset}
.ql-pay-way .addfunds-payment img{height:20px;width:auto;max-width:72px;object-fit:contain;display:block}
.ql-pay-way__name{font-size:13px;color:var(--ql-text-2);white-space:nowrap;line-height:1}
.ql-pay-way .addfunds-payment.active .ql-pay-way__name{color:var(--ql-link)}
.ql-pay-way__check{
    position:absolute;right:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
    font-size:15px;color:var(--ql-link);display:none;
}
.ql-pay-way .addfunds-payment.active .ql-pay-way__check{display:block}
.ql-pay-ways__empty{color:var(--ql-text-3);font-size:13px}
.ql-amount-input{position:relative;max-width:100%}
.ql-amount-input input{
    width:100%;height:52px;padding:0 48px 0 16px;font-size:16px;color:var(--ql-text);
    background:var(--ql-fill);border:1px solid transparent;border-radius:var(--ql-radius);outline:none;
}
.ql-amount-input input:focus{background:#fff;border-color:var(--ql-link)}
.ql-amount-input .unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--ql-text-2);font-size:14px}
.ql-hint{color:var(--ql-text-3);font-size:12px;margin-top:8px}
.ql-know{margin-top:16px}
.ql-know .note{margin-top:8px;padding-left:20px}
.ql-pay-actions{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-top:24px}
.ql-pay-actions .btn{min-width:150px;height:38px;margin-right:12px}
.ql-pay-actions .btn-plain{color:var(--ql-text-2);background:#fff;border-color:transparent}
.ql-pay-actions .btn-plain:hover{color:var(--ql-link)}

/* --------------------------------------------------------- API管理 */
.ql-api-hero{text-align:center;padding:24px 0 20px}
.ql-api-hero h3{font-size:18px;font-weight:600;margin-bottom:8px}
.ql-api-hero p{color:var(--ql-text-3);font-size:13px;margin:0}
.ql-api-box{
    max-width:540px;margin:0 auto 24px;background:#fff;border:1px solid var(--ql-border);
    border-top:2px solid var(--ql-primary);border-radius:var(--ql-radius);padding:36px 40px 32px;text-align:center;
}
.ql-api-box .key{font-size:52px;color:var(--ql-primary);line-height:1;margin-bottom:24px;display:block}
.ql-api-box h4{font-size:16px;font-weight:600;margin-bottom:8px}
.ql-api-box .desc{color:var(--ql-text-3);font-size:12px;margin-bottom:18px}
.ql-api-box .agree{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:13px;color:var(--ql-text-2);margin-bottom:20px}
.ql-api-box .agree input{margin-right:6px}
.ql-api-box .agree a{color:var(--ql-link)}
.ql-api-box .btn{width:260px;height:38px;margin:0 auto}
.ql-api-log{text-align:center;padding-bottom:24px}
.ql-api-log a{font-size:13px}

/* --------------------------------------------------------- 实名认证 */
.ql-verify-hero{text-align:center;padding:12px 0 20px}
.ql-verify-hero h3{font-size:18px;font-weight:600;margin-bottom:8px}
.ql-verify-hero p{color:var(--ql-text-3);font-size:13px;margin:0}
.ql-verify-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto}
.ql-verify-card{background:#fff;border:1px solid var(--ql-border);border-radius:var(--ql-radius);padding:40px 24px 48px;text-align:center}
.ql-verify-card.on{border-color:var(--ql-link);box-shadow:0 0 0 1px var(--ql-link) inset}
.ql-verify-card .ico{font-size:56px;color:var(--ql-text-4);line-height:1;display:block;margin-bottom:24px}
.ql-verify-card h4{font-size:16px;font-weight:600;margin-bottom:8px}
.ql-verify-card .desc{color:var(--ql-text-3);font-size:12px;margin-bottom:28px}
.ql-verify-card .btn{width:230px;height:38px;margin:0 auto;background:var(--ql-deep);border-color:var(--ql-deep)}
.ql-verify-card .btn:hover{background:var(--ql-deep-hover);border-color:var(--ql-deep-hover)}
.ql-verify-foot{text-align:center;color:var(--ql-text-3);font-size:12px;padding:24px 0 8px}

/* 状态页（已认证 / 审核中 / 未通过） */
.ql-status-box{padding:48px 24px;text-align:center}
.ql-status-box h3{font-size:20px;margin-bottom:8px}
.ql-status-box .sub{color:var(--ql-text-3);font-size:13px}
.ql-status-box .member{max-width:320px;margin:24px auto 0}
.ql-status-box .member p{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;font-size:13px;margin-bottom:10px}
.ql-status-box .member p span:first-child{color:var(--ql-text-3)}

/* --------------------------------------------- 通用产品详情（other） */
.ql-other-head{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:20px;border-bottom:1px solid var(--ql-border-2)}
.ql-other-head h4{font-size:16px;margin-bottom:6px}
.ql-other-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ql-other-grid .it{background:var(--ql-fill);border-radius:var(--ql-radius);padding:12px 14px}
.ql-other-grid .it .lbl{color:var(--ql-text-3);font-size:12px;display:block;margin-bottom:4px}
.ql-other-grid .it .val{color:var(--ql-text);font-size:13px;word-break:break-all}

/* ------------------------------------------------------------ 安全中心 */
.security-header.card{
    background:linear-gradient(96deg,#2b5cff 0%,#3f7bff 48%,#2f8dff 100%);
    border:none;border-radius:8px;color:#fff;overflow:hidden;
}
.security-header .card-body{padding:22px 26px}
.security-header .security-avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}
.security-header .security-logo{
    width:64px;height:64px;border-radius:50%;padding:0!important;
    background:rgba(255,255,255,.18)!important;color:#fff;
    font-size:24px;font-weight:600;line-height:1;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
}
.security-header .security-username{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;flex-wrap:wrap;gap:8px;
    font-size:18px;font-weight:600;color:#fff;line-height:1.4;
}
.security-header .security-username .badge{border-radius:2px;font-size:12px;font-weight:400;padding:2px 8px;line-height:1.4}
.security-header .badge-success{background:#52c41a;color:#fff}
.security-header .badge-dark{background:rgba(255,255,255,.24);color:#fff}
.security-header .security-strength{margin-top:10px}
.security-header .security-label{font-size:12px;color:rgba(255,255,255,.82);margin-bottom:6px}
.security-header .security-label .security-text{color:#fff;font-weight:600}
.security-header .progress{height:4px;max-width:280px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.security-header .progress-bar{background:#fff!important;border-radius:2px}
.security-header .security-meta{color:rgba(255,255,255,.92);font-size:12.5px;line-height:24px}
.security-header .security-meta label{color:rgba(255,255,255,.7);font-size:12.5px;margin-bottom:0;display:inline}
.security-header .security-meta ul{padding:0;margin:0;list-style:none}
.security-header .security-meta .list-inline-item{margin-right:26px}

.security-items{display:block}
.security-item{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:14px;
    padding:18px 0;border-bottom:1px solid var(--ql-border-2);
}
.security-item:first-child{padding-top:4px}
.security-item:last-child{border-bottom:none;padding-bottom:4px}
.security-item-icon{
    width:38px;height:38px;flex:0 0 38px;border-radius:50%;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;
    background:var(--ql-primary)!important;color:#fff;font-size:16px;
}
.security-item-icon.bg-info{background:#1890ff!important}
.security-item-icon img{width:22px;height:22px;border-radius:50%}
.security-item-info{
    -webkit-box-flex:1;flex:1;min-width:0;
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:16px;
}
.security-item-text{-webkit-box-flex:1;flex:1;min-width:0}
.security-item-title{
    display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;flex-wrap:wrap;gap:8px;
    font-size:14px;font-weight:600;color:var(--ql-text);margin:0 0 4px;
}
.security-item-title small{
    display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px;
    font-size:12px;font-weight:400;color:var(--ql-green-text);
}
.security-item-title small .fas,.security-item-title small .bx{font-size:13px}
.security-item-desc{font-size:12px;color:var(--ql-text-3);line-height:20px}
.security-item .btn{-webkit-box-flex:0 0 auto;flex:0 0 auto;min-width:92px}
.security-item .btn-outline-primary{background:#fff;border-color:#91caff;color:var(--ql-primary)}
.security-item .btn-outline-primary:hover{background:var(--ql-primary);border-color:var(--ql-primary);color:#fff}
.security-item .btn-outline-primary:disabled,.security-item .btn-outline-primary.disabled{background:#f5f7fa;border-color:#e5e6eb;color:var(--ql-text-3);cursor:not-allowed}
.security-item .btn-primary{background:var(--ql-primary);border-color:var(--ql-primary);color:#fff}
.security-item-image{display:none}
.w-md{min-width:92px}

/* ------------------------------------------------------- 消息 / 工单 */
.ql-msg-item{display:-webkit-box;display:flex;padding:16px 0;border-bottom:1px solid var(--ql-border-2)}
.ql-msg-item:last-child{border-bottom:none}
.ql-msg-item .ico{
    width:36px;height:36px;flex:0 0 36px;border-radius:var(--ql-radius);display:-webkit-box;display:flex;
    -webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:18px;
    background:#eaf3ff;color:var(--ql-link);margin-right:12px;
}
.ql-msg-item .body{-webkit-box-flex:1;flex:1;min-width:0}
.ql-msg-item .tt{font-size:13px;color:var(--ql-text);margin-bottom:4px}
.ql-msg-item .dt{font-size:12px;color:var(--ql-text-3)}

/* ------------------------------------------------------------ 登录页 */
.ql-login-wrap{min-height:100vh;display:-webkit-box;display:flex}
/* 登录 / 注册 / 找回密码：整页布局，去掉外壳内边距 */
.ql-body--auth{background:#f4f7fd}
.ql-body--auth .ql-content--bare{padding:0}
.ql-body--auth .ql-container{padding:0}

/* ------------------------------------------------------------ 响应式 */
html,body{max-width:100%;overflow-x:hidden}
.ql-main{min-width:0}
.ql-content,.ql-container{min-width:0}
img,table{max-width:100%}

/* 大屏笔记本 */
@media (max-width:1400px){
    .ql-detail-col-left{-webkit-box-flex:0 0 40%;flex:0 0 40%;max-width:40%}
    .ql-topnav__item{min-width:58px}
    .ql-chart-canvas{height:180px}
}
/* 小屏笔记本 / 平板横屏 */
@media (max-width:1200px){
    .ql-service-grid{grid-template-columns:1fr}
    .ql-detail-cols{-webkit-box-orient:vertical;flex-direction:column}
    .ql-detail-col-left,.ql-detail-col-left.wide{-webkit-box-flex:1 1 auto;flex:1 1 auto;max-width:100%;width:100%}
    .ql-overview-row{-webkit-box-orient:vertical;flex-direction:column}
    .ql-user-card,.ql-fee-card,.ql-visit-card,.ql-safe-card{-webkit-box-flex:1 1 auto;flex:1 1 auto}
    .ql-stat-row{flex-wrap:wrap}
    .ql-stat-card{-webkit-box-flex:1 1 calc(50% - 8px);flex:1 1 calc(50% - 8px)}
    .ql-bottom-row{-webkit-box-orient:vertical;flex-direction:column}
    .ql-chart-grid{gap:8px 12px}
    .ql-info-row .lbl{flex:0 0 88px;width:88px}
    .ql-form-row>.lbl{flex:0 0 88px;width:88px}
}
/* 平板竖屏 */
@media (max-width:992px){
    .ql-chart-grid{grid-template-columns:1fr}
    .ql-dept-grid{grid-template-columns:1fr}
    .ql-verify-grid{grid-template-columns:1fr}
    .ql-topnav{display:none}
    .ql-userbox__info{display:none}
    .ql-userbox{padding:0 4px}
    .ql-userbox__square{margin-left:6px}
    .ql-section{margin-left:8px;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ql-detail-head{height:auto;min-height:56px;padding:10px 16px;flex-wrap:wrap}
    .ql-detail-head .title{font-size:15px}
    .ql-verify-card .ico{font-size:46px}
    .ql-api-box{padding:28px 24px 24px}
    .ql-api-box .btn{width:220px}
    .ql-safe-card__gauge{width:130px;flex:0 0 130px}
}
/* 手机 / 平板竖屏 */
@media (max-width:768px){
    /* 侧栏改为抽屉 */
    .ql-sidebar{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s;z-index:1045;box-shadow:2px 0 14px rgba(0,0,0,.08)}
    body.ql-sidebar-open .ql-sidebar{-webkit-transform:translateX(0);transform:translateX(0)}
    body.ql-sidebar-open{overflow:hidden}
    body.ql-sidebar-open::after{content:"";position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.35);z-index:1040}
    .ql-main{margin-left:0}
    .ql-menu-btn{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}
    .ql-content{padding:0 12px 24px}
    .ql-topbar{padding:0 12px}
    .ql-section{display:none}
    .ql-topnav__icon{width:36px}
    /* 卡片 */
    .ql-card__body{padding:14px}
    .ql-card-head{height:44px;padding:0 14px}
    .ql-card-head .ql-card-title{font-size:14px}
    /* 用户中心 */
    .ql-overview-row{gap:12px}
    .ql-user-card__head{padding:14px 14px 0;flex-wrap:wrap}
    .ql-user-card__grid{grid-template-columns:1fr;margin:12px 14px 14px}
    .ql-fee-card__body,.ql-visit-card__body{padding:14px}
    .ql-stat-row{gap:12px}
    .ql-stat-card{-webkit-box-flex:1 1 100%;flex:1 1 100%;padding:14px}
    .ql-stat-card__foot{padding-top:12px}
    .ql-bottom-row{gap:12px}
    .ql-safe-card__head{-webkit-box-orient:horizontal;flex-direction:row}
    .ql-safe-card__gauge{width:118px;flex:0 0 118px}
    /* 实例卡片 */
    .ql-service-grid{gap:12px}
    .ql-service-card__head{padding:14px 14px 0;flex-wrap:wrap}
    .ql-service-card__logo{width:34px;height:34px;flex:0 0 34px}
    .ql-service-card__logo img{max-width:26px;max-height:26px}
    .ql-service-card__name{font-size:14px;margin-left:10px}
    .ql-service-card__tools{margin-left:0;width:100%;margin-top:10px}
    .ql-service-card__meta{padding:12px 14px 0;row-gap:6px}
    .ql-service-card__meta .it{font-size:12px;padding:0 10px}
    .ql-service-card__meta .it:first-child{padding-left:0}
    .ql-service-card__foot{padding:10px 14px;margin-top:12px;font-size:12px}
    /* 实例详情 */
    .ql-detail-head{padding:10px 12px}
    .ql-detail-head .sep{display:none}
    .ql-detail-head .ql-back{-webkit-box-ordinal-group:2;order:1}
    .ql-detail-head .title{order:3;width:100%;font-size:14px;margin-top:6px}
    .ql-detail-head .tools{order:2;flex:1 1 auto;min-width:0;margin-left:8px;flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end}
    .ql-detail-head .tools .btn{margin-left:6px;margin-bottom:4px}
    .ql-tabs{padding:0 12px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
    .ql-tabs::-webkit-scrollbar{display:none}
    .ql-tabs__item{margin-right:20px;height:40px;font-size:13px;flex:0 0 auto}
    .ql-info-row{padding:9px 0}
    .ql-info-row .lbl{flex:0 0 78px;width:78px}
    .ql-login-info__body{-webkit-box-orient:vertical;flex-direction:column;align-items:stretch}
    .ql-login-info .btn{margin:12px 0 0}
    .ql-chart-date .box{flex:1 1 40%;min-width:0}
    .ql-chart-date .box input{min-width:56px;font-size:11px}
    .ql-chart-canvas{height:170px}
    .ql-chart-item h4{font-size:12.5px}
    /* 表单 / 充值 */
    .ql-form-row{-webkit-box-orient:vertical;flex-direction:column;padding:10px 0}
    .ql-form-row>.lbl{width:auto;flex:0 0 auto;line-height:1.6;margin-bottom:8px}
    .ql-pay-ways{padding-top:2px;gap:10px;width:100%}
    .ql-pay-way{width:100%}
    .ql-pay-way .addfunds-payment{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:42px}
    .ql-pay-way .addfunds-payment img{max-width:60px}
    .ql-amount-input input{height:46px;font-size:15px}
    .ql-balance-row{flex-wrap:wrap;padding:16px 0 10px}
    .ql-balance-row .num{font-size:22px}
    .ql-balance-row .links{margin-left:0;width:100%;margin-top:6px}
    .ql-balance-row .links a{margin-left:0;margin-right:14px}
    .ql-pay-actions{-webkit-box-orient:vertical;flex-direction:column;align-items:stretch;margin-top:18px}
    .ql-pay-actions .btn{width:100%;margin:0 0 10px}
    .ql-know .note{padding-left:12px}
    /* API / 实名 / 工单 */
    .ql-api-hero{padding:16px 0 14px}
    .ql-api-hero h3{font-size:16px}
    .ql-api-box{padding:22px 16px;margin-bottom:18px}
    .ql-api-box .key{font-size:42px;margin-bottom:16px}
    .ql-api-box .btn{width:100%}
    .ql-api-box .agree{font-size:12px;align-items:flex-start;text-align:left}
    .ql-verify-hero h3{font-size:16px}
    .ql-verify-grid{gap:12px}
    .ql-verify-card{padding:24px 14px 28px}
    .ql-verify-card .ico{font-size:44px;margin-bottom:16px}
    .ql-verify-card .btn{width:100%}
    .ql-dept-grid{gap:12px}
    .ql-dept-card{padding:14px}
    .ql-ticket-steps{font-size:12.5px;line-height:24px}
    /* 表格与分页 */
    .table-footer{-webkit-box-orient:vertical;flex-direction:column;-webkit-box-align:start;align-items:flex-start}
    .table-pagination{margin-left:0;margin-top:10px}
    .table-pageinfo{flex-wrap:wrap}
    .pagination{flex-wrap:wrap}
    /* 安全中心 */
    .security-header .card-body{padding:16px}
    .security-header .security-logo{width:52px;height:52px;font-size:20px}
    .security-header .security-username{font-size:16px}
    .security-header .security-meta .list-inline-item{margin-right:14px}
    .security-item{gap:12px;padding:14px 0}
    .security-item-info{flex-wrap:wrap;gap:10px}
    .security-item-icon{width:34px;height:34px;flex:0 0 34px;font-size:15px}
    .security-item .btn{min-width:auto}
    /* 弹窗 */
    .modal-dialog{margin:24px auto;padding:0 12px}
    .ql-dropdown{min-width:132px}
}
/* 小尺寸手机 */
@media (max-width:576px){
    .ql-topnav__icon{width:32px;font-size:17px}
    .ql-userbox__name{max-width:62px}
    .ql-block-title{font-size:13px}
    .ql-safe-card__head{-webkit-box-orient:vertical;flex-direction:column}
    .ql-safe-card__gauge{width:130px;flex:0 0 130px;margin:10px 0 0}
    .ql-stat-card__num{font-size:22px}
    .ql-user-card__avatar{width:40px;height:40px;flex:0 0 40px;font-size:17px}
    .ql-user-card__link{margin-left:auto}
    .ql-service-card__meta .it{font-size:11.5px;padding:0 8px}
    .ql-service-card__foot{flex-wrap:wrap;row-gap:6px}
    .ql-chart-canvas{height:150px}
    .ql-chart-date .box{flex:1 1 100%;margin-bottom:6px}
    .ql-chart-date .to{margin:0 6px}
    .ql-verify-grid{gap:12px}
    .ql-login-info__row .lbl{flex:0 0 54px}
}