:root {
  /* 主题色 */
  --theme-color: #1b67fa;
  --theme-color-light: #e8f1fe;
  --theme-color-dark: #0d4dba;

  /* 辅助色 */
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --hover-color: #409eff;
  --hover-bg-color: #ecf5ff;
  --hover-border-color: #c6e2ff;
  --active-color: #3d95f1;
  --active-border-color: #75b2f1;
  --hover-bg-color-primary: #66b1ff;
  --active-bg-color-primary: #3a8ee6;
  --hover-bg-color-success: #85ce61;
  --active-bg-color-success: #5daf34;
  --hover-bg-color-warning: #ebb563;
  --active-bg-color-warning: #cf9236;
  --hover-bg-color-danger: #f78989;
  --active-bg-color-danger: #dd6161;

  /* 字体系统 */
  --font-body: 'Microsoft YaHei', 微软雅黑, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  color: #333;

  /* 组件变量 */
  --header-height: 64px;
  --footer-height: 40px;
}

* {
  box-sizing: border-box;
}

body,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

a {
  color: #333;
  text-decoration: inherit;
}
a:hover {
  color: #333;
}

ul {
  list-style: none;
}

button {
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  color: #606266;
  appearance: none;
  text-align: center;
  font-weight: 500;
  user-select: none;
  font-size: 14px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dcdfe6;
  outline: none;
  transition: 0.1s;
  padding: 12px 20px;
  border-radius: 4px;

  &:hover,
  &:focus {
    color: var(--hover-color);
    background-color: var(--hover-bg-color);
    border-color: var(--hover-border-color);
  }

  &:active {
    color: var(--active-color);
    border-color: var(--active-border-color);
  }

  &.primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);

    &:hover,
    &:focus {
      background-color: var(--hover-bg-color-primary);
      border-color: var(--hover-bg-color-primary);
    }

    &:active {
      background-color: var(--active-bg-color-primary);
      border-color: var(--active-bg-color-primary);
    }
  }

  &.success {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);

    &:hover,
    &:focus {
      background-color: var(--hover-bg-color-success);
      border-color: var(--hover-bg-color-success);
    }

    &:active {
      background-color: var(--active-bg-color-success);
      border-color: var(--active-bg-color-success);
    }
  }

  &.warning {
    color: #fff;
    background-color: var(--warning-color);
    border-color: var(--warning-color);

    &:hover,
    &:focus {
      background-color: var(--hover-bg-color-warning);
      border-color: var(--hover-bg-color-warning);
    }

    &:active {
      background-color: var(--active-bg-color-warning);
      border-color: var(--active-bg-color-warning);
    }
  }

  &.danger {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);

    &:hover,
    &:focus {
      background-color: var(--hover-bg-color-danger);
      border-color: var(--hover-bg-color-danger);
    }

    &:active {
      background-color: var(--active-bg-color-danger);
      border-color: var(--active-bg-color-danger);
    }
  }
}

#app {
  min-width: 1300px;
}

#header-container {
  height: 140px;
}

.container {
  width: 1300px;
  margin: 0 auto;
}

.hide {
  display: none !important;
}

.pointer {
  cursor: pointer;
}

#breadcrumb {
  padding-left: 38px;
  background: url('./craft-icon-1.png') no-repeat 9px center/14px auto;
  color: #666;
}

#breadcrumb a {
  color: #666;
}

@media screen and (min-resolution: 144dpi) and (max-width: 2240px) {
  #app:not(.mobile) {
    /*zoom: 0.6667;*/ /* 150%缩放的逆向调整 */
  }
}

/* 移动端 */
#app.mobile {
  width: 7.5rem;
  min-width: auto;
}

#app.mobile .container {
  width: 100%;
}

#app.mobile div {
  font-size: 0; /* 清除默认字体尺寸继承 */
}

#app.mobile #breadcrumb {
  padding-left: 0.29rem;
  background: url('./craft-icon-1.png') no-repeat 0.08rem center/0.14rem auto;
  font-size: 0.16rem;
}

#app.mobile #breadcrumb a {
  font-size: 0.16rem;
}