body {
      font-family: 'Segoe UI', sans-serif;
      background: #f0f2f5;
      margin: 0;
      padding: 1rem;
      color: #333;
    }
    .container {
      max-width: 900px;
      margin: auto;
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    h1, h2 {
      color: #2c3e50;
      margin-bottom: 0.5rem;
    }
    .scorecard {
      background: #eafaf1;
      border-left: 5px solid #28a745;
      padding: 1rem;
      margin-bottom: 2rem;
      border-radius: 6px;
    }
    .section {
      margin-top: 2rem;
    }
    .label {
      font-weight: 600;
      color: #555;
    }
    ul {
      padding-left: 1.5rem;
    }
    .card {
      padding: 1rem;
      background: #f7f7f7;
      border-radius: 6px;
      margin-bottom: 1rem;
    }
    .btn-download {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      margin-top: 1rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
    }
    .btn-download:hover {
      background-color: #0056b3;
    }
    @media (max-width: 768px) {
      .container {
        padding: 1rem;
      }
      .btn-download {
        width: 100%;
        text-align: center;
      }
    }
    .img-fluid {
    max-width: 100px;
    max-height: 100px;
    /*float: right;*/
}
    .progress-wrap {
      margin-bottom: 1rem;
    }
    .progress-bar {
      height: 20px;
      background: #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      width: 0;
      background-color: #28a745;
      border-radius: 10px;
      transition: width 1s ease-in-out;
    }
    .green { background-color: #28a745; }
    .blue { background-color: #007bff; }
    .purple { background-color: #6f42c1; }
    .label {
      margin-bottom: 4px;
      font-weight: 600;
    }