/* ============================================================
   KROK HUB — DESIGN B  ·  BENTO / SOFT PASTEL  (rewrite v4)
   ------------------------------------------------------------
   Світлий повітряний скін: великі заокруглення, мʼякі багатошарові
   тіні, пастельна палітра (мʼятний/лавандовий/корал). Без жорстких
   рамок — «блоки плавають». Охоплює і хаб (картки/таби/пошук/модалки),
   і сторінку проходження тестів.

   Вмикається `body.design-b`. Дарк = той самий клас + `dark-mode`.
   Дизайн A не зачіпається.

   Хитрість: переозначуємо токени --km-* (їх читає krok-cards-v2.css),
   тож картки хабу самі перефарбовуються в пастель.
============================================================ */

body.design-b{
  /* — chrome / тести — */
  --b-surface:#ffffff;
  --b-fill:#f1eff9;
  --b-fill-2:#e8e5f4;
  --b-ink:#2b2735;
  --b-ink-2:#5d586b;
  --b-muted:#9a95a8;
  --b-line:#ece9f6;
  --b-accent:#8b80f0;
  --b-accent-hov:#756af0;
  --b-accent-soft:#ecebfd;
  --b-green:#43b483;  --b-green-soft:#e6f7ef;  --b-green-ink:#2f9b6e;
  --b-red:#ef8e9c;    --b-red-soft:#fdedf0;    --b-red-ink:#d05f70;
  --b-amber:#e0a04f;
  --b-sh:0 2px 8px rgba(70,60,110,.05);
  --b-sh-md:0 8px 26px -10px rgba(70,60,110,.20), 0 2px 6px rgba(70,60,110,.05);
  --b-sh-lg:0 26px 64px -18px rgba(45,35,85,.30);
  --b-veil:rgba(246,244,251,.62);
  --b-r:22px; --b-r-sm:15px; --b-r-xs:12px;

  /* — токени карток хабу (читає krok-cards-v2) — */
  --km-surface:#ffffff;
  --km-surface-2:#efedf8;
  --km-ink:#2b2735;
  --km-muted:#8a8597;
  --km-line:#ece9f6;
  --km-primary:#5fc59c;
  --km-primary-strong:#49b487;
  --km-accent:#8b80f0;
  --km-danger:#ef9aa6;
  --km-ring:rgba(139,127,240,.25);
  --km-pill-bg:#ecebfd; --km-pill-bd:#dcd9f6;
  --km-fhead:'Inter',system-ui,-apple-system,sans-serif;
  --km-fbody:'Inter',system-ui,-apple-system,sans-serif;
}

/* ── DARK ── */
body.design-b.dark-mode{
  --b-surface:#201f29;
  --b-fill:#2a2836;
  --b-fill-2:#332f40;
  --b-ink:#e9e7f1;
  --b-ink-2:#aaa6b8;
  --b-muted:#7c7790;
  --b-line:#322f3e;
  --b-accent:#9b90f5;
  --b-accent-hov:#b0a8f8;
  --b-accent-soft:rgba(155,144,245,.16);
  --b-green:#5aa888;  --b-green-soft:rgba(90,168,136,.14);  --b-green-ink:#9ccdb4;
  --b-red:#cf8a96;    --b-red-soft:rgba(207,138,150,.14);   --b-red-ink:#e0aeb6;
  --b-amber:#c9a36a;
  --b-sh:0 2px 8px rgba(0,0,0,.4);
  --b-sh-md:0 8px 26px -10px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --b-sh-lg:0 26px 64px -18px rgba(0,0,0,.6);
  --b-veil:rgba(0,0,0,.34);

  --km-surface:#201f29;
  --km-surface-2:#2c2a38;
  --km-ink:#e9e7f1;
  --km-muted:#9a96a8;
  --km-line:#322f3e;
  --km-primary:#5aa888;
  --km-primary-strong:#4c916f;
  --km-accent:#9b90f5;
  --km-danger:#cf8a96;
  --km-ring:rgba(155,144,245,.28);
  --km-pill-bg:rgba(155,144,245,.14); --km-pill-bd:rgba(155,144,245,.32);
}

/* ============================================================
   BASE — повітряний пастельний фон
============================================================ */
body.design-b{
  background:linear-gradient(160deg,#f4f1fb 0%,#eef4fb 48%,#fbf1f5 100%) !important;
  background-attachment:fixed !important;
  color:var(--b-ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.design-b.dark-mode{ background:#16151c !important; color:var(--b-ink); }
body.design-b::before{ display:none !important; }
body.design-b .container{ padding-top:30px; }
body.design-b.dark-mode .divforarchive img,
body.design-b.dark-mode .similar-btn img{ filter:brightness(0) invert(.78) !important; }

/* ============================================================
   A / B SWITCH (без префікса — видимий завжди)
============================================================ */
.design-switch{
  position:fixed; z-index:1200; left:14px; bottom:16px;
  display:inline-flex; align-items:center; gap:2px; padding:4px;
  background:#fff; border-radius:14px; box-shadow:0 8px 26px -8px rgba(70,60,110,.28);
  font-family:'Inter',system-ui,sans-serif; opacity:.6; transition:opacity .2s ease;
}
.design-switch:hover{ opacity:1; }
.design-switch__label{ font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9a95a8; padding:0 7px 0 9px; user-select:none; }
.ds-opt{
  width:30px; height:30px; border:none; cursor:pointer; border-radius:10px;
  background:transparent; font-family:inherit; font-size:13px; font-weight:800; color:#5d586b;
  display:flex; align-items:center; justify-content:center; transition:background-color .15s, color .15s;
}
.ds-opt:hover{ background:#f1eff9; color:#2b2735; }
.ds-opt.is-active{ background:#8b80f0; color:#fff; }
body.dark-mode .design-switch{ background:#201f29; box-shadow:0 8px 26px -8px rgba(0,0,0,.55); }
body.dark-mode .design-switch__label{ color:#7c7790; }
body.dark-mode .ds-opt{ color:#aaa6b8; }
body.dark-mode .ds-opt:hover{ background:rgba(255,255,255,.08); color:#fafafa; }
body.design-b.dark-mode .ds-opt.is-active{ background:#9b90f5; color:#16161a; }
@media (max-width:600px){ .design-switch{ left:12px; bottom:78px; } }
@media print{ .design-switch{ display:none !important; } }

/* ============================================================
   HEADING / KROK PILL
============================================================ */
body.design-b h1{
  background:none !important; -webkit-text-fill-color:var(--b-ink) !important; color:var(--b-ink) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important; letter-spacing:-.03em !important;
}
body.design-b h1::after{ background:var(--b-accent) !important; box-shadow:none !important; animation:none !important; width:44px !important; height:3px !important; border-radius:2px !important; }
body.design-b .h1-icon{ animation:none !important; filter:none !important; }
body.design-b .krok-pill{ margin:6px auto 20px !important; }
body.design-b .krok-pill__badge{ background:transparent !important; backdrop-filter:none !important; border:none !important; box-shadow:none !important; padding:0 !important; }
body.design-b .krok-pill__badge:hover{ transform:none !important; box-shadow:none !important; }
body.design-b .krok-pill__underline{ display:none !important; }
body.design-b .krok-logo .t-hub{ fill:var(--b-accent) !important; }
body.design-b .krok-logo .t-krok{ fill:var(--b-ink) !important; }
body.design-b .krok-logo .t-dot{ fill:var(--b-muted) !important; }
body.design-b .krok-pill__scan, body.design-b .shine-rect{ animation:none !important; opacity:0 !important; }
body.design-b .beta-chip{ background:var(--b-fill) !important; color:var(--b-muted) !important; border:none !important; box-shadow:none !important; border-radius:7px !important; }

/* ============================================================
   TABS — мʼякі пастельні пігулки
============================================================ */
body.design-b .tabs{ background:transparent !important; gap:8px !important; border-bottom:none !important; padding-bottom:0 !important; border-radius:0 !important; }
body.design-b .tabs-wrap{ background:transparent !important; box-shadow:none !important; }
body.design-b .tab-btn{
  background:var(--b-surface) !important; backdrop-filter:none !important; border:none !important;
  border-radius:14px !important; margin-bottom:0 !important; color:var(--b-ink-2) !important;
  box-shadow:var(--b-sh) !important; font-weight:600 !important; padding:10px 17px !important;
  transition:background-color .14s, color .14s, box-shadow .14s !important;
}
body.design-b .tab-btn::before{ display:none !important; }
body.design-b .tab-btn:hover{ transform:none !important; background:var(--b-fill) !important; color:var(--b-ink) !important; box-shadow:var(--b-sh) !important; }
body.design-b .tab-btn.active{ background:var(--b-accent) !important; color:#fff !important; box-shadow:0 8px 18px -8px var(--b-accent) !important; font-weight:700 !important; }
body.design-b.dark-mode .tab-btn.active{ color:#16161a !important; }
body.design-b .tab-img{ opacity:.85; }
@media (max-width:600px){
  body.design-b .tabs-wrap{ background:var(--b-surface) !important; box-shadow:0 -4px 16px rgba(70,60,110,.07) !important; border:none !important; }
}

/* ============================================================
   SEARCH — заповнені поля без бордерів
============================================================ */
body.design-b .hub-search input,
body.design-b .hub-search select{
  background:var(--b-surface) !important; backdrop-filter:none !important;
  border:none !important; border-radius:var(--b-r-sm) !important; box-shadow:var(--b-sh) !important;
  color:var(--b-ink) !important; font-weight:500 !important;
}
body.design-b .hub-search input:focus,
body.design-b .hub-search select:focus{ box-shadow:0 0 0 3px var(--b-accent-soft), 0 0 0 1.5px var(--b-accent) !important; }
body.design-b .hub-search input::placeholder{ color:var(--b-muted) !important; }

/* тулбар-кнопки «Мої теми / статистика» вже на --km-* → перефарбуються самі;
   лише мʼякша тінь у бенто-дусі */
body.design-b .km-toolbtn{ box-shadow:var(--b-sh) !important; border-radius:14px !important; }

/* ============================================================
   HUB CARDS — БЕНТО: великі радіуси, мʼякі тіні, повітря
   (кольори вже з --km-*; тут — форма/простір, перекриваємо v2)
============================================================ */
body.design-b #grid-years,
body.design-b #grid-systems,
body.design-b #subjectsGrid{ gap:22px !important; }

body.design-b .test-grid .test-item{
  background:var(--km-surface) !important;
  border:1px solid transparent !important;
  border-radius:24px !important;
  box-shadow:var(--b-sh-md) !important;
  padding:22px !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
body.design-b .test-grid .test-item:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 40px -12px rgba(70,60,110,.26) !important;
}
/* play-коло — мʼяка пастельна тінь замість насиченої зеленої */
body.design-b .test-grid .start-btn{ box-shadow:0 8px 18px -6px rgba(95,197,156,.55) !important; }
body.design-b.dark-mode .test-grid .start-btn{ box-shadow:0 8px 18px -6px rgba(90,168,136,.5) !important; }

/* особливі буклети — лишаємо тон-заливку (демо мʼятний, психо лавандовий) */
body.design-b .test-grid .test-item.demo-booklet{ background:var(--b-green-soft) !important; }
body.design-b .test-grid .test-item.psy-booklet{ background:var(--b-accent-soft) !important; }

/* ============================================================
   TEST CARD (сторінка проходження) — біла бенто-картка
============================================================ */
body.design-b #test-container .test-item,
body.design-b .test-item{
  background:var(--b-surface) !important; backdrop-filter:none !important;
  border:none !important; border-radius:var(--b-r) !important;
  box-shadow:var(--b-sh-md) !important; padding:22px !important;
  transition:box-shadow .18s, transform .18s !important; animation:none !important;
}
body.design-b .test-item::before{ display:none !important; }
body.design-b #test-container .test-item:hover{ transform:none !important; box-shadow:var(--b-sh-md) !important; }
body.design-b .test-actions{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:14px !important; }
body.design-b .test-actions .explain-btn,
body.design-b .test-actions .similar-btn{ position:static !important; }
body.design-b .test-item.inactive::after{ background:var(--b-veil) !important; }

body.design-b .question-number{
  background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important;
  color:var(--b-muted) !important; font-family:'Inter',system-ui,sans-serif !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
}
body.design-b #test-container .test-item h3,
body.design-b .test-item h3{ color:var(--b-ink) !important; font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:16.5px !important; letter-spacing:-.01em !important; line-height:1.55 !important; margin-bottom:14px !important; }

/* ============================================================
   ANSWER OPTIONS — заповнені пастельні рядки
============================================================ */
body.design-b .test-item ul{ margin:10px 0 0 !important; }
body.design-b .test-item ul li{
  background:var(--b-fill) !important; backdrop-filter:none !important;
  border:none !important; border-radius:var(--b-r-sm) !important; box-shadow:none !important;
  color:var(--b-ink) !important; font-weight:500 !important; font-size:14.5px !important; line-height:1.45 !important;
  padding:13px 16px !important; margin:9px 0 !important;
  transition:background-color .13s, box-shadow .13s, color .13s !important;
}
body.design-b .test-item ul li:hover{ background:var(--b-fill-2) !important; transform:none !important; box-shadow:none !important; }
body.design-b .test-item ul li.selected{ background:var(--b-accent-soft) !important; color:var(--b-accent-hov) !important; box-shadow:inset 0 0 0 1.5px var(--b-accent) !important; font-weight:600 !important; }
body.design-b .test-item ul li.correct{
  background:var(--b-green-soft) !important; color:var(--b-green-ink) !important;
  box-shadow:inset 0 0 0 1.5px var(--b-green) !important; text-decoration:none !important; font-weight:600 !important; animation:none !important;
}
body.design-b .test-item ul li.correct::after{
  content:'✓' !important; color:var(--b-green) !important; background:transparent !important; box-shadow:none !important;
  width:auto !important; height:auto !important; font-size:15px !important; font-weight:800 !important; right:14px !important; animation:none !important;
}
body.design-b .test-item ul li.incorrect{
  background:var(--b-red-soft) !important; color:var(--b-red-ink) !important;
  box-shadow:inset 0 0 0 1.5px var(--b-red) !important; text-decoration:none !important; font-weight:500 !important; animation:none !important;
}
body.design-b .test-item ul li.incorrect::after{
  content:'✕' !important; color:var(--b-red) !important; background:transparent !important; box-shadow:none !important;
  width:auto !important; height:auto !important; font-size:14px !important; font-weight:800 !important; right:14px !important; animation:none !important;
}

/* META CHIPS */
body.design-b .test-meta{ gap:6px !important; margin:6px 0 10px !important; }
body.design-b .test-meta .chip{ background:var(--b-fill) !important; color:var(--b-ink-2) !important; border:none !important; border-radius:8px !important; padding:4px 10px !important; }

/* ============================================================
   ACTION BUTTONS / icons (test page)
============================================================ */
body.design-b .explain-btn,
body.design-b .similar-btn,
body.design-b .divforarchive,
body.design-b .discussion-btn{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:var(--b-r-xs) !important; color:var(--b-ink-2) !important; }
body.design-b .explain-btn:hover,
body.design-b .similar-btn:hover,
body.design-b .divforarchive:hover,
body.design-b .discussion-btn:hover{ background:var(--b-fill) !important; color:var(--b-accent-hov) !important; }
body.design-b .mistakes-btn{ background:var(--b-fill) !important; color:var(--b-amber) !important; border:none !important; border-radius:var(--b-r-xs) !important; }

/* ============================================================
   PROGRESS / CONTROLS (test page)
============================================================ */
body.design-b .progress-container{ background:var(--b-fill) !important; border:none !important; border-radius:var(--b-r-sm) !important; box-shadow:none !important; }
body.design-b .progress-green{ background:var(--b-green) !important; }
body.design-b .progress-red{ background:var(--b-red) !important; }
body.design-b .progress-num--green{ color:var(--b-green-ink) !important; }
body.design-b .progress-num--red{ color:var(--b-red-ink) !important; }
body.design-b .progress-controls{ background:var(--b-surface) !important; border:none !important; border-radius:20px !important; box-shadow:var(--b-sh-lg) !important; }
body.design-b .progress-counter{ color:var(--b-ink-2) !important; font-weight:600 !important; }
body.design-b .finish-btn,
body.design-b #finish-test-btn{ background:var(--b-red) !important; color:#fff !important; border:none !important; border-radius:var(--b-r-xs) !important; box-shadow:none !important; }
body.design-b .finish-btn:hover{ background:#d05f70 !important; }

body.design-b .fab{ background:var(--b-accent) !important; color:#fff !important; border:none !important; box-shadow:var(--b-sh-md) !important; }
body.design-b .fab::before{ display:none !important; }
body.design-b .fab:hover{ background:var(--b-accent-hov) !important; }
body.design-b .fab--ghost{ background:var(--b-surface) !important; color:var(--b-ink-2) !important; border:none !important; box-shadow:var(--b-sh) !important; }
body.design-b .fab--ghost:hover{ background:var(--b-fill) !important; color:var(--b-ink) !important; }
body.design-b.dark-mode .fab,
body.design-b.dark-mode .fc-ok,
body.design-b.dark-mode .st-btn--primary{ color:#16161a !important; }

/* ============================================================
   MODALS — бенто, без бордерів, мʼяка велика тінь
============================================================ */
body.design-b .modal{ background:rgba(20,16,34,.5) !important; backdrop-filter:blur(6px) !important; }
body.design-b .modal-content{ background:var(--b-surface) !important; backdrop-filter:none !important; border:none !important; border-radius:var(--b-r) !important; box-shadow:var(--b-sh-lg) !important; color:var(--b-ink) !important; }
body.design-b .modal-content h3{ background:none !important; -webkit-text-fill-color:var(--b-ink) !important; color:var(--b-ink) !important; font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important; letter-spacing:-.02em !important; }
body.design-b .modal-content::-webkit-scrollbar-thumb{ background:var(--b-fill-2) !important; }
body.design-b .close{ background:var(--b-fill) !important; border:none !important; border-radius:var(--b-r-xs) !important; color:var(--b-ink-2) !important; box-shadow:none !important; }
body.design-b .close:hover{ background:var(--b-red-soft) !important; color:var(--b-red) !important; }
body.design-b .history-table th{ color:var(--b-ink-2) !important; }
body.design-b .history-table td{ color:var(--b-ink) !important; border-color:var(--b-line) !important; }
body.design-b .fc-dialog{ background:var(--b-surface) !important; border:none !important; border-radius:var(--b-r) !important; box-shadow:var(--b-sh-lg) !important; color:var(--b-ink) !important; }
body.design-b .fc-title{ color:var(--b-ink) !important; font-weight:800 !important; }
body.design-b .fc-ok{ background:var(--b-accent) !important; color:#fff !important; border:none !important; border-radius:var(--b-r-xs) !important; }
body.design-b .fc-cancel{ background:var(--b-fill) !important; color:var(--b-ink-2) !important; border:none !important; border-radius:var(--b-r-xs) !important; }
body.design-b .st-btn--primary{ background:var(--b-accent) !important; color:#fff !important; border-radius:var(--b-r-xs) !important; }
body.design-b .st-btn--ghost{ background:var(--b-fill) !important; color:var(--b-ink-2) !important; border:none !important; border-radius:var(--b-r-xs) !important; }
body.design-b .st-row.is-on{ background:var(--b-accent-soft) !important; }

/* SYSTEMS WARNING */
body.design-b .systems-warning > div{ background:var(--b-surface) !important; border:none !important; border-radius:var(--b-r-sm) !important; box-shadow:var(--b-sh) !important; }

/* mistakes-mode badge — глобальний фікс text-fill */
.mistakes-mode-badge{ -webkit-text-fill-color:#d05f70 !important; }
body.dark-mode .mistakes-mode-badge{ background:rgba(207,138,150,.20) !important; color:#e0aeb6 !important; -webkit-text-fill-color:#e0aeb6 !important; }

/* ============================================================
   MOBILE
============================================================ */
@media (max-width:600px){
  body.design-b .container{ padding-top:14px !important; padding-left:8px !important; padding-right:8px !important; }
  body.design-b h1{ font-size:20px !important; margin:4px 0 12px !important; }
  body.design-b h1::after{ width:40px !important; bottom:-7px !important; }
  body.design-b .tab-btn{ padding:9px 13px !important; font-size:13px !important; border-radius:12px !important; }
  body.design-b .hub-search input,
  body.design-b .hub-search select{ height:46px !important; line-height:46px !important; font-size:14px !important; }

  body.design-b .test-grid .test-item{ border-radius:20px !important; padding:18px !important; }
  body.design-b #test-container{ padding:8px 0 !important; }
  body.design-b #test-container .test-item{ border-radius:18px !important; box-shadow:var(--b-sh) !important; padding:16px !important; margin:0 0 11px !important; }
  body.design-b #test-container .test-item.inactive::after{ border-radius:18px !important; }
  body.design-b #test-container .test-item.inactive{ opacity:1 !important; }

  body.design-b .test-item h3{ font-size:15px !important; margin-bottom:11px !important; line-height:1.5 !important; }
  body.design-b .question-number{ font-size:10px !important; letter-spacing:.09em !important; }
  body.design-b .test-item ul{ margin:9px 0 0 !important; }
  body.design-b .test-item ul li{ padding:12px 14px !important; margin:8px 0 !important; font-size:14px !important; border-radius:13px !important; }
  body.design-b .test-item ul li.correct::after,
  body.design-b .test-item ul li.incorrect::after{ right:12px !important; font-size:13px !important; }
  body.design-b .test-meta .chip{ font-size:9px !important; padding:3px 8px !important; }
  body.design-b .progress-controls{ border-radius:16px !important; }

  .design-switch{ padding:3px !important; }
  .design-switch__label{ font-size:8px !important; padding:0 5px 0 7px !important; }
  .design-switch .ds-opt{ width:28px !important; height:28px !important; font-size:12px !important; }
}

@media (prefers-reduced-motion:reduce){
  body.design-b *{ transition:none !important; animation:none !important; }
}