/* ================================================================
   QRuser 精致化样式 - 参考腾讯云/阿里云控制台设计规范
   核心理念：轻量、留白充足、视觉层次清晰
   解决"傻大粗"：去掉重阴影、粗边框、强渐变，改为轻边框+微阴影
   注意：保持充足间距，不要压缩文字空间
   ================================================================ */

/* ==================== 1. 设计变量 ==================== */
:root {
    --qr-primary: #0052d9;
    --qr-primary-light: #e8f0fe;
    --qr-primary-hover: #3d7eff;
    --qr-text-1: #1d2129;
    --qr-text-2: #4e5969;
    --qr-text-3: #86909c;
    --qr-text-4: #c9cdd4;
    --qr-border: #e5e6eb;
    --qr-bg-1: #ffffff;
    --qr-bg-2: #f7f8fa;
    --qr-bg-3: #f2f3f5;
    --qr-radius-s: 4px;
    --qr-radius-m: 6px;
    --qr-radius-l: 8px;
    --qr-shadow-1: 0 1px 2px 0 rgba(0,0,0,0.03);
    --qr-shadow-2: 0 2px 6px 0 rgba(0,0,0,0.06);
    --qr-shadow-hover: 0 4px 12px 0 rgba(0,0,0,0.08);
}

/* ==================== 2. 卡片系统 ==================== */

.card {
    border-radius: var(--qr-radius-l) !important;
    box-shadow: var(--qr-shadow-1) !important;
    border: 1px solid var(--qr-border) !important;
    margin-bottom: 20px;
    background: var(--qr-bg-1) !important;
    background-image: none !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: var(--qr-shadow-hover) !important;
}

.card-body {
    border-radius: var(--qr-radius-l);
    padding: 1.25rem;
}

/* ==================== 3. 按钮系统 ==================== */

.btn {
    border-radius: var(--qr-radius-s) !important;
    box-shadow: none !important;
    font-weight: 400;
    font-size: 14px;
    padding: 6px 20px;
    transition: all 0.15s ease;
    line-height: 1.5;
    cursor: pointer;
}

.btn:active {
    transform: scale(0.97);
}

.btn-sm {
    font-size: 13px;
    padding: 4px 12px;
}

.btn-primary {
    background-color: var(--qr-primary) !important;
    border-color: var(--qr-primary) !important;
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--qr-primary-hover) !important;
    border-color: var(--qr-primary-hover) !important;
}

.btn-primary:focus {
    background-color: #003cab !important;
    border-color: #003cab !important;
}

.btn-primary:active {
    background-color: #003cab !important;
    border-color: #003cab !important;
}

.btn-danger {
    border-radius: var(--qr-radius-s) !important;
}

.btn-outline-primary {
    color: var(--qr-primary);
    border-color: var(--qr-primary);
}

.btn-outline-primary:hover {
    background-color: var(--qr-primary);
    border-color: var(--qr-primary);
    color: #fff;
}

.btn-default {
    border: 1px solid var(--qr-border);
    background-color: var(--qr-bg-1);
}

#DelBtn, #delBtn, #allDelBtn, #closeApi {
    border-radius: var(--qr-radius-s) !important;
}

/* ==================== 4. 表单系统 ==================== */

.form-control {
    border-radius: var(--qr-radius-s) !important;
    border: 1px solid var(--qr-border);
    font-size: 14px;
    height: 36px;
    padding: 5px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: var(--qr-bg-1);
}

.form-control:focus {
    border-color: var(--qr-primary) !important;
    box-shadow: 0 0 0 2px rgba(0,82,217,0.08) !important;
    outline: none;
}

.form-control:hover {
    border-color: #c9cdd4;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--qr-bg-2);
    color: var(--qr-text-3);
}

select {
    border-radius: var(--qr-radius-s) !important;
    border: 1px solid var(--qr-border) !important;
    box-shadow: none !important;
    background-image: linear-gradient(0deg, #fff, #f7f8fa) !important;
    font-size: 14px;
    height: 36px;
}

.input-group-append {
    height: 36px;
}

.custom-control {
    min-height: auto;
}

/* ==================== 5. 弹窗系统 ==================== */

.modal-content {
    border-radius: var(--qr-radius-l) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
    border: none !important;
    background: var(--qr-bg-1) !important;
    background-image: none !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--qr-border);
    padding: 16px 24px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--qr-border);
    padding: 12px 24px;
}

.modal-title {
    color: var(--qr-text-1);
    border-left: 3px solid var(--qr-primary);
    font-weight: 600;
    font-size: 16px;
    padding-left: 12px;
}

/* ==================== 6. 顶部栏 ==================== */

#page-topbar {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    border-bottom: 1px solid var(--qr-border);
    background: var(--qr-bg-1) !important;
    background-image: none !important;
}

/* 顶部栏固定定位时，主内容区需要留出空间避免被遮挡 */
/* 桌面端：框架.page-content已有padding-top:94px(70px顶栏+24px间距)，无需额外padding */
/* 手机端/平板端：responsive.css已将.page-content padding-top设为80px，无需额外padding */

.header-item {
    color: var(--qr-text-2);
    padding: 0 12px;
    font-size: 14px;
}

.header-item:hover {
    color: var(--qr-primary);
    background: none;
}

/* 顶部栏头像 */
.header-profile-user {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--qr-border);
    transition: border-color 0.15s ease;
}

.header-item:hover .header-profile-user {
    border-color: var(--qr-primary);
}

.d-lg-inline-block a {
    color: var(--qr-text-2);
    font-size: 14px;
}

.noti-icon i {
    color: var(--qr-text-2);
    font-size: 18px;
    margin-top: 4px;
}

/* ==================== 7. 侧边栏 ==================== */

.vertical-menu {
    background: var(--qr-bg-1) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--qr-border);
}

.vertical-menu,
.navbar-brand-box {
    width: 220px;
}

#sidebar-menu {
    padding: 16px 0;
}

#sidebar-menu ul li a {
    font-size: 14px;
    padding: 9px 20px;
    color: var(--qr-text-2);
}

#sidebar-menu ul li a:hover {
    color: var(--qr-primary);
}

#sidebar-menu ul li ul.sub-menu li a {
    padding: 7px 20px 7px 44px;
    font-size: 14px;
}

body[data-sidebar="light"] .mm-active > a {
    color: var(--qr-primary) !important;
    background: var(--qr-primary-light);
    border-left: 3px solid var(--qr-primary);
}

body[data-sidebar="light"] .mm-active .active {
    border: none;
    background: #fff;
}

body[data-sidebar="light"] #sidebar-menu ul li a:hover {
    color: var(--qr-primary);
}

body[data-sidebar="light"] #sidebar-menu ul li a:hover i {
    color: var(--qr-primary);
}

/* ==================== 8. 卡片标题 ==================== */

.card-title {
    color: var(--qr-text-1);
    border-left: 3px solid var(--qr-primary);
    font-weight: 600;
    font-size: 15px;
    padding-left: 12px;
    margin-bottom: 16px;
}

.card-title:hover {
    color: var(--qr-primary);
}

.page-title-box h4 {
    color: var(--qr-text-1);
    font-weight: 600;
    font-size: 16px;
    border-radius: 0;
    padding-bottom: 0;
}

.h4, h4 {
    font-size: 15px;
}

/* ==================== 9. 用户头像区 ==================== */

.zdusertx .user-center_header {
    width: 48px;
    height: 48px;
    font-size: 18px;
    border-radius: 50%;
    background-color: var(--qr-primary);
    border: 2px solid rgba(0,82,217,0.1);
    color: #fff;
    font-weight: 500;
}

.user-center_name {
    font-size: 16px;
    max-width: 60%;
    font-weight: 500;
    color: var(--qr-text-1);
}

.zduserxx span {
    font-size: 13px;
    line-height: 1.8;
    color: var(--qr-text-2);
}

.zduserxx .zdyhz {
    background: linear-gradient(135deg, #ff9900, #ffad33);
    color: #fff !important;
    text-align: center;
    padding: 2px 10px;
    border-radius: 10px;
    border: none;
    display: inline-block;
    font-size: 12px;
    width: auto;
    min-width: 50px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.zduserxx span i {
    font-size: 15px;
    position: relative;
    top: 2px;
    left: -1px;
}

.zdudb {
    padding-left: 16px;
    width: 100%;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--qr-border);
}

/* ==================== 10. 资金概览 ==================== */

.funds-item {
    font-size: 24px;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--qr-text-1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.funds-item-header {
    font-size: 13px;
    color: var(--qr-text-3);
    font-weight: 400;
}

.funds-item .funds-num {
    font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.5px;
}

/* ==================== 11. 待办事项 ==================== */

.zddbsx {
    display: flex !important;
    gap: 12px;
}

.zddbsx a {
    flex: 1;
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-m) !important;
    text-align: center;
    padding: 14px 12px;
    color: var(--qr-text-2);
    transition: all 0.15s ease;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zddbsx a:hover {
    background: var(--qr-primary-light);
    border-color: var(--qr-primary);
    color: var(--qr-primary);
    border-radius: var(--qr-radius-m) !important;
    transform: translateY(-1px);
}

.zddbsx a div {
    font-size: 22px;
    font-weight: 500;
    font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
}

.zddbsx a span {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ==================== 12. 安全中心 ==================== */

.security-header {
    border-radius: var(--qr-radius-l) !important;
    background-image: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%) !important;
    border: none;
}

.security-info {
    padding: 0;
    border-radius: var(--qr-radius-s);
    background-color: var(--qr-bg-1);
}

.security-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--qr-bg-2);
}

.security-item:last-child {
    border-bottom: none;
}

.security-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--qr-radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.security-item-title {
    font-size: 15px;
    font-weight: 500;
}

.security-item-title small {
    font-size: 13px;
    font-weight: 400;
}

.security-item-desc {
    font-size: 13px;
    color: var(--qr-text-3);
}

.security-text .progress {
    height: 6px;
    border-radius: 3px !important;
    background-color: var(--qr-bg-2);
}

.security-text .bg-danger {
    background-color: #e6a23c !important;
}

.security-avatar .bg-info {
    background-color: transparent !important;
}

.security-label {
    color: var(--qr-text-3);
    opacity: 1;
}

/* ==================== 13. 产品网格 ==================== */

.user-center_product_grid {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
}

.user-center_product_grid .user-center_product {
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-s);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--qr-text-2);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--qr-bg-1);
    background-image: none !important;
    border: 1px solid var(--qr-border) !important;
    cursor: pointer;
}

.user-center_product_grid .user-center_product:hover {
    background: var(--qr-primary-light);
    border-color: var(--qr-primary) !important;
    color: var(--qr-primary);
    transform: translateY(-1px);
}

.user-center_product_grid .user-center_product i {
    font-size: 16px;
}

.user-center_product_grid .user-center_product span:last-child {
    color: var(--qr-text-3);
    font-size: 12px;
}

/* ==================== 14. 表格系统 ==================== */

.table {
    font-size: 14px;
}

.table thead th {
    font-size: 13px;
    font-weight: 500;
    color: var(--qr-text-3);
    background-color: var(--qr-bg-2);
    border-bottom: 1px solid var(--qr-border);
    padding: 10px 16px;
    white-space: nowrap;
}

.table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--qr-bg-3);
    color: var(--qr-text-2);
    font-size: 14px;
}

.table td, .table thead th, .box_nowrap {
    font-size: 13px;
}

.table tbody tr:hover {
    background-color: var(--qr-primary-light);
    transition: background-color 0.15s ease;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table-bordered {
    border: 1px solid var(--qr-border);
}

.table-bordered td,
.table-bordered th {
    border: 1px solid var(--qr-border);
}

table, td, th {
    border-radius: 0 !important;
}

.table-header {
    padding: 12px 0;
}

.table-footer {
    margin-top: 12px;
    padding: 10px 0;
}

/* ==================== 15. 下拉菜单 ==================== */

a.dropdown-item {
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--qr-text-2);
    transition: all 0.15s ease;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--qr-primary-light);
    color: var(--qr-primary);
    padding-left: 20px;
}

.dropdown-menu {
    background: var(--qr-bg-1) !important;
    background-image: none !important;
    border-radius: var(--qr-radius-m) !important;
    border: 1px solid var(--qr-border);
    box-shadow: var(--qr-shadow-hover) !important;
}

.dropdown.show .header-item {
    color: var(--qr-primary);
}

/* ==================== 16. 搜索框 ==================== */

.qr-search {
    width: 200px !important;
    border-radius: 16px !important;
    height: 32px;
    font-size: 13px;
    background: var(--qr-bg-2);
    color: var(--qr-text-2) !important;
    border: 1px solid transparent;
    padding: 0 28px 0 14px;
    transition: all 0.15s ease;
}

.qr-search:focus {
    background: var(--qr-bg-1) !important;
    border-color: var(--qr-primary) !important;
    color: var(--qr-text-2) !important;
    box-shadow: 0 0 0 2px rgba(0,82,217,0.08) !important;
}

.form-control.qr-search:focus {
    color: var(--qr-text-2) !important;
    background-color: var(--qr-bg-1) !important;
    border-color: var(--qr-primary) !important;
}

.search-box .form-control {
    padding: 0 12px;
    color: var(--qr-primary);
    line-height: 36px;
    border-radius: var(--qr-radius-s) !important;
    height: 36px;
    text-align: left;
}

/* ==================== 17. 公告提醒 ==================== */

.app-expense-alert {
    border-radius: var(--qr-radius-s) !important;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--qr-primary);
    border: 1px solid #d4e4ff;
    background: #f0f5ff !important;
    box-shadow: none !important;
}

/* ==================== 18. 标签/徽章 ==================== */

.badge-light {
    border-radius: 10px !important;
    padding: 3px 10px;
    border: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 400;
    background-image: none !important;
}

.rsb {
    border-radius: 10px !important;
    height: 20px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
}

.novalid {
    min-width: 70px;
    height: 24px;
    line-height: 22px;
    background-color: var(--qr-text-3);
    border-radius: var(--qr-radius-s);
    color: #fff;
    font-size: 12px;
    padding: 0 8px;
    box-shadow: none;
    border: none;
}

/* ==================== 19. 分页 ==================== */

.pagination .page-link {
    border-radius: var(--qr-radius-s) !important;
    margin: 0 3px;
    border: 1px solid var(--qr-border);
    font-size: 13px;
    min-width: 32px;
    text-align: center;
    transition: all 0.15s ease;
    color: var(--qr-text-2);
}

.pagination .page-link:hover {
    background-color: var(--qr-primary-light);
    border-color: var(--qr-primary);
    color: var(--qr-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--qr-primary);
    border-color: var(--qr-primary);
    color: #fff;
}

.pagination-sm .page-link {
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: var(--qr-radius-s);
    border-bottom-left-radius: var(--qr-radius-s);
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: var(--qr-radius-s);
    border-bottom-right-radius: var(--qr-radius-s);
}

#limitSel {
    height: 30px;
}

/* ==================== 20. 返回顶部 ==================== */

.pls-back2top {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    box-shadow: var(--qr-shadow-2) !important;
    border: 1px solid var(--qr-border);
    background: var(--qr-bg-1);
    background-image: none !important;
    transition: all 0.2s ease;
}

.pls-back2top:hover {
    box-shadow: var(--qr-shadow-hover) !important;
    border-color: var(--qr-primary);
    transform: translateY(-2px);
}

/* ==================== 21. 推介返利 ==================== */

._ov-disk-snapshot {
    border-radius: var(--qr-radius-m);
    background-size: cover;
}

._ov-disk-snapshot__inner h5 {
    font-size: 15px;
    font-weight: 500;
}

._ov-disk-snapshot__inner p {
    font-size: 13px;
    color: var(--qr-text-3);
    line-height: 1.6;
}

/* ==================== 22. 安全中心链接网格 ==================== */

.app-overview-col {
    width: 50% !important;
}

._ov-block-item {
    padding: 10px 14px;
    border-radius: var(--qr-radius-s);
    font-size: 14px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._ov-block-item:hover {
    background: var(--qr-primary-light);
}

._ov-block-item__inner:hover {
    color: var(--qr-primary) !important;
}

._ov-block-item i:first-child {
    font-size: 18px;
    margin-right: 8px;
}

._ov-block-item i.app-overview-icon-externallink {
    margin-left: 4px;
    font-size: 12px;
}

/* ==================== 23. Bootstrap Select ==================== */

.bootstrap-select {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 300px !important;
}

/* ==================== 24. 链接 ==================== */

a {
    color: var(--qr-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--qr-primary-hover);
}

.zduserlj a {
    color: var(--qr-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zduserlj i {
    font-size: 16px;
    position: relative;
    padding-right: 6px !important;
}

.zduserlj a.zdcg {
    color: #00b98c !important;
}

/* ==================== 25. 页脚 ==================== */

#footer {
    background-color: var(--qr-bg-2);
    color: var(--qr-text-3);
    font-size: 13px;
    border-top: 1px solid var(--qr-border);
}

#footer a, #footer a:hover {
    color: var(--qr-text-3);
    text-decoration: none;
}

/* ==================== 26. 服务器详情头部 ==================== */

.server_header_box {
    height: auto;
    background-image: none !important;
    background: var(--qr-bg-1) !important;
    border-radius: var(--qr-radius-l) !important;
    padding: 20px 24px;
    color: var(--qr-text-2) !important;
    margin-right: 0;
    margin-left: 0;
    border: 1px solid var(--qr-border);
}

.powerimg {
    width: 44px;
    height: 44px;
    background-color: var(--qr-bg-2);
    border-radius: var(--qr-radius-m);
}

.text-white {
    color: var(--qr-text-2);
}

.text-white-50 {
    color: var(--qr-text-3) !important;
}

.text-danger {
    color: #e54545 !important;
}

/* ==================== 27. 公告时间线 ==================== */

.verti-timeline .event-list {
    padding: 6px 0;
}

.verti-timeline .event-list .event-timeline-dot {
    padding: 0;
}

/* 公告时间与箭头不重叠 */
.verti-timeline .event-list h5 {
    font-size: 13px;
    color: var(--qr-text-3);
    margin-bottom: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.verti-timeline .event-list h5 i {
    margin-left: 6px;
    flex-shrink: 0;
}

.verti-timeline .event-list .flex-grow-1 a {
    font-size: 14px;
    color: var(--qr-text-2);
    line-height: 1.5;
}

.verti-timeline .event-list .flex-grow-1 a:hover {
    color: var(--qr-primary);
}

/* ==================== 28. 产品Banner ==================== */

.products-banner-buttons {
    box-shadow: var(--qr-shadow-1) !important;
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-l) !important;
    background: var(--qr-bg-1);
    background-image: none !important;
}

/* ==================== 29. 服务器详情页 ==================== */
/* 样式已自包含在各模板的<style>块中，此处仅保留全局重置 */

/* 全局：确保dropdown不被截断 */
.main-content {
    overflow: visible !important;
}

/* ==================== 29. 配置列表 ==================== */

.configuration.configuration_list {
    border-bottom: 1px solid var(--qr-bg-3);
    line-height: 30px;
}

.box_left_wrap {
    border-left: 1px solid var(--qr-bg-3) !important;
    min-height: 50px !important;
}

/* ==================== 29.5 防窜位/防窜行 ==================== */
/* 确保文字不换行窜位，动态字段平铺自然 */

.table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.table td.wrap-allowed {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

/* 动态字段容器 - 防止显示一半或空很大 */
.configuration_list .row > [class*="col-"] {
    min-height: 30px;
    display: flex;
    align-items: center;
}

/* 服务器详情字段对齐 */
.configuration_list .col-sm-3,
.configuration_list .col-md-3,
.configuration_list .col-lg-3 {
    padding: 4px 12px;
}

.configuration_list .col-sm-9,
.configuration_list .col-md-9,
.configuration_list .col-lg-9 {
    padding: 4px 12px;
    word-break: break-all;
}

/* 卡片内容防溢出 */
.card-body {
    overflow: hidden;
}

/* 资金区域防窜行 */
.funds-item {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 用户信息防窜位 */
.zduserxx span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 产品网格文字防溢出 */
.user-center_product_grid .user-center_product span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 安全中心项目防窜位 */
.security-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.security-item-info {
    flex: 1;
    min-width: 0;
}

.security-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 待办事项数字防窜位 */
.zddbsx a div {
    line-height: 1.3;
}

/* 页面标题防窜位 - 已在32.6节隐藏，此处仅保留flex-wrap */

/* 表格操作按钮组防窜行 */
.table td .btn-group {
    flex-wrap: nowrap;
}

/* 下拉选择器防溢出 */
.bootstrap-select .dropdown-menu {
    min-width: 100%;
}

/* 表格容器防溢出 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 通用flex容器防溢出 */
.d-flex {
    min-width: 0;
}

/* 服务器状态标签防窜位 */
.server_status_badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ==================== 30. 资金颜色 ==================== */

.card.card_body.mb-3.p-3.bg-danger {
    background-color: #fff2f0 !important;
}

.card.card_body.p-3.bg-warning {
    background-color: #fff7e6 !important;
}

.col-12.col-sm-8.text-white .card.card_body.bg-primary.p-4 {
    background-color: var(--qr-primary-light) !important;
}

.p-5.bg-primary.rounded.text-white.d-flex.flex-column.justify-content-center.align-items-center {
    background-color: var(--qr-bg-1) !important;
}

/* ==================== 31. 表单聚焦 ==================== */

.form-control:focus,
.btn-primary:focus,
.btn-default:focus {
    border-color: var(--qr-primary) !important;
    box-shadow: 0 0 0 2px rgba(0,82,217,0.08) !important;
}

.btn-primary:active {
    color: #fff;
    border-color: #003cab;
    outline: 0;
}

.btn-primary:focus,
.btn-primary:hover {
    color: #fff;
}

.btn-group-toggle .btn-primary {
    background: var(--qr-bg-2) !important;
    color: var(--qr-text-2) !important;
    border: 1px solid var(--qr-border) !important;
}

.btn-group-toggle .btn-primary.active {
    background-color: var(--qr-primary) !important;
    border-color: var(--qr-primary) !important;
    color: #fff !important;
}

/* ==================== 32. 用户中心头部 ==================== */

.user-center_header {
    background-color: var(--qr-primary);
    border: 2px solid rgba(0,82,217,0.1);
}

.user-center_calc {
    height: 280px;
    min-height: 280px;
}

.user-center_notice_item {
    height: 40px;
}

.user-center_notice_item .notice_item_title {
    color: var(--qr-text-2);
}

.user-center_notice_item .notice_item_title:hover {
    color: var(--qr-primary);
}

.user-center_notice ul {
    margin-bottom: 0;
    overflow: hidden;
}

/* ==================== 32.5 财务信息优化 ==================== */

.h100p {
    min-height: 160px;
}

.flex1 {
    flex: 1;
}

.fz-12 {
    font-size: 12px;
}

.fz-14 {
    font-size: 14px;
}

.text-black-50 {
    color: var(--qr-text-3) !important;
}

.text-black-80 {
    color: var(--qr-text-1) !important;
}

#balanceCharts {
    min-height: 140px;
}

/* ==================== 32.6 页面标题隐藏 ==================== */
/* 购物车、账单等页面的标题栏多余，隐藏掉 */

.page-title-box {
    display: none !important;
}

.subtop-menu-breadcrumb {
    display: none !important;
}

.breadcrumb {
    display: none !important;
}

/* ==================== 33. 云NAT特殊处理 ==================== */

#cloud_nat .bg-primary {
    background-color: transparent !important;
}

#cloud_nat .py-2 {
    padding: 0 !important;
}

#cloud_nat .mb-2 {
    margin: 0 !important;
}

#cloud_nat .d-flex {
    display: block !important;
}

#cloud_nat label {
    margin-bottom: 0;
}

/* ==================== 34. 创建按钮 ==================== */

.create {
    height: 36px;
    background-color: var(--qr-primary) !important;
    color: #fff !important;
    border: 1px solid transparent;
    padding: 5px 20px;
    font-size: 14px;
    border-radius: var(--qr-radius-s) !important;
}

.btn-copy {
    height: 36px;
}

/* ==================== 35. 表格头部按钮 ==================== */

.table-header .btn.btn-sm.btn-primary.w-xs {
    line-height: 24px;
    min-width: 80px;
    font-size: 13px;
}

/* ==================== 36. 登录页右侧（已移至login.tpl内联样式） ==================== */

/* ==================== 37. Logo ==================== */

.logo-sm img {
    height: 32px;
    width: auto;
}

.logo-lg img {
    width: 130px;
    height: auto;
}

.navbar-brand-box {
    padding: 0;
}

/* ==================== 38. 移动端适配 ==================== */

@media screen and (max-width: 768px) {
    .zdusertx .user-center_header {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border: 2px solid rgba(0,82,217,0.1);
    }

    .zdusertx {
        width: 18%;
    }

    .zduxx {
        width: 82%;
    }

    .user-center_name {
        font-size: 14px;
        max-width: 55%;
    }

    .zduserxx span {
        font-size: 12px;
    }

    .zduserxx .zdyhz {
        font-size: 11px;
        padding: 1px 8px;
        border-radius: 8px;
        border: none;
    }

    .funds-item {
        font-size: 20px;
        padding: 10px 12px;
    }

    .funds-item-header {
        font-size: 12px;
    }

    .zddbsx {
        gap: 8px;
    }

    .zddbsx a {
        padding: 10px 4px;
        font-size: 12px;
    }

    .zddbsx a div {
        font-size: 18px;
    }

    .zddbsx a span {
        font-size: 11px;
    }

    .user-center_product_grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 8px;
    }

    .app-overview-col {
        width: 50% !important;
    }

    .card-title {
        font-size: 14px;
    }

    .security-item-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 100% !important;
    }

    .table-header .btn.btn-sm.btn-primary.w-xs {
        min-width: 60px;
    }

    .zdudb {
        padding-left: 10px;
        padding-bottom: 14px;
    }

    .vertical-menu,
    .navbar-brand-box {
        width: 230px;
    }

    .mt-5, .my-5 {
        margin-top: 1rem !important;
    }

    .container-fluid {
        padding-right: 6px;
        padding-left: 6px;
    }

    .card {
        margin-bottom: 14px;
    }

    .rsb {
        height: 20px;
        padding: 0 6px;
        border-radius: 10px !important;
        font-size: 11px;
    }

    .zduserlj i {
        font-size: 14px;
        padding-right: 4px !important;
    }

    .zduserlj a {
        font-size: 12px;
    }

    .captcha {
        width: 50%;
    }

    #footer {
        font-size: 11px;
    }

    #footer .widthLimit {
        margin: 0 10px;
    }

    #footer .footer-content {
        margin: 0 6px;
    }

    .item p {
        padding-left: 0;
        font-size: 16px;
        box-shadow: none;
        text-align: center !important;
    }

    .h4, h4 {
        font-size: 1rem;
    }

    /* 公告时间线移动端 */
    .verti-timeline .event-list h5 {
        font-size: 12px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .user-center_product_grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-overview-col {
        width: 50% !important;
    }

    .zdusertx {
        width: 15%;
    }

    .zduxx {
        width: 85%;
    }

    .funds-item {
        font-size: 22px;
        padding: 10px 14px;
    }
}

@media screen and (max-width: 576px) {
    .card-body-info {
        padding: 14px;
    }

    .funds-item {
        font-size: 18px;
        padding: 10px 10px;
    }

    .zdusertx .user-center_header {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-width: 2px;
    }

    .zdusertx {
        width: 20%;
    }

    .zduxx {
        width: 80%;
    }

    .zduserxx span {
        font-size: 12px;
    }

    .user-center_name {
        font-size: 14px;
        max-width: 50%;
    }

    .zduserxx .zdyhz {
        width: auto;
        font-size: 11px;
    }

    .app-overview-col {
        width: 50% !important;
    }

    .user-center_product_grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 8px;
    }

    .zddbsx a div {
        font-size: 18px;
    }

    .card-title {
        font-size: 14px;
    }

    section {
        padding: 0 8px;
    }

    .col-md-8, .col-md-4, .col-xl-8, .col-xl-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .b-1, .b-2 {
        margin-top: 0;
    }
}

/* ===== UI美化增强 ===== */

/* 按钮美化 */
.btn-primary,
.btn-info,
.btn-success {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.btn-info:hover {
    box-shadow: 0 4px 12px rgba(0, 82, 217, 0.25) !important;
    transform: translateY(-1px);
}

/* 卡片美化 */
.card {
    border-radius: 8px !important;
    border: 1px solid #ebedf0 !important;
    transition: box-shadow 0.3s ease !important;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* 表格美化 */
.table th {
    background-color: #f7f8fa !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
}

/* 侧边栏菜单美化 */
.vertical-menu .nav-item a {
    transition: all 0.2s ease !important;
    border-radius: 0 6px 6px 0 !important;
    margin-right: 12px !important;
}
.vertical-menu .nav-item a:hover {
    background-color: #f0f5ff !important;
}
.vertical-menu .nav-item.active a {
    background-color: #e8f0fe !important;
}

/* 顶栏美化 */
#page-topbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* 下拉菜单美化 */
.dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 8px 0 !important;
}

/* 表单输入框美化 */
.form-control {
    border-radius: 6px !important;
    border-color: #dcdfe6 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.form-control:focus {
    border-color: #0052d9 !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.1) !important;
}

/* 弹窗美化 */
.modal-content {
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}