/* =========================================================
   QAFAR-AF PRODUCTION ENHANCEMENT LAYER
   Loaded AFTER qafar-af.css. Only additive polish:
   - Quiz UI: spacing, typography, animations, progress bar
   - Submission form: clearer states, focus rings, mobile fit
   - Word cards: hover, audio buttons, badges
   - Accessibility: focus-visible rings, 44px tap targets
   ========================================================= */

/* ---------- Tokens (scoped, won't clash with existing) ---------- */
:root{
  --qa-gold:#f6c451;
  --qa-gold-deep:#e0a634;
  --qa-ink:#0a2638;
  --qa-ink-2:#07344f;
  --qa-line:rgba(255,255,255,.12);
  --qa-line-strong:rgba(255,255,255,.22);
  --qa-success:#1fbf75;
  --qa-error:#ff5f6d;
  --qa-radius:18px;
  --qa-shadow:0 18px 40px -22px rgba(0,0,0,.55);
  --qa-focus:0 0 0 3px rgba(246,196,81,.55);
}

/* ---------- Global a11y polish ---------- */
.quiz-highlight-section :focus-visible,
.quiz-submit-card :focus-visible,
.word-card :focus-visible,
.word-modal :focus-visible{
  outline:none !important;
  box-shadow:var(--qa-focus) !important;
  border-radius:12px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .qa-fade-in,.qa-pop,.qa-shake,.quiz-option,.quiz-btn,.word-card{
    animation:none !important;
    transition:none !important;
  }
}

/* ---------- Desktop layout: quiz on top, form below ---------- */
@media (min-width: 992px){
  .quiz-highlight-section .quiz-focus-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:32px !important;
    max-width:980px;
    margin-inline:auto;
  }
  .quiz-highlight-section .quiz-card,
  .quiz-highlight-section .quiz-submit-card{
    width:100%;
    max-width:980px;
    margin-inline:auto;
  }
}

/* ---------- Quiz card polish ---------- */
.quiz-highlight-section .quiz-card{
  border-radius:var(--qa-radius);
  box-shadow:var(--qa-shadow);
  border:1px solid var(--qa-line);
  position:relative;
  overflow:hidden;
}
.quiz-highlight-section .quiz-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(900px 200px at 0% 0%, rgba(246,196,81,.08), transparent 60%);
  pointer-events:none;
}

/* Progress bar injected by enhance.js */
.qa-quiz-progress{
  height:6px;
  width:100%;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  margin:6px 0 14px;
}
.qa-quiz-progress > span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--qa-gold),var(--qa-gold-deep));
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}

/* Quiz target word */
.quiz-highlight-section .quiz-asked-word{
  display:inline-block;
  margin-top:10px;
  padding:14px 22px;
  text-align:center;
  background:linear-gradient(135deg, rgba(246,196,81,.18), rgba(246,196,81,.06));
  border:1px solid rgba(246,196,81,.35);
  border-radius:14px;
  color:#fff !important;
  font-weight:800;
  font-size:clamp(1.55rem,2.6vw,2.1rem) !important;
  letter-spacing:.2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  animation:qaPop .35s ease-out;
}
@keyframes qaPop{
  from{transform:translateY(6px) scale(.98);opacity:0}
  to{transform:none;opacity:1}
}

/* Options */
.quiz-highlight-section .quiz-options{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px !important;
  margin-top:18px;
}
@media (max-width:560px){
  .quiz-highlight-section .quiz-options{grid-template-columns:1fr !important;}
}
.quiz-highlight-section .quiz-option{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:14px 16px !important;
  min-height:56px;
  border-radius:14px !important;
  border:1.5px solid var(--qa-line-strong) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  text-align:left !important;
  font-weight:600;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  cursor:pointer;
}
.quiz-highlight-section .quiz-option:hover:not(:disabled){
  transform:translateY(-2px);
  background:rgba(246,196,81,.10) !important;
  border-color:rgba(246,196,81,.55) !important;
  box-shadow:0 12px 24px -16px rgba(246,196,81,.45);
}
.quiz-highlight-section .quiz-option-letter{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:10px;
  background:rgba(246,196,81,.18);
  color:var(--qa-gold);
  font-weight:800;
  flex:0 0 auto;
}
.quiz-highlight-section .quiz-option-text{flex:1;line-height:1.4;}

.quiz-highlight-section .quiz-option.correct{
  background:rgba(31,191,117,.18) !important;
  border-color:rgba(31,191,117,.6) !important;
  animation:qaPulseOK .5s ease;
}
.quiz-highlight-section .quiz-option.wrong{
  background:rgba(255,95,109,.16) !important;
  border-color:rgba(255,95,109,.6) !important;
  animation:qaShake .35s ease;
}
@keyframes qaPulseOK{0%{box-shadow:0 0 0 0 rgba(31,191,117,.6)}100%{box-shadow:0 0 0 14px rgba(31,191,117,0)}}
@keyframes qaShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.quiz-highlight-section .quiz-feedback{
  margin-top:14px;
  min-height:24px;
  font-weight:600;
  animation:qaFade .3s ease;
}
@keyframes qaFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.quiz-highlight-section .quiz-btn{
  margin-top:16px;
  min-height:48px;
  border-radius:12px !important;
  font-weight:700;
}
.quiz-highlight-section .quiz-btn[disabled]{opacity:.55;cursor:not-allowed;}

#quizScore{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(246,196,81,.16);
  color:var(--qa-gold);
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
}

/* Keyboard hint */
.qa-kbd-hint{
  margin-top:10px;
  font-size:.8rem;
  color:rgba(255,255,255,.55);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.qa-kbd{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--qa-line-strong);
  border-bottom-width:2px;
  border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;
  color:#fff;
  background:rgba(255,255,255,.04);
}
@media (hover:none){ .qa-kbd-hint{display:none;} }

/* ---------- Submission form polish ---------- */
.quiz-submit-card{
  border-radius:var(--qa-radius);
  box-shadow:var(--qa-shadow);
  border:1px solid var(--qa-line);
}
.quiz-submit-card .form-grid input,
.quiz-submit-card .form-grid select,
.quiz-submit-card .form-grid textarea{
  min-height:48px;
  border-radius:12px !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}


.quiz-submit-card .form-grid input:focus,
.quiz-submit-card .form-grid select:focus,
.quiz-submit-card .form-grid textarea:focus{
  border-color:rgba(246,196,81,.65) !important;
  box-shadow:var(--qa-focus) !important;
  background:rgba(255,255,255,.07) !important;
}
.quiz-submit-card .form-grid input:invalid:not(:placeholder-shown),
.quiz-submit-card .form-grid textarea:invalid:not(:placeholder-shown){
  border-color:rgba(255,95,109,.55) !important;
}

.quiz-submit-card .form-grid button[type="submit"]{
  min-height:52px;
  border-radius:14px !important;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.quiz-submit-card .form-grid button[type="submit"]:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -16px rgba(246,196,81,.55);
}
.quiz-submit-card .form-grid button[type="submit"][disabled]{
  opacity:.7;cursor:not-allowed;transform:none;
}

.form-message{
  border-radius:12px;
  padding:12px 14px;
  font-weight:600;
  background:rgba(31,191,117,.16);
  color:#caffe1;
  border:1px solid rgba(31,191,117,.45);
  animation:qaFade .25s ease;
}
.form-message.error{
  background:rgba(255,95,109,.14);
  color:#ffd6d9;
  border-color:rgba(255,95,109,.5);
}

/* Honeypot hidden from sighted users */
.form-hp{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- Word cards: hover, audio buttons ---------- */
.word-card{
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.word-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.55);
}
.audio-play-btn,
.audio-missing-btn{
  min-height:40px;
  min-width:44px;
  border-radius:10px !important;
  transition:transform .15s ease, background .2s ease;
}
.audio-play-btn:hover{transform:translateY(-1px);}
.audio-play-btn.qa-playing{
  background:rgba(246,196,81,.25) !important;
  color:var(--qa-gold) !important;
  animation:qaPulseOK 1.2s ease infinite;
}

/* ---------- Toast (success share / form) ---------- */
.qa-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#0f3a59,#0a2638);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--qa-line-strong);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:9999;
  max-width:90vw;
}
.qa-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.qa-toast.error{border-color:rgba(255,95,109,.55);}

/* ---------- Mobile tightening ---------- */
@media (max-width:480px){
  .quiz-highlight-section .quiz-card,
  .quiz-highlight-section .quiz-submit-card{
    padding:18px !important;
    border-radius:14px;
  }
  .quiz-highlight-section .quiz-asked-word{padding:12px 16px;}
}

/* ============================================================
   Quiz action buttons — equal width row
   ============================================================ */
.quiz-highlight-section .quiz-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
  width:100%;
}
.quiz-highlight-section .quiz-actions .quiz-btn{
  margin-top:0 !important;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:14px 18px;
  border-radius:14px !important;
  font-weight:800;
  letter-spacing:.2px;
  font-size:1rem;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.quiz-highlight-section .quiz-actions .quiz-btn-next{
  background:linear-gradient(135deg,#ffd24a 0%,#f6c451 55%,#e2a72c 100%);
  color:#07344f;
  border:none;
  box-shadow:0 10px 22px -10px rgba(246,196,81,.55), inset 0 0 0 1px rgba(255,255,255,.35);
}
.quiz-highlight-section .quiz-actions .quiz-btn-next:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(246,196,81,.7), inset 0 0 0 1px rgba(255,255,255,.5);
}
.quiz-highlight-section .quiz-actions .quiz-btn-reset{
  background:rgba(255,255,255,.04);
  color:#ffd87a;
  border:1.5px solid rgba(246,196,81,.55) !important;
  box-shadow:inset 0 0 0 1px rgba(246,196,81,.08);
}
.quiz-highlight-section .quiz-actions .quiz-btn-reset:hover{
  transform:translateY(-2px);
  background:rgba(246,196,81,.12);
  color:#fff;
  border-color:rgba(246,196,81,.85) !important;
}
@media (max-width:540px){
  .quiz-highlight-section .quiz-actions{grid-template-columns:1fr;gap:10px;}
  .quiz-highlight-section .quiz-actions .quiz-btn{min-height:50px;font-size:.95rem;}
}

/* ============================================================
   Submission form — modern redesign (matches site navy + gold)
   ============================================================ */
.quiz-submit-card#submit{
  position:relative;
  padding:30px 30px 28px !important;
  border-radius:22px !important;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(246,196,81,.10), transparent 55%),
    linear-gradient(160deg, rgba(13,45,68,.92) 0%, rgba(7,36,55,.96) 60%, rgba(5,26,40,.98) 100%) !important;
  border:1px solid rgba(246,196,81,.22) !important;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden;
}
.quiz-submit-card#submit::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(246,196,81,.5), transparent 35%, transparent 65%, rgba(246,196,81,.35));
  padding:1px;
  border-radius:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:.9;
}
.quiz-submit-card#submit .submit-card-top{
  position:relative;
  text-align:center;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px dashed rgba(246,196,81,.25);
}
.quiz-submit-card#submit .submit-card-top h3{
  font-size:clamp(1.4rem,2.4vw,1.85rem) !important;
  font-weight:900;
  margin:0 0 8px;
  background:linear-gradient(90deg,#ffe28a,#f6c451 55%,#e2a72c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-flex;align-items:center;gap:10px;
}
.quiz-submit-card#submit .submit-card-top h3 i{
  -webkit-text-fill-color:#f6c451;color:#f6c451;
  filter:drop-shadow(0 4px 10px rgba(246,196,81,.45));
}
.quiz-submit-card#submit .submit-card-lead{
  margin:0;color:rgba(255,255,255,.72);font-size:.95rem;
}

.quiz-submit-card#submit .enhanced-word-form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
}
.quiz-submit-card#submit .enhanced-word-form .form-field,
.quiz-submit-card#submit .enhanced-word-form > label{
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
}
.quiz-submit-card#submit .form-field-wide,
.quiz-submit-card#submit .contributor-privacy-box,
.quiz-submit-card#submit .audio-submit-hint,
.quiz-submit-card#submit > .enhanced-word-form > button[type="submit"],
.quiz-submit-card#submit .submit-form-note,
.quiz-submit-card#submit .form-message{
  grid-column:1/-1;
}
.quiz-submit-card#submit .enhanced-word-form label > span:first-child,
.quiz-submit-card#submit .enhanced-word-form .form-field > span:first-child{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#f6c451;
  display:inline-flex;align-items:center;gap:6px;
  padding-left:2px;
}
.quiz-submit-card#submit .enhanced-word-form input,
.quiz-submit-card#submit .enhanced-word-form select,
.quiz-submit-card#submit .enhanced-word-form textarea{
  width:100%;
  min-height:50px !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  font-size:.98rem;
  font-weight:500;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.quiz-submit-card#submit .enhanced-word-form textarea{
  min-height:110px !important;resize:vertical;line-height:1.55;
}
.quiz-submit-card#submit .enhanced-word-form input::placeholder,
.quiz-submit-card#submit .enhanced-word-form textarea::placeholder{
  color:rgba(255,255,255,.38);font-weight:400;
}
.quiz-submit-card#submit .enhanced-word-form input:hover,
.quiz-submit-card#submit .enhanced-word-form select:hover,
.quiz-submit-card#submit .enhanced-word-form textarea:hover{
  border-color:rgba(246,196,81,.3) !important;
  background:rgba(255,255,255,.06) !important;
}
.quiz-submit-card#submit .enhanced-word-form input:focus,
.quiz-submit-card#submit .enhanced-word-form select:focus,
.quiz-submit-card#submit .enhanced-word-form textarea:focus{
  outline:none;
  border-color:#f6c451 !important;
  background:rgba(246,196,81,.07) !important;
  box-shadow:0 0 0 4px rgba(246,196,81,.18), inset 0 1px 2px rgba(0,0,0,.2) !important;
  transform:translateY(-1px);
}
.quiz-submit-card#submit .enhanced-word-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f6c451' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px !important;
  cursor:pointer;
}
.quiz-submit-card#submit .enhanced-word-form select option{
  background:#0a2a40;color:#fff;
}

/* Privacy box */
.quiz-submit-card#submit .contributor-privacy-box{
  padding:18px 18px 16px;
  background:linear-gradient(135deg, rgba(246,196,81,.07), rgba(255,255,255,.02));
  border:1px solid rgba(246,196,81,.22);
  border-radius:16px;
  display:flex;flex-direction:column;gap:12px;
}
.quiz-submit-card#submit .contributor-privacy-title{
  font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:#f6c451;display:inline-flex;align-items:center;gap:8px;
}
.quiz-submit-card#submit .contributor-privacy-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.quiz-submit-card#submit .contributor-privacy-grid input.is-hidden{display:none;}
.quiz-submit-card#submit .contributor-privacy-consent{
  display:flex;gap:10px;align-items:flex-start;
  color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.45;cursor:pointer;
}
.quiz-submit-card#submit .contributor-privacy-consent input[type="checkbox"]{
  margin-top:3px;width:18px;height:18px;min-height:0 !important;
  accent-color:#f6c451;flex-shrink:0;
}

/* Audio hint */
.quiz-submit-card#submit .audio-submit-hint{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;
  background:rgba(7,52,79,.55);
  border:1px dashed rgba(246,196,81,.4);
  border-radius:14px;
  color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.5;
}
.quiz-submit-card#submit .audio-submit-hint i{
  color:#f6c451;font-size:1.1rem;margin-top:2px;flex-shrink:0;
}
.quiz-submit-card#submit .audio-submit-hint strong{color:#ffd87a;}

/* Submit button */
.quiz-submit-card#submit .enhanced-word-form > button[type="submit"]{
  margin-top:6px;
  min-height:58px !important;
  padding:16px 24px !important;
  border:none !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#ffd24a 0%,#f6c451 50%,#e2a72c 100%) !important;
  color:#07344f !important;
  font-size:1.05rem;font-weight:900;letter-spacing:.3px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(246,196,81,.55), inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease;
  position:relative;overflow:hidden;
}
.quiz-submit-card#submit .enhanced-word-form > button[type="submit"]::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.quiz-submit-card#submit .enhanced-word-form > button[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px -14px rgba(246,196,81,.75), inset 0 0 0 1px rgba(255,255,255,.55);
  filter:brightness(1.05);
}
.quiz-submit-card#submit .enhanced-word-form > button[type="submit"]:hover::after{transform:translateX(100%);}
.quiz-submit-card#submit .enhanced-word-form > button[type="submit"] i{font-size:1.05rem;}

/* Success note */
.quiz-submit-card#submit .submit-form-note{
  margin:6px 0 0;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:rgba(31,191,117,.10);
  border:1px solid rgba(31,191,117,.3);
  border-radius:12px;
  color:#aef0c8;font-size:.85rem;font-weight:600;
  justify-content:center;text-align:center;
}
.quiz-submit-card#submit .submit-form-note i{color:#3ddc97;}

/* Mobile */
@media (max-width:720px){
  .quiz-submit-card#submit{padding:22px 18px !important;border-radius:18px !important;}
  .quiz-submit-card#submit .enhanced-word-form{grid-template-columns:1fr;gap:14px;}
  .quiz-submit-card#submit .contributor-privacy-grid{grid-template-columns:1fr;}
  .quiz-submit-card#submit .submit-card-top h3{font-size:1.25rem !important;}
}

/* ── Quiz: stats bar ── */
.quiz-stats-bar{display:flex;gap:clamp(8px,2vw,20px);flex-wrap:wrap;margin-bottom:6px}
.qs-item{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:5px 14px;font-size:.8rem}
.qs-label{color:rgba(255,255,255,.6);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.65rem}
.qs-value{color:#fff;font-weight:950;font-size:.85rem}

/* ── Quiz: progress bar ── */
.quiz-progress-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:6px}
.quiz-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd700,#ffe978);border-radius:4px;transition:width .35s ease}

/* ── Quiz: question area ── */
.quiz-question-area{text-align:center;padding:8px 0}
.quiz-question-kicker{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.quiz-qnum{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#ffd700;color:#062743;font-weight:950;font-size:.85rem}
.quiz-qtype{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.quiz-qword{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:950;color:#fff;margin:0 0 6px;line-height:1.15;letter-spacing:-.03em}
.quiz-qhint{font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:4px}
.quiz-qhint i{margin-right:5px}

/* ── Quiz: option buttons ── */
.quiz-option-modern{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:left;margin-bottom:8px}
.quiz-option-modern:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);transform:translateX(3px)}
.quiz-option-modern:disabled{cursor:default;opacity:.7}
.quiz-option-modern.selected{background:rgba(255,215,0,.18)!important;border-color:#ffd700!important;box-shadow:0 0 0 2px rgba(255,215,0,.3)}
.quiz-option-modern.correct{background:rgba(34,197,94,.2)!important;border-color:#22c55e!important}
.quiz-option-modern.wrong{background:rgba(239,68,68,.2)!important;border-color:#ef4444!important}
.opt-letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);font-weight:950;font-size:.78rem;flex-shrink:0;color:#ffd700}
.opt-text{flex:1}

/* ── Quiz: feedback ── */
.quiz-feedback-modern{display:none;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:rgba(0,0,0,.2);margin:4px 0 8px;font-size:.88rem;color:#fff}
.fb-correct{color:#22c55e;font-weight:700}
.fb-correct strong{color:#ffd700}
.fb-wrong{color:#ef4444;font-weight:700}
.fb-wrong strong{color:#fff}

/* ── Quiz: action buttons ── */
.quiz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.quiz-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;border:none;background:linear-gradient(135deg,#ffd700,#ffe978);color:#062743;font-weight:950;font-size:.9rem;cursor:pointer;transition:all .2s ease}
.quiz-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,.3)}
.quiz-btn-primary:disabled{opacity:.4;cursor:default}
.quiz-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.7);font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s ease}
.quiz-btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}

/* ── Quiz: results screen ── */
.quiz-results{text-align:center;padding:10px 0}
.qr-header{margin-bottom:16px}
.qr-trophy{font-size:3rem;color:#ffd700;margin-bottom:8px}
.qr-header h3{font-size:1.8rem;font-weight:950;color:#fff;margin:0}
.qr-subtitle{color:rgba(255,255,255,.6);font-size:.85rem;margin:4px 0 0}
.qr-section-title{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.qr-score{display:flex;justify-content:center;gap:clamp(12px,3vw,30px);flex-wrap:wrap;margin-bottom:18px}
.qr-stat{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.08);border-radius:16px;padding:14px 20px;min-width:80px}
.qr-stat strong{font-size:1.6rem;font-weight:950;color:#ffd700}
.qr-stat span{font-size:.72rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.qr-list{max-height:340px;overflow-y:auto;margin-bottom:16px;text-align:left;background:rgba(0,0,0,.15);border-radius:14px;padding:8px}
.qr-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.82rem;color:rgba(255,255,255,.8)}
.qr-item:last-child{border-bottom:none}
.qr-num{color:rgba(255,255,255,.4);font-weight:700;min-width:22px}
.qr-word{flex:1;font-weight:700;color:#fff}
.qr-answer{font-size:.75rem;color:#22c55e;font-weight:600;margin-left:4px}
.qr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}

/* ── Quiz: mastery modal ── */
.mastery-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);padding:20px}
.mastery-modal[aria-hidden="false"]{display:flex}
.mastery-modal-content{background:#0f2640;border-radius:24px;padding:clamp(20px,3vw,34px);max-width:560px;width:100%;max-height:80vh;overflow-y:auto;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.mastery-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mastery-modal-header h3{margin:0;color:#fff;font-weight:950;font-size:1.3rem}
.mastery-modal-header h3 i{color:#ffd700;margin-right:8px}
.mastery-close{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:1.1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}
.mastery-close:hover{background:rgba(255,255,255,.2)}
.mastery-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.mastery-stat{background:rgba(255,255,255,.06);border-radius:14px;padding:14px;text-align:center}
.mastery-stat strong{display:block;font-size:1.4rem;font-weight:950;color:#ffd700}
.mastery-stat span{font-size:.72rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.mastery-list{max-height:280px;overflow-y:auto}
.m-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.82rem;color:rgba(255,255,255,.8)}
.m-item:last-child{border-bottom:none}
.m-correct{color:#22c55e;font-weight:700;margin-right:8px}
.m-wrong{color:#ef4444;font-weight:700}
.m-mastered-trophy{font-size:1rem;margin-left:4px}

/* ── Quiz: empty state ── */
.quiz-empty-state{text-align:center;padding:30px 10px;color:rgba(255,255,255,.6)}
.quiz-empty-state i{font-size:2.5rem;color:rgba(255,255,255,.2);margin-bottom:12px;display:block}
.quiz-empty-state h3{color:#fff;font-weight:800;margin:0 0 6px}
.quiz-empty-state p{font-size:.9rem;margin:0}

/* ── Quiz: keyboard hint ── */
.qa-kbd-hint{text-align:center;font-size:.72rem;color:rgba(255,255,255,.4);margin-top:4px}
.qa-kbd{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.1);font-weight:700;font-size:.72rem;margin:0 2px;color:rgba(255,255,255,.6)}