@charset "utf-8";

:root {
    --white: #fff;
    --grey: #C0BFBF;
    --grey-light1: #F0F0F0;
    --grey-light2: #F7F7F7;
    --grey888: #808080;
    --txt: #333333;
    --txt2: #4F4F4F;
    --color1: #E0EDFF;
    --color2: #8DB9F9;
    --color3: #3975DB;
    --color350: #3975DB80;
    --gold3: #E9E5DC;
    --red: #B40808;
}

.style-red-light {
    --color1: #F0EEEF;
    --color2: #AC9598;
    --color3: #AB0A3A;
    --color350: #AB0A3A80;
}

.style-red-dark {
    --color1: #F0EEEF;
    --color2: #68001F;
    --color3: #AB0A3A;
    --color350: #AB0A3A80;
}

.style-green-light {
    --color1: #E9F3EE;
    --color2: #9ECAB8;
    --color3: #197163;
    --color350: #19716380;
}

.style-green-dark {
    --color1: #E9F3EE;
    --color2: #8EB3A2;
    --color3: #3A6461;
    --color350: #3A646180;
}

.style-blue-light {
    --color1: #E8F2FF;
    --color2: #A5BCD5;
    --color3: #466391;
    --color350: #46639180;
}

.style-blue-dark {
    --color1: #E8F2FF;
    --color2: #91ACC9;
    --color3: #664832;
    --color350: #66483280;
}

.style-gold-light {
    --color1: #F2EEE1;
    --color2: #C9C4B7;
    --color3: #967102;
    --color350: #96710280;
}

.style-gold-dark {
    --color1: #F2EEE1;
    --color2: #644108;
    --color3: #AA975D;
    --color350: #AA975D80;
}

.style-black-light {
    --color1: #EAEFF2;
    --color2: #B1BCC3;
    --color3: #3E4347;
    --color350: #3E434780;
}

.style-black-dark {
    --color1: #EAEFF2;
    --color2: #526778;
    --color3: #8B9EB1;
    --color350: #8B9EB180;
}

.theme-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #000;
    z-index: 200;
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10px;
}

.theme-panel label input {
    position: absolute;
    transform: scale(0);
    opacity: 0;
}

.theme-panel label span {
    display: block;
    padding: 8px 4px;
    border: 1px solid #fff;
    border-radius: 5px;
    text-align: center;
}

.theme-panel label input:checked~span {
    background: #fff;
    color: #000;
}

.theme-panel>* {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.theme-panel>*>* {
    flex: 1 1 auto;
}