/* 主题颜色系统 */
:root {
  /* 亮色模式（默认）变量 */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f4;
  --bg-card: #ffffff;
  --text-primary: #333333;
  --text-secondary: #555555;
  --border-color: rgba(0, 0, 0, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --accent-color: #03a9f4;
  --btn-bg: #03a9f4;
  --btn-text: white;
  --input-bg: #f9f9f9;
  --daily-sentence-bg: #f9f9f9;
  --header-bg: #ffffff;

  /* 页面过渡效果 */
  --transition-time: 0.3s;
}

/* 暗色模式变量 */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-card: #252525;
  --text-primary: #f0f0f0;
  --text-secondary: #cccccc;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --accent-color: #64b5f6;
  --btn-bg: #2196f3;
  --btn-text: white;
  --input-bg: #2a2a2a;
  --daily-sentence-bg: #252525;
  --header-bg: #121212;
}

/* 应用主题颜色到页面元素 */
body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color var(--transition-time), color var(--transition-time);
}

.container {
  background-color: var(--bg-primary);
  box-shadow: 0 2px 10px var(--shadow-color);
  transition: background-color var(--transition-time), box-shadow var(--transition-time);
}

/* 日常句子卡片 */
.daily-sentence {
  background-color: var(--daily-sentence-bg);
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: background-color var(--transition-time), box-shadow var(--transition-time);
}

.daily-sentence .sentence {
  color: var(--text-primary);
}

.daily-sentence .translation {
  color: var(--text-secondary);
}

/* 单词列表 */
.word-list-container {
  background-color: var(--bg-card);
  transition: background-color var(--transition-time);
}

.word-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color) !important; /* 强制覆盖边框颜色 */
  color: var(--text-primary) !important; /* 强制覆盖文字颜色 */
  transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);
}

/* 确保单词项中的所有文本都使用正确的颜色 */
.word-item .word-head,
.word-item .word-type,
.word-item .word-meaning,
#favorites-list .word-head,
#favorites-list .word-type,
#favorites-list .word-meaning,
#search-favorites-list .word-head,
#search-favorites-list .word-type,
#search-favorites-list .word-meaning {
  color: var(--text-primary) !important;
}

/* 修复选中状态的单词项样式 */
[data-theme="dark"] .word-item.selected {
  background-color: #1e3a5f !important; /* 深色模式下的选中背景 */
  border: 1px solid #3778c2 !important; /* 深色模式下的选中边框 */
  box-shadow: 0 0 5px rgba(55, 120, 194, 0.4) !important;
}

/* 修复收藏单词和搜索收藏列表样式 */
[data-theme="dark"] #favorites-list .word-item,
[data-theme="dark"] #search-favorites-list .word-item {
  background-color: #333333 !important; /* 深色但不是纯黑色的背景 */
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* 确保在收藏标签页中的单词清晰可见 */
[data-theme="dark"] #favorites-tab,
[data-theme="dark"] #search-favorites-tab {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

/* 强制设置收藏的单词文本颜色为白色 */
[data-theme="dark"] #favorites-list .word-item .word-head,
[data-theme="dark"] #favorites-list .word-item .word-type,
[data-theme="dark"] #favorites-list .word-item .word-meaning,
[data-theme="dark"] #favorites-list .word-item .word-translation,
[data-theme="dark"] #search-favorites-list .word-item .word-head,
[data-theme="dark"] #search-favorites-list .word-item .word-type,
[data-theme="dark"] #search-favorites-list .word-item .word-meaning,
[data-theme="dark"] #search-favorites-list .word-item .word-translation {
  color: #ffffff !important; /* 强制为白色 */
  font-weight: bold !important; /* 加粗 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; /* 添加文字阴影增强可读性 */
}

/* 确保深色模式下所有收藏的单词都有醒目的样式 */
[data-theme="dark"] .word-item.favorited {
  background-color: #3a2a2a !important; /* 略带红色的深色背景 */
  border: 1px solid #ff5252 !important; /* 红色边框 */
}

/* 保证已收藏单词的文本在深色模式下清晰可见 */
[data-theme="dark"] .word-item.favorited .word-head,
[data-theme="dark"] .word-item.favorited .word-type,
[data-theme="dark"] .word-item.favorited .word-meaning,
[data-theme="dark"] .word-item.favorited .word-translation {
  color: #ffffff !important; /* 纯白色文字 */
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* 处理已收藏单词的星标图标 */
[data-theme="dark"] .word-item.favorited .favorite-btn {
  color: #ff5252 !important; /* 鲜红色星标 */
  opacity: 1 !important;
  transform: scale(1.1); /* 略微放大 */
}

/* 修复深色模式下单词悬停效果 */
[data-theme="dark"] .word-item:hover {
  background-color: #2a2a2a !important; /* 深色但比周围略浅，以示区别 */
  border-color: var(--border-color) !important;
}

/* 确保已收藏单词在悬停时保持背景颜色和边框 */
[data-theme="dark"] .word-item.favorited:hover {
  background-color: #452a2a !important; /* 悬停时略微变亮的红棕色 */
  border-color: #ff6b6b !important; /* 悬停时边框更亮 */
}

/* 收藏标签页中的星星图标颜色调整 */
[data-theme="dark"] .favorite-btn {
  color: #ffc107 !important;
  opacity: 0.9;
}

[data-theme="dark"] .favorite-btn:hover {
  opacity: 1;
}

/* 单词列表顶部标签页样式 - 暗色模式 */
[data-theme="dark"] .word-list-header {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color var(--transition-time), color var(--transition-time);
}

[data-theme="dark"] .word-list-tabs {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .word-list-tab {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

[data-theme="dark"] .word-list-tab:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .word-list-tab.active {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* 单词列表标题区域 */
[data-theme="dark"] .word-list-header h3 {
  color: var(--text-primary);
}

/* 按钮 */
.sentence-btn, .nav-button, .level-btn {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  transition: background-color var(--transition-time), color var(--transition-time);
}

/* 搜索栏 */
#word-search-input {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

#word-search-input::placeholder {
  color: var(--text-secondary);
}

/* 搜索结果 */
.search-results {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 5px 20px var(--shadow-color);
  transition: background-color var(--transition-time), color var(--transition-time), box-shadow var(--transition-time);
}

/* 用户菜单 */
.user-menu {
  background-color: var(--bg-card);
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: background-color var(--transition-time), box-shadow var(--transition-time);
}

.menu-item {
  color: var(--text-primary);
  transition: color var(--transition-time);
}

.menu-item:hover {
  background-color: var(--bg-secondary);
}

/* 适配黑暗模式的特殊元素 */
[data-theme="dark"] .word-list-tab.active {
  background-color: var(--accent-color);
  color: var(--bg-primary);
}

/* 深色模式下的高亮文本 */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: var(--text-primary);
}

/***** 统计页面暗色模式样式 *****/

/* 统计页面容器 */
[data-theme="dark"] .stats-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 统计页面头部 */
[data-theme="dark"] .stats-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .stats-header h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .stats-icon {
  color: var(--accent-color);
}

[data-theme="dark"] .back-to-home {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

[data-theme="dark"] .back-to-home:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 时间筛选按钮 */
[data-theme="dark"] .time-btn {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .time-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .time-btn.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* 统计卡片 */
[data-theme="dark"] .stat-card {
  background-color: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .stat-value {
  color: var(--accent-color);
}

[data-theme="dark"] .stat-label {
  color: var(--text-secondary);
}

/* 图表卡片 */
[data-theme="dark"] .chart-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .chart-title {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/***** 阅读器暗色模式 *****/
[data-theme="dark"] .book-container {
  background-color: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .book-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .book-title {
  color: var(--text-primary);
}

[data-theme="dark"] .book-controls button {
  background-color: var(--btn-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .book-controls button:hover {
  background-color: var(--btn-hover);
}

[data-theme="dark"] .book-content {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .book-chapters {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .book-chapter-item {
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .book-chapter-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .book-chapter-item.active {
  background-color: rgba(67, 97, 238, 0.2);
  border-left-color: var(--accent-color);
}

[data-theme="dark"] .book-navigation button {
  background-color: var(--btn-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .book-navigation button:hover:not([disabled]) {
  background-color: var(--btn-hover);
}

[data-theme="dark"] .book-navigation button[disabled] {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] select,
[data-theme="dark"] .book-container input[type="text"],
[data-theme="dark"] .book-container textarea {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/***** 单词连连看游戏样式 *****/
/* 游戏卡片基础样式 - 为所有模式设置 */
.game-container,
.game-selection,
.matching-game {
  color: #333; /* 为了确保在一般情况下文字在亮色背景上可见 */
}

.game-card {
  color: #333 !important; /* 游戏卡片字体强制为深色 */
  background-color: #fff !important; /* 卡片背景强制为白色 */
}

.game-title,
.game-score,
.game-instructions,
.game-results {
  color: #333 !important; /* 确保游戏标题和说明文字是深色的 */
}

/***** 单词连连看游戏暗色模式 *****/
[data-theme="dark"] .game-container,
[data-theme="dark"] .game-selection,
[data-theme="dark"] .matching-game {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .game-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .game-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .game-board {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .game-card {
  background-color: #ffffff !important; /* 强制使用白色背景 */
  border-color: var(--border-color);
  color: #000 !important; /* 暗色模式下强制文字为纯黑色 */
}

[data-theme="dark"] .game-card.selected {
  border-color: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
}

[data-theme="dark"] .game-card.matched {
  background-color: rgba(56, 161, 105, 0.2);
  border-color: #38a169;
}

[data-theme="dark"] .game-score,
[data-theme="dark"] .game-instructions,
[data-theme="dark"] .game-results {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .game-btn,
[data-theme="dark"] .game-option {
  background-color: var(--btn-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .game-btn:hover,
[data-theme="dark"] .game-option:hover {
  background-color: var(--btn-hover);
}

/* 深色模式下修改部分特殊元素颜色 */
[data-theme="dark"] .daily-sentence .source,
[data-theme="dark"] .daily-sentence .date {
  color: #aaaaaa;
}

/* 深色模式滚动条 */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #777;
}