/* =====================================================
   IELTS Mockpoint theme for the Reading practice page.
   Only colours, fonts, radii and shadows were changed.
   Sizes, positions, display and layout rules are the same
   as before, so all existing JS keeps working.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#0b2b52; --blue:#1565c9; --blue-light:#eaf2fd;
  --red:#e0202d; --red-dark:#b5121d;
  --surface:#f4f7fb; --muted:#5d708c; --line:#e3e9f3;
  --ink:#0f2038; --field-border:#9db2cf;
  --ok:#2e7d32; --ok-bg:#e8f5e9; --ok-line:#28a745;
  --bad:#dc3545; --bad-bg:#fff5f5;
  --btn-radius: 10px;
  --btn-padding: 0.5rem 0.9rem;
  --font-size: 0.95rem;
  --shadow: 0 1px 2px rgba(11,43,82,0.06);
  --focus-ring: 3px;
}

/* ===== Buttons (OK / Stay) ===== */
.submit-ok-button,
.submit-stay-button{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5ch;
  padding:var(--btn-padding);
  font-size:var(--font-size);
  line-height:1;
  border-radius:var(--btn-radius);
  cursor:pointer;
  user-select:none;
  box-shadow:var(--shadow);
  transition:transform 120ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
.submit-ok-button{
  background:var(--red);
  color:#fff;
  font-weight:700;
  border:2px solid var(--red);
}
.submit-ok-button:hover{
  background:var(--navy);
  border-color:var(--navy);
  box-shadow:0 8px 18px rgba(11,43,82,0.22);
}
.submit-stay-button{
  background:#fff;
  color:var(--navy);
  border:2px solid var(--navy);
  font-weight:700;
}
.submit-stay-button:hover{
  background:var(--navy);
  color:#fff;
}
.submit-ok-button:hover,
.submit-stay-button:hover{ transform:translateY(-1px); }
.submit-ok-button:active,
.submit-stay-button:active{ transform:translateY(0); opacity:0.95; }
.submit-ok-button:disabled,
.submit-stay-button:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.submit-ok-button:focus-visible,
.submit-stay-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--focus-ring) rgba(21,101,201,0.28), var(--shadow);
}
.submit-ok-button.small,
.submit-stay-button.small{
  padding:0.28rem 0.5rem;
  font-size:0.82rem;
}
@media (prefers-reduced-motion: reduce){
  .submit-ok-button,
  .submit-stay-button{ transition:none; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background-color:#b9c9df;
  border-radius:4px;
  transition:background-color 0.3s ease;
}
::-webkit-scrollbar-thumb:hover{ background-color:var(--blue); }

/* ===== Base ===== */
body{
  margin:0;
  padding-top:70px; /* Space for the fixed navbar */
  padding-bottom:90px;
  overflow:overlay;
  background:var(--surface);
  color:var(--ink);
}
.test-content{
  font-family:'Inter', "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* ===== Fullscreen + submit warning modals ===== */
#fullscreen-warning-modal,
#submit-warning-modal{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(11,43,82,0.65) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:9999;
  justify-content:center;
  align-items:center;
}
#fullscreen-warning-modal > div,
#submit-warning-modal > div{
  background:#fff !important;
  padding:2em 2.5em;
  border-radius:20px !important;
  box-shadow:inset 0 5px 0 var(--red), 0 30px 70px rgba(11,43,82,0.35) !important;
  text-align:center;
  color:var(--navy);
}
#fullscreen-ok-btn, #fullscreen-stay-btn{
  font-size:1.1em;
  padding:0.7em 2em;
  margin:1em 0.5em 0 0.5em;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.2s, color 0.2s, box-shadow 0.2s;
}
#fullscreen-ok-btn{
  background:var(--red);
  color:#fff;
  border:2px solid var(--red);
  box-shadow:0 2px 8px rgba(224,32,45,0.15);
}
#fullscreen-ok-btn:hover{
  background:var(--navy);
  border-color:var(--navy);
  box-shadow:0 8px 18px rgba(11,43,82,0.22);
}
#fullscreen-stay-btn{
  background:#fff;
  color:var(--navy);
  border:2px solid var(--navy);
}
#fullscreen-stay-btn:hover{
  background:var(--navy);
  color:#fff;
}
#fullscreen-warning-modal p,
#submit-warning-modal p{
  font-size:1.15em;
  margin-bottom:1.5em;
}

/* ===== Top navbar ===== */
.navbar-custom{
  position:fixed;
  top:0;
  width:100%;
  height:60px;
  background-color:var(--navy);
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--red), 0 6px 20px rgba(11,43,82,0.25);
  z-index:1000;
  padding:0 1rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.navbar-custom .navbar-left,
.navbar-custom .timer{
  color:#fff;
  font-family:'Sora', sans-serif;
  font-weight:600;
}
#userID{ color:#cfe1fa; letter-spacing:.06em; }
.nav-center-section{
  display:flex;
  justify-content:center;
  align-items:center;
}
.navbar-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.nav-score-card{
  display:flex;
  align-items:center;
  gap:10px;
  background-color:rgba(255,255,255,0.14);
  padding:6px 18px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
}
.score-label{
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.timer-blunt{
  opacity:1;
  position:absolute;
  top:29px;
  left:16px;
}
.timer-specific{
  opacity:0;
  position:absolute;
  top:29px;
  left:16px;
}
.navbar-grid:hover .timer-blunt{ opacity:0; }
.navbar-grid:hover .timer-specific{ opacity:1; }

/* navbar buttons */
#finishBtn{
  background:var(--red) !important;
  color:#fff !important;
  border-color:var(--red) !important;
  border-radius:10px !important;
  font-weight:700;
  transition:background .2s, color .2s, border-color .2s;
}
#finishBtn:hover{
  background:#fff !important;
  color:var(--navy) !important;
  border-color:#fff !important;
}
.btn-flat{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.9);
  border-radius:8px;
  transition:background .2s;
}
.btn-flat:hover{ background:rgba(255,255,255,0.16); color:#fff; }

/* ===== Bottom navbar ===== */
.bottom-navbar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-evenly;
  background-color:#fff;
  box-shadow:inset 0 3px 0 var(--navy), 0 -8px 24px rgba(11,43,82,0.10);
  padding:15px 0;
}
.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start; /* label then nav */
  gap:12px;
  padding:10px 14px;
  min-width:160px;
  width:30%;
  background-color:var(--surface);
  color:var(--navy);
  font-size:18px;
  border:none;
  border-radius:12px;
  box-shadow:inset 0 0 0 1.5px var(--line);
  cursor:pointer;
  transition:background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-button:hover{
  background-color:var(--blue-light);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}
.sectionNr{
  font-family:'Sora', sans-serif;
  font-weight:700;
  color:var(--navy);
}

/* ===== Settings popup ===== */
.popup-settings{
  position:fixed;
  top:0;
  right:0;
  width:250px;
  height:15%;
  background-color:#fff;
  box-shadow:inset 0 5px 0 var(--red), -8px 0 30px rgba(11,43,82,0.25);
  border-radius:0 0 0 16px;
  padding:20px;
  transition:transform 0.3s ease-in-out;
  transform:translateX(100%);
  z-index:1000;
}
#popup-settings.menu-visible{ transform:translateX(0); }
.popup-settings h3,
.popup-note h3{
  font-family:'Sora', sans-serif;
  font-weight:700;
  color:var(--navy);
}

/* ===== Notes popup ===== */
.popup-note{
  position:fixed;
  top:0;
  right:0;
  width:500px;
  height:100%;
  background-color:#fff;
  box-shadow:inset 0 5px 0 var(--red), -8px 0 30px rgba(11,43,82,0.25);
  padding:20px;
  transition:transform 0.3s ease-in-out;
  transform:translateX(100%);
  z-index:10000;
}
#popup-note.menu-visible{ transform:translateX(0); }
#notesArea{ border-radius:12px; border:1.5px solid var(--line); }
.close-settings{
  position:fixed;
  right:0;
  top:0;
  background:var(--surface);
  color:var(--navy);
  border:none;
  border-radius:0 0 0 8px;
  transition:background .2s, color .2s;
}
.close-settings:hover{ background:var(--red); color:#fff; }

/* ===== Part header ===== */
.part-margin{
  display:flex;
  height:100vh;
}
.part{
  border-radius:4px;
  padding:10px 15px;
  margin-bottom:20px;
}
.part-header{
  border:1px solid #cfe1fa;
  border-radius:12px;
  padding:10px 15px;
  background-color:var(--blue-light);
  box-shadow:inset 6px 0 0 var(--red), var(--shadow);
  margin-bottom:20px;
}
.part-header h2{
  margin:0;
  font-family:'Sora', sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--navy);
}
.part-header-p{
  margin:5px 0 0;
  font-size:18px;
  color:var(--muted);
}
.group-header{ margin-top:40px; }
.group-header h3{
  margin:0;
  padding:5px;
  font-family:'Sora', sans-serif;
  font-size:16px;
  font-weight:800;
  color:var(--navy);
}
.instructions h3{
  margin:5px 0 0;
  font-size:18px;
  font-weight:500;
  color:var(--ink);
  white-space:pre-wrap;
}

/* ===== Previous / next ===== */
.nav-buttons{
  position:fixed;
  bottom:10%;
  right:20px;
  padding:10px;
  display:flex;
  justify-content:center;
  gap:0px;
  z-index:1000;
}
.nav-buttons button{
  margin-left:2px;
  margin-top:10px;
  font-size:40px;
  cursor:pointer;
  z-index:1001;
  text-align:center;
}
.bton{
  width:60px;
  font-size:20px;
  border:none;
  color:#fff;
  cursor:pointer;
  border-radius:12px;
  font-weight:bolder;
  box-shadow:0 8px 18px rgba(224,32,45,0.25);
  transition:background .2s, transform .15s;
}
.bton-grey{ background-color:#999; }
.bton.prev,
.bton.next{ background-color:var(--red); }
.bton.prev:hover,
.bton.next:hover{ background-color:var(--navy); }

/* ===== Passage + question panels ===== */
.passage-section{
  resize:horizontal;
  width:50%;
  padding:20px;
  overflow:hidden;
  background-color:#fff;
  border-right:2px solid var(--line);
  border-radius:12px 0 0 12px;
}
.passage-scroll{
  height:100%;
  overflow-y:scroll;
  padding-right:10px;
}
.question-section{
  width:50%;
  padding:20px;
  background-color:var(--surface);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.question-box{
  background:#fff;
  border:1px solid var(--line);
  padding:15px;
  margin-bottom:15px;
  border-radius:12px;
}
.question-box label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
  color:var(--navy);
}
.question-box input,
.question-box select{
  width:100%;
  padding:8px;
  font-size:16px;
}

/* ===== MCQ two choice (merged duplicate blocks, same result) ===== */
.mcq-container-two-choice{
  font-family:Arial, sans-serif;
  max-width:500px;
  margin:20px;
}
.question-box{
  display:flex;
  align-items:center;
  margin:10px 0;
  margin-bottom:40px;
  width:500px;
}
.number-boxes{
  display:flex;
  gap:5px;
  margin-right:10px;
}
.num-box{
  width:30px;
  height:30px;
  border:1px solid var(--navy);
  border-radius:6px;
  color:var(--navy);
  background:var(--blue-light);
  text-align:center;
  line-height:30px;
  font-weight:bold;
}
.question-text{ flex:1; }
.options{ margin-top:10px; }
.options label{
  display:block;
  margin:8px 0;
}

/* ===== Passage text styles ===== */
.para-heading{
  margin-top:15px;
  text-align:center;
  font-weight:700;
  font-family:'Sora', sans-serif;
  color:var(--navy);
}
.para{ margin-top:15px; }

/* ===== Question styles ===== */
.group{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 15px;
  margin-top:10px;
  background:#fff;
}

/* all the blanks */
input[type="text"]{
  padding:4px 6px;
  font-size:14px;
  width:173px;
  height:23px;
  border:1px solid var(--field-border);
  border-radius:6px;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
input[type="text"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,101,201,0.18);
}
input[type="radio"],
input[type="checkbox"]{ accent-color:var(--blue); }
::placeholder{ text-align:center; color:#8fa0b8; }

/* true-false */
.True-false-notGiven{
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:0.5rem;
  display:block;
}
.True-false-notGiven label{
  display:block;
  margin-top:20px;
}
.TF{
  border-radius:8px;
  padding:1rem;
}

/* yes-no */
.Yes-no-notGiven{
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:0.5rem;
  display:block;
}
.Yes-no-notGiven label{
  display:block;
  margin-top:20px;
}
.YN{
  border-radius:8px;
  padding:1rem;
}

/* note completion */
.note-completion-title{
  text-align:center;
  font-weight:bold;
  font-family:'Sora', sans-serif;
  color:var(--navy);
}
.note-completion-subheading{
  font-weight:700;
  color:var(--navy);
}

/* matching-info */
.matching-info-question{
  display:flex;
  margin-bottom:1.5rem;
}
.matching-info-question select{
  margin-top:3px;
  margin-left:7px;
  width:90px;
  height:25px;
}

/* matching-feature */
.matching-feature-question{
  display:flex;
  margin-bottom:1.5rem;
}
.matching-feature-question select{
  margin-top:3px;
  margin-left:7px;
  width:90px;
  height:25px;
  max-width:100%;
}
select{
  border:1px solid var(--field-border);
  border-radius:6px;
  color:var(--ink);
  background:#fff;
}

/* diagram labelling + drag and drop */
.image-div img{ width:700px; }
.dropzone.dragover{ transform:scale(0.9); }
.diagram-label-container{ margin-right:40px; }
.all-boxes{
  display:grid;
  justify-content:space-between;
  margin-right:200px;
  gap:40px;
}
.matching-features{ width:100%; }
.matching-labels{
  display:flex;
  flex-direction:column;
  gap:15px;
}
.qa-pair{
  display:flex;
  align-items:center;
  gap:10px;
}
.question-feature{
  width:100%;
  margin-bottom:20px;
}
.box{
  border:2px dashed #9db8dd;
  border-radius:15px;
  padding:10px;
  min-height:30px;
  width:400px;
  height:70;
  background-color:#fff;
  cursor:pointer;
  user-select:none;
  transition:0.2s;
  text-align:center;
}
.box[draggable="false"]{
  cursor:default;
  border:1px dashed var(--field-border);
  width:200px;
}
.dragover{
  border:2px dashed var(--blue);
  background-color:var(--blue-light);
}
.matching-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.box-heading{ margin:auto; }

/* summary with list */
.summary-title{
  text-align:center;
  font-weight:bold;
  font-family:'Sora', sans-serif;
  color:var(--navy);
}

/* table */
table{
  width:100%;
  border-collapse:collapse;
  font-family:'Inter', Arial, sans-serif;
  margin:20px 0;
}
th, td{
  border:1px solid var(--line);
  padding:10px;
  text-align:center;
}
th{
  background-color:var(--blue-light);
  color:var(--navy);
  font-weight:bold;
}

/* highlight button */
#highlight-btn{
  display:none;
  position:absolute;
  z-index:1000;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(11,43,82,0.14), inset 0 0 0 1.5px var(--line);
}
#highlight-btn:hover{ background:var(--blue-light); }
.highlighted{ background-color:yellow; }
.invalid-drop{
  background-color:#fde8ea !important;
  transition:background-color 0.3s ease;
}

/* mcq-one-choice */
.mcq-container-one-choice{
  grid-template-columns:1fr 1fr;
  gap:1rem;
  display:block;
}
.mcq-container-one-choice label{
  display:block;
  margin-top:20px;
}
.mcq{
  border-radius:8px;
  padding:1rem;
}

/* ===== Start popup ===== */
body.listening-popup-active{ overflow:hidden; }
.listening-overlay{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(11,43,82,0.65);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
}
.listening-popup{
  background:#fff;
  padding:40px;
  border-radius:20px;
  text-align:center;
  max-width:400px;
  max-height:150px;
  width:100%;
  color:var(--navy);
  box-shadow:inset 0 5px 0 var(--red), 0 30px 70px rgba(11,43,82,0.35);
  animation:fadeIn 0.6s ease;
}
.listening-popup p{ margin-bottom:10px; }
.listening-continue-btn{
  background:var(--red);
  color:#fff;
  border:2px solid var(--red);
  padding:14px 24px;
  font-size:1rem;
  font-weight:700;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.2s, border-color 0.2s;
}
.listening-continue-btn:hover{
  background:var(--navy);
  border-color:var(--navy);
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== Matching table ===== */
.matching-table-container{
  width:100%;
  overflow-x:auto;
  margin-top:20px;
  font-family:'Inter', sans-serif;
}
#matchingTable{
  border-collapse:collapse;
  width:100%;
  text-align:center;
}
#matchingTable th,
#matchingTable td{
  border:1px solid var(--line);
  padding:6px;
  width:50px;
}
#matchingTable thead th{
  background-color:var(--blue-light);
  color:var(--navy);
  font-weight:600;
}
#matchingTable td:first-child{
  text-align:left;
  font-weight:500;
  padding-left:10px;
  width:auto;
}
#matchingTable input[type="radio"]{
  transform:scale(1.1);
  cursor:pointer;
}

/* ===== Question number buttons ===== */
.question-button-container{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-start;
  align-items:center;
  padding:4px 0;
}
.qnav-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  font-size:12px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--line);
  background-color:var(--surface);
  color:var(--navy);
  font-weight:600;
  cursor:pointer;
  transition:background-color 0.2s, color 0.2s, transform 0.15s;
}
.qnav-btn:hover{
  background-color:var(--blue-light);
  transform:translateY(-1px);
}
.qnav-btn:active{ transform:translateY(0); }
.qnav-btn.attempted{
  background-color:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.qnav-btn.current{
  background-color:var(--navy);
  color:#fff;
  border-color:var(--navy);
  outline:2px solid rgba(224,32,45,0.45);
}
@media (max-width:680px){
  .question-button-container{ max-width:48%; }
  .qnav-btn{ min-width:28px; height:28px; font-size:12px; }
}

/* ===== Highlighter ===== */
.highlight-wrapper{
  background-color:yellow;
  display:inline;
  cursor:pointer;
}
.unhighlight-popup{
  position:absolute;
  background:var(--navy);
  color:#fff;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
  z-index:1000;
  white-space:nowrap;
  display:none; /* hidden until needed */
}
.unhighlight-popup:hover{ background:var(--red); }

/* ===== Review mode: base overrides ===== */
input:disabled, select:disabled{
  background-color:var(--surface);
  color:var(--ink);
  cursor:not-allowed;
}
.dropzone[draggable="false"]{ background-color:#e9eef5; }

/* highlights (green = correct, red = wrong) */
.correct-answer-highlight{
  background-color:#d4edda !important;
  border:1px solid var(--ok-line) !important;
  border-radius:6px;
  transition:background-color 0.3s ease;
}
.wrong-answer-highlight{
  background-color:#f8d7da !important;
  border:1px solid var(--bad) !important;
  border-radius:6px;
}
.wrong-answer-input{
  border:2px solid var(--bad) !important;
  color:var(--bad) !important;
  background-color:var(--bad-bg) !important;
}

/* labels + wrappers */
.inline-review-wrapper{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  position:relative;
  vertical-align:middle;
}
.review-label{
  color:var(--ok);
  background:var(--ok-bg);
  font-weight:bold;
  padding:2px 6px;
  border-radius:6px;
  font-size:0.85em;
  margin-left:5px;
}

/* tooltip + icon */
.explanation-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  background-color:var(--blue);
  color:#fff;
  border-radius:50%;
  font-size:12px;
  font-family:Arial, sans-serif;
  cursor:help;
  margin-left:5px;
  position:relative;
  transition:background-color .2s;
}
.explanation-icon:hover{ background-color:var(--red); }
.explanation-tooltip{
  visibility:hidden;
  width:240px;
  background-color:var(--navy);
  color:#fff;
  padding:10px;
  border-radius:10px;
  position:absolute;
  z-index:10000;
  bottom:150%;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity 0.2s ease-in-out;
  font-weight:normal;
  pointer-events:none;
  white-space:normal;
  box-shadow:0 8px 20px rgba(11,43,82,0.35);
}
.explanation-tooltip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border-width:5px;
  border-style:solid;
  border-color:var(--navy) transparent transparent transparent;
}
.explanation-icon:hover .explanation-tooltip{
  visibility:visible;
  opacity:1;
}

/* tables + dropzones */
td.correct-answer-highlight{
  position:relative;
  overflow:visible !important;
}
.reviewed-zone{
  border:2px solid var(--ok-line) !important;
  background-color:#f1f8e9;
  position:relative;
}
.review-dropzone-label{
  font-size:0.8em;
  color:#155724;
  background:#d4edda;
  border-top:1px solid var(--ok-line);
  margin-top:5px;
  padding:4px;
}
.wrong-answer-dropzone{
  border:2px dashed var(--bad) !important;
  background-color:var(--bad-bg) !important;
}

/* score UI */
#score-container{
  background:var(--blue-light);
  padding:5px 15px;
  border-radius:20px;
  border:1px solid #cfe1fa;
  margin:0 10px;
  display:none; /* hidden until test ends */
  align-items:center;
  gap:8px;
  font-size:0.95em;
  white-space:nowrap;
  color:var(--navy);
  font-family:'Sora', sans-serif;
}
#user-score{
  color:var(--navy);
  font-weight:800;
}
#total-questions{ color:var(--red); }

label.correct-answer-highlight,
label.wrong-answer-highlight{
  align-items:center;
  padding:2px 8px;
  border-radius:6px;
  width:auto;
}