/* ---------------------------------------------------------------------
   Relentless Feather - quiz engine styles (rf-quiz.js)
   Palette matches the platform: blue #4e77bb, purple #694097, pink #ef3f6c,
   coral #FF8A65, navy #003c64.
--------------------------------------------------------------------- */
.rfq {
  --q-blue:#4e77bb; --q-purple:#694097; --q-pink:#ef3f6c; --q-navy:#003c64;
  --q-line:#dbe3ee; --q-soft:#5a6b80; --q-ok:#1f7a4d; --q-no:#c0481f;
  max-width: 780px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
  font-family: 'Inter', system-ui, sans-serif; color:#12233a;
}
.rfq-head h2 { font-family:'Plus Jakarta Sans', sans-serif; font-size:1.7rem; color:var(--q-navy); margin:0 0 .35rem; }
.rfq-sub { color:var(--q-soft); font-size:.95rem; margin:0 0 1.6rem; }

.rfq-q {
  border:1.5px solid var(--q-line); border-radius:14px; padding:1.15rem 1.2rem;
  margin-bottom:1rem; background:#fff; transition:border-color .2s, background .2s;
}
.rfq-prompt { font-size:1.02rem; font-weight:600; line-height:1.5; display:flex; gap:.6rem; align-items:flex-start; }
.rfq-prompt code { font-family:'SF Mono', ui-monospace, monospace; background:#0f1729; color:#5AD1FF; padding:.1rem .4rem; border-radius:5px; font-size:.92em; }
.rfq-num {
  flex:none; width:26px; height:26px; border-radius:50%; background:linear-gradient(150deg,var(--q-blue),var(--q-purple));
  color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;
}

.rfq-opts { display:flex; flex-direction:column; gap:.5rem; margin:.9rem 0 0 2.1rem; }
.rfq-opt { display:flex; gap:.6rem; align-items:center; padding:.55rem .75rem; border:1.5px solid var(--q-line); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s; }
.rfq-opt:hover { border-color:var(--q-blue); background:#f4f8fd; }
.rfq-opt input { accent-color:var(--q-purple); width:auto; margin:0; }

.rfq-code { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.9rem 0 0 2.1rem; font-family:'SF Mono', ui-monospace, monospace; }
.rfq-ctx { background:#0f1729; color:#e6edf3; padding:.35rem .55rem; border-radius:6px; font-size:.95rem; }
.rfq-input {
  font-family:'SF Mono', ui-monospace, monospace; font-size:.95rem; padding:.4rem .6rem; width:200px;
  border:2px solid var(--q-blue); border-radius:8px; background:#fff; color:#12233a;
}
.rfq-input:focus { outline:none; box-shadow:0 0 0 3px rgba(78,119,187,.2); }
.rfq-hint { margin:.6rem 0 0 2.1rem; font-size:.82rem; color:var(--q-soft); font-style:italic; }

.rfq-fb { margin:.75rem 0 0 2.1rem; font-size:.9rem; font-weight:600; }
.rfq-q.rfq-correct { border-color:var(--q-ok); background:#f2fbf6; }
.rfq-q.rfq-correct .rfq-fb { color:var(--q-ok); }
.rfq-q.rfq-wrong { border-color:var(--q-no); background:#fdf4f1; }
.rfq-q.rfq-wrong .rfq-fb { color:var(--q-no); }

.rfq-actions { margin-top:1.6rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.rfq-submit {
  font-family:inherit; font-weight:700; font-size:1rem; color:#fff; border:none; border-radius:999px;
  padding:.8rem 1.9rem; cursor:pointer; background:linear-gradient(150deg,var(--q-blue),var(--q-purple) 60%,var(--q-pink));
  box-shadow:0 8px 22px rgba(105,64,151,.35);
}
.rfq-submit:disabled { opacity:.5; cursor:default; box-shadow:none; }
.rfq-msg { font-size:.9rem; color:var(--q-soft); }

.rfq-result {
  border-radius:16px; padding:1.4rem 1.5rem; margin-bottom:1.6rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  color:#fff;
}
.rfq-result.pass { background:linear-gradient(150deg,var(--q-blue),var(--q-purple)); }
.rfq-result.fail { background:linear-gradient(150deg,#5a6b80,#39465a); }
.rfq-score { font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:2.4rem; line-height:1; }
.rfq-result > div:not(.rfq-score) { flex:1; min-width:180px; font-size:1rem; line-height:1.4; }
.rfq-retake {
  font-family:inherit; font-weight:700; font-size:.9rem; color:#fff; background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.5); border-radius:999px; padding:.55rem 1.2rem; cursor:pointer;
}
.rfq-retake:hover { background:rgba(255,255,255,.28); }

@media (max-width:560px){
  .rfq-opts, .rfq-code, .rfq-hint, .rfq-fb { margin-left:0; }
  .rfq-input { width:100%; }
}