/* ====== QUIZ LIST (без изменений, просто аккуратнее) ====== */
.mblex-quiz-list{max-width:920px;margin:24px auto;padding:0 12px}
.mblex-quiz-ul{list-style:none;padding:0;margin:0}
.mblex-quiz-item{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;margin-bottom:12px;
  background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.04)
}
.mblex-quiz-item .title{font-weight:700;font-size:16px}
.mblex-quiz-item .topic{color:#64748b}
.mblex-quiz-item .btn{
  background:linear-gradient(180deg,#111,#000);color:#fff;border-radius:12px;
  padding:9px 14px;text-decoration:none;transition:transform .08s ease,opacity .2s ease
}
.mblex-quiz-item .btn:hover{transform:translateY(-1px);opacity:.95}

/* ====== QUIZ CONTAINER ====== */
#mblex-quiz{
  max-width:920px;margin:24px auto;padding:18px;background:#fff;
  border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 10px 30px rgba(17,24,39,.06)
}
#mblex-quiz .quiz-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
#mblex-quiz .quiz-header h2{margin:0;font-size:20px}
#mblex-quiz .subset-note{width:100%;font-size:13px;color:#64748b;margin-top:2px}

/* Progress */
#mblex-quiz .progress{font-weight:600;white-space:nowrap}
#mblex-quiz .progressbar{width:100%;height:8px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin-top:8px}
#mblex-quiz .progressbar .bar{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .35s ease;border-radius:999px}

/* ====== QUESTION & ANSWERS ====== */
#mblex-quiz .q-text{font-size:18px;margin:12px 0 10px}

/* Ряд ответа — мягкий фон, аккуратная рамка */
#mblex-quiz .answers .opt-row{
  margin:10px 0;
  background:#f8fafc;                 /* нежно-серо-голубой фон */
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  transition:background .15s ease,border-color .15s ease, box-shadow .15s ease
}
#mblex-quiz .answers .opt-row:hover{
  background:#f3f6fb;
  border-color:#dbe3ee;
  box-shadow:0 4px 12px rgba(17,24,39,.06)
}

/* Сам label — выравнивание по центру вертикали */
#mblex-quiz .opt{
  display:flex;gap:10px;align-items:center;   /* было flex-start → стало center */
  padding:12px 14px;
  cursor:pointer;
}

/* Радио — по центру и чуть крупнее для тач-устройств */
#mblex-quiz input[type=radio]{
  appearance:auto; /* сохраняем системные кружочки */
  width:18px;height:18px;flex:0 0 auto;
  margin:0; /* без смещения вверх */
}

/* Текст ответа */
#mblex-quiz .opt .txt{line-height:1.35}

/* Состояние выбранного ответа — подсветим чуть сильнее фон и рамку */
#mblex-quiz .answers .opt-row:has(input:checked){
  background:#eef6ff;                 /* чуть ярче при выборе */
  border-color:#bcd6ff;
}

/* Кнопки */
#mblex-quiz .btn{
  background:linear-gradient(180deg,#111,#000);color:#fff;border:0;border-radius:12px;
  padding:11px 16px;cursor:pointer;transition:transform .08s ease,opacity .2s ease;
  box-shadow:0 6px 20px rgba(17,24,39,.08);width:auto
}
#mblex-quiz .btn:hover{transform:translateY(-1px)}
#mblex-quiz .btn.disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* Результаты */
#mblex-quiz .quiz-result .score{
  font-size:34px;font-weight:800;margin-bottom:8px;
  background:linear-gradient(90deg,#111827,#334155);-webkit-background-clip:text;background-clip:text;color:transparent
}
#mblex-quiz .after-btns{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
#mblex-quiz .after-btns .btn{flex:1;text-align:center}

/* Карточки в обзоре */
#mblex-quiz .review .rev-item{border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;margin:10px 0;background:#fff}
#mblex-quiz .review .rev-q{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
#mblex-quiz .badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px}

/* Цвета правильных/неправильных (как договаривались раньше) */
#mblex-quiz .review .rev-item.correct{border-color:#86efac;background:linear-gradient(0deg,#f0fdf4,#ffffff)}
#mblex-quiz .review .rev-item.correct .rev-q{color:#166534}
#mblex-quiz .review .rev-item.correct .badge{background:#22c55e;color:#052e16}
#mblex-quiz .review .rev-item.incorrect{border-color:#fecaca;background:linear-gradient(0deg,#fef2f2,#ffffff)}
#mblex-quiz .review .rev-item.incorrect .rev-q{color:#991b1b}
#mblex-quiz .review .rev-item.incorrect .badge{background:#ef4444;color:#7f1d1d}

/* Лёгкий эффект "shake", когда нажали Next без выбора */
#mblex-quiz .quiz-actions .next.shake{animation:shake .35s linear 1}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* Конфетти-канвас (если используется) */
#mblex-quiz .celebrate-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}

/* ====== АДАПТИВ ====== */
@media (max-width: 768px){
  .mblex-quiz-item{flex-direction:column;align-items:flex-start}
  #mblex-quiz{padding:12px}
  #mblex-quiz .q-text{font-size:16px}
  #mblex-quiz .btn{width:100%}
}
@media (max-width: 480px){
  #mblex-quiz .quiz-header{flex-direction:column;align-items:flex-start}
  #mblex-quiz .progressbar{height:6px}
  #mblex-quiz .q-text{font-size:15px}
}