/* ============================================================
   ХАБ ТЕМ ПРЕДМЕТА (views/subject/chooseView.php)
   ------------------------------------------------------------
   Спільна вʼюха для 6 предметів (Біохімія, Патфіз, Патанат,
   Гістологія, Фармакологія, Урологія). Стилі були інлайном —
   14.6 КБ їхали заново на кожен захід у кожен предмет.
============================================================ */
:root{
  --bg:#f4faf8; --card:#ffffff; --card-2:#f0f6f4; --ink:#122e2a; --muted:#4f6b66; --line:#dde8e5;
  --ok:#10b981; --ok-strong:#0c9f6e; --bad:#dc2626; --brand:#0891b2; --brand-2:#10b981;
  --container:1100px; --gap:16px; --shadow:0 6px 20px rgba(13,60,52,.07);
  --radius:14px; --tab-h:42px; --footer-h:66px;
  --fhead:'Ubuntu',system-ui,sans-serif; --fbody:'Raleway',system-ui,sans-serif;
}
body.dark-mode{
  --bg:#0b1413; --card:#121e1c; --card-2:#182825; --ink:#e9f2f0; --muted:#9db4af; --line:#243733;
  --ok:#2f9e7b; --ok-strong:#277f64; --bad:#f87171; --brand:#5fb0c9;
  --shadow:0 8px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--fbody);
  color:var(--ink); background:var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.container{ max-width:var(--container); margin:0 auto; padding:100px 18px 40px; width:100%; flex:1; }

h1{ font:800 clamp(20px,3vw,30px)/1.05 var(--fhead); text-align:center; text-transform:uppercase; letter-spacing:.3px; margin:6px 0 12px; animation:fadeDown .5s ease both; }
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.hub-search{ display:flex; justify-content:center; margin:8px 0 18px; }
.hub-search input{ height:46px; width:min(760px,100%); padding:0 14px; border:1px solid var(--line); background:#fff; border-radius:12px; outline:none; transition:border-color .2s, box-shadow .2s; }
.hub-search input:focus{ border-color:#bfdbfe; box-shadow:0 0 0 6px rgba(59,130,246,.12) }

.tabs-wrap{ display:flex; justify-content:center; margin:6px 0 18px; overflow-x:auto; scrollbar-width:none; }
.tabs-wrap::-webkit-scrollbar{ display:none; }
.tabs{ position:relative; display:inline-grid; grid-auto-flow:column; gap:8px; padding:8px; background:rgba(255,255,255,.75); backdrop-filter:saturate(180%) blur(10px); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); flex-wrap:nowrap; min-width:fit-content; }
.tab-btn{ position:relative; z-index:1; height:var(--tab-h); min-width:128px; padding:0 16px; border:none; background:transparent; border-radius:999px; cursor:pointer; font:700 13px/var(--tab-h) var(--fhead); color:#0b1220; letter-spacing:.2px; transition:transform .15s ease, color .2s ease, filter .2s ease; flex:0 0 auto; white-space:nowrap; }
.tab-btn:hover{ transform:translateY(-1px); filter:saturate(1.05) }
.tab-btn[aria-selected="true"]{ color:#fff; background:var(--ok); box-shadow:0 4px 14px rgba(16,185,129,.22); transform:translateY(-1px); }
@media(max-width:640px){ .tabs{ padding:6px; gap:6px; border-radius:10px; } .tab-btn{ font-size:12px; min-width:90px; padding:0 12px; } }

.panels{position:relative}
.panel{display:none; opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease}
.panel.active{display:block; opacity:1; transform:translateY(0)}

.test-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); list-style:none }
@media(max-width:1024px){ .test-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:640px){ .test-grid{ grid-template-columns:1fr } }

.test-item-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .2s; animation:cardPop .25s ease both; display:flex; flex-direction:column; }
@keyframes cardPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.test-item-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(15,23,42,.12) }

.test-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; margin-bottom:6px; line-height:1.3 }
.test-sub{ font-size:13px; color:var(--muted); margin-bottom:10px }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font:800 12px/1 var(--fbody); background:#f1f5f9; border:1px solid var(--line) }
.badge--progress{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.badge--total{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a }
.badge--locked{ background:#fef2f2; border-color:#fecaca; color:#991b1b; padding-left:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23991b1b'%3E%3Cpath d='M17 8h-1V6a4 4 0 10-8 0v2H7a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2v-9a2 2 0 00-2-2zm-7-2a2 2 0 114 0v2h-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:8px center; background-size:13px; }
.badge--free{ background:linear-gradient(145deg,#fff7ed,#ffedd5); border-color:#fdba74; color:#9a3412; padding:6px 10px 6px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M12 2l2.39 4.84L20 8l-4 3.9.94 5.5L12 14.77 7.06 17.4 8 11.9 4 8l5.61-1.16L12 2z'/%3E%3C/svg%3E"),linear-gradient(145deg,#fff7ed,#ffedd5);
  background-repeat:no-repeat,no-repeat; background-position:8px center,0 0; background-size:14px,100%; }
.test-item-card.is-free{ border-color:#fdba74; box-shadow:0 6px 18px rgba(234,88,12,.10); }
.test-item-card.is-free:before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#fb923c,#f97316); border-radius:18px 0 0 18px; }

.bang-soft{ display:inline-flex; align-items:center; gap:6px; min-width:28px; height:26px; padding:0 10px 0 28px; border-radius:8px; background:linear-gradient(145deg,#fff5f5,#fee2e2); border:1px solid #fecaca; color:#b91c1c; font-weight:700; font-size:13px; text-decoration:none; box-shadow:0 2px 6px rgba(255,0,0,.05); transition:all .2s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b91c1c' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1010 10A10.011 10.011 0 0012 2zm4.24 13.76a1 1 0 01-1.41 0L12 12.93l-2.83 2.83a1 1 0 01-1.41-1.41L10.59 11 8 8.41a1 1 0 011.41-1.41L12 9.59l2.83-2.83a1 1 0 011.41 1.41L13.41 11l2.83 2.83a1 1 0 010 1.41z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:8px center; background-size:14px; }
.bang-soft:hover{ background:linear-gradient(145deg,#ffeaea,#fecaca); transform:translateY(-1px); box-shadow:0 4px 10px rgba(255,0,0,.1); filter:saturate(1.1); }

.test-buttons{ display:flex; gap:10px; margin-top:auto }
.btn{ flex:1 1 0; display:inline-flex; justify-content:center; align-items:center; height:40px; border:none; border-radius:12px; color:#fff; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(34,197,94,.18) }
.btn-start{ background:var(--ok) }
.btn-start:hover{ background:var(--ok-strong) }

.ph-promo{ position:relative; overflow:hidden; background:linear-gradient(135deg,#fffbeb 0%, #fef3c7 50%, #fde68a 100%); border:1px solid #fcd34d; border-radius:18px; padding:18px 22px; margin:0 auto 22px; box-shadow:0 10px 30px rgba(245,158,11,.18); display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ph-promo-icon{ width:54px; height:54px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg,#f59e0b,#d97706); color:#fff; font-size:26px; font-weight:800; }
.ph-promo-body{ flex:1; min-width:220px }
.ph-promo-title{ font:800 16px/1.25 var(--fhead); color:#7c2d12; margin-bottom:4px; }
.ph-promo-text{ color:#78350f; font-size:14px; line-height:1.45 }
.ph-promo-text b{ font-weight:700 }
.ph-promo-cta{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:12px; text-decoration:none; background:linear-gradient(180deg,#f59e0b,#d97706); color:#fff; font-weight:800; font-size:14px; box-shadow:0 6px 18px rgba(245,158,11,.35); transition:transform .15s ease, filter .15s ease; white-space:nowrap; }
.ph-promo-cta:hover{ transform:translateY(-2px); filter:brightness(1.05) }
.ph-promo-mini{ font-size:12px; color:#9a3412; margin-top:6px; }

.empty{ color:#94a3b8; text-align:center; margin:18px auto }
.empty.big{ font:800 clamp(22px,5vw,34px)/1.05 var(--fhead); letter-spacing:.3px; color:#0f172a; padding:32px 16px; border:2px dashed #e2e8f0; border-radius:16px; background:#ffffff; box-shadow:var(--shadow); }

.page-title{ width:100%; text-align:center; margin:10px 0 14px; font:700 clamp(18px,4vw,26px)/1.05 var(--fhead); color:#0f172a }
.card{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:18px }
.test-list{ margin-top:8px }
.test-item{ position:relative; background:#f8fafc; border-radius:12px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:16px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease }
.test-item:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
.meta-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; color:#64748b; font-size:12px }
.meta-chip{ background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:4px 8px }
.test-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.qn{ font:600 15px/1 var(--fhead); color:#111827; display:flex; align-items:center; gap:8px }
.question{ font:16px var(--fhead); margin-bottom:10px }
.answers{ list-style:none }
.answers li{ padding:10px 12px; margin:6px 0; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.05); cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.answers li:hover{ background:#eaf2ff; transform:translateX(4px) }
.answers li.selected{ background:#dbeafe }
.answers li.correct{ background:linear-gradient(135deg, #d1fae5, #a7f3d0); color:#065f46; font-weight:600; position:relative }
.answers li.correct:after{ content:'✔'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-weight:700; color:#10b981 }
.answers li.incorrect{ background:linear-gradient(135deg, #fee2e2, #fecaca); color:#991b1b; text-decoration:line-through }
.test-item.inactive .answers li{ pointer-events:none }
.vidgets_for_test{ display:flex; align-items:center; gap:10px }
.divforarchive,.report-btn,.discussion-btn,.explain-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; background:#fff; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.divforarchive:hover,.report-btn:hover,.discussion-btn:hover,.explain-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,185,129,.18); background-color:#f8fffb }
.divforarchive img,.report-btn img,.discussion-btn img,.explain-btn img{ width:20px; height:20px }
.divforarchive.archived{ background:#f0fdf4; border-color:#bbf7d0 }
.explain-fab{ margin-top:12px; width:40px; height:40px }
.progress-wrap{ position:sticky; bottom:20px; left:0; right:0; margin-top:10px; }
.progress-bar{ position:relative; height:18px; border-radius:10px; background:#f1f5f9; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08) }
.pg-green,.pg-red{ position:absolute; top:0; height:100% }
.pg-green{ left:0; background:rgba(16,185,129,.45); transition:width .4s }
.pg-red{ right:0; background:rgba(239,68,68,.45); transition:width .4s; transform:scaleX(-1) }
.progress-ctrl{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:8px }
.pill{ background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:6px 12px; font-weight:600 }
.btn-danger{ background:var(--bad); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer }
.spinner{ display:none; margin:12px auto; width:38px; height:38px; border:4px solid #e5f3eb; border-top-color:var(--ok); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{to{transform:rotate(360deg)}}

.modal{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:2000; animation:fadeIn .2s ease both; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal.open{ display:flex; }
.modal .content{ position:relative; width:min(620px,92vw); max-height:86vh; overflow:auto; background:#fff; border-radius:14px; padding:18px 18px 14px; box-shadow:0 20px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(15,23,42,.06); animation:scaleIn .2s ease both; }
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.close-x{ position:absolute; top:10px; right:14px; font-size:22px; font-weight:700; cursor:pointer; color:#475569; transition:transform .15s ease, color .15s ease; }
.close-x:hover{ transform:rotate(90deg); color:#0f172a }
.explain-wrap{display:flex;flex-direction:column;gap:14px}
.ex-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px}
.ex-section h4{font-family:var(--fhead);margin-bottom:6px;font-size:16px}
.ex-section p{line-height:1.55}
.ex-others details{background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin:8px 0}
.ex-others summary{font-weight:600;cursor:pointer;outline:none}
.ex-empty{color:#64748b}
footer,.site-footer{ position:static; height:var(--footer-h); margin-top:auto; background:#fff; border-top:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; z-index:10; box-shadow:0 -8px 24px rgba(15,23,42,.06); }

body.dark-mode{ background:#0f172a; color:#e5e7eb }
body.dark-mode .test-item-card{ background:#1e293b; border-color:#334155 }
body.dark-mode .hub-search input{ background:#1e293b; border-color:#334155; color:#e5e7eb }
body.dark-mode .empty.big{ background:#0b1220; color:#e5e7eb; border-color:#334155 }
body.dark-mode .card{ background:#1e293b }
body.dark-mode .test-item{ background:#1e293b }
body.dark-mode .answers li{ background:#334155; color:#f1f5f9 }
body.dark-mode .answers li:hover{ background:#3b5879 }
body.dark-mode .modal .content{ background:#0b1220; color:#e5e7eb; box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 0 1px rgba(148,163,184,.08) }
body.dark-mode .ex-section{ background:#0f172a; border-color:#1f2a3a }
body.dark-mode .ex-others details{ background:#0f172a; border-color:#1f2a3a }

.mix-cta-wrap{ display:flex; justify-content:center; margin:0 0 16px; }
.mix-cta{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 24px; border-radius:10px; background:#fff; color:#0f172a; border:1px solid var(--line); font:600 14px var(--fbody); text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.mix-cta:hover{ border-color:#cbd5e1; background:#f8fafc; }
body.dark-mode .mix-cta{ background:#1e293b; color:#e5e7eb; border-color:#334155 }

/* ═══════════════════════════════════════════════════════════════
   ТЕМНА ТЕМА: ЗАЛИШКИ БІЛОГО.

   Файл має повний набір темних змінних (--card, --line, --ink…),
   але частина елементів фарбувалась повз них — прямо `#fff` та
   `#e2e8f0` у правилі. У темряві саме вони світили білими плямами:
   кнопки на картці (скарга, пояснення, архів, обговорення), чипи
   мета-даних, смуга вкладок і пігулки лічильників.

   Нижче — ті самі елементи через змінні, а не нові кольори.
   ═══════════════════════════════════════════════════════════════ */

/* Кнопки-дії в картці тесту (у т.ч. «Поскаржитись»). */
body.dark-mode .divforarchive,
body.dark-mode .report-btn,
body.dark-mode .discussion-btn,
body.dark-mode .explain-btn{
  background:var(--card-2);
  border-color:var(--line);
  box-shadow:none;
}
body.dark-mode .divforarchive:hover,
body.dark-mode .report-btn:hover,
body.dark-mode .discussion-btn:hover,
body.dark-mode .explain-btn:hover{
  background-color:#1f332e;
  border-color:#356054;
  box-shadow:none;
}
/* Іконки: report-test.svg і archive.svg суцільно чорні (fill:#000)
   і в темряві зливаються з кнопкою. Робимо їх світлими.
   testdiscussion.svg НЕ чіпаємо — вона кольорова (синій/червоний)
   і видима як є; інверсія лише зіпсувала б їй кольори. */
body.dark-mode .divforarchive img,
body.dark-mode .report-btn img{
  filter:brightness(0) invert(.88);
}
body.dark-mode .divforarchive.archived{
  background:#16342a; border-color:#2f7d5f;
}
body.dark-mode .divforarchive.archived img{ filter:none }

/* Смуга вкладок: була напівпрозорим білим із блюром. */
body.dark-mode .tabs{
  background:var(--card);
  border-color:var(--line);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.dark-mode .tab-btn{ color:var(--ink) }
body.dark-mode .tab-btn[aria-selected="true"]{
  color:#fff; background:var(--ok); box-shadow:none;
}

/* Чипи й пігулки. */
body.dark-mode .meta-chip,
body.dark-mode .pill{
  background:var(--card-2);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:none;
}

body.dark-mode .qn{ color:var(--ink) }
body.dark-mode .progress-bar{ background:#1a2b27; box-shadow:none }
body.dark-mode .empty.big{ background:var(--card); border-color:var(--line) }
body.dark-mode .site-footer{ background:var(--card); border-color:var(--line) }

/* Промо-банер підписки: жовтий градієнт у темряві сліпить. */
body.dark-mode .ph-promo{
  background:#241d0e;
  border-color:#5c4718;
  box-shadow:none;
}
body.dark-mode .ph-promo-title{ color:#f5c977 }
body.dark-mode .ph-promo-text,
body.dark-mode .ph-promo-mini{ color:#d8c9a8 }
body.dark-mode .ph-promo-icon{ background:#8a6a24; color:#fff }
body.dark-mode .ph-promo-cta{ background:#b8862c; color:#1a1207; box-shadow:none }

/* Бейджі «Виконано / Всього» на картці теми.
   Були світло-зеленим #ecfdf5 і світло-блакитним #eff6ff із темним
   текстом — у темряві це дві яскраві плями на кожній картці, а їх
   на сторінці десятки. Тепер темна підкладка + світлий текст:
   кольорове кодування (зелений = прогрес, синій = всього) лишилось,
   але читається як частина картки, а не як підсвітка. */
body.dark-mode .badge{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  color:var(--ink);
}
body.dark-mode .badge--progress{
  background:rgba(45,212,150,.13);
  border-color:rgba(45,212,150,.28);
  color:#7fe0b6;
}
body.dark-mode .badge--total{
  background:rgba(96,165,250,.13);
  border-color:rgba(96,165,250,.26);
  color:#9dc4f5;
}
body.dark-mode .badge--full{
  background:rgba(45,212,150,.18);
  border-color:rgba(45,212,150,.36);
  color:#8fe8c4;
}
/* «Безкоштовна тема» — помаранчевий бейдж із зіркою у фоні. */
body.dark-mode .badge--free{
  background:rgba(234,140,60,.15);
  border-color:rgba(234,140,60,.34);
  color:#f0b070;
}
body.dark-mode .test-item-card.is-free{
  border-color:rgba(234,140,60,.34);
  box-shadow:none;
}

/* Підпис «Тестові завдання по темі» та назва теми. */
body.dark-mode .test-sub{ color:var(--muted) }
body.dark-mode .test-title{ color:var(--ink) }