body {
      font-family: Arial, sans-serif;
      background: #f3f6fa;
      padding: 20px;
    }

    .container {
      max-width: 650px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    h1 {
      text-align: center;
      color: #283593;
    }

    .question {
      font-size: 18px;
      margin-bottom: 15px;
    }

    .option {
      display: block;
      padding: 10px;
      margin: 8px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
    }

    .option:hover {
      background: #e8eaf6;
    }

    .option.correct {
      background: #c8e6c9;
      border-color: #2e7d32;
    }

    .option.wrong {
      background: #ffcdd2;
      border-color: #c62828;
    }

    .feedback {
      margin-top: 10px;
      font-size: 14px;
    }

    .next-btn {
      margin-top: 15px;
      background: #283593;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
    }

    .next-btn:hover {
      background: #1a237e;
    }

    .score {
      text-align: center;
      font-size: 20px;
      margin-top: 20px;
    }

    footer {
      text-align: center;
      margin-top: 20px;
      color: #777;
      font-size: 14px;
    }