/* 导入科技感字体 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* 全局变量定义 */
:root {
  --primary-color: #00f3ff;
 /* --secondary-color: #9d4edd; */
  --accent-color: #ff00c8;
  --dark-bg: #0a0a1a;
  --darker-bg: #050510;
  --card-bg: rgba(20, 20, 40, 0.8);
  --card-bg-secondary: rgba(30, 30, 50, 0.8);
  --input-bg: rgba(25, 25, 45, 0.8);
  --text-primary: #ffffff;
  --text-secondary: #ccccff;
  --border-color: rgba(0, 243, 255, 0.3);
  --success-color: #00ff9d;
  --warning-color: #ffcc00;
  --error-color: #ff3860;
  --error-bg-color: rgba(255, 245, 245, 0.9);
  --gradient-start: #6a11cb;
  --gradient-end: #2575fc;
  --glow-effect: 0 0 10px rgba(0, 243, 255, 0.5);
  --transition-speed: 0.3s;
}

/* 基础重置样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif;
  background: var(--dark-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(38, 51, 92, 0.2) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(106, 17, 203, 0.2) 0%, transparent 20%);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--darker-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* 下拉框样式 */
select {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  outline: none;
  transition: all var(--transition-speed);
  text-overflow: ellipsis;
  width: auto;
  max-width: 100%;
}

select:hover {
  box-shadow: var(--glow-effect);
  border-color: var(--primary-color);
}

select:focus {
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
  border-color: var(--primary-color);
}

/* 自定义下拉框样式 */
.styled-select {
  border-radius: 6px;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 120px;
  width: auto;
  max-width: 100%;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  box-sizing: border-box !important;
}

select option {
  background-color: var(--darker-bg);
  color: var(--text-primary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  min-height: 30px !important;
}

/* 基础卡片样式 */
.card {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* 发光动画 */
@keyframes glow-pulse {
  0% { box-shadow: 0 0 5px rgba(0, 243, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.8); }
  100% { box-shadow: 0 0 5px rgba(0, 243, 255, 0.5); }
}

@keyframes border-glow {
  0% { border-color: rgba(0, 243, 255, 0.3); }
  50% { border-color: rgba(0, 243, 255, 0.8); }
  100% { border-color: rgba(0, 243, 255, 0.3); }
}

/* 标题字体样式 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Heiti', '黑体', sans-serif;
  letter-spacing: 1px;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--glow-effect);
}

/* 测评选项按钮样式 */
.assessment-option {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  text-align: center;
  padding: 12px 20px;
  font-size: 1.1em;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  color: white;
  border: 1px solid var(--border-color);
  box-shadow: var(--glow-effect);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.assessment-option.selected {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-color: var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
  transform: translateY(-2px);
}

.assessment-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary, .start-learning-btn {
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 8px 8px 0;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
}

.btn-secondary {
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 8px 8px 0;
  background: linear-gradient(45deg, #2c3e50, #4a6491);
}

.btn-info {
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 8px 8px 0;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  min-width: 80px; /* 与AI批改按钮保持相同宽度 */
}

.btn-correct {
  background: linear-gradient(45deg, #00b09b, #96c93d);
}

.btn-wrong {
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
}

/* 单词认读测评样式 */
.comprehension-word {
  text-align: center;
  margin: 20px 0;
  font-size: 2.5em;
  font-weight: bold;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.7);
  font-family: 'Heiti', '黑体', sans-serif;
}

.comprehension-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

.comprehension-option {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: rgba(26, 26, 46, 0.8);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2em;
  color: var(--text-primary);
}

.comprehension-option:hover {
  background: rgba(30, 58, 138, 0.8);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4);
}

.comprehension-option.selected {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  border-color: var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
  transform: translateY(-3px);
}

.comprehension-option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--primary-color);
  color: var(--dark-bg);
  border-radius: 50%;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.comprehension-option-text {
  flex-grow: 1;
  text-align: left;
}

/* 登录面板样式 */
#authPanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--darker-bg) 0%, var(--dark-bg) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-form {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
  animation: glow-pulse 2s infinite;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--text-primary);
  font-size: 24px;
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

/* 主面板样式 */
#mainPanel {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-section img {
  height: 40px;
}

.system-title {
  font-family: 'Heiti', '黑体', sans-serif;
  font-size: 20px;
  color: var(--primary-color);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

.user-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-section span {
  font-weight: 500;
}

/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边导航 */
.side-navigation {
  width: 250px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  padding: 20px 0;
  overflow-y: auto;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: 'Exo 2', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-speed);
  text-align: left;
  width: 100%;
  border-left: 3px solid transparent;
}

.menu-item:hover {
  background: rgba(0, 243, 255, 0.1);
  color: var(--text-primary);
  border-left: 3px solid var(--primary-color);
}

.menu-item.active {
  background: rgba(0, 243, 255, 0.2);
  color: var(--text-primary);
  border-left: 3px solid var(--primary-color);
  box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.3);
}

.menu-item i {
  width: 20px;
  text-align: center;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: var(--dark-bg);
}

.panel {
  display: none;
  height: 100%;
  animation: fadeIn 0.5s ease;
}

.panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 面板头部 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
  font-size: 24px;
  color: var(--text-primary);
}

.grade-module-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grade-module-selector label {
  font-weight: 500;
}

.grade-module-selector select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 单词记忆内容 */
.word-memory-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.word-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 30px;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.word-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.word {
  font-family: 'Heiti', '黑体', sans-serif;
  font-size: 3.75em;
  font-weight: bold;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

.phonetic {
  font-size: 1.2em;
  margin-top: 10px;
  color: var(--text-secondary);
}

.phonetic i {
  margin-left: 10px;
  cursor: pointer;
  color: var(--primary-color);
  transition: all var(--transition-speed);
}

.phonetic i:hover {
  transform: scale(1.1);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.8);
}

/* 复读文字样式 - 使用与单词英文相同的颜色 */
.phonetic span {
  font-family: 'Heiti', '黑体', sans-serif;
  color: var(--primary-color);
  text-shadow: none;
}

.pos {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 15px;
  color: white;
}

.details p {
  margin: 15px 0;
  font-size: 1.1em;
  line-height: 1.6;
}

/* 释义中文信息使用白色 */
.meaning {
  color: var(--text-primary);
}

.meaning-large {
  font-family: 'Heiti', '黑体', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: var(--text-primary);
}

/* 优化AI记忆法内容样式 */
#ai-memory-content {
  display: inline-block;
  font-family: 'Heiti', '黑体', sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--secondary-color);
  background: var(--darker-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 15px;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(156, 39, 176, 0.3); /* 紫色光晕效果 */
  transition: all var(--transition-speed);
}

#ai-memory-content:hover {
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.6);
  background: var(--darker-bg);
  transform: translateY(-2px);
}

/* AI记忆法容器样式 */
.details p {
  margin: 12px 0;
  line-height: 1.6;
}

/* 优化按钮样式 */
button#refresh-memory-btn, button#save-memory-btn {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  margin-left: 8px;
  padding: 5px 10px;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  color: white;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Exo 2', sans-serif;
  font-size: 0.9em;
  transition: all var(--transition-speed);
  box-shadow: var(--glow-effect);
}

button#refresh-memory-btn:hover, button#save-memory-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
}

button#save-memory-btn {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
}

/* 加载动画 */
.loading-spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 2px solid var(--primary-color);
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#custom-memory-content {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

#fixed-collocation, .mnemonic, .word-group, .example {
  color: var(--success-color);
  font-size: 1.1em;
}

/* 隐藏类 */
.hidden {
  display: none;
}

.progress-container {
  margin: 20px 0;
}

.progress {
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
  border-radius: 5px;
  transition: width 0.3s ease;
}

.tip-container {
  text-align: center;
  margin-top: 15px;
}

.tip {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--warning-color);
}

.countdown {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--primary-color);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

.word-actions {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 10px 0;
}

.word-actions .btn {
  padding: 15px 40px;
  font-size: 1.2em;
}

/* 正确和错误按钮样式 */
.btn-correct {
  background-color: var(--success-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition-speed);
  display: inline-block;
}

.btn-correct:hover {
  background-color: var(--success-color);
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: var(--glow-effect);
}

.btn-wrong {
  background-color: var(--error-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition-speed);
  display: inline-block;
}

.btn-wrong:hover {
  background-color: var(--error-color);
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: var(--glow-effect);
}

.audio-controls {
  text-align: center;
  margin: 20px 0;
  display: none; /* 隐藏重复发音按钮所在的容器 */
}

.btn-primary, .start-learning-btn {
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 8px 8px 0;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary:hover, .start-learning-btn:hover {
  background: var(--primary-color);
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-info:hover {
  background: var(--primary-color);
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.learn-mode-info {
  background: rgba(0, 243, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.learn-mode-info h3 {
  color: var(--primary-color);
  margin-bottom: 10px;
}

.learn-mode-info p {
  line-height: 1.6;
}

/* 学习记录样式 */
.history-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.statistics-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 15px;
  background: rgba(0, 243, 255, 0.1);
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
}

.date-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.date-group {
  display: flex;
  align-items: center;
}

.date-group label {
  margin-right: 10px;
  font-weight: bold;
}

.date-group input {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.search-btn {
  padding: 8px 20px;
  background-color: var(--primary-color);
  color: var(--dark-bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.learning-records-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-primary);
}

.learning-records-table th {
  background-color: rgba(0, 243, 255, 0.2);
  padding: 12px 15px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.learning-records-table td {
  padding: 12px 15px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.learning-records-table tr:nth-child(even) {
  background-color: rgba(0, 243, 255, 0.05);
}

.learning-records-table tr:hover {
  background-color: rgba(0, 243, 255, 0.1);
}

.pagination-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination-control label {
  font-weight: bold;
}

.pagination-control select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.pagination-control button {
  padding: 5px 15px;
}

/* 学习报告样式 */
.details-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.info-card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease;
}

.info-card:hover {
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  color: white;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
}

/* 暗色主题下移除面板头部的渐变背景 */
[data-theme="dark"] .card-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.selector-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 暗色主题下移除面板头部的渐变背景 */
[data-theme="dark"] .card-header {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

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

.card-body {
  padding: 20px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.info-table tr {
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.info-table tr:last-child {
  border-bottom: none;
}

.info-table .label {
  font-weight: 600;
  color: var(--text-secondary);
  padding: 12px 0;
  width: 40%;
  text-align: center;
  font-size: 14px;
}

.info-table .value {
  color: var(--text-primary);
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
}

.info-table .value.highlight {
  color: var(--error-color);
  font-weight: 600;
}

.info-table .value.success {
  color: var(--success-color);
  font-weight: 600;
}

.info-table .value.notes {
  color: var(--text-secondary);
  font-style: italic;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin: 5px;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 5px;
}

.time-filter-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.time-filter-btn {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  background-color: rgba(0, 243, 255, 0.1);
}

.time-filter-btn:hover {
  border-color: rgba(0, 243, 255, 0.5);
}

.time-filter-btn.active {
  color: white;
  border-color: transparent;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
}

#daily-learning-chart {
  width: 100%;
  height: 400px;
}

#chart-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--text-secondary);
}

/* 语法学习样式 */
.grammar-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.grammar-card {
  background: rgba(0, 243, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.grammar-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.grammar-header h2 {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.grammar-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

#grammar-level-select, #grammar-topic-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(20, 20, 40, 0.8);
  color: var(--text-primary);
  min-width: 150px;
}

.grammar-body {
  color: var(--text-primary);
}

#grammar-explanation {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 20px;
}

#grammar-examples-content {
  margin-top: 20px;
}

/* 语法学习内容样式 - 暗色系优化 */
.tense-item {
  background: rgba(0, 243, 255, 0.08);
  border-left: 4px solid var(--primary-color);
  padding: 16px;
  margin: 12px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tense-item h4 {
  color: var(--primary-color);
  margin-bottom: 8px;
  font-size: 1.1em;
  font-weight: 600;
}

.tense-item p {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 8px 0;
}

.error-item {
  background: rgba(255, 107, 107, 0.1);
  border-left: 4px solid #ff6b6b;
  padding: 16px;
  margin: 12px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

.error-item h4 {
  color: #ff6b6b;
  margin-bottom: 8px;
  font-size: 1.1em;
  font-weight: 600;
}

.error-item p {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 8px 0;
}

.example-item {
  background: rgba(67, 230, 167, 0.1);
  border-left: 4px solid #43e6a7;
  padding: 16px;
  margin: 12px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(67, 230, 167, 0.2);
}

.example-item h4 {
  color: #43e6a7;
  margin-bottom: 8px;
  font-size: 1.1em;
  font-weight: 600;
}

.example-item p {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 8px 0;
}

.example-item .example-text {
  font-style: italic;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

.example-item .example-translation {
  color: var(--text-secondary);
  font-size: 0.95em;
  margin-top: 4px;
}

/* 语法学习重点标识 */
.grammar-keyword {
  color: var(--primary-color);
  font-weight: bold;
  background: rgba(0, 243, 255, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

.grammar-important {
  color: #ffd93d;
  font-weight: 600;
  background: rgba(255, 217, 61, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

.grammar-note {
  background: rgba(255, 184, 77, 0.1);
  border-left: 3px solid #ffb84d;
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 6px;
  font-size: 0.95em;
  color: var(--text-secondary);
}

/* 个人中心样式 */
.personal-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

/* 抗遗忘训练样式 */
.error-words-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.error-words-panel {
  margin-top: 20px;
  padding: 20px;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
}

.error-words-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.error-words-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#errorWordsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-primary);
}

#errorWordsTable th, #errorWordsTable td {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: center;
  font-size: 16px;
}

#errorWordsTable th {
  background-color: rgba(0, 243, 255, 0.2);
}

#errorWordsTable tr:nth-child(even) {
  background-color: rgba(0, 243, 255, 0.05);
}

#errorWordsTable tr:hover {
  background-color: rgba(0, 243, 255, 0.1);
}

#noErrorWordsMessage {
  text-align: center;
  margin-top: 极光;
  color: var(--success-color);
  font-weight: bold;
  display: none;
}

/* 抗遗忘训练表格按钮样式 */
.show-meaning-btn {
  background-color: #0066cc !important;
  color: white !important;
  border: none !important;
}

.show-meaning-btn:hover {
  background-color: #004499 !important;
}

.delete-btn {
  background-color: #cc0000 !important;
  color: white !important;
  border: none !important;
}

.delete-btn:hover {
  background-color: #990000 !important;
}

/* 学员管理样式 
.user-management-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}*/

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-bar input {
  flex: 2;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 表格容器 - 添加水平滚动 */
.table-container {
  overflow-x: auto;
  width: 100%;
  margin: 15px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
  min-width: 1000px; /* 最小宽度确保表格内容完整 */
}

.user-table th, .user-table td {
  border: 1px solid var(--border-color);
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap; /* 确保内容在一行内显示 */
  overflow: visible;
  font-size: 13px;
  min-width: 60px; /* 减小最小列宽 */
  max-width: none; /* 移除最大列宽限制 */
}

/* 学员卡列特殊宽度设置 */
.user-table th:nth-child(8),
.user-table td:nth-child(8) { /* 学员卡列是第8列 */
  min-width: 100px; /* 增加学员卡列的最小宽度 */
  width: auto;
}

/* 表格内按钮自适应样式 */
.user-table .btn {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 60px;
  white-space: nowrap;
  margin: 2px;
}

.user-table .btn-sm {
  padding: 3px 6px;
  font-size: 11px;
  min-width: 50px;
}

.user-table th {
  background-color: rgba(0, 243, 255, 0.2);
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
}

.user-table tr:nth-child(even) {
  background-color: rgba(0, 243, 255, 0.05);
}

.user-table tr:hover {
  background-color: rgba(0, 243, 255, 0.1);
}

/* 单词库管理样式 */
.word-bank-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.word-bank-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.word-bank-search input {
  flex: 2;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.word-bank-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-primary);
  min-width: 1200px; /* 最小宽度确保表格内容完整 */
}

.word-bank-table th, .word-bank-table td {
  border: 1px solid var(--border-color);
  padding: 8px 6px;
  text-align: left;
  white-space: nowrap; /* 确保内容在一行内显示 */
  overflow: visible;
  font-size: 13px;
  min-width: 60px; /* 减小最小列宽 */
}

.word-bank-table th {
  background-color: rgba(0, 243, 255, 0.2);
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
}

.word-bank-table tr:nth-child(even) {
  background-color: rgba(0, 243, 255, 0.05);
}

.word-bank-table tr:hover {
  background-color: rgba(0, 243, 255, 0.1);
}

/* 响应式表格设计 */
@media (max-width: 1200px) {
  .user-table th, .user-table td {
    padding: 10px 6px;
    font-size: 0.9em;
  }
  
  .word-bank-table th, .word-bank-table td {
    padding: 10px 8px;
    font-size: 0.9em;
  }
}

@media (max-width: 768px) {
  .user-table th, .user-table td {
    padding: 8px 4px;
    font-size: 0.85em;
  }
  
  .word-bank-table th, .word-bank-table td {
    padding: 8px 6px;
    font-size: 0.85em;
  }
  
  .table-container {
    margin: 10px -15px;
    width: calc(100% + 30px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* 单词导入导出样式 */
.import-export-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.btn-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

#import-area {
  margin-top: 20px;
  padding: 20px;
  border: 1px dashed var(--border-color);
  text-align: center;
  display: none;
}

#import-file {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 测评报告样式 
.assessment-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}*/

#assessmentRecordsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-primary);
}

#assessmentRecordsTable th, #assessmentRecordsTable td {
  border: 1px solid var(--border-color);
  padding: 10px;
  text-align: center;
}

#assessmentRecordsTable th {
  background-color: rgba(0, 243, 255, 0.2);
}

#assessmentRecordsTable tr:nth-child(even) {
  background-color: rgba(0, 243, 255, 0.05);
}

#assessmentRecordsTable tr:hover {
  background-color: rgba(0, 243, 255, 0.1);
}

/* 测评报告详情样式 */
.assessment-report-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.assessment-report-header h4 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.assessment-score {
  font-size: 1.8em;
  font-weight: bold;
  color: var(--success-color);
  margin: 10px 0;
}

/* 测评详情表格容器 */
.assessment-details {
  overflow-x: auto; /* 允许横向滚动 */
  margin: 20px 0;
  -webkit-overflow-scrolling: touch; /* 使iOS上的滚动更流畅 */
}

/* 测评详情表格样式 */
.assessment-details-table {
  width: 100%;
  min-width: 700px; /* 设置最小宽度 */
  border-collapse: collapse;
  margin: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.assessment-details-table th {
  background: rgba(0, 243, 255, 0.2);
  padding: 12px 15px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap; /* 强制表头不换行 */
}

.assessment-details-table td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  word-wrap: break-word; /* 允许长单词换行 */
  word-break: break-word; /* 允许单词内换行 */
}

.assessment-details-table tr:last-child td {
  border-bottom: none;
}

.assessment-details-table tr:nth-child(even) {
  background: rgba(0, 243, 255, 0.05);
}

.assessment-details-table tr:hover {
  background: rgba(0, 243, 255, 0.1);
}

/* AI智能单词文章表格特殊列宽设置 */
.assessment-details-table th:nth-child(1),
.assessment-details-table td:nth-child(1) { /* 题号列 */
  width: 60px;
}

.assessment-details-table th:nth-child(2),
.assessment-details-table td:nth-child(2) { /* 题目列 */
  width: 150px;
}

.assessment-details-table th:nth-child(3),
.assessment-details-table td:nth-child(3) { /* 选项列 */
  width: 250px;
  text-align: left;
}

.assessment-details-table th:nth-child(4),
.assessment-details-table td:nth-child(4) { /* 您的选择列 */
  width: 100px;
}

.assessment-details-table th:nth-child(5),
.assessment-details-table td:nth-child(5) { /* 正确答案列 */
  width: 100px;
}

.assessment-details-table th:nth-child(6),
.assessment-details-table td:nth-child(6) { /* 解析列 */
  width: 200px;
}

.assessment-details-table th:nth-child(7),
.assessment-details-table td:nth-child(7) { /* 结果列 */
  width: 80px;
}

/* 正确/错误标记样式 */
.assessment-details-table .correct::before {
  content: "✓";
  color: var(--success-color);
  font-weight: bold;
  margin-right: 5px;
}

.assessment-details-table .incorrect::before {
  content: "✗";
  color: var(--error-color);
  font-weight: bold;
  margin-right: 5px;
}

/* 测评单词项样式 */
.assessment-word-item {
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.assessment-word-item.correct {
  border-color: var(--success-color);
  background: rgba(0, 255, 157, 0.1);
}

.assessment-word-item.incorrect {
  border-color: var(--error-color);
  background: rgba(255, 56, 96, 0.1);
}

.assessment-word-item strong {
  color: var(--primary-color);
}

/* 拼写测评项样式 */
.spelling-item {
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.spelling-item.correct {
  border-color: var(--success-color);
  background: rgba(0, 255, 157, 0.1);
}

.spelling-item.incorrect {
  border-color: var(--error-color);
  background: rgba(255, 56, 96, 0.1);
}

/* 听力测评项样式 */
.listening-item {
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.listening-item.correct {
  border-color: var(--success-color);
  background: rgba(0, 255, 157, 0.1);
}

.listening-item.incorrect {
  border-color: var(--error-color);
  background: rgba(255, 56, 96, 0.1);
}

/* 听力测评重复发音按钮样式 */
#repeatListeningBtn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: auto;
    max-width: 180px;
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Exo 2', sans-serif;
    cursor: pointer;
}

#repeatListeningBtn:hover {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* AI文章测评样式 */
.article-section {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid var(--border-color);
}

.article-content {
  margin-top: 10px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  line-height: 1.6;
}

/* AI智能单词文章样式 
.reading-content {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
}*/

.reading-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 5px;
  min-width: 100%;
}

.reading-controls > * {
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reading-controls label {
  font-weight: bold;
  white-space: nowrap;
}

.reading-controls select {
  border-radius: 6px;
  height: 33px;
  flex: 1 1 auto;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  padding: 0 10px;
}

#loading-indicator {
  margin-top: 20px;
  display: none;
}

#article-content {
  padding: 15px;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  color: var(--text-primary);
  font-weight: bold;
  margin: 15px 0;
}

#reading-content, #reading-report {
  margin-top: 30px;
  display: none;
}

/* 模态框样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0;
  margin: 0;
  padding: 25px;
  width: 100%;
  height: 100%;
  max-width: none;
  color: var(--text-primary);
  position: relative;
  box-shadow: none;
  overflow-y: auto;
}

.modal-content h3 {
  font-size: 1.8pxem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  color: var(--primary-color);
  margin-bottom: 20px;
  text-align: center;
}

.close {
  color: var(--text-secondary);
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}

.close:hover {
  color: var(--primary-color);
}

.assessment-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* 测评按钮样式 */
.assessment-buttons .btn {
  height: 45px; /* 减小按钮高度 */
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 130px; /* 减小最小宽度 */
  padding: 0 12px;
}

/* 学前认读测评按钮 - 明亮蓝紫色 */
#startAssessmentBtn {
  background: linear-gradient(45deg, #6a3de8, #ff7e9d);
}

/* 学前抄写练习按钮 - 绿色 */
#startCopyAssessmentBtn {
  background: linear-gradient(45deg, #11998e, #38ef7d);
}

/* 学前拼写测评按钮 - 橙色 */
#startSpellingAssessmentBtn {
  background: linear-gradient(45deg, #f46b45, #eea849);
}

/* 学前听力测评按钮 - 粉色 */
#startListeningAssessmentBtn {
  background: linear-gradient(45deg, #bc4e9c, #f80759);
}

/* 跳过测评按钮 - 灰色 */
#skipAssessmentBtn {
  background: linear-gradient(45deg, #2c3e50, #4a6491);
}

/* 单词射击游戏按钮 - 紫红色 */
#startWordShooterGameBtn {
  background: linear-gradient(45deg, #9d4edd, #f72585);
}

/* 学后认读测评按钮 - 明亮蓝紫色 (与学前认读测评相同) */
#postAssessmentBtn {
  background: linear-gradient(45deg, #6a3de8, #ff7e9d);
}

/* 学后单词射击游戏按钮 - 紫红色 (与学前单词射击游戏相同) */
#postWordShooterGameBtn {
  background: linear-gradient(45deg, #9d4edd, #f72585);
}

/* 学后抄写练习按钮 - 绿色 (与学前抄写练习相同) */
#postCopyAssessmentBtn {
  background: linear-gradient(45deg, #11998e, #38ef7d);
}

/* 学后拼写测评按钮 - 橙色 (与学前拼写测评相同) */
#postSpellingAssessmentBtn {
  background: linear-gradient(45deg, #f46b45, #eea849);
}

/* 学后听力测评按钮 - 粉色 (与学前听力测评相同) */
#postListeningAssessmentBtn {
  background: linear-gradient(45deg, #bc4e9c, #f80759);
}

/* 继续学习按钮 - 灰色 (与跳过测评相同) */
#continueLearningBtn {
  background: linear-gradient(45deg, #2c3e50, #4a6491);
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* 测评报告模态框按钮布局优化 */
#assessmentReportModal .modal-content {
  position: relative;
  padding-top: 50px; /* 为顶部按钮区域留出空间 */
  max-width: none;
  width: 100%;
}

#assessmentReportModal .modal-buttons {
  position: absolute;
  top: 15px;
  right: 50px; /* 向左移动，避免与关闭按钮重叠 */
  margin: 0 !important;
  justify-content: flex-end;
  z-index: 1000;
}

#assessmentReportModal .modal-buttons .btn {
  margin: 0;
}

/* 认读测评和抄写测评模态框特定样式 */
#assessmentModal .modal-content,
#copyAssessmentModal .modal-content {
  max-width: none; /* 满屏显示 */
  width: 100%;
}

/* 关闭按钮样式优化 */
#assessmentReportModal .close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1001;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#assessmentReportModal .close:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

#spellingAnswer, #listeningAnswer {
  padding: 16px 20px;
  width: 90%; /* 改为百分比宽度，适应模态框宽度 */
  max-width: 800px; /* 增加最大宽度 */
  height: 75px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  margin: 25px auto;
  display: block;
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

#spellingAnswer:focus, #listeningAnswer:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.3);
  outline: none;
}

#spellingQuestion, #listeningQuestion {
  font-size: 2em;
  font-weight: bold;
  color: var(--text-primary);
  margin: 15px 0;
  text-align: center;
}

#spellingReport, #listeningReport {
  background-color: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
  margin-top: 25px;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  display: none;
}

#spellingScore, #listeningScore {
  font-weight: bold;
  color: var(--primary-color);
  font-size: 1.2em;
}

#deletePasswordSection input, #changePasswordSection input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

#deletePasswordSection label, #changePasswordSection label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* 测评模态框按钮样式 */
#nextAssessmentBtn, 
#nextSpellingQuestionBtn, 
#nextListeningQuestionBtn,
#submitSpellingBtn,
#submitListeningBtn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Exo 2', sans-serif;
    cursor: pointer;
}

#nextAssessmentBtn:hover, 
#nextSpellingQuestionBtn:hover, 
#nextListeningQuestionBtn:hover,
#submitSpellingBtn:hover,
#submitListeningBtn:hover {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 抄写练习样式 */
#copyWordDisplay {
    text-align: center;
    margin-bottom: 30px;
}

.copy-question-header {
    margin-bottom: 20px;
}

.copy-question-header h4 {
    margin: 0 0 10px 0;
    color: #fff;
}

.word-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    text-align: center;
}

.word-part-speech {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.part-of-speech {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
}

.phonetic {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 15px;
    font-style: italic;
}

/* 复读图标样式 */
#speakCopyWordInline {
    font-size: 1em;
    transition: all 0.3s ease;
}

#speakCopyWordInline:hover {
    transform: scale(1.2);
}

.copy-word-display {
    font-size: 2.5em;
    font-weight: bold;
    letter-spacing: 5px;
    margin: 15px 0;
    min-height: 60px;
    display: flex;
    justify-content: center;
    gap: 3px;
    order: -1; /* 确保单词显示在最上面 */
}

.copy-letter {
    display: inline-block;
    width: 50px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
    color: transparent; /* 默认透明显示 */
}

.copy-letter.visible {
    color: inherit; /* 按Shift键时显示黑色文字 */
}

.copy-letter.correct {
    background: linear-gradient(45deg, #00b09b, #96c93d);
    color: white !important; /* 确保正确状态显示白色文字 */
}

.copy-letter.incorrect {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white !important; /* 确保错误状态显示白色文字 */
}

#copyAnswer {
    width: 90%; /* 改为百分比宽度，适应模态框宽度 */
    max-width: 800px; /* 增加最大宽度 */
    padding: 12px;
    font-size: 1.2em;
    text-align: center;
    background: rgba(26, 26, 46, 0.8);
    border: 2px solid #4a4a8a;
    border-radius: 8px;
    color: white;
    margin: 20px auto;
    display: block;
}

#copyAnswer:focus {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 10px rgba(106, 17, 203, 0.5);
}

.word-meaning {
    font-size: 1.2em;
    color: #a0a0ff;
    margin-top: 10px;
}

.copy-assessment-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.copy-assessment-buttons .btn {
    margin: 0 10px;
}

/* 抄写练习发音按钮样式 */
#speakCopyWordBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 发音速度控制样式 */
.speed-control-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.speed-control-container span {
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
}

#speechSpeedControl {
    width: 150px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #11998e, #38ef7d);
    outline: none;
    -webkit-appearance: none;
}

#speechSpeedControl::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38ef7d;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(56, 239, 125, 0.5);
}

#speechSpeedControl::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38ef7d;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px rgba(56, 239, 125, 0.5);
}

#speedValueDisplay {
    color: #38ef7d;
    font-size: 0.9em;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

#testSpeedBtn {
    padding: 6px 12px;
    font-size: 0.8em;
    background: linear-gradient(45deg, #6a3de8, #ff7e9d);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

#testSpeedBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 全局语音速度控制样式 */
.global-speed-control-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 15px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    max-width: 400px;
}

.global-speed-control-container span {
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
}

#globalSpeechSpeedControl {
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #11998e, #38ef7d);
    outline: none;
    -webkit-appearance: none;
}

#globalSpeechSpeedControl::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38ef7d;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(56, 239, 125, 0.5);
}

#globalSpeechSpeedControl::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38ef7d;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px rgba(56, 239, 125, 0.5);
}

#globalSpeedValueDisplay {
    color: #38ef7d;
    font-size: 0.9em;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

#globalTestSpeedBtn {
    padding: 6px 12px;
    font-size: 0.8em;
    background: linear-gradient(45deg, #6a3de8, #ff7e9d);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

#globalTestSpeedBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 抄写练习结果表格样式 */
.copy-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: rgba(26, 26, 46, 0.8);
    border-radius: 10px;
    overflow: hidden;
}

.copy-results-table th,
.copy-results-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.copy-results-table th {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: white;
}

.copy-results-table tr:last-child td {
    border-bottom: none;
}

.copy-results-table tr.correct {
    background-color: rgba(0, 176, 155, 0.2);
}

.copy-results-table tr.incorrect {
    background-color: rgba(255, 65, 108, 0.2);
}

.copy-results-table td:nth-child(4) {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.copy-results-table tr.correct td:nth-child(4) {
    color: #00b09b;
}

.copy-results-table tr.incorrect td:nth-child(4) {
    color: #ff416c;
}

/* 确保第一列正确显示 */
.copy-results-table td:nth-child(1) {
    text-align: left;
    font-weight: normal;
    color: inherit;
}

#copyReport {
    display: none;
}

#copyReport h4 {
    text-align: center;
    color: white;
    font-size: 1.5em;
    margin-bottom: 20px;
}

#continueAfterCopyBtn {
    display: block;
    margin: 20px auto 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .side-navigation {
    width: 80px;
    padding: 10px 0;
  }
  
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }
  
  .menu-item span {
    display: none;
  }
  
  .menu-item i {
    margin: 0;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .info-cards-container {
    grid-template-columns: 1fr;
  }
  
  .statistics-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-item {
    width: 100%;
  }
  
  .error-words-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .error-words-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .search-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .date-filter {
    flex-direction: column;
    gap: 10px;
  }
  
  .time-filter-buttons {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .top-navbar {
    padding: 10px 15px;
    flex-direction: column;
    gap: 10px;
  }
  
  .system-title {
    font-size: 16px;
  }
  
  .menu-text {
    display: none;
  }
  
  .content-area {
    padding: 15px;
  }
  
  .word-card {
    padding: 20px;
  }
  
  .word {
    font-size: 2.5em;
  }
  
  .modal-content {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 90%;
    padding: 20px;
  }
  
  .assessment-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    min-width: auto;
    height: 40px;
    font-size: 13px;
  }
  
  .modal-content {
    margin: 2% auto;
    padding: 20px;
    max-width: 95%;
  }
  
  .reading-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .reading-controls select {
    width: 100%;
  }
}

#assessmentChoiceModal .modal-content p {
    text-align: center;
}

/* AI作文练习面板样式 */
.composition-content {
    padding: 25px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.composition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.composition-header h2 {
    font-size: 20px;
    color: var(--primary-color);
    margin: 0;
}

.composition-controls {
    margin-bottom: 25px;
}

.composition-controls .grade-module-selector {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.composition-topic-area {
    background: rgba(26, 26, 46, 0.8);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--primary-color);
    min-height: 120px;
    transition: all 0.3s ease;
}

.composition-topic-area:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.composition-topic {
    color: #00ffff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
}

.composition-requirements {
    color: #ffcc00;
    font-size: 1.5em;
    margin: 15px 0;
    padding: 10px;
    background-color: rgba(255, 204, 0, 0.1);
    border-radius: 5px;
    border: 1px dashed #ffcc00;
}

.translation {
    color: #66ccff;
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

.composition-area {
    display: none;
}

.composition-report {
    display: none;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid #00ffff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

/* 英语作文报告模态框按钮样式 */
#english-composition-report .report-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

#english-composition-report .report-header h3 {
  color: white;
  margin: 0;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#english-composition-report .modal-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

#english-composition-report .modal-buttons .btn {
  margin: 0;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#english-composition-report .modal-buttons .btn-primary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

#english-composition-report .modal-buttons .btn-primary:hover {
  background: linear-gradient(135deg, #3f87db 0%, #00d9fe 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(79, 172, 254, 0.4);
}

#english-composition-report .modal-buttons .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(79, 172, 254, 0.3);
}

#english-composition-report .modal-buttons .btn:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#english-composition-report .modal-buttons .btn:not(.btn-primary):hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00ffff;
}

.report-header h3 {
    color: #00ffff;
    margin: 0;
}

.report-content {
    color: #fff;
}

.report-section {
    margin-bottom: 20px;
}

.report-section h4 {
    color: #00ffff;
    margin-bottom: 10px;
}

.report-section p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.2em;
}

.score {
    font-size: 2em;
    font-weight: bold;
    color: #ffcc00;
    text-align: center;
    margin: 10px 0;
}

.comment {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 5px;
    min-height: 100px;
}


.composition-textarea {
    width: 100%;
    height: 320px;
    background: rgba(26, 26, 46, 0.8);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
    resize: vertical;
    font-family: 'Microsoft YaHei', 'Heiti', '黑体', sans-serif;
    font-size: 23px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.composition-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}

.composition-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.composition-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.word-count {
    color: var(--text-secondary);
    font-size: 14px;
}

.btn-compose {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-compose:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-cancel-compose {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel-compose:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* 学习统计网格布局 - 田字格 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

.stat-grid .stat-item {
    width: 100%;
    margin: 0;
    padding: 16px 12px;
    text-align: center;
    background: rgba(0, 243, 255, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-grid .stat-number {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 5px;
    line-height: 1.2;
}

.stat-grid .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* 版本选择标签样式 */
.version-select-label {
    color: white;
}

/* 拼写测评和听力测评模态框特定样式 */
#spellingAssessmentModal .modal-content,
#listeningAssessmentModal .modal-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: none;
    width: 100%;
}

#spellingAssessmentContainer,
#listeningAssessmentContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

#spellingQuestion,
#listeningQuestion {
    font-size: 2.2em;
    font-weight: bold;
    color: var(--primary-color);
    margin: 15px 0;
    text-align: center;
}

/* 学习时长样式 - 固定宽度防止位置跳动 */
#learningTimer {
    min-width: 140px; /* 固定宽度，防止时间变化导致布局跳动 */
    text-align: center;
    display: inline-block;
}

/* 浅色主题下改为黄色 */
[data-theme="light"] #learningTimer {
    color: yellow !important;
}

/* AI错词造句模态框样式 */
#aiSentenceModal .modal-content {
    max-width: none; /* 移除宽度限制，改为满屏 */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left; /* 让内容靠左，但模态框保持居中 */
}

.ai-sentence-content {
   /* display: flex;*/
    flex-direction: column;
    gap: 20px;
}

.word-display h4 {
    color: var(--primary-color);
    font-size: 1.5em; /* 统一调整为1.5em */
    margin: 0 0 15px 0; /* 增加底部间距 */
    text-align: center;
}

#error-word-text {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 1.2em; /* 保持1em */
}

.word-display p {
    font-size: 1.5em; /* 统一调整为1.5em */
    text-align: center;
    margin: 15px 0; /* 调整行间距 */
    color: var(--text-secondary);
}

#error-word-meaning {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 1em; /* 统一调整为1em */
}

/* 批改结果字体大小 */
.ai-feedback h4,
.ai-feedback #feedback-content {
    font-size: 1.3em; /* 批改结果统一调整为1.3em */
}

.sentence-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 1.8em; /* 增大字体大小 */
    resize: vertical;
    min-height: 100px;
}

.sentence-input textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.ai-feedback {
    margin-top: 20px;
    padding: 15px;
    background: var(--card-bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.ai-feedback h4 {
    color: var(--primary-color);
    margin: 0 0 10px 0;
    font-size: 1.1em;
}

#feedback-content {
    line-height: 1.3; /* 调小行间距 */
    color: var(--text-primary);
}

#feedback-content .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 单词射击游戏报告样式 */
.word-shooter-game-report {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 25px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-align: center;
}

.word-shooter-game-report h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.8em;
}

.report-stats {
    display: flex;
    justify-content: space-around;
    margin: 30px 0;
    flex-wrap: wrap;
    gap: 20px;
}

.report-stats .stat-item {
    background: rgba(0, 243, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 1em;
}

.stat-value {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.8em;
}

.report-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.report-buttons .btn {
    padding: 12px 25px;
    font-size: 1.1em;
}

/* 单词射击游戏样式 */
.word-shooter-game {
    width: 100%;
    max-width: 820px;
    margin: 0 auto !important;
    background-color: #1a1a2e;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

/* 单词射击游戏模态框内容样式 */
#wordShooterGameModal .modal-content {
    margin: 0 auto !important;
    max-width: 900px !important;
    width: 90% !important;
    height: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 10px !important;
}

/* 单词射击游戏容器样式 */
#wordShooterGameContainer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.game-header h3 {
    margin: 0;
    color: #4CAF50;
}

.game-info {
    display: flex;
    gap: 20px;
}

.score, .progress {
    font-size: 18px;
    font-weight: bold;
}

#wordShooterCanvas {
    display: block;
    margin: 0 auto 15px;
    border: 2px solid #333;
    border-radius: 5px;
    background-color: #0f0f1e;
}

.game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.game-controls .btn {
    padding: 8px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.game-controls .btn:hover {
    background-color: #45a049;
}

.game-controls .btn:disabled {
    background-color: #666;
    cursor: not-allowed;
}

.game-instructions {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 5px;
}

.game-instructions h4 {
    margin-top: 0;
    color: #4CAF50;
}

.game-instructions p {
    margin-bottom: 5px;
}