:root {
    /* 基础色值 */
    --xd-color-white: #ffffff;
    --xd-color-black: #000000;

    /* 功能色RGB值 */
    --xd-color-primary-rgb: 47, 84, 235;
    --xd-color-success-rgb: 82, 196, 26;
    --xd-color-warning-rgb: 250, 173, 20;
    --xd-color-danger-rgb: 255, 77, 79;
    --xd-color-error-rgb: 255, 77, 79;
    --xd-color-info-rgb: 144, 147, 153;

    /* 功能色十六进制值 */
    --xd-color-primary: #1677ff;
    --xd-color-primary-light-3: #4096ff;
    --xd-color-primary-light-5: #69b1ff;
    --xd-color-primary-light-7: #91caff;
    --xd-color-primary-light-8: #bae0ff;
    --xd-color-primary-light-9: #e6f4ff;
    --xd-color-primary-dark-2: #0958d9;

    --xd-color-success: #52c41a;
    --xd-color-success-light-3: #86d65f;
    --xd-color-success-light-5: #a9e28d;
    --xd-color-success-light-7: #cbedba;
    --xd-color-success-light-8: #dcf3d1;
    --xd-color-success-light-9: #eef9e8;
    --xd-color-success-dark-2: #429c14;

    --xd-color-warning: #faad14;
    --xd-color-warning-light-3: #fcc65a;
    --xd-color-warning-light-5: #fcd68a;
    --xd-color-warning-light-7: #fee6b9;
    --xd-color-warning-light-8: #feeea8;
    --xd-color-warning-light-9: #fff6e8;
    --xd-color-warning-dark-2: #c88a10;

    --xd-color-danger: #ff4d4f;
    --xd-color-danger-light-3: #ff8283;
    --xd-color-danger-light-5: #ffa6a7;
    --xd-color-danger-light-7: #ffc9ca;
    --xd-color-danger-light-8: #ffdcdc;
    --xd-color-danger-light-9: #ffeDED;
    --xd-color-danger-dark-2: #cc3d3f;

    --xd-color-error: #ff4d4f;
    --xd-color-error-light-3: #ff8283;
    --xd-color-error-light-5: #ffa6a7;
    --xd-color-error-light-7: #ffc9ca;
    --xd-color-error-light-8: #ffdbdc;
    --xd-color-error-light-9: #ffeDED;
    --xd-color-error-dark-2: #cc3d3f;

    --xd-color-info: #909399;
    --xd-color-info-light-3: #b1b3b7;
    --xd-color-info-light-5: #c7c9cc;
    --xd-color-info-light-7: #dddee1;
    --xd-color-info-light-8: #e8e9ea;
    --xd-color-info-light-9: #f3f4f4;
    --xd-color-info-dark-2: #73757a;

    /* 粉色系 */
    --xd-color-pink: #eb2f96;
    --xd-color-pink-light-3: #f160ae;
    --xd-color-pink-light-5: #f586c5;
    --xd-color-pink-light-7: #f9addc;
    --xd-color-pink-light-8: #fbc6e6;
    --xd-color-pink-light-9: #fde0f0;
    --xd-color-pink-dark-2: #b72574;

    /* 紫色系 */
    --xd-color-purple: #722ed1;
    --xd-color-purple-light-3: #8f59d8;
    --xd-color-purple-light-5: #aa7fe0;
    --xd-color-purple-light-7: #c5a4e8;
    --xd-color-purple-light-8: #d6bdea;
    --xd-color-purple-light-9: #e7d6f2;
    --xd-color-purple-dark-2: #5a25a2;

    /* 背景色 */
    --xd-bg-color: #ffffff;
    --xd-bg-color-page: #f0f2f5;
    --xd-bg-color-overlay: #ffffff;

    /* 文本色 */
    --xd-text-color-primary: rgba(0, 0, 0, 0.92);
    --xd-text-color-regular: rgba(0, 0, 0, 0.88);
    --xd-text-color-secondary: rgba(0, 0, 0, 0.6);
    --xd-text-color-placeholder: rgba(0, 0, 0, 0.36);
    --xd-text-color-disabled: rgba(0, 0, 0, 0.28);

    /* 边框色 */
    --xd-border-color: #d9d9d9;
    --xd-border-color-light: #e8e8e8;
    --xd-border-color-lighter: #ededed;
    --xd-border-color-extra-light: #f0f0f0;
    --xd-border-color-dark: #d4d7de;
    --xd-border-color-darker: #cdd0d6;

    /* 填充色 */
    --xd-fill-color: #f0f0f0;
    --xd-fill-color-light: #f5f5f5;
    --xd-fill-color-lighter: #f7f7f7;
    --xd-fill-color-extra-light: #fafafa;
    --xd-fill-color-dark: #ebedf0;
    --xd-fill-color-darker: #e6e8eb;
    --xd-fill-color-blank: #ffffff;

    /* 字体设置 */
    --xd-font-size-extra-large: 20px;
    --xd-font-size-large: 18px;
    --xd-font-size-medium: 16px;
    --xd-font-size-base: 14px;
    --xd-font-size-small: 13px;
    --xd-font-size-extra-small: 12px;
    --xd-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --xd-font-weight-primary: 500;
    --xd-font-line-height-primary: 24px;

    /* 层级设置 */
    --xd-index-normal: 1;
    --xd-index-top: 1000;
    --xd-index-popper: 2000;

    /* 边框圆角 */
    --xd-border-radius-base: 3px;
    --xd-border-radius-small: 2px;
    --xd-border-radius-round: 20px;
    --xd-border-radius-circle: 100%;

    /* 过渡动画 */
    --xd-transition-duration: 0.3s;
    --xd-transition-duration-fast: 0.2s;
    --xd-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
    --xd-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
    --xd-transition-all: all var(--xd-transition-duration) var(--xd-transition-function-ease-in-out-bezier);
    --xd-transition-fade: opacity var(--xd-transition-duration) var(--xd-transition-function-fast-bezier);
    --xd-transition-md-fade: transform var(--xd-transition-duration) var(--xd-transition-function-fast-bezier), opacity var(--xd-transition-duration) var(--xd-transition-function-fast-bezier);
    --xd-transition-fade-linear: opacity var(--xd-transition-duration-fast) linear;
    --xd-transition-border: border-color var(--xd-transition-duration-fast) var(--xd-transition-function-ease-in-out-bezier);
    --xd-transition-box-shadow: box-shadow var(--xd-transition-duration-fast) var(--xd-transition-function-ease-in-out-bezier);
    --xd-transition-color: color var(--xd-transition-duration-fast) var(--xd-transition-function-ease-in-out-bezier);

    /* 组件尺寸 */
    --xd-component-size-large: 40px;
    --xd-component-size: 32px;
    --xd-component-size-small: 24px;

    /* 阴影效果 */
    --xd-box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    --xd-box-shadow-light: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --xd-box-shadow-lighter: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);

    /* 禁用状态 */
    --xd-disabled-bg-color: var(--xd-fill-color-light);
    --xd-disabled-text-color: var(--xd-text-color-placeholder);
    --xd-disabled-border-color: var(--xd-border-color-light);

    /* 遮罩层 */
    --xd-overlay-color: rgba(0, 0, 0, 0.8);
    --xd-overlay-color-light: rgba(0, 0, 0, 0.6);
    --xd-overlay-color-lighter: rgba(0, 0, 0, 0.45);
    --xd-mask-color: rgba(255, 255, 255, 0.4);
    --xd-mask-color-extra-light: rgba(255, 255, 255, 0.6);

    /* 边框设置 */
    --xd-border-width: 1px;
    --xd-border-style: solid;
    --xd-border-color-hover: var(--xd-text-color-disabled);
    --xd-border: var(--xd-border-width) var(--xd-border-style) var(--xd-border-color);

    /* SVG 单色 */
    --xd-svg-monochrome-grey: var(--xd-border-color);
}

/* 网格布局 */
.grid {
    display: -ms-grid;
    display: grid;
}
/* 网格布局---列数*/
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/*间距*/
.gap-5{gap: 5px;}
.gap-10{gap: 10px;}
.gap-15{gap: 15px;}
.gap-20{gap: 20px;}

/* 边线 */
.border-l{border-left: var(--xd-border-color) solid 1px;}
.border-r{border-right: var(--xd-border-color) solid 1px;}
.border-t{border-top: var(--xd-border-color) solid 1px;}
.border-b{border-bottom: var(--xd-border-color) solid 1px;}

/* 字体大小 */
.layui-font-12{font-size: 12px !important;}
.layui-font-13{font-size: 13px !important;}
.layui-font-14{font-size: 14px !important;}
.layui-font-16{font-size: 16px !important;}
.layui-font-18{font-size: 18px !important;}
.layui-font-20{font-size: 20px !important;}
.layui-font-22{font-size: 22px !important;}
.layui-font-24{font-size: 24px !important;}
.layui-font-26{font-size: 26px !important;}
.layui-font-28{font-size: 28px !important;}
.layui-font-30{font-size: 30px !important;}
.layui-font-32{font-size: 32px !important;}

/* 定位相关样式 */
.pos-a {
    position: absolute;
}

.pos-r {
    position: relative;
}

/* 外边距相关 */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* 宽高相关 */
.h-full {
    height: 100%;
    box-sizing: border-box;
}

.w-full {
    width: 100%;
    box-sizing: border-box;
}

/* 溢出相关 */
.o-hidden {
    overflow: hidden;
}

.o-y-auto {
    overflow-y: auto;
}

/* 圆角相关 */
.rounded-full {
    border-radius: 9999px;
}

/* 边框相关 */
.border-none {
    border-style: none;
}

/* 外边距-上 */
.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

/* 外边距-右 */
.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

/* 外边距-左 */
.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

/* 外边距-下 */
.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

/* 内边距-上 */
.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

/* 内边距-左 */
.pl-5 {
    padding-left: 5px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

/* 内边距-右 */
.pr-5 {
    padding-right: 5px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

/* 内边距-下 */
.pb-5 {
    padding-bottom: 5px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

/* 内边距-四周 */
.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-30 {
    padding: 30px !important;
}