@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Feazel Testing App — Modern UI System (Clean, App-like)
   /testing/assets/app.css
   ========================================================================== */

:root{
  /* Brand */
  --brand-900: #1f2d4b;
  --brand-800: #263b5e;
  --brand-600: #4c5a7c;
  --brand-500: #5e82bc;

  --accent: var(--brand-800);
  --accent-2: #61ca61;
  --warn: #fd8841;
  --danger: #ef4444;

  /* Neutrals */
  --bg: #f6f8fc;
  --panelSolid: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --muted2:#94a3b8;
  --line: rgba(15,23,42,0.10);

  /* Shadows */
  --shadow-sm: 0 8px 20px rgba(15,23,42,0.08);
  --shadow:    0 16px 46px rgba(15,23,42,0.10);
  --shadow-lg: 0 22px 70px rgba(15,23,42,0.12);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 380ms;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(94,130,188,0.18);
  --ring-strong: 0 0 0 4px rgba(94,130,188,0.24);

  color-scheme: light;
}

/* =========================
   Base / Reset
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 15.5px/1.45 "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);

  /* Fix background repeating/scroll artifacts:
     - explicit repeat/attachment lists for all layers
  */
  background:
    radial-gradient(1100px 650px at 18% 6%, rgba(94,130,188,0.18), rgba(94,130,188,0) 55%),
    radial-gradient(950px 560px at 88% 10%, rgba(97,202,97,0.10), rgba(97,202,97,0) 52%),
    linear-gradient(180deg, #f9fbff, var(--bg) 44%, #f3f6fb 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, auto;
}

a, a:visited, a:hover, a:active{
  color:inherit;
  text-decoration:none;
}

img{ max-width:100%; height:auto; display:block; }
button, input, select, textarea{ font: inherit; color: inherit; }
::selection{ background: rgba(94,130,188,0.20); }

b, strong{ font-weight: 600; }

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* =========================
   Layout
   ========================= */
.wrap{
  max-width: 1120px;
  margin: 24px auto;
  padding: 0 16px 28px;
}

/* Test + result pages: hard cap width */
.qwrap{ max-width: 600px; }

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

/* Hide subtitle line in topbar */
.topbar .brand .small{ display:none !important; }

.brand{
  display:flex;
  align-items:center;
  gap:28px; /* space between logo and title */
  min-width: 240px;
}

/* Remove the redundant top-left badge everywhere */
.badge{ display:none !important; }

/* Feazel logo in header */
.brand::before{
  content:"";
  width: 160px;
  height: 46px;
  border-radius: 0;
  background: url("logo.png") left center / contain no-repeat;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
}

.topbar .brand > div{ padding-left: 6px; }

.h1{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.h2{
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.1px;
}

.small{
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

.p{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 500;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

.list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* =========================
   Card
   ========================= */
.card{
  position:relative;
  background: var(--panelSolid);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  overflow:hidden;
  transform: translateZ(0);

  /* IMPORTANT: no hover translate on panels */
  transition:
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.card:hover{
  border-color: rgba(94,130,188,0.22);
  box-shadow: var(--shadow-lg);
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(94,130,188,0.12), rgba(94,130,188,0) 48%),
    radial-gradient(900px 260px at 85% 0%, rgba(97,202,97,0.08), rgba(97,202,97,0) 52%);
  opacity: .55;
}

.hr{
  height:1px;
  background: var(--line);
  margin: 12px 0;
}

/* =========================
   Item rows (no hover translate)
   ========================= */
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(15,23,42,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88));
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}
.item:hover{
  border-color: rgba(94,130,188,0.22);
  box-shadow: 0 16px 44px rgba(15,23,42,0.11);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
}

/* =========================
   Buttons
   ========================= */
.btnrow{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  appearance:none;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  border-radius: var(--r);
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 600;
  letter-spacing: .1px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  transition:
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
  user-select:none;
  text-decoration:none;
}
.btn:hover{
  border-color: rgba(94,130,188,0.28);
  box-shadow: 0 14px 36px rgba(15,23,42,0.12);
}
.btn:active{
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
}
.btn:disabled{
  opacity: .55;
  cursor:not-allowed;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  filter: grayscale(0.25);
}
.btn:focus-visible{
  outline:none;
  box-shadow: var(--ring-strong), 0 14px 36px rgba(15,23,42,0.12);
}

.btn.primary{
  border-color: rgba(38,59,94,0.34);
  background: linear-gradient(180deg, rgba(94,130,188,0.18), rgba(38,59,94,0.05));
}
.btn.primary:hover{
  border-color: rgba(38,59,94,0.46);
  background: linear-gradient(180deg, rgba(94,130,188,0.24), rgba(38,59,94,0.06));
}

.btn.good{
  border-color: rgba(97,202,97,0.34);
  background: linear-gradient(180deg, rgba(97,202,97,0.20), rgba(97,202,97,0.08));
}
.btn.good:hover{
  background: linear-gradient(180deg, rgba(97,202,97,0.26), rgba(97,202,97,0.10));
}

.btn.gray{
  border-color: rgba(15,23,42,0.12);
  background: linear-gradient(180deg, rgba(241,245,249,0.88), rgba(241,245,249,0.70));
}
.btn.gray:hover{
  border-color: rgba(94,130,188,0.20);
}

.btn.danger{
  border-color: rgba(239,68,68,0.30);
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06));
}
.btn.danger:hover{
  background: linear-gradient(180deg, rgba(239,68,68,0.16), rgba(239,68,68,0.08));
}

/* =========================
   Inputs
   ========================= */
.input{
  width:100%;
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));
  border-radius: var(--r);
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.06);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}
.input:hover{ border-color: rgba(94,130,188,0.22); }
.input:focus{
  outline:none;
  border-color: rgba(94,130,188,0.40);
  box-shadow: var(--ring), 0 14px 34px rgba(15,23,42,0.10);
}
.input:disabled{
  opacity:.65;
  background: rgba(241,245,249,0.86);
  cursor:not-allowed;
}
textarea.input{ resize: vertical; min-height: 44px; }

select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(100,116,139,.9) 50%),
    linear-gradient(135deg, rgba(100,116,139,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 34px;
}

/* =========================
   Utility surfaces
   ========================= */
.mutebox{
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(241,245,249,0.74);
}

/* =========================
   TAKE TEST (take.php)
   ========================= */
.qcard{ padding: 18px; }

/* Header row: section left, Question (#/#) right */
.qhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.sectionTitle{
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.3px;
  color: var(--brand-900);
}

.progress{
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}

/* HR under header */
.qcard .qhead + .qtext::before{
  content:"";
  display:block;
  height:1px;
  background: var(--line);
  margin: 10px 0 14px;
}

/* Question text */
.qtext{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.15px;
  color: var(--text);
  margin: 0;
}

/* Question image */
.qimg{
  margin: 14px 0 10px;
  border-radius: var(--r);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-sm);
  max-height: 360px;
  object-fit: contain;
}

/* Answers container */
.choices{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 14px;
}

/* Multiple choice row */
.choice{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  border-radius: var(--r);
  padding: 12px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}

.choice:hover{
  border-color: rgba(94,130,188,0.25);
  box-shadow: 0 14px 34px rgba(15,23,42,0.09);
}

.choice input[type="radio"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-800);
  flex: 0 0 auto;
}

.choice .choiceText{
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.choice .choiceText b{
  font-weight: 800;
  color: var(--brand-900);
}

.choice.is-checked{
  border-color: rgba(97,202,97,0.42);
  box-shadow: 0 16px 40px rgba(97,202,97,0.10);
  background: linear-gradient(180deg, rgba(97,202,97,0.10), rgba(255,255,255,0.94));
}

/* Fill-in-the-blank: FORCE number + dropdown same line */
.blankRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;          /* critical */
  white-space: nowrap;        /* prevents wrapping artifacts */
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  border-radius: var(--r);
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}

.blankNum{
  font-weight: 800;
  color: var(--brand-900);
  width: 26px;
  text-align:right;
  flex: 0 0 auto;
}

/* Make dropdown “not so wide” but still responsive */
.blankSelect{
  width: auto;                 /* allow shrink-to-fit */
  flex: 1 1 auto;              /* fill remaining space */
  min-width: 0;                /* allows shrinking */
  max-width: 420px;            /* prevents being huge */
}

/* Footer nav */
.footerNav{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Disable look */
#nextBtn:disabled{
  opacity: .45;
  filter: grayscale(0.35);
}

/* Subtle screen transitions */
.qcard, #startCard, #gradingCard{
  animation: pageIn var(--t-slow) var(--ease) both;
}
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0px); }
}

/* Grading spinner */
.center{ text-align:center; }
.spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(94,130,188,0.22);
  border-top-color: rgba(38,59,94,0.80);
  margin: 14px auto 8px;
  animation: spin 900ms linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================
   RESULT PAGE (result.php)
   ========================= */
.resultHero{
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(15,23,42,0.10);
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(94,130,188,0.18), rgba(94,130,188,0) 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(97,202,97,0.12), rgba(97,202,97,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));
  box-shadow: var(--shadow-lg);
  animation: popIn var(--t-slow) var(--ease) both;
}

@keyframes popIn{
  from{ transform: translateY(10px); opacity:0; }
  to{ transform: translateY(0px); opacity:1; }
}

.resultGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}

/* Score Ring */
.scoreRingWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.scoreRing{
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background:
    conic-gradient(rgba(97,202,97,0.90) 0 var(--pct,0%),
                   rgba(15,23,42,0.10) var(--pct,0%) 100%);
  box-shadow: 0 18px 52px rgba(15,23,42,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  animation: ringIn 650ms var(--ease) both;
}
@keyframes ringIn{
  from{ transform: scale(0.96); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}

.scoreRingInner{
  width: 176px;
  height: 176px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  /* Your request: SCORE + % correct closer & centered */
  gap: 2px;
  text-align:center;
  line-height: 1.05;
}

.scoreRingLabel{
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0;
}

.scoreRingPct{
  font-size: 46px;
  font-weight: 850;
  letter-spacing: -0.8px;
  color: var(--brand-900);
  margin: 0;
}

.scoreRingSub{
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin: 0;
  opacity: .95;
}

.scoreMeta{
  font-size: 14px;
  color: var(--muted);
  font-weight: 650;
  text-align:center;
}

/* Note pill */
.note{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(241,245,249,0.74);
  font-weight: 800;
  letter-spacing: -0.1px;
}

.note.pass{
  border-color: rgba(97,202,97,0.35);
  background: rgba(97,202,97,0.10);
  color: #14532d;
}
.note.fail{
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
  color: #7f1d1d;
}
.note.retake{
  border-color: rgba(253,136,65,0.35);
  background: rgba(253,136,65,0.10);
  color: #7c2d12;
}

.punch{
  display:inline-block;
  animation: punch 520ms var(--ease) both;
}
@keyframes punch{
  0%{ transform: translateY(8px) scale(0.98); opacity:0; }
  60%{ transform: translateY(0px) scale(1.01); opacity:1; }
  100%{ transform: translateY(0px) scale(1); opacity:1; }
}

/* Performance block */
.perfBlock{
  margin-top: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.perfHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.perfTitle{
  font-weight: 850;
  color: var(--brand-900);
}
.perfPct{
  font-weight: 850;
  color: var(--brand-900);
}

/* Taller meter (your request) */
.meter{
  height: 18px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
}
.meterFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239,68,68,0.85), rgba(253,136,65,0.9), rgba(97,202,97,0.9));
  animation: fillMeter 900ms var(--ease) both;
}
@keyframes fillMeter{
  from{ width: 0%; }
  to{ width: var(--pct, 0%); }
}

/* Taller band with marker so placement is easy to see */
.band{
  position: relative;
  margin-top: 12px;
  height: 18px;                /* taller */
  border-radius: 999px;
  overflow: hidden;
  display:flex;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.6);
}
.band > div{ height:100%; }
.bandFail{ width:50%; background: rgba(239,68,68,0.22); }
.bandRetake{ width:20%; background: rgba(253,136,65,0.22); }
.bandPass{ width:30%; background: rgba(97,202,97,0.22); }

.bandMarker{
  position:absolute;
  top: -6px;
  width: 3px;
  height: 30px;               /* taller marker */
  background: rgba(38,59,94,0.80);
  left: var(--pct, 0%);
  transform: translateX(-1px);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.12);
  animation: markerIn 520ms var(--ease) both;
}
@keyframes markerIn{
  from{ opacity:0; transform: translateX(-1px) translateY(8px); }
  to{ opacity:1; transform: translateX(-1px) translateY(0px); }
}

.bandLegend{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.dot.fail{ background: rgba(239,68,68,0.50); }
.dot.retake{ background: rgba(253,136,65,0.55); }
.dot.pass{ background: rgba(97,202,97,0.55); }

/* =========================
   Mobile polish
   ========================= */
@media (max-width:520px){
  .wrap{ margin: 18px auto; }
  .h1{ font-size: 18px; }

  .btn{ width: 100%; justify-content:center; }
  .btnrow{ gap: 8px; }

  .item{ flex-direction: column; align-items: stretch; }
  .topbar{ flex-direction: column; align-items: stretch; }
  .brand::before{ width: 150px; height: 42px; }

  .sectionTitle{ font-size: 20px; }
  .qtext{ font-size: 17px; }

  /* Keep blank rows single-line; allow select to shrink fully */
  .blankSelect{ max-width: 100%; }
}