/* 96IDC Theme | Author: 96IDC | QQ: 2386214936 | Site: www.96idc.cn */
/* ==========================================================================
   96IDC 用户中心（控制台）外壳样式  v2.4.2
   --------------------------------------------------------------------------
   v2.4.2 变更：页面标题阶梯收敛；宽表右缘滚动提示；抽屉关闭按钮；
                 窄屏隐藏语言切换；取消右栏移动端前置；表格/表单视觉对齐规范。
   历史变更：顶栏动作区改为圆角 chip（快捷入口 / 图标 / 用户胶囊），
   新增顶栏分隔线；移动端顶栏恢复 Logo 显示；移除页脚版权条与侧栏版权。
   设计规格来源：控制台视觉令牌（主色 / 正文 / 次级 / 边框 / 页面底色）
   作用范围：顶栏 + 左侧导航 + 页脚 + 内页通用组件（卡片 / 表格 / 按钮 /
             徽章 / 分页 / 面包屑 / 表单 / 模态框 / 标签页）
   新增类名前缀：idc-
   注意：本文件为自写实现，未复制任何第三方商业模板源码。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
:root {
  /* 主色系：96IDC 自有品牌蓝（与本站登录页同色），刻意区别于参考站控制台的 TDesign 蓝 */
  --idc-primary: #1267f5;
  --idc-primary-hover: #0b52d6;
  --idc-primary-active: #0a46b8;
  --idc-primary-soft: #e8f1ff;
  --idc-primary-soft-2: #f4f8ff;
  --idc-primary-border: #bcd4fb;

  /* 96IDC 辅助色：青蓝渐变点缀（参考站没有这套配色，用于小节竖条 / 图标 / 进度） */
  --idc-accent: #22c7e8;
  --idc-accent-soft: #e6f9fd;
  --idc-brand-gradient: linear-gradient(180deg, #1267f5 0%, #22c7e8 100%);

  /* 文字 */
  --idc-text: #101828;
  --idc-text-heading: #131c2e;
  --idc-text-secondary: #4a5568;
  --idc-text-placeholder: #9aa4b2;
  --idc-text-muted: #667085;

  /* 线与面 */
  --idc-border: #e6eaf2;
  --idc-border-light: #f1f3f8;
  --idc-page-bg: #f6f8fc;
  --idc-card-bg: #ffffff;
  --idc-input-bg: #f6f8fc;
  --idc-hover-bg: #f4f8ff;

  /* 语义色 */
  --idc-success: #00a870;
  --idc-success-soft: #e3f9f0;
  --idc-warning: #ed7b2f;
  --idc-warning-soft: #fff1e9;
  --idc-danger: #e34d59;
  --idc-danger-soft: #ffeded;
  --idc-info: #1267f5;

  /* 几何：比参考站更圆一点（参考站以 2px 直角为主） */
  --idc-radius: 6px;
  --idc-radius-sm: 4px;
  --idc-radius-md: 10px;
  --idc-radius-lg: 14px;
  --idc-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --idc-shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 26px rgba(18, 103, 245, .05);
  --idc-shadow-hover: 0 6px 16px rgba(18, 103, 245, .10), 0 16px 40px rgba(16, 24, 40, .06);
  --idc-shadow-menu: 0 10px 30px rgba(16, 24, 40, .12);

  /* 骨架尺寸（与 app.min.css 既有布局保持一致，避免错位） */
  --idc-topbar-h: 60px;
  --idc-sidebar-w: 188px;   /* 250px 的 3/4 */
  --idc-cols-side-w: 450px;  /* 控制台首页右栏宽度（原 400px，调大则左栏变窄） */
  --idc-sidebar-collapsed-w: 70px;
}

/* 把主色同步进魔方既有的 bootstrap 变量体系，
   使 .btn-primary / .text-primary / .bg-primary / .badge-primary 等一并换色 */
:root {
  --bs-global: #1267f5;
  --bs-global-1: #e8f1ff;
  --bs-global-2: #f4f8ff;
  --bs-global-3: #bcd4fb;
  --bs-global-o-1: rgba(18, 103, 245, .1);
  --bs-global-o-2: rgba(18, 103, 245, .2);
  --bs-global-o-3: rgba(18, 103, 245, .3);
  --bs-global-o-4: rgba(18, 103, 245, .4);
  --bs-global-o-5: rgba(18, 103, 245, .5);
  --bs-global-o-0: rgba(18, 103, 245, 0);
  --bs-btn-bg: #1267f5;
  --bs-btn-border-color: #1267f5;
  --bs-btn-hover-bg: #0b52d6;
  --bs-btn-hover-border-color: #0b52d6;
  --bs-btn-focus-shadow-rgb: 18, 103, 245;
  --bs-btn-active-bg: #0a4fc4;
  --bs-btn-active-border-color: #0a4fc4;
  --bs-btn-disabled-bg: #1267f5;
  --bs-btn-disabled-border-color: #1267f5;
  --bs-btn-border-radius: 4px;
  --bs-btn-font-weight: 500;
  --primary: #1267f5;
  --blue: #1267f5;
}

/* ==========================================================================
   2. 基础排版
   ========================================================================== */
body {
  background-color: var(--idc-page-bg) !important;
  color: var(--idc-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--idc-text);
}

a {
  color: var(--idc-primary);
  text-decoration: none;
  transition: color .16s ease;
}

a:hover,
a:focus {
  color: var(--idc-primary-hover);
  text-decoration: none;
}

.text-muted,
.text-black-50 {
  color: var(--idc-text-muted) !important;
}

.text-dark {
  color: var(--idc-text) !important;
}

.text-primary {
  color: var(--idc-primary) !important;
}

.bg-primary {
  background-color: var(--idc-primary) !important;
}

::selection {
  background: rgba(18, 103, 245, .16);
}

/* 细滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: #d5dae1;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #c2c9d2;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   3. 骨架布局
   ========================================================================== */
#page-topbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--idc-border-light);
  box-shadow: none !important;
  z-index: 1002;
}

.navbar-header {
  height: var(--idc-topbar-h) !important;
  padding: 0 16px !important;
}

.navbar-brand-box {
  width: var(--idc-sidebar-w) !important;
  height: var(--idc-topbar-h) !important;
  padding: 0 !important;
  background: #fff !important;
  border-right: 1px solid var(--idc-border-light);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/*
 * 顶栏 Logo 可见性修复
 * app.min.css 用 .logo-light{display:none} 隐藏浅色版 Logo，但本文件的
 * .logo{display:inline-flex} 与之优先级相同且加载更靠后，会把浅色版也显示出来，
 * 于是顶栏出现两个 Logo。这里显式定死可见性（并保留深色皮肤时的回退）。
 */
.navbar-brand-box .logo-light,
.logo.logo-light {
  display: none !important;
}

body[data-sidebar="dark"] .navbar-brand-box .logo-light,
body[data-topbar="dark"] .navbar-brand-box .logo-light {
  display: block !important;
}

body[data-sidebar="dark"] .navbar-brand-box .logo-dark,
body[data-topbar="dark"] .navbar-brand-box .logo-dark {
  display: none !important;
}

/* 展开态只显示大 Logo，折叠态只显示小 Logo */
.navbar-brand-box .logo .logo-sm {
  display: none !important;
}

.vertical-collpsed .navbar-brand-box .logo .logo-sm {
  display: block !important;
}

.vertical-collpsed .navbar-brand-box .logo .logo-lg {
  display: none !important;
}

/*
 * 左侧导航默认收起（防止首屏“闪现”）
 * assets/js/app.js 会按当前 URL 给父级菜单同步加 mm-show，导致首屏子菜单全部展开。
 * 在 96idc-console.js 完成收起、打上 html.idc-menu-ready 之前，先用 CSS 全部隐藏。
 */
html:not(.idc-menu-ready) #side-menu .sub-menu,
html:not(.idc-menu-ready) #side-menu .mm-collapse {
  display: none !important;
}

.logo-lg img,
.logo-sm img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

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

.vertical-menu {
  top: var(--idc-topbar-h) !important;
  width: var(--idc-sidebar-w) !important;
  background: #fff !important;
  border-right: 1px solid var(--idc-border-light);
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.vertical-menu > .h-100,
.vertical-menu [data-simplebar] {
  flex: 1 1 auto;
  min-height: 0;
}

.main-content {
  margin-left: var(--idc-sidebar-w) !important;
  background: var(--idc-page-bg) !important;
  overflow: visible;
}

.page-content {
  padding: calc(var(--idc-topbar-h) + 20px) 20px 40px 20px !important;
}

.main-content .content {
  margin-top: var(--idc-topbar-h) !important;
}

/* 折叠态 */
.vertical-collpsed .main-content {
  margin-left: var(--idc-sidebar-collapsed-w) !important;
}

.vertical-collpsed .navbar-brand-box {
  width: var(--idc-sidebar-collapsed-w) !important;
}

.vertical-collpsed .vertical-menu {
  width: var(--idc-sidebar-collapsed-w) !important;
  top: var(--idc-topbar-h) !important;
}

.vertical-collpsed .idc-sidebar-copyright {
  display: none;
}

/* 粘性表头跟随顶栏高度 */
.table-rep-plugin .fixed-solution .sticky-table-header {
  top: var(--idc-topbar-h) !important;
}

/* ==========================================================================
   4. 顶栏
   ========================================================================== */
#vertical-menu-btn {
  height: var(--idc-topbar-h) !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--idc-text-secondary) !important;
  font-size: 19px !important;
  box-shadow: none !important;
  transition: background-color .16s ease, color .16s ease;
}

#vertical-menu-btn:hover,
#vertical-menu-btn:focus,
#vertical-menu-btn:active {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
  outline: none;
}

.header-item {
  position: relative;
  height: 36px !important;
  margin: 0 2px;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f4f6f9 !important;
  color: var(--idc-text-secondary) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s ease, color .16s ease;
}

.header-item:hover,
.header-item.show,
.header-item:focus {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
}

.header-item:hover,
.header-item:focus,
.header-item:active,
.header-item.show,
.show > .header-item {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
  outline: none;
  box-shadow: none !important;
}

.header-item > a {
  color: inherit !important;
  display: inline-flex;
  align-items: center;
}

.noti-icon i {
  color: inherit !important;
  font-size: 20px;
  line-height: 1;
  margin-top: 0 !important;
}

.noti-icon:hover i {
  color: inherit !important;
}

/* 顶栏右侧快捷入口（控制台 / 购买产品） */
.idc-header-shortcuts {
  height: var(--idc-topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.idc-header-shortcut {
  height: 34px;
  margin: 0 3px;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f4f6f9 !important;
  color: var(--idc-text-secondary) !important;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color .16s ease, color .16s ease;
}

.idc-header-shortcut:hover,
.idc-header-shortcut:focus {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
}

.idc-header-shortcut i {
  margin-right: 5px;
  font-size: 16px;
  color: var(--idc-text-muted) !important;
}

.idc-header-shortcut:hover,
.idc-header-shortcut:focus,
.idc-header-shortcut:active {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
  outline: none;
}

.idc-header-shortcut:hover i,
.idc-header-shortcut:focus i {
  color: var(--idc-primary) !important;
}

/* 消息角标（跟随 36px 圆角 chip 定位） */
.header-item .badge-pill {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--idc-danger) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

/* 用户区：尺寸与外观统一由第 44 节首字头像接管 */
.user-center_header {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  border: 0 !important;
}

.user-center_header img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 用户区胶囊：头像 + 用户名 + 箭头，带描边，与图标 chip 区分开 */
.dropdown .btn.header-item.d-inline-flex.align-items-center {
  height: 38px !important;
  margin: 0 2px 0 6px;
  padding: 0 10px 0 6px !important;
  border: 1px solid var(--idc-border-light) !important;
  border-radius: 999px !important;
  background: #fff !important;
  transition: background-color .16s ease, border-color .16s ease;
}

.dropdown .btn.header-item.d-inline-flex.align-items-center:hover,
.dropdown .btn.header-item.d-inline-flex.align-items-center.show {
  border-color: var(--idc-primary) !important;
  background: #fff !important;
}

/* 顶栏分隔线：图标动作区 / 用户区 */
.idc-topbar-divider {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 8px;
  background: #e7ebf2;
}

/* ⚠️ 这个 .pointer 是给顶栏图标按钮用的（header.tpl 里 <div class="pointer">）。
   但魔方财务的「可排序表头」约定是 <th class="pointer">，如果不限定作用域，
   会把全站所有列表页的表头撑成 60px 的 inline-flex 盒子并折行错位。
   因此这里必须锁死在顶栏内。 */
#page-topbar .pointer {
  height: 34px;
  margin: 0 2px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  color: var(--idc-text-secondary);
  transition: background-color .16s ease, color .16s ease;
}

#page-topbar .pointer:hover {
  background: var(--idc-hover-bg) !important;
  color: var(--idc-primary) !important;
}

/* 表格里的排序表头 th.pointer 保持正常单元格形态 */
.main-content table th.pointer,
.main-content table td.pointer {
  display: table-cell !important;
  height: auto !important;
  padding: 12px 16px !important;
  white-space: nowrap;
}

/* 下拉面板 */
.dropdown-menu {
  min-width: 8rem;
  padding: 6px !important;
  margin-top: 2px !important;
  border: 1px solid var(--idc-border) !important;
  border-radius: var(--idc-radius) !important;
  box-shadow: var(--idc-shadow-menu) !important;
}

.dropdown-item {
  padding: 8px 10px !important;
  border-radius: var(--idc-radius-sm);
  color: var(--idc-text-secondary);
  font-size: 13px;
  line-height: 22px;
  display: flex;
  align-items: center;
  transition: background-color .14s ease, color .14s ease;
}

.dropdown-item i {
  color: var(--idc-text-muted);
  transition: color .14s ease;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  background-color: var(--idc-primary-soft) !important;
  color: var(--idc-primary) !important;
  outline: none;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
  color: var(--idc-primary);
}

.dropdown-item.text-danger,
.dropdown-item.text-danger i {
  color: var(--idc-danger) !important;
}

.dropdown-item.text-danger:hover {
  background-color: rgba(229, 72, 77, .08) !important;
  color: var(--idc-danger) !important;
}

.dropdown-menu .notify-item img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  margin-right: 6px;
}

/* ==========================================================================
   5. 左侧导航
   ========================================================================== */
#sidebar-menu {
  /* 顶部不留白：首个菜单项从 header 下沿开始（.vertical-menu 的 top 已对齐 topbar 高度） */
  padding: 0 0 16px 0;
}

#side-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar-menu ul li a {
  display: block;
  position: relative;
  padding: 10px 18px 10px 20px !important;
  color: var(--idc-text) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-radius: 0;
  transition: background-color .16s ease, color .16s ease;
}

#sidebar-menu ul li a i {
  display: inline-block;
  min-width: 1.35rem;
  margin-right: 2px;
  color: var(--idc-text-muted) !important;
  font-size: 1.1rem;
  vertical-align: middle;
  transition: color .16s ease;
}

#sidebar-menu ul li a span {
  vertical-align: middle;
}

#sidebar-menu ul li a:hover {
  color: var(--idc-primary) !important;
  background-color: var(--idc-primary-soft-2) !important;
}

#sidebar-menu ul li a:hover i {
  color: var(--idc-primary) !important;
}

/* 父级箭头（沿用图标字体，仅调整位置与颜色） */
#sidebar-menu .has-arrow::after {
  margin-top: 4px;
  color: var(--idc-text-placeholder);
  font-size: .95rem;
}

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

/* 二级 / 三级 */
#sidebar-menu ul li ul.sub-menu {
  padding: 2px 0 6px 0;
  background: #fbfcfd !important;
  border-left: 0;
}

#sidebar-menu ul li ul.sub-menu li a {
  padding: 8px 18px 8px 34px !important;
  color: var(--idc-text-secondary) !important;
  font-size: 13px;
}

#sidebar-menu ul li ul.sub-menu li a i {
  min-width: 1.1rem;
  font-size: .95rem;
}

#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
  padding-left: 50px !important;
  font-size: 13px;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
  color: var(--idc-primary) !important;
  background-color: var(--idc-primary-soft-2) !important;
}

/* 当前项：96IDC 自己的处理 —— 浅色底 + 左侧蓝青渐变条 + 主色文字
   （参考站是整行实心蓝色块，这里刻意做得不一样） */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li.idc-has-current > a {
  color: var(--idc-primary) !important;
  background-color: var(--idc-primary-soft) !important;
  font-weight: 600;
}

#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li.idc-has-current > a i {
  color: var(--idc-primary) !important;
}

#sidebar-menu ul li > a.active::before,
#sidebar-menu ul li.idc-has-current > a::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--idc-brand-gradient);
}

/* 分组标题（可展开的父级）：深色加粗，作为分区标题使用 */
#sidebar-menu ul li > a.has-arrow {
  color: var(--idc-text-heading) !important;
  font-weight: 600;
}

/* 子菜单内的当前项 */
#sidebar-menu ul li ul.sub-menu li a.active {
  color: var(--idc-primary) !important;
  background-color: var(--idc-primary-soft) !important;
  font-weight: 600;
}

#sidebar-menu ul li ul.sub-menu li a.active i {
  color: var(--idc-primary) !important;
}

/* 侧边栏底部版权 */
.idc-sidebar-copyright {
  flex: 0 0 auto;
  padding: 10px 14px 13px;
  border-top: 1px solid var(--idc-border-light);
  color: var(--idc-text-placeholder);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  background: #fff;
}

.idc-sidebar-copyright a {
  color: var(--idc-text-secondary);
}

.idc-sidebar-copyright a:hover {
  color: var(--idc-primary);
}

.idc-sidebar-copyright .idc-copyright-sep {
  margin: 0 4px;
  color: var(--idc-border);
}

/* 移动端抽屉遮罩（默认不出现在布局中） */
.idc-sidebar-mask {
  position: fixed;
  top: var(--idc-topbar-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  border: 0;
  padding: 0;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.idc-sidebar-mask:focus {
  outline: none;
}

.idc-sidebar-mask.idc-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   6. 页面标题 / 面包屑
   ========================================================================== */
.page-title-box {
  position: relative;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}

/* 通用页头条：白底卡片，与 .idc-pagehead 视觉统一（参考站控制台内页形态） */
.page-title-wrapper {
  padding: 14px 20px;
  margin-bottom: 20px;
  background: var(--idc-card-bg);
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius-md);
  box-shadow: var(--idc-shadow-card);
}

.page-title-wrapper .page-title-box {
  margin-bottom: 0 !important;
}

.page-title-box h4,
.page-title {
  margin: 0 !important;
  color: var(--idc-text-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none !important;
  line-height: 1.4;
}

.page-title-box .backBtn i {
  color: var(--idc-text-secondary) !important;
  font-size: 26px !important;
  transition: color .16s ease;
}

.page-title-box .backBtn:hover i {
  color: var(--idc-primary) !important;
}

.page-title-right {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--idc-text-muted) !important;
}

.breadcrumb-item a {
  color: var(--idc-text-muted) !important;
}

.breadcrumb-item a:hover {
  color: var(--idc-primary) !important;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 12px;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding-right: 12px;
  color: #c8cdd5;
}

.breadcrumb-item.active {
  color: var(--idc-text) !important;
  font-weight: 500;
}

/* ==========================================================================
   7. 卡片
   ========================================================================== */
.card {
  background-color: var(--idc-card-bg);
  border: 1px solid var(--idc-border) !important;
  border-radius: var(--idc-radius) !important;
  box-shadow: none !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
  border-color: #d3d9e0 !important;
  box-shadow: var(--idc-shadow) !important;
}

.card-body {
  padding: 20px !important;
}

.card-header {
  padding: 14px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--idc-border-light) !important;
  border-radius: var(--idc-radius) var(--idc-radius) 0 0 !important;
  font-weight: 600;
}

.card-footer {
  padding: 14px 20px !important;
  background: #fbfcfd !important;
  border-top: 1px solid var(--idc-border-light) !important;
}

/* 设计规格中的标题形态：主色文字 + 短下划线 */
.card .card-title,
.card > h4.card-title,
.card > h5.card-title {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 18px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--idc-border-light);
  color: var(--idc-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5;
}

.card .card-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--idc-primary);
}

.card .card-title.mt-0 {
  margin-top: 0 !important;
}

/* ==========================================================================
   8. 表格
   ========================================================================== */
.table-container {
  position: relative;
}

.table-responsive {
  background: #fff;
  border-radius: var(--idc-radius);
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* v2.4.2：真正溢出的宽表才显示右缘滚动阴影（滑到末端自动消失） */
.main-content .table-responsive.idc-table-scrollable,
.idc-table-scrollable {
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .14), rgba(16, 24, 40, 0)) !important;
  background-position: 0 0, 100% 0, 0 0, 100% 0 !important;
  background-repeat: no-repeat !important;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
  background-attachment: local, local, scroll, scroll !important;
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #d5dae1;
  border-radius: 100px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

/* v2.4.2：表格内超长域名/订单号不撑破列宽 */
.main-content .table td,
.main-content .table th {
  overflow-wrap: break-word;
}

.table-responsive .table {
  margin-bottom: 0;
}

.table {
  color: var(--idc-text);
  font-size: 13px;
  border-color: var(--idc-border-light);
}

.table th,
.table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-top: 0;
}

.table thead th {
  background: #fafbfc !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--idc-border) !important;
  color: var(--idc-text-secondary) !important;
  font-size: 13px;
  font-weight: 600 !important;
  white-space: nowrap;
}

.table tbody tr {
  border-bottom: 1px solid var(--idc-border-light);
}

.table tbody tr:last-child {
  border-bottom: 0;
}

.table tbody td {
  border-top: 0;
}

.table tbody tr:hover td,
.table-responsive tbody tr:hover td {
  background-color: var(--idc-hover-bg) !important;
}

.table .form-control,
.table .custom-select {
  height: 32px;
  min-width: 90px;
}

.table a {
  color: var(--idc-primary);
}

.table a.text-dark {
  color: var(--idc-text) !important;
}

.table a.text-dark:hover {
  color: var(--idc-primary) !important;
}

.table-sm th,
.table-sm td {
  padding: 8px 10px !important;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  color: var(--idc-text-placeholder);
  font-size: 13px;
}

/* 表头排序箭头 */
.table thead th .text-black-50 {
  color: var(--idc-text-placeholder) !important;
}

/* 表格工具区 / 分页区 */
.table-header,
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  background: #fff;
}

.table-header {
  border-bottom: 1px solid var(--idc-border-light);
}

.table-footer {
  border-top: 1px solid var(--idc-border-light);
}

.table-tools,
.table-filter,
.table-search,
.table-pageinfo,
.table-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.table-pageinfo {
  color: var(--idc-text-secondary);
  font-size: 13px;
}

.table-pagination .pagination {
  margin-bottom: 0;
}

/* 固定表头插件（bootstrap-table）分页 */
.fixed-table-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px;
  padding: 12px 16px !important;
  border-top: 1px solid var(--idc-border-light);
}

.fixed-table-pagination .pull-left,
.fixed-table-pagination .pull-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

.fixed-table-pagination .pagination-info {
  color: var(--idc-text-secondary) !important;
  font-size: 13px !important;
}

.fixed-table-pagination .page-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}

.search-box {
  position: relative;
}

.search-box .search-icon,
.search-icon {
  color: var(--idc-text-placeholder);
}

/* —— 全局修掉两个来自基础皮肤的问题（所有内页通用，不要只在单页覆盖） ——
   1) assets_custom/css/global.css 给 .table-responsive 设了
      min-height: calc(100vh - 650px)，短表格的卡片会被撑出几百像素空白；
   2) 表头常用 <thead class="bg-light">，而基础皮肤把 bootstrap 的 --light
      映射成了主色浅蓝（#e3ecff），表头单元格没铺满时会漏出一条蓝色方块。 */
.main-content .table-responsive {
  min-height: 0 !important;
  margin-bottom: 0;
}

.main-content .table thead.bg-light,
.main-content .table thead.bg-light > tr > th,
.main-content .table thead > tr > th {
  background-color: #fafbfc !important;
}

.main-content .table thead > tr > th {
  border-bottom: 1px solid var(--idc-border) !important;
}

/* ==========================================================================
   9. 分页
   ========================================================================== */
.pagination {
  flex-wrap: wrap;
  gap: 4px;
}

.page-link {
  min-width: 32px;
  height: 32px;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 1px solid var(--idc-border) !important;
  border-radius: var(--idc-radius) !important;
  background: #fff !important;
  color: var(--idc-text-secondary) !important;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  transition: all .16s ease;
}

.page-link:hover {
  border-color: var(--idc-primary) !important;
  background: var(--idc-primary-soft) !important;
  color: var(--idc-primary) !important;
}

.page-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 103, 245, 0.14) !important;
}

.page-item.active .page-link {
  background: var(--idc-primary) !important;
  border-color: var(--idc-primary) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background: #fafbfc !important;
  border-color: var(--idc-border-light) !important;
  color: var(--idc-text-placeholder) !important;
}

.pagination-sm .page-link {
  min-width: 30px;
  height: 30px;
  line-height: 28px;
  font-size: 12px;
}

/* ==========================================================================
   10. 按钮
   ========================================================================== */
.btn {
  border-radius: var(--idc-radius) !important;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 3px rgba(18, 103, 245, .14) !important;
}

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

.btn-primary:hover,
.btn-primary:focus,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--idc-primary-hover) !important;
  border-color: var(--idc-primary-hover) !important;
  color: #fff !important;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--idc-primary-active) !important;
  border-color: var(--idc-primary-active) !important;
  color: #fff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #a9c5f9 !important;
  border-color: #a9c5f9 !important;
}

.btn-outline-primary {
  border-color: var(--idc-primary) !important;
  color: var(--idc-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--idc-primary) !important;
  border-color: var(--idc-primary) !important;
  color: #fff !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background: var(--idc-primary-active) !important;
  border-color: var(--idc-primary-active) !important;
  color: #fff !important;
}

.btn-secondary {
  background-color: #f5f6f7 !important;
  border-color: var(--idc-border) !important;
  color: var(--idc-text-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active {
  background-color: #eceef1 !important;
  border-color: #cfd5dd !important;
  color: var(--idc-text) !important;
}

.btn-outline-light {
  background-color: #fff !important;
  border-color: var(--idc-border) !important;
  color: var(--idc-text-secondary) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light.active {
  background-color: var(--idc-hover-bg) !important;
  border-color: var(--idc-primary-border) !important;
  color: var(--idc-primary) !important;
}

.btn-light {
  background-color: #f5f6f7 !important;
  border-color: var(--idc-border) !important;
  color: var(--idc-text-secondary) !important;
}

.btn-sm {
  padding: .28rem .7rem;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn-group-toggle > .btn {
  margin-bottom: 0 !important;
}

.btn-link {
  color: var(--idc-primary);
}

.btn-link:hover {
  color: var(--idc-primary-hover);
}

/* ==========================================================================
   11. 表单
   ========================================================================== */
.form-control {
  min-height: 36px;
  padding: .42rem .75rem;
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
  background-color: #fff;
  color: var(--idc-text);
  font-size: 13px;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control::placeholder {
  color: var(--idc-text-placeholder);
}

.form-control:focus {
  border-color: var(--idc-primary) !important;
  box-shadow: 0 0 0 3px rgba(18, 103, 245, 0.14) !important;
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #fafbfc;
  color: var(--idc-text-muted);
}

select.form-control,
.custom-select {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
  color: var(--idc-text);
  font-size: 13px;
}

select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius-sm);
  background-color: #fff;
  color: var(--idc-text);
  font-size: 13px;
}

select:focus {
  border-color: var(--idc-primary);
  outline: none;
}

.col-form-label,
.control-label,
.form-control-label {
  color: var(--idc-text-secondary);
  font-size: 13px;
  font-weight: 400;
}

.input-group-append {
  height: auto;
}

.input-group-text {
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
  background: #f8f9fb;
  color: var(--idc-text-secondary);
  font-size: 13px;
}

.custom-control-label::before {
  border-color: var(--idc-border);
  background-color: #fff;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--idc-primary);
  background-color: var(--idc-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(18, 103, 245, .14);
}

.redStar,
.red-star {
  color: var(--idc-danger);
}

/* ==========================================================================
   12. 徽章 / 状态
   ========================================================================== */
.badge {
  padding: 3px 8px;
  border-radius: var(--idc-radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.badge-pill {
  border-radius: 999px;
  padding: 3px 8px;
}

.badge-primary,
.badge-soft-primary {
  background-color: var(--idc-primary-soft) !important;
  color: var(--idc-primary) !important;
}

.badge-success,
.badge-soft-success {
  background-color: rgba(22, 163, 74, .1) !important;
  color: var(--idc-success) !important;
}

.badge-warning,
.badge-soft-warning {
  background-color: rgba(240, 160, 32, .12) !important;
  color: var(--idc-warning) !important;
}

.badge-danger,
.badge-soft-danger {
  background-color: rgba(229, 72, 77, .1) !important;
  color: var(--idc-danger) !important;
}

.badge-info,
.badge-soft-info {
  background-color: rgba(47, 112, 246, .1) !important;
  color: var(--idc-info) !important;
}

.badge-light {
  background-color: #f2f4f7 !important;
  color: var(--idc-text-secondary) !important;
}

/* 魔方状态标签 */
.status,
.status-suspended,
.status-unpaid,
.status-pending,
.status-deleted,
.status-active,
.status-paid,
.status-refunded,
.status-cancelled,
.status-success,
.status-verifiy_active,
.status-overdue_active,
.status-issue_active {
  display: inline-block;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--idc-radius-sm);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
}

.status-active,
.status-paid,
.status-success,
.status-issue_active {
  background-color: var(--idc-success);
}

.status-unpaid,
.status-pending,
.status-verifiy_active {
  background-color: var(--idc-warning);
}

.status-suspended {
  background-color: var(--idc-danger);
}

.status-deleted {
  background-color: #5f6877;
}

.status-refunded,
.status-cancelled {
  background-color: #98a1ad;
}

/* 圆点状态 */
.user-center_dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

/* ==========================================================================
   13. 导航标签 / 其它组件
   ========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--idc-border-light);
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  padding: 10px 16px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--idc-text-secondary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: color .16s ease, border-color .16s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--idc-primary) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--idc-primary) !important;
  border-bottom-color: var(--idc-primary) !important;
  background: transparent !important;
}

.nav-pills .nav-link {
  border-radius: var(--idc-radius);
  color: var(--idc-text-secondary);
}

.nav-pills .nav-link.active {
  background-color: var(--idc-primary);
  color: #fff;
}

.modal-content {
  border: 0;
  border-radius: var(--idc-radius-lg);
  box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--idc-border-light);
}

.modal-title {
  color: var(--idc-text);
  font-size: 15px;
  font-weight: 600;
}

.modal-body {
  padding: 20px;
  color: var(--idc-text);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--idc-border-light);
}

.close {
  color: var(--idc-text-muted);
  text-shadow: none;
  opacity: .8;
}

.close:hover {
  color: var(--idc-text);
  opacity: 1;
}

.alert {
  padding: 12px 16px;
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
  background: #fff;
  color: var(--idc-text);
  font-size: 13px;
}

.alert-primary {
  border-color: var(--idc-primary-border);
  background: var(--idc-primary-soft);
  color: #0b3f9e;
}

.alert-success {
  border-color: rgba(22, 163, 74, .3);
  background: rgba(22, 163, 74, .07);
  color: #12683a;
}

.alert-warning {
  border-color: rgba(240, 160, 32, .32);
  background: rgba(240, 160, 32, .08);
  color: #8a5a05;
}

.alert-danger {
  border-color: rgba(229, 72, 77, .3);
  background: rgba(229, 72, 77, .07);
  color: #9b2c2f;
}

.progress {
  height: 6px;
  border-radius: 6px;
  background-color: #eef0f3;
}

.progress-bar {
  border-radius: 6px;
  background-color: var(--idc-primary);
}

.list-group-item {
  border-color: var(--idc-border-light);
  color: var(--idc-text);
}

.list-group-item.active {
  background-color: var(--idc-primary);
  border-color: var(--idc-primary);
}

hr {
  border-top-color: var(--idc-border-light);
}

.ticket-item,
.addfunds-payment,
.type-item {
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.ticket-item:hover,
.addfunds-payment:hover,
.type-item:hover {
  border-color: var(--idc-primary-border);
  box-shadow: var(--idc-shadow);
}

.addfunds-payment.active {
  border-color: var(--idc-primary);
  box-shadow: 0 0 0 3px rgba(18, 103, 245, .1);
}

/* 安全中心卡片沿用统一色板 */
.security-header,
.security-info {
  background-color: var(--idc-primary) !important;
  background-image: linear-gradient(120deg, #1267f5 0%, #0a4fc4 100%);
  border-radius: var(--idc-radius-lg);
}

.security-item-icon {
  background-color: var(--idc-primary-soft);
  color: var(--idc-primary);
}

.security-item-title small i {
  color: var(--idc-success);
}

/* 首页统计块 */
.idc-num {
  color: var(--idc-text);
  font-family: DINCondensed-Bold, -apple-system, BlinkMacSystemFont, sans-serif;
}

.idc-num small {
  color: var(--idc-text-muted);
}

/* 兼容首页旧版统计卡片（沿用其结构，只换皮） */
.ststus-box .card,
.ststus-box .card-body {
  border-radius: var(--idc-radius) !important;
}

/* 折叠按钮 / 主题按钮的焦点样式 */
#vertical-menu-btn:focus,
.idc-header-shortcut:focus,
.header-item:focus {
  outline: none;
}

/* ==========================================================================
   14. 页脚
   ========================================================================== */
.footer {
  left: var(--idc-sidebar-w);
  height: auto;
  min-height: 56px;
  padding: 14px 20px;
  border-top: 1px solid var(--idc-border-light);
  background-color: #fff;
  color: var(--idc-text-muted);
  font-size: 12px;
}

.footer .container-fluid {
  padding: 0 !important;
}

.footer .container-fluid .row,
.footer .container-fluid .row div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footer .container-fluid .row {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.footer,
.footer a {
  color: var(--idc-text-muted);
}

.footer a:hover {
  color: var(--idc-primary);
}

.footer .idc-footer-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  line-height: 1.8;
}

.footer .idc-footer-author .idc-footer-sep {
  color: #dfe3e8;
}

.footer .idc-footer-author strong {
  color: var(--idc-text-secondary);
  font-weight: 600;
}

.vertical-collpsed .footer {
  left: var(--idc-sidebar-collapsed-w);
}

/* ==========================================================================
   15. 响应式
   ========================================================================== */

/* —— 桌面：固定侧边栏（>= 1200px 保持 250px，不做压缩） —— */
@media (min-width: 1200px) {
  .vertical-menu {
    width: var(--idc-sidebar-w) !important;
  }

  .main-content {
    margin-left: var(--idc-sidebar-w) !important;
  }

  .navbar-brand-box {
    width: var(--idc-sidebar-w) !important;
  }

  .footer {
    left: var(--idc-sidebar-w);
  }
}

/* —— 平板 / 手机：侧边栏收成抽屉（<= 991.98px） —— */
@media (max-width: 991.98px) {
  #page-topbar {
    z-index: 1050;
  }

  .vertical-menu {
    position: fixed !important;
    top: var(--idc-topbar-h) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1040 !important;
    width: min(60vw, 201px) !important;
    max-width: 201px;
    height: calc(100vh - var(--idc-topbar-h)) !important;
    height: calc(100dvh - var(--idc-topbar-h)) !important;
    margin: 0 !important;
    border-right: 0;
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s ease, opacity .2s ease, visibility .24s ease;
    box-shadow: 8px 0 28px rgba(16, 24, 40, .14);
    will-change: transform;
  }

  /* 覆盖 app.min.css 的 display:none / body.sidebar-enable 开关，
     统一由本文件的 transform 抽屉机制接管 */
  .vertical-menu,
  body.sidebar-enable .vertical-menu {
    display: flex !important;
  }

  body.sidebar-enable .vertical-menu {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.sidebar-enable {
    overflow: hidden;
  }

  body.sidebar-enable .idc-sidebar-mask {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .vertical-menu > .h-100,
  .vertical-menu [data-simplebar] {
    height: 100% !important;
    overflow-y: auto;
  }

  .main-content,
  .vertical-collpsed .main-content {
    margin-left: 0 !important;
  }

  .navbar-brand-box {
    width: auto !important;
    min-width: 0;
    max-width: 60vw;
    padding: 0 12px !important;
    border-right: 0;
  }

  .navbar-brand-box .logo img {
    max-height: 34px;
  }

  /* 移动端顶栏恢复 Logo：
     app.min.css 在 ≤992px 隐藏 .logo-lg，基础层又只放行折叠态的 .logo-sm，
     两者叠加导致移动端顶栏只剩汉堡按钮。这里显式放行 logo-sm。 */
  .navbar-brand-box .logo .logo-sm {
    display: inline-flex !important;
  }

  .navbar-brand-box .logo .logo-sm img {
    max-height: 30px;
    width: auto;
  }

  .logo-lg img {
    width: auto;
    max-width: 150px;
  }

  .page-content {
    padding: calc(var(--idc-topbar-h) + 16px) 14px 32px 14px !important;
  }

  .page-title-box {
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-title-right {
    margin-left: 0;
  }

  .footer,
  .vertical-collpsed .footer {
    left: 0;
    padding: 12px 14px;
  }

  .footer .container-fluid .row,
  .footer .container-fluid .row div {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .idc-header-shortcuts {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .page-title-right {
    display: none;
  }

  .card-body {
    padding: 14px !important;
  }

  .table th,
  .table td {
    padding: 10px 10px !important;
  }

  .table-header,
  .table-footer {
    padding: 10px 12px;
  }
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .vertical-menu,
  .idc-sidebar-mask,
  .card,
  .dropdown-item,
  #sidebar-menu ul li a,
  .btn {
    transition: none !important;
  }
}

/* ==========================================================================
   16. 页面组件层（蓝白科技风 · 对齐参考站控制台）
   各内页统一使用以下 idc- 组件拼装，避免每页各写一套
   ========================================================================== */

/* —— 16.1 两栏页面骨架 —— */
.idc-cols {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.idc-cols__main {
  flex: 1 1 auto;
  min-width: 0;
}

.idc-cols__side {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--idc-cols-side-w);
  width: var(--idc-cols-side-w);
  min-width: 0;
}



@media (max-width: 1199.98px) {
  .idc-cols {
    display: block;
  }

  .idc-cols__side {
    width: auto;
    margin-top: 20px;
  }
}

/* —— 16.2 顶部提示条 —— */
.idc-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin-bottom: 20px;
  color: var(--idc-info);
  font-size: 13px;
  line-height: 20px;
  background: var(--idc-primary-soft-2);
  border: 1px solid var(--idc-primary-soft);
  border-radius: var(--idc-radius-md);
}

.idc-tip i {
  flex: none;
  font-size: 16px;
}

.idc-tip__text {
  flex: 1 1 auto;
  min-width: 0;
}

.idc-tip__action {
  flex: none;
  color: var(--idc-primary);
  font-weight: 600;
  white-space: nowrap;
}

.idc-tip__action:hover {
  color: var(--idc-primary-hover);
}

/* 中性提示条：用于说明性文字，不抢主色（details.tpl 等处使用） */
.idc-tip--muted,
.idc-tip.idc-tip--muted {
  color: var(--idc-text-secondary);
  background: #f7f9fc;
  border-color: var(--idc-border);
}

.idc-tip--muted i {
  color: var(--idc-text-placeholder);
}

.idc-tip--muted .idc-tip__action {
  color: var(--idc-primary);
}

/* 警告 / 成功 / 危险三种语气 */
.idc-tip--warn {
  color: #b5560f;
  background: var(--idc-warning-soft);
  border-color: #ffd9bd;
}

.idc-tip--warn i {
  color: var(--idc-warning);
}

.idc-tip--danger {
  color: #b32b37;
  background: var(--idc-danger-soft);
  border-color: #ffd0d4;
}

.idc-tip--danger i {
  color: var(--idc-danger);
}

.idc-tip--ok {
  color: #0a7a52;
  background: var(--idc-success-soft);
  border-color: #b9ecd9;
}

.idc-tip--ok i {
  color: var(--idc-success);
}

/* —— 16.3 卡片（结构化的头部 / 主体 / 底部） —— */
.idc-card {
  margin-bottom: 20px;
  background: var(--idc-card-bg);
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius-md);
  box-shadow: var(--idc-shadow-card);
}

.idc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--idc-border-light);
}

.idc-card__title {
  margin: 0;
  color: var(--idc-text-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.idc-card__extra {
  flex: none;
  color: var(--idc-text-muted);
  font-size: 13px;
}

.idc-card__body {
  padding: 30px;
}

.idc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--idc-border-light);
}

.idc-card--flat {
  box-shadow: none;
}

/* —— 16.4 带序号的小节标题（01 / 02 / 03） —— */
.idc-section {
  margin-bottom: 24px;
}

.idc-section:last-child {
  margin-bottom: 0;
}

.idc-section__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-left: 14px;
}

/* 96IDC 自己的小节标识：左侧蓝→青渐变竖条（参考站用的是实心序号方块） */
.idc-section__head::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  border-radius: 3px;
  background: var(--idc-brand-gradient);
}

.idc-section__no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  color: var(--idc-primary);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .3px;
  background: transparent;
  border: 1px solid var(--idc-primary-border);
  border-radius: 100px;
}

.idc-section__title {
  margin: 0;
  color: var(--idc-text-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.idc-section__desc {
  margin: 2px 0 0;
  color: var(--idc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.idc-section__body {
  padding-left: 0;
}

/* —— 16.5 表单字段 —— */
.idc-field {
  margin-bottom: 18px;
}

.idc-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--idc-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.idc-field__label .idc-req {
  color: var(--idc-danger);
}

.idc-field__hint {
  margin-top: 6px;
  color: var(--idc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.idc-field__error {
  margin-top: 6px;
  color: var(--idc-danger);
  font-size: 12px;
  line-height: 18px;
}

/* 只读输入框 + “只读”角标 */
.idc-control-wrap {
  position: relative;
}

.idc-control-wrap .idc-readonly-tag {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 1px 6px;
  color: var(--idc-text-muted);
  font-size: 11px;
  line-height: 16px;
  background: var(--idc-border-light);
  border-radius: var(--idc-radius-sm);
  transform: translateY(-50%);
  pointer-events: none;
}

.form-control.idc-readonly,
.form-control[readonly] {
  background-color: var(--idc-border-light) !important;
  color: var(--idc-text-muted) !important;
}

/* 统一下拉与输入框外观 */
.idc-card select.form-control,
.idc-card .form-control {
  background-color: var(--idc-input-bg);
  border-color: var(--idc-border);
  border-radius: var(--idc-radius);
}

.idc-card .form-control:focus {
  background-color: #fff;
  border-color: var(--idc-primary);
  box-shadow: 0 0 0 3px rgba(18, 103, 245, 0.14);
}

/* —— 16.6 开关（营销信息 / 邮件短信） —— */
.idc-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--idc-input-bg);
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius);
}

.idc-switch__text {
  min-width: 0;
}

.idc-switch__title {
  color: var(--idc-text-heading);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.idc-switch__desc {
  margin-top: 2px;
  color: var(--idc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.idc-switch__input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  margin: 0;
  background: #cdd3dd;
  border-radius: 100px;
  outline: 0;
  cursor: pointer;
  transition: background-color .18s ease;
}

.idc-switch__input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .2);
  transition: transform .18s ease;
}

.idc-switch__input:checked {
  background: var(--idc-primary);
}

.idc-switch__input:checked::after {
  transform: translateX(20px);
}

/* —— 16.7 状态标签 —— */
.idc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  color: var(--idc-text-secondary);
  font-size: 12px;
  line-height: 18px;
  background: var(--idc-border-light);
  border-radius: var(--idc-radius-sm);
  white-space: nowrap;
}

.idc-chip--ok {
  color: var(--idc-success);
  background: var(--idc-success-soft);
}

.idc-chip--warn {
  color: var(--idc-warning);
  background: var(--idc-warning-soft);
}

.idc-chip--danger {
  color: var(--idc-danger);
  background: var(--idc-danger-soft);
}

.idc-chip--primary {
  color: var(--idc-primary);
  background: var(--idc-primary-soft);
}

/* —— 16.8 空状态 —— */
.idc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}

.idc-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  color: #c3cbd8;
  font-size: 30px;
  background: var(--idc-border-light);
  border-radius: 50%;
}

.idc-empty__text {
  color: var(--idc-text-muted);
  font-size: 13px;
  line-height: 20px;
}

/* —— 16.9 右侧信息行（待处理工单 / 未支付订单 / 产品数量） —— */
.idc-stat-list {
  display: flex;
  flex-direction: column;
}

.idc-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--idc-border-light);
}

.idc-stat-row:first-child {
  border-top: 0;
}

.idc-stat-row__label {
  color: var(--idc-text-secondary);
  font-size: 13px;
}

.idc-stat-row__label em {
  color: var(--idc-primary);
  font-style: normal;
}

.idc-stat-row__value {
  margin-left: 6px;
  color: var(--idc-text-heading);
  font-weight: 600;
}

.idc-stat-row__action {
  flex: none;
  color: var(--idc-text-muted);
  font-size: 12px;
}

.idc-stat-row__action:hover {
  color: var(--idc-primary);
}

/* —— 16.10 用户概览卡 —— */
.idc-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.idc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idc-user-card__name {
  color: var(--idc-text-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.idc-user-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0 20px 18px;
}

.idc-user-meta__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--idc-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.idc-user-meta__item i {
  flex: none;
  color: var(--idc-text-placeholder);
  font-size: 14px;
}

.idc-user-meta__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idc-user-meta__value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}

.idc-user-meta__label {
  flex: none;
  color: var(--idc-text-muted);
}

/* —— 16.11 余额 / 财务块 —— */
.idc-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.idc-balance__label {
  color: var(--idc-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.idc-balance__value {
  margin-top: 6px;
  color: var(--idc-text-heading);
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
}

.idc-balance__value small {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--idc-text-muted);
}

.idc-quota {
  padding: 14px 20px 18px;
  background: var(--idc-input-bg);
  border-top: 1px solid var(--idc-border-light);
}

.idc-quota__title {
  margin-bottom: 10px;
  color: var(--idc-text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.idc-quota__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--idc-text-muted);
  font-size: 13px;
}

.idc-quota__row b {
  color: var(--idc-text-heading);
  font-weight: 500;
}

/* —— 16.12 数字大卡（账户安全等级等） —— */
.idc-big-number {
  color: var(--idc-danger);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}

.idc-big-number--ok {
  color: var(--idc-success);
}

.idc-big-number--warn {
  color: var(--idc-warning);
}

/* —— 16.13 表格内的空行 —— */
.idc-table-empty {
  padding: 44px 0 !important;
  color: var(--idc-text-muted);
  text-align: center;
}

/* —— 16.14 页面标题条（个人中心这类内页） —— */
.idc-pagehead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius-md);
  box-shadow: var(--idc-shadow-card);
}

/* 标题前的品牌色小竖条：放在卡片内部，避免与卡片边缘产生“割裂”感 */
.idc-pagehead__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.idc-pagehead__title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--idc-brand-gradient);
}

.idc-pagehead__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  color: var(--idc-text-secondary);
  font-size: 18px;
  border-radius: 50%;
  transition: background-color .16s ease, color .16s ease;
}

.idc-pagehead__back:hover {
  color: var(--idc-primary);
  background: var(--idc-primary-soft-2);
}

/* 页头条左侧竖条已移除：改为标题前的品牌色小竖条，避免与卡片边缘割裂 */

.idc-pagehead__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.idc-pagehead__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--idc-text-secondary);
  border-radius: var(--idc-radius-sm);
}

.idc-pagehead__back:hover {
  color: var(--idc-primary);
  background: var(--idc-primary-soft-2);
}

.idc-pagehead__title {
  margin: 0;
  color: var(--idc-text-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.idc-pagehead__crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--idc-text-muted);
  font-size: 13px;
}

.idc-pagehead__crumb a {
  color: var(--idc-text-muted);
}

.idc-pagehead__crumb a:hover {
  color: var(--idc-primary);
}

.idc-pagehead__crumb i {
  font-size: 14px;
}

/* —— 16.15 小尺寸统计卡（首页顶部四联卡） —— */
.idc-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  background: var(--idc-card-bg);
  border: 1px solid var(--idc-border);
  border-radius: var(--idc-radius-md);
  box-shadow: var(--idc-shadow-card);
}

.idc-stat-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: var(--idc-radius-md);
}

.idc-stat-card__label {
  display: block;
  color: var(--idc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.idc-stat-card__value {
  display: block;
  margin-top: 2px;
  color: var(--idc-text-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.idc-stat-card--blue .idc-stat-card__icon {
  color: var(--idc-primary);
  background: var(--idc-primary-soft);
}

.idc-stat-card--green .idc-stat-card__icon {
  color: var(--idc-success);
  background: var(--idc-success-soft);
}

.idc-stat-card--orange .idc-stat-card__icon {
  color: var(--idc-warning);
  background: var(--idc-warning-soft);
}

.idc-stat-card--red .idc-stat-card__icon {
  color: var(--idc-danger);
  background: var(--idc-danger-soft);
}

/* —— 16.16 列表项（公告 / 消息） —— */
.idc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.idc-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--idc-border-light);
}

.idc-list__item:last-child {
  border-bottom: 0;
}

.idc-list__dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: var(--idc-primary);
  border-radius: 50%;
}

.idc-list__main {
  min-width: 0;
}

.idc-list__title {
  color: var(--idc-text-heading);
  font-size: 13px;
  line-height: 20px;
}

.idc-list__title:hover {
  color: var(--idc-primary);
}

.idc-list__time {
  margin-top: 2px;
  color: var(--idc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

/* —— 16.17 无数据占位（表格 / 图表） —— */
.idc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--idc-text-muted);
  font-size: 13px;
}

.idc-placeholder i {
  margin-bottom: 10px;
  color: #d3dae5;
  font-size: 40px;
}

/* 顶栏左侧：Logo 在左，侧边栏开关紧跟其后（三条横线在 Logo 右侧） */
.idc-topbar-left {
  gap: 2px;
}

.idc-topbar-left #vertical-menu-btn {
  margin-left: 2px;
  border-radius: var(--idc-radius);
}

/* ==========================================================================
   17. 基础皮肤遗留问题的统一收口（所有内页通用，避免逐页重复修）
   ========================================================================== */

/* 17.1 短表格不再被拉高
   assets_custom/css/global.css 给 .table-responsive 设了 min-height: calc(100vh - 650px)，
   空表格 / 少行表格会撑出几百像素空白，分页条被顶到卡片最底部。 */
.main-content .table-responsive {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* 17.2 表头统一浅灰
   基础皮肤把 Bootstrap 的 --light 映射成主色浅蓝（--bs-global-1），
   表头单元格列宽没铺满整行时会漏出一条蓝色色块；这里把整个表头层级全部压成同色。 */
.main-content table thead,
.main-content table thead tr,
.main-content table thead th,
.main-content table thead td,
.main-content table thead.bg-light,
.main-content table thead .bg-light,
.main-content table thead span,
.main-content table thead i {
  background-color: #fafbfc !important;
  background-image: none !important;
}

.main-content table col {
  background-color: transparent !important;
}

/* 17.2b 弹窗里的表格同样收口：模态框挂在 <body> 末尾、不在 .main-content 内，
   而 orderflow / upgrade / upgradeoption / mulitrenew / servicedetail 等用的是
   <thead class="thead-light">，只压 .bg-light 会漏。 */
.modal table thead,
.modal table thead tr,
.modal table thead th,
.modal table thead td,
.modal table thead.bg-light,
.modal table thead.thead-light,
.modal table thead .bg-light,
.modal table thead span,
.modal table thead i,
table thead.thead-light,
table thead.thead-light > tr > th {
  background-color: #fafbfc !important;
  background-image: none !important;
}

/* 17.3 遗留的等高占位块（旧版安全中心 / 账单结构留下的） */
.main-content .user-center_calc {
  height: auto !important;
  min-height: 0 !important;
}

.main-content .security-item-image {
  display: none !important;
}

/* 17.4b 双页头收口：页面自己画了 .idc-pagehead 时，隐藏主题默认的 pageheader
   （pageheader.tpl 输出的是 .page-title-wrapper，它是内容区之前的兄弟节点，
    所以页面 CSS 里写 `.xxx-page .page-title-wrapper` 是无效选择器）。 */
body:has(.idc-pagehead) .page-title-wrapper {
  display: none !important;
}

/* 卡片内的表格不要再多一层圆角/边框 */
.main-content .card .table-responsive {
  border-radius: 0;
}

/* 17.5 旧结构里写死的强调色统一回设计令牌 */
.main-content .card-title {
  color: var(--idc-text-heading);
}

/* 17.6 页头条手机端：标题过长时面包屑会被挤成一字一行，这里让它竖排换行 */
@media (max-width: 767.98px) {
  .idc-pagehead {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px 12px 18px;
  }

  .idc-pagehead__crumb,
  .idc-pagehead__right {
    width: 100%;
    flex-wrap: wrap;
  }

  .idc-section__head {
    flex-wrap: wrap;
  }
}

.main-content .text-primary,
.main-content a.text-primary {
  color: var(--idc-primary) !important;
}

/* —— 16.18 响应式收口 —— */
@media (max-width: 767.98px) {
  .idc-card__body,
  .idc-card__head,
  .idc-card__foot,
  .idc-stat-row,
  .idc-user-card,
  .idc-user-meta,
  .idc-balance,
  .idc-quota {
    padding-left: 14px;
    padding-right: 14px;
  }

  .idc-user-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .idc-switch {
    padding: 12px;
  }
}

/* ==========================================================================
   18. 全局版式归一（所有内页同宽、同边距、两栏等高）
   —— 解决“上下不同宽 / 左右不等长”这类不规整问题
   ========================================================================== */

/* 18.1 内容区统一内边距（所有页面完全一致） */
.main-content .page-content {
  padding: 20px 24px 28px;
}

/* 18.2 页面根容器一律占满内容区宽度，不允许出现比页头窄/宽的块 */
.main-content .page-content > div,
.main-content .page-content > section,
.main-content .page-content > form,
.main-content .page-content > .idc-svc,
.main-content .page-content > .idc-log,
.main-content .page-content > .idc-txn,
.main-content .page-content > .idc-msg,
.main-content .page-content > .idc-sd,
.main-content .page-content > .idc-bill-page,
.main-content .page-content > .idc-bill-detail,
.main-content .page-content > .idc-inv-detail,
.main-content .page-content > .idc-inv-page,
.main-content .page-content > .idc-inv-form,
.main-content .page-content > .idc-tk-page,
.main-content .page-content > .idc-tkd-page,
.main-content .page-content > .idc-addfunds,
.main-content .page-content > .idc-st-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 18.3 内页里再套 bootstrap 栅格时（个别老页面）去掉容器额外边距，
   否则会和 .idc-* 的 20/24px 边距叠加，出现“上下不同宽” */
.main-content .page-content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.main-content .page-content .container-fluid > .row,
.main-content .page-content .container-fluid > form > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* 18.5 相邻卡片间距统一，页面上下留白一致 */
.idc-card + .idc-card,
.idc-card + .row,
.row + .idc-card,
.idc-cols + .idc-card {
  margin-top: 0;
}

.idc-card:last-child,
.idc-cols:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   19. 相接处宽度对齐（顶栏左侧块 = 侧边导航宽度，竖线对齐）
   ========================================================================== */

/* 顶栏左侧（Logo + 折叠按钮）总宽锁定为侧边栏宽度，右侧补一条与侧栏同色的分隔线，
   这样顶栏与侧栏的分界线是一条连续的竖线，不会一宽一窄。 */
.idc-topbar-left {
  flex: 0 0 var(--idc-sidebar-w);
  width: var(--idc-sidebar-w);
  max-width: var(--idc-sidebar-w);
  gap: 0;
  border-right: 1px solid var(--idc-border-light);
}

/* Logo 盒不再自己占满整行，改为自适应，把右侧位置让给折叠按钮 */
.navbar-header .navbar-brand-box,
.idc-topbar-left .navbar-brand-box {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  padding: 0 8px 0 16px !important;
  border-right: 0 !important;
}

.idc-topbar-left #vertical-menu-btn {
  flex: 0 0 auto;
  width: 42px;
  margin: 0;
  padding: 0 !important;
  border-radius: 0;
}

/* 侧栏折叠后，顶栏左侧块同步收窄，保持一致 */
.vertical-collpsed .idc-topbar-left {
  flex-basis: var(--idc-sidebar-collapsed-w);
  width: var(--idc-sidebar-collapsed-w);
  max-width: var(--idc-sidebar-collapsed-w);
}

.vertical-collpsed .navbar-header .navbar-brand-box,
.vertical-collpsed .idc-topbar-left .navbar-brand-box {
  padding: 0 8px !important;
  justify-content: center;
}

/* 侧栏在 <=991.98px 变成抽屉，顶栏左侧恢复自适应宽度 */
@media (max-width: 991.98px) {
  .idc-topbar-left {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    border-right: 0;
  }

  .navbar-header .navbar-brand-box,
  .idc-topbar-left .navbar-brand-box {
    padding: 0 12px !important;
  }
}

/* ==========================================================================
   20. 页头条与下方内容同宽（相接处对齐）
   产品详情页：页头条 .idc-sd-pagehead 是页面根 .idc-sd 的直接子元素，
   而下面内容由子模板包在 bootstrap 栅格列里（.col-* 自带 15px 内边距），
   于是页头条比下方内容左右各宽 15px，相接处看着不齐。
   这里给页头条补上同样的 15px 内缩，两侧边界与内容完全对齐。
   ========================================================================== */


/* 其它“页头条 + 栅格内容”的页面同样处理（内容没包在栅格里时不受影响） */
.idc-svc > .idc-pagehead ~ .row > [class*="col-"]:only-child > .idc-pagehead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 991.98px) {
  .idc-sd > .idc-pagehead,
  .idc-sd > .idc-sd-pagehead {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ==========================================================================
   22. 页脚与内容区左对齐 + 右列不再强行拉高
   1) 上一版让右列最后一张卡 flex:1 补足高度，结果「公告通知」被拉得很长、留一大片空白，
      这里取消，卡片一律按内容高度。
   2) 底部横条（页脚）的左右内边距与内容区一致（20px），左侧与上方卡片对齐。
   ========================================================================== */


.footer .container-fluid,
footer .container-fluid,
.main-content + .footer,
.main-content ~ .footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.footer .container-fluid > .row,
footer .container-fluid > .row,
.footer .row,
footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.footer .container-fluid > .row > [class*=col-],
footer .container-fluid > .row > [class*=col-],
.footer .row > [class*=col-],
footer .row > [class*=col-] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   23. 三处相接对齐（依据线上实测像素校准）
   实测：内容卡片起点 = .page-content 内边距(桌面 20px / 移动 14px) + 栅格列内边距 12px
        顶栏 .navbar-header 另有 16px 内边距，导致左侧块比侧边栏右移 16px
   ========================================================================== */
:root {
  --idc-grid-gutter: 12px;   /* 主题栅格列内边距（实测 12px，不是 bootstrap 的 15px） */
  --idc-page-pad-x: 20px;    /* .page-content 左右内边距 */
}

@media (max-width: 991.98px) {
  :root {
    --idc-page-pad-x: 14px;
  }
}

/* 23.1 左上角：顶栏去掉 16px 内边距，左侧块从 x=0 开始、宽度=侧边栏宽度 */
#page-topbar .navbar-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 23.2 底部横条：页脚左内边距 = 页面内边距 + 栅格内边距，与上方卡片左边线对齐 */
footer.footer,
.footer {
  padding-left: calc(var(--idc-page-pad-x) + var(--idc-grid-gutter)) !important;
  padding-right: calc(var(--idc-page-pad-x) + var(--idc-grid-gutter)) !important;
}

footer .container-fluid,
.footer .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

footer .row,
.footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

footer .row > [class*=col-],
.footer .row > [class*=col-],
footer .container-fluid > .row > [class*=col-],
.footer .container-fluid > .row > [class*=col-] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 23.3 产品详情页：页头条与下方栅格内容同宽
   （只有页面里确实存在 bootstrap 栅格时才补内缩，其它页面不受影响） */
.idc-sd:has(.row) > .idc-pagehead,
.idc-sd:has(> .row) > .idc-pagehead,
.idc-sd:has(.row) > .idc-sd-pagehead {
  margin-left: var(--idc-grid-gutter) !important;
  margin-right: var(--idc-grid-gutter) !important;
}

@media (max-width: 991.98px) {
  .idc-sd:has(.row) > .idc-pagehead,
  .idc-sd:has(.row) > .idc-sd-pagehead {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* 22b 移动端页脚压缩：原来是竖排 7 行、又高又散，改成横向多列自动换行 */
@media (max-width: 991.98px) {
  footer .row,
  .footer .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
  }

  footer .row > [class*=col-],
  .footer .row > [class*=col-] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: center;
  }

  /* 竖排时的分隔线收起，避免又高又空 */
  footer .row > [class*=col-] + [class*=col-]::before,
  .footer .row > [class*=col-] + [class*=col-]::before {
    content: none !important;
  }
}



/* ==========================================================================
   25. 极简页脚（仅一行 © 96IDC），正常文档流，绝不覆盖上方板块
   ========================================================================== */
.footer {
  position: static !important;
  padding: 14px 20px 18px !important;
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.footer .container-fluid {
  padding: 0 !important;
}

.footer .idc-footer-mini {
  color: var(--idc-text-placeholder, #9aa4b2);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 991.98px) {
  .footer {
    padding: 10px 14px 16px !important;
  }
}

/* ==========================================================================
   27. 控制台首页两栏：左列为基准，右列（公告）动态适配
   --------------------------------------------------------------------------
   用户要求：左边板块保持自然高度（不要被拉长），右边的公告栏去适配左边：
            公告卡自动补足到与左列同高，内容超出时在卡内上下滚动。
   做法：.idc-cols 保持 stretch（容器高度 = 两列中较高者）
         · 左列 .idc-cols__main  display:block —— 内部不做任何拉伸
         · 右列 .idc-cols__side  display:flex + column —— 最后一张卡 flex:1 补满
         · 公告列表限高 + 内部滚动，保证右列自然高度不会反超左列
   ========================================================================== */
.idc-cols {
  display: flex !important;
  align-items: stretch !important;
  gap: 20px;
}

/* 左列：按内容自然高度，绝不拉伸 */
.idc-cols__main {
  display: block !important;
  min-width: 0;
}

.idc-cols__main > * {
  flex: 0 0 auto !important;
  align-self: auto !important;
}

/* 右列：铺满容器高度，最后一张卡吃掉剩余空间 */
.idc-cols__side {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}

.idc-cols__side > *:last-child {
  flex: 1 1 auto !important;
  align-self: stretch !important;
}

/* 公告通知卡：内部列表可上下滚动，卡片被拉高时不留空白 */
.idc-cols__side > .idc-card:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}

.idc-cols__side > .idc-card:last-child .idc-card__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.idc-cols__side > .idc-card:last-child .idc-card__body::-webkit-scrollbar {
  width: 6px;
}

.idc-cols__side > .idc-card:last-child .idc-card__body::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #d5dae1;
}

/* 窄屏堆叠：保持 flex（order 才有效），两列都回自然高度 */
@media (max-width: 1199.98px) {
  .idc-cols {
    flex-direction: column !important;
    gap: 0;
  }

  .idc-cols__main,
  .idc-cols__side {
    display: block !important;
    width: auto;
  }

  .idc-cols__side > *:last-child {
    flex: 0 1 auto !important;
  }

  .idc-cols__side {
    margin-top: 20px;
  }
}

@media (max-width: 991.98px) {
  /* v2.4.2：取消右栏前置（DOM 顺序 = 视觉顺序，主内容优先） */
  .idc-cols__side {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .idc-cols__side > .idc-card:last-child .idc-card__body {
    max-height: 360px;
  }
}

/* ==========================================================================
   29. 移动端安全复位（必须放在最后，压住所有桌面端规则）
   --------------------------------------------------------------------------
   问题：为修桌面端"翻页条被遮挡"加的 position:relative + z-index:2、
        以及为两栏等高加的 flex 拉伸，在手机单列布局下会变成"卡片互相覆盖"。
   处理：≤1199.98px 一律复位成最朴素的单列堆叠：
         · 容器保持 flex（order 才有效），列内部回到 block
         · 取消所有 flex 拉伸与 z-index
         · 右列整体前置（个人信息在最上面）
   ========================================================================== */
@media (max-width: 1199.98px) {
  .idc-cols {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .idc-cols__main,
  .idc-cols__side {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .idc-cols__main > *,
  .idc-cols__side > * {
    flex: 0 1 auto !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* v2.4.2：右栏不再前置，按 DOM 顺序排在主内容之后 */
  .idc-cols__side {
    margin: 0 0 20px 0 !important;
  }

  /* 公告卡恢复普通块，列表在卡内滚动 */
  .idc-cols__side > .idc-card:last-child {
    display: block !important;
  }

  .idc-cols__side > .idc-card:last-child .idc-card__body {
    max-height: 360px;
    overflow-y: auto;
  }

  /* 取消桌面端的层级与定位，杜绝覆盖 */
  .idc-ca-reslist,
  .idc-ca-duo {
    position: static !important;
    z-index: auto !important;
    clear: none !important;
  }

  .idc-ca-reslist {
    /* 关键：移动端也必须保留 BFC，否则卡内浮动元素（翻页条）会逃出卡片，
       下一张卡就会盖在它上面 —— 这就是移动端"板块互相覆盖"的原因 */
    display: flow-root !important;
    margin-bottom: 20px !important;
  }

  .idc-ca-reslist .table-footer {
    display: block !important;
    padding: 10px 0 0 !important;
  }

  .idc-ca-reslist .table-footer .table-pagination {
    justify-content: flex-start;
    margin-left: 0;
  }

  /* 二维码在手机端跟随屏幕宽度 */
  .idc-ca-qr {
    width: min(180px, 46vw) !important;
  }
}

@media (max-width: 575.98px) {
  .idc-ca-qr {
    width: min(160px, 52vw) !important;
  }
}

/* ==========================================================================
   30. 全局：卡片内的浮动元素必须被"包含"（移动端覆盖重叠的根因）
   --------------------------------------------------------------------------
   资源列表/账单/日志等卡片的翻页条是浮动元素（.pull-left / .pull-right / .table-footer）。
   只要卡片不是 BFC，这些浮动就会溢出卡片高度，后一张卡便压在上面。
   · 桌面端原本用 flow-root 解决了，但移动端复位时被改回 display:block，问题复现；
   · 这里做全局兜底：
       1) 任何包含 .table-footer 的卡片强制 flow-root（高度包含浮动）
       2) 翻页条相关元素统一去浮动
       3) 卡片末尾追加 clearfix，双保险
   ========================================================================== */
.idc-card:has(.table-footer) {
  display: flow-root !important;
}

.table-footer,
.table-footer .pull-left,
.table-footer .pull-right,
.table-pagination,
.table-pagination ul,
.table-pageinfo {
  float: none !important;
}

.table-footer::after {
  content: "";
  display: block;
  clear: both;
}

/* 卡片内在用 float 的通用件（部分老模板）同样收口 */
.idc-card > .table-responsive::after,
.idc-card > .card-body::after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   31. 移动端绝对布局（≤1199.98px）—— 从结构上杜绝"板块重叠"
   --------------------------------------------------------------------------
   只保留一件事需要 flex：.idc-cols 作为 flex 列，让右列能通过 order 前置。
   其余全部强制回归普通块级流，并清掉所有浮动与定位：
     · 每张卡片：display:block / position:static / float:none / height:auto
     · 卡内所有元素：float:none（翻页条不再逃出卡片）
     · 卡片统一 16px 下间距，绝不贴边
   这样"上一张卡的内容压到下一张卡"在结构上就不可能发生。
   ========================================================================== */
@media (max-width: 1199.98px) {
  .idc-cols {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .idc-cols__main,
  .idc-cols__side {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* v2.4.2：右栏不再前置（主内容 → 个人信息 → 财务 → 状态行 → 公告） */

  /* 每一张卡片：普通块级流 + 固定间距 */
  .idc-cols__main > *,
  .idc-cols__side > * {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 16px 0 !important;
    transform: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  .idc-cols__main > *:last-child,
  .idc-cols__side > *:last-child {
    margin-bottom: 0 !important;
  }

  /* 卡内一切元素都不允许浮动（翻页条 / pull-left / pull-right 全部回到文档流） */
  .idc-cols .idc-card *,
  .idc-cols .idc-card {
    float: none !important;
  }

  /* 卡片自身形成 BFC + clearfix：高度必然包含所有子元素 */
  .idc-cols .idc-card {
    display: flow-root !important;
    overflow: visible !important;
  }

  .idc-cols .idc-card::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 表格横向滚动而不是撑破卡片 */
  .idc-cols .idc-card .table-responsive,
  .idc-cols .idc-card .h100p {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* 翻页条换行排列，不靠定位 */
  .idc-cols .idc-card .table-footer {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--idc-border-light) !important;
    background: transparent !important;
  }

  .idc-cols .idc-card .table-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 8px 0 0 !important;
  }

  /* 双列卡（账户安全 / 已开通产品）在手机端上下排 */
  .idc-ca-duo {
    display: block !important;
  }

  .idc-ca-duo > .idc-card {
    margin-bottom: 16px !important;
  }

  .idc-ca-duo > .idc-card:last-child {
    margin-bottom: 0 !important;
  }

  /* 公告卡：内容多时卡内滚动，不撑高也不外溢 */
  .idc-cols__side > .idc-card:last-child .idc-card__body {
    display: block !important;
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* 推广赚钱卡的左右两栏在手机端上下排 */
  .idc-ca-aff__body {
    display: block !important;
  }

  .idc-ca-aff__panel {
    margin-top: 14px;
  }

  /* 联系方式：二维码 + 文字上下排 */
  .idc-ca-contact {
    display: block !important;
  }

  .idc-ca-contact__info {
    margin-top: 14px;
    width: 100% !important;
  }

  .idc-ca-qr {
    margin: 0 auto;
  }
}

/* ==========================================================================
   32. 移动端：右列卡片绝不允许被压成 0 高（公告通知被覆盖的根因）
   --------------------------------------------------------------------------
   现象：414px 渲染时「待处理工单」和「公告通知」两张卡不见了，只露出底部
        "提交工单 / 消息中心" 的残影 —— 说明这两张卡高度塌成 0，
        紧接着的左列（资源列表）就压了上来。
   原因：右列最后一张卡在桌面端被写成 display:flex;flex-direction:column，
        卡内 .idc-card__body 是 flex:1 1 auto + min-height:0，
        手机端容器高度受限时 body 会被压成 0，整个卡片随之塌陷。
   修复：手机端把右列每一张卡的 flex 全部摘掉，高度只由内容决定。
   ========================================================================== */
@media (max-width: 1199.98px) {
  .idc-cols__side,
  .idc-cols__main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 右列每一张卡：普通块 + 只按内容高度 */
  .idc-cols__side > .idc-card,
  .idc-cols__main > .idc-card,
  .idc-cols__main > .idc-ca-duo {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 特别是最后一张（公告通知）：取消一切 flex 收缩 */
  .idc-cols__side > .idc-card:last-child {
    display: block !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .idc-cols__side > .idc-card:last-child .idc-card__body,
  .idc-cols__side > .idc-card .idc-card__body {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* 卡内其它子块同理 */
  .idc-cols__side > .idc-card .idc-card__head,
  .idc-cols__side > .idc-card .idc-card__foot,
  .idc-cols__side > .idc-card .idc-stat-list,
  .idc-cols__side > .idc-card .idc-user-card,
  .idc-cols__side > .idc-card .idc-user-meta,
  .idc-cols__side > .idc-card .idc-balance,
  .idc-cols__side > .idc-card .idc-quota {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ==========================================================================
   33. ★移动端重叠的真正根因：右列沿用了桌面端的 flex-basis:400px
   --------------------------------------------------------------------------
   实测（cloud.96idc.cn 手机端）：
     .idc-cols__side  y=254..654  h=400   [flex: 0 0 400px]
       第1张卡 254..502 / 第2张卡 518..818 / 第3张卡 834..980 ... 内容一直排到 1000+
     .idc-cols__main  y=670..2131          <- 670 就开始，压在右列上
   原因：桌面端两栏横排时 .idc-cols__side 用 flex:0 0 400px 控制**宽度**；
        手机端 .idc-cols 变成 flex 纵向列后，flex-basis:400px 变成了**高度**，
        于是右列外框只有 400px 高，内容全部溢出，下一列（左列）就压了上来。
   修复：手机端把两列的 flex 全部改成 0 0 auto（高度由内容决定），宽度用 100%。
   ========================================================================== */
@media (max-width: 1199.98px) {
  .idc-cols > .idc-cols__side,
  .idc-cols > .idc-cols__main {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: auto !important;
  }
}

/* ==========================================================================
   36. 侧栏收窄至 3/4 + 桌面端移除折叠开关（手机端交互保持不变）
   --------------------------------------------------------------------------
   · 宽度统一由 --idc-sidebar-w 控制（已由 250px 改为 188px），
     .vertical-menu / .main-content / .navbar-brand-box / .footer 全部跟随，
     手机端用的是独立的 min(80vw,268px)，因此不受影响。
   · 桌面端不再需要"收起成缩略图"，隐藏三条线开关；
     ⚠️ 开关隐藏后若侧栏仍处于历史折叠状态将无法恢复，
     因此这里把 .vertical-collpsed 在桌面端强制还原成展开态（纯 CSS，不依赖 JS）。
   ========================================================================== */
@media (min-width: 992px) {
  /* 1) 移除顶部的三条线折叠开关（仅桌面） */
  #vertical-menu-btn {
    display: none !important;
  }

  /* 2) 历史折叠状态一律还原为展开态，杜绝"无法展开" */
  body.vertical-collpsed .vertical-menu,
  .vertical-collpsed .vertical-menu {
    width: var(--idc-sidebar-w) !important;
    min-width: var(--idc-sidebar-w) !important;
    max-width: var(--idc-sidebar-w) !important;
    top: var(--idc-topbar-h) !important;
  }

  body.vertical-collpsed .main-content,
  .vertical-collpsed .main-content {
    margin-left: var(--idc-sidebar-w) !important;
  }

  body.vertical-collpsed .navbar-brand-box,
  .vertical-collpsed .navbar-brand-box {
    width: var(--idc-sidebar-w) !important;
  }

  body.vertical-collpsed .footer,
  .vertical-collpsed .footer {
    left: var(--idc-sidebar-w) !important;
  }

  body.vertical-collpsed .idc-sidebar-copyright,
  .vertical-collpsed .idc-sidebar-copyright {
    display: flex !important;
  }

  /* 3) 折叠态通常会隐藏菜单文字、只留图标，这里一并还原 */
  body.vertical-collpsed #sidebar-menu ul li a,
  .vertical-collpsed #sidebar-menu ul li a {
    padding-left: 15px !important;
    text-align: left !important;
  }

  body.vertical-collpsed #sidebar-menu ul li a span,
  body.vertical-collpsed #sidebar-menu .menu-title,
  .vertical-collpsed #sidebar-menu ul li a span,
  .vertical-collpsed #sidebar-menu .menu-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.vertical-collpsed #sidebar-menu ul li a i,
  body.vertical-collpsed #sidebar-menu .has-arrow::after,
  .vertical-collpsed #sidebar-menu ul li a i,
  .vertical-collpsed #sidebar-menu .has-arrow::after {
    display: inline-block !important;
  }
}

/* 侧栏收窄后，菜单项的内边距与图标间距同步收紧，避免文字被挤断 */
@media (min-width: 992px) {
  #sidebar-menu ul li a {
    padding-left: 13px !important;
    padding-right: 10px !important;
  }

  #sidebar-menu ul li a i {
    margin-right: 8px !important;
  }
}

/* ==========================================================================
   37. 侧栏底部版权重新排版
   --------------------------------------------------------------------------
   旧结构把两行内容用内联分隔符挤在一起，侧栏收窄到 188px（可用宽 ~160px）后
   必然断成难看的碎行（"QQ：" 单独一行）。
   现在改为四行居中堆叠，并且每行 nowrap —— 结构上就不会再乱断。
   ========================================================================== */
.idc-sidebar-copyright {
  flex: 0 0 auto;
  padding: 9px 8px 9px;
  border-top: 1px solid var(--idc-border-light);
  background: #fff;
  color: var(--idc-text-placeholder);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.idc-copyright-brand {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .02em;
  color: var(--idc-text-secondary);
}

.idc-copyright-sub {
  margin-top: 1px;
  white-space: nowrap;
  color: var(--idc-text-placeholder);
}

.idc-copyright-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 7px;
}

.idc-copyright-links span,
.idc-copyright-links a {
  white-space: nowrap;
  line-height: 16px;
}

.idc-copyright-links a {
  color: var(--idc-text-secondary);
  text-decoration: none;
}

.idc-copyright-links a:hover {
  color: var(--idc-primary);
}

/* 旧的装饰性分隔符不再需要 */
.idc-copyright-sep {
  display: none !important;
}

/* 手机端抽屉侧栏更宽，可以恢复成两行紧凑排布 */
/* 抽屉收窄至 3/4 后与桌面侧栏宽度接近，版权同样采用堆叠排版，避免挤断 */
@media (max-width: 991.98px) {
  .idc-copyright-links {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }

  .idc-copyright-links a::before {
    content: none;
  }
}

/* ==========================================================================
   41. 底部横条（恢复最初的样式）+ 结构上不可能遮挡上方板块
   --------------------------------------------------------------------------
   原始页脚是一条横条：白底、1px 上边框、上下 16px 内边距，版权文字靠左。
   本轮把内容简化为「© 96IDC」，但**恢复横条形态**。
   关键：使用 position:static（正常文档流）——
        它不是 fixed/absolute，所以永远不可能盖住上面的任何板块。
   横向：固定侧栏会盖住视口左侧，因此用 margin-left 让横条从内容区左边缘开始；
        左右内边距沿用第 23.2 节（与上方卡片左边线对齐），此处不改。
   ========================================================================== */
.footer,
footer.footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  z-index: auto !important;
  margin-left: var(--idc-sidebar-w) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  background: #fff !important;
  border-top: 1px solid #ebeef5 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}

.footer .idc-footer-copy,
.footer .idc-footer-mini {
  display: inline-block;
  color: #8a92a6;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

/* 横条内的栅格恢复原始左右分栏（左版权 / 右留白），并且不再竖排 */
.footer .container-fluid > .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  margin: 0 !important;
}

.footer .container-fluid > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.footer .container-fluid > .row > [class*="col-"] + [class*="col-"]::before {
  content: none !important;
}

/* 窄屏：侧栏变成抽屉，横条回到贴左，内边距收窄 */
@media (max-width: 991.98px) {
  .footer,
  footer.footer {
    margin-left: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .footer .container-fluid > .row {
    justify-content: center !important;
  }

  .footer .idc-footer-copy,
  .footer .idc-footer-mini {
    text-align: center;
  }
}

/* ==========================================================================
   42. 底部横条「始终保持在底部」+ 内容预留高度（绝不遮挡）
   --------------------------------------------------------------------------
   · 横条改为 position: fixed; bottom: 0 —— 无论内容长短，它永远贴在视口底部
     （这也是原始主题的做法：原版 .footer 就是靠 left 偏移的固定横条）。
   · 固定元素一定会浮在内容之上，所以**必须同步给内容预留横条高度**：
     把 .page-content 的下内边距从 40px 提到 calc(40px + 56px)，
     这样滚到底时最后一块内容正好停在横条上方，不会被压住。
   · z-index 取 998：低于固定侧栏(999)与移动端抽屉(1040)/顶栏(1050)，
     保证横条不会盖住侧栏或顶栏。
   ========================================================================== */
.footer,
footer.footer {
  position: fixed !important;
  left: var(--idc-sidebar-w) !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 998 !important;
  margin-left: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  background: #fff !important;
  border-top: 1px solid #ebeef5 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box;
}

/* 内容区预留横条高度（16 + 20 + 16 = 52px，取 56px 留一点余量） */
.main-content .page-content {
  padding-bottom: calc(40px + 56px) !important;
}

@media (max-width: 991.98px) {
  .footer,
  footer.footer {
    left: 0 !important;
    right: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .main-content .page-content {
    padding-bottom: calc(32px + 48px) !important;
  }
}

/* ==========================================================================
   v2.4.2 补充：窄屏隐藏语言切换（国旗缩成红点会被误判为未读徽章）
   ========================================================================== */
@media (max-width: 575.98px) {
  .idc-lang-switch {
    display: none !important;
  }
}

/* ==========================================================================
   43. 会员中心首页板块顺序（仅移动端，显式 order 1..9）
   --------------------------------------------------------------------------
   用户指定顺序：
     1 个人信息 → 2 账户安全 → 3 财务信息 → 4 资源列表 → 5 已开通产品
     → 6 工单 → 7 公告通知 → 8 推广赚钱 → 9 联系方式
   做法（仅 ≤991.98px）：.idc-cols--ordered 单列 flex；两栏容器
        .idc-cols__main / .idc-cols__side 与双列容器 .idc-ca-duo 用
        display:contents 拆箱，让 9 张卡片成为同一 flex 容器的直接项目，
        再逐一给出显式 order。不依赖 DOM 顺序，也不用 order:-1。
   说明：≥992px 不应用任何规则，桌面保持原有两栏布局与顺序。
   ========================================================================== */
@media (max-width: 991.98px) {
.idc-cols.idc-cols--ordered {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.idc-cols--ordered > .idc-cols__main,
.idc-cols--ordered > .idc-cols__side,
.idc-cols--ordered .idc-ca-duo {
  display: contents !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* 9 张卡片：宽度铺满、间距交给容器的 gap，避免与旧的 margin 规则叠加 */
.idc-cols--ordered > .idc-cols__main > .idc-card,
.idc-cols--ordered > .idc-cols__side > .idc-card,
.idc-cols--ordered .idc-ca-duo > .idc-card {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
}

/* 显式 order：与上面的 1..9 一一对应 */
.idc-cols--ordered .idc-ca-sec--profile {
  order: 1 !important;
}

.idc-cols--ordered .idc-ca-sec--security {
  order: 2 !important;
}

.idc-cols--ordered .idc-ca-sec--finance {
  order: 3 !important;
}

.idc-cols--ordered .idc-ca-reslist {
  order: 4 !important;
}

.idc-cols--ordered .idc-ca-sec--products {
  order: 5 !important;
}

.idc-cols--ordered .idc-ca-sec--ticket {
  order: 6 !important;
}

.idc-cols--ordered .idc-ca-sec--news {
  order: 7 !important;
}

.idc-cols--ordered .idc-ca-aff {
  order: 8 !important;
}

.idc-cols--ordered .idc-ca-contact-card {
  order: 9 !important;
}

/* 原「右栏最后一张卡补满高度」的规则不再适用：公告卡已不是最后一张，
   这里恢复自然高度，避免被 flex-grow 拉长 */
.idc-cols--ordered .idc-ca-sec--news {
  flex: 0 0 auto !important;
}

.idc-cols--ordered .idc-ca-sec--news .idc-card__body {
  max-height: 420px;
  overflow-y: auto;
}
}

/* ==========================================================================
   44. 首字头像（固定品牌蓝渐变 + 白色首字 + SVG 兜底）
   --------------------------------------------------------------------------
   底色固定为单一品牌蓝渐变 #1267F5 → #0B52D6，不按用户名取色。
   圆角统一 10px（与卡片规范一致），无描边、无阴影。
   字号按尺寸比例：48→19、40→16、30→12。
   无用户名 / 头像为空时，加 .idc-avatar--fallback 显示同色系白线稿 SVG。
   ========================================================================== */
.idc-avatar,
.user-center_header {
  flex: none;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  background-image: linear-gradient(135deg, #1267f5 0%, #0b52d6 100%);
  background-color: #0b52d6;
  color: #fff;
}

.idc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 19px;
}

.user-center_header {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  font-size: 12px;
}

.idc-avatar--fallback,
.user-center_header.idc-avatar--fallback {
  background-image: url("../img/avatar-default.svg") !important;
  background-position: center;
  background-size: cover;
  background-color: #0b52d6 !important;
  color: transparent !important;
  font-size: 0 !important;
}

.idc-avatar--fallback > * {
  display: none !important;
}