/* =========================================================
   СТОРІНКА ТЕСТУ — БАЗА З КРОК-ХАБУ.

   Дослівний витяг із assets/krok/css/main.css: структура картки
   (.test-item / .test-info / .question-number / .test-actions)
   і прогрес-бар (.progress-* / .finish-btn / .dark-mode-toggle).

   Навіщо окремий файл: у main.css ці правила лежать серед 3300
   рядків layout самого хабу (шапка, сітка, таби), який на
   сторінку предмета тягти не можна. Саме тут живе, наприклад,
   `.test-info{display:flex}` - без нього ряд іконок не стає
   праворуч від номера питання.

   Скін поверх накладають design-b-v2.css і krok-question-card.css
   (обидва з !important і вищою специфічністю), як і в хабі.
   ========================================================= */

/* Токени й анімації, від яких залежать правила нижче. */
:root{
  --card: rgba(255, 255, 255, 0.8);
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(226, 232, 240, 0.8);
  --green: #10b981;
  --red: #ef4444;
  --red-dark: #dc2626;
  --radius: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode{
  --card: #1a1a1d;
  --card-2: #242428;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes wave {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.03); }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes rotateIn {
  from {
    transform: translateY(-50%) rotate(-90deg) scale(0);
  }
  to {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
}
@keyframes popIn {
  from {
    transform: translateY(-50%) scale(0);
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.test-item{ margin-bottom: 28px; padding: 24px 22px 72px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 251, 255, 0.9) 100%); backdrop-filter: blur(20px); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04); border: 1px solid rgba(255, 255, 255, 0.8); position: relative; overflow: visible; transition: all 0.4s var(--ease); animation: cardIn 0.5s var(--ease); }
.test-item::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: inherit; }
.test-item:hover{ border-color: rgba(14, 165, 233, 0.3); }
.test-item:hover::before{ opacity: 1; }
.test-item.inactive{ position: relative; }
.test-item.inactive::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(241, 245, 249, 0.5) 0%, rgba(226, 232, 240, 0.5) 100%); pointer-events: none; border-radius: inherit; z-index: 1; transition: opacity 0.3s var(--ease); }
.test-item.inactive:hover::after{ opacity: 0; }
.test-info{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; position: relative; z-index: 2; }
.question-number{ font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(14, 165, 233, 0.2); position: relative; z-index: 2; }
.test-item h3{ font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 18px; line-height: 1.5; position: relative; z-index: 2; }
.test-item ul,
.sim-item ul{ list-style: none; margin: 16px 0; position: relative; z-index: 2; }
.test-item ul li,
.sim-item ul li{ padding: 16px 20px; margin: 12px 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-radius: 14px; cursor: pointer; transition: all 0.3s var(--ease); color: var(--ink); font-size: 15px; font-weight: 500; position: relative; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); border: 1px solid rgba(226, 232, 240, 0.8); z-index: 2; }
.test-item ul li:hover,
.sim-item ul li.clickable:hover{ background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); transform: translateX(8px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15); border-color: rgba(14, 165, 233, 0.3); }
.test-item ul li.selected,
.sim-item ul li.selected{ background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); font-weight: 600; border-color: rgba(59, 130, 246, 0.4); }
.test-item ul li.correct,
.sim-item ul li.correct{ background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); border-color: rgba(16, 185, 129, 0.4); animation: bounce 0.3s ease-in-out; }
.test-item ul li.correct::after{ content: '✔'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 18px; font-weight: 900; width: 26px; height: 26px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); animation: popIn 0.3s var(--ease) forwards; }
.test-item ul li.incorrect,
.sim-item ul li.incorrect{ background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; font-weight: 600; text-decoration: line-through; text-decoration-color: var(--red); border-color: rgba(239, 68, 68, 0.4); animation: shake 0.3s ease-in-out; }
.test-item ul li.incorrect::after{ content: '✘'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--red); font-size: 18px; font-weight: 900; width: 26px; height: 26px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); animation: rotateIn 0.3s var(--ease) forwards; }
.test-meta{ display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; position: relative; z-index: 2; }
.test-meta .chip{ font-size: 10px; line-height: 1; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); color: #64748b; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-weight: 600; letter-spacing: .01em; }
.test-meta .chip strong{ font-weight: 700; opacity: .7; margin-right: 2px; }
@media (max-width: 600px){
  .test-meta{ gap: 4px; margin: 4px 0 8px; }
  .test-meta .chip{ font-size: 9px; padding: 3px 7px; }
}
.progress-container{ position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(1000px, 92vw); height: 24px; background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%); backdrop-filter: blur(12px); border-radius: 999px; overflow: hidden; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); z-index: 1000; display: flex; justify-content: space-between; border: 1px solid rgba(226, 232, 240, 0.8); }
.progress-green,
.progress-red{ height: 100%; position: absolute; top: 0; transition: width 0.7s var(--ease); animation: wave 0.5s ease-in-out; }
.progress-green{ left: 0; background: linear-gradient(90deg, var(--green) 0%, #34d399 100%); box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
.progress-red{ right: 0; background: linear-gradient(90deg, var(--red) 0%, #f87171 100%); transform: scaleX(-1); box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.progress-num{ position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.45); z-index: 3; padding: 0 12px; line-height: 1; pointer-events: none; font-variant-numeric: tabular-nums; }
.progress-num--green{ left: 0; }
.progress-num--red{ right: 0; }
.progress-controls{ position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 1001; }
.progress-counter{ font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800; text-align: center; color: var(--ink); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%); backdrop-filter: blur(12px); padding: 12px 18px; border-radius: 999px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); border: 1px solid rgba(226, 232, 240, 0.8); animation: fadeInUp 0.5s var(--ease); }
.finish-btn{ padding: 12px 20px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #ffffff; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); transition: all 0.3s var(--ease); letter-spacing: 0.02em; }
.finish-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45); }
.finish-btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }
.dark-mode-toggle{ width: 50px; height: 50px; background: transparent; border: 2px solid var(--green); color: var(--green); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25); animation: pulse 3s ease-in-out infinite; }
.dark-mode-toggle:hover{ transform: translateY(-2px) scale(1.05); background: rgba(16, 185, 129, 0.1); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); }
.dark-mode-toggle:hover #mode-icon{ transform: rotate(15deg) scale(1.1); }
body.dark-mode .test-item{ background: var(--card); border-color: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02); }
body.dark-mode .test-item:hover{ border-color: var(--line-strong); }
body.dark-mode .test-item::before{ background: none; }
body.dark-mode .test-item.inactive::after{ background: rgba(11, 18, 32, 0.35); }
body.dark-mode .test-item h3{ color: var(--ink); }
body.dark-mode .question-number{ background: var(--card-2); border-color: var(--line); color: var(--muted); }
body.dark-mode .test-item ul li{ background: var(--card-2); border-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06); }
body.dark-mode .test-item ul li:hover{ background: #2e2e33; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14); }
body.dark-mode .test-item ul li.selected{ background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
body.dark-mode .test-item ul li.correct{ background: rgba(74, 160, 110, 0.16); color: #9ed4b4; box-shadow: inset 0 0 0 1px rgba(74, 160, 110, 0.5); text-decoration-color: #6fae8c; }
body.dark-mode .test-item ul li.correct::after{ color: #9ed4b4; background: rgba(74, 160, 110, 0.2); border: 1px solid rgba(74, 160, 110, 0.45); }
body.dark-mode .test-item ul li.incorrect{ background: rgba(220, 80, 80, 0.16); color: #f0a8a8; box-shadow: inset 0 0 0 1px rgba(220, 80, 80, 0.5); text-decoration-color: #e07a7a; }
body.dark-mode .test-item ul li.incorrect::after{ color: #f0a8a8; background: rgba(220, 80, 80, 0.2); border: 1px solid rgba(220, 80, 80, 0.45); }
body.dark-mode .test-meta .chip{ background: var(--card-2); color: var(--ink); border-color: var(--line); }
body.dark-mode .progress-container{ background: var(--card); border-color: var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
body.dark-mode .progress-counter{ background: var(--card-2); color: var(--ink); border-color: var(--line); }
@media (max-width: 768px){
  .test-item{ padding: 18px 13px 64px; }
  .test-item h3{ font-size: 17px; }
  .test-item ul li{ padding: 14px 14px; font-size: 14px; }
}
@media (max-width: 640px){
  .test-item{ padding: 16px 12px 60px; }
}
@media (max-width: 480px){
  .dark-mode-toggle{ width: 44px; height: 44px; }
}
@media (max-width: 900px){
  .test-item h3{ font-size: clamp(17px, 4vw, 20px) !important; }
  .question-number{ font-size: clamp(15px, 3.5vw, 17px) !important; }
  .test-item ul li{ font-size: clamp(14px, 3.2vw, 16px) !important; }
  .test-meta .chip{ font-size: clamp(12px, 2.5vw, 13px) !important; }
  .finish-btn{ font-size: clamp(14px, 3.2vw, 16px) !important; }
  .progress-counter{ font-size: clamp(14px, 3.2vw, 16px) !important; }
}
@media (max-width: 768px){
  .test-item h3{ font-size: clamp(16px, 3.8vw, 18px) !important; }
  .test-item ul li{ font-size: clamp(13px, 3vw, 15px) !important; }
}
@media (max-width: 600px){
  .test-item h3{ font-size: clamp(15px, 3.5vw, 17px) !important; }
  .question-number{ font-size: clamp(13px, 3vw, 15px) !important; }
  .test-item ul li{ font-size: clamp(12px, 2.8vw, 14px) !important; }
  .test-meta .chip{ font-size: clamp(11px, 2.3vw, 12px) !important; }
}
@media (max-width: 480px){
  .test-item h3{ font-size: clamp(14px, 3.2vw, 16px) !important; }
  .test-item ul li{ font-size: clamp(11px, 2.5vw, 13px) !important; padding: 13px 17px !important; }
  .question-number{ font-size: clamp(12px, 2.8vw, 14px) !important; }
  .test-meta .chip{ font-size: clamp(10px, 2.1vw, 11px) !important; padding: 5px 9px !important; }
  .btn-chip,
  .finish-btn{ font-size: clamp(11px, 2.5vw, 12px) !important; padding: 11px 15px !important; }
  .progress-counter{ font-size: clamp(13px, 3vw, 14px) !important; padding: 11px 15px !important; }
}
@media (max-width: 400px){
  .test-item h3{ font-size: 12px !important; }
  .test-item ul li{ font-size: 12px !important; }
  .question-number{ font-size: 12px !important; }
  .test-meta .chip{ font-size: 10px !important; }
}
@media (max-width: 900px){
  .tool,
  .cb-list,
  .test-item,
  .divforarchive,
  .discussion-btn,
  .explain-btn,
  .progress-container,
  .progress-counter,
  .modal,
  .modal .content,
  .modal .topics,
  .modal .box,
  .modal-content,
  .topics__search,
  .subject,
  .topic-pill,
  .topics__footer,
  .btn,
  .ex-others details,
  .meta-editor input,
  .as-pop,
  .fab{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .test-item{ background: #ffffff !important; }
  body.dark-mode .test-item{ background: #1a1a1d !important; }
  .test-item.inactive::after{ background: rgba(241, 245, 249, 0.6) !important; }
  body.dark-mode .test-item.inactive::after{ background: rgba(11, 18, 32, 0.4) !important; }
  .test-item ul li{ background: #f9fafb !important; }
  body.dark-mode .test-item ul li{ background: #242428 !important; }
  .progress-container{ background: #f1f5f9 !important; }
  body.dark-mode .progress-container{ background: #1a1a1d !important; }
  .progress-counter{ background: #ffffff !important; }
  body.dark-mode .progress-counter{ background: #242428 !important; }
  .tool,
  .test-item,
  .modal .content,
  .modal .topics,
  .cb-list{ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important; }
  body.dark-mode .tool,
  body.dark-mode .test-item,
  body.dark-mode .modal .content,
  body.dark-mode .modal .topics,
  body.dark-mode .cb-list{ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important; }
  .test-item:hover{ box-shadow: 0 8px 20px rgba(14, 165, 233, 0.12) !important; }
  .progress-container,
  .fab{ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important; }
  .progress-green,
  .progress-red{ box-shadow: none !important; }
  body::before,
  .test-item::before,
  h1::after,
  .fab::before{ display: none !important; }
  .tool:hover,
  .test-item:hover,
  .test-item ul li:hover,
  .cb-item:hover,
  .divforarchive:hover,
  .discussion-btn:hover,
  .explain-btn:hover,
  .dark-mode-toggle:hover,
  .fab:hover,
  .close-x:hover,
  .close:hover,
  .subject__btn:hover,
  .topic-pill:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .ex-others details:hover,
  .as-item:hover{ transform: none !important; }
  .test-item:hover,
  .test-item.inactive:hover{ transform: translateY(-4px) !important; }
  .tool,
  .test-item,
  .test-item ul li,
  .cb-item,
  .divforarchive,
  .discussion-btn,
  .explain-btn,
  .dark-mode-toggle,
  .fab,
  .close-x,
  .subject__btn,
  .topic-pill,
  .btn,
  .ex-others details{ transition-duration: 0.15s !important; }
  .progress-green,
  .progress-red{ transition-duration: 0.4s !important; }
  body,
  .container,
  h1,
  .toolbar,
  .test-item,
  .progress-counter,
  .modal,
  .modal .content,
  .cb-list,
  .as-pop{ animation: none !important; }
  .test-item ul li.correct{ animation: none !important; }
  .test-item ul li.incorrect{ animation: none !important; }
  .test-item ul li.correct::after{ animation: none !important; }
  .test-item ul li.incorrect::after{ animation: none !important; }
  .dark-mode-toggle{ animation: none !important; }
  .dark-mode-toggle:hover #mode-icon{ transform: none !important; }
  .progress-green,
  .progress-red{ animation: none !important; }
  .test-item ul li.selected{ background: #dbeafe !important; }
  .test-item ul li.correct{ background: #d1fae5 !important; }
  .test-item ul li.incorrect{ background: #fee2e2 !important; }
  body.dark-mode .test-item ul li.selected{ background: #2e2e33 !important; }
  body.dark-mode .test-item ul li.correct{ background: rgba(74, 160, 110, 0.16) !important; }
  body.dark-mode .test-item ul li.incorrect{ background: rgba(220, 80, 80, 0.16) !important; }
  .test-item ul li:hover{ background: #e0f2fe !important; transform: none !important; }
  body.dark-mode .test-item ul li:hover{ background: var(--card-2) !important; }
  body.dark-mode .test-item ul li:hover{ background: #374151 !important; }
  .finish-btn{ background: #ef4444 !important; }
  .finish-btn:hover{ background: #dc2626 !important; transform: none !important; }
  .progress-green{ background: #10b981 !important; }
  .progress-red{ background: #ef4444 !important; }
  .question-number{ background: rgba(14, 165, 233, 0.1) !important; }
  body.dark-mode .question-number{ background: rgba(14, 165, 233, 0.15) !important; }
  .test-meta .chip{ background: #f1f5f9 !important; }
  body.dark-mode .test-meta .chip{ background: #1f2937 !important; }
}
@media (max-width: 480px) and (max-height: 800px){
  .tool,
  .test-item,
  .modal .content{ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; }
  body.dark-mode .tool,
  body.dark-mode .test-item,
  body.dark-mode .modal .content{ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; }
  .finish-btn{ background: #ef4444 !important; }
  .test-item{ padding: 18px 16px 64px !important; }
  .test-item ul li{ padding: 12px 16px !important; }
}
@media (max-width: 900px) and (max-height: 500px){
  .test-item{ margin-bottom: 20px !important; padding: 18px 16px 60px !important; }
}
.test-content--locked .test-item{ opacity: 0.5; pointer-events: none; }