/* 深色模式 CSS 变量 */
:root[data-theme="dark"] {
  --primary: #6B8AFF;
  --primary-light: #1E2A4A;
  --primary-gradient: linear-gradient(135deg, #3B5BDB 0%, #6B8AFF 50%, #8B7BFF 100%);
  --success: #30D158;
  --danger: #FF453A;
  --warning: #FF9F0A;
  --text: #F5F5F7;
  --text-2: #A1A1A6;
  --text-3: #636366;
  --bg: #000000;
  --card: #1C1C1E;
  --border: #38383A;
  --divider: #1C1C1E;
  --shadow: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-primary: 0 8px 24px rgba(59,91,219,0.3);
}

:root[data-theme="dark"] body {
  background: #000000;
  color: #F5F5F7;
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tab-bar,
:root[data-theme="dark"] .wrong-item,
:root[data-theme="dark"] .record-item,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .summary-item,
:root[data-theme="dark"] .func-grid,
:root[data-theme="dark"] .bank-card,
:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .filter-btn,
:root[data-theme="dark"] .filter-bar,
:root[data-theme="dark"] .input-field,
:root[data-theme="dark"] .input-bar,
:root[data-theme="dark"] .top-bar,
:root[data-theme="dark"] .ai-bubble,
:root[data-theme="dark"] .tip-card {
  background: #1C1C1E;
  color: #F5F5F7;
}

:root[data-theme="dark"] .sidebar {
  box-shadow: 2px 0 16px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .tab-bar {
  box-shadow: 0 -2px 16px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .filter-btn {
  border-color: #38383A;
  color: #A1A1A6;
}

:root[data-theme="dark"] .filter-chip.active,
:root[data-theme="dark"] .filter-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

:root[data-theme="dark"] .bank-card {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .bank-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

:root[data-theme="dark"] .wrong-item,
:root[data-theme="dark"] .record-item {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .wrong-item:hover,
:root[data-theme="dark"] .record-item:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

:root[data-theme="dark"] .input-field {
  background: #2C2C2E;
  color: #F5F5F7;
}

:root[data-theme="dark"] .input-field:focus {
  box-shadow: 0 0 0 2px rgba(107,138,255,0.3);
}

:root[data-theme="dark"] .ai-bubble {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .msg-user .msg-text {
  box-shadow: 0 4px 12px rgba(59,91,219,0.3);
}

:root[data-theme="dark"] .login-link,
:root[data-theme="dark"] .send-btn {
  box-shadow: var(--shadow-primary);
}

:root[data-theme="dark"] .sidebar-footer {
  border-top-color: #38383A;
}

:root[data-theme="dark"] .sidebar-header {
  border-bottom-color: #38383A;
}

:root[data-theme="dark"] .detail-item {
  border-bottom-color: #38383A;
}

:root[data-theme="dark"] .fav-item {
  border-bottom-color: #38383A;
}

:root[data-theme="dark"] .wrong-answer {
  color: #A1A1A6;
}

:root[data-theme="dark"] .detail-explanation {
  background: #2C2C2E;
  color: #A1A1A6;
}

:root[data-theme="dark"] .tag-count {
  background: #1E2A4A;
  color: #6B8AFF;
}

:root[data-theme="dark"] .tag-owner {
  background: #2A1F00;
  color: #FF9F0A;
}

:root[data-theme="dark"] .wrong-bank {
  background: #2C2C2E;
  color: #A1A1A6;
}

:root[data-theme="dark"] .bank-accent {
  background: var(--primary-gradient);
}

:root[data-theme="dark"] .bank-icon {
  background: #1E2A4A;
}

:root[data-theme="dark"] .func-icon-wrap.bg-blue {
  background: linear-gradient(135deg, #1E2A4A, #2A3A6A);
}

:root[data-theme="dark"] .func-icon-wrap.bg-red {
  background: linear-gradient(135deg, #3A1A1A, #4A2A2A);
}

:root[data-theme="dark"] .func-icon-wrap.bg-green {
  background: linear-gradient(135deg, #1A3A2A, #2A4A3A);
}

:root[data-theme="dark"] .func-icon-wrap.bg-orange {
  background: linear-gradient(135deg, #3A2A00, #4A3A10);
}

:root[data-theme="dark"] .welcome-icon-wrap {
  background: linear-gradient(135deg, #1E2A4A, #2A3A6A);
}

:root[data-theme="dark"] .ai-avatar {
  background: linear-gradient(135deg, #1E2A4A, #2A3A6A);
}

:root[data-theme="dark"] .sidebar-logo {
  box-shadow: var(--shadow-primary);
}

:root[data-theme="dark"] .record-accent.accent-high {
  background: #30D158;
}

:root[data-theme="dark"] .record-accent.accent-mid {
  background: #FF9F0A;
}

:root[data-theme="dark"] .record-accent.accent-low {
  background: #FF453A;
}

:root[data-theme="dark"] .btn-mastered {
  background: #1A3A2A;
  color: #30D158;
}

:root[data-theme="dark"] .btn-retry {
  background: #1E2A4A;
  color: #6B8AFF;
}

:root[data-theme="dark"] .btn-danger {
  background: #3A1A1A;
  color: #FF453A;
}

:root[data-theme="dark"] .tag-correct {
  background: #1A3A2A;
  color: #30D158;
}

:root[data-theme="dark"] .tag-wrong {
  background: #3A1A1A;
  color: #FF453A;
}

:root[data-theme="dark"] .bank-tab {
  color: #A1A1A6;
}

:root[data-theme="dark"] .bank-tab.active {
  background: #2C2C2E;
  color: #6B8AFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] .bank-tabs {
  background: #1C1C1E;
}

:root[data-theme="dark"] .section-title {
  color: #A1A1A6;
}

:root[data-theme="dark"] .footer {
  color: #636366;
}

:root[data-theme="dark"] .page-header {
  background: var(--primary-gradient);
}

:root[data-theme="dark"] .header {
  background: var(--primary-gradient);
}

/* 深色模式切换按钮 */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 300;
  font-size: 20px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}

.theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 960px) {
  .theme-toggle {
    top: 16px;
    right: 16px;
  }
}