/* CSS 变量定义 */
:root {
  --spacing-sm: 10px;
  --spacing-md: 18px;
}

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础样式 */
html {
  font-size: 16px;
  line-height: 1.5;

  /* 让文字更加清晰平滑,减少文字的锯齿感,特别在浅色文字配深色背景时效果明显*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
}

/* 主容器 */
.main {
  height: 100%;
  padding: var(--spacing-sm);
  background-color: #f0f1f3;
}

/* 卡片基础样式 */
.card {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

.table-search {
  padding: var(--spacing-md);
  height: 70px;
}

/* 主要布局 */
.main-box {
  display: flex;
  gap: var(--spacing-sm);
  height: 100%;
}

/* 右侧内容区 */
.table-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
}

.table-main {
  flex: 1;
  padding: var(--spacing-md);
  overflow: auto;
}

.title {
  top: 2px;
  margin-left: 20px;
  font-size: 21px;
  font-weight: 550;
  position: relative;
  color: #16baaa;
}

.layout-right {
  margin-top: 8px;
  margin-right: 20px;
}

.layui-tabs {
  width: 100%;
}

.layui-tabs .layui-tabs-header {
  text-align: center;
}

.layui-tabs .layui-tabs-header li {
  display: inline-block;
  float: none;
}

.woo-tool-text-delimiter {
  width: 1px;
  height: 12px;
  background: #eeeeee;
  display: inline-block;
  margin: 0 6px 0 4px;
}

.woo-theme-color {
  color: #16baaa !important;
}

.woo-theme-color-red {
  color: #ff5722 !important;
}

.woo-tool-span {
  margin: 0 3px;
  position: relative;
  top: -1px;
  cursor: pointer;
}