* {
    /* margin: 0;
  padding: 0; */
    box-sizing: border-box;
}

html {
    --color-scale-black: #010409;
    --color-scale-white: #ebf9ff;
    --color-scale-blue-0: #cae8ff;
    --color-scale-blue-1: #a5d6ff;
    --color-scale-blue-2: #79c0ff;
    --color-scale-blue-3: #58a6ff;
    --color-scale-blue-4: #388bfd;
    --color-scale-blue-5: #1f6feb;
    --color-scale-blue-6: #1158c7;
    --color-scale-blue-7: #0d419d;
    --color-scale-blue-8: #0c2d6b;
    --color-scale-blue-9: #051d4d;
    --color-scale-gray-0: #f0f6fc;
    --color-scale-gray-1: #c9d1d9;
    --color-scale-gray-2: #b1bac4;
    --color-scale-gray-3: #8b949e;
    --color-scale-gray-4: #6e7681;
    --color-scale-gray-5: #484f58;
    --color-scale-gray-6: #30363d;
    --color-scale-gray-7: #21262d;
    --color-scale-gray-8: #161b22;
    --color-scale-gray-9: #0d1117;
    --color-scale-purple-0: #eddeff;
    --color-scale-purple-1: #e2c5ff;
    --color-scale-purple-2: #d2a8ff;
    --color-scale-purple-3: #bc8cff;
    --color-scale-purple-4: #a371f7;
    --color-scale-purple-5: #8957e5;
    --color-scale-purple-6: #6e40c9;
    --color-scale-purple-7: #553098;
    --color-scale-purple-8: #3c1e70;
    --color-scale-purple-9: #271052;
    --color-scale-yellow-0: #f8e3a1;
    --color-scale-yellow-1: #f2cc60;
    --color-scale-yellow-2: #e3b341;
    --color-scale-yellow-3: #d29922;
    --color-scale-yellow-4: #bb8009;
    --color-scale-yellow-5: #9e6a03;
    --color-scale-yellow-6: #845306;
    --color-scale-yellow-7: #693e00;
    --color-scale-yellow-8: #4b2900;
    --color-scale-yellow-9: #341a00;
    --color-scale-def-1: #cfd5e0;
    /* 白天侧边栏灰度   x */
    --color-scale-def-d1: #606264;
    /* 黑天侧边栏灰度 dx */
    --color-scale-def-2: #271052;
    --color-scale-def-d2: #bc8cff;
    --color-scale-def-3: #ffffff96 url() 0 0 no-repeat;
    --color-scale-def-d3: #efeef02b url() 0 0 no-repeat;
    --color-scale-def-4: #b1bcba2e;
    --color-scale-def-d4: #99ffeb2e;
    --color-scale-def-5: #000;
    --color-scale-def-d5: #0efbfb;
    /*
    --color-scale-def-6: linear-gradient(90deg, #00eaff94 0%, rgb(0 255 201 / 17%) 10%, rgb(16 255 0 / 9%) 25%, rgb(0 255 107 / 5%) 60%, rgb(255 198 19 / 14%) 75%, rgb(10 249 171 / 30%) 100%);
    --color-scale-def-d6: linear-gradient(90deg, rgb(255 255 255 / 30%) 0%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.3) 100%);
    */
    --color-scale-def-6: linear-gradient(90deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 10%) 10%, rgb(255 255 255 / 0%) 25%, rgb(123 217 255 / 0%) 60%, rgb(0 194 255 / 10%) 75%, rgb(0 147 255 / 30%) 100%);
    --color-scale-def-d6: linear-gradient(90deg, rgb(255 255 255 / 30%) 0%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.3) 100%);
    --color-scale-def-7: linear-gradient(90deg, rgb(0 206 255 / 32%) 0%, rgb(134 234 245 / 14%) 10%, rgb(255 255 255 / 6%) 25%, rgb(255 255 255 / 0%) 60%);
    --color-scale-def-d7: linear-gradient(90deg, rgb(14 251 251 / 23%) 0%, rgb(255 255 255 / 14%) 10%, rgb(255 255 255 / 6%) 25%, rgb(255 255 255 / 0%) 60%);
    --color-scale-def-8: rgb(0 0 0 / 4%) !important;
    --color-scale-def-d8: rgb(255 255 255 / 10%) !important;
    --color-scale-def-9: rgb(95 211 255 / 22%);
    --color-scale-def-d9: rgb(14 251 251 / 28%);
    --color-scale-def-10: rgb(0 0 0 / 15%) !important;
    --color-scale-def-d10: rgb(255 255 255 / 42%) !important;
    --color-scale-def-11: linear-gradient(90deg, rgb(166 220 255) 0%, rgb(204 237 255) 10%, rgb(241 254 255 / 13%) 25%, rgb(238 246 255 / 4%) 60%, rgb(143 223 255 / 17%) 75%, rgb(166 219 255) 100%);
    --color-scale-def-d11: linear-gradient(90deg, rgb(255 255 255 / 31%) 0%, rgb(255 255 255 / 16%) 10%, rgb(255 255 255 / 13%) 25%, rgb(255 255 255 / 4%) 60%, rgb(255 255 255 / 17%) 75%, rgba(255, 255, 255, 0.3) 100%);
    --color-scale-def-12: rgb(0 0 0 / 15%);
    --color-scale-def-d12: rgb(255 255 255 / 42%);
    --color-scale-def-13: #ffffff57;
    --color-scale-def-14: #eb7a7ae3;
    --color-scale-def-d13: #72b5f1;
    --color-scale-def-d14: #6e40c9;
    --color-scale-def-15: #ffffff57;
    --color-scale-def-16: #af97e4;
    --color-scale-def-d15: #65f6c4d4;
    --color-scale-def-d16: #31ff007a;
    --color-scale-def-17: rgb(0 0 0 / 15%);
    --color-scale-def-d17: #adc0bf63 !important;
    --color-scale-def-18: rgb(0 0 0 / 15%);
    --color-scale-def-d18: #ffffff !important;
    --color-scale-def-19: #f0f6fc;
    --color-scale-def-d19: #000000d1;
    --color-scale-def-20: #ffffff;
    --color-scale-def-d20: #222;
    --color-scale-def-21: #f7f7f7;
    --color-scale-def-d21: #484848;
    --color-scale-def-22: #000000;
    --color-scale-def-d22: #d8d7d7;
    --color-scale-def-23: #f1f1f1;
    --color-scale-def-d23: #ffffff17;
    --color-scale-def-24: #d7ebfe;
    --color-scale-def-d24: #05494c;
    --color-scale-def-25: linear-gradient(144deg, #af40ff2e, #5b42f317 50%, #00ddeb47);
    --color-scale-def-d25: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
}

[data-color-mode=dark] {
    --background: var(--color-scale-black);
    --r_background: var(--color-scale-white);
    --toggle-border: var(--color-scale-purple-8);
    --toggle-background: var(--color-scale-purple-9);
    --thumb-bg: var(--color-scale-purple-6);
    --toggle-moon: var(--color-scale-yellow-0);
    --text-common: var(--color-scale-gray-1);
    --text-link: var(--color-scale-blue-2);

    --sidebar-left: var(--color-scale-def-d1);
    --upper-text: var(--color-scale-def-d2);
    --upper-text-tab: var(--color-scale-def-d3);
    --quote-background: var(--color-scale-def-d4);
    --quote-text: var(--color-scale-def-d5);
    --upper-text-tab-top: var(--color-scale-def-d6);
    --quote-background-b: var(--color-scale-def-d7);
    --background-table: var(--color-scale-def-d8);
    --background-table-header: var(--color-scale-def-d9);
    --background-table-hover: var(--color-scale-def-d10);
    --forbutton-background: var(--color-scale-def-d11);
    --fortable-border-color: var(--color-scale-def-d12);

    --btn_dynamic-del-c1: var(--color-scale-def-d13);
    --btn_dynamic-del-c2: var(--color-scale-def-d14);
    --btn_dynamic-add-c1: var(--color-scale-def-d15);
    --btn_dynamic-add-c2: var(--color-scale-def-d16);

    --layui-form-select-background-color: var(--color-scale-def-d17);
    --layui-form-select-text-color: var(--color-scale-def-d18);
    --layui-form-select-dl-background-color: var(--color-scale-def-d19);

    --chat_background: var(--color-scale-def-d20);
    --chat_header_background: var(--color-scale-def-d21);
    --chat_text: var(--color-scale-def-d22);
    --chat_output: var(--color-scale-def-d23);
    --chat_input: var(--color-scale-def-d24);
    --diy_btn_1: var(--color-scale-def-d25);
}

[data-color-mode=light] {
    --background: var(--color-scale-white);
    --r_background: var(--color-scale-black);
    --toggle-border: var(--color-scale-gray-2);
    --toggle-background: var(--color-scale-white);
    --thumb-bg: var(--color-scale-gray-8);
    --toggle-moon: var(--color-scale-yellow-4);
    --text-common: var(--color-scale-black);
    --text-link: var(--color-scale-black);

    --sidebar-left: var(--color-scale-def-1);
    --upper-text: var(--color-scale-def-2);
    --upper-text-tab: var(--color-scale-def-3);
    --quote-background: var(--color-scale-def-4);
    --quote-text: var(--color-scale-def-5);
    --upper-text-tab-top: var(--color-scale-def-6);
    --quote-background-b: var(--color-scale-def-7);
    --background-table: var(--color-scale-def-8);
    --background-table-header: var(--color-scale-def-9);
    --background-table-hover: var(--color-scale-def-10);
    --forbutton-background: var(--color-scale-def-11);
    --fortable-border-color: var(--color-scale-def-12);

    --btn_dynamic-del-c1: var(--color-scale-def-13);
    --btn_dynamic-del-c2: var(--color-scale-def-14);
    --btn_dynamic-add-c1: var(--color-scale-def-15);
    --btn_dynamic-add-c2: var(--color-scale-def-16);

    --layui-form-select-background-color: var(--color-scale-def-17);
    --layui-form-select-text-color: var(--color-scale-def-18);
    --layui-form-select-dl-background-color: var(--color-scale-def-19);

    --chat_background: var(--color-scale-def-20);
    --chat_header_background: var(--color-scale-def-21);
    --chat_text: var(--color-scale-def-22);
    --chat_output: var(--color-scale-def-23);
    --chat_input: var(--color-scale-def-24);
    --diy_btn_1: var(--color-scale-def-25);

}

[data-color-mode=dark] .toggle-wrapper .thumb {
    transform: translate(18px);
}

body {
    background-color: var(--background);
}

a {
    text-decoration: none !important;
    text-decoration: none;
    color: var(--text-link);
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

.toggle-wrapper {
    position: absolute;
    top: 12px;
    right: 0px;
    cursor: pointer;
    left: 50%;
    float: left;
}

.toggle-wrapper .track {
    width: 42px;
    height: 24px;
    border-radius: 24px;
    border: 3px solid var(--toggle-border);
    background-color: var(--toggle-background);
}

.toggle-wrapper .thumb {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: transform 0.3s ease;
    background-color: var(--thumb-bg);
}

.text-wrapper {
    width: 80%;
    margin: 20px auto 0;
    color: var(--text-common);
}

/* 按钮行栏 */
xblock {
    background: var(--forbutton-background);
}

.layui-table td,
.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin=line],
.layui-table[lay-skin=row] {
    border-color: var(--fortable-border-color);
}

body {
    color: var(--text-link);
}


.layui-table tbody tr:hover,.layui-table-hover {
    /*background-color: #cccccc!important*/
    background-color: var(--color-scale-def-9);
}


/* 按钮DIY */

.btn_dynamic {
    flex: 1 1 auto;
    margin: 5px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.9s;
    background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
    /* color: white; */
    /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
    border-radius: 10px;
    cursor: pointer;
    font-size: medium;
    color: var(--r_background);
    box-shadow: 0 0 10px #eff5ff;
}

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn_dynamic:hover {
    --x: 100%;
}

.btn_dynamic-1 {
    --c1: #f6d365;
    --c2: #fda085;
}

.btn_dynamic-2 {
    --c1: #fbc2eb;
    --c2: #a6c1ee;
}

.btn_dynamic-3 {
    --c1: #84fab0;
    --c2: #8fd3f4;
}

.btn_dynamic-4 {
    --c1: #a1c4fd;
    --c2: #c2e9fb;
}

.btn_dynamic-5 {
    --c1: #ffecd2;
    --c2: #fcb69f;
}

.btn_dynamic-del {
    --c1: var(--btn_dynamic-del-c1);
    --c2: var(--btn_dynamic-del-c2);
}

.btn_dynamic-add {
    --c1: var(--btn_dynamic-add-c1);
    --c2: var(--btn_dynamic-add-c2);
}

/* Magic Stuff End -> */

/* lauyui DIV */
.layui-badge-rim,
.layui-border,
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-input,
.layui-layedit,
.layui-layedit-tool,
.layui-panel,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this:after,
.layui-textarea {
    border-color: var(--quote-text);
}

.layui-elem-field legend {
    color: var(--quote-text);
}

.layui-table[lay-even] tr:nth-child(2n) {
    background-color: var(--background-table);
}

.layui-table thead tr,
.layui-table-fixed-l tr,
.layui-table-header,
.layui-table-mend,
.layui-table-patch,
.layui-table-tool {
    background-color: var(--background-table-header);
}

.layui-table[lay-even] tr:hover {
    background-color: var(--background-table-hover);
}

.layui-form-select dl dd.layui-this {
    background-color: var(--layui-form-select-background-color);
    color: var(--layui-form-select-text-color);
}

.layui-form-select dl {
    background-color: var(--layui-form-select-dl-background-color);
}

.layui-btn,
.layui-disabled,
.layui-icon,
.layui-unselect {
    color: var(--text-link);
}

.layui-layer-title {
    color: var(--text-link);
    background-color: var(--background);
}
.layui-layer-dialog .layui-layer-content
{
    background-color: var(--background);

}
.layui-layer-btn
{
    background-color: var(--background);

}

.page-content .layui-tab-title .layui-this {
    background: linear-gradient(to right, #79c0ffc9, #6e57d1c7, #63f19f91);
    background-size: 2000%;
    animation: gradientBackground 5s alternate ease-out;
    animation-iteration-count: infinite;
    color: aliceblue;

    border: none !important;
    /* 或者使用下面的规则来移除边框 */
    border-width: 0 !important;
    border-color: transparent !important;
}

@keyframes gradientBackground {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 100% 0
    }
}

/* 内容的引用部分 */
.layui-elem-quote {

    /* background-color:var(--quote-background);*/
    background: var(--quote-background-b);
    color: var(--quote-text);
}

/* 上边页面标签 */
.page-content {
    color: var(--upper-text);
}

.page-content .layui-tab-title li {
    background: var(--upper-text-tab);
}

/* 最上面的导航栏 */
.container {
    background: var(--upper-text-tab-top);
}

.container .logo a {
    color: var(--text-link);
}

.layui-nav .layui-nav-item a {
    color: var(--text-link);
}

.container .left_open i {
    color: var(--text-link);
}

.layui-nav .layui-nav-more {
    border-top-color: var(--text-link);
}

/* 侧边导航栏的特效及配色 */

/* ~~~~~~~ INIT. BTN ~~~~~~~ */
.btn {
    position: relative;
    padding: 1.4rem 4.2rem;
    padding-right: 3.1rem;
    font-size: 1.4rem;
    color: var(--text-link);
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*max-width: 30px;*/
    margin: 0 auto;
}

.btn:before,
.btn:after {
    content: '';
    position: absolute;
    -webkit-transition: inherit;
    transition: inherit;
    z-index: -1;
}

.btn:hover {
    color: var(--text-link);
    /* -webkit-transition-delay: .6s; */
    transition-delay: .6s;
    cursor: pointer;
}

.btn:hover:before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.btn:hover:after {
    background: var(--sidebar-left);
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}

/* From Top */
.from-top:before,
.from-top:after {
    left: 0;
    height: 0;
    width: 100%;
}

.from-top:before {
    bottom: 0;
    border: 1px solid var(--sidebar-left);
    border-top: 0;
    border-bottom: 0;
}

.from-top:after {
    top: 0;
    height: 0;
}

.from-top:hover:before,
.from-top:hover:after {
    height: 100%;
}

/* From Left */
.from-left:before,
.from-left:after {
    top: 0;
    width: 0;
    height: 100%;
}

.from-left:before {
    right: 0;
    border: 1px solid var(--sidebar-left);
    border-left: 0;
    border-right: 0;
}

.from-left:after {
    left: 0;
}

.from-left:hover:before,
.from-left:hover:after {
    width: 100%;
}

/* From Right */
.from-right:before,
.from-right:after {
    top: 0;
    width: 0;
    height: 100%;
}

.from-right:before {
    left: 0;
    border: 1px solid var(--inv);
    border-left: 0;
    border-right: 0;
}

.from-right:after {
    right: 0;
}

.from-right:hover:before,
.from-right:hover:after {
    width: 100%;
}

/* From Middle */
.from-middle:before {
    top: 0;
    left: 50%;
    height: 100%;
    width: 0;
    border: 1px solid var(--inv);
    border-left: 0;
    border-right: 0;
}

.from-middle:after {
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    background: var(--inv);
}

.from-middle:hover:before {
    left: 0;
    width: 100%;
}

.from-middle:hover:after {
    top: 0;
    height: 100%;
}

/* From Bottom */
.from-bottom:before,
.from-bottom:after {
    left: 0;
    height: 0;
    width: 100%;
}

.from-bottom:before {
    top: 0;
    border: 1px solid var(--inv);
    border-top: 0;
    border-bottom: 0;
}

.from-bottom:after {
    bottom: 0;
    height: 0;
}

.from-bottom:hover:before,
.from-bottom:hover:after {
    height: 100%;
}


body {
    --inv: #fff;
    /* background-color: black;*/
}

div:last-child {
    margin-bottom: 0;
    /* color: var(--text-link); */
}