/*暗色*/
html[data-theme="dark"] {
    /* 主要颜色系统 - 暗色模式 */
    --primary-100: #635985; /* 紫色主色 */
    --primary-200: #9186b5; /* 浅紫色 */
    --primary-300: #f5e8ff; /* 极浅紫色 */
    --accent-100: #79668b; /* 亮灰色强调 */
    --accent-200: #4d3d63; /* 深灰色强调 */
    --text-100: #a5a5a5; /* 主文字 */
    --text-200: #898989; /* 次要文字 */
    --bg-100: #1d1d1d; /* 深色背景 */
    --bg-200: #2c2c2c; /* 次要背景 */
    --bg-300: #444444; /* 边框色 */
    
    /* 语义化颜色映射 */
    --primary-color: var(--primary-100);
    --primary-light: var(--primary-200);
    --primary-lighter: var(--primary-300);
    --accent-color: var(--accent-100);
    --accent-light: var(--accent-200);
    --text-color: var(--text-100);
    --text-secondary: var(--text-200);
    --background: var(--bg-100);
    --background-secondary: var(--bg-200);
    --border-color: var(--bg-300);
    
    /* 原有变量保持兼容性 */
    /*背景色*/
    --background: #1d1d1d;
    /*标题*/
    --title: #635985;
    /* 标题下方信息 */
    --title-info: #c5c5c5;
    /*文字*/
    --text: #a5a5a5;
    /*强调文字*/
    --bold-text: #9186b5;
    /*分割线*/
    --border: #444444;
    /*表头背景色*/
    --header-bg: #2c2c2c;
    /*表头文字色*/
    --header-text: #9186b5;
    /*表格线*/
    --border-table: #444444;
    /*表格背景色*/
    --background-table: var(--background);
    /*表格文字色*/
    --table-text: var(--text);
    /*页脚文字色*/
    --end-text: #898989;

    /*tag标签配色*/
    --tag-light-primary: #2e72b5;
    --tag-light-success: #58a531;
    --tag-light-info: #787b80;
    --tag-light-warning: #ae752e;
    --tag-light-danger: #ae4d4d;
    --tag-light-bg-primary: #18222C;
    --tag-light-bg-success: #1C2518;
    --tag-light-bg-info: #202121;
    --tag-light-bg-warning: #292218;
    --tag-light-bg-danger: #2B1D1D;

    /*折线图*/
    --line: var(--border);
    --line-text: var(--text);
    --line-button-text: #d1d1d1;

    /*进度条*/
    --progress-bar-bg-left: rgb(161, 140, 209);
    --progress-bar-bg-right: rgb(251, 194, 235);
    --progress-bar-bs-left: rgb(161, 140, 209);
    --progress-bar-bs-right: rgb(251, 194, 235);
    --progress-all-bar-bg-left: rgb(242, 112, 156);
    --progress-all-bar-bg-right: rgb(255, 148, 114);
    --progress-all-bar-bs-left: rgb(242, 112, 156);
    --progress-all-bar-bs-right: rgb(255, 148, 114);
    --progress-full-bar-bg-left: rgb(24, 117, 37);
    --progress-full-bar-bg-right: rgb(127 136 43);
    --progress-full-bar-bs-left: rgb(54 110 60);
    --progress-full-bar-bs-right: rgb(114, 145, 47);

    --light-green-color: #108736;
    --light-red-color: #b31807;
    
    /* 按钮颜色主题 - 暗色模式 */
    --btn-primary-from: var(--primary-100);
    --btn-primary-to: var(--primary-200);
    --btn-secondary-from: var(--accent-100);
    --btn-secondary-to: var(--accent-200);
    
    /* 阴影层级系统 - 暗色模式 */
    --shadow-xs: 0 1px 3px rgba(99, 89, 133, 0.15);
    --shadow-sm: 0 2px 8px rgba(99, 89, 133, 0.18);
    --shadow-md: 0 4px 20px rgba(99, 89, 133, 0.22);
    --shadow-lg: 0 8px 32px rgba(99, 89, 133, 0.25);
    --shadow-xl: 0 16px 48px rgba(99, 89, 133, 0.28);
    
    /* 通用阴影颜色 - 暗色模式 */
    --shadow-color: rgba(99, 89, 133, 0.2);
    --shadow-color-hover: rgba(145, 134, 181, 0.25);
    --shadow-color-active: rgba(145, 134, 181, 0.3);
    
    /* 动画和特效颜色 - 暗色模式 */
    --glow-color-primary: rgba(99, 89, 133, 0.4);
    --glow-color-secondary: rgba(145, 134, 181, 0.5);
    --selection-color: rgba(99, 89, 133, 0.15);
    --selection-color-hover: rgba(99, 89, 133, 0.2);
    
    /* 边框发光动画颜色 - 暗色模式 */
    --border-glow-primary: rgba(99, 89, 133, 0.8);
    --border-glow-secondary: rgba(121, 102, 139, 0.8);
    
    /* 按钮阴影颜色 - 暗色模式 */
    --btn-secondary-shadow: rgba(121, 102, 139, 0.3);
    --btn-secondary-shadow-hover: rgba(121, 102, 139, 0.4);
    
    /* 标签颜色系统 - 暗色模式 */
    --tag-special-weapon-bg: #2d2a3f;
    --tag-special-weapon-color: #9186b5;
    --tag-special-weapon-border: #403752;
    
    --tag-effect-simple-bg: #2d2a3f;
    --tag-effect-simple-color: #9186b5;
    --tag-effect-simple-border: #403752;
    
    --tag-simple-bg: #1f2b35;
    --tag-simple-color: #6bb3d8;
    --tag-simple-border: #2a3c4a;
    
    --tag-orange-weapon-bg: #3d2f1f;
    --tag-orange-weapon-color: #ffa366;
    --tag-orange-weapon-border: #4a3627;
    
    --tag-orange-ring-bg: #3d2f1f;
    --tag-orange-ring-color: #ffa366;
    --tag-orange-ring-border: #4a3627;
    
    --tag-qiegao-bg: #1a2b3f;
    --tag-qiegao-color: #5bc0eb;
    --tag-qiegao-border: #264052;
    
    --tag-default-bg: #1a2b3f;
    --tag-default-color: #5bc0eb;
    --tag-default-border: #264052;
    
    /* 标签阴影系统 - 暗色模式 */
    --tag-shadow-light: rgba(0, 0, 0, 0.3);
    --tag-shadow-normal: rgba(0, 0, 0, 0.4);
    --tag-shadow-hover: rgba(0, 0, 0, 0.5);
    
    /* 卡片背景 - 暗色模式 */
    --card-bg: var(--bg-200);
    --card-bg-rgb: 44, 44, 44;
}

/*亮色*/
:root {
    /* 原有变量保持兼容性 */
    /*背景色*/
    --background: #ffffff;
    /*标题*/
    --title: #ef5f4e;
    /* 标题下方信息 */
    --title-info: #ff917b;
    /*文字*/
    --text: #000000;
    /*强调文字*/
    --bold-text: #c9422c;
    /*分割线*/
    --border: #cccccc;
    /*表头背景色*/
    --header-bg: #f5f5f5;
    /*表头文字色*/
    --header-text: #c9422c;
    /*表格线*/
    --border-table: #cccccc;
    /*表格背景色*/
    --background-table: var(--background);
    /*表格文字色*/
    --table-text: var(--text);
    /*页脚文字色*/
    --end-text: #2c2c2c;

    /*tag标签配色*/
    --tag-light-primary: #4EA5FF;
    --tag-light-success: #70C646;
    --tag-light-info: #989BA0;
    --tag-light-warning: #E8A748;
    --tag-light-danger: #F67777;
    --tag-light-bg-primary: #ECF5FF;
    --tag-light-bg-success: #F0F9EB;
    --tag-light-bg-info: #F4F4F5;
    --tag-light-bg-warning: #FDF6EC;
    --tag-light-bg-danger: #FEF0F0;

    /*折线图*/
    --line: var(--border);
    --line-text: var(--text);
    --line-button-text: #ffffff;

    /*进度条*/
    --progress-bar-bg-left: rgb(242, 112, 156);
    --progress-bar-bg-right: rgb(255, 148, 114);
    --progress-bar-bs-left: rgb(242, 112, 156);
    --progress-bar-bs-right: rgb(255, 148, 114);
    --progress-all-bar-bg-left: rgb(161, 140, 209);
    --progress-all-bar-bg-right: rgb(251, 194, 235);
    --progress-all-bar-bs-left: rgb(198 173 255);
    --progress-all-bar-bs-right: rgb(251, 194, 235);
    --progress-full-bar-bg-left: rgb(134, 222, 144);
    --progress-full-bar-bg-right: rgb(212, 252, 121);
    --progress-full-bar-bs-left: rgb(203 241 172);
    --progress-full-bar-bs-right: rgb(212, 252, 121);

    --light-green-color: #00992f;
    --light-red-color: #cc3f3f;
}

:root {
    /*最大宽度*/
    --max-width: 1000px;

    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/*页面*/
html {
    background: var(--background);
}

#main {
    margin: 0 auto;
    padding: 10px;
}

/*大标题*/
.html-title {
    font-size: 50px;
    font-family: 'Aa剑豪体', serif !important;
    color: var(--title);
}

/*分割线*/
.html-divider {
    border-color: var(--border);
    border-width: 3px;
    margin: 0 0 8px 0;
}

/*页脚文字*/
.html-footer {
    text-align: center;
    font-size: 14px;
    color: var(--end-text);
}

/*表尾*/
.el-table__footer-wrapper tfoot td.el-table__cell {
    background-color: var(--background-table);
    color: var(--table-text);
}

/*表格线*/
.el-table {
    --el-table-border-color: var(--border-table);
    --el-table-bg-color: unset;
    /* 设置表格背景色 */
    --el-table-tr-bg-color: unset;
    /* 设置表格行背景色 */
    --el-table-border: 0px solid;
    /* 设置表格边框 */
    --el-table-index: unset;
    /* 设置表格序号列背景色 */
}

/* 表头圆角设置 */
.el-table th {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding: 10px;
}

/* 表头圆角设置 */
.el-table th.el-table__cell {
    --el-table-bg-color: var(--header-bg);
    --el-table-tr-bg-color: var(--header-bg);
    background-color: var(--header-bg);
}

/* 设置四个角的圆角 */
.el-table th:first-child {
    border-top-left-radius: 5px;
    /* 左上圆角 */
    border-bottom-left-radius: 5px;
    /* 左下圆角 */
}

.el-table th:last-child {
    border-top-right-radius: 5px;
    /* 右上圆角 */
    border-bottom-right-radius: 5px;
    /* 右下圆角 */
}

/* 设置内容单元格的样式 */
.el-table td {
    padding: 10px;
    text-align: center;
}

.el-scrollbar {
    --el-table-border: 1px solid var(--border-table);
    /* 设置表格边框 */
}


#main {
    width: var(--max-width);
    height: auto;
}

.header-info {
    /*div内容居中*/
    text-align: center;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中 */
    margin: 0 auto;
    padding: 10px;
    height: auto;
    color: var(--text);
}

.icon-text {
    /*div内容居中*/
    text-align: center;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中 */
    margin: 0 auto;
    padding: 3px;
    height: auto;
}

.el-tag {
    transition: none !important;
}


.icons {
    margin: 0 3px;
}


.html-footer {
    padding: 10px;
    height: auto;
}

.skill_div {
    overflow: hidden;
    border-radius: 18%; /* 50% 圆角将创建一个圆形容器 */
}

.skill_img {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.bold-text {
    font-weight: bold;
    color: var(--bold-text);
}


.el-switch.is-checked .el-switch__core {
    background-color: var(--title);
    border-color: var(--end-text, var(--end-text));
}

.el-switch__core {
    background-color: var(--end-text);
    border-color: var(--end-text, var(--end-text));
}

.el-switch__core .el-switch__action {
    align-items: center;
    background-color: var(--background-color);
}

.el-switch.is-checked .el-switch__core .el-switch__action {
    left: calc(100% - 18px);
}

.el-switch__core .el-switch__action {
    left: 2px;
    transition: null !important; /* 去除开关的过渡动画 */
}


.theme-toggle-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--card-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid var(--border-color);
}

.theme-toggle-button:hover {
    transform: scale(1.1);
}

.theme-toggle-button i {
    font-size: 24px;
    color: var(--title-color);
}