/* ============================================================
   ТЕСТ — ВИГЛЯД КРОК-ХАБУ НА ВЕСЬ САЙТ.
   ------------------------------------------------------------
   Це ТОЧНА копія вигляду картки питання з КРОК-хабу
   (assets/krok/css/krok-question-card.css) — ті самі кольори,
   розміри, радіуси й тіні, аж до значень токенів --t-*.

   Навіщо копія, а не використання того файлу: там усі правила
   прив'язані до body.design-b, а цей клас вмикає лише хаб
   (krokHubView.php:224 і krok-hub-v2.js:78). На предметних
   тестах, у тренуваннях і в роботі над помилками його немає,
   тому той файл там не діяв узагалі.

   Покриває ТРИ структури розмітки, що історично склалися:
       .test-item ul > li   КРОК-хаб, тренування, архів
       ul.answers > li      предмети, робота над помилками
       .opts > .opt         сторінка предметного тесту
   і всі синоніми станів (correct/ok/right/is-correct,
   incorrect/wrong/bad/is-wrong, selected/sel/checked).

   !important — бо на ці ж елементи в 31 вʼюсі написано 379
   правил ІНЛАЙНОВО в <style>, і без цього вони перебивають.

   Підключати ОСТАННІМ у <head>.
============================================================ */

:root{
  /* значення один-в-один із krok-question-card.css */
  --tc-surface:#ffffff;
  --tc-ink:#2b2735;
  --tc-ink-2:#5d586b;
  --tc-muted:#9a95a8;
  --tc-line:#ece9f6;
  --tc-fill:#f1eff9;
  --tc-fill-2:#e7e4f3;
  --tc-accent:#8b80f0;
  --tc-accent-soft:#ecebfd;
  --tc-good:#43b483;   --tc-good-soft:#e6f7ef;  --tc-good-ink:#2f9b6e;
  --tc-bad:#ef8e9c;    --tc-bad-soft:#fdedf0;   --tc-bad-ink:#d05f70;
  --tc-r:18px;  --tc-r-sm:13px;
  --tc-sh:0 8px 26px -10px rgba(70,60,110,.20), 0 2px 6px rgba(70,60,110,.05);
  --tc-f:'Inter',system-ui,-apple-system,sans-serif;
}
body.dark-mode, body.dark{
  --tc-surface:#1c1a24;
  --tc-ink:#e9e7f2;
  --tc-ink-2:#b3aec4;
  --tc-muted:#8b86a0;
  --tc-line:#39354a;
  --tc-fill:#26232f;
  --tc-fill-2:#302c3c;
  --tc-accent-soft:#2c2740;
  --tc-good-soft:#183328;  --tc-good-ink:#7fd3ab;
  --tc-bad-soft:#3a222a;   --tc-bad-ink:#f0a8b4;
  /* Тінь була чорною по чорному — її просто не видно, вона лише
     розмивала межу картки. У темряві блок відділяє рамка, тому
     тінь знято, а --tc-line зроблено помітнішою (нижче).
     Правимо саме змінну: box-shadow у картці стоїть з !important,
     і перебивати його ззовні довелося б тим самим !important. */
  --tc-sh:none;
}

@counter-style tc-uk{
  system:fixed;
  symbols:"А" "Б" "В" "Г" "Д" "Е" "Є" "Ж" "З" "И" "І";
  suffix:"";
}

/* ── Картка питання ───────────────────────────────────────── */
.test-card,
#test-container .test-item,
#grid-archive .test-item,
#panel-archive .test-item,
#trainArea .test-item,
#trainTests .test-item,
#test-list .test-item,
.test-list .test-item,
.test-item-card{
  background:var(--tc-surface) !important;
  background-image:none !important;
  border:1px solid var(--tc-line) !important;
  border-radius:var(--tc-r) !important;
  box-shadow:var(--tc-sh) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:24px 26px !important;
  margin-bottom:16px !important;
  animation:none !important;
}
#test-container .test-item:hover,
#grid-archive .test-item:hover,
#panel-archive .test-item:hover,
#trainArea .test-item:hover,
#trainTests .test-item:hover,
#test-list .test-item:hover,
.test-list .test-item:hover,
.test-item-card:hover{ transform:none !important;
  box-shadow:var(--tc-sh) !important; }

/* Текст питання — усі його історичні класи. */
.test-item h3, .test-item .question, .test-item .card-q, .card-q, .question{
  font-family:var(--tc-f) !important;
  color:var(--tc-ink) !important;
  font-weight:700 !important;
  font-size:16.5px !important;
  line-height:1.55 !important;
  letter-spacing:-.01em !important;
  margin:6px 0 16px !important;
}

/* Номер питання. */
.question-number, .qn, .card-num{
  font-family:var(--tc-f) !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--tc-ink-2) !important;
  background:var(--tc-fill) !important;
  border:1px solid var(--tc-line) !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  display:inline-block !important;
}

/* ── Список варіантів ─────────────────────────────────────── */
.test-item ul, ul.answers, .opts, .sim-item ul, .test-card .opts{
  margin:8px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:tcopt !important;
}

/* ── Варіант ──────────────────────────────────────────────── */
.test-item ul > li,
ul.answers > li,
.sim-item ul > li,
.opts > .opt{
  position:relative !important;
  counter-increment:tcopt !important;
  margin:0 0 8px !important;
  padding:14px 18px !important;
  background:var(--tc-fill) !important;
  border:1.5px solid transparent !important;
  border-radius:var(--tc-r-sm) !important;
  box-shadow:none !important;
  color:var(--tc-ink) !important;
  font-family:var(--tc-f) !important;
  font-size:15px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  cursor:pointer !important;
  list-style:none !important;
  transition:background .16s ease, border-color .16s ease !important;
}
.test-item ul > li:last-child,
ul.answers > li:last-child,
.sim-item ul > li:last-child,
.opts > .opt:last-child{ margin-bottom:0 !important; }
.test-item ul > li:hover,
ul.answers > li:hover,
.sim-item ul > li:hover,
.opts > .opt:hover{ background:var(--tc-fill-2) !important;
  transform:none !important; }

/* ── Маркер-літера А/Б/В/Г/Д ──────────────────────────────────
   ЛИШЕ для списків <li>. Тести з множинним вибором (mcTests,
   mcMarathon, clinicalView, LabQuiz) малюють варіанти як .opt і
   зайняли ::before ПІД ЧЕКБОКС — там літера знищила б його. */
.test-item ul > li,
ul.answers > li,
.sim-item ul > li,
.test-card .opts > .opt{ padding:14px 18px 14px 52px !important; }
.test-item ul > li::before,
ul.answers > li::before,
.sim-item ul > li::before,
.test-card .opts > .opt::before{
  content:counter(tcopt, tc-uk) !important;
  position:absolute !important;
  left:11px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--tc-surface) !important;
  color:var(--tc-accent) !important;
  font-family:var(--tc-f) !important;
  font-weight:800 !important;
  font-size:13px !important;
  box-shadow:0 1px 3px rgba(70,60,110,.10) !important;
}
body.dark-mode .test-item ul > li::before,
body.dark-mode ul.answers > li::before,
body.dark-mode .sim-item ul > li::before,
body.dark-mode .test-card .opts > .opt::before{
  background:var(--tc-fill-2) !important;
}

/* ── Стани ────────────────────────────────────────────────── */
.test-item ul > li.selected,
.test-item ul > li.sel,
.test-item ul > li.checked,
ul.answers > li.selected,
ul.answers > li.sel,
ul.answers > li.checked,
.sim-item ul > li.selected,
.sim-item ul > li.sel,
.sim-item ul > li.checked,
.opts > .opt.selected,
.opts > .opt.sel,
.opts > .opt.checked{
  border-color:var(--tc-accent) !important;
  background:var(--tc-accent-soft) !important;
}
.test-item ul > li.correct,
.test-item ul > li.ok,
.test-item ul > li.right,
.test-item ul > li.is-correct,
ul.answers > li.correct,
ul.answers > li.ok,
ul.answers > li.right,
ul.answers > li.is-correct,
.sim-item ul > li.correct,
.sim-item ul > li.ok,
.sim-item ul > li.right,
.sim-item ul > li.is-correct,
.opts > .opt.correct,
.opts > .opt.ok,
.opts > .opt.right,
.opts > .opt.is-correct{
  background:var(--tc-good-soft) !important;
  color:var(--tc-good-ink) !important;
  border-color:var(--tc-good) !important;
  font-weight:600 !important;
  text-decoration:none !important;
  animation:none !important;
}
.test-item ul > li.correct::before,
.test-item ul > li.ok::before,
.test-item ul > li.right::before,
.test-item ul > li.is-correct::before,
ul.answers > li.correct::before,
ul.answers > li.ok::before,
ul.answers > li.right::before,
ul.answers > li.is-correct::before,
.sim-item ul > li.correct::before,
.sim-item ul > li.ok::before,
.sim-item ul > li.right::before,
.sim-item ul > li.is-correct::before{ color:var(--tc-good) !important; }
.test-item ul > li.correct::after,
.test-item ul > li.ok::after,
.test-item ul > li.right::after,
.test-item ul > li.is-correct::after,
ul.answers > li.correct::after,
ul.answers > li.ok::after,
ul.answers > li.right::after,
ul.answers > li.is-correct::after,
.sim-item ul > li.correct::after,
.sim-item ul > li.ok::after,
.sim-item ul > li.right::after,
.sim-item ul > li.is-correct::after,
.opts > .opt.correct::after,
.opts > .opt.ok::after,
.opts > .opt.right::after,
.opts > .opt.is-correct::after{
  content:'✓' !important;
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:var(--tc-good) !important;
  background:none !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  font-size:15px !important;
  font-weight:800 !important;
  animation:none !important;
}
.test-item ul > li.incorrect,
.test-item ul > li.wrong,
.test-item ul > li.bad,
.test-item ul > li.is-wrong,
ul.answers > li.incorrect,
ul.answers > li.wrong,
ul.answers > li.bad,
ul.answers > li.is-wrong,
.sim-item ul > li.incorrect,
.sim-item ul > li.wrong,
.sim-item ul > li.bad,
.sim-item ul > li.is-wrong,
.opts > .opt.incorrect,
.opts > .opt.wrong,
.opts > .opt.bad,
.opts > .opt.is-wrong{
  background:var(--tc-bad-soft) !important;
  color:var(--tc-bad-ink) !important;
  border-color:var(--tc-bad) !important;
  text-decoration:none !important;
  animation:none !important;
}
.test-item ul > li.incorrect::before,
.test-item ul > li.wrong::before,
.test-item ul > li.bad::before,
.test-item ul > li.is-wrong::before,
ul.answers > li.incorrect::before,
ul.answers > li.wrong::before,
ul.answers > li.bad::before,
ul.answers > li.is-wrong::before,
.sim-item ul > li.incorrect::before,
.sim-item ul > li.wrong::before,
.sim-item ul > li.bad::before,
.sim-item ul > li.is-wrong::before{ color:var(--tc-bad) !important; }
.test-item ul > li.incorrect::after,
.test-item ul > li.wrong::after,
.test-item ul > li.bad::after,
.test-item ul > li.is-wrong::after,
ul.answers > li.incorrect::after,
ul.answers > li.wrong::after,
ul.answers > li.bad::after,
ul.answers > li.is-wrong::after,
.sim-item ul > li.incorrect::after,
.sim-item ul > li.wrong::after,
.sim-item ul > li.bad::after,
.sim-item ul > li.is-wrong::after,
.opts > .opt.incorrect::after,
.opts > .opt.wrong::after,
.opts > .opt.bad::after,
.opts > .opt.is-wrong::after{
  content:'✕' !important;
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:var(--tc-bad) !important;
  background:none !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  font-size:14px !important;
  font-weight:800 !important;
  animation:none !important;
}

.test-item.inactive ul > li, .test-item.inactive ul.answers > li{ cursor:default !important; }

/* ── Телефон: ті самі значення, що й у хабі ───────────────── */
@media (max-width:600px){
.test-card,
#test-container .test-item,
#grid-archive .test-item,
#panel-archive .test-item,
#trainArea .test-item,
#trainTests .test-item,
#test-list .test-item,
.test-list .test-item,
.test-item-card{ padding:18px 16px !important;
  border-radius:15px !important; }
  .test-item h3, .test-item .question, .test-item .card-q, .card-q, .question{ font-size:16px !important; }
.test-item ul > li,
ul.answers > li,
.sim-item ul > li,
.opts > .opt{ font-size:14.5px !important;
  padding:13px 16px !important; }
.test-item ul > li,
ul.answers > li,
.sim-item ul > li,
.test-card .opts > .opt{ padding:13px 16px 13px 48px !important; }
.test-item ul > li::before,
ul.answers > li::before,
.sim-item ul > li::before,
.test-card .opts > .opt::before{ width:26px !important;
  height:26px !important;
  left:10px !important; }
}

/* ═══════════════════════════════════════════════════════════
   КНОПКА СКАРГИ — розмір нарівні з рештою іконок картки.

   Архів і ШІ-пояснення сидять у .vidgets_for_test і беруть свої
   36x36 з assets/krok/css/test-features.css. Скарги в КРОК-хабі
   немає, тож у тому файлі правила на неї теж немає, а єдиний, хто
   її стилізував (assets/subject/choose.css, 38px), на сторінці
   тесту не вантажиться — іконка лишалась голою, у натуральний
   розмір SVG. Кнопка малюється компонентом test_card.php, тож і
   розмір їй задаємо тут, поряд з рештою компонента.
   ═══════════════════════════════════════════════════════════ */
.test-item.test-card .vidgets_for_test .report-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;
}
.test-item.test-card .vidgets_for_test .report-btn img{
  width:22px; height:22px; display:block; object-fit:contain;
}
.test-item.test-card .vidgets_for_test .report-btn:hover{ background:var(--tc-fill, #f1eff9); }
body.dark-mode .test-item.test-card .vidgets_for_test .report-btn:hover{ background:rgba(255,255,255,.08); }

/* Іконка скарги — report-test.svg із fill:#000000, тобто суцільно
   чорна. Сама кнопка прозора, тож у темній темі іконка зливалася з
   тлом картки й кнопка читалась як порожнє місце. Робимо світлою.
   Іконку обговорення (кольорову) навмисно не чіпаємо. */
body.dark-mode .test-item.test-card .vidgets_for_test .report-btn img,
body.dark-mode .vidgets_for_test .report-btn img,
body.dark-mode .vidgets_for_test .divforarchive img{
  filter:brightness(0) invert(.88);
}
/* У стані «в архіві» іконка своя, зелена — лишаємо як є. */
body.dark-mode .vidgets_for_test .divforarchive.archived img{ filter:none; }

/* ═══════════════════════════════════════════════════════════
   ОЛІВЕЦЬ + ФОРМА ПРАВКИ ТЕСТУ (assets/common/test-edit.js).
   Кнопку малює компонент лише адміну, тож на звичайних
   сторінках цих правил ніщо не торкається.
   ═══════════════════════════════════════════════════════════ */
.test-item.test-card .vidgets_for_test .edit-btn,
.test-item .vidgets_for_test .edit-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;
  color:var(--tc-accent, #8b80f0);
  transition:background .15s;
}
.test-item .vidgets_for_test .edit-btn svg{ width:20px; height:20px; display:block }
.test-item .vidgets_for_test .edit-btn:hover{ background:var(--tc-fill, #f1eff9) }
body.dark-mode .test-item .vidgets_for_test .edit-btn:hover{ background:rgba(255,255,255,.08) }

/* поля форми */
.te-f{ display:block; margin-bottom:14px }
.te-f > span{
  display:block; margin-bottom:6px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--ms-muted, #64748b); text-transform:uppercase;
}
.te-f > span i{ font-style:normal; font-weight:500; text-transform:none; opacity:.85 }
.te-f textarea, .te-f input[type="text"]{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--ms-line, #e2e8f0);
  background:var(--ms-surface, #fff); color:var(--ms-ink, #0f172a);
  font:500 14px/1.55 inherit; outline:none; resize:vertical;
}
.te-f textarea:focus, .te-f input[type="text"]:focus{
  border-color:var(--ms-accent, #0d9488);
  box-shadow:0 0 0 3px var(--ms-accent-soft, #ecfdf5);
}
/* ── РЕДАКТОР ВАРІАНТІВ ───────────────────────────────────────
   Було: одна textarea «по одному в рядку» + окреме поле, куди
   правильну відповідь треба було передрукувати текстом. Тепер
   рядок = поле + кружечок; що позначив, те й правильне. */
.te-f--opts{ display:block; margin-bottom:14px }
.te-opts{ display:flex; flex-direction:column; gap:8px }

.te-opt{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:11px;
  border:1px solid var(--ms-line, #e2e8f0);
  background:var(--ms-surface, #fff);
  transition:border-color .15s ease, background .15s ease;
}
.te-opt:focus-within{
  border-color:var(--ms-accent, #0d9488);
  box-shadow:0 0 0 3px var(--ms-accent-soft, #ecfdf5);
}
/* Правильний — зелена підкладка: видно, не вчитуючись у текст. */
.te-opt.is-correct{ border-color:#10b981; background:rgba(16,185,129,.08) }
body.dark-mode .te-opt.is-correct{ background:rgba(16,185,129,.14) }

/* Нативний radio сховано, але лишається в DOM — працюють клавіатура
   й читалки з екрана. */
.te-pick{ position:relative; flex:0 0 auto; width:26px; height:26px; cursor:pointer }
.te-pick input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.te-pick span{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--ms-line, #e2e8f0);
  background:var(--ms-surface, #fff);
  display:flex; align-items:center; justify-content:center;
  transition:.15s ease;
}
.te-pick span::after{
  content:''; width:9px; height:5px; margin-top:-2px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0; transition:.15s ease;
}
.te-pick input:checked + span{ border-color:#10b981; background:#10b981 }
.te-pick input:checked + span::after{ opacity:1; transform:rotate(-45deg) scale(1) }
.te-pick input:focus-visible + span{ box-shadow:0 0 0 4px rgba(16,185,129,.28) }

.te-letter{
  flex:0 0 auto; width:18px; text-align:center;
  font-size:12.5px; font-weight:800; color:var(--ms-muted, #64748b);
}
.te-opt.is-correct .te-letter{ color:#0f766e }
body.dark-mode .te-opt.is-correct .te-letter{ color:#5eead4 }

.te-opt .te-text{
  flex:1; min-width:0; border:0; background:transparent; padding:6px 0;
  color:var(--ms-ink, #0f172a); font:500 14px/1.5 inherit; outline:none;
}

.te-del{
  flex:0 0 auto; width:28px; height:28px; border:0; border-radius:8px;
  background:transparent; color:var(--ms-muted, #64748b);
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s ease;
}
.te-del:hover{ background:rgba(185,28,28,.1); color:#b91c1c }

.te-opts-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px }
.te-add{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border:1px dashed var(--ms-line, #e2e8f0); border-radius:9px;
  background:none; color:var(--ms-accent, #0d9488);
  font:600 13px inherit; cursor:pointer; transition:.15s ease;
}
.te-add:hover{ border-color:var(--ms-accent, #0d9488); background:var(--ms-accent-soft, #ecfdf5) }
.te-tip{ font-style:normal; font-size:12px; color:var(--ms-muted, #64748b) }

@media (max-width:600px){
  .te-opt{ gap:7px; padding:6px 8px }
  .te-letter{ width:13px; font-size:11.5px }
  .te-tip{ display:none }
}

.te-load{ padding:22px 4px; color:var(--ms-muted, #64748b); font-size:14px; text-align:center }
.te-msg{ margin-right:auto; font-size:13px; font-weight:600; color:var(--ms-muted, #64748b) }
.te-msg.is-ok{ color:#0f766e }
.te-msg.is-bad{ color:#b91c1c }
body.dark-mode .te-msg.is-ok{ color:#5eead4 }
body.dark-mode .te-msg.is-bad{ color:#fca5a5 }

@media (max-width:600px){
  .te-f{ margin-bottom:11px }
  .te-f textarea, .te-f input[type="text"]{ padding:9px 10px; font-size:13.5px }
}

/* ═══════════════════════════════════════════════════════════
   ПАНЕЛЬ ФІЛЬТРІВ АРХІВУ (views/archivedTestsView.php).

   Один рядок пігулок-селектів + пошук + хрестик. Підписи полів
   не виносимо нагору — вони й так у першому пункті кожного
   списку («Усі предмети», «Усі теми»…), а окремий ряд лейблів
   робив панель удвічі вищою й ламався на телефоні.

   Токени спільні з карткою, тож темна тема працює сама.
   ═══════════════════════════════════════════════════════════ */
.arch-bar{ margin:14px 0 12px }
.arch-bar__row{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; justify-content:flex-start }

.arch-sel{
  /* Фіксована помірна ширина, а не «за вмістом»: назви тем бувають
     по 40+ символів, і чотири таких селекти розтягувались на всю
     ширину сторінки. Довгий текст обрізаємо трикрапкою — повна
     назва лишається в самому списку. */
  flex:0 0 auto; width:158px;
  padding:8px 26px 8px 12px; border-radius:999px;
  overflow:hidden; white-space:nowrap;
  border:1.5px solid var(--tc-line, #ece9f6);
  background:var(--tc-surface, #fff); color:var(--tc-ink, #2b2735);
  font:600 13px/1.3 inherit; cursor:pointer; outline:none;
  /* стрілка — фоном, щоб не тягнути ще один елемент */
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a95a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px;
  text-overflow:ellipsis;
  transition:border-color .14s ease, color .14s ease;
}
.arch-sel:hover{ border-color:var(--tc-accent, #8b80f0) }
.arch-sel:focus{ border-color:var(--tc-accent, #8b80f0) }
/* обраний фільтр видно одразу — заливка акцентом */
.arch-sel.is-on{
  background-color:var(--tc-fill, #f1eff9);
  border-color:var(--tc-accent, #8b80f0);
  color:var(--tc-accent-hov, #756af0);
}

.arch-search{ position:relative; flex:0 0 auto; width:190px }
.arch-search svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; pointer-events:none;
  fill:none; stroke:var(--tc-muted, #9a95a8); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.arch-search input{
  width:100%; padding:8px 13px 8px 33px; border-radius:999px;
  border:1.5px solid var(--tc-line, #ece9f6);
  background:var(--tc-surface, #fff); color:var(--tc-ink, #2b2735);
  font:500 13px/1.3 inherit; outline:none;
}
.arch-search input:focus{ border-color:var(--tc-accent, #8b80f0) }
.arch-search input::-webkit-search-cancel-button{ cursor:pointer }

.arch-clear{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1.5px solid var(--tc-line, #ece9f6);
  background:var(--tc-surface, #fff); color:var(--tc-muted, #9a95a8);
  font-size:14px; line-height:1;
}
.arch-clear:hover{ border-color:var(--tc-bad, #ef8e9c); color:var(--tc-bad, #ef8e9c) }

.arch-bar__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.arch-count{
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--tc-muted, #9a95a8);
}
.arch-chips{ display:flex; gap:6px; flex-wrap:wrap }
.arch-chip{
  padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--tc-fill, #f1eff9); color:var(--tc-accent-hov, #756af0);
}

body.dark-mode .arch-sel,
body.dark-mode .arch-search input,
body.dark-mode .arch-clear{ background:#1b1a22; border-color:#322f3e; color:#e8e6ef }
body.dark-mode .arch-sel.is-on{ background-color:rgba(155,144,245,.16); color:#b0a8f8 }
body.dark-mode .arch-chip{ background:rgba(155,144,245,.16); color:#b0a8f8 }

@media (max-width:600px){
  .arch-bar{ margin:10px 0 10px }
  .arch-bar__row{ gap:6px }
  /* на телефоні — по два в ряд, там ширина екрана й так мала */
  .arch-sel{ flex:1 1 calc(50% - 4px); width:auto; font-size:12.5px; padding:7px 24px 7px 10px }
  .arch-search{ flex:1 1 100%; width:auto; order:9 }
  .arch-clear{ order:10; width:32px; height:32px }
  .arch-bar__meta{ margin-top:8px }
}
