:root {

    /*主要颜色，通常用于工具栏、状态栏和应用标题的背景色。*/
    --my-color-primary: #ffae5c;
    /*通常用于状态栏和导航栏的背景色，以确保这些元素与主要内容形成对比并提供清晰的边界*/
    --my-color-primary-dark: #ff9f50;
    /*通常用于按钮、链接和其他可交互元素的强调色。*/
    --my-color-accent: #ff9f50;
    --my-color-warm: #FFB800;

    --my-background-color: #f8f8f8;
    --my-background-color-sec: #F7F7F7;
    /*填写文本或选择文本的颜色*/
    --my-text-select-color-blue: #1E9FFF;
    /*淡灰色*/
    --my-color-gray-light: #dcdfe5;
    --my-font-color: #424242;
    --my-color-white: #fff;

    /* 字体大小 */
    --my-fontsize-xxs: 8px;
    --my-fontsize-xs: 10px;
    --my-fontsize-s: 12px;
    --my-fontsize-m: 14px;
    --my-fontsize-l: 16px;
    --my-fontsize-xl: 18px;
    --my-fontsize-xxl: 24px;

    /* 间距 */
    --my-spacing-xxs: 5px;
    --my-spacing-xs: 10px;
    --my-spacing-s: 15px;
    --my-spacing-m: 20px;
    --my-spacing-l: 50px;
}

.body {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    /* 视口高度的100%，确保垂直居中时有足够的空间 */
    background-color: var(--my-background-color);
    /* 背景颜色 */
    margin: 0;
    padding: 0;
    /* 确保没有额外的外边距影响布局 */
}

.my-container {
    background-color: var(--my-color-white);
}

.my-container.padding-s {
    padding: var(--my-spacing-s) var(--my-spacing-xs) var(--my-spacing-xs) var(--my-spacing-s);
}

.my-header {
    width: 100%;
    padding: 15px 10px;
    color: var(--my-background-color);
    background-color: var(--my-color-primary);
    font-size: var(--my-fontsize-l);
    font-weight: bold;
}

.my-download {
    text-align: right;
}

.my-content-indent {
    text-indent: 2em; /* 文段首行空2个汉字 */
    text-align: justify;
}

.my-title-font-xl {
    font-weight: bold;
    font-size: var(--my-fontsize-xl);
}

.my-title-font-l {
    font-weight: bold;
    font-size: var(--my-fontsize-l);
}

.my-title-font-s {
    font-weight: bold;
    font-size: var(--my-fontsize-s) !important;
}

.my-flex {
    display: flex;
    flex-direction: row;
}

.my-flex-item {
    flex: 1;
}

.my-row {
    flex-direction: row;
}

.my-column {
    flex-direction: column;
}

.my-boot {
    padding: 10px;
    font-size: var(--my-fontsize-m);
    color: var(--my-background-color-sec);
    background-color: var(--my-color-primary);
}

.my-boot .my-record {
    text-align: right;
}

.my-link {
    color: var(--my-background-color);
}

.my-button {
    line-height: 26px;
    height: 58px;
    border: 1px solid var(--my-color-white);
    border-radius: 30px;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
    background-color: var(--my-text-select-color-blue);
    color: var(--my-color-white);
    font-size: var(--my-fontsize-xl);
    padding: 0 var(--my-spacing-m);
    /*letter-spacing: 1px;*/
    /* 设置字符之间的间隔为1像素 */
}

.my-button.primary {
    color: var(--my-color-white);
    background-color: var(--my-color-warm);
}

.my-content-indent {
    text-indent: 2em; /* 文段首行空2个汉字 */
    text-align: justify;
}

.my-font-l {
    font-size: var(--my-fontsize-l) !important;
}

.my-padding-top-xxs {
    padding-top: var(--my-spacing-xxs);
}
.my-padding-top-xs {
    padding-top: var(--my-spacing-xs);
}

.my-padding-top-s {
    padding-top: var(--my-spacing-s);
}

.my-padding-top-m {
    padding-top: var(--my-spacing-m);
}

.my-padding-top-l {
    padding-top: var(--my-spacing-l);
}

.my-padding-lr-s {
    padding: var(--my-spacing-xxs) var(--my-spacing-xs);
}

.my-padding-lr-xs {
    padding-left: var(--my-spacing-xs);
    padding-right: var(--my-spacing-xs);
}

.my-padding-bottom-s {
    padding-bottom: var(--my-spacing-s);
}

.my-margin-top-s {
    margin-top: var(--my-spacing-s);
}

.my-margin-top-m {
    margin-top: var(--my-spacing-s);
}

.my-margin-top-l {
    margin-top: var(--my-spacing-l);
}

.my-margin-lr-s {
    margin-left: var(--my-spacing-xs);
    margin-right: var(--my-spacing-xs);
}


.my-border-bottom {
    margin-top: var(--my-spacing-s);
    border-bottom: 1px solid var(--my-color-gray-light);
}