/**
 * 智能错题本 - 主题：现代简约风
 * 设计理念：蓝白配色，简洁清晰专业，适合教育类网站
 */

:root[data-theme="modern"] {
  /* 主色 - 蓝色系 */
  --color-primary: #4A90D9;
  --color-primary-light: #6BA5E7;
  --color-primary-dark: #3A7BC8;
  --color-primary-50: #E8F4FD;
  --color-primary-100: #D1E9FB;
  
  /* 辅助色 */
  --color-secondary: #5A6C7D;
  --color-success: #52C41A;
  --color-warning: #FAAD14;
  --color-error: #FF4D4F;
  
  /* 背景色 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-hover: #F8FAFC;
  
  /* 文字颜色 */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --text-inverse: #FFFFFF;
  
  /* 边框 */
  --border-color: #E2E8F0;
  --border-color-hover: #CBD5E1;
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(74, 144, 217, 0.2);
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  --gradient-header: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

/* Header 样式 - 现代简约风 */
[data-theme="modern"] .header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
}

[data-theme="modern"] .logo {
  color: var(--color-primary);
}

[data-theme="modern"] .slogan {
  color: var(--text-secondary);
}

/* Button 样式 - 现代简约风 */
[data-theme="modern"] .btn-primary {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm);
}

[data-theme="modern"] .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

[data-theme="modern"] .btn-secondary {
  background-color: white;
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="modern"] .btn-secondary:hover:not(:disabled) {
  border-color: var(--border-color-hover);
  background-color: var(--bg-secondary);
}

/* Card 样式 - 现代简约风 */
[data-theme="modern"] .card {
  background-color: white;
  border: 1px solid var(--border-color);
}

[data-theme="modern"] .card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-lg);
}

[data-theme="modern"] .feature-card {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

[data-theme="modern"] .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

[data-theme="modern"] .welcome-card {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

/* 底部导航 - 现代简约风 */
[data-theme="modern"] .bottom-nav {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

[data-theme="modern"] .nav-item.active {
  color: var(--color-primary);
}

/* 主题切换器样式 */
.theme-switcher {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 1001;
  background: rgba(255, 255, 255, 0.95);
  padding: var(--space-2);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.theme-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

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

.theme-btn.active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.theme-btn-modern {
  background: linear-gradient(135deg, #4A90D9, #6BA5E7);
}

.theme-btn-dark {
  background: linear-gradient(135deg, #12121a, #22222e);
}

.theme-btn-vibrant {
  background: linear-gradient(135deg, #FF6B6B, #FFE66D);
}