/* ============================================================
   主框架布局：左侧固定菜单栏(200px) + 右侧弹性内容区
   ============================================================ */
/* 页面占满整屏，隐藏滚动 */
html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--page-bg);
}

/* 整体左右两栏 flex */
.layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}

/* ---------- 左侧菜单栏 ---------- */
/* 侧栏容器：主题底色 + 阴影 + 过渡 */
.sidebar {
  position: relative;
  width: 200px;
  height: 100%;
  background: var(--sidebar-bg);
  -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, .04);
  -moz-box-shadow: 2px 0 8px rgba(0, 0, 0, .04);
  box-shadow: 2px 0 8px rgba(0, 0, 0, .04);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: width .3s ease;
  -moz-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
  z-index: 20;
  flex: 0 0 auto;
}

/* 折叠态宽度 64px */
.sidebar.collapsed {
  width: 64px;
}

/* Logo 区 */
.logo {
  height: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  justify-content: space-evenly;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: justify-content .3s;
  -moz-transition: justify-content .3s;
  -o-transition: justify-content .3s;
  transition: justify-content .3s;
}

/* Logo 图标 34px */
.logoIcon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
}

/* Logo 文字 */
.logoTitle {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* 折叠态 Logo 居中 */
.sidebar.collapsed .logo {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
}

/* 折叠态 Logo 图标 32px */
.sidebar.collapsed .logoIcon {
  width: 32px;
  height: 32px;
}

/* 折叠态隐藏标题 */
.sidebar.collapsed .logoTitle {
  display: none;
}

/* 菜单滚动区 */
.menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 菜单项相对定位（浮层用） */
.menuItem {
  position: relative;
}

/* 菜单链接行 */
.menuLink {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  height: 44px;
  color: var(--text-regular);
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: background .2s, color .2s;
  -moz-transition: background .2s, color .2s;
  -o-transition: background .2s, color .2s;
  transition: background .2s, color .2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 菜单悬浮 */
.menuLink:hover {
  background: var(--menu-hover-bg);
  color: var(--primary);
}

/* 选中叶子：圆角胶囊 + 右侧深蓝竖线（满行高） */
.menuItem.active>.menuLink {
  color: var(--menu-active-color);
  font-weight: 600;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.menuItem.active>.menuLink::before {
  content: "";
  position: absolute;
  inset: 4px 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: var(--menu-active-bg);
  z-index: 0;
}

.menuItem.active>.menuLink>* {
  position: relative;
  z-index: 1;
}

/* 选中项悬浮时去掉整行底色，避免与胶囊叠加 */
.menuItem.active>.menuLink:hover {
  background: transparent;
}

/* 右侧深蓝竖线：垂直居中、约整行高度六成 */
.sidebar .menuItem.active>.menuLink::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 3px;
  height: 28px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
  background: var(--menu-active-line);
  z-index: 1;
}

/* 菜单文字截断 */
.menuText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 面包屑 */
.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 面包屑普通项 */
.breadcrumb .crumb {
  color: var(--text-secondary);
}

/* 面包屑当前项蓝色 */
.breadcrumb .crumbCurrent {
  color: var(--primary);
  font-weight: 500;
}

/* 面包屑分隔符 */
.breadcrumb .crumbSep {
  margin: 0 8px;
  color: var(--text-secondary);
}

/* 菜单图标容器 */
.menuIco {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 菜单图标 svg 尺寸 */
.menuIco svg {
  width: 16px;
  height: 16px;
}

/* 折叠态只显示图标 */
.sidebar.collapsed .menuIco {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* 缩进：顶级 15% */
.menuLink.level0 {
  padding-left: 15%;
}

/* 缩进：子级 22% */
.menuLink.level1,
.menuLink.level2 {
  padding-left: 22%;
}

/* 下拉箭头 */
.arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: auto;
  margin-right: 12px;
  -webkit-transition: transform .25s ease;
  -moz-transition: transform .25s ease;
  -o-transition: transform .25s ease;
  transition: transform .25s ease;
}

/* 展开时箭头旋转 180° */
.menuItem.open>.menuLink .arrow {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* 子菜单容器：初始隐藏 */
.child {
  display: none;
}

/* 折叠态菜单行居中 */
.sidebar.collapsed .menuLink {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0 !important;
}

/* 折叠态不显示首字 */
.sidebar.collapsed .menuLink::after {
  content: none;
}

/* 折叠态隐藏文字和箭头 */
.sidebar.collapsed .menuText,
.sidebar.collapsed .arrow {
  display: none;
}

/* 折叠态隐藏子菜单 */
.sidebar.collapsed .child {
  display: none !important;
}

/* 折叠态选中叶子图标变蓝 */
.sidebar.collapsed .menuItem.active>.menuLink::after {
  color: var(--menu-active-color);
}

/* 折叠态选中叶子所在顶级父级高亮（圆角胶囊 + 右侧竖线，满行高） */
.sidebar.collapsed .menuItem.activeGroup>.menuLink {
  color: var(--menu-active-color);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.sidebar.collapsed .menuItem.activeGroup>.menuLink::before {
  content: "";
  position: absolute;
  inset: 4px 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: var(--menu-active-bg);
  z-index: 0;
}

.sidebar.collapsed .menuItem.activeGroup>.menuLink>* {
  position: relative;
  z-index: 1;
}

.sidebar.collapsed .menuItem.activeGroup>.menuLink::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 3px;
  height: 28px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
  background: var(--menu-active-line);
  z-index: 1;
}

/* 折叠态父级图标变蓝 */
.sidebar.collapsed .menuItem.activeGroup>.menuLink::after {
  color: var(--menu-active-color);
}

/* 折叠态悬浮浮层 */
.foldPopup {
  position: absolute;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .15s ease, visibility .15s;
  -moz-transition: opacity .15s ease, visibility .15s;
  -o-transition: opacity .15s ease, visibility .15s;
  transition: opacity .15s ease, visibility .15s;
  pointer-events: auto;
}

/* 浮层显示 */
.foldPopup.show {
  opacity: 1;
  visibility: visible;
}

/* 子菜单面板样式 */
.foldPopup[data-mode="panel"] {
  background: var(--popup-bg);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: var(--shadow-lg);
  -moz-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 150px;
}

/* 浮层子项 */
.foldPopup .fpItem {
  padding: 12px;
  font-size: 13px;
  color: var(--text-regular);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}

/* 浮层子项悬浮 */
.foldPopup .fpItem:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

/* 浮层子项选中 */
.foldPopup .fpItem.active {
  background: var(--selected-bg);
  color: var(--primary);
  font-weight: 600;
}

.foldPopup .fpItem.active span {
  background: var(--primary) !important;
}

/* 叶子 tooltip 样式 */
.foldPopup[data-mode="tip"] {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #303133;
  color: #fff;
  font-size: 13px;
  padding: 7px 12px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 180px;
}

/* tooltip 文字截断 */
.foldPopup[data-mode="tip"] .fpTipText {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* tooltip 左侧小箭头 */
.fpArrow {
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #303133;
  -webkit-transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- 右侧主区域 ---------- */
.main {
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}

/* 顶部工具条 */
.toolbar {
  height: 52px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  padding: 0 16px;
  flex: 0 0 auto;
}

/* 工具条左侧 */
.toolbar .tl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}

/* 工具条右侧 */
.toolbar .tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
}

/* 图标按钮 */
.iconBtn {
  width: 36px;
  height: 36px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: var(--text-regular);
  -webkit-transition: background .2s, color .2s;
  -moz-transition: background .2s, color .2s;
  -o-transition: background .2s, color .2s;
  transition: background .2s, color .2s;
}

/* 图标按钮悬浮 */
.iconBtn:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

/* 折叠按钮图标过渡 */
.collapseBtn svg {
  -webkit-transition: transform .3s ease;
  -moz-transition: transform .3s ease;
  -o-transition: transform .3s ease;
  transition: transform .3s ease;
}

/* 折叠按钮旋转 180° */
.collapseBtn.rotated svg {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* 刷新按钮旋转动画 */
.refreshBtn.rotating svg {
  -webkit-animation: spin .6s linear;
  -moz-animation: spin .6s linear;
  -o-animation: spin .6s linear;
  animation: spin .6s linear;
}

/* 旋转关键帧 */
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 用户区 */
.userBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}

/* 用户区悬浮 */
.userBox:hover {
  background: var(--hover-bg);
}

/* 头像圆 */
.avatar {
  width: 36px;
  height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid rgba(38, 186, 250, 0.4);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 昵称 */
.userName {
  font-size: 14px;
  color: var(--text-main);
}

/* 用户下拉 */
.userDrop {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--popup-bg);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: var(--shadow-lg);
  -moz-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  display: none;
  z-index: 40;
}

/* 用户下拉显示 */
.userDrop.show {
  display: block;
}

/* 下拉项 */
.userDrop .udItem {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text-regular);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

/* 下拉项悬浮 */
.userDrop .udItem:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

/* 标签栏 */
.tabbar {
  height: 45px;
  background: var(--tabbar-bg);
  border-bottom: 1px solid var(--border-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}

/* 单个标签：圆角胶囊，未选中也有底色 */
.tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 14px;
  margin: 0 4px;
  color: var(--text-regular);
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  -webkit-transition: color .2s, background .2s, border-color .2s;
  -moz-transition: color .2s, background .2s, border-color .2s;
  -o-transition: color .2s, background .2s, border-color .2s;
  transition: color .2s, background .2s, border-color .2s;
}

/* 标签悬浮 */
.tab:hover {
  background: var(--tab-hover-bg);
  color: var(--primary);
  border-color: var(--tab-border-hover);
}

/* 激活标签：浅蓝胶囊 */
.tab.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-color);
  border-color: var(--primary);
}

/* 标签图标容器 */
.tabIco {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 标签图标 svg */
.tabIco svg {
  width: 13px;
  height: 13px;
}

/* 标签栏外层 wrap */
.tabbarWrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--tabbar-bg);
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}

/* wrap 内标签栏弹性 */
.tabbarWrap .tabbar {
  flex: 1;
}

/* 更多按钮 */
.tabMore {
  flex: 0 0 auto;
  width: 50px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-regular);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
}

/* 更多按钮悬浮 */
.tabMore:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

/* 更多下拉面板 */
.tabMenu {
  position: absolute;
  right: 8px;
  top: 50px;
  background: var(--popup-bg);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  padding: 6px 0;
  display: none;
  z-index: 50;
}

/* 更多下拉显示 */
.tabMenu.show {
  display: block;
  -webkit-animation: tabMenuIn .15s ease;
  -moz-animation: tabMenuIn .15s ease;
  -o-animation: tabMenuIn .15s ease;
  animation: tabMenuIn .15s ease;
}

/* 下拉展开动画 */
@-webkit-keyframes tabMenuIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes tabMenuIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

/* 下拉菜单项 */
.tabMenuItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}

/* 下拉项悬浮 */
.tabMenuItem:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

/* 下拉项图标 */
.tabMenuItem .miIco {
  width: 16px;
  text-align: center;
  font-size: 15px;
}

/* 下拉分隔线 */
.miDivider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0;
}

/* 标签关闭按钮：悬浮才出现（inline，出现时标签稍变宽） */
.tabClose {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0;
  height: 16px;
  overflow: hidden;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #909399;
  padding: 0;
  margin-left: -6px;
  opacity: 0;
  -webkit-transition: width .22s ease, opacity .22s ease, margin-left .22s ease, background .18s ease, color .18s ease;
  -moz-transition: width .22s ease, opacity .22s ease, margin-left .22s ease, background .18s ease, color .18s ease;
  -o-transition: width .22s ease, opacity .22s ease, margin-left .22s ease, background .18s ease, color .18s ease;
  transition: width .22s ease, opacity .22s ease, margin-left .22s ease, background .18s ease, color .18s ease;
}

/* 关闭 svg */
.tabClose svg {
  display: block;
  width: 10px;
  height: 10px;
}

/* 标签悬浮时显示关闭 */
.tab:hover .tabClose {
  width: 16px;
  margin-left: 0;
  opacity: 1;
}

/* 关闭按钮悬停变红（危险操作提示） */
.tabClose:hover {
  color: #f56c6c;
}

/* 内容区 */
.content {
  flex: 1;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

/* iframe 满铺 */
#mainFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* 底部版权 */
.footer {
  flex: 0 0 auto;
  height: 32px;
  background: var(--surface);
  border-top: 1px solid var(--border-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 功能开发中占位 */
.placeholder {
  position: absolute;
  inset: 0;
  display: none;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--page-bg);
}

/* 占位卡片 */
.placeholder .phCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 56px 90px;
  background: var(--surface);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
  -moz-box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

/* 占位图标圆底 */
.placeholder .phIcoWrap {
  width: 104px;
  height: 104px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: var(--ph-ico-bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* 占位图标 svg */
.placeholder .phIcoWrap svg {
  width: 56px;
  height: 56px;
}

/* 占位标题 */
.placeholder .phTitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
}

/* 占位副文案 */
.placeholder .phDesc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 窄屏适配 */
@media (max-width: 720px) {
  .toolbar {
    padding: 0 8px;
  }

  .toolbar .userName {
    display: none;
  }

  .toolbar .tr {
    gap: 0;
  }

  #toolbarTitle {
    font-size: 13px;
  }
}

/* ==========================================================================
 * 仅侧边栏深色主题（页面浅色，仅侧边栏区域变色）
 * 由主题下拉选择 "仅侧边栏深色" 触发，class="sidebar dark" 生效
 * ========================================================================== */
.sidebar.dark {
  background: #1f2937;
  -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, .25);
  -moz-box-shadow: 2px 0 10px rgba(0, 0, 0, .25);
  box-shadow: 2px 0 10px rgba(0, 0, 0, .25);
}

.sidebar.dark .logo {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar.dark .logoTitle {
  color: #e5e7eb;
}

.sidebar.dark .menuLink {
  color: #cbd5e1;
}

.sidebar.dark .menuLink .arrow {
  color: #94a3b8;
}

.sidebar.dark .menuIco {
  color: #cbd5e1;
}

.sidebar.dark .menuLink:hover {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

.sidebar.dark .menuLink:hover .arrow {
  color: #ffffff;
}

.sidebar.dark .menuLink:hover .menuIco {
  color: #ffffff;
}

.sidebar.dark .menuItem.active>.menuLink {
  color: #66b1ff;
}

.sidebar.dark .menuItem.active>.menuLink::before {
  background: rgba(64, 158, 255, .20);
}

.sidebar.dark .menuItem.active>.menuLink:hover {
  background: transparent;
}

.sidebar.dark .menuItem.active>.menuLink .menuIco,
.sidebar.dark .menuItem.active>.menuLink .arrow {
  color: #66b1ff;
}

.sidebar.dark .menuItem.active>.menuLink::after {
  background: #409EFF;
}

.sidebar.dark.collapsed .menuItem.activeGroup>.menuLink {
  color: #66b1ff;
}

.sidebar.dark.collapsed .menuItem.activeGroup>.menuLink::before {
  background: rgba(64, 158, 255, .20);
}

.sidebar.dark.collapsed .menuItem.activeGroup>.menuLink .menuIco {
  color: #66b1ff;
}

.sidebar.dark.collapsed .menuItem.activeGroup>.menuLink::after {
  background: #409EFF;
}

.sidebar.dark.collapsed .menuItem.active>.menuLink::after {
  color: #66b1ff;
}

.sidebar.dark .foldPopup[data-mode="panel"] {
  background: #263040;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  -moz-box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.sidebar.dark .foldPopup .fpItem {
  color: #cbd5e1;
}

.sidebar.dark .foldPopup .fpItem:hover {
  background: rgba(64, 158, 255, .16);
  color: #66b1ff;
}

.sidebar.dark .foldPopup .fpItem.active {
  background: rgba(64, 158, 255, .22);
  color: #66b1ff;
}

/* ==========================================================================
 * 主题切换下拉选择菜单
 * ========================================================================== */
.themeBtn {
  position: relative;
}

.themeMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  background: var(--surface);
  text-align: left;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: var(--shadow-lg);
  -moz-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 132px;
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition: opacity .15s ease, -webkit-transform .15s ease, visibility .15s;
  -moz-transition: opacity .15s ease, -moz-transform .15s ease, visibility .15s;
  -o-transition: opacity .15s ease, -o-transform .15s ease, visibility .15s;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.themeMenu.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.themeOption {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-regular);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.themeOption:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

.themeOption.active {
  background: var(--selected-bg);
  color: var(--primary);
  font-weight: 600;
}

/* 主题图标：浅色显示月亮，深色显示太阳 */
.themeBtn .themeIco.sun {
  display: none;
}

.themeBtn .themeIco.moon {
  display: inline-block;
}

.themeBtn.theme-dark .themeIco.moon {
  display: none;
}

.themeBtn.theme-dark .themeIco.sun {
  display: inline-block;
}