/* ============================================================
   KROK TEST PAGE — вигляд під дизайн ХАБУ (бенто-пастель).
   Підключається ЛИШЕ на сторінках тесту, ПІСЛЯ design-b-v2.
   Палітра/шрифти = ті самі, що в крок-хабі (Design B), щоб усе
   було узгоджено: і кнопки перед тестом, і самі тести, і прогрес.
============================================================ */

/* УВАГА: токени (--t-*) і стилі КАРТКИ-ПИТАННЯ винесено у спільний
   krok-question-card.css — його ділять сторінка тесту й вкладка «Архів» у хабі.
   Тут лишається лише «хром» саме тест-сторінки. Підключати ПІСЛЯ того файлу. */

body.design-b{ background:var(--t-bg) !important; font-family:var(--t-f) !important; }

/* заголовок */
body.design-b h1{ font-family:var(--t-f) !important; font-weight:800 !important; color:var(--t-ink) !important; -webkit-text-fill-color:var(--t-ink) !important; letter-spacing:-.02em !important; }
body.design-b h1::after{ background:var(--t-accent) !important; }
/* ============================================================
   КНОПКИ ПЕРЕД ТЕСТАМИ — усе в бенто
============================================================ */
/* комбобокс предметів */
body.design-b .toolbar .tool, body.design-b .cb-input{
  background:var(--t-surface) !important; border:1.5px solid var(--t-line) !important;
  border-radius:14px !important; box-shadow:var(--t-sh) !important; color:var(--t-ink) !important;
}
body.design-b .combobox{ box-shadow:var(--t-sh) !important; }
body.design-b .cb-input::placeholder{ color:var(--t-muted) !important; }
body.design-b .cb-icon, body.design-b .cb-caret{ color:var(--t-muted) !important; }
body.design-b .cb-list{ background:var(--t-surface) !important; border:1px solid var(--t-line) !important; border-radius:14px !important; box-shadow:var(--t-sh-md) !important; }
body.design-b .cb-item{ color:var(--t-ink) !important; }
body.design-b .cb-item:hover, body.design-b .cb-item.is-active{ background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important; }

/* чіп-кнопки */
body.design-b .btn-chip{ border:1.5px solid var(--t-line) !important; border-radius:13px !important; box-shadow:var(--t-sh) !important; font-family:var(--t-f) !important; font-weight:600 !important; }
body.design-b .btn-chip--ghost{ background:var(--t-surface) !important; color:var(--t-ink-2) !important; }
body.design-b .btn-chip--ghost:hover{ background:var(--t-fill) !important; color:var(--t-ink) !important; border-color:var(--t-accent) !important; }
body.design-b .btn-chip--primary{ background:var(--t-accent) !important; color:#fff !important; border-color:var(--t-accent) !important; }
body.design-b .btn-chip--primary:hover{ background:var(--t-accent-hov) !important; border-color:var(--t-accent-hov) !important; }
body.design-b.dark-mode .btn-chip--primary{ color:#16161a !important; }

/* фільтр по темах */
body.design-b .subj-bar__btn{ background:var(--t-surface) !important; border:1.5px solid var(--t-line) !important; border-radius:13px !important; box-shadow:var(--t-sh) !important; color:var(--t-ink-2) !important; font-family:var(--t-f) !important; font-weight:600 !important; }
body.design-b .subj-bar__btn:hover{ border-color:var(--t-accent) !important; color:var(--t-ink) !important; }
body.design-b .subj-bar__count{ background:var(--t-accent) !important; color:#fff !important; }

/* фарм-бар (сегменти збірник/режим) */
body.design-b .pharma-bar{ background:transparent !important; border:none !important; box-shadow:none !important; gap:10px !important; }
body.design-b .pharma-seg{ background:var(--t-surface) !important; border:1.5px solid var(--t-line) !important; border-radius:13px !important; box-shadow:var(--t-sh) !important; padding:4px !important; }
body.design-b .pharma-seg__label{ color:var(--t-muted) !important; }
body.design-b .pharma-seg__btn, body.design-b .pharma-mode__btn{ color:var(--t-ink-2) !important; border-radius:10px !important; font-weight:600 !important; }
body.design-b .pharma-seg__btn.is-active, body.design-b .pharma-mode__btn.is-active{ background:var(--t-accent) !important; color:#fff !important; }
body.design-b.dark-mode .pharma-seg__btn.is-active, body.design-b.dark-mode .pharma-mode__btn.is-active{ color:#16161a !important; }

/* рандом-50 бар */
body.design-b .rand50-bar{ background:transparent !important; }
body.design-b .rand50-btn{ background:var(--t-accent) !important; color:#fff !important; border:none !important; border-radius:12px !important; box-shadow:var(--t-sh) !important; font-family:var(--t-f) !important; font-weight:700 !important; }
body.design-b .rand50-btn:hover{ background:var(--t-accent-hov) !important; filter:none !important; }
body.design-b.dark-mode .rand50-btn{ color:#16161a !important; }
body.design-b .rand50-btn--ghost{ background:var(--t-surface) !important; color:var(--t-ink-2) !important; border:1.5px solid var(--t-line) !important; }
body.design-b .rand50-badge{ background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important; border:none !important; }
body.design-b .rand50-hint{ color:var(--t-muted) !important; }

body.design-b .explain-btn:hover, body.design-b .similar-btn:hover{ background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important; }

/* ── ПРОГРЕС + КОНТРОЛИ ── */
body.design-b .progress-container{ background:var(--t-fill) !important; border:none !important; }
body.design-b .progress-green{ background:var(--t-good) !important; }
body.design-b .progress-red{ background:var(--t-bad) !important; }
body.design-b .progress-num--green{ color:var(--t-good-ink) !important; }
body.design-b .progress-num--red{ color:var(--t-bad-ink) !important; }
body.design-b .progress-controls{ background:var(--t-surface) !important; border:none !important; border-radius:18px !important; box-shadow:var(--t-sh-lg) !important; }
body.design-b .progress-counter{ color:var(--t-ink-2) !important; font-family:var(--t-f) !important; font-weight:600 !important; }
body.design-b .finish-btn, body.design-b #finish-test-btn{ background:var(--t-bad) !important; color:#fff !important; border:none !important; border-radius:11px !important; }
body.design-b.dark-mode .finish-btn, body.design-b.dark-mode #finish-test-btn{ color:#16161a !important; }

/* (мобільні розміри картки-питання — у спільному krok-question-card.css) */

/* ── Банер гостя (тести відкриті, акаунт — щоб зберегти прогрес) ── */
body.design-b .guest-bar{
  max-width:900px; margin:14px auto 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:16px; padding:14px 18px;
  box-shadow:var(--t-sh-md);
  font-family:var(--t-f);
}
body.design-b .guest-bar__txt{ min-width:0; flex:1 1 320px; }
body.design-b .guest-bar__txt b{ display:block; color:var(--t-ink); font-size:14.5px; margin-bottom:3px; }
body.design-b .guest-bar__txt span{ color:var(--t-muted); font-size:12.5px; line-height:1.5; }
body.design-b .guest-bar__btns{ display:flex; gap:8px; flex:0 0 auto; }
body.design-b .guest-bar__btn{
  border:1.5px solid var(--t-line); background:var(--t-surface); color:var(--t-ink-2);
  border-radius:12px; padding:10px 16px; font-family:inherit; font-weight:700; font-size:13.5px;
  cursor:pointer; transition:background .14s, border-color .14s;
}
body.design-b .guest-bar__btn:hover{ background:var(--t-fill); border-color:var(--t-accent); }
body.design-b .guest-bar__btn--primary{ background:var(--t-accent); border-color:var(--t-accent); color:#fff; }
body.design-b .guest-bar__btn--primary:hover{ background:var(--t-accent-hov); border-color:var(--t-accent-hov); }
body.design-b.dark-mode .guest-bar__btn--primary{ color:#16161a; }
@media (max-width:600px){
  body.design-b .guest-bar{ margin:10px auto 14px; padding:12px 14px; }
  body.design-b .guest-bar__btns{ width:100%; }
  body.design-b .guest-bar__btn{ flex:1 1 auto; }
}

/* ── SEO-прев'ю (перші питання в HTML для пошуковиків; JS прибирає його,
      щойно завантажилась інтерактивна стрічка) ── */
body.design-b .seo-preview{
  max-width:900px; margin:0 auto 24px; font-family:var(--t-f);
}
body.design-b .seo-preview > h2{
  font-size:15px; font-weight:700; color:var(--t-ink-2); margin:0 0 12px;
}
body.design-b .seo-q{
  background:var(--t-surface); border:1px solid var(--t-line);
  border-radius:var(--t-r); box-shadow:var(--t-sh); padding:18px 20px; margin:0 0 12px;
}
body.design-b .seo-q h3{
  font-size:15.5px; font-weight:700; color:var(--t-ink); line-height:1.5; margin:0 0 10px;
}
body.design-b .seo-q ul{ list-style:none; margin:0; padding:0; }
body.design-b .seo-q li{
  background:var(--t-fill); border-radius:var(--t-r-sm); color:var(--t-ink);
  font-size:14px; padding:9px 13px; margin:6px 0;
}
body.design-b .seo-q li.seo-correct{ background:var(--t-good-soft); color:var(--t-good-ink); font-weight:600; }
body.design-b .seo-ans{ margin:10px 0 0; font-size:13px; color:var(--t-ink-2); }
body.design-b .seo-more{ color:var(--t-muted); font-size:13px; text-align:center; margin:14px 0 0; }