/* 暗黑模式样式 */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* 暗黑模式下的头部导航 */
body.dark-mode header {
    background-color: #1e1e1e;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .logo h1 {
    color: #4db6ac;
}

body.dark-mode nav ul li a {
    color: #e0e0e0;
}

body.dark-mode nav ul li a:hover,
body.dark-mode nav ul li a.active {
    color: #4db6ac;
    border-bottom: 2px solid #4db6ac;
}

/* 暗黑模式按钮样式 */
body.dark-mode .dark-mode-toggle button {
    background-color: #333;
    color: #f0f0f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .dark-mode-toggle button:hover {
    background-color: #444;
    transform: scale(1.05);
}

/* 暗黑模式下的语言选择器 */
body.dark-mode .language-selector select {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e0e0e0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

body.dark-mode .language-selector select:hover,
body.dark-mode .language-selector select:focus {
    border-color: #4db6ac;
    box-shadow: 0 0 0 2px rgba(77, 182, 172, 0.2);
    background-color: #444;
}

/* 暗黑模式下的英雄区域 */
body.dark-mode .hero {
    background: linear-gradient(135deg, #1a2930 0%, #0f2027 100%);
}

body.dark-mode .hero-content h2 {
    color: #4db6ac;
}

body.dark-mode .hero-content p {
    color: #80cbc4;
}

body.dark-mode .cta-button {
    background-color: #00897b;
}

body.dark-mode .cta-button:hover {
    background-color: #00695c;
}

body.dark-mode .hero-animation {
    background-color: #1e1e1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 暗黑模式下的功能特色区域 */
body.dark-mode .features {
    background-color: #1e1e1e;
}

body.dark-mode .features h2 {
    color: #4db6ac;
}

body.dark-mode .feature-card {
    background-color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .feature-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .feature-card h3 {
    color: #4db6ac;
}

/* 暗黑模式下的页脚 */
body.dark-mode footer {
    background-color: #1a1a1a;
}

body.dark-mode .footer-links ul li a {
    color: #4db6ac;
}

body.dark-mode .footer-links ul li a:hover {
    color: #80cbc4;
}

body.dark-mode .footer-bottom {
    border-top: 1px solid #333;
}

body.dark-mode .footer-bottom a {
    color: #4db6ac;
} 


/* 
Author: liboshi
Date: 2025-05-07
*/

.dark-mode .application-example {
    background-color: #2d2d2d;
    border-color: #404040; 
  }
  
  .dark-mode .application-example h4 {
    color: #e0e0e0; 
  }
  
  .dark-mode .application-example p {
    color: #b0b0b0; 
  }
  
  
  .dark-mode .application-example {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }


.dark-mode .mini-quiz {
    background-color: #2d2d2d;
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 20px;
    margin: 1.5rem 0;
  }
  

  .dark-mode .mini-quiz h3 {
    color: #e0e0e0;
    border-bottom: 2px solid #404040;
    padding-bottom: 0.5rem;
  }
  

  .dark-mode .quiz-question p {
    color: #e0e0e0;
  }
  
  .dark-mode .quiz-options label {
    color: #b0b0b0;
    display: block;
    margin: 8px 0;
  }
  

  .dark-mode .quiz-options input[type="radio"] {
    accent-color: #6200ea; 
    margin-right: 8px;
  }
  

  .dark-mode .quiz-feedback {
    color: #b0b0b0;
    margin-top: 8px;
  }
  

  .dark-mode .quiz-feedback[data-correct="a"]::before {
    color: #4CAF50; 
  }
  

  .dark-mode .quiz-feedback[data-correct]:not([data-correct="a"])::before {
    color: #EF5350;
  }
  

  .dark-mode #check-quiz {
    background-color: #6200ea;
    color: white;
    border: none;
  }
  
  .dark-mode #check-quiz:hover {
    background-color: #7C4DFF;
  }
  

  .dark-mode #quiz-results {
    color: #e0e0e0;
    margin-top: 1rem;
    padding: 12px;
    border-radius: 4px;
    background-color: #373737;
  }