*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .container {
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      max-width: 900px;
      width: 100%;
      padding: 40px;
      position: relative;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    h1 {
      color: #667eea;
      margin-bottom: 30px;
      text-align: center;
      font-size: 2.5em;
    }

    h2 {
      color: #667eea;
      margin-bottom: 20px;
      text-align: center;
    }
    
    h4 {
	color: black;
	background-color: white;
      margin-top: 15px;
      margin-bottom: 10px;
      text-align: left;
      font-size: 14px;
    }

    h5 {
      color: #667eea;
      margin-bottom: 10px;
      text-align: center;
    }
    
    .login-form {
      max-width: 400px;
      margin: 0 auto;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 600;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    input:focus {
      outline: none;
      border-color: #667eea;
    }

    .btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 14px 30px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s;
      width: 100%;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .btn-secondary {
      background: #6c757d;
      width: auto;
    }

    .btn-success {
      background: #28a745;
      width: auto;
    }

    .topButtonBar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
  width: 100%;
}

    .progress-bar {
      background: #e0e0e0;
      height: 30px;
      border-radius: 15px;
      margin-bottom: 30px;
      overflow: hidden;
    }

    .progress-fill {
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      height: 100%;
      transition: width 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      min-width: 50px;
    }

    .exam-header {
      margin-bottom: 30px;
    }

    .exam-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .info-item {
      text-align: center;
      flex: 1;
      min-width: 100px;
    }

    .info-label {
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }

    .info-value {
      font-size: 18px;
      font-weight: 700;
      color: #667eea;
    }

    .question-card {
      background: #f9f9f9;
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .question-card.correct {
      border: 2px solid #28a745;
      background-color: #d4edda;
      /* light green */
    }

    .question-card.incorrect {
      border: 2px solid #dc3545;
      background-color: #f8d7da;
      /* light red */
    }

    .question-card.unanswered {
      border: 2px solid #e0e0e0;
      background-color: #ffffff;
      /* plain white */
    }

    .question-number {
      color: #667eea;
      font-weight: 700;
      margin-bottom: 15px;
      font-size: 14px;
    }

    .question-text {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .option {
      display: flex;
      align-items: center;
      padding: 15px;
      background: white;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .option:hover {
      border-color: #667eea;
      background: #f0f0ff;
    }

    .option.selected {
      border-color: #667eea;
      background: #e8ebff;
    }

    .option input[type="radio"] {
      margin-right: 12px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .navigation {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .logout-btn {
/*      position: absolute; */
      top: 50px;
      background: #dc3545;
      padding: 5px 10px;
      border-radius: 5px;
    }

    .error {
      color: #dc3545;
      margin-top: 10px;
      text-align: center;
    }

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .modal.active {
      display: flex;
    }

    .modal-content {
      background: white;
      padding: 40px;
      border-radius: 20px;
      max-width: 700px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      margin: 5% auto;
      box-sizing: border-box;
    }

    .result-item {
      padding: 15px;
      margin: 10px 0;
      border-radius: 8px;
    }

    .result-item.correct {
      background: #d4edda;
      border-color: #28a745;
    }

    .result-item.incorrect {
      background: #f8d7da;
      border-color: #dc3545;
    }

    .result-item.unanswered {
      background: #fff3cd;
      border-color: #ffc107;
    }

    .result-summary {
      background: #f0f0ff;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 20px;
      text-align: center;
    }

    .score {
      font-size: 36px;
      font-weight: 700;
      color: #667eea;
      margin: 10px 0;
    }

    .explanation {
      margin-top: 10px;
      padding: 10px;
      background: #f0f8ff;
      border-left: 3px solid #667eea;
      font-size: 14px;
      font-style: italic;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background: white;
      padding: 20px 30px;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      z-index: 2000;
      display: none;
      min-width: 300px;
      max-width: 400px;
      animation: slideIn 0.3s ease;
    }

    .notification.show {
      display: block;
    }

    .notification.success {
      border-left: 4px solid #28a745;
    }

    .notification.error {
      border-left: 4px solid #dc3545;
    }

    .notification.warning {
      border-left: 4px solid #ffc107;
    }

    @keyframes slideIn {
      from {
        transform: translateX(400px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #667eea;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .loading-text {
      text-align: center;
      color: #667eea;
      font-size: 18px;
      margin-top: 20px;
    }

    .jump-grid {
      margin: 20px 0;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 10px;
    }

    .jump-grid h3 {
      margin-bottom: 10px;
      color: #667eea;
    }

    .jump-grid button {
      margin: 5px;
      padding: 8px 12px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #ccc;
      cursor: pointer;
      background: #fff;
      transition: background 0.2s;
    }

    .jump-grid button:hover {
      background: #e8ebff;
      border-color: #667eea;
    }


    .jump-grid button.active {
      border: 4px solid #2196F3;
      box-shadow: 0 0 6px #2196F3;
    }

    .collapsible {
      background: #667eea;
      color: white;
      cursor: pointer;
      padding: 12px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 16px;
      border-radius: 6px;
      margin-top: 10px;
    }

    .collapsible:hover {
      background: #764ba2;
    }

    .section-content {
      display: none;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .section-block.active .section-content {
      display: block;
    }

    .scroll-btn {
      background: #667eea;
      color: white;
      border: none;
      padding: 8px 12px;
      margin: 6px 0;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }

    .scroll-btn:hover {
      background: #764ba2;
    }

    .grade-text {
      font-size: 12px;
      color: #333;
      margin: 4px 0;
    }

    .btn-small {
      padding: 10px 20px;
      font-size: 14px;
    }

    .blue-pin {
      color: #007BFF;
      /* bright blue */
    }

    button.done {
      background-color: #4CAF50;
      color: #fff;
    }

    button.doneGray {
	background-color: #333;
	color: #fff;
    }
    
button.doneGray1 {
  background: linear-gradient(
    to top,
    #4a4a4a 0%,      /* dark gray start */
    #4a4a4a 20%,     /* completed portion */
    #cfcfcf 20%,     /* uncompleted portion */
    #cfcfcf 100%     /* light gray to top */
  );
  color: #fff;
}
button.doneGray2 {
  background: linear-gradient(
    to top,
    #4a4a4a 0%,
    #4a4a4a 40%,
    #cfcfcf 40%,
    #cfcfcf 100%
  );
  color: #fff;
}
button.doneGray3 {
  background: linear-gradient(
    to top,
    #4a4a4a 0%,
    #4a4a4a 60%,
    #cfcfcf 60%,
    #cfcfcf 100%
  );
  color: #fff;
}
button.doneGray4 {
  background: linear-gradient(
    to top,
    #4a4a4a 0%,
    #4a4a4a 80%,
    #cfcfcf 80%,
    #cfcfcf 100%
  );
  color: #fff;
}
button.doneGray5 {
  background: linear-gradient(
    to top,
    #4a4a4a 0%,
    #4a4a4a 100%
  );
  color: #fff;
}

    button.wrong {
      background-color: #f44336;
      color: #fff;
    }

    button.progress {
      background-color: #ffeb3b;
      color: #000;
    }

    button.done4-wrong1 {
      background: linear-gradient(to bottom,
          #4CAF50 0%,
          /* green starts at top */
          #4CAF50 80%,
          /* green until 80% */
          #f44336 80%,
          /* red starts at 80% */
          #ee382b 100%
          /* red until bottom */
        );
      color: #fff;
    }

    button.done3-wrong2 {
      background: linear-gradient(to bottom,
          #4CAF50 0%,
          /* green starts at top */
          #4CAF50 60%,
          /* green until 60% */
          #f44336 60%,
          /* red starts at 60% */
          #f44336 100%
          /* red until bottom */
        );
      color: #fff;
    }

    button.done2-wrong3 {
      background: linear-gradient(to bottom,
          #4CAF50 0%,
          /* green starts at top */
          #4CAF50 30%,
          /* green until 60% */
          #f44336 30%,
          /* red starts at 60% */
          #f44336 100%
          /* red until bottom */
        );
      color: #fff;
    }


    .form-group {
      text-align: center;
    }

    #autoCheckBtn.on {
      background-color: #28a745;
      /* green when ON */
      color: white;
      border: 2px solid #1e7e34;
    }

    #autoCheckBtn.off {
      background-color: #6c757d;
      /* gray when OFF */
      color: white;
      border: 2px solid #545b62;
    }

    .explain-btn {
      background: #2196F3;
      /* blue for info */
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
    }

    #explainText {
      margin-top: 10px;
      padding: 10px;
      background: #f0f0f0;
      border-left: 4px solid #2196F3;
      display: none;
      /* hidden by default */
    }

.container:has(#pickerLoaderContainer.active) {
    max-width: none;
    padding: 0;
}

    #pickerLoaderContainer {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: sans-serif;
          max-width: none;
}

/* Top Bar */
#pickerTopBar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#helpButton {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: #0078d4;
  color: white;
  cursor: pointer;
}

/* Title */
#pickerTitle {
  margin-bottom: 20px;
}

/* Exam Grid */
#examGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}


.examCard {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    max-width: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* forces left alignment */
}


.examCard input {
    width: 100%;
    box-sizing: border-box;
}

.examCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Exam Image */
.examImage {
  max-width: 300px;
  width:220px;
  height:220px;
  object-fit: cover;   /* crop to fit */
  border: 2px solid #444;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Highlight a word in exam picker */
.examVariant {
  font-weight: 600;      /* slightly bold, not heavy */
  font-size: 0.8em;     /* just a touch larger or smaller*/
  margin-left: 4px;
  color: #555;             /* dark gray */
}

/* Label */
.examLabel {
  margin-top: 10px;
  font-size: 1.1em;
  font-weight: bold;
}

/* Button */
.examButton {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: #0078d4;
  color: white;
  cursor: pointer;
}

/* Status Console */
#pickerLoaderStatus {
  background: #f0f0f0;
  padding: 12px;
  border-radius: 6px;
  margin-top: 30px;
  text-align: center;
  white-space: pre-wrap;
}


    .close {
      float: right;
      cursor: pointer;
      font-size: 24px;
    }

    /*
    #modal-content {
      background: #fff;
      color: #000;
      margin: 5% auto;
         padding: 20px;
    border-radius: 8px;
    width: 90%;
       max-width: 600px;
    max-height: 80vh;
       overflow-y: auto;
        box-sizing: border-box;
    }
    */

    .modal-footer {
      margin-top: 20px;
      text-align: center;
    }

    .close-btn {
      background: #444;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }

    .close-btn:hover {
      background: #666;
    }

    .examButton:disabled {
	background: #bfbfbf;
	color: #666;
	cursor: not-allowed;
	opacity: 0.7;
    }