/*
 * Skin: Cloud Light（浅色渐变 + 卡片风，参考运维监控类后台）
 * 主色近似 #1890FF
 */
.skin-cloud-light {
  --fa-cloud-primary: #1890ff;
  --fa-cloud-primary-hover: #40a9ff;
  --fa-cloud-text: #262626;
  --fa-cloud-text-secondary: #595959;
  --fa-cloud-text-muted: #8c8c8c;
  --fa-cloud-border: #f0f0f0;
  --fa-cloud-card-shadow: 0 2px 12px rgba(24, 144, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --fa-cloud-radius: 12px;
}

/* 页面渐变底 */
.skin-cloud-light,
.skin-cloud-light html {
  min-height: 100%;
}
.skin-cloud-light body,
.skin-cloud-light .wrapper {
  background: linear-gradient(180deg, #eef3ff 0%, #e8f2fc 35%, #f2f0ff 100%) fixed;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fa-cloud-text-secondary);
}

/* ========== 顶栏 ========== */
.skin-cloud-light .main-header {
  background: #fff;
  box-shadow: 0 1px 8px rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid var(--fa-cloud-border);
}
.skin-cloud-light .main-header .navbar {
  background-color: #fff !important;
}
.skin-cloud-light .main-header .navbar .nav > li > a {
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light .main-header .navbar .nav > li > a:hover,
.skin-cloud-light .main-header .navbar .nav > li > a:active,
.skin-cloud-light .main-header .navbar .nav > li > a:focus,
.skin-cloud-light .main-header .navbar .nav .open > a,
.skin-cloud-light .main-header .navbar .nav .open > a:hover,
.skin-cloud-light .main-header .navbar .nav .open > a:focus,
.skin-cloud-light .main-header .navbar .nav > .active > a {
  background: rgba(24, 144, 255, 0.06);
  color: var(--fa-cloud-primary);
}
.skin-cloud-light .main-header .navbar .nav-addtabs li > .close-tab {
  color: var(--fa-cloud-text-muted);
}
.skin-cloud-light .main-header .navbar .sidebar-toggle {
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light .main-header .navbar .sidebar-toggle:hover {
  color: var(--fa-cloud-primary);
  background: rgba(24, 144, 255, 0.08);
}

/* 顶部标签页：激活态主色底边 */
.skin-cloud-light .main-header .nav-addtabs > li > a {
  color: var(--fa-cloud-text-muted);
  border-right: 1px solid var(--fa-cloud-border);
  background: transparent;
}
.skin-cloud-light .main-header .nav-addtabs > li > a:hover,
.skin-cloud-light .main-header .nav-addtabs > li > a:focus {
  color: var(--fa-cloud-text);
  background: rgba(24, 144, 255, 0.04);
}
.skin-cloud-light .main-header .nav-addtabs > li.active > a,
.skin-cloud-light .main-header .nav-addtabs > li.active > a:hover,
.skin-cloud-light .main-header .nav-addtabs > li.active > a:focus {
  color: var(--fa-cloud-primary);
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 2px solid var(--fa-cloud-primary);
  box-sizing: border-box;
}

.skin-cloud-light .main-header .logo {
  background-color: #fff;
  color: var(--fa-cloud-primary);
  border-right: 1px solid var(--fa-cloud-border);
  font-weight: 600;
}
.skin-cloud-light .main-header .logo:hover {
  background-color: #fafbff;
  color: var(--fa-cloud-primary-hover);
}
.skin-cloud-light .main-header li.user-header {
  background: linear-gradient(135deg, #1890ff 0%, #69c0ff 100%);
}

.skin-cloud-light #firstnav {
  box-shadow: none;
  border-bottom: 1px solid var(--fa-cloud-border);
}

@media (max-width: 767px) {
  .skin-cloud-light .main-header .navbar {
    background-color: #fff !important;
  }
  .skin-cloud-light .main-header .navbar .nav > li > a {
    color: var(--fa-cloud-text-secondary);
  }
}

/* ========== 侧栏 ========== */
.skin-cloud-light .main-sidebar,
.skin-cloud-light .left-side {
  background-color: #fff;
  border-right: 1px solid var(--fa-cloud-border);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
}
.skin-cloud-light .user-panel > .info,
.skin-cloud-light .user-panel > .info > a {
  color: var(--fa-cloud-text);
}
.skin-cloud-light .sidebar-menu > li.header {
  color: var(--fa-cloud-text-muted);
  background: #fafafa;
}
.skin-cloud-light .sidebar a {
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light .sidebar-menu > li:hover > a,
.skin-cloud-light .sidebar-menu > li.active > a {
  color: var(--fa-cloud-primary);
  background: rgba(24, 144, 255, 0.08);
  border-left-color: var(--fa-cloud-primary);
}
.skin-cloud-light .sidebar-menu > li.active {
  border-left-color: var(--fa-cloud-primary);
}
.skin-cloud-light .sidebar-menu > li > .treeview-menu {
  background: #fafbff;
}
.skin-cloud-light .treeview-menu > li > a {
  color: var(--fa-cloud-text-muted);
}
.skin-cloud-light .treeview-menu > li.active > a,
.skin-cloud-light .treeview-menu > li > a:hover {
  color: var(--fa-cloud-primary);
}

/* ========== 主内容区（外壳） ========== */
.skin-cloud-light .content-wrapper,
.skin-cloud-light .right-side {
  background: transparent !important;
  border-left: none !important;
}
.skin-cloud-light .content-header {
  background: transparent;
}
.skin-cloud-light .main-footer {
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid var(--fa-cloud-border);
  color: var(--fa-cloud-text-muted);
}

/* ========== 内页 iframe 内：inside-header ========== */
.skin-cloud-light.inside-header,
.skin-cloud-light.inside-header #main,
.skin-cloud-light.inside-header #content,
.skin-cloud-light.inside-header .content {
  background: transparent;
}
.skin-cloud-light.inside-header #content {
  padding: 8px 4px 16px;
}

/* 卡片化面板：仅作用于普通 panel-default，不动 bg-*-gradient/info-box 等带色卡 */
.skin-cloud-light .panel-default {
  border: none;
  border-radius: var(--fa-cloud-radius);
  box-shadow: var(--fa-cloud-card-shadow);
  background: #fff;
  overflow: hidden;
}
.skin-cloud-light .panel-default > .panel-heading {
  background: #fff;
  border-bottom: 1px solid var(--fa-cloud-border);
  color: var(--fa-cloud-text);
  font-weight: 600;
  border-radius: var(--fa-cloud-radius) var(--fa-cloud-radius) 0 0;
}
.skin-cloud-light .panel-default > .panel-body {
  background: #fff;
}
.skin-cloud-light .panel-intro .panel-heading {
  padding-top: 14px;
  padding-bottom: 12px;
}

/* 面板内 Tab */
.skin-cloud-light .panel-intro .nav-tabs > li > a {
  border-radius: 20px;
  margin-right: 6px;
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light .panel-intro .nav-tabs > li.active > a,
.skin-cloud-light .panel-intro .nav-tabs > li.active > a:hover,
.skin-cloud-light .panel-intro .nav-tabs > li.active > a:focus {
  background: rgba(24, 144, 255, 0.12);
  color: var(--fa-cloud-primary);
  border: 1px solid transparent;
}

/* 工具栏 */
.skin-cloud-light .toolbar .btn-primary {
  background: var(--fa-cloud-primary);
  border-color: var(--fa-cloud-primary);
  border-radius: 8px;
}
.skin-cloud-light .toolbar .btn-primary:hover {
  background: var(--fa-cloud-primary-hover);
  border-color: var(--fa-cloud-primary-hover);
}
.skin-cloud-light .toolbar .btn-default {
  border-radius: 8px;
  border-color: #d9d9d9;
}

/* 表格区域 */
.skin-cloud-light .bootstrap-table .table,
.skin-cloud-light .fixed-table-container {
  border-radius: 0 0 var(--fa-cloud-radius) var(--fa-cloud-radius);
}
.skin-cloud-light .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbff;
}
.skin-cloud-light .table-hover > tbody > tr:hover {
  background-color: rgba(24, 144, 255, 0.06);
}

/* 表单页 */
.skin-cloud-light .form-control {
  border-radius: 8px;
  border-color: #d9d9d9;
}
.skin-cloud-light .form-control:focus {
  border-color: var(--fa-cloud-primary);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}

/* 主按钮全局（内页） */
.skin-cloud-light .btn-primary {
  background-color: var(--fa-cloud-primary);
  border-color: var(--fa-cloud-primary);
  border-radius: 8px;
}
.skin-cloud-light .btn-primary:hover,
.skin-cloud-light .btn-primary:focus {
  background-color: var(--fa-cloud-primary-hover);
  border-color: var(--fa-cloud-primary-hover);
}

/* 轻提示条 */
.skin-cloud-light .alert-info-light,
.skin-cloud-light .alert-warning-light {
  border-radius: 8px;
  border: none;
}
.skin-cloud-light .alert-info-light {
  background: rgba(24, 144, 255, 0.1);
  color: #0958d9;
}

/* 面包屑/ribbon */
.skin-cloud-light #ribbon {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  margin: 8px 0;
  padding: 6px 12px;
}
.skin-cloud-light #ribbon .breadcrumb {
  margin-bottom: 0;
}

/* 滚动条区域留白 */
.skin-cloud-light .content-wrapper > .tab-content {
  padding: 10px 12px 20px;
}

/* 下拉菜单卡片化 */
.skin-cloud-light .navbar .dropdown-menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.skin-cloud-light .navbar .dropdown-menu > li > a {
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light .navbar .dropdown-menu > li > a:hover {
  background: rgba(24, 144, 255, 0.08);
  color: var(--fa-cloud-primary);
}

/* 次栏菜单（多级导航） */
.skin-cloud-light #secondnav {
  background: #fff;
  border-bottom: 1px solid var(--fa-cloud-border);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.06);
}
.skin-cloud-light #secondnav .nav-addtabs > li.active {
  border-bottom: 2px solid var(--fa-cloud-primary);
}
.skin-cloud-light #secondnav .nav-addtabs > li > a {
  color: var(--fa-cloud-text-secondary);
}
.skin-cloud-light #secondnav .nav-addtabs > li.active > a {
  color: var(--fa-cloud-primary);
}

/* 固定表头与工具条 */
.skin-cloud-light .fixed-table-toolbar .btn {
  border-radius: 6px;
}

/* ==========================================================
   顶部菜单布局（替代左侧栏）
   - 主菜单变水平排列在 logo 行下方
   - hover 展开二级下拉
   ========================================================== */

/* 隐藏左侧栏，保留 DOM 但不占空间（保留搜索逻辑可用） */
.skin-cloud-light.layout-top-nav .main-sidebar,
.skin-cloud-light.layout-top-nav .left-side {
  display: none !important;
}

/* ===== 第一行：主菜单 + 用户菜单（顶部菜单布局下不显示 logo，让菜单完全靠左） ===== */
.skin-cloud-light.layout-top-nav .main-header .logo {
  display: none !important;
}
.skin-cloud-light.layout-top-nav .main-header .navbar {
  margin-left: 0 !important;
  background: transparent !important;
  min-height: 0;
}
/* 顶部主菜单行：白底 + 柔和投影；底部用渐变细线作为美观的分割线 */
.skin-cloud-light #topbarmain {
  position: relative;
  background: #fff;
  min-height: 50px;
  display: block;
  border-bottom: none; /* 改用 ::before 渐变线，更柔和 */
  box-shadow: 0 2px 8px rgba(15, 60, 130, 0.06);
  padding: 0;
  z-index: 2; /* 浮于标签条之上，让阴影看得见 */
}
.skin-cloud-light #topbarmain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(24, 144, 255, 0) 0%,
    rgba(24, 144, 255, 0.18) 15%,
    rgba(24, 144, 255, 0.28) 50%,
    rgba(24, 144, 255, 0.18) 85%,
    rgba(24, 144, 255, 0) 100%);
  pointer-events: none;
}
.skin-cloud-light #topbarmain .sidebar-toggle {
  display: none !important; /* 顶部菜单布局下不需要折叠按钮 */
}
.skin-cloud-light #topbarmain .navbar-custom-menu {
  float: right; /* 右侧控制栏贴最右边（默认行为，恢复回来） */
}
/* 清浮动，确保 #firstnav 走第二行 */
.skin-cloud-light #topbarmain::after {
  content: "";
  display: table;
  clear: both;
}

/* 主菜单容器（在 #topbarmain 内左侧水平排列） */
.skin-cloud-light .topnav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 50px;
  overflow: visible;
  float: left;
}

/* ===== 第二行：已打开的页面标签（浅蓝灰底胶囊条） =====
   注意：必须显式 z-index 才能建立 stacking context，否则内部 .nav-addtabs(z=98)
   会"穿透"到上层与 #topbarmain(z=2) 直接比较，导致顶部下拉菜单被遮挡且鼠标事件被吃 */
.skin-cloud-light.layout-top-nav #firstnav {
  clear: both;
  background: linear-gradient(180deg, #f5f8ff 0%, #eef3fc 100%);
  border-bottom: 1px solid rgba(24, 144, 255, 0.12);
  height: 40px;
  padding: 0;
  margin-left: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 2px 6px rgba(15, 60, 130, 0.04);
  position: relative;
  z-index: 1;
}
/* 覆盖 backend.css 中 #firstnav .nav-addtabs 的绝对定位（原本为左侧 45px 折叠按钮预留位置） */
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs {
  position: relative !important;
  left: 0 !important;
  margin-left: 12px;
  height: 40px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 单个标签项：胶囊形 */
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs > li {
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  height: 30px;
  display: inline-flex;
  align-items: center;
}
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs > li > a,
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs > li.active > a {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  padding: 0 14px;
  border-radius: 16px;
  border: none !important;
  background: transparent;
  color: var(--fa-cloud-text-secondary);
  margin: 0;
  transition: all 0.18s ease;
}
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs > li > a:hover {
  background: rgba(24, 144, 255, 0.08);
  color: var(--fa-cloud-primary);
}
/* 活跃标签：白底 + 主色字 + 柔光投影，明显跳出 */
.skin-cloud-light.layout-top-nav #firstnav .nav-addtabs > li.active > a {
  background: #fff;
  color: var(--fa-cloud-primary);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.18);
  font-weight: 500;
}

/* 顶层菜单项 */
.skin-cloud-light .topnav-menu > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-left: none !important;
  white-space: nowrap;
  margin: 0 !important;
}
.skin-cloud-light .topnav-menu > li > a {
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  height: 50px;
  color: var(--fa-cloud-text-secondary);
  border-bottom: 2px solid transparent;
  background: transparent !important;
  font-size: 14px;
  text-decoration: none;
  transition: color .2s, background-color .2s, border-color .2s;
}
.skin-cloud-light .topnav-menu > li > a > i {
  margin-right: 6px;
  font-size: 14px;
  color: var(--fa-cloud-primary);
}
/* hover 才显示深色背景；.active 只用淡淡的文字色 + 底部细线提示，
   避免出现"已点过的菜单 + 当前 hover 的菜单"两个同色深背景同时存在 */
.skin-cloud-light .topnav-menu > li > a:hover,
.skin-cloud-light .topnav-menu > li:hover > a {
  color: var(--fa-cloud-primary);
  background: rgba(24, 144, 255, 0.06) !important;
  border-bottom-color: var(--fa-cloud-primary);
}
.skin-cloud-light .topnav-menu > li.active > a {
  color: var(--fa-cloud-primary);
  background: transparent !important;
  border-bottom-color: var(--fa-cloud-primary);
}

/* 顶层右侧的折叠箭头：朝下 */
.skin-cloud-light .topnav-menu > li > a > .pull-right-container {
  position: static;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
}
.skin-cloud-light .topnav-menu > li > a > .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg);
  transition: transform .2s;
  font-size: 14px;
  color: var(--fa-cloud-text-muted);
}
.skin-cloud-light .topnav-menu > li:hover > a > .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg) translateX(-1px);
  color: var(--fa-cloud-primary);
}

/* 没有子菜单的叶子项隐藏箭头 */
.skin-cloud-light .topnav-menu > li > a > .pull-right-container:empty {
  display: none;
}

/* 一级下拉面板：仅 hover 时显示。.active/.menu-open 不锁死，避免点击进去后下拉关不掉
   宽度策略：min-width: 100% 保证至少与父级菜单项一样宽，
   width: max-content 让面板按内容自适应、最多到最长那一项的宽度，
   这样下拉宽度就和父级"玩家中心/常规管理/代理中心..."的宽度对齐了 */
.skin-cloud-light .topnav-menu > li > .treeview-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--fa-cloud-border);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  box-sizing: border-box;
  display: none !important;
  z-index: 1050;
  margin: 0;
  list-style: none;
}
.skin-cloud-light .topnav-menu > li:hover > .treeview-menu {
  display: block !important;
}
/* 用户刚点过的项：即使鼠标还停在范围内也强制关闭下拉，鼠标离开后由 JS 解除标记 */
.skin-cloud-light .topnav-menu > li.topnav-justclicked > .treeview-menu,
.skin-cloud-light .topnav-menu > li.topnav-justclicked:hover > .treeview-menu {
  display: none !important;
}

/* 下拉项 */
.skin-cloud-light .topnav-menu .treeview-menu li {
  display: block;
  list-style: none;
  width: 100%;
}
.skin-cloud-light .topnav-menu .treeview-menu li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 18px;
  color: var(--fa-cloud-text-secondary);
  font-size: 13px;
  border-left: 3px solid transparent;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.skin-cloud-light .topnav-menu .treeview-menu li > a > i {
  margin-right: 8px;
  color: var(--fa-cloud-text-muted);
  font-size: 13px;
  flex-shrink: 0;
}
/* 文本占满剩余空间，确保所有项左侧图标对齐、整体宽度被容器锁定 */
.skin-cloud-light .topnav-menu .treeview-menu li > a > span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 隐藏下拉里多余的右侧 caret/badge 容器，避免角标把行宽撑开导致看上去"长短不一" */
.skin-cloud-light .topnav-menu .treeview-menu li > a > .pull-right-container,
.skin-cloud-light .topnav-menu .treeview-menu li > a > .label,
.skin-cloud-light .topnav-menu .treeview-menu li > a > small.label {
  display: none !important;
}
.skin-cloud-light .topnav-menu .treeview-menu li > a:hover,
.skin-cloud-light .topnav-menu .treeview-menu li.active > a {
  background: rgba(24, 144, 255, 0.08);
  color: var(--fa-cloud-primary);
  border-left-color: var(--fa-cloud-primary);
}
.skin-cloud-light .topnav-menu .treeview-menu li.active > a > i,
.skin-cloud-light .topnav-menu .treeview-menu li > a:hover > i {
  color: var(--fa-cloud-primary);
}

/* 三级及以上：以缩进表示 */
.skin-cloud-light .topnav-menu .treeview-menu .treeview-menu li > a {
  padding-left: 36px;
  font-size: 12.5px;
}

/* 顶部菜单中隐藏右侧 caret/badge 多余空白（leaf 项） */
.skin-cloud-light .topnav-menu > li > a > .pull-right-container > .pull-right {
  display: none;
}

/* ===== 顶栏整体高度 & 内容区让位 ===== */
/* 主头部容纳两行：50px 主菜单 + 40px 页签 */
.skin-cloud-light .main-header {
  max-height: 140px;
}
.skin-cloud-light.fixed.layout-top-nav .content-wrapper,
.skin-cloud-light.fixed.layout-top-nav .right-side {
  padding-top: 90px; /* 50 主菜单 + 40 页签 */
}
/* 启用多级导航(secondnav)时再追加一行高度 */
.skin-cloud-light.fixed.layout-top-nav.multiplenav .content-wrapper,
.skin-cloud-light.fixed.layout-top-nav.multiplenav .right-side {
  padding-top: 130px;
}

/* 隐藏移动端的边栏切换按钮（顶栏下没有侧栏） */
.skin-cloud-light.layout-top-nav .sidebar-toggle {
  display: none !important;
}

/* ===== 移动端：顶栏改为「flex + 菜单横滑」，避免浮动布局下菜单被头像区挤掉 ===== */
@media (max-width: 767px) {
  .skin-cloud-light.layout-top-nav .main-header .logo {
    display: none !important; /* 顶栏布局移动端不显示 logo, 把空间全留给菜单 */
  }

  /* 顶栏第一行：menu 占据剩余宽度并可横滑；用户菜单(头像)固定贴右 */
  .skin-cloud-light #topbarmain {
    display: flex;
    align-items: stretch;
    padding: 0;
    /* 注意：不能在此设置 overflow:hidden，否则会裁掉用户头像下拉菜单 */
  }
  .skin-cloud-light #topbarmain::after {
    display: none; /* 移动端不再需要 clearfix（已改为 flex） */
  }
  .skin-cloud-light #topbarmain .navbar-custom-menu {
    float: none !important;
    flex: 0 0 auto;
    order: 2; /* 始终在右 */
    background: #fff;
    /* 与菜单滚动区拉开一条柔和阴影，提示左侧还可继续滑 */
    box-shadow: -8px 0 8px -6px rgba(15, 60, 130, 0.12);
    position: relative;
    z-index: 3; /* 高于菜单滚动区，避免被横滑的菜单覆盖 */
  }

  .skin-cloud-light .topnav-menu {
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    overflow-x: auto;
    /* 由于 overflow-x:auto 会把 overflow-y 也变 auto，
       下拉子菜单会被裁掉 → 移动端把 .treeview-menu 改为 position:fixed 自给自足 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* Firefox */
  }
  .skin-cloud-light .topnav-menu::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }
  .skin-cloud-light .topnav-menu > li {
    flex: 0 0 auto;
  }
  .skin-cloud-light .topnav-menu > li > a {
    padding: 0 14px;
    font-size: 13px;
  }

  /* 移动端下拉子菜单：脱离横滑容器，从顶栏正下方拉出全宽面板 */
  .skin-cloud-light .topnav-menu > li > .treeview-menu {
    position: fixed;
    top: 50px;     /* 顶栏第一行高度 */
    left: 0;
    right: 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  /* 移动端没有页签 UL（hidden-xs），把空容器也藏掉，释放 40px 空间 */
  .skin-cloud-light.layout-top-nav #firstnav {
    display: none;
  }
  .skin-cloud-light.fixed.layout-top-nav .content-wrapper,
  .skin-cloud-light.fixed.layout-top-nav .right-side {
    padding-top: 50px; /* 仅顶部主菜单一行 */
  }
  /* multiplenav 下若 secondnav 开启，依旧保留 40px */
  .skin-cloud-light.fixed.layout-top-nav.multiplenav .content-wrapper,
  .skin-cloud-light.fixed.layout-top-nav.multiplenav .right-side {
    padding-top: 90px;
  }
}

/* 极窄屏：进一步压缩间距，文字保持完整 */
@media (max-width: 480px) {
  .skin-cloud-light .topnav-menu > li > a {
    padding: 0 10px;
    font-size: 13px;
  }
  .skin-cloud-light .topnav-menu > li > a > i {
    margin-right: 4px;
  }
  .skin-cloud-light #topbarmain .navbar-custom-menu .nav > li > a {
    padding: 8px 10px;
  }
  /* 头像下拉菜单约束在视口内，避免溢出右侧 */
  .skin-cloud-light #topbarmain .navbar-custom-menu .user-menu > .dropdown-menu {
    right: 4px;
    left: auto;
    max-width: calc(100vw - 16px);
  }
}

/* ===== 内页（iframe 内）渐变背景与卡片化 ===== */
.skin-cloud-light.inside-header,
.skin-cloud-light.inside-header #main,
.skin-cloud-light.inside-header #content {
  background: linear-gradient(180deg, #eef3ff 0%, #e8f2fc 35%, #f2f0ff 100%) fixed !important;
}
/* iframe 内：仅作用于普通 panel-default，不动 bg-*-gradient 等带色卡 */
.skin-cloud-light.inside-header .panel-default {
  border: none;
  border-radius: var(--fa-cloud-radius);
  box-shadow: var(--fa-cloud-card-shadow);
  background: #fff;
}
.skin-cloud-light.inside-header .panel-default > .panel-heading {
  background: #fff;
  border-bottom: 1px solid var(--fa-cloud-border);
  color: var(--fa-cloud-text);
  font-weight: 600;
  border-radius: var(--fa-cloud-radius) var(--fa-cloud-radius) 0 0;
}

/* ==========================================================
   Layer 弹窗（fastadmin-layer）样式重塑：
   - 圆角 + 阴影
   - 标题栏改成白底 + 主色字（与主界面云控风格统一）
   - 底部按钮区右对齐
   作用域同时覆盖父级（.skin-cloud-light）和 iframe 内（.skin-cloud-light.inside-header）
   ========================================================== */
.skin-cloud-light .layui-layer,
.skin-cloud-light.inside-header .layui-layer {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 21, 41, 0.18), 0 4px 12px rgba(24, 144, 255, 0.08) !important;
  overflow: hidden;
  border: none !important;
}

/* 标题栏：白底 + 主色字 */
.skin-cloud-light .layui-layer .layui-layer-title,
.skin-cloud-light.inside-header .layui-layer .layui-layer-title {
  background: #fff !important;
  color: var(--fa-cloud-text) !important;
  border-bottom: 1px solid var(--fa-cloud-border) !important;
  border-radius: 12px 12px 0 0 !important;
  height: 46px;
  line-height: 46px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 14px;
}

/* 标题栏右上角的关闭/最小化/最大化按钮颜色调整为浅色 */
.skin-cloud-light .layui-layer .layui-layer-setwin a,
.skin-cloud-light.inside-header .layui-layer .layui-layer-setwin a {
  background-position-y: 0;
}
.skin-cloud-light .layui-layer .layui-layer-setwin .layui-layer-ico,
.skin-cloud-light.inside-header .layui-layer .layui-layer-setwin .layui-layer-ico {
  filter: grayscale(0.4) brightness(0.8);
}

/* 底部按钮区右对齐（原为居中）。
   注意：FastAdmin 的 Fast.api.layerfooter 会把 iframe 内表单底部 HTML
   （结构：.row > .col-sm-2 占位 + .col-sm-8 按钮）整段拷贝进父窗口的
   .layui-layer-btn，因此除了容器右对齐，还要扁平化里面的栅格列宽 */
.skin-cloud-light .layui-layer .layui-layer-btn,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn {
  text-align: right !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--fa-cloud-border);
  background: #fafbff;
  border-radius: 0 0 12px 12px;
}
.skin-cloud-light .layui-layer .layui-layer-btn .row,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .row {
  margin: 0 !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .row > label.control-label,
.skin-cloud-light .layui-layer .layui-layer-btn .row > .col-sm-2,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .row > label.control-label,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .row > .col-sm-2 {
  display: none !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .row > div[class*="col-"],
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .row > div[class*="col-"] {
  width: 100% !important;
  float: none !important;
  text-align: right !important;
  padding: 0 !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .btn,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .btn {
  border-radius: 8px;
  padding: 8px 20px;
  margin-left: 8px;
}
/* Layer 默认用 <a>，与 backend 固定 height/line-height 冲突时易显“框套色”；统一为弹性布局 + 同系主色/灰边 */
.skin-cloud-light .layui-layer .layui-layer-btn > a,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 8px 22px !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.skin-cloud-light .layui-layer .layui-layer-btn > a + a,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn > a + a {
  margin-left: 12px !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn0,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn0 {
  background: var(--fa-cloud-primary) !important;
  border: 1px solid var(--fa-cloud-primary) !important;
  color: #fff !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn0:hover,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn0:hover {
  background: var(--fa-cloud-primary-hover) !important;
  border-color: var(--fa-cloud-primary-hover) !important;
  color: #fff !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn0:focus,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn0:focus {
  outline: none !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn0:focus-visible,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn0:focus-visible {
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.25) !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn1,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn1 {
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  /* 覆盖 backend.css 白字 !important，避免白底看不见字 */
  color: var(--fa-cloud-text-secondary) !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn1:hover,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn1:hover {
  background: rgba(24, 144, 255, 0.06) !important;
  border-color: var(--fa-cloud-primary) !important;
  color: var(--fa-cloud-primary) !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn1:focus,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn1:focus {
  outline: none !important;
}
.skin-cloud-light .layui-layer .layui-layer-btn .layui-layer-btn1:focus-visible,
.skin-cloud-light.inside-header .layui-layer .layui-layer-btn .layui-layer-btn1:focus-visible {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.28) !important;
}

/* 弹窗内表单的 footer：FastAdmin 用 .form-group.layer-footer 包裹，
   原本 col-sm-2 占位 + col-sm-8 装按钮，看起来像居中。
   云控风格下统一改成右对齐 + 浅色分隔条 */
.skin-cloud-light .form-group.layer-footer,
.skin-cloud-light.inside-header .form-group.layer-footer {
  text-align: right !important;
  background: #fafbff;
  border-top: 1px solid var(--fa-cloud-border);
  padding: 12px 18px;
  margin: 0;
}
.skin-cloud-light .form-group.layer-footer > label.control-label,
.skin-cloud-light.inside-header .form-group.layer-footer > label.control-label {
  display: none;
}
.skin-cloud-light .form-group.layer-footer > div[class*="col-"],
.skin-cloud-light.inside-header .form-group.layer-footer > div[class*="col-"] {
  width: 100% !important;
  float: none !important;
  text-align: right;
  padding: 0;
}
.skin-cloud-light .form-group.layer-footer .btn,
.skin-cloud-light.inside-header .form-group.layer-footer .btn {
  border-radius: 6px;
  padding: 6px 18px;
  margin-left: 8px;
}

/* 通用 .form-actions 容器（部分页面使用此 class）也右对齐 */
.skin-cloud-light .form-actions,
.skin-cloud-light.inside-header .form-actions {
  text-align: right !important;
  background: #fafbff;
  border-top: 1px solid var(--fa-cloud-border);
  padding: 12px 18px;
  margin-top: 0;
}