/* ============================================================
   ФІЧІ ТЕСТУ — СПІЛЬНІ СТИЛІ (модалки + кнопки-дії)
   ------------------------------------------------------------
   Пояснення / схожі / препарат / двійник / макро-мікро / фарма.
   Використовують: сторінка тесту (krokTestView) і вкладка «Архів» (хаб).
   Винесено з inline-<style> krokTestView, щоб не тримати дві копії.
============================================================ */

/* Scroll anchoring лишаємо НАТИВНИМ (overflow-anchor:auto за замовч.): браузер тримає позицію
   при вставці/видаленні зверху на рівні композитора — плавно, не вбиваючи інерцію флику.
   Ручний scrollT+= робимо ЛИШЕ як fallback там, де нативного нема (Safari/iOS) — див. anchorTo. */

/* нижній ряд дій тесту: пояснення зліва, схожі тести — праворуч, на одному рівні */
.test-actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.test-actions .explain-btn{margin-top:0 !important}
.similar-btn{margin-left:auto;position:static;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;background:none;border:none;cursor:pointer;border-radius:10px;transition:background .15s}
.similar-btn:hover{background:rgba(29,78,216,.10)}
.similar-btn img{width:22px;height:22px;display:block}

/* кнопка препаратів патанатомії (макро/мікро) */
.spec-btn{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;background:none;border:none;cursor:pointer;border-radius:10px;color:#9333ea;transition:background .15s}
.spec-btn:hover{background:rgba(147,51,234,.10);color:#7e22ce}
body.dark-mode .spec-btn{color:#c4b5fd}
body.dark-mode .spec-btn:hover{background:rgba(196,181,253,.16)}
.spec-btn svg{width:22px;height:22px;display:block}

/* модалка препаратів патанатомії */
#specModal .content.spec-modal{position:relative;display:flex;flex-direction:column;width:min(680px,94vw);max-height:88vh;padding:0;border-radius:18px;overflow:hidden;background:#fff}
body.dark-mode #specModal .content.spec-modal{background:#161618;color:#f4f4f5}
/* хрестик закріплений у куті картки (картка не скролиться — скролиться лише #specScroll); заголовок у скролі */
#specModal .spec-close{position:absolute;top:8px;right:10px;z-index:6;width:30px;height:30px;display:grid;place-items:center;background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.12)}
body.dark-mode #specModal .spec-close{background:rgba(15,23,42,.88)}
.spec-titlebar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-right:34px}
.spec-mark{color:#9333ea;flex:none}
.spec-head-txt{min-width:0;flex:1}
.spec-name{font-weight:800;font-size:16px}
.spec-sub{font-size:12.5px;color:#6b7280;margin-top:2px}
#specScroll{padding:14px 16px;overflow:auto;flex:1 1 auto;min-height:0}
.spec-card{border:1px solid #e2e6ef;border-radius:14px;overflow:hidden;margin-bottom:14px;background:#fff}
body.dark-mode .spec-card{background:#1a1a1d;border-color:#242428}
.spec-card:last-child{margin-bottom:0}
.spec-card-img{display:block;width:100%;max-height:60vh;object-fit:contain;background:#0b0f19;cursor:zoom-in}
.spec-card-img.zoomed{max-height:none;cursor:zoom-out}
.spec-card-body{padding:10px 13px}
.spec-tag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;border-radius:6px;padding:3px 9px;margin-bottom:6px}
.spec-tag.macro{background:#dc2626}
.spec-tag.micro{background:#7c3aed}
.spec-card-label{font-weight:700;font-size:14.5px;line-height:1.3}
.spec-ai{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:6px;padding:2px 8px;margin-top:8px}
.spec-ai svg{flex:none;display:block}
body.dark-mode .spec-ai{color:#c4b5fd;background:rgba(196,181,253,.12);border-color:#6d28d9}
.spec-card-desc{font-size:13px;color:#6b7280;margin-top:5px;line-height:1.5;white-space:pre-line}
.spec-empty{font-size:13.5px;color:#6b7280;padding:22px;text-align:center}
@media(max-width:560px){
  #specModal .content.spec-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
}
body.dark-mode .similar-btn:hover{background:rgba(147,197,253,.15)}

/* кнопка препарату фармакології — як .drug-btn у «Інше» (індиго, та сама пігулка) */
.pharm-btn{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;background:none;border:none;cursor:pointer;border-radius:10px;color:#6366f1;transition:background .15s}
.pharm-btn:hover{background:rgba(99,102,241,.10);color:#4f46e5}
body.dark-mode .pharm-btn{color:#e4e4e7}
body.dark-mode .pharm-btn:hover{background:rgba(165,180,252,.16)}
.pharm-btn svg{width:22px;height:22px;display:block}

/* модалка фарм-препарата — КЛОН .dq-modal з «Інше» (ті самі класи/кольори), лише трохи ширша на ПК */
#pharmModal .dq-modal{display:flex;flex-direction:column;width:min(780px,94vw);max-height:88vh;padding:0;border-radius:16px;overflow:hidden;background:#fff}
body.dark-mode #pharmModal .dq-modal{background:#161618}
#pharmTheory{display:flex;flex-direction:column;gap:10px}
/* приховані секції (Протипоказання/Побічні) — розкривні, у тих же індигових тонах dq-th */
.dq-th-col{margin:0}
.dq-th-col>summary{cursor:pointer;list-style:none;outline:none;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6366f1}
.dq-th-col>summary::-webkit-details-marker{display:none}
.dq-th-col>summary::before{content:"+";color:#6366f1;font-weight:700}
.dq-th-col[open]>summary::before{content:"–"}
.dq-th-col[open]>summary{margin-bottom:7px}
body.dark-mode .dq-th-col>summary,body.dark-mode .dq-th-col>summary::before{color:#e4e4e7}
/* бейдж року тесту */
.ph-year{display:inline-block;font-size:11px;font-weight:800;color:#4338ca;background:#eef2ff;border-radius:7px;padding:4px 10px;margin-bottom:8px}
body.dark-mode .ph-year{color:#e4e4e7;background:#242428}
/* секція тестів */
.ph-tests-h{font-weight:800;font-size:14px;margin-bottom:2px}
.dq-modes.ph-submodes{margin:8px 0 10px}
.ph-test{border:1px solid #e2e6ef;border-radius:12px;padding:10px 12px;margin-top:9px;background:#fff}
body.dark-mode .ph-test{background:#1a1a1d;border-color:#242428}
.ph-test.current{border-color:#6366f1;box-shadow:0 0 0 1px #6366f1 inset}
.ph-test-meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.ph-test-yr{font-size:10.5px;font-weight:800;color:#4338ca;background:#eef2ff;border-radius:6px;padding:2px 8px}
body.dark-mode .ph-test-yr{color:#e4e4e7;background:#242428}
.ph-test-cur{font-size:10.5px;font-weight:800;color:#fff;background:#6366f1;border-radius:6px;padding:2px 8px}
.ph-test-q{font-size:13.5px;line-height:1.5;color:#1e293b}
body.dark-mode .ph-test-q{color:#f4f4f5}
.ph-opts{list-style:none;margin:8px 0 0;padding:0}
.ph-opts li{border:1px solid #e2e8f0;border-radius:9px;padding:8px 11px;margin:5px 0;font-size:13px;line-height:1.4;color:#1e293b}
body.dark-mode .ph-opts li{border-color:#242428;color:#f4f4f5}
.ph-opts.practice li{cursor:pointer;transition:.12s}
.ph-opts.practice li:hover{border-color:#6366f1}
.ph-opts li.correct{border-color:#16a34a;background:#f0fdf4;color:#15803d;font-weight:600}
.ph-opts li.wrong{border-color:#dc2626;background:#fef2f2;color:#b91c1c}
body.dark-mode .ph-opts li.correct{background:rgba(74,160,110,.16);color:#9ed4b4}
body.dark-mode .ph-opts li.wrong{background:rgba(220,38,38,.16);color:#fca5a5}
.ph-lock{text-align:center;padding:26px 18px}
.ph-lock p{font-size:14px;color:#475569;margin:0 0 14px}
.ph-lock a{display:inline-block;background:#6366f1;color:#fff;font-weight:700;text-decoration:none;border-radius:10px;padding:10px 20px}
.ph-empty{font-size:13.5px;color:#6b7280;padding:22px;text-align:center}
@media(max-width:560px){
  #pharmModal .dq-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;overflow-y:auto}
  #pharmModal .dq-head{position:static}
  #pharmModal .dq-scroll{flex:0 0 auto;overflow:visible}
}

/* ── Кнопка препарату ────────────────────────────────────────────── */
.drug-btn{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;line-height:0;background:none;border:none;cursor:pointer;color:#6366f1;
  border-radius:9px;transition:background .15s,color .15s}
.drug-btn:hover{background:rgba(99,102,241,.10);color:#4f46e5}
body.dark-mode .drug-btn{color:#e4e4e7}
body.dark-mode .drug-btn:hover{background:rgba(165,180,252,.16)}

/* ── Фарм-панель: перемикач збірника + режиму ────────────────────── */
.pharma-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 16px}
.pharma-seg{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#f1f5f9;border-radius:12px}
.pharma-seg__label{font-size:12px;font-weight:600;color:#64748b;padding:0 6px 0 8px}
.pharma-seg__btn,.pharma-mode__btn{border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:#475569;padding:7px 14px;border-radius:9px;line-height:1;text-decoration:none;
  transition:background .15s,color .15s,box-shadow .15s}
.pharma-seg__btn:hover,.pharma-mode__btn:hover{color:#1e293b}
.pharma-seg__btn.is-active,.pharma-mode__btn.is-active{background:#fff;color:#4338ca;box-shadow:0 1px 3px rgba(15,23,42,.10)}
body.dark-mode .pharma-seg{background:#242428}
body.dark-mode .pharma-seg__label{color:#94a3b8}
body.dark-mode .pharma-seg__btn,body.dark-mode .pharma-mode__btn{color:#d4d4d8}
body.dark-mode .pharma-seg__btn.is-active,body.dark-mode .pharma-mode__btn.is-active{background:#161618;color:#e4e4e7}

/* ── Панель «Рандомні 50» ────────────────────────────────────────── */
.rand50-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 16px}
.rand50-btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;padding:9px 16px;border-radius:11px;
  background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 6px 16px rgba(79,70,229,.26);transition:.15s}
.rand50-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,70,229,.32)}
.rand50-btn--ghost{background:#f1f5f9;color:#475569;box-shadow:none}
.rand50-btn--ghost:hover{background:#e7ebf1;transform:none}
body.dark-mode .rand50-btn--ghost{background:#242428;color:#d4d4d8}
.rand50-hint{font-size:12px;color:#94a3b8}
.rand50-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#4338ca;
  background:#eef2ff;border:1px solid #c7d2fe;padding:7px 12px;border-radius:10px}
body.dark-mode .rand50-badge{background:#242428;border-color:#3a3a40;color:#e4e4e7}

/* Режим «Перегляд»: правильна відповідь підсвічена одразу, кліки вимкнені */
#test-container.pv-view .test-item ul li{cursor:default}
#test-container.pv-view .test-item ul li[data-correct="1"]{
  background:rgba(22,163,74,.12);border-color:#16a34a;color:#15803d;font-weight:600}
body.dark-mode #test-container.pv-view .test-item ul li[data-correct="1"]{
  background:rgba(34,197,94,.18);border-color:#22c55e;color:#86efac}

/* ── Кнопка тесту-двійника ───────────────────────────────────────── */
.twin-btn{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;line-height:0;background:none;border:none;cursor:pointer;color:#0ea5e9;
  border-radius:9px;transition:background .15s,color .15s}
.twin-btn:hover{background:rgba(14,165,233,.10);color:#0284c7}
body.dark-mode .twin-btn{color:#7dd3fc}
body.dark-mode .twin-btn:hover{background:rgba(125,211,252,.16)}

/* ── Модалка тесту-двійника ──────────────────────────────────────── */
/* Уся картка скролиться як єдине ціле: голова (Збірник + перемикачі) зверху,
   CTA знизу — НЕ фіксовані, прокручуються разом із вмістом. */
#twinModal .tw-modal{display:flex;flex-direction:column;width:min(600px,94vw);max-height:88vh;
  padding:0;border-radius:16px;overflow-y:auto;background:#fff}
body.dark-mode #twinModal .tw-modal{background:#161618}
.tw-head{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;padding:9px 11px;
  border-bottom:1px solid #eceff5;background:#fff}
body.dark-mode .tw-head{background:#161618;border-color:#242428}
.tw-head-top{display:flex;align-items:center;gap:8px}
.tw-mark{flex:0 0 auto;color:#0ea5e9}
body.dark-mode .tw-mark{color:#7dd3fc}
.tw-name{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;color:#0f172a;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.dark-mode .tw-name{color:#f1f5f9}
.tw-head-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.tw-sub{flex:1 1 auto;min-width:0;font-size:10.5px;color:#94a3b8;line-height:1.3}
.tw-modes{flex:0 0 auto;display:inline-flex;gap:2px;padding:2px;background:#f1f5f9;border-radius:8px}
body.dark-mode .tw-modes{background:#242428}
.tw-mode{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;
  color:#64748b;padding:5px 10px;border-radius:6px;line-height:1;white-space:nowrap;transition:.15s}
.tw-mode.is-active{background:#fff;color:#0284c7;box-shadow:0 1px 2px rgba(15,23,42,.10)}
body.dark-mode .tw-mode.is-active{background:#161618;color:#7dd3fc}
#twinScroll{flex:0 0 auto;overflow:visible;padding:13px 14px}
.tw-q{font-size:13.5px;line-height:1.5;font-weight:600;color:#0f172a;margin-bottom:11px}
body.dark-mode .tw-q{color:#f4f4f5}
.tw-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.tw-opts li{border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.4;
  color:#1e293b;cursor:pointer;transition:.13s}
.tw-opts li:hover{border-color:#0ea5e9;background:#f0f9ff}
.tw-opts li.tw-correct{border-color:#16a34a;background:#f0fdf4;color:#15803d;font-weight:600;cursor:default}
.tw-opts li.tw-wrong{border-color:#dc2626;background:#fef2f2;color:#b91c1c;cursor:default}
.tw-opts li.tw-locked{cursor:default}
body.dark-mode .tw-opts li{border-color:#242428;color:#d4d4d8}
body.dark-mode .tw-opts li:hover{border-color:#0ea5e9;background:#0c2330}
body.dark-mode .tw-opts li.tw-correct{background:rgba(74,160,110,.16);border-color:#6fae8c;color:#9ed4b4}
body.dark-mode .tw-opts li.tw-wrong{background:rgba(248,113,113,.16);border-color:#f87171;color:#fca5a5}
.tw-empty{padding:30px 10px;text-align:center;color:#94a3b8;font-size:13.5px}
/* Пояснення двійника (інлайн, як у схожих тестах) */
.tw-expl-actions{margin-top:12px}
.tw-explain-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;background:#f8fafc;
  color:#1d4ed8;border-radius:9px;padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.tw-explain-btn img{width:16px;height:16px}
.tw-explain-btn:hover{background:#eff6ff;border-color:#bfdbfe}
.tw-explain-btn:disabled{opacity:.6;cursor:default}
body.dark-mode .tw-explain-btn{background:#161618;border-color:#242428;color:#93c5fd}
.tw-expl{margin-top:11px;border-top:1px dashed #e2e8f0;padding-top:11px;font-size:13.5px}
body.dark-mode .tw-expl{border-top-color:#242428}
.tw-cta{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;border-top:1px solid #eceff5;background:linear-gradient(135deg,#eff6ff,#eef2ff)}
body.dark-mode .tw-cta{background:#161618;border-color:#242428}
.tw-cta__txt{font-size:12.5px;font-weight:600;color:#334155}
body.dark-mode .tw-cta__txt{color:#d4d4d8}
.tw-cta__btn{flex:0 0 auto;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:10px;box-shadow:0 6px 16px rgba(79,70,229,.26);transition:.15s}
.tw-cta__btn:hover{transform:translateY(-1px)}

/* Мобільний вигляд модалки тесту-двійника — на весь екран (як модалка препарату) */
@media (max-width:600px){
  #twinModal .tw-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .tw-head{padding:10px 12px calc(10px + env(safe-area-inset-top, 0px));gap:6px}
  .tw-name{font-size:13px}
  .tw-sub{font-size:10.5px;flex-basis:100%}          /* «схожість» на власному рядку */
  .tw-modes{margin-left:auto}
  .tw-mode{font-size:11px;padding:6px 11px}
  #twinScroll{padding:13px 14px}
  .tw-q{font-size:13px;margin-bottom:11px}
  .tw-opts li{font-size:12.5px;padding:11px 12px;border-radius:10px}
  .tw-explain-btn{font-size:12px;padding:7px 11px}
  .tw-expl{font-size:13px}
  .tw-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));gap:7px}
  .tw-cta__txt{font-size:11.5px}
  .tw-cta__btn{font-size:11.5px;padding:9px 13px}
}

/* ── Модалка препарату (компактний редизайн) ─────────────────────── */
#drugModal .dq-modal{display:flex;flex-direction:column;width:min(720px,94vw);max-height:88vh;
  padding:0;border-radius:16px;overflow:hidden;background:#fff}
body.dark-mode #drugModal .dq-modal{background:#161618}

.dq-head{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:11px 12px 11px 14px;
  border-bottom:1px solid #eceff5;background:#fff}
body.dark-mode .dq-head{background:#161618;border-color:#242428}
.dq-mark{flex:0 0 auto;color:#6366f1;margin-top:1px}
body.dark-mode .dq-mark{color:#e4e4e7}
.dq-head-txt{min-width:0;flex:1 1 auto}
.dq-name{font-size:14.5px;font-weight:700;color:#0f172a;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.dark-mode .dq-name{color:#f1f5f9}
.dq-sub{margin-top:1px;font-size:11px;color:#94a3b8;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dq-close{flex:0 0 auto;width:28px;height:28px;border:none;background:none;color:#94a3b8;font-size:21px;
  line-height:1;cursor:pointer;border-radius:7px;display:grid;place-items:center;transition:.15s}
.dq-close:hover{background:#f1f5f9;color:#0f172a}
body.dark-mode .dq-close:hover{background:#242428;color:#f4f4f5}

/* Перемикач Квіз / Теорія */
.dq-modes{flex:0 0 auto;display:inline-flex;gap:2px;margin:10px 12px 0;padding:3px;background:#f1f5f9;border-radius:9px;align-self:flex-start}
body.dark-mode .dq-modes{background:#242428}
.dq-mode{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;
  color:#64748b;padding:6px 16px;border-radius:7px;line-height:1;transition:.15s}
.dq-mode.is-active{background:#fff;color:#4338ca;box-shadow:0 1px 2px rgba(15,23,42,.10)}
body.dark-mode .dq-mode{color:#d4d4d8}
body.dark-mode .dq-mode.is-active{background:#161618;color:#e4e4e7}

/* Вкладка «Теорія» — повна інформація про препарат */
#drugTheory{display:flex;flex-direction:column;gap:10px}
.dq-th-sec{background:#fff;border:1px solid #eceff5;border-radius:12px;padding:11px 13px}
body.dark-mode .dq-th-sec{background:#1a1a1d;border-color:#242428}
.dq-th-h{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6366f1;margin-bottom:6px}
body.dark-mode .dq-th-h{color:#e4e4e7}
.dq-th-text{margin:0;font-size:13.5px;line-height:1.55;color:#1e293b}
body.dark-mode .dq-th-text{color:#d4d4d8}
.dq-th-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.dq-th-list li{font-size:13px;line-height:1.45;color:#1e293b}
body.dark-mode .dq-th-list li{color:#d4d4d8}
.dq-th-empty{padding:24px 10px;text-align:center;color:#94a3b8;font-size:13.5px}
/* Пункт ефекту/показання з клікабельним Поясненням */
.dq-th-d{margin:0}
.dq-th-d>summary{cursor:pointer;list-style:none;outline:none;display:flex;align-items:flex-start;gap:6px}
.dq-th-d>summary::-webkit-details-marker{display:none}
.dq-th-d>summary::before{content:"+";flex:0 0 auto;color:#6366f1;font-weight:700;line-height:1.45}
.dq-th-d[open]>summary::before{content:"–"}
.dq-th-it{flex:1 1 auto}
.dq-th-ai{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#4338ca;background:#eef2ff;
  border:1px solid #c7d2fe;border-radius:6px;padding:1px 6px;line-height:1.5;margin-top:1px}
body.dark-mode .dq-th-ai{background:#242428;border-color:#3a3a40;color:#e4e4e7}
.dq-th-d .dq-expl-body{margin-top:6px;padding-left:19px}

.dq-scroll{flex:1 1 auto;overflow-y:auto;padding:12px;background:#f7f8fb}
body.dark-mode .dq-scroll{background:#0f0f11}

/* Питання */
.dq-q{background:#fff;border:1px solid #eceff5;border-radius:12px;
  padding:11px 12px;margin-bottom:10px}
body.dark-mode .dq-q{background:#1a1a1d;border-color:#242428}
.dq-q-head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.dq-num{flex:0 0 auto;width:19px;height:19px;border-radius:6px;background:#eef2ff;color:#4338ca;
  font-size:11px;font-weight:700;display:grid;place-items:center}
body.dark-mode .dq-num{background:#242428;color:#e4e4e7}
.dq-q-title{font-size:13px;font-weight:700;color:#0f172a;line-height:1.3}
body.dark-mode .dq-q-title{color:#f4f4f5}
.dq-tag{flex:0 0 auto;margin-left:auto;font-size:10px;font-weight:600;color:#94a3b8;
  border:1px solid #e6e9f0;border-radius:20px;padding:1px 8px;white-space:nowrap}
body.dark-mode .dq-tag{border-color:#283449;color:#7c8aa3}

.dq-opts{display:flex;flex-direction:column;gap:5px}
.dq-opt{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border:1px solid #e6e9f0;border-radius:9px;
  background:#fff;cursor:pointer;transition:.12s;-webkit-tap-highlight-color:transparent}
.dq-opt:hover{border-color:#c7d2fe;background:#f5f7ff}
body.dark-mode .dq-opt{background:#0f1729;border-color:#26324a}
body.dark-mode .dq-opt:hover{border-color:#3a3a40}
.dq-box{flex:0 0 auto;width:17px;height:17px;border:1.8px solid #cbd5e1;display:grid;place-items:center;
  margin-top:1px;color:#fff;font-size:11px;font-weight:700;line-height:1;transition:.12s}
.dq-opt[data-type="multi"] .dq-box{border-radius:5px}
.dq-opt[data-type="single"] .dq-box{border-radius:50%}
.dq-opt-body{min-width:0;flex:1 1 auto}
.dq-main{display:block;font-size:12.5px;line-height:1.4;color:#1e293b}
body.dark-mode .dq-main{color:#d4d4d8}

.dq-opt.sel{border-color:#4f46e5;background:#eef2ff}
.dq-opt.sel .dq-box{background:#4f46e5;border-color:#4f46e5}
.dq-opt.sel .dq-box::after{content:"✓"}
body.dark-mode .dq-opt.sel{background:#242428;border-color:#52525b}

/* стани після перевірки */
.dq-opt.ok{border-color:#16a34a;background:#f0fdf4}
.dq-opt.ok .dq-box{background:#16a34a;border-color:#16a34a}
.dq-opt.ok .dq-box::after{content:"✓"}
.dq-opt.bad{border-color:#dc2626;background:#fef2f2}
.dq-opt.bad .dq-box{background:#dc2626;border-color:#dc2626}
.dq-opt.bad .dq-box::after{content:"✕"}
.dq-opt.miss{border-color:#16a34a;border-style:dashed;background:transparent}
.dq-opt.miss .dq-box{border-color:#16a34a;background:transparent;color:#16a34a}
.dq-opt.miss .dq-box::after{content:"✓"}
body.dark-mode .dq-opt.ok{background:rgba(74,160,110,.14)}
body.dark-mode .dq-opt.bad{background:rgba(220,38,38,.14)}
.dq-q.locked .dq-opt{cursor:default}

/* пояснення ШІ під питанням */
.dq-qexpl{margin-top:9px;border-top:1px dashed #e6e9f0;padding-top:9px}
body.dark-mode .dq-qexpl{border-color:#283449}
.dq-expl-h{font-size:11px;font-weight:700;color:#4338ca;margin:0 0 7px;letter-spacing:.03em;text-transform:uppercase}
body.dark-mode .dq-expl-h{color:#e4e4e7}
.dq-expl details{background:#f7f8fb;border:1px solid #eceff5;border-radius:9px;padding:7px 10px;margin-bottom:6px}
body.dark-mode .dq-expl details{background:#0f1729;border-color:#26324a}
.dq-expl summary{cursor:pointer;font-size:12.5px;font-weight:600;color:#0f172a;list-style:none;outline:none}
.dq-expl summary::-webkit-details-marker{display:none}
.dq-expl summary::before{content:"+";display:inline-block;width:13px;color:#6366f1;font-weight:700}
.dq-expl details[open] summary::before{content:"–"}
body.dark-mode .dq-expl summary{color:#f4f4f5}
.dq-expl-body{margin-top:7px;font-size:11.5px;line-height:1.5;color:#475569}
body.dark-mode .dq-expl-body{color:#aab8cd}
.dq-expl-body p{margin:0 0 6px}
.dq-expl-body b{color:#0f172a}
body.dark-mode .dq-expl-body b{color:#f1f5f9}

/* футер */
.dq-footer{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-top:1px solid #eceff5;background:#fff}
body.dark-mode .dq-footer{background:#161618;border-color:#242428}
.dq-score{flex:1 1 auto;font-size:12.5px;font-weight:700;color:#0f172a}
body.dark-mode .dq-score{color:#f4f4f5}
.dq-btn{flex:0 0 auto;border:none;border-radius:9px;padding:9px 18px;font-size:13px;font-weight:700;
  color:#fff;cursor:pointer;background:#4f46e5;transition:background .15s}
.dq-btn:hover{background:#4338ca}
.dq-btn:disabled{opacity:.55;cursor:default}

/* пейвол / стани */
.dq-paywall{text-align:center;padding:26px 16px}
.dq-paywall svg{color:#6366f1;margin-bottom:10px}
.dq-paywall h4{margin:0 0 7px;font-size:15px;font-weight:700;color:#0f172a}
body.dark-mode .dq-paywall h4{color:#f1f5f9}
.dq-paywall p{margin:0 auto 14px;max-width:380px;font-size:12.5px;line-height:1.55;color:#64748b}
body.dark-mode .dq-paywall p{color:#94a3b8}
.dq-paywall a{display:inline-block;text-decoration:none;border-radius:9px;padding:9px 18px;font-size:13px;
  font-weight:700;color:#fff;background:#4f46e5}
.dq-paywall a:hover{background:#4338ca}
.dq-empty{text-align:center;color:#94a3b8;padding:28px 16px;font-size:13px}

@media (max-width:600px){
  /* На телефоні модалка — на весь екран і скролиться ЦІЛКОМ: назва, перемикач
     Квіз/Теорія та кнопка «Перевірити» не фіксовані — вони зверху/знизу й
     прокручуються разом із вмістом. */
  #drugModal .dq-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;overflow-y:auto}
  #drugModal .dq-head{position:static}
  #drugModal .dq-scroll{flex:0 0 auto;overflow:visible}
  .dq-footer{flex:0 0 auto;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
}

/* категорії пошуку */
.sim-catbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.sim-cat-btn{flex:1 1 auto;border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:10px;
  padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.sim-cat-btn.active{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.sim-cat-btn:hover{border-color:#c7d2fe}
body.dark-mode .sim-cat-btn{background:#161618;border-color:#242428;color:#d4d4d8}
body.dark-mode .sim-cat-btn.active{background:#242428;border-color:#3a3a40;color:#e4e4e7}

.sim-meta{margin:0 0 10px;color:#64748b;font-size:13px}
.sim-meta b{color:#0f172a}
body.dark-mode .sim-meta{color:#94a3b8}
body.dark-mode .sim-meta b{color:#f1f5f9}

.sim-modebar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.sim-mode-btn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;
  padding:5px 14px;font-size:13px;font-weight:600;cursor:pointer}
.sim-mode-btn.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.sim-mode-btn:disabled{opacity:.45;cursor:not-allowed}
.sim-mode-hint a{font-size:12px;color:#1d4ed8;text-decoration:underline}
body.dark-mode .sim-mode-btn{background:#161618;border-color:#3a3a40;color:#d4d4d8}
body.dark-mode .sim-mode-btn.active{background:#2563eb;border-color:#2563eb;color:#fff}
body.dark-mode .sim-mode-hint a{color:#93c5fd}

/* елементи — мінімалістично (як на сторінці), без важких карток у картці */
.sim-item{padding:12px 2px;border-bottom:1px solid #eef2f7}
.sim-item:last-of-type{border-bottom:none}
body.dark-mode .sim-item{border-bottom-color:#242428}
.sim-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sim-item-tag{font-size:11px;color:#94a3b8;font-weight:600;letter-spacing:.02em}
.sim-item-q{font-size:15px;line-height:1.45;color:#0f172a;margin:0 0 10px}
body.dark-mode .sim-item-q{color:#f4f4f5}
.sim-item ul{list-style:none;padding:0;margin:0}
.sim-item ul li{border:1px solid #e2e8f0;border-radius:10px;padding:9px 12px;margin-bottom:7px;font-size:14px;line-height:1.4}
body.dark-mode .sim-item ul li{border-color:#242428;color:#d4d4d8}
.sim-item ul li.clickable{cursor:pointer}
.sim-item ul li.clickable:hover{background:#f8fafc}
body.dark-mode .sim-item ul li.clickable:hover{background:#161618}
.sim-item ul li.correct{background:#dcfce7;border-color:#86efac;color:#166534}
.sim-item ul li.incorrect{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
body.dark-mode .sim-item ul li.correct{background:#20382b;border-color:#6fae8c;color:#cfe9d9}
body.dark-mode .sim-item ul li.incorrect{background:#7f1d1d;border-color:#ef4444;color:#fee2e2}
.sim-item .divforarchive{margin-left:auto}

.sim-more{text-align:center;margin-top:12px}
.sim-more-btn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:10px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer}
.sim-more-btn:hover{background:#f1f5f9}
body.dark-mode .sim-more-btn{background:#161618;border-color:#3a3a40;color:#d4d4d8}

.sim-empty{color:#94a3b8;text-align:center;padding:24px 0;font-size:14px}
.sim-paywall{border:1px dashed #fbbf24;background:#fffbeb;border-radius:12px;padding:16px;text-align:center;color:#92400e;margin-top:12px}
body.dark-mode .sim-paywall{background:#1c1917;border-color:#a16207;color:#fcd34d}
.sim-paywall a{color:inherit;font-weight:700;text-decoration:underline}

/* Пояснення в схожих тестах */
.sim-item-actions{margin-top:8px}
.sim-explain-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;background:#f8fafc;color:#1d4ed8;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer}
.sim-explain-btn img{width:16px;height:16px}
.sim-explain-btn:hover{background:#eff6ff;border-color:#bfdbfe}
.sim-explain-btn:disabled{opacity:.6;cursor:default}
body.dark-mode .sim-explain-btn{background:#161618;border-color:#242428;color:#93c5fd}
.sim-expl{margin-top:10px;border-top:1px dashed #e2e8f0;padding-top:10px;font-size:14px}
body.dark-mode .sim-expl{border-top-color:#242428}

/* ── компактна модалка «Налаштувати теми» ── */
#topicsModal .topics{width:min(640px,94vw)}
#topicsModal .topics__header{padding:12px 16px;gap:10px}
#topicsModal .topics__title{font-size:16px}
#topicsModal .topics__search{padding:7px 12px}
#topicsModal .topics__body{padding:12px 14px}
#topicsModal .subject{border-radius:12px;margin-bottom:10px;box-shadow:none}
#topicsModal .subject__head{padding:9px 12px}
#topicsModal .subject__name{font-size:14px}
#topicsModal .subject__body{padding:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
#topicsModal .topic-pill{padding:7px 10px;border-radius:10px;gap:8px;box-shadow:none}
#topicsModal .topic-pill:hover{transform:none;box-shadow:none}
#topicsModal .topic-pill input{width:16px;height:16px;margin-top:1px;transform:translateY(1px)}
#topicsModal .topic-pill span{font-size:12.5px;line-height:1.25;font-weight:500}
#topicsModal .topics__footer{padding:10px 14px}
#topicsModal .footer__left{font-size:13px}
/* ===== «ОБРАНІ ТЕМИ» — телефон: компактно, дрібним і акуратним шрифтом ===== */
/* id-селектори з !important перекривають clamp()-правила з main.css (≤900/≤480) */
@media (max-width:640px){
  /* модалка як нижній лист майже на весь екран */
  #topicsModal{align-items:flex-end !important;}
  #topicsModal .topics{
    width:100% !important;
    height:94vh !important;
    max-height:94vh !important;
    border-radius:18px 18px 0 0 !important;
  }

  /* шапка */
  #topicsModal .topics__header{padding:10px 12px !important;gap:8px !important;}
  #topicsModal .topics__title{font-size:15px !important;}
  #topicsModal .topics__search{padding:6px 10px !important;gap:6px !important;}
  #topicsModal .topics__search input{font-size:13px !important;}
  #topicsModal .topics__close{font-size:18px !important;}

  /* тіло */
  #topicsModal .topics__body{padding:10px !important;}

  /* предмет: назва+лічильник зверху, кнопки дій — окремим рядком */
  #topicsModal .subject{border-radius:12px !important;margin-bottom:8px !important;}
  #topicsModal .subject__head{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:9px 11px !important;
  }
  #topicsModal .subject__left{gap:8px !important;min-width:0 !important;}
  #topicsModal .subject__name{font-size:13.5px !important;line-height:1.2 !important;}
  #topicsModal .badge{font-size:11px !important;padding:3px 8px !important;}
  #topicsModal .subject__actions{gap:6px !important;}
  #topicsModal .subject__btn{font-size:11px !important;padding:6px 10px !important;flex:1 1 0;}

  /* теми: один стовпець, акуратні рядки, довгі назви переносяться */
  #topicsModal .subject__body{grid-template-columns:1fr !important;gap:6px !important;padding:9px !important;}
  #topicsModal .topic-pill{
    align-items:flex-start !important;
    gap:8px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  #topicsModal .topic-pill input{width:16px !important;height:16px !important;margin-top:1px !important;transform:none !important;}
  #topicsModal .topic-pill span{
    font-size:12px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
  }

  /* футер */
  #topicsModal .topics__footer{padding:9px 12px !important;gap:8px !important;}
  #topicsModal .footer__left{font-size:12px !important;}
  #topicsModal .footer__actions{gap:8px !important;}
  #topicsModal .btn{font-size:12.5px !important;padding:8px 14px !important;}
}

/* зовсім вузькі екрани — ще дрібніше */
@media (max-width:380px){
  #topicsModal .topics__title{font-size:14px !important;}
  #topicsModal .subject__name{font-size:13px !important;}
  #topicsModal .topic-pill span{font-size:11.5px !important;}
  #topicsModal .subject__btn{font-size:10.5px !important;}
}

/* ===== СХОЖІ ТЕСТИ — модалка на всю висоту екрана ===== */
/* .content — flex-колонка: заголовок угорі, нижче єдина прокручувана зона */
#similarModal .content{
  display:flex;
  flex-direction:column;
  max-height:92vh;          /* десктоп: висока, але росте по контенту */
  overflow:hidden;
}
/* Єдина прокручувана зона: метадані + тести скролляться РАЗОМ */
#similarModal .sim-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Метадані — окремий блок, БЕЗ sticky (не приклеєні до верху) */
#similarModal .sim-meta-wrap{
  position:static;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(226,232,240,.8);
}
body.dark-mode #similarModal .sim-meta-wrap{border-bottom-color:#242428}

/* телефон: на весь екран, без полів з боків */
@media (max-width:640px){
  /* padding:0 на самій підкладці — без нього лишалось поле 14px
     зліва й справа (з assets/common/modal.css), і «повноекранний»
     діалог насправді був вужчий за екран на 28px. */
  #similarModal{
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
  }
  #similarModal .content{
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:10px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }
  #similarModal h3{margin-bottom:6px !important; font-size:16px !important;}
  #similarModal .sim-meta-wrap{margin-bottom:7px !important; padding-bottom:5px !important;}
}

/* ── Кнопки дій під карткою: тач-ергономіка ────────────────────────
   .explain-btn / .similar-btn / .spec-btn / .pharm-btn / .drug-btn / .twin-btn
   ВІЗУАЛЬНО лишаються компактними (34–36px), але отримують:
   • зону дотику ≥44px (невидимий ::after, центрований, БЕЗ зсуву верстки);
   • явний відгук на натиск для тач-екранів (:active — на тапі :hover не спрацьовує);
   • видиму фокус-рамку для навігації з клавіатури.                              */
.explain-btn,.similar-btn,.spec-btn,.pharm-btn,.drug-btn,.twin-btn{position:relative}
.explain-btn::after,.similar-btn::after,.spec-btn::after,
.pharm-btn::after,.drug-btn::after,.twin-btn::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:inherit;pointer-events:none}
.explain-btn:active,.similar-btn:active,.spec-btn:active,
.pharm-btn:active,.drug-btn:active,.twin-btn:active{transform:scale(.9)}
.explain-btn:focus-visible,.similar-btn:focus-visible,.spec-btn:focus-visible,
.pharm-btn:focus-visible,.drug-btn:focus-visible,.twin-btn:focus-visible{
  outline:2px solid #6366f1;outline-offset:2px}
body.dark-mode .explain-btn:focus-visible,body.dark-mode .similar-btn:focus-visible,
body.dark-mode .spec-btn:focus-visible,body.dark-mode .pharm-btn:focus-visible,
body.dark-mode .drug-btn:focus-visible,body.dark-mode .twin-btn:focus-visible{
  outline-color:#a5b4fc}

/* ============================================================
   БАЗОВІ РОЗМІРИ КНОПОК-ДІЙ (пояснення / схожі / архів …)
   ------------------------------------------------------------
   Раніше жили в inline-<style> сторінки тесту, тож у ХАБІ (архів)
   їх не було — іконка пояснення розтягувалась на весь блок.
   Тримаємо тут, бо цими кнопками користуються обидві сторінки.
============================================================ */
.explain-btn,
.similar-btn,
.spec-btn,
.pharm-btn,
.drug-btn,
.twin-btn{
  position:static; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; flex:0 0 auto;
  background:none; border:none; cursor:pointer; border-radius:10px;
  transition:background .15s;
}
.explain-btn img, .similar-btn img,
.spec-btn img, .pharm-btn img, .drug-btn img, .twin-btn img{
  width:22px; height:22px; display:block; object-fit:contain;
}
.explain-btn svg, .similar-btn svg,
.spec-btn svg, .pharm-btn svg, .drug-btn svg, .twin-btn svg{
  width:22px; height:22px; display:block;
}
/* ряд віджетів у шапці картки (архів + пояснення + схожі) */
.vidgets_for_test{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.vidgets_for_test .divforarchive{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; cursor:pointer; border-radius:10px; flex:0 0 auto;
}
.vidgets_for_test .divforarchive img{ width:22px; height:22px; display:block; }

/* ═══════════════════════════════════════════════════════════
   «СХОЖІ ТЕСТИ» — сучасний вигляд.
   Файл вантажиться після базових стилів, тож блок нижче
   перекриває старі правила без !important.
   Кольори беруться з токенів спільної системи модалок
   (--ms-*), тому темна тема працює сама собою.
   ═══════════════════════════════════════════════════════════ */

.sim-scroll{ display:flex; flex-direction:column; gap:14px }

/* ── Сегментований перемикач ──────────────────────────────── */
.sim-catbar{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:3px; padding:3px; margin:0;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0);
  border-radius:12px;
}
.sim-cat-btn{
  flex:none; border:0; background:transparent;
  color:var(--ms-muted,#64748b);
  border-radius:9px; padding:9px 12px;
  font:600 13px/1 inherit; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sim-cat-btn:hover{ color:var(--ms-ink,#0f172a) }
.sim-cat-btn.active{
  background:var(--ms-surface,#fff);
  color:var(--ms-accent-ink,#0f766e);
  box-shadow:0 1px 2px rgba(15,23,42,.07), 0 0 0 1px var(--ms-line,#e2e8f0);
}

/* ── Рядок з описом добірки ───────────────────────────────── */
.sim-meta{
  margin:0; padding:10px 13px;
  background:var(--ms-accent-soft,#ecfdf5);
  border-radius:11px;
  color:var(--ms-accent-ink,#0f766e);
  font:500 13px/1.5 inherit;
}
.sim-meta b{ font-weight:800 }
.sim-meta:empty{ display:none }

/* ── Перегляд / Практика ──────────────────────────────────── */
.sim-modebar{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:0 }
.sim-modes{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0); border-radius:999px;
}
.sim-mode-btn{
  border:0; background:transparent; color:var(--ms-muted,#64748b);
  border-radius:999px; padding:6px 15px; font:600 12.5px/1 inherit; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.sim-mode-btn.active{ background:var(--ms-accent,#0d9488); color:#fff }
.sim-mode-btn:disabled{ opacity:.45; cursor:not-allowed }
.sim-mode-hint{ font:500 12px inherit; color:var(--ms-muted,#64748b) }
.sim-mode-hint a{ color:var(--ms-accent-ink,#0f766e); font-weight:700; text-decoration:none }
.sim-mode-hint a:hover{ text-decoration:underline }

/* ── Картка тесту ─────────────────────────────────────────── */
#similarBody{ display:flex; flex-direction:column; gap:11px }
.sim-item{
  position:relative;
  padding:15px 16px 14px;
  background:var(--ms-surface,#fff);
  border:1px solid var(--ms-line,#e2e8f0);
  border-radius:15px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sim-item:hover{
  border-color:#99e0d6;   /* запасний колір для браузерів без color-mix */
  border-color:color-mix(in srgb, var(--ms-accent,#0d9488) 42%, var(--ms-line,#e2e8f0));
  box-shadow:0 6px 18px rgba(15,23,42,.07);
  transform:translateY(-1px);
}
.sim-item-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px }
.sim-item-tag{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0);
  color:var(--ms-muted,#64748b);
  font:700 11px/1 inherit; letter-spacing:.02em; white-space:nowrap;
}
.sim-item-head .divforarchive{ margin-left:auto }

.sim-item-q{
  margin:0 0 11px;
  font:600 14.5px/1.55 inherit; color:var(--ms-ink,#0f172a);
}

/* Варіанти відповіді НЕ стилізуються тут: вигляд спільний зі звичайною
   карткою тесту — див. .test-item ul li у assets/krok/css/main.css, куди
   додано й .sim-item. Раніше тут був власний набір правил із кружечками-
   маркерами (li::before) — вони й читались як марковий список. */
.sim-item ul{ list-style:none }

/* ── Кнопка ШІ-пояснення в картці ─────────────────────────── */
.sim-item-actions{ margin-top:11px }
/* Кнопка без підпису — сама іконка, як просив власник. */
.sim-explain-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1px solid #99e0d6;   /* запасний колір для браузерів без color-mix */
  border:1px solid color-mix(in srgb, var(--ms-accent,#0d9488) 35%, transparent);
  background:var(--ms-accent-soft,#ecfdf5);
  color:var(--ms-accent-ink,#0f766e);
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.sim-explain-btn:hover{
  background:var(--ms-accent,#0d9488); border-color:var(--ms-accent,#0d9488); color:#fff;
}
.sim-explain-btn img{ width:17px; height:17px; display:block }
.sim-explain-btn:hover img{ filter:brightness(0) invert(1) }
.sim-note{
  margin:0; padding:2px 0;
  font:500 13.5px/1.55 inherit; color:#b45309;
}
.sim-note a{ color:var(--ms-accent-ink,#0f766e); font-weight:700 }
/* очікування — нейтральним, помаранчевий лишаємо для помилок */
.sim-note--wait{ color:var(--ms-soft,#94a3b8) }
body.dark-mode .sim-note--wait{ color:#6b7280 }
body.dark-mode .sim-note{ color:#fdba74 }

.sim-expl{
  margin-top:11px; padding:13px 15px;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0); border-radius:12px;
  font:500 13.5px/1.6 inherit; color:var(--ms-ink,#0f172a);
}

/* ── Порожньо / підписка / «ще» ───────────────────────────── */
.sim-empty{
  padding:34px 16px; text-align:center;
  color:var(--ms-muted,#64748b); font:500 14px inherit;
}
.sim-paywall{
  margin-top:6px; padding:17px 18px;
  border-radius:15px;
  border:1px solid #99e0d6;   /* запасний колір для браузерів без color-mix */
  border:1px dashed color-mix(in srgb, var(--ms-accent,#0d9488) 40%, transparent);
  background:var(--ms-accent-soft,#ecfdf5);
  color:var(--ms-ink,#0f172a); font:500 13.5px/1.6 inherit;
}
.sim-paywall a{
  display:inline-block; margin-top:9px; padding:9px 18px; border-radius:999px;
  background:var(--ms-accent,#0d9488); color:#fff; font-weight:700; text-decoration:none;
}
.sim-paywall a:hover{ background:var(--ms-accent-ink,#0f766e) }

.sim-more{ display:flex; justify-content:center; padding-top:2px }
.sim-more-btn{
  width:100%; padding:12px 18px; border-radius:12px;
  border:1px solid var(--ms-line,#e2e8f0);
  background:var(--ms-surface,#fff); color:var(--ms-ink,#0f172a);
  font:700 13px/1 inherit; cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.sim-more-btn:hover{ background:var(--ms-surface-2,#f6faf9); border-color:var(--ms-soft,#94a3b8) }

/* ── Телефон: віддаємо всю ширину тексту ─────────────────────
   Було padding:13px 13px — тобто на телефоні горизонтального
   відступу БІЛЬШЕ, ніж на десктопі (там 2px). Разом з полем
   модалки це з'їдало ~55px з кожного боку, і в рядок лізло
   по два слова. Тепер картка тесту впирається в краї модалки,
   а вертикальні відступи й шрифти стиснуті.
   ───────────────────────────────────────────────────────── */
@media (max-width:600px){
  .sim-catbar{ grid-auto-flow:row; grid-auto-columns:auto }

  .sim-item{ padding:10px 0 9px; border-radius:0 }
  .sim-item-head{ gap:6px; margin-bottom:5px }
  .sim-item-q{ font-size:14px; line-height:1.4; margin:0 0 7px }
  .sim-item ul li{
    padding:7px 9px; margin-bottom:5px;
    font-size:13.5px; line-height:1.35; border-radius:9px;
  }
  .sim-mode-btn{ padding:5px 10px; font-size:12.5px }
  .sim-modebar{ gap:6px; margin-bottom:6px }
}
@media (max-width:380px){
  .sim-item-q{ font-size:13.5px }
  .sim-item ul li{ padding:6px 8px; font-size:13px }
}

/* ═══════════════════════════════════════════════════════════
   ТЕЛЕФОН: МОДАЛКИ ПРЕПАРАТІВ — НА ВЕСЬ ЕКРАН, ЩІЛЬНО.

   #specModal  — макро/мікро патанатомії
   #pharmModal — препарат до фарм-тесту
   #drugModal  — картка препарату + квіз

   Власні повноекранні правила в них уже були, але на 560px,
   тоді як поле підкладки (.modal{padding}) скидається на 600px —
   між 561 і 600 діалог лишався з полями з боків. Тут єдиний
   поріг 600px для всіх трьох, скидання поля підкладки і стиснуті
   внутрішні відступи: вся ширина екрана йде під текст і знімки.

   Блок у кінці файлу — перекриває правила вище без !important
   там, де специфічність однакова.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:600px){
  #specModal, #pharmModal, #drugModal{
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
  }
  #specModal .content.spec-modal,
  #pharmModal .dq-modal,
  #drugModal .dq-modal{
    width:100% !important; max-width:100% !important;
    height:100vh !important; height:100dvh !important;
    max-height:none !important;
    border:none !important; border-radius:0 !important; box-shadow:none !important;
    /* Знімаємо `.modal .content{padding:20px 16px !important}` з
       assets/krok/css/main.css (@media max-width:480px) — інакше
       діалог отримував ще по 16px з боків поверх усього іншого.
       Відступи задає прокручувана зона нижче. */
    padding:0 !important;
  }

  /* прокручувана зона: менше повітря по краях */
  #specModal .dq-scroll,
  #pharmModal .dq-scroll,
  #drugModal .dq-scroll{ padding:9px 10px }

  /* шапка картки препарату */
  .spec-titlebar{ margin-bottom:8px; padding-right:30px }
  .spec-name{ font-size:14.5px }
  .spec-sub{ font-size:11.5px }

  /* самі препарати: знімок ширший, підпис компактніший */
  .spec-card{ margin-bottom:9px; border-radius:11px }
  .spec-card-img{ max-height:52vh }
  .spec-card-body{ padding:8px 10px }
  .spec-card-label{ font-size:13.5px }
  .spec-card-desc{ font-size:12.5px; line-height:1.45; margin-top:4px }

  /* варіанти у фарм-квізі */
  .ph-opts li{ padding:7px 9px; margin:4px 0; font-size:12.5px; line-height:1.35 }
  .dq-head{ padding:9px 10px 9px 12px }
}

@media (max-width:380px){
  #specModal .dq-scroll,
  #pharmModal .dq-scroll,
  #drugModal .dq-scroll{ padding:8px }
  .spec-card-body{ padding:7px 9px }
  .spec-card-desc{ font-size:12px }
  .ph-opts li{ padding:6px 8px; font-size:12px }
}