/* =========================================================
   СЕКЦИЯ «ТЕСТИРОВАНИЕ» — МИНИМАЛЬНЫЙ КАСТОМНЫЙ CSS
   Всё остальное — Bootstrap 5.3 utilities + algo-card
   ========================================================= */

/* Декоративное кольцо вокруг иллюстрации */
.test-ring {
  width: 340px;
  height: 340px;
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(220,53,69,.08));
  border: 2px dashed rgba(59,130,246,.22);
  animation: testRingSpin 30s linear infinite;
}
@keyframes testRingSpin { to { transform: rotate(360deg); } }

/* Картинка внутри кольца — компенсируем вращение родителя */
.test-ring__img {
  width: 220px;
  animation: testRingCounterSpin 30s linear infinite;
  filter: drop-shadow(0 16px 30px rgba(30,58,138,.18));
}
@keyframes testRingCounterSpin { to { transform: rotate(-360deg); } }

/* Плавающие бейджи-акценты */
.test-float {
  position: absolute;
  animation: testFloatBounce 4s ease-in-out infinite;
}
.test-float--top    { top: 8%;  right: -6%; animation-delay: 0s; }
.test-float--bottom { bottom: 10%; left: -4%; animation-delay: 1.5s; }
@keyframes testFloatBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Градиенты на иконках perks (BS не умеет градиентный background на утилитах) */
.perk-icon--green { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 4px 12px rgba(22,163,74,.30); }
.perk-icon--blue  { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 4px 12px rgba(37,99,235,.30); }
.perk-icon--red   { background: linear-gradient(135deg, #dc3545, #ef4444); box-shadow: 0 4px 12px rgba(220,53,69,.30); }

/* Акцент «онлайн» в заголовке */
.test-accent {
  background: linear-gradient(90deg, #dc3545, #e85d6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================================= */
@media (max-width: 991.98px) {
  .test-ring { width: 260px; height: 260px; }
  .test-ring__img { width: 170px; }
  .test-float--top    { right: 0; top: 0; }
  .test-float--bottom { left: 0; bottom: 0; }
}
@media (max-width: 480px) {
  .test-ring { width: 220px; height: 220px; }
  .test-ring__img { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .test-ring, .test-ring__img, .test-float { animation: none !important; }
}