/* 摩尔博物馆 CSS 样式文件 - 包含亮色和暗色主题 */

/* ======= 基础布局样式 ======= */
.el-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.el-main {
    flex: 1;
}

.el-footer {
    position: relative;
}

/* ======= 通用组件样式 ======= */
a.no-decoration-link {
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a[href] {
    text-decoration: none;
    color: #1699d9;
}

li {
    margin-bottom: 10px;
}

/* ======= 头像样式 ======= */
.rounded-avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 1px dotted #575757;
    object-fit: cover; /* 确保图片正确填充圆形区域 */
    background-color: #ffffff; /* 为透明图片提供背景 */
}

/* 暗色模式下的头像调整 */
.dark-mode .rounded-avatar {
    border-color: var(--border-color);
    background-color: #454545; /* 暗色背景，避免透明图片在暗色模式下太突兀 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影提高在暗色背景上的可见度 */
    filter: brightness(0.95); /* 微调亮度以适应暗色背景 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停效果 */
.dark-mode .donator:hover .rounded-avatar {
    transform: scale(1.05);
    filter: brightness(1.05); /* 悬停时稍微提高亮度 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* 增强阴影 */
}

.donator {
    display: flex;
    align-items: center;
    color: #1699d9;
    margin-bottom: 10px;
    font-size: 18px;
}

.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-card {
    padding: 10px 20px;
    border: 1px solid;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #999;
}

.infocard-subtitle {
    font-size: 12px; 
    color: #999;
}

.infocard-bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ======= Element Plus 组件覆盖 ======= */
.el-popper.is-customized {
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
}

/* ======= 主题变量定义 ======= */
:root {
    /* 亮色主题变量 */
    --primary-bg: #ffffff;
    --secondary-bg: #f5f7fa;
    --text-color: #303133;
    --border-color: #dcdfe6;
    --card-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --hover-bg: #f5f7fa;
    --tooltip-bg: #303133;
    --tooltip-text: #ffffff;
    --menu-bg: #ffffff;
    --menu-active-color: #409eff;
    --link-color: #1699d9;
    --transition-speed: 0.3s;
    
    /* 徽章颜色 */
    --badge-success: #67c23a;
    --badge-warning: #e6a23c;
    --badge-danger: #f56c6c;
    --badge-info: #909399;
}

/* 暗色主题变量 */
.dark-mode {
    --primary-bg: #1a1a1a;
    --secondary-bg: #2a2a2a;
    --text-color: #e0e0e0;
    --border-color: #4a4a4a;
    --card-bg: #303030;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --hover-bg: #3a3a3a;
    --tooltip-bg: #e0e0e0;
    --tooltip-text: #303133;
    --menu-bg: var(--primary-bg); /* 修改为主背景色 */
    --menu-active-color: #79bbff;
    --link-color: #5bb1e6;
    
    /* 徽章颜色保持不变，确保语义一致性 */
    --badge-success: #67c23a;
    --badge-warning: #e6a23c;
    --badge-danger: #f56c6c;
    --badge-info: #909399;
}

/* ======= 全局过渡效果 ======= */
body, .el-card, .el-menu, .el-menu-item, .el-table, .el-button, .el-input,
.el-tabs, .el-tab-pane, .el-collapse, .el-collapse-item, .about-card {
    transition: background-color var(--transition-speed), 
                color var(--transition-speed), 
                border-color var(--transition-speed);
}

/* ======= 暗色模式全局样式 ======= */
.dark-mode body {
    background-color: var(--primary-bg);
    color: var(--text-color);
}

/* 链接 */
.dark-mode a[href],
.dark-mode a,
.dark-mode .donator {
    color: var(--link-color);
}

.dark-mode .infocard-subtitle {
    color: #aaa;
}

.dark-mode .rounded-avatar {
    border-color: var(--border-color);
}

/* ======= 导航菜单样式 ======= */
/* 水平菜单 */
.dark-mode .el-menu {
    background-color: var(--menu-bg);
    border-color: var(--border-color);
}

.dark-mode .el-menu-item {
    color: var(--text-color);
}

.dark-mode .el-menu-item.is-active {
    color: var(--menu-active-color);
}

/* 顶部导航菜单项悬停 */
.dark-mode .el-menu--horizontal > .el-menu-item:not(.is-active):hover,
.dark-mode .el-menu--horizontal > .el-sub-menu:not(.is-active):hover .el-sub-menu__title {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

.dark-mode .el-menu--horizontal > .el-menu-item.is-active,
.dark-mode .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    color: var(--menu-active-color) !important;
    border-bottom-color: var(--menu-active-color) !important;
}

.dark-mode .el-menu--horizontal .el-menu-item,
.dark-mode .el-menu--horizontal .el-sub-menu__title {
    border-bottom-color: var(--border-color) !important;
    transition: background-color 0.3s, color 0.3s, border-bottom-color 0.3s !important;
}

.dark-mode .el-menu--horizontal > .el-menu-item:not(.is-active),
.dark-mode .el-menu--horizontal > .el-sub-menu:not(.is-active) .el-sub-menu__title {
    background-color: var(--menu-bg) !important;
    color: var(--text-color) !important;
}

/* 二级菜单 */
.dark-mode .el-sub-menu__title {
    color: var(--text-color) !important;
    background-color: var(--menu-bg) !important;
}

.dark-mode .el-sub-menu .el-menu {
    background-color: var(--secondary-bg) !important;
}

.dark-mode .el-sub-menu__title:hover,
.dark-mode .el-menu-item:hover {
    background-color: var(--hover-bg) !important;
}

/* 弹出菜单 */
.dark-mode .el-menu--popup {
    background-color: var(--secondary-bg) !important;
}

.dark-mode .el-menu--popup .el-menu-item {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
}

.dark-mode .el-menu--popup .el-menu-item:hover {
    background-color: var(--hover-bg) !important;
}

.dark-mode .el-menu--popup .el-menu-item.is-active {
    color: var(--menu-active-color) !important;
}

.dark-mode .el-menu--horizontal .el-menu--popup {
    border-color: var(--border-color) !important;
}

/* ======= 卡片样式 ======= */
.dark-mode .el-card,
.dark-mode .about-card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
    box-shadow: 2px 2px 5px var(--shadow-color);
}

.dark-mode .el-card__header {
    border-bottom-color: var(--border-color);
}

/* ======= 表格样式 ======= */
.dark-mode .el-table {
    background-color: var(--card-bg);
    color: var(--text-color);
    --el-table-border-color: var(--border-color);
    --el-table-header-bg-color: var(--secondary-bg);
    --el-table-row-hover-bg-color: var(--hover-bg);
}

.dark-mode .el-table td, 
.dark-mode .el-table th {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* 表格悬停效果 */
.dark-mode .el-table__body tr:hover > td.el-table__cell,
.dark-mode .el-table__body tr.hover-row > td.el-table__cell {
    background-color: var(--hover-bg) !important;
}

.dark-mode .el-table__body tr.current-row > td.el-table__cell {
    background-color: #2a3f55 !important;
    color: #e0e0e0 !important;
}

.dark-mode .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell {
    background-color: #2a3f55 !important;
    color: #e0e0e0 !important;
}

.dark-mode .el-table__header-wrapper th.el-table__cell {
    background-color: var(--secondary-bg) !important;
}

.dark-mode .el-table__expanded-cell {
    background-color: var(--secondary-bg) !important;
}

.dark-mode .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: var(--secondary-bg) !important;
}

/* 表格边框 */
.dark-mode .el-table--border::after,
.dark-mode .el-table--group::after,
.dark-mode .el-table::before {
    background-color: var(--border-color) !important;
}

.dark-mode .el-table--border .el-table__cell,
.dark-mode .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid var(--border-color) !important;
}

.dark-mode .el-table--border .el-table__cell:first-child {
    border-left: 1px solid var(--border-color) !important;
}

.dark-mode .el-table__fixed-right-patch {
    background-color: var(--secondary-bg) !important;
}

/* 表格排序图标 */
.dark-mode .el-table .sort-caret {
    border-top-color: #909399;
    border-bottom-color: #909399;
}

.dark-mode .el-table .ascending .sort-caret.ascending {
    border-bottom-color: var(--menu-active-color);
}

.dark-mode .el-table .descending .sort-caret.descending {
    border-top-color: var(--menu-active-color);
}

/* ======= 对话框样式 ======= */
.dark-mode .el-dialog {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}
.dark-mode .el-dialog__header {
    color: var(--text-color) !important;
}
.dark-mode .el-dialog__title {
    color: var(--text-color) !important;
}
.dark-mode .el-dialog__body {
    color: var(--text-color) !important;
}
.dark-mode .el-dialog__footer {
    border-top-color: var(--border-color) !important;
}
.dark-mode .el-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ======= 弹出层和提示框 ======= */
.dark-mode .el-tooltip__popper {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
}

.dark-mode .el-popper {
    border-color: var(--border-color) !important;
}

.dark-mode .el-popper__arrow::before {
    background-color: var(--secondary-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .el-popper.is-customized {
    background: linear-gradient(90deg, rgb(100, 160, 100), rgb(130, 160, 80));
}

.dark-mode .el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, rgb(100, 160, 100), rgb(130, 160, 80));
}

/* ======= 按钮样式 ======= */
.dark-mode .el-button {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .el-button--primary {
    background-color: var(--menu-active-color);
    border-color: var(--menu-active-color);
    color: #ffffff;
}

.dark-mode .el-button--primary.is-plain {
    background-color: transparent;
    border-color: var(--menu-active-color);
    color: var(--menu-active-color);
}

/* ======= 输入框样式 ======= */
.dark-mode .el-input {
    border-color: var(--border-color);
}

.dark-mode .el-input__inner {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .el-input__icon {
    color: var(--text-color);
}

.dark-mode .el-input__wrapper {
    background-color: var(--secondary-bg);
    box-shadow: 0 0 0 1px var(--border-color) inset;
}

/* ======= 表单样式 ======= */
.dark-mode .el-form-item__label {
    color: var(--text-color);
}

/* ======= 标签页样式 ======= */
.dark-mode .el-tabs__item {
    color: var(--text-color);
}

.dark-mode .el-tabs__item.is-active {
    color: var(--menu-active-color);
}

.dark-mode .el-tabs__nav-wrap::after {
    background-color: var(--border-color);
}

.dark-mode .el-tabs--border-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .el-tabs--border-card > .el-tabs__header {
    background-color: var(--secondary-bg);
    border-bottom-color: var(--border-color);
}

.dark-mode .el-tabs__content {
    color: var(--text-color);
}

.dark-mode .el-tabs__nav {
    border-color: var(--border-color);
}

.dark-mode .el-tabs__item.is-left {
    color: var(--text-color);
}

.dark-mode .el-tabs__item.is-left.is-active {
    color: var(--menu-active-color);
}

.dark-mode .el-tabs__active-bar {
    background-color: var(--menu-active-color);
}

/* ======= 折叠面板样式 ======= */
.dark-mode .el-collapse-item__header {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .el-collapse-item__content {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.dark-mode .el-collapse-item__wrap {
    background-color: var(--card-bg);
}

/* ======= 徽章样式 ======= */
/* 基本徽章样式 */
.dark-mode .el-badge__content {
    background-color: var(--badge-danger);
    color: #ffffff !important;
}

/* 小圆点徽章 */
.dark-mode .el-badge__content.is-dot {
    background-color: var(--badge-success);
}

/* 成功类型徽章 */
.dark-mode .el-badge__content.is-dot[type="success"],
.dark-mode .el-badge__content--success,
.dark-mode span.el-badge__content[type="success"],
.dark-mode span.el-badge__content[class*="success"] {
    background-color: var(--badge-success) !important;
}

/* 警告类型徽章 */
.dark-mode .el-badge__content.is-dot[type="warning"],
.dark-mode .el-badge__content--warning,
.dark-mode span.el-badge__content[type="warning"],
.dark-mode span.el-badge__content[class*="warning"] {
    background-color: var(--badge-warning) !important;
}

/* 危险类型徽章 */
.dark-mode .el-badge__content.is-dot[type="danger"],
.dark-mode .el-badge__content--danger,
.dark-mode span.el-badge__content[type="danger"],
.dark-mode span.el-badge__content[class*="danger"] {
    background-color: var(--badge-danger) !important;
}

/* 信息类型徽章 */
.dark-mode .el-badge__content.is-dot[type="info"],
.dark-mode .el-badge__content--info,
.dark-mode span.el-badge__content[type="info"],
.dark-mode span.el-badge__content[class*="info"] {
    background-color: var(--badge-info) !important;
}

/* ======= 分页器样式 ======= */
.dark-mode .el-pagination {
    color: var(--text-color);
}

.dark-mode .el-pagination button {
    background-color: var(--secondary-bg);
    color: var(--text-color);
}

.dark-mode .el-pagination .el-select .el-input__inner {
    color: var(--text-color);
}

.dark-mode .el-pager li {
    background-color: var(--secondary-bg);
    color: var(--text-color);
}

.dark-mode .el-pager li.active {
    color: var(--menu-active-color);
}

/* ======= 抽屉样式 ======= */
.dark-mode .el-drawer {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .el-drawer__body {
    background-color: var(--card-bg);
}

/* ======= 空状态和警告 ======= */
.dark-mode .el-empty__description {
    color: var(--text-color);
}

.dark-mode .el-alert--error {
    background-color: rgba(255, 77, 79, 0.1);
}

.dark-mode .el-alert__title,
.dark-mode .el-alert__description {
    color: #ff6b6b;
}

/* ======= 骨架屏样式 ======= */
.dark-mode .el-skeleton__item {
    background-color: var(--secondary-bg);
}

/* ======= 特定页面样式 ======= */
/* SWF容器 */
.dark-mode #swfContainer,
.dark-mode [id^="suit-"],
.dark-mode [id$="-Flash"] {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 图片亮度调整 */
.dark-mode img:not(.el-image),
.dark-mode .el-image img {
    filter: brightness(0.9);
}

/* Logo特殊处理 */
.dark-mode .el-menu-item img[alt="logo"] {
    filter: brightness(0.9);
}

/* 主容器和页脚背景色 */
.dark-mode .el-main,
.dark-mode .el-footer {
    background-color: var(--primary-bg);
    color: var(--text-color);
}

/* ======= 报纸页面样式 ======= */
.dark-mode .newspaper-cover {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .newspaper-cover:hover {
    box-shadow: 0 2px 12px 0 var(--shadow-color);
}

.dark-mode .newspaper-title {
    color: var(--text-color);
}

.dark-mode .newspaper-date,
.dark-mode .newspaper-pages {
    color: #a0a0a0;
}

.dark-mode .newspaper-content,
.dark-mode .section-title,
.dark-mode .section-content {
    color: var(--text-color);
}

.dark-mode .newspaper-section {
    border-bottom-color: var(--border-color);
}

.dark-mode .newspaper-detail-header {
    border-bottom-color: var(--menu-active-color);
}

.dark-mode .match-highlight {
    background-color: #665e00;
    color: #ffffff;
}

/* ======= 选项卡激活状态修复 ======= */
.dark-mode .el-tabs__item.is-active {
    color: var(--menu-active-color) !important;
    background-color: transparent !important; /* 确保无背景色 */
}

/* 边框卡片样式选项卡 */
.dark-mode .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: var(--card-bg) !important;
    border-right-color: var(--border-color) !important;
    border-left-color: var(--border-color) !important;
}

/* 卡片样式选项卡 */
.dark-mode .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--card-bg) !important;
}

/* 底部选项卡 */
.dark-mode .el-tabs--bottom .el-tabs__item.is-bottom.is-active {
    color: var(--menu-active-color) !important;
    background-color: transparent !important;
}

/* 左侧选项卡 */
.dark-mode .el-tabs--left .el-tabs__item.is-left.is-active {
    color: var(--menu-active-color) !important;
    background-color: var(--card-bg) !important;
}

/* 右侧选项卡 */
.dark-mode .el-tabs--right .el-tabs__item.is-right.is-active {
    color: var(--menu-active-color) !important;
    background-color: var(--card-bg) !important;
}

/* 确保选项卡内容区域背景色正确 */
.dark-mode .el-tabs__content {
    background-color: var(--card-bg) !important;
}

/* ======= 物品展示框样式修复 ======= */

/* 基础卡片标题修复 */
.dark-mode .el-card__header {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

/* showcase组件中的标题文本 */
.dark-mode .showcase .el-card__header span, 
.dark-mode .el-card__header .card-header span {
    color: var(--text-color) !important;
}

/* 针对 itemShowcaseComponent 中可能使用的内联样式覆盖 */
.dark-mode [style*="color: black"],
.dark-mode [style*="color:#303133"],
.dark-mode [style*="color: #303133"] {
    color: var(--text-color) !important;
}

/* 确保namestyle计算属性的结果在暗模式下也可见 */
.dark-mode .el-card:not(.is-always-shadow):hover {
    box-shadow: 0 2px 12px 0 var(--shadow-color);
}

/* 针对museum_lib.js中的nameStyle计算属性 */
.dark-mode .el-card__header span[style*="color: black"] {
    color: var(--text-color) !important;
}

/* VIP特殊处理（保持红色以示区分） */
.dark-mode .el-card__header span[style*="color: red"] {
    color: #ff6b6b !important; /* 更亮的红色在暗色背景上 */
}

/* ======= 顶栏背景色修复 ======= */
/* 确保顶栏和主体背景色统一 */
.dark-mode .el-menu--horizontal {
    background-color: var(--primary-bg) !important;
}

/* 调整顶栏边框 */
.dark-mode .el-menu--horizontal {
    border-bottom: solid 1px var(--border-color) !important;
}

/* 调整el-header容器背景色 */
.dark-mode .el-header {
    background-color: var(--primary-bg);
}

/* 顶栏二级菜单标题背景色 */
.dark-mode .el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
    background-color: var(--primary-bg) !important;
}

/* 顶栏二级菜单标题悬停背景色 */
.dark-mode .el-menu--horizontal > .el-sub-menu:not(.is-active):hover .el-sub-menu__title {
    background-color: var(--hover-bg) !important;
}

/* 确保二级菜单标题也使用主背景色 */
.dark-mode .el-sub-menu__title {
    background-color: var(--primary-bg) !important;
}

/* ======= 分页器(Pagination)组件精细修复 ======= */
/* 重置强制背景设置，仅定位具体元素 */
.dark-mode .el-pagination {
    background-color: transparent !important; /* 移除整个分页条的背景色 */
    color: var(--text-color) !important;
}

/* 单独定位具体的分页元素 */
.dark-mode .el-pagination .btn-prev, 
.dark-mode .el-pagination .btn-next,
.dark-mode .el-pagination .btn-quicknext, 
.dark-mode .el-pagination .btn-quickprev,
.dark-mode .el-pagination .el-pager li {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .el-pagination button:disabled {
    color: #606266 !important; /* 禁用的按钮保持较暗的文字颜色 */
}

/* 保留活动项目的特殊颜色 */
.dark-mode .el-pagination .el-pager li.active {
    color: var(--menu-active-color) !important;
    background-color: var(--primary-bg) !important; /* 使用主背景色而不是次级背景色 */
}

/* 分页器的文本元素 */
.dark-mode .el-pagination__total,
.dark-mode .el-pagination__sizes,
.dark-mode .el-pagination__jump {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

/* 分页器输入框 */
.dark-mode .el-pagination .el-input__inner,
.dark-mode .el-pagination .el-input__wrapper {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 0 1px var(--border-color) inset !important;
}

/* 分页器下拉菜单 */
.dark-mode .el-select-dropdown {
    background-color: var(--secondary-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .el-select-dropdown__item {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
}

.dark-mode .el-select-dropdown__item:hover {
    background-color: var(--hover-bg) !important;
}

.dark-mode .el-select-dropdown__item.selected {
    color: var(--menu-active-color) !important;
    background-color: rgba(121, 187, 255, 0.1) !important; /* 微妙的蓝色背景 */
}

/* 描述列表组件的精细修复 */
.dark-mode .el-descriptions__header {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

.dark-mode .el-descriptions__title {
    color: var(--text-color) !important;
}

.dark-mode .el-descriptions__body {
    background-color: transparent !important;
}

.dark-mode .el-descriptions .el-descriptions__label {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg) !important;
}

.dark-mode .el-descriptions .el-descriptions__content {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
}

/* 带边框的描述列表 */
.dark-mode .el-descriptions--bordered {
    background-color: transparent !important;
}

.dark-mode .el-descriptions--bordered .el-descriptions__cell {
    border-color: var(--border-color) !important;
}

/* ======= 任务页面专用黑暗模式修复 ======= */

/* 任务计数器 */
.dark-mode .task-counter {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
}

/* 任务详情页 - 基础区块 */
.dark-mode .task-header {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .task-title {
    color: var(--text-color) !important;
}

.dark-mode .task-detail,
.dark-mode .parent-task {
    background-color: var(--secondary-bg) !important;
    color: var(--text-color) !important;
}

/* 对话气泡 */
.dark-mode .chat-bubble {
    background: var(--secondary-bg) !important;
    border-left-color: var(--menu-active-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .chat-bubble .chat-name {
    color: var(--menu-active-color) !important;
}

.dark-mode .chat-bubble .chat-msg {
    color: var(--text-color) !important;
}

.dark-mode .chat-bubble .chat-option {
    background: rgba(103, 194, 58, 0.15) !important;
    color: #7ec96a !important;
}

/* 动作行 */
.dark-mode .action-row {
    color: var(--text-color) !important;
}

.dark-mode .action-row.action-goto {
    background: rgba(64, 158, 255, 0.12) !important;
}

.dark-mode .action-row.action-alert {
    background: rgba(230, 162, 60, 0.12) !important;
}

.dark-mode .action-row.action-movie {
    background: rgba(103, 194, 58, 0.12) !important;
}

.dark-mode .action-row.action-generic {
    background: var(--secondary-bg) !important;
    color: #aaaaaa !important;
}

/* 步骤导航 */
.dark-mode .step-nav {
    background-color: var(--secondary-bg) !important;
}

.dark-mode .step-nav a {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .step-nav a:hover {
    background-color: var(--menu-active-color) !important;
    color: #ffffff !important;
    border-color: var(--menu-active-color) !important;
}

/* 地图和 NPC 提示 */
.dark-mode .map-hint {
    background: rgba(64, 158, 255, 0.12) !important;
    color: var(--menu-active-color) !important;
}

.dark-mode .npc-hint {
    background: rgba(103, 194, 58, 0.12) !important;
    color: #7ec96a !important;
}

.dark-mode .map-link {
    color: var(--menu-active-color) !important;
}

/* 条件分支 */
.dark-mode .condition-block {
    border-color: var(--border-color) !important;
}

.dark-mode .condition-label {
    color: #aaaaaa !important;
}

/* 命令标签 */
.dark-mode .cmd-tag {
    background-color: var(--card-bg) !important;
    color: #aaaaaa !important;
}

/* 奖励/结算/位置区块 */
.dark-mode .task-rewards {
    background-color: rgba(103, 194, 58, 0.12) !important;
    color: var(--text-color) !important;
}

.dark-mode .task-settlement {
    background-color: rgba(230, 162, 60, 0.12) !important;
    color: var(--text-color) !important;
}

.dark-mode .task-location {
    background-color: rgba(64, 158, 255, 0.12) !important;
    color: var(--text-color) !important;
}

/* 时间线组件 */
.dark-mode .el-timeline-item__timestamp {
    color: var(--text-color) !important;
}

.dark-mode .el-timeline-item__wrapper {
    color: var(--text-color) !important;
}

.dark-mode .el-timeline-item__tail {
    border-left-color: var(--border-color) !important;
}

/* XML链接 */
.dark-mode .xml-link {
    color: #aaaaaa !important;
}

.dark-mode .xml-link:hover {
    color: var(--menu-active-color) !important;
}

/* 针对颜色硬编码的内容 */
.dark-mode [style*="color: #909399"] {
    color: #aaaaaa !important;
}

.dark-mode [style*="color: #606266"] {
    color: var(--text-color) !important;
}

.dark-mode [style*="color: #E6A23C"] {
    color: #E6A23C !important;
}

/* 各种颜色标记的不同区域 */
.dark-mode [style*="background-color: #F0F9EB"] {
    background-color: rgba(103, 194, 58, 0.1) !important;
}

.dark-mode [style*="background-color: #FDF6EC"] {
    background-color: rgba(230, 162, 60, 0.1) !important;
}

.dark-mode [style*="background-color: #ECF5FF"] {
    background-color: rgba(64, 158, 255, 0.1) !important;
}

.dark-mode [style*="background-color: #F8F8F8"],
.dark-mode [style*="background-color: #F5F7FA"],
.dark-mode [style*="background-color: #F2F6FC"] {
    background-color: var(--secondary-bg) !important;
}

/* 确保所有分隔线颜色正确 */
.dark-mode .el-divider--vertical {
    background-color: var(--border-color) !important;
}

/* 调整返回顶部按钮 */
.dark-mode .back-to-top {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}