/* 清除浮动 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* 隐藏元素 */
.hidden {
    display: none !important;
}

/* 隐藏文本（但保留在DOM中） */
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

/* 使元素不可见但仍占据空间 */
.invisible {
    visibility: hidden;
}

/* 强制元素可见 */
.visible {
    visibility: visible !important;
}

/* 垂直居中元素 */
.vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* 水平居中元素 */
.horizontal-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 水平垂直居中元素 */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 隐藏滚动条 */
.hide-scroll {
    overflow: hidden;
}

/* 禁用鼠标事件 */
.no-pointer-events {
    pointer-events: none;
}

/* 禁止选中文本 */
.no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* 强制鼠标为指针样式 */
.pointer {
    cursor: pointer;
}

/* 链接样式 */
.link {
    text-decoration: none;
    color: inherit;
}



/* Flex 容器 */
.flex-container {
    display: flex;
}

/* 水平居中 Flex 容器中的项目 */
.items-center {
    align-items: center;
}

/* 垂直居中 Flex 容器中的项目 */
.justify-center {
    justify-content: center;
}

/* 水平和垂直居中 Flex 容器中的项目 */
.centered {
    align-items: center;
    justify-content: center;
}

/* Flex 容器中的项目按比例分配剩余空间 */
.flex-auto {
    flex: 1;
}

/* Flex 容器中的项目在主轴上均匀分布 */
.space-between {
    justify-content: space-between;
}

/* Flex 容器中的项目在主轴两端对齐 */
.space-around {
    justify-content: space-around;
}

/* Flex 容器中的项目在主轴上居中对齐 */
.main-axis-center {
    justify-content: center;
}

/* Flex 容器中的项目在交叉轴上居中对齐 */
.cross-axis-center {
    align-items: center;
}

/* Flex 容器中的项目在交叉轴上底部对齐 */
.cross-axis-bottom {
    align-items: flex-end;
}

/* Flex 容器中的项目在交叉轴上顶部对齐 */
.cross-axis-top {
    align-items: flex-start;
}

/* Flex 容器中的项目在交叉轴上拉伸以填充整个容器 */
.cross-axis-stretch {
    align-items: stretch;
}

/* Flex 容器中的项目沿着主轴向右排列 */
.flex-row {
    flex-direction: row;
}

/* Flex 容器中的项目沿着主轴向左排列 */
.flex-row-reverse {
    flex-direction: row-reverse;
}

/* Flex 容器中的项目沿着主轴向下排列 */
.flex-column {
    flex-direction: column;
}

/* Flex 容器中的项目沿着主轴向上排列 */
.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Flex 容器中的项目换行显示 */
.flex-wrap {
    flex-wrap: wrap;
}

/* Flex 容器中的项目不换行显示 */
.flex-no-wrap {
    flex-wrap: nowrap;
}