body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      color: #222;
      max-width: 800px;
      margin: auto;
      padding: 20px;
      transition: background 0.3s, color 0.3s;
    }
    h1 { text-align: center; font-size: 1.8em; margin-bottom: 15px; }

    .header-bar {
      position: sticky;
      top: 0;
      background: #fff;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      z-index: 100;
      transition: background 0.3s;
    }

    #timer { font-size: 1.2em; color: #d32f2f; text-align: center; margin-bottom: 8px; font-weight: bold; }
    #progressText, #score, #retryCounter { font-size: 1em; margin: 4px 0; font-weight: bold; text-align: center; }

    .progress-container { background: #ddd; border-radius: 8px; overflow: hidden; height: 18px; margin: 6px 0; }
    .progress-bar { background: #2196F3; height: 100%; width: 0%; transition: width 0.3s ease; }

    .question-box {
      background: white; padding: 20px; border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-top: 20px; margin-bottom: 20px;
      transition: background 0.3s, color 0.3s;
    }

    button {
      display: block; width: 100%; margin: 8px 0; padding: 14px; font-size: 1em;
      border-radius: 6px; border: 1px solid #ccc; cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    button:active { transform: scale(0.98); }
    button.correct { background: #c8e6c9; }
    button.wrong { background: #ffcdd2; }
    #nextBtn { background: #2196F3; color: white; margin-top: 15px; display: none; }
    #restartBtn { background: #4CAF50; color: white; margin-top: 15px; display: none; }
    #reviewBtn { background: #FF9800; color: white; margin-top: 15px; display: none; }
    #retryWrongBtn { background: #9C27B0; color: white; margin-top: 15px; display: none; }

    body.dark { background: #121212; color: #f5f5f5; }
    body.dark .header-bar { background: #1e1e1e; box-shadow: 0 2px 6px rgba(255,255,255,0.1); }
    body.dark .question-box { background: #1e1e1e; color: #f5f5f5; }
    body.dark button { border: 1px solid #555; background: #2c2c2c; color: #f5f5f5; }
    body.dark button.correct { background: #2e7d32; color: white; }
    body.dark button.wrong { background: #c62828; color: white; }

    .result {
      text-align: center; margin-top: 20px; padding: 20px;
      border-radius: 10px; font-size: 1.4em; font-weight: bold;
    }
    .success { background: #c8e6c9; color: #2e7d32; }
    .fail { background: #ffcdd2; color: #c62828; }

    .review-answer { padding: 6px 10px; margin: 4px 0; border-radius: 6px; }
    .review-answer.correct { background: #c8e6c9; color: #2e7d32; font-weight: bold; }
    .review-answer.wrong { background: #ffcdd2; color: #c62828; font-weight: bold; }

    /* Dark mode toggle */
    .toggle-container {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .switch {
      position: relative; display: inline-block; width: 50px; height: 24px;
    }
    .switch input { display: none; }
    .slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc; transition: .4s; border-radius: 24px;
    }
    .slider:before {
      position: absolute;
      content: "🌞";
      height: 18px; width: 18px;
      left: 3px; bottom: 3px;
      background-color: white; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      transition: .4s;
    }
    input:checked + .slider {
      background-color: #2196F3;
    }
    input:checked + .slider:before {
      content: "🌙";
      transform: translateX(26px);
    }

    @media (max-width: 600px) {
      body { padding: 10px; }
      h1 { font-size: 1.5em; }
      button { font-size: 0.95em; padding: 12px; }
      #timer { font-size: 1.1em; }
    }