html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

.main, .content, .container, .modal-card, .modal-card-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tabs 列表可换行并保持左对齐 */
.tabs > ul {
  flex-wrap: wrap;
  overflow-x: auto;
  justify-content: flex-start;
  margin-left: 0;
  padding-left: 0;
  gap: 0.375rem; /* 标签间的水平间距 */
}
/* 去除可能的左缩进，同时保留标签之间空隙 */
.tabs li, .tabs li a {
  margin-left: 0;
  padding-left: 0;
  margin-right: 0.375rem; /* 标签右侧空隙 */
}

.resTabs, .bldQueue, .resQueue, .sticky, .hscroll, .vscroll, .graphContainer, .msgQueue {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto; /* 允许水平滚动以防内容过宽 */
}

/* 确保资源标签页容器完全填满屏幕宽度 */
.resTabs {
  min-width: 100vw; /* 使用视口宽度确保填满屏幕 */
  margin: 0;
  padding: 0;
}

/* 优化标签页内容的显示 */
.resTabs .tabs {
  width: 100%;
  min-width: 100%;
}

.resTabs .tabs > ul {
  width: 100%;
  min-width: 100%;
  flex-wrap: wrap; /* 允许标签换行 */
}

/* 确保标签页内容区域填满宽度 */
.resTabs .tab-content,
.resTabs .tab-pane {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .split {
    display: flex;
    flex-direction: column !important;
  }
  .split > div {
    width: 100% !important;
  }
  .split > div:nth-of-type(2) {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .columns {
    display: block !important;
  }
  .column {
    width: 100% !important;
  }

  /* 移动端容器不留左右内边距，左侧紧贴屏幕 */
  .main, .content, .container, .resTabs, .bldQueue, .resQueue, .sticky, .columns, .column, .section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container { margin: 0 !important; }

  /* Tabs 标题与下划线在移动端强制左贴边，同时保留标签间空隙 */
  .tabs, .tabs > ul {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    gap: 0.375rem !important; /* 标签间的水平间距 */
  }
  .tabs li, .tabs li a {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0.375rem !important;
  }

  /* 底部动作区强制左对齐 */
  .main .content .divider,
  .main .content .action,
  .main .content .action .aTitle,
  .main .content .action a.button,
  .main .content .action .button,
  .main .content .action div.special {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: auto !important;
  }

  /* 按钮水平/垂直都留空隙，允许换行，避免紧贴 */
  .main .content .action a.button,
  .main .content .action .button,
  .modal .action a.button {
    margin-left: 0 !important;
    margin-right: 0.5rem !important; /* 按钮左右间距 */
    margin-bottom: 0.5rem !important; /* 按钮上下间距 */
    display: inline-block; /* 横向排列时保留间距 */
    width: auto; /* 不强制全宽，便于横向排布 */
    white-space: normal;
  }

  .powerGrid .circuit {
    min-width: 0 !important;
  }

  .button, .basic-button {
    white-space: normal;
  }

  /* Tooltip：不固定左右，依据 Popper 放置并增加安全间距，避免覆盖按钮
  .b-tooltip .tooltip, .tooltip[data-popper-placement], .tooltip[x-placement] {
    max-width: min(90vw, 420px) !important;
    word-break: break-word;
    z-index: 10000;
    pointer-events: none !important; 不拦截点击，按钮可继续点击
  }
  依据方向增加与触发元素的间距（加大到 12/10px）
  .tooltip[data-popper-placement^='right'], [x-placement^='right'] { margin-left: 12px !important; }
  .tooltip[data-popper-placement^='left'],  [x-placement^='left']  { margin-right: 12px !important; }
  .tooltip[data-popper-placement^='top'],   [x-placement^='top']   { margin-bottom: 10px !important; }
  .tooltip[data-popper-placement^='bottom'],[x-placement^='bottom']{ margin-top: 10px !important; }

  移动端：如箭头导致遮挡则隐藏箭头（可根据需要保留）
  .b-tooltip .tooltip::before, .b-tooltip .tooltip::after {
    display: none !important;
  }*/
}