/* ==== assets/krok/css/mainhub.css ==== */
/* =========================
   KROK HUB - ULTRA MODERN DESIGN
   Glassmorphism + Gradient Animations
   ========================= */

/* ===== CSS VARIABLES ===== */
:root {
  /* Colors */
  --bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
  --card: rgba(255, 255, 255, 0.8);
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(226, 232, 240, 0.8);

  --blue: #0ea5e9;
  --blue-dark: #0284c7;
  --purple: #6366f1;
  --purple-dark: #4f46e5;
  --green: #10b981;
  --green-dark: #059669;
  --green-soft: #d1fae5;

  /* Shadows */
  --shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.15);

  /* Layout */
  --container-w: 1200px;
  --gap: 20px;
  --radius: 24px;
  --field-h: 52px;

  /* Animation */
  --dur-fast: 0.18s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bgPulse {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(10deg) scale(1.1);
  }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.25);
  }
}

@keyframes krokShineX {
  to { transform: translateX(160%); }
}

@keyframes krokScan {
  0% { transform: translateX(0); }
  100% { transform: translateX(500%); }
}

@keyframes demoPulse {
  0%, 100% {
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.25);
  }
  50% {
    box-shadow: 0 16px 50px rgba(16, 185, 129, 0.35);
  }
}

@keyframes demoFloat {
  0%, 100% {
    transform: translateY(0) scale(1.02);
  }
  50% {
    transform: translateY(-6px) scale(1.03);
  }
}

@keyframes particlesFloat {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.4;
  }
  25% {
    transform: translate(20px, -30px) rotate(90deg);
    opacity: 0.7;
  }
  50% {
    transform: translate(-15px, -50px) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: translate(-30px, -20px) rotate(270deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
    opacity: 0.4;
  }
}

/* ===== BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: fadeIn 0.6s var(--ease);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: bgPulse 20s ease-in-out infinite alternate;
}

/* ===== CONTAINER ===== */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 28px 20px 36px;
  position: relative;
  z-index: 1;
}

/* ===== HEADING ===== */
h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 8px 0 20px;
  position: relative;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideInDown 0.6s var(--ease);
}

h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 0%, var(--blue) 50%, var(--purple) 100%);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
  animation: shimmer 2.5s linear infinite;
}

/* ===== KROK PILL ===== */
.krok-pill {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: 12px auto 18px;
}

.krok-pill__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
  transition: all 0.3s var(--ease);
}

.krok-pill__badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.krok-logo {
  display: block;
  height: clamp(24px, 2.4vw, 32px);
}

.krok-logo text {
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 35px;
}

.krok-logo .t-krok {
  fill: var(--ink);
}

.krok-logo .t-dot {
  fill: var(--muted);
}

.krok-logo .t-hub {
  fill: url(#hubGrad);
}

.shine-rect {
  transform: translateX(-60%);
  animation: krokShineX 2.8s linear infinite;
}

.krok-pill__underline {
  position: relative;
  height: 3px;
  width: min(240px, 70vw);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.4), rgba(14, 165, 233, 0.4));
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.2);
}

.krok-pill__scan {
  position: absolute;
  top: 0;
  left: -25%;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: krokScan 2.2s linear infinite;
}

/* ===== TABS ===== */
.tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 14px auto 20px;
  position: relative;
  animation: fadeInUp 0.5s var(--ease) 0.1s both;
}

.tab-btn {
  position: relative;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(12px);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #475569;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  isolation: isolate;
}

.tab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 100%), rgba(14, 165, 233, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  border-color: rgba(14, 165, 233, 0.3);
}

.tab-btn:hover::before {
  opacity: 1;
}

.tab-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
  font-weight: 800;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeInUp 0.4s var(--ease);
}

/* ===== SEARCH BAR ===== */
.hub-search {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 20px;
  flex-wrap: wrap;
  animation: fadeInUp 0.6s var(--ease) 0.2s both;
}

.hub-search input,
.hub-search select {
  height: var(--field-h);
  line-height: var(--field-h);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.hub-search input {
  width: min(760px, 100%);
}

.hub-search input::placeholder {
  color: #94a3b8;
}

.hub-search input:focus,
.hub-search select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15),
              0 8px 24px rgba(14, 165, 233, 0.2);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 1);
}

.hub-search select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px 18px;
}

.search-header {
  margin: 10px 0 14px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
  animation: fadeIn 0.3s var(--ease);
}

mark {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 0.1em 0.3em;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
  animation: glow 2s ease-in-out infinite;
}

/* ===== GRID (CARDS) ===== */
.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;
  }
}

/* ===== CARD ===== */
.test-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 251, 255, 0.9) 100%);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: 22px 20px 26px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08),
              0 2px 8px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  animation: cardIn 0.5s var(--ease);
}

.test-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.test-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 48px rgba(14, 165, 233, 0.15),
              0 8px 24px rgba(15, 23, 42, 0.12);
  border-color: rgba(14, 165, 233, 0.3);
}

.test-item:hover::before {
  opacity: 1;
}

.test-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

/* Demo booklet special card */
.test-item.demo-booklet {
  position: relative;
  border: 3px dashed var(--green) !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 244, 0.95) 100%);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.25);
  transform: scale(1.02);
  z-index: 10;
  animation: demoPulse 4s ease-in-out infinite, demoFloat 6s ease-in-out infinite;
  overflow: visible;
}

.demo-booklet::before {
  content: '';
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, var(--green) 0%, transparent 8%),
    radial-gradient(circle at 80% 20%, var(--green) 0%, transparent 8%),
    radial-gradient(circle at 40% 40%, var(--green) 0%, transparent 8%),
    radial-gradient(circle at 60% 60%, var(--green) 0%, transparent 8%);
  opacity: 0.6;
  animation: particlesFloat 12s linear infinite;
  z-index: -1;
}

/* ── ПСИХО-БУКЛЕТ: фіолетовий, БЕЗ партіклів/анімації ── */
.test-item.psy-booklet {
  position: relative;
  border: 3px dashed #8b5cf6 !important;
  background: linear-gradient(135deg, rgba(245,243,255,0.95) 0%, rgba(243,240,255,0.95) 100%);
  box-shadow: 0 12px 36px rgba(139,92,246,0.20);
  z-index: 9;
  overflow: visible;
}
.psy-booklet::before { content: none !important; display: none !important; }
body.dark-mode .test-item.psy-booklet {
  border-color: #a78bfa !important;
  background: linear-gradient(135deg, rgba(124,92,246,0.14) 0%, rgba(99,102,241,0.10) 100%);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

/* Progress badge */
.test-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 36px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--green-dark);
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.8) 0%, rgba(167, 243, 208, 0.8) 100%);
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  transition: all 0.3s var(--ease);
}

.test-item:hover .test-progress {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* Buttons */
.test-buttons {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: nowrap;
}

.start-btn,
.history-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: 13px 16px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.history-btn {
  flex: 1.25 1 0;
  background: linear-gradient(135deg, var(--blue) 0%, #5aa1f1 100%);
  color: #ffffff;
}

.start-btn {
  flex: 0.75 1 0;
  background: linear-gradient(135deg, var(--green) 0%, #12c09a 100%);
  color: #ffffff;
}

.start-btn::after,
.history-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px 50px at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.start-btn:hover::after,
.history-btn:hover::after {
  opacity: 1;
}

.start-btn:hover,
.history-btn:hover {
  transform: translateY(-2px);
  filter: saturate(110%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.start-btn:active,
.history-btn:active {
  transform: translateY(0);
}

/* ===== MODALS ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s var(--ease);
}

.modal-content {
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  overflow: auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  color: var(--ink);
  padding: 24px 28px;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3),
              0 8px 24px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  animation: modalPop 0.4s var(--ease);
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.3);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: 10px;
}

.modal-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #64748b;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(226, 232, 240, 0.8) 100%);
  cursor: pointer;
  border: 1px solid rgba(203, 213, 225, 0.8);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  transition: all 0.3s var(--ease);
}

.close:hover {
  transform: rotate(90deg) scale(1.1);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* History table */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.history-table th,
.history-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.history-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 1;
}

.history-table tr:hover td {
  background: #f8fafc;
  transition: background 0.2s var(--ease);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.pagination button {
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.pagination button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.pagination button.disabled {
  background: #f1f5f9;
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== SEARCH RESULTS ===== */
#searchResults.search-view {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 8px;
}

.search-view .test-grid {
  display: block;
}

.search-view .test-item {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 251, 255, 0.9) 100%);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  animation: cardIn 0.4s var(--ease);
}

.search-view .test-item h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.search-view .test-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 10px;
}

.search-view .test-meta .chip {
  font-size: 10px;
  line-height: 1;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 600;
  letter-spacing: .01em;
  animation: fadeIn 0.3s var(--ease);
}

.search-view ul {
  list-style: none;
}

.search-view ul li {
  position: relative;
  padding: 16px 20px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: all 0.3s var(--ease);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.search-view ul li:hover {
  transform: translateX(6px);
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

.search-view ul li.correct {
  background: linear-gradient(135deg, var(--green-soft) 0%, #a7f3d0 100%);
  color: #065f46;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--green);
  border-color: rgba(16, 185, 129, 0.4);
}

.search-view ul li.correct::after {
  content: '✔';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--green);
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  animation: modalPop 0.3s var(--ease) 0.05s forwards;
}

/* ===== ARCHIVE PANEL ===== */
#panel-archive .test-item {
  margin-bottom: 24px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  transition: all 0.3s var(--ease);
  animation: fadeIn 0.4s var(--ease);
}

/* КРИТИЧНО: архів у стовпчик, не сіткою */
#grid-archive.test-grid,
#panel-archive .test-grid {
  display: block !important;
  grid-template-columns: unset !important;
  max-width: 900px;
  margin: 0 auto;
}

#panel-archive .test-item {
  margin-bottom: 24px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  transition: all 0.3s var(--ease);
  animation: fadeIn 0.4s var(--ease);
}

#panel-archive .test-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

#panel-archive .test-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#panel-archive .question-number {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

#panel-archive .test-item h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.4;
}

#panel-archive .test-item ul {
  list-style: none;
}

#panel-archive .test-item ul li {
  padding: 16px 20px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  cursor: default;
  transition: all 0.3s var(--ease);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

#panel-archive .test-item ul li:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

#panel-archive .test-item ul li.correct {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--green);
  border-color: rgba(16, 185, 129, 0.4);
}

#panel-archive .test-item ul li.correct::after {
  content: '✔';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 18px;
  font-weight: 900;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

#panel-archive .test-item ul li.incorrect {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

#panel-archive .test-item ul li.incorrect::after {
  content: '✘';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #ef4444;
  font-size: 18px;
  font-weight: 900;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  animation: modalPop 0.3s var(--ease) 0.05s forwards;
}

#panel-archive .test-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 10px;
}

#panel-archive .test-meta .chip {
  font-size: 10px;
  line-height: 1;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 600;
  letter-spacing: .01em;
}

#panel-archive .test-meta .chip strong {
  font-weight: 700;
  opacity: .7;
  margin-right: 2px;
}

@media (max-width: 600px) {
  #panel-archive .test-meta {
    gap: 4px;
    margin: 4px 0 8px;
  }
  #panel-archive .test-meta .chip {
    font-size: 9px;
    padding: 3px 7px;
  }
}

#panel-archive .vidgets_for_test {
  display: flex;
  align-items: center;
  gap: 12px;
}

#panel-archive .divforarchive,
#panel-archive .discussion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

#panel-archive .divforarchive:hover,
#panel-archive .discussion-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.4) 0%, rgba(167, 243, 208, 0.4) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

#panel-archive .divforarchive img,
#panel-archive .discussion-btn img {
  width: 22px;
  height: 22px;
}

/* Якщо в архіві видно фіксовані бари — резервуємо простір знизу,
   щоб футер не з'являвся під ними при скролі до низу сторінки. */
body.has-arch-bars {
  padding-bottom: 110px;
}
@media (max-width: 768px) {
  body.has-arch-bars {
    /* Мобільний bottom-nav (72px) вже додає свій padding;
       тут залишаємо ще місце для arch-progress (bottom:116) і arch-controls. */
    padding-bottom: 200px;
  }
}

/* Archive progress */
.arch-progress {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: min(1000px, 92vw);
  height: 24px;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  z-index: 1003;
  display: none;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.arch-green,
.arch-red {
  height: 100%;
  position: absolute;
  top: 0;
  transition: width 0.6s var(--ease);
}

.arch-green {
  left: 0;
  background: linear-gradient(90deg, var(--green) 0%, #34d399 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.arch-red {
  right: 0;
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  transform: scaleX(-1);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.arch-controls {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 52px;
  z-index: 1004;
  display: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.arch-counter {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(12px);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  font-weight: 800;
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: var(--ink);
}

.arch-finish {
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
  transition: all 0.3s var(--ease);
}

.arch-finish:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
}

/* Archive filters */
#archiveFilters.archive-filters {
  display: none;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.92) 100%);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  margin: 12px 0 16px;
}

#archiveFilters > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

#archiveFilters select,
#archiveFilters button {
  height: var(--field-h);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.3s var(--ease);
}

#archiveFilters .history-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--line) !important;
  filter: none !important;
}

#archiveFilters select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0 45px 0 18px;
  line-height: var(--field-h);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px 18px;
}

#archiveFilters select:focus,
#archiveFilters button:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15),
              0 4px 16px rgba(14, 165, 233, 0.2);
  transform: translateY(-1px);
}

#archiveFilters select:hover,
#archiveFilters button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

#archiveFilters #archFilteredCount {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

/* ===== TOPICS MODAL ===== */
.modal--open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(8px);
}

.topics {
  width: min(980px, 92vw);
  max-height: 86vh;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPop 0.4s var(--ease);
}

.topics__header {
  padding: 16px 20px;
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.topics__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topics__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.topics__search input {
  border: none;
  outline: none;
  font: inherit;
  width: 220px;
  min-width: 0;
  background: transparent;
  color: var(--ink);
}

.topics__close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.3s var(--ease);
}

.topics__close:hover {
  color: #ef4444;
  transform: rotate(90deg);
}

.topics__body {
  padding: 16px 20px;
  overflow: auto;
  scroll-behavior: smooth;
}

.topics__body::-webkit-scrollbar {
  width: 8px;
}

.topics__body::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.3);
  border-radius: 10px;
}

.topics__body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: 10px;
}

.subject {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.subject__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: all 0.3s var(--ease);
}

.subject__head:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.subject__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subject__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}

.badge {
  font-size: 12px;
  line-height: 1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 700;
}

.subject__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subject__btn {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.8) 0%, rgba(203, 213, 225, 0.8) 100%);
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.subject__btn:hover {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.subject__icon {
  transition: transform 0.3s var(--ease);
  color: #64748b;
}

.subject--collapsed .subject__icon {
  transform: rotate(-90deg);
}

.subject__body {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.subject--collapsed .subject__body {
  display: none;
}

.topic-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.topic-pill:hover {
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.3);
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}

.topic-pill input {
  flex: 0 0 auto;
  accent-color: var(--green);
  transform: translateY(2px);
  width: 18px;
  height: 18px;
}

.topic-pill span {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.3;
  font-size: 13px;
  font-weight: 500;
}

.topics__footer {
  padding: 14px 20px;
  border-top: 2px solid rgba(226, 232, 240, 0.8);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  bottom: 0;
}

.footer__left {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.footer__actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn--ghost:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-1px);
}

/* ===== SPINNER ===== */
.loading-spinner {
  display: none;
  margin: 16px auto;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(14, 165, 233, 0.2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== TOAST ===== */
#hubToast {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 1100;
  padding: 12px 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s var(--ease);
}

/* ===== DARK MODE TOGGLE ===== */
.dark-mode-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
  animation: pulse 3s ease-in-out infinite;
}

.dark-mode-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35);
}

#mode-icon {
  font-size: 26px;
  transition: transform 0.3s var(--ease);
}

.dark-mode-toggle:hover #mode-icon {
  transform: rotate(15deg) scale(1.1);
}

/* ===== DARK MODE =====
   Палітра уніфікована з сторінкою тестів (main.css):
   - фон #0b1220, картки #172033, hover #1f2a44 / #26344f
   - текст #e2e8f0, muted #94a3b8, бордери rgba(148,163,184,.10)
   - correct/incorrect — прозорі тінти, не суцільні кольори */
/* === ТЕМНИЙ РЕЖИМ — спрощений: нейтральний темний фон, білий текст,
   без градієнтів/світіння, м'який зелений / червоний для відповідей. === */
body.dark-mode {
  --bg: #0f0f11;
  --card: #1a1a1d;
  --card-2: #242428;
  --card-3: #2e2e33;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  background: #0f0f11;
  color: var(--ink);
}

/* Без декоративних радіальних градієнтів на тлі */
body.dark-mode::before {
  background: none;
}

body.dark-mode .tab-btn {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .tab-btn:hover {
  background: var(--card-2);
  border-color: var(--line-strong);
}

/* Активна вкладка — суцільна світліша поверхня + м'який зелений обідок (без градієнта) */
body.dark-mode .tab-btn.active {
  background: var(--card-3);
  color: var(--ink);
  border-color: rgba(74, 160, 110, 0.5);
  box-shadow: none;
}

body.dark-mode .test-item {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

body.dark-mode .test-item:hover {
  border-color: var(--line-strong);
}

/* Без кутового світіння на картці */
body.dark-mode .test-item::before {
  background: none;
}

body.dark-mode .test-title {
  color: var(--ink);
}

body.dark-mode .test-progress {
  border-color: rgba(74, 160, 110, 0.35);
  background: rgba(74, 160, 110, 0.14);
  color: #9ed4b4;
}

body.dark-mode .modal-content {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

body.dark-mode .close {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .history-table th {
  background: var(--card-2);
  color: var(--ink);
}

body.dark-mode .history-table td {
  color: var(--ink);
  border-bottom-color: var(--line);
}

body.dark-mode .history-table tr:hover td {
  background: var(--card-2);
}

body.dark-mode .hub-search input,
body.dark-mode .hub-search select {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .hub-search input::placeholder {
  color: var(--muted);
}

body.dark-mode .search-view ul li {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}

body.dark-mode .search-view ul li:hover {
  background: var(--card-2);
  border-color: var(--line-strong);
}

body.dark-mode .search-view .test-meta .chip {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode mark {
  background: rgba(255,255,255, 0.30);
  color: #e0e7ff;
  border-radius: 4px;
  padding: 0 2px;
}

/* Архівні тести — м'які прозорі тінти замість суцільних блоків */
body.dark-mode #panel-archive .test-item {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

body.dark-mode #panel-archive .test-item ul li {
  background: var(--card-2);
  color: var(--ink);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}

body.dark-mode #panel-archive .test-item ul li:hover {
  background: var(--card-3);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

body.dark-mode #panel-archive .test-item ul li.selected {
  background: #2e2e33;
  box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.35);
}

body.dark-mode #panel-archive .test-item ul li.correct {
  background: rgba(74,160,110, 0.14);
  color: #9ed4b4;
  box-shadow: inset 0 0 0 1px rgba(74,160,110, 0.45);
}

body.dark-mode #panel-archive .test-item ul li.correct::after {
  color: #9ed4b4;
  background: rgba(74,160,110, 0.18);
  border: 1px solid rgba(74,160,110, 0.40);
}

body.dark-mode #panel-archive .test-item ul li.incorrect {
  background: rgba(220,80,80, 0.14);
  color: #f0a8a8;
  box-shadow: inset 0 0 0 1px rgba(220,80,80, 0.45);
}

body.dark-mode #panel-archive .test-item ul li.incorrect::after {
  color: #f0a8a8;
  background: rgba(220,80,80, 0.18);
  border: 1px solid rgba(220,80,80, 0.40);
}

body.dark-mode #panel-archive .test-meta .chip {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode #panel-archive .question-number {
  background: rgba(255,255,255, 0.12);
  border-color: rgba(255,255,255, 0.25);
  color: #e4e4e7;
}

body.dark-mode #panel-archive .divforarchive,
body.dark-mode #panel-archive .discussion-btn {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--ink);
}

body.dark-mode #panel-archive .divforarchive:hover,
body.dark-mode #panel-archive .discussion-btn:hover {
  background: rgba(255,255,255, 0.16);
  border-color: rgba(255,255,255, 0.40);
}

body.dark-mode .arch-progress {
  background: var(--card-2);
  border: 1px solid var(--line);
}

body.dark-mode .arch-counter {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Старий блок селектів у архіві — лишаємо як fallback (.af перевизначить, де є) */
body.dark-mode #archiveFilters.archive-filters {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

body.dark-mode #archiveFilters select,
body.dark-mode #archiveFilters button,
body.dark-mode #archiveFilters .history-btn {
  background: var(--card-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

body.dark-mode .topics {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

body.dark-mode .topics__header {
  background: var(--card-2);
  border-color: var(--line);
}

body.dark-mode .topics__search {
  background: var(--card-2);
  border-color: var(--line);
}

body.dark-mode .topics__search input {
  color: var(--ink);
}

body.dark-mode .topics__search input::placeholder {
  color: var(--muted);
}

body.dark-mode .subject {
  background: rgba(31, 41, 65, 0.5);
  border-color: var(--line);
}

body.dark-mode .subject__head {
  background: var(--card-2);
}

body.dark-mode .subject__head:hover {
  background: var(--card-3);
}

body.dark-mode .subject__name {
  color: var(--ink);
}

body.dark-mode .badge {
  background: rgba(255,255,255, 0.12);
  border-color: rgba(255,255,255, 0.25);
  color: #e4e4e7;
}

body.dark-mode .subject__btn {
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

body.dark-mode .subject__btn:hover {
  background: var(--card-3);
  border-color: var(--line-strong);
}

body.dark-mode .topic-pill {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--ink);
}

body.dark-mode .topic-pill:hover {
  background: var(--card-3);
}

body.dark-mode .topics__footer {
  background: var(--card);
  border-color: var(--line);
}

body.dark-mode .btn {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--ink);
}

body.dark-mode .btn:hover {
  background: var(--card-3);
  border-color: var(--line-strong);
}

body.dark-mode .btn--primary,
body.dark-mode .btn--primary:hover {
  background: #3a7d5f;
  color: #fff;
  border-color: transparent;
}

body.dark-mode .krok-pill__badge {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .demo-booklet {
  background: var(--card);
  border-color: rgba(74,160,110, 0.40) !important;
  box-shadow: 0 4px 18px rgba(74,160,110, 0.10);
}

/* Скролбари у dark-режимі */
body.dark-mode ::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.06);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.40);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  h1::after {
    width: 100px;
    height: 4px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 20px 16px 32px;
  }

  .test-item {
    padding: 18px 16px 22px;
  }

  .test-title {
    font-size: 17px;
  }

  .test-progress {
    height: 32px;
    font-size: 14px;
  }

  .tabs {
    gap: 8px;
  }

  .tab-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 16px 12px 28px;
  }

  .loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }

  .modal-content {
    width: 96%;
    padding: 20px;
    border-radius: 24px;
  }

  .history-table th,
  .history-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .start-btn,
  .history-btn {
    font-size: 13px;
    padding: 11px 14px;
  }

  h1 {
    font-size: 24px;
  }

  h1::after {
    width: 80px;
    height: 3px;
  }

  /* Модалка на телефоні — по центру екрана, а не шухлядою знизу. */
  .modal--open {
    align-items: center;
  }

  .topics {
    width: 100%;
    max-height: 86vh;
    border-radius: 20px;
  }

  .subject__body {
    grid-template-columns: 1fr;
  }

  .subject__head {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
  }

  #archiveFilters > div {
    align-items: stretch;
  }

  #archiveFilters select,
  #archiveFilters button {
    width: 100%;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  .start-btn,
  .history-btn {
    white-space: normal;
    line-height: 1.2;
  }

  .history-btn {
    flex: 1.15 1 0;
  }

  .start-btn {
    flex: 0.85 1 0;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== MODAL OPEN STATE ===== */
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ========================================
   MOBILE PERFORMANCE - KROK HUB
   ======================================== */

@media (max-width: 900px) {
  /* Відключити backdrop-filter */
  .krok-pill__badge,
  .tab-btn,
  .hub-search input,
  .hub-search select,
  .test-item,
  .modal,
  .modal-content,
  .close,
  .history-table,
  .arch-progress,
  .arch-counter,
  #archiveFilters,
  .topics,
  .topics__search,
  .subject,
  .topic-pill,
  .topics__footer,
  .btn,
  .search-view ul li,
  #panel-archive .test-item,
  #panel-archive .test-item ul li,
  #panel-archive .divforarchive,
  #panel-archive .discussion-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Solid backgrounds замість gradient+backdrop */
  body {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%) !important;
  }

  body.dark-mode {
    background: #0f0f11 !important;
  }

  .krok-pill__badge {
    background: #ffffff !important;
  }

  body.dark-mode .krok-pill__badge {
    background: #1a1a1d !important;
  }

  .tab-btn {
    background: #ffffff !important;
  }

  body.dark-mode .tab-btn {
    background: #1a1a1d !important;
  }

  .tab-btn.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
  }

  .hub-search input,
  .hub-search select {
    background: #ffffff !important;
  }

  body.dark-mode .hub-search input,
  body.dark-mode .hub-search select {
    background: #242428 !important;
  }

  .test-item {
    background: #ffffff !important;
  }

  body.dark-mode .test-item {
    background: #1a1a1d !important;
  }

  .demo-booklet {
    background: #ecfdf5 !important;
  }

  body.dark-mode .demo-booklet {
    background: #1a1a1d !important;
  }

  .test-progress {
    background: rgba(209, 250, 229, 0.9) !important;
  }

  body.dark-mode .test-progress {
    background: rgba(74,160,110, 0.18) !important;
  }

  .start-btn {
    background: #10b981 !important;
  }

  .history-btn {
    background: #0ea5e9 !important;
  }

  .modal-content {
    background: #ffffff !important;
  }

  body.dark-mode .modal-content {
    background: #1a1a1d !important;
  }

  .close {
    background: #f1f5f9 !important;
  }

  body.dark-mode .close {
    background: #242428 !important;
  }

  .arch-progress {
    background: #f1f5f9 !important;
  }

  body.dark-mode .arch-progress {
    background: #242428 !important;
  }

  .arch-counter {
    background: #ffffff !important;
  }

  body.dark-mode .arch-counter {
    background: #1a1a1d !important;
  }

  .arch-finish {
    background: #ef4444 !important;
  }

  #archiveFilters {
    background: #ffffff !important;
  }

  body.dark-mode #archiveFilters {
    background: #1a1a1d !important;
  }

  #archiveFilters select,
  #archiveFilters button,
  #archiveFilters .history-btn {
    background: #f9fafb !important;
  }

  body.dark-mode #archiveFilters select,
  body.dark-mode #archiveFilters button,
  body.dark-mode #archiveFilters .history-btn {
    background: #242428 !important;
  }

  .topics {
    background: #ffffff !important;
  }

  body.dark-mode .topics {
    background: #1a1a1d !important;
  }

  .topics__search {
    background: #ffffff !important;
  }

  body.dark-mode .topics__search {
    background: #242428 !important;
  }

  .subject {
    background: #f9fafb !important;
  }

  body.dark-mode .subject {
    background: #242428 !important;
  }

  .subject__head {
    background: #f8fafc !important;
  }

  body.dark-mode .subject__head {
    background: #242428 !important;
  }

  .subject__head:hover {
    background: #f1f5f9 !important;
  }

  body.dark-mode .subject__head:hover {
    background: #2e2e33 !important;
  }

  .subject__btn {
    background: #e2e8f0 !important;
  }

  body.dark-mode .subject__btn {
    background: #242428 !important;
  }

  .topic-pill {
    background: #ffffff !important;
  }

  body.dark-mode .topic-pill {
    background: #242428 !important;
  }

  .topics__footer {
    background: #ffffff !important;
  }

  body.dark-mode .topics__footer {
    background: #1a1a1d !important;
  }

  .btn {
    background: #f8fafc !important;
  }

  body.dark-mode .btn {
    background: #242428 !important;
  }

  .btn--primary {
    background: #10b981 !important;
  }

  .search-view ul li {
    background: #ffffff !important;
  }

  body.dark-mode .search-view ul li {
    background: #1a1a1d !important;
  }

  .search-view .test-meta .chip {
    background: #f1f5f9 !important;
  }

  body.dark-mode .search-view .test-meta .chip {
    background: #242428 !important;
  }

  #panel-archive .test-item {
    background: #ffffff !important;
  }

  body.dark-mode #panel-archive .test-item {
    background: #1a1a1d !important;
  }

  #panel-archive .test-item ul li {
    background: #f9fafb !important;
  }

  body.dark-mode #panel-archive .test-item ul li {
    background: #242428 !important;
  }

  #panel-archive .divforarchive,
  #panel-archive .discussion-btn {
    background: #ffffff !important;
  }

  body.dark-mode #panel-archive .divforarchive,
  body.dark-mode #panel-archive .discussion-btn {
    background: #242428 !important;
  }

  #panel-archive .test-meta .chip {
    background: #f1f5f9 !important;
  }

  body.dark-mode #panel-archive .test-meta .chip {
    background: #242428 !important;
  }

  /* Спростити тіні */
  .krok-pill__badge,
  .tab-btn,
  .hub-search input,
  .hub-search select,
  .test-item,
  .modal-content {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  }

  body.dark-mode .krok-pill__badge,
  body.dark-mode .tab-btn,
  body.dark-mode .hub-search input,
  body.dark-mode .hub-search select,
  body.dark-mode .test-item,
  body.dark-mode .modal-content {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
  }

  .tab-btn.active {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
  }

  .test-item:hover {
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.12) !important;
  }

  .demo-booklet {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2) !important;
  }

  .start-btn,
  .history-btn,
  .arch-finish {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  .close,
  .arch-counter,
  .topics__footer {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }

  /* Прибрати декоративні ::before та ::after */
  body::before,
  .test-item::before,
  h1::after,
  .demo-booklet::before,
  .tab-btn::before,
  .start-btn::after,
  .history-btn::after {
    display: none !important;
  }

  /* Спростити gradient text */
  h1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #0ea5e9 !important;
  }

  body.dark-mode h1 {
    color: #60a5fa !important;
  }

  .topics__title,
  .modal-content h3 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #0ea5e9 !important;
  }

  body.dark-mode .topics__title,
  body.dark-mode .modal-content h3 {
    color: #60a5fa !important;
  }

  /* Відключити hover transforms */
  .krok-pill__badge:hover,
  .tab-btn:hover,
  .hub-search input:focus,
  .hub-search select:focus,
  .start-btn:hover,
  .history-btn:hover,
  .close:hover,
  .pagination button:hover,
  .subject__btn:hover,
  .topic-pill:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .arch-finish:hover,
  .dark-mode-toggle:hover,
  .topics__close:hover {
    transform: none !important;
  }

  /* Але залишити вертикальний рух на test-item */
  .test-item:hover {
    transform: translateY(-4px) !important;
  }

  .demo-booklet {
    transform: none !important;
  }

  #panel-archive .test-item:hover {
    transform: translateY(-4px) !important;
  }

  /* Спростити hover на відповідях */
  .search-view ul li:hover {
    transform: none !important;
  }

  #panel-archive .test-item ul li:hover {
    transform: none !important;
  }

  /* Спростити transitions */
  .krok-pill__badge,
  .tab-btn,
  .hub-search input,
  .hub-search select,
  .test-item,
  .start-btn,
  .history-btn,
  .close,
  .pagination button,
  .subject,
  .subject__head,
  .subject__btn,
  .topic-pill,
  .btn,
  .arch-finish,
  .dark-mode-toggle,
  .search-view ul li,
  #panel-archive .test-item,
  #panel-archive .test-item ul li,
  #panel-archive .divforarchive,
  #panel-archive .discussion-btn {
    transition-duration: 0.15s !important;
  }

  .test-progress {
    transition-duration: 0.2s !important;
  }

  .arch-green,
  .arch-red {
    transition-duration: 0.4s !important;
  }

  /* Відключити анімації */
  body,
  h1,
  .tabs,
  .hub-search,
  .test-item,
  .modal,
  .modal-content,
  .topics,
  .search-view .test-item,
  .search-view .test-meta .chip,
  #panel-archive .test-item,
  .tab-panel {
    animation: none !important;
  }

  /* Відключити анімації на checked answers */
  .search-view ul li.correct::after,
  #panel-archive .test-item ul li.correct::after,
  #panel-archive .test-item ul li.incorrect::after {
    animation: none !important;
  }

  /* Відключити KROK logo анімації */
  .shine-rect {
    animation: none !important;
  }

  .krok-pill__scan {
    animation: none !important;
  }

  /* Відключити demo booklet анімації */
  .demo-booklet {
    animation: none !important;
  }

  /* Відключити dark mode toggle pulse */
  .dark-mode-toggle {
    animation: none !important;
  }

  #mode-icon {
    transition-duration: 0.2s !important;
  }

  .dark-mode-toggle:hover #mode-icon {
    transform: none !important;
  }

  /* Відключити mark glow */
  mark {
    animation: none !important;
  }

  /* Спростити mark background */
  mark {
    background: #fef3c7 !important;
  }

  body.dark-mode mark {
    background: rgba(255,255,255, 0.30) !important;
    color: #e0e7ff !important;
  }

  /* Спростити badge */
  .badge {
    background: #eef2ff !important;
  }

  body.dark-mode .badge {
    background: rgba(255,255,255, 0.12) !important;
    color: #e4e4e7 !important;
  }

  /* Спростити correct/incorrect states */
  .search-view ul li.correct {
    background: #d1fae5 !important;
  }

  #panel-archive .test-item ul li.correct {
    background: #d1fae5 !important;
  }

  body.dark-mode #panel-archive .test-item ul li.correct {
    background: rgba(74,160,110, 0.14) !important;
    color: #9ed4b4 !important;
    box-shadow: inset 0 0 0 1px rgba(74,160,110, 0.45) !important;
  }

  #panel-archive .test-item ul li.incorrect {
    background: #fee2e2 !important;
  }

  body.dark-mode #panel-archive .test-item ul li.incorrect {
    background: rgba(220,80,80, 0.14) !important;
    color: #f0a8a8 !important;
    box-shadow: inset 0 0 0 1px rgba(220,80,80, 0.45) !important;
  }

  /* Спростити subject__icon rotation */
  .subject__icon {
    transition-duration: 0.2s !important;
  }

  /* Спростити toast */
  #hubToast {
    background: #10b981 !important;
  }

  /* Спростити scrollbar */
  .modal-content::-webkit-scrollbar-thumb,
  .topics__body::-webkit-scrollbar-thumb {
    background: #0ea5e9 !important;
  }

  /* Спростити krok-pill__underline */
  .krok-pill__underline {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.5), rgba(14, 165, 233, 0.5)) !important;
  }

  /* Спростити history table hover */
  .history-table tr:hover td {
    transition-duration: 0.1s !important;
  }

  body.dark-mode .history-table th {
    background: #242428 !important;
  }

  /* Спростити progress bars */
  .arch-green {
    background: #10b981 !important;
    box-shadow: none !important;
  }

  .arch-red {
    background: #ef4444 !important;
    box-shadow: none !important;
  }

  /* Спростити topics header */
  .topics__header {
    background: #f8fafc !important;
  }

  body.dark-mode .topics__header {
    background: #242428 !important;
  }
}

/* Для дуже слабких пристроїв */
@media (max-width: 480px) and (max-height: 800px) {
  /* Мінімальні тіні */
  .krok-pill__badge,
  .tab-btn,
  .test-item,
  .modal-content {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  }

  body.dark-mode .krok-pill__badge,
  body.dark-mode .tab-btn,
  body.dark-mode .test-item,
  body.dark-mode .modal-content {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  /* Відключити всі анімації */
  * {
    animation: none !important;
  }

  /* Відключити всі складні transitions */
  * {
    transition-duration: 0.1s !important;
  }

  /* Спростити всі gradients на кнопках */
  .start-btn {
    background: #10b981 !important;
  }

  .history-btn {
    background: #0ea5e9 !important;
  }

  .arch-finish {
    background: #ef4444 !important;
  }

  .btn--primary {
    background: #10b981 !important;
  }

  .tab-btn.active {
    background: #0ea5e9 !important;
  }

  /* Зменшити padding */
  .container {
    padding: 16px 12px 28px !important;
  }

  .test-item {
    padding: 16px 14px 20px !important;
  }

  .modal-content {
    padding: 18px 16px !important;
  }

  .topics {
    padding: 0 !important;
  }

  /* Спростити test-progress */
  .test-progress {
    background: rgba(209, 250, 229, 1) !important;
    box-shadow: none !important;
  }

  body.dark-mode .test-progress {
    background: rgba(74,160,110, 0.3) !important;
  }

  /* Спростити demo booklet */
  .demo-booklet {
    transform: none !important;
    border-width: 2px !important;
  }
}

/* Для landscape орієнтації */
@media (max-width: 900px) and (max-height: 500px) {
  .container {
    padding: 16px 12px 28px !important;
  }

  .test-item {
    padding: 16px 14px 20px !important;
    margin-bottom: 16px !important;
  }

  .tabs {
    margin: 10px auto 14px !important;
  }

  .hub-search {
    margin: 6px 0 14px !important;
  }
}

/* ==== assets/krok/css/design-b-v2.css ==== */
/* ============================================================
   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; }
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; }
@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; }

/* ============================================================
   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; }
}

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


/* ==== assets/authmodals.css ==== */
/* FILE: /assets/authmodals.css
   Модалка входу/реєстрації MedOnline.
   Дизайн ІДЕНТИЧНИЙ сторінкам /Auth/login + /Auth/signup (assets/auth/css/auth.css):
   ті ж кольори, інпути 46px, зелений CTA + cyan-акцент, focus-ring, show/hide пароля,
   світла/темна тема через body.dark-mode.

   ВАЖЛИВО: усі токени з префіксом --am-* і визначені на .authmodal (НЕ :root),
   щоб НЕ перетирати змінні host-сторінок (krokHub / VideoCourse / articles),
   де ця модалка підключається. Усі селектори теж scoped під .authmodal. */

.authmodal {
  /* ---- design tokens (light) ---- */
  --am-surface:        #ffffff;
  --am-surface-2:      #f0f6f4;
  --am-fg:             #122e2a;
  --am-muted:          #4f6b66;
  --am-border:         #dde8e5;
  --am-primary:        #10b981;
  --am-primary-strong: #0c9f6e;
  --am-on-primary:     #ffffff;
  --am-accent:         #0891b2;
  --am-ring:           rgba(8,145,178,.30);
  --am-danger:         #dc2626;
  --am-danger-bg:      #fef2f2;
  --am-ok:             #10b981;
  --am-ok-bg:          #ecfdf5;

  --am-radius:         14px;
  --am-radius-sm:      10px;
  --am-shadow:         0 10px 30px -12px rgba(13,60,52,.22);
  --am-shadow-card:    0 24px 60px -22px rgba(13,60,52,.40);

  --am-ease:           cubic-bezier(.4,0,.2,1);
  --am-t:              .2s var(--am-ease);

  --am-font-head:      'Ubuntu', system-ui, -apple-system, sans-serif;
  --am-font-body:      'Raleway', system-ui, -apple-system, sans-serif;

  /* ---- overlay ---- */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

body.dark-mode .authmodal {
  --am-surface:        #121e1c;
  --am-surface-2:      #182825;
  --am-fg:             #e9f2f0;
  --am-muted:          #9db4af;
  --am-border:         #243733;
  --am-primary:        #2f9e7b;
  --am-primary-strong: #277f64;
  --am-on-primary:     #ffffff;
  --am-accent:         #5fa6c2;
  --am-ring:           rgba(56,189,248,.38);
  --am-danger:         #f87171;
  --am-danger-bg:      #2a1414;
  --am-ok:             #2f9e7b;
  --am-ok-bg:          #11261f;
  --am-shadow:         0 10px 30px -12px rgba(0,0,0,.55);
  --am-shadow-card:    0 24px 60px -22px rgba(0,0,0,.7);
}

.authmodal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* блокування скролу сторінки під модалкою */
body.authmodal-lock { overflow: hidden; }

.authmodal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7,20,18,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: am-fade .2s var(--am-ease) both;
}
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }

.authmodal__dialog {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(520px, 100%);
  max-width: 520px;
  background: var(--am-surface);
  color: var(--am-fg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-card);
  padding: clamp(20px, 5vw, 34px);
  font-family: var(--am-font-body);
  animation: am-card-in .28s var(--am-ease) both;
}
@keyframes am-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- close ---- */
.authmodal__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--am-muted);
  background: none; border: 0; cursor: pointer;
  border-radius: 9px;
  transition: color var(--am-t), background var(--am-t);
}
.authmodal__close:hover { color: var(--am-fg); background: var(--am-surface-2); }

/* ---- header ---- */
.authmodal__header { margin-bottom: 20px; }

.authmodal__tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--am-surface-2);
  border-radius: var(--am-radius-sm);
  margin-bottom: 18px;
}
.authmodal__tab {
  flex: 1;
  height: 38px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-family: var(--am-font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--am-muted);
  cursor: pointer;
  transition: background var(--am-t), color var(--am-t), box-shadow var(--am-t);
}
.authmodal__tab:hover { color: var(--am-fg); }
.authmodal__tab.is-active {
  background: var(--am-surface);
  color: var(--am-fg);
  box-shadow: 0 1px 4px rgba(13,60,52,.14);
}

.authmodal__title {
  font-family: var(--am-font-head);
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--am-fg);
}
.authmodal__subtitle {
  margin-top: 6px;
  color: var(--am-muted);
  font-size: 14px;
}
.authmodal__subtitle:empty { display: none; }

/* ---- panels (login / signup) ---- */
.authmodal__panel { display: none; }
.authmodal__panel.is-active { display: block; animation: am-fade .2s var(--am-ease) both; }

.authmodal__group { margin-bottom: 16px; }
.authmodal__row { display: flex; gap: 12px; }
.authmodal__row .authmodal__group { flex: 1; min-width: 0; }

.authmodal__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--am-fg);
  margin-bottom: 7px;
  letter-spacing: .1px;
}

.authmodal__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 16px;                /* ≥16px — без авто-зуму на iOS */
  font-family: var(--am-font-body);
  color: var(--am-fg);
  background: var(--am-surface);
  border: 1.5px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  transition: border-color var(--am-t), box-shadow var(--am-t), background var(--am-t);
}
.authmodal__input::placeholder { color: var(--am-muted); opacity: .7; }
.authmodal__input:focus {
  outline: none;
  border-color: var(--am-accent);
  box-shadow: 0 0 0 4px var(--am-ring);
}

/* ---- password show/hide ---- */
.authmodal__pw { position: relative; }
.authmodal__pw .authmodal__input { padding-right: 46px; }
.authmodal__pw-toggle {
  position: absolute; top: 0; right: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--am-muted);
  transition: color var(--am-t);
}
.authmodal__pw-toggle:hover { color: var(--am-accent); }
.authmodal__pw-toggle svg { width: 20px; height: 20px; }
.authmodal__pw-toggle .icon-eye-off { display: none; }
.authmodal__pw-toggle.is-shown .icon-eye     { display: none; }
.authmodal__pw-toggle.is-shown .icon-eye-off { display: inline; }

/* ---- actions / buttons ---- */
.authmodal__actions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.authmodal__btn {
  width: 100%;
  height: 48px;
  font-family: var(--am-font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  border: 0;
  border-radius: var(--am-radius-sm);
  cursor: pointer;
  transition: background var(--am-t), border-color var(--am-t), color var(--am-t), transform .06s var(--am-ease);
}
.authmodal__btn:active { transform: translateY(1px); }
.authmodal__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--am-ring); }

.authmodal__btn--primary {
  color: var(--am-on-primary);
  background: var(--am-primary);
}
.authmodal__btn--primary:hover { background: var(--am-primary-strong); }

.authmodal__btn--ghost {
  background: none;
  color: var(--am-accent);
  border: 1.5px solid var(--am-border);
  font-weight: 600;
}
.authmodal__btn--ghost:hover { border-color: var(--am-accent); background: var(--am-surface-2); }

.authmodal__panel.is-loading .authmodal__btn,
.authmodal__btn:disabled { opacity: .6; cursor: default; transform: none; }
.authmodal__panel.is-loading { pointer-events: none; }
.authmodal__panel.is-loading .authmodal__pw-toggle,
.authmodal__panel.is-loading [data-authmodal-switch] { pointer-events: auto; }

/* ---- message (error / ok) ---- */
.authmodal__msg {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--am-radius-sm);
}
.authmodal__msg:empty { display: none; }
.authmodal__msg.is-err {
  padding: 11px 14px;
  color: var(--am-danger);
  background: var(--am-danger-bg);
  border: 1px solid color-mix(in srgb, var(--am-danger) 35%, transparent);
}
.authmodal__msg.is-ok {
  padding: 11px 14px;
  color: var(--am-ok);
  background: var(--am-ok-bg);
  border: 1px solid color-mix(in srgb, var(--am-ok) 35%, transparent);
}

/* ---- поля «Університет / Спеціальність / Курс» ----
   Партіал user_study_selects.php віддає класи form_group/form_label (сторінкові),
   а не authmodal__*, тож у модалці вони лишались без відступів і виглядали зжатими.
   Прирівнюємо їх до власних полів модалки. */
.authmodal .form_group { margin-bottom: 16px; }
.authmodal .form_group:last-child { margin-bottom: 0; }
.authmodal .form_label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--am-fg);
  margin-bottom: 7px;
  letter-spacing: .1px;
}
.authmodal [data-scope="user-study"] { margin-top: 4px; }

/* ---- custom-select (study dropdowns у формі реєстрації) ---- */
.authmodal .custom-select { position: relative; user-select: none; }
.authmodal .custom-select-btn {
  height: 46px;
  padding: 0 40px 0 14px;
  display: flex; align-items: center;
  font-size: 15px;
  color: var(--am-fg);
  background: var(--am-surface);
  border: 1.5px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  cursor: pointer;
  transition: border-color var(--am-t), box-shadow var(--am-t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.authmodal .custom-select-btn::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--am-muted); border-bottom: 2px solid var(--am-muted);
  transform: rotate(45deg); transition: transform var(--am-t);
}
.authmodal .custom-select.open .custom-select-btn { border-color: var(--am-accent); box-shadow: 0 0 0 4px var(--am-ring); }
.authmodal .custom-select.open .custom-select-btn::after { transform: rotate(-135deg); margin-top: -2px; }
.authmodal .custom-select-options {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  box-shadow: var(--am-shadow);
  max-height: 240px; overflow-y: auto;
  z-index: 50;
  display: none;
}
.authmodal .custom-select.open .custom-select-options { display: block; animation: am-card-in .16s var(--am-ease) both; }
.authmodal .custom-select-option { padding: 11px 14px; font-size: 14.5px; color: var(--am-fg); cursor: pointer; transition: background var(--am-t), color var(--am-t); }
.authmodal .custom-select-option:hover { background: var(--am-surface-2); color: var(--am-accent); }

/* ---- responsive ---- */
@media (max-width: 560px) {
  .authmodal.is-open { padding: 12px 10px; }
  .authmodal__dialog { padding: 22px 18px; border-radius: 14px; }
  /* у стовпчик — але БЕЗ злипання: кожне поле лишає власний нижній відступ
     (раніше gap:0 + flex-column робили «Імʼя/Прізвище» впритул) */
  .authmodal__row { flex-direction: column; gap: 0; }
  .authmodal__row .authmodal__group { margin-bottom: 16px; }
  .authmodal__row .authmodal__group:last-child { margin-bottom: 16px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .authmodal__backdrop,
  .authmodal__dialog,
  .authmodal__panel.is-active,
  .authmodal .custom-select.open .custom-select-options { animation: none; }
  .authmodal * { transition-duration: .01ms !important; }
}


/* ==== assets/krok/css/krok-hub-base.css ==== */

@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,.06); }
}
/* ── /VC PROMO BLOCK ───────────────────────────────────────── */

/* ── SCROLLABLE TABS ───────────────────────────────────────── */

.tab-img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity .15s;
}
.tab-btn.active .tab-img {
    opacity: 1;
}

/* Десктоп: іконка збоку, нормальний колір тексту */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, background .15s, border-color .15s;
    text-decoration: none;
}
.tab-btn:hover {
    color: #334155;
    background: rgba(0,0,0,.04);
}
.tab-btn.active {
    color: #059669;
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.25);
    font-weight: 600;
}
body.dark-mode .tab-btn { color: #94a3b8; }
body.dark-mode .tab-btn:hover { color: #f4f4f5; background: rgba(255,255,255,.06); }
body.dark-mode .tab-btn.active { color: #6fae8c; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.25); }

.tab-label { display: inline; }

/* ── ДЕСКТОП: таби по центру ── */
.tabs-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
}
.tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
    padding-bottom: 4px;
    max-width: 100%;
    background: rgba(0,0,0,.03);
    border-radius: 999px;
    padding: 4px;
}
body.dark-mode .tabs { background: rgba(255,255,255,.05); }
.tabs::-webkit-scrollbar { display: none; }
.tabs-scroll-hint { display: none; }

/* ── МОБІЛЬНИЙ: bottom navigation bar ── */
@media (max-width: 768px) {

    body { padding-bottom: 72px; }

    .dark-mode-toggle { bottom: 80px !important; }

    .arch-controls { bottom: 76px !important; }
    .arch-progress { bottom: 116px !important; }

    .tabs-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 300;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 -4px 24px rgba(0,0,0,.08);
        display: block;
        transition: transform .25s ease;
    }
    body.dark-mode .tabs-wrap {
        background: rgba(15,23,42,0.97);
        border-top-color: rgba(255,255,255,.07);
    }

    .tabs-wrap.nav-hidden {
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    }

    /* На мобільному скидаємо стиль "pill" */
    .tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
        padding: 8px 8px 6px;
        gap: 2px;
        background: transparent;
        border-radius: 0;
        -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
        mask-image: linear-gradient(to right, black 88%, transparent 100%);
    }

    .tab-btn {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 3px;
        padding: 5px 14px 4px;
        font-size: 10px;
        font-weight: 500;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: #94a3b8;
        min-width: 60px;
        justify-content: center;
    }
    .tab-btn:hover { background: rgba(0,0,0,.04); color: #64748b; }
    .tab-btn.active {
        background: rgba(16,185,129,.10);
        color: #059669;
        font-weight: 700;
        border: none;
    }
    body.dark-mode .tab-btn { color: #64748b; }
    body.dark-mode .tab-btn.active { background: rgba(52,211,153,.12); color: #6fae8c; }

    .tab-img {
        width: 22px;
        height: 22px;
        display: block;
        opacity: 0.45;
    }
    .tab-btn.active .tab-img { opacity: 1; }

    .tab-label {
        display: block;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
    }

    .tabs-scroll-hint {
        display: flex;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        align-items: center;
        color: #94a3b8;
        pointer-events: none;
        animation: hint-fade 3.5s ease forwards;
    }
    .tabs-scroll-hint svg { width: 14px; height: 14px; animation: hint-slide 1s ease-in-out infinite; }
    .tabs-wrap.scrolled .tabs-scroll-hint,
    .tabs-wrap.scrolled-end .tabs-scroll-hint { display: none; }

    @keyframes hint-slide {
        0%,100% { transform: translateX(0); }
        50%      { transform: translateX(5px); }
    }
    @keyframes hint-fade {
        0%,65% { opacity:1; }
        100%   { opacity:0; }
    }
}

/* ── /SCROLLABLE TABS ──────────────────────────────────────── */

/* ── COMPACT ARCHIVE TESTS (same as krokTestView) ──────────── */

/* Менший відступ між картками архіву */
#panel-archive .test-item {
    margin-bottom: 14px !important;
    padding: 16px 18px 16px !important;
}

/* Питання */
#panel-archive .test-item h3 {
    font-size: 17px !important;
    margin-bottom: 10px !important;
    line-height: 1.45 !important;
}

/* Список варіантів — без зайвих відступів */
#panel-archive .test-item ul {
    margin: 8px 0 0 !important;
}

/* Варіант відповіді — компактний */
#panel-archive .test-item ul li {
    padding: 11px 46px 11px 14px !important;
    margin: 6px 0 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    cursor: pointer;
}
#panel-archive .test-item ul li:last-child {
    margin-bottom: 0 !important;
}

/* Хедер картки */
#panel-archive .test-info {
    margin-bottom: 10px !important;
}

/* Номер питання */
#panel-archive .question-number {
    font-size: 13px !important;
    padding: 5px 11px !important;
}

@media (max-width: 480px) {
    #panel-archive .test-item {
        padding: 14px 14px 14px !important;
        margin-bottom: 10px !important;
    }
    #panel-archive .test-item ul li {
        padding: 10px 42px 10px 12px !important;
        margin: 5px 0 !important;
        font-size: 13px !important;
    }
    #panel-archive .test-item h3 {
        font-size: 15px !important;
    }
}
/* ── /COMPACT ARCHIVE TESTS ─────────────────────────────────── */

/* ── COMPACT ARCH PROGRESS BAR & CONTROLS ───────────────────── */

/* Тонший прогрес-бар архіву */
.arch-progress {
    height: 6px !important;
    bottom: 8px !important;
    width: min(900px, 88vw) !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 9990 !important;
}

/* Контроли — над тонким баром */
.arch-controls {
    bottom: 20px !important;
    gap: 8px !important;
    z-index: 9991 !important;
}

/* Кнопка Завершити — менша */
.arch-finish {
    padding: 9px 16px !important;
    font-size: 13px !important;
    box-shadow: 0 3px 10px rgba(239,68,68,.3) !important;
}

/* Лічильник — менший */
.arch-counter {
    font-size: 13px !important;
    padding: 8px 14px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.1) !important;
}

/* Перемикач темного режиму — менший */
.dark-mode-toggle {
    width: 38px !important;
    height: 38px !important;
    right: 16px !important;
    bottom: 80px !important;
    z-index: 9992 !important;
}

.dark-mode-toggle #mode-icon,
#mode-icon {
    font-size: 18px !important;
}

/* На мобільному з bottom nav — підняти вище */
@media (max-width: 768px) {
    .arch-progress {
        bottom: 80px !important;
        transition: bottom .25s ease;
    }
    .arch-controls {
        bottom: 94px !important;
        transition: bottom .25s ease;
    }
    .dark-mode-toggle {
        bottom: 136px !important;
        transition: bottom .25s ease;
    }

    /* Коли нижня навігація прихована при скролі —
       прогрес-бар та контроли «приклеюються» до низу в'юпорта,
       щоб не висіти у повітрі. */
    body.nav-hidden .arch-progress {
        bottom: 8px !important;
    }
    body.nav-hidden .arch-controls {
        bottom: 22px !important;
    }
    body.nav-hidden .dark-mode-toggle {
        bottom: 64px !important;
    }
}
/* ── /COMPACT ARCH PROGRESS BAR & CONTROLS ──────────────────── */

/* ── MISTAKES BUTTON ──────────────────────────────────────── */
.mistakes-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #b91c1c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(220, 38, 38, .15);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    flex-shrink: 0;
}
.mistakes-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.mistakes-btn:hover {
    transform: translateY(-2px);
    filter: saturate(110%);
    box-shadow: 0 8px 24px rgba(220, 38, 38, .25);
}
.mistakes-btn:active { transform: translateY(0); }
.mistakes-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
body.dark-mode .mistakes-btn {
    background: linear-gradient(135deg, rgba(239,68,68,.18) 0%, rgba(220,38,38,.25) 100%);
    color: #fecaca;
}

/* Inline variant — компактна кнопка біля заголовка картки */
.mistakes-btn--inline {
    width: 30px;
    height: 30px;
    margin-left: auto;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .12);
}
.mistakes-btn--inline img {
    width: 16px;
    height: 16px;
}
.mistakes-btn--inline:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, .22);
}
.test-title { min-width: 0; }
.test-title > .mistakes-btn--inline { flex-shrink: 0; }
/* ── /MISTAKES BUTTON ─────────────────────────────────────── */

/* ── MOBILE COMPACT TWEAKS — зменшуємо все на телефоні ──────── */
@media (max-width: 640px) {
    /* Заголовок KROK • HUB — менший */
    .krok-pill { margin: 6px auto 12px !important; gap: 6px !important; }
    .krok-pill__badge { padding: 8px 16px !important; }
    .krok-logo { height: 22px !important; }
    .krok-pill__underline { height: 2px !important; width: min(180px, 60vw) !important; }

    /* Пошук — нижчий і компактніший */
    .hub-search { gap: 8px !important; margin: 4px 0 12px !important; }
    .hub-search input,
    .hub-search select {
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px !important;
        padding: 0 14px !important;
    }
    .hub-search select { padding-right: 38px !important; }

    /* Картки тестів — менший внутрішній padding */
    .test-item {
        padding: 14px 14px 16px !important;
        border-radius: 18px !important;
    }
    .test-title {
        font-size: 15px !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .test-progress {
        min-width: 78px !important;
        height: 30px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
    }

    /* Кнопки в картках — менші */
    .test-buttons { gap: 8px !important; margin-top: 12px !important; }
    .start-btn,
    .history-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    /* Кнопка помилок inline — менша */
    .mistakes-btn--inline {
        width: 26px !important;
        height: 26px !important;
    }
    .mistakes-btn--inline img {
        width: 14px !important;
        height: 14px !important;
    }

    /* Demo буклет — менше «велике» оформлення */
    .test-item.demo-booklet { transform: none !important; }

    /* Архівні заголовки — компактніше */
    .arch-headbar { padding: 10px 12px !important; }
    .arch-headbar__title { font-size: 14px !important; }
    .arch-summary { font-size: 11px !important; }
}

@media (max-width: 480px) {
    /* Ще менший — для маленьких екранів */
    .krok-logo { height: 20px !important; }
    .krok-pill__badge { padding: 6px 14px !important; }

    .test-item { padding: 12px 12px 14px !important; }
    .test-title { font-size: 14px !important; }
    .test-progress {
        height: 28px !important;
        font-size: 12px !important;
        min-width: 70px !important;
    }
    .start-btn, .history-btn {
        padding: 9px 10px !important;
        font-size: 11px !important;
    }
}

/* ── DARK MODE FIX для systems-warning блоку ───────────────── */
body.dark-mode .systems-warning > div {
    background: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
}
body.dark-mode .systems-warning > div > div > div:first-child {
    color: #fcd34d !important;
}
body.dark-mode .systems-warning > div > div > div:last-child {
    color: #fde68a !important;
}

/* Модалка результату архіву + demo2026 — текст у dark-mode */
body.dark-mode #archResultModal .modal-content > div[style*="color:#334155"],
body.dark-mode #archResultModal .modal-content > div {
    color: #cbd5e1 !important;
}
body.dark-mode #demo2026PayModal .modal-content p[style*="color:#334155"],
body.dark-mode #demo2026PayModal .modal-content p {
    color: #cbd5e1 !important;
}

/* Demo booklet progress — в dark-mode читабельний */
body.dark-mode .test-item.demo-booklet {
    background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(5,150,105,0.06) 100%) !important;
    border-color: rgba(16,185,129,0.45) !important;
}
body.dark-mode .test-item.demo-booklet .test-progress[style] {
    background: rgba(16,185,129,0.16) !important;
    color: #a7f3d0 !important;
}

/* AI-баннер у dark-mode */
body.dark-mode li.test-item[style*="rgba(99,102,241"] {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
/* ── /MOBILE COMPACT TWEAKS ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   ЗАГОЛОВОК СТОРІНКИ ДЛЯ ПОШУКУ Й СКРІН-РІДЕРІВ.
   Назва «KROK • HUB» намальована як SVG-логотип, тож справжнього
   h1 на сторінці не було — структура стрибала одразу на h3.
   Ховаємо саме візуально (не display:none і не visibility:hidden):
   так текст лишається доступним для допоміжних технологій.
   ═══════════════════════════════════════════════════════════ */
.krok-sr-title{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ПРОМО-ПЛАШКА НАД КАРТКАМИ («Тести по системах», «Зареєструйтесь»).

   Кольори були прописані інлайн (#fff8ed фон, #92400e текст), тож
   у темній темі перекрити їх було нічим: лишався світлий фон, а
   поруч уже темне тло сторінки — і текст читався на 1.5:1.
   Тепер це клас із власним темним варіантом.
   ═══════════════════════════════════════════════════════════ */
.krok-promo-note{
  background:#fff8ed;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:14px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.krok-promo-note__t{ font-size:14px; font-weight:600; color:#7c3d0a; margin-bottom:4px }
.krok-promo-note__s{ font-size:13px; color:#8a5209 }

body.dark-mode .krok-promo-note{
  background:#2a1f12;
  border-color:#4a341c;
}
body.dark-mode .krok-promo-note__t{ color:#f5d9b0 }
body.dark-mode .krok-promo-note__s{ color:#d8b88a }


/* ==== assets/common/modal.css ==== */
/* ============================================================
   ЄДИНА СИСТЕМА МОДАЛОК — один дизайн на весь сайт.
   ------------------------------------------------------------
   Проблема, яку це вирішує: модалок 13+, вони розкидані по 4
   вʼюхах, мають три різні структури розмітки
       .modal > .content        + .close-x     (сторінка тесту)
       .modal > .modal-content  + .close       (хаб)
       .rm-overlay > .rm-dialog                (результат)
   і ЧОТИРИ різні способи відкриття з JS:
       .modal--open   — explain / similar / spec / pharm / drug / twin
       .open          — resultModal
       inline display — historyModal / archResultModal
       .active/.is-active — решта сайту
   Раніше поверх цього лежав krok-modals.css — шар !important-
   перекриттів. Він латав симптоми: будь-яка нова модалка знову
   виглядала інакше.

   Тут навпаки: один набір токенів і один вигляд, а всі історичні
   структури та класи-відкривачі підтримані ЯК Є. Тому підключення
   цього файлу нічого не ламає — JS міняти не треба.

   Нова розмітка (для нових модалок) — views/partials/modal.php:
       .ms-modal > .ms-modal__dialog > __head / __body / __foot
============================================================ */

:root{
  --ms-surface:#fff;
  --ms-surface-2:#f6faf9;
  --ms-ink:#0f172a;
  --ms-muted:#64748b;
  --ms-soft:#94a3b8;
  --ms-line:#e2e8f0;
  --ms-accent:#0d9488;
  --ms-accent-ink:#0f766e;
  --ms-accent-soft:#ecfdf5;
  --ms-danger:#b45309;
  --ms-danger-soft:#fff7ed;
  --ms-backdrop:rgba(15,23,42,.62);
  --ms-radius:20px;
  --ms-shadow:0 10px 15px -3px rgba(15,23,42,.12), 0 25px 50px -12px rgba(15,23,42,.28);
}
body.dark-mode{
  --ms-surface:#111827;
  --ms-surface-2:#0f1623;
  --ms-ink:#e5e7eb;
  --ms-muted:#9ca3af;
  --ms-soft:#6b7280;
  --ms-line:#1f2937;
  --ms-accent:#2dd4bf;
  --ms-accent-ink:#5eead4;
  --ms-accent-soft:#052e2b;
  --ms-danger:#fdba74;
  --ms-danger-soft:#2a1a0d;
  --ms-backdrop:rgba(0,0,0,.68);
  --ms-shadow:0 10px 15px -3px rgba(0,0,0,.4), 0 25px 50px -12px rgba(0,0,0,.6);
}

/* ── Оболонка: приховано за замовчуванням ─────────────────── */
.modal,
.ms-modal{
  /* Модалки — найвищий шар. Значення збігається з тим, що вже
     ставив КРОК-хаб (.modal{z-index:10000}): цей файл вантажиться
     ПІСЛЯ krok/css/main.css, тож менше число тихо занизило б усі
     модалки хаба. Закріплена панель прогресу має 1001, тобто
     лишається під діалогом. */
  position:fixed; inset:0; z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background:var(--ms-backdrop);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ВСІ історичні способи відкриття — щоб не чіпати JS */
.modal.modal--open, .modal.open, .modal.active, .modal.is-active, .modal.modal-open,
.ms-modal.modal--open, .ms-modal.open, .ms-modal.active, .ms-modal.is-active,
.ms-modal.is-open{
  display:flex;
}
/* historyModal/archResultModal відкриваються інлайновим display —
   інлайн і так перебиває таблицю стилів, тут нічого не треба. */

/* ── Діалог ───────────────────────────────────────────────── */
.modal > .content,
.modal > .modal-content,
.ms-modal__dialog{
  position:relative;
  width:100%; max-width:660px;
  max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--ms-surface);
  color:var(--ms-ink);
  border:1px solid var(--ms-line);
  border-radius:var(--ms-radius);
  box-shadow:var(--ms-shadow);
  overflow:hidden;
  animation:msPop .22s cubic-bezier(.16,1,.3,1);
}
@keyframes msPop{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .modal > .content, .modal > .modal-content, .ms-modal__dialog{ animation:none }
}

/* Розміри — на обгортці модалки */
.ms-modal--sm .ms-modal__dialog, .modal.modal--sm > .content, .modal.modal--sm > .modal-content{ max-width:480px }
.ms-modal--lg .ms-modal__dialog, .modal.modal--lg > .content, .modal.modal--lg > .modal-content{ max-width:820px }

/* ── Заголовок ────────────────────────────────────────────── */
.ms-modal__head{
  position:relative;             /* якір для волоска-розділювача */
  flex:none;
  display:flex; align-items:center; gap:13px;
  padding:20px 60px 16px 24px;
  background:var(--ms-surface);
}
/* Замість суцільної лінії — м'який волосок, що згасає до країв:
   менше «коробки», більше глибини. Прикріплений до низу заголовка,
   тож не залежить від його висоти. */
.ms-modal__head::after{
  content:''; position:absolute; left:24px; right:24px; bottom:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ms-line) 12%,var(--ms-line) 88%,transparent);
}
.ms-modal__ic{
  flex:none; width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--ms-accent-soft); color:var(--ms-accent-ink);
}
.ms-modal__ic svg{ width:20px; height:20px }
.ms-modal__t{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.25;
              color:var(--ms-ink) }
.ms-modal__sub{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--ms-muted) }

/* Історичні заголовки — той самий вигляд */
.modal .content > h3,
.modal .modal-content > h3{
  flex:none; margin:0;
  padding:17px 52px 15px 20px;
  border-bottom:1px solid var(--ms-line);
  font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ms-ink);
}

/* ── Тіло ─────────────────────────────────────────────────── */
.ms-modal__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:20px 24px 22px;
  font-size:15px; line-height:1.65; color:var(--ms-ink);
}
.modal .content > *:not(h3):not(.close-x):not(.close),
.modal .modal-content > *:not(h3):not(.close-x):not(.close){
  /* історичні модалки: тіло — усе, що не заголовок і не хрестик */
  scrollbar-width:thin;
}
.ms-modal__body::-webkit-scrollbar{ width:8px }
.ms-modal__body::-webkit-scrollbar-thumb{ background:var(--ms-soft); border-radius:99px; opacity:.5 }

/* ── Підвал ───────────────────────────────────────────────── */
.ms-modal__foot{
  flex:none;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 24px 16px;
  border-top:1px solid var(--ms-line);
  background:var(--ms-surface-2);
}
.ms-modal__foot--end{ justify-content:flex-end }

/* ── Хрестик ──────────────────────────────────────────────── */
.modal .close-x, .modal .close,
.ms-modal__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:transparent; color:var(--ms-muted);
  font-size:21px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.modal .close-x:hover, .modal .close:hover, .ms-modal__x:hover{
  background:var(--ms-surface-2); color:var(--ms-ink);
}
.modal .close-x:focus-visible, .modal .close:focus-visible, .ms-modal__x:focus-visible{
  outline:2px solid var(--ms-accent); outline-offset:2px;
}

/* ── Кнопки ───────────────────────────────────────────────── */
.ms-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 17px; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ms-btn--primary{ background:var(--ms-accent); color:#fff }
.ms-btn--primary:hover{ background:var(--ms-accent-ink); color:#fff }
.ms-btn--ghost{ background:transparent; border-color:var(--ms-line); color:var(--ms-ink) }
/* Небезпечні дії (скинути прогрес, видалити) — окремий вигляд, щоб
   не плутались із головною дією діалогу. */
.ms-btn--danger{ background:#dc2626; color:#fff }
.ms-btn--danger:hover{ background:#b91c1c; color:#fff }
body.dark-mode .ms-btn--danger{ background:#ef4444 }
body.dark-mode .ms-btn--danger:hover{ background:#dc2626 }
.ms-btn--ghost:hover{ background:var(--ms-surface-2) }
.ms-btn:focus-visible{ outline:2px solid var(--ms-accent); outline-offset:2px }

/* ── Мобільний: на ВЕСЬ ЕКРАН ──────────────────────────────
   Було: діалог по центру з полем 14px навколо і заокругленням.
   На телефоні це з'їдало 28px ширини плюс 24px внутрішніх
   падінгів — на вузькому екрані в рядок лізло по два слова,
   а текст тестів і пояснень читати було неможливо.

   Тепер модалка займає весь екран без порожніх полів з боків,
   а внутрішні відступи стиснуті. Уся ширина йде під текст.

   100dvh, а не 100vh: у мобільних браузерах адресний рядок
   ховається/показується, і 100vh дає діалог вищий за видиму
   область — низ (кнопки) опиняється під панеллю браузера.
   Для старих браузерів лишаємо 100vh рядком вище.
   ───────────────────────────────────────────────────────── */
@media (max-width:600px){
  .modal, .ms-modal{ padding:0; align-items:stretch; justify-content:stretch }
  .modal > .content, .modal > .modal-content, .ms-modal__dialog{
    width:100%; max-width:none;
    height:100vh; height:100dvh; max-height:none;
    border:none; border-radius:0;
    box-shadow:none;
    animation:msFade .18s ease;
  }

  /* Заголовок «приклеєний»: довгий текст гортається під ним,
     а кнопка закриття завжди на місці. */
  .ms-modal__head, .modal .content > h3, .modal .modal-content > h3{
    position:sticky; top:0; z-index:3;
    padding:12px 46px 10px 14px;
  }
  .ms-modal__head::after{ left:14px; right:14px }
  .ms-modal__ic{ width:32px; height:32px; border-radius:10px }
  .ms-modal__ic svg{ width:17px; height:17px }
  .ms-modal__t{ font-size:16px }

  .ms-modal__body{ padding:12px 14px 16px }
  .ms-modal__foot{ padding:10px 14px; position:sticky; bottom:0; z-index:3 }
}
@keyframes msFade{ from{ opacity:0 } to{ opacity:1 } }

/* ПІДТВЕРДЖЕННЯ НА ТЕЛЕФОНІ — картка, а не аркуш на весь екран.

   Правило вище розтягує БУДЬ-ЯКУ модалку на всю висоту. Для модалок із
   довгим вмістом (форми, списки) це правильно. Для питання на два
   рядки — ні: виміряно на 390×844, заголовок угорі, кнопки внизу і
   шістсот пікселів порожнечі між ними. Вікно перестає читатись як
   вікно — воно виглядає як зламана сторінка, і людина не бачить, що
   саме в неї спитали, коли натискає «Виключити».

   Правимо лише .mo-confirm (moConfirm/moPrompt): це і є діалог, чий
   вміст завжди короткий. */
@media (max-width:600px){
  .ms-modal.mo-confirm{ padding:16px; align-items:center; justify-content:center }
  .ms-modal.mo-confirm .ms-modal__dialog{
    width:100%; max-width:420px;
    height:auto; max-height:calc(100dvh - 32px);
    border:1px solid var(--ms-line);
    border-radius:var(--ms-radius);
    box-shadow:var(--ms-shadow);
    animation:msPop .22s cubic-bezier(.16,1,.3,1);
  }
  /* Липкі заголовок і підвал тут ні до чого: гортати нема чого. */
  .ms-modal.mo-confirm .ms-modal__head,
  .ms-modal.mo-confirm .ms-modal__foot{ position:static }
}

/* Дуже вузькі екрани — ще трохи тісніше. */
@media (max-width:380px){
  .ms-modal__head, .modal .content > h3, .modal .modal-content > h3{ padding:10px 42px 9px 11px }
  .ms-modal__head::after{ left:11px; right:11px }
  .ms-modal__body{ padding:10px 11px 14px }
  .ms-modal__foot{ padding:9px 11px }
}

/* ── Вміст готових модалок із views/modals/ ──────────────────
   Раніше ці елементи стилізувались інлайном у кожній копії
   модалки — тому копії й розповзлись. Тепер вигляд тут. */
.ms-field{
  width:100%; min-height:130px; resize:vertical;
  padding:11px 13px; border-radius:10px;
  border:1px solid var(--ms-line); background:var(--ms-surface);
  color:var(--ms-ink); font:500 14px/1.55 inherit; outline:none;
}
.ms-field::placeholder{ color:var(--ms-soft) }
.ms-field:focus{ border-color:var(--ms-accent); box-shadow:0 0 0 3px var(--ms-accent-soft) }

.ms-text{ margin:0; font:500 14.5px/1.6 inherit; color:var(--ms-muted) }
.ms-text b, .ms-text strong{ color:var(--ms-ink); font-weight:700 }

/* Підсумкова табличка результату (views/modals/result.php).
   Раніше в кожній копії була своя сітка з інлайновими кольорами. */
.ms-stats{ margin:0; display:flex; flex-direction:column; gap:2px }
.ms-stats > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:1px solid var(--ms-line);
}
.ms-stats > div:last-child{ border-bottom:0 }
.ms-stats dt{ margin:0; font:500 14px inherit; color:var(--ms-muted) }
.ms-stats dd{ margin:0; font:700 16px inherit; color:var(--ms-ink); font-variant-numeric:tabular-nums }
.ms-stats dd.is-ok{ color:#059669 }
.ms-stats dd.is-bad{ color:#dc2626 }
body.dark-mode .ms-stats dd.is-ok{ color:#34d399 }
body.dark-mode .ms-stats dd.is-bad{ color:#f87171 }

/* ── Поки відкрита будь-яка модалка ──────────────────────────
   Клас на <body> ставить assets/common/modal.js.

   Навіщо: сторінка тесту має ЗАКРІПЛЕНУ панель прогресу
   (.progress-controls — position:fixed, z-index:1001) з кнопкою
   «Завершити». Вона стояла поверх відкритої модалки — особливо
   помітно на телефоні, де модалка займає майже весь екран.
   Тепер така панель ховається, поки діалог відкритий, і сама
   повертається, щойно його закрили. */
body.ms-has-modal .progress-controls,
body.ms-has-modal .progress-container,
body.ms-has-modal #finish-test-btn,
body.ms-has-modal #finish-btn,
body.ms-has-modal .finish-btn,
body.ms-has-modal .btn-finish-top{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
}

/* Сторінка під модалкою не має прокручуватись «крізь» неї. */
body.ms-has-modal{ overflow:hidden }

/* ── Тінь під заголовком, що зʼявляється лише при прокрутці ──
   Класичний прийом на двох фонах: перший «приклеєний» до вмісту
   (local) закриває другий, поки тіло не прокручене. Жодного JS. */
.ms-modal__body{
  background:
    linear-gradient(var(--ms-surface) 30%, rgba(255,255,255,0)) top    / 100% 22px no-repeat local,
    linear-gradient(rgba(255,255,255,0), var(--ms-surface) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(15,23,42,.10), rgba(15,23,42,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(15,23,42,.10), rgba(15,23,42,0)) bottom / 100% 9px no-repeat scroll;
}
body.dark-mode .ms-modal__body{
  background:
    linear-gradient(var(--ms-surface) 30%, rgba(0,0,0,0)) top    / 100% 22px no-repeat local,
    linear-gradient(rgba(0,0,0,0), var(--ms-surface) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(0,0,0,.5), rgba(0,0,0,0)) top    / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.5), rgba(0,0,0,0)) bottom / 100% 9px no-repeat scroll;
}

/* Іконка заголовка — мʼяке кільце замість плаского квадрата. */
.ms-modal__ic{ box-shadow:0 0 0 1px var(--ms-line) inset }

/* На телефоні «ручка» аркуша не має налазити на заголовок. */


/* ═══════════════════════════════════════════════════════════
   ТЕЛЕФОН: ЗНЯТТЯ СТАРИХ ПЕРЕКРИТТІВ.

   assets/krok/css/main.css і mainhub.css досі тримають на
   мобільних власні правила діалога:

       @media (max-width:640px)  .modal .content,
                                 .modal-content { width:96%;
                                   padding:20px; border-radius:24px }
       @media (max-width:480px)  .modal .content { padding:20px 16px
                                                   !important }

   Через width:96% лишалась смужка фону з боків («порожнє місце
   зліва-справа»), а падінг 20px на вузькому екрані з'їдав ще
   40px — разом із внутрішніми відступами в рядок лізло по два
   слова. Правило з !important інакше не перебити, тож тут теж
   !important — рівно на ті властивості, що заважають.

   Сам padding діалога знімаємо в нуль: відступи задають
   __head/__body/__foot (структура .ms-modal) або власні
   правила модалки (#similarModal, #specModal тощо).
   ═══════════════════════════════════════════════════════════ */
@media (max-width:600px){
  .modal > .content,
  .modal > .modal-content,
  .modal .topics{
    width:100% !important;
    max-width:100% !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  /* Нові модалки (views/partials/modal.php) — це .modal.ms-modal з
     .ms-modal__dialog усередині, тож під `.modal .content` вони не
     підпадають і зайвого падінга не отримують. Відступи їм задають
     __head/__body/__foot вище. */
  .ms-modal > .ms-modal__dialog{ padding:0 }
}


/* ==== assets/krok/css/krok-hub-modals.css ==== */
      /* ── компактна модалка «Налаштувати теми» (як у krokTestView) ── */
      #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}

      /* ===== «ОБРАНІ ТЕМИ» — телефон: компактно, дрібним і акуратним шрифтом ===== */
      @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;}
      }

      /* === Бейдж «Найкращий результат» на картці буклета === */
      .best-result{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;width:fit-content;max-width:100%}
      .best-result svg{width:14px;height:14px;flex-shrink:0}
      .best-result b{font-weight:800}
      .best-result--great{background:rgba(16,185,129,.12);color:#059669}
      .best-result--good{background:rgba(14,165,233,.12);color:#0369a1}
      .best-result--mid{background:rgba(245,158,11,.14);color:#b45309}
      .best-result--low{background:rgba(239,68,68,.12);color:#dc2626}
      body.dark-mode .best-result--great{background:rgba(74,160,110,.2);color:#6fae8c}
      body.dark-mode .best-result--good{background:rgba(14,165,233,.2);color:#7dd3fc}
      body.dark-mode .best-result--mid{background:rgba(245,158,11,.2);color:#fbbf24}
      body.dark-mode .best-result--low{background:rgba(239,68,68,.2);color:#fca5a5}

      /* === History modal — cards layout === */
      .hist-modal .modal-content{max-width:760px;padding:28px 28px 22px}
      .hist-modal__header{margin-bottom:18px}
      .hist-modal__header h3{margin-bottom:4px}
      .hist-modal__sub{margin:0;font-size:13px;color:#64748b;font-weight:500}
      body.dark-mode .hist-modal__sub{color:#94a3b8}

      .hist-modal__list{display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow-y:auto;padding-right:4px;margin:0 -4px 0 0}
      .hist-modal__list::-webkit-scrollbar{width:6px}
      .hist-modal__list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);border-radius:10px}

      .hist-card{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.04);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
      .hist-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.10);border-color:rgba(99,102,241,.4)}
      body.dark-mode .hist-card{background:var(--card);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.02)}
      body.dark-mode .hist-card:hover{border-color:rgba(129,140,248,.55);box-shadow:0 10px 24px rgba(0,0,0,.45)}

      .hist-card__score{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:#fff;letter-spacing:-.02em;background:linear-gradient(135deg,#64748b 0%,#475569 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 4px 10px rgba(15,23,42,.18)}
      .hist-card__score--great{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
      .hist-card__score--good{background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%)}
      .hist-card__score--mid{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}
      .hist-card__score--low{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}

      .hist-card__body{min-width:0;display:flex;flex-direction:column;gap:6px}
      .hist-card__date{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
      body.dark-mode .hist-card__date{color:#f1f5f9}
      .hist-card__date small{font-weight:500;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
      .hist-card__stats{display:flex;flex-wrap:wrap;gap:6px}
      .hist-stat{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#f1f5f9;color:#475569;border:1px solid transparent}
      body.dark-mode .hist-stat{background:rgba(30,41,59,.85);color:#d4d4d8}
      .hist-stat--ok{background:#dcfce7;color:#166534}
      .hist-stat--warn{background:#fef3c7;color:#92400e}
      .hist-stat--bad{background:#fee2e2;color:#b91c1c}
      body.dark-mode .hist-stat--ok{background:rgba(22,52,31,.7);color:#9ed4b4}
      body.dark-mode .hist-stat--warn{background:rgba(120,53,15,.55);color:#fcd34d}
      body.dark-mode .hist-stat--bad{background:rgba(58,31,31,.7);color:#fda4af}
      .hist-stat__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}

      .hist-card__action{display:flex;align-items:center;justify-content:flex-end}
      .hist-act{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);white-space:nowrap}
      .hist-act--primary{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.35)}
      .hist-act--primary:hover{transform:translateY(-2px);filter:saturate(115%);box-shadow:0 8px 20px rgba(239,68,68,.45)}
      .hist-act--done{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;cursor:default;box-shadow:0 4px 12px rgba(16,185,129,.3)}
      .hist-act--muted{background:transparent;color:#94a3b8;cursor:default;font-weight:500;font-size:12px}

      .hist-modal__empty{padding:32px 20px;text-align:center;color:#64748b;font-size:14px;border-radius:16px;background:rgba(241,245,249,.5);border:1px dashed var(--line)}
      body.dark-mode .hist-modal__empty{background:rgba(30,41,59,.4);color:#94a3b8}
      .hist-modal__empty strong{display:block;margin-bottom:6px;color:var(--ink);font-size:15px}
      body.dark-mode .hist-modal__empty strong{color:#f1f5f9}

      .hist-modal__pager{align-items:center;gap:14px;margin-top:18px}
      .hist-modal__page-info{font-size:12px;color:#64748b;font-weight:600;min-width:64px;text-align:center}
      body.dark-mode .hist-modal__page-info{color:#94a3b8}

      @media (max-width: 560px){
        .hist-card{grid-template-columns:54px 1fr;grid-template-rows:auto auto;row-gap:10px;padding:12px 14px}
        .hist-card__score{width:54px;height:54px;font-size:16px}
        .hist-card__action{grid-column:1 / -1;justify-content:stretch}
        .hist-act{width:100%;justify-content:center}
      }

      /* ============================================================
         Archive head bar — заголовок + кнопка налаштувань + зведення
         ============================================================ */
      .arch-headbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--line);box-shadow:0 4px 14px rgba(15,23,42,.04)}
      body.dark-mode .arch-headbar{background:var(--card);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.02)}
      .arch-headbar__left{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
      .arch-headbar__title{margin:0 !important;padding:0 !important;background:none !important;border:none !important;font-family:'Poppins',sans-serif !important;font-size:18px !important;font-weight:800 !important;color:var(--ink) !important;letter-spacing:-.01em !important;text-align:left !important;display:block !important}
      body.dark-mode .arch-headbar__title{color:#f1f5f9 !important}

      .arch-summary{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:#64748b;font-weight:500}
      body.dark-mode .arch-summary{color:#94a3b8}
      .arch-summary__item{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#f1f5f9;line-height:1.4}
      body.dark-mode .arch-summary__item{background:rgba(30,41,59,.7)}
      .arch-summary__item b{color:#4f46e5;font-weight:700}
      body.dark-mode .arch-summary__item b{color:#e4e4e7}
      .arch-summary__filters{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));color:#4f46e5}
      body.dark-mode .arch-summary__filters{background:rgba(255,255,255,.2);color:#e4e4e7}
      .arch-summary__count{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(5,150,105,.12));color:#059669}
      body.dark-mode .arch-summary__count{background:rgba(74,160,110,.18);color:#9ed4b4}
      .arch-summary__count b{color:inherit}

      .arch-settings-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:14px;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:#fff;font:700 13px inherit;cursor:pointer;box-shadow:0 6px 18px rgba(99,102,241,.32);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;flex-shrink:0}
      .arch-settings-btn:hover{transform:translateY(-2px);filter:saturate(115%);box-shadow:0 10px 24px rgba(99,102,241,.4)}
      .arch-settings-btn:active{transform:translateY(0)}
      .arch-settings-btn svg{transition:transform .35s var(--ease, ease)}
      .arch-settings-btn:hover svg{transform:rotate(70deg)}
      .arch-settings-btn__dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#facc15;box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 8px rgba(250,204,21,.6)}
      body.dark-mode .arch-settings-btn__dot{box-shadow:0 0 0 2px #1a1a1d, 0 0 8px rgba(250,204,21,.6)}

      /* Активні чіпи фільтрів зовні модалки (швидкий доступ для зняття) */
      .arch-active-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));border:1px dashed rgba(99,102,241,.25)}
      body.dark-mode .arch-active-bar{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

      @media (max-width: 560px){
        .arch-headbar{padding:12px 14px;gap:10px}
        .arch-headbar__title{font-size:16px !important}
        .arch-settings-btn{padding:9px 12px;font-size:12px}
        .arch-settings-btn__label{display:none}
        .arch-settings-btn{border-radius:12px}
      }

      /* ============================================================
         Archive settings modal — compact bottom-sheet style
         ============================================================ */
      .asm{display:none;position:fixed !important;inset:0 !important;z-index:2147483647 !important;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);align-items:center;justify-content:center;animation:asmFade .2s ease-out;isolation:isolate}
      .asm[style*="flex"]{display:flex !important}
      @keyframes asmFade{from{opacity:0}to{opacity:1}}
      @keyframes asmSlide{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

      .asm__sheet{width:min(560px, 94vw);max-height:88vh;background:#fff;border-radius:20px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.3);border:1px solid rgba(255,255,255,.7);overflow:hidden;animation:asmSlide .25s ease-out}
      body.dark-mode .asm__sheet{background:#161618;border-color:rgba(148,163,184,.12);box-shadow:0 24px 60px rgba(0,0,0,.55)}

      /* Header */
      .asm__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
      body.dark-mode .asm__head{border-bottom-color:rgba(148,163,184,.12)}
      .asm__head-left{display:flex;align-items:center;gap:12px;min-width:0}
      .asm__head-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.3)}
      .asm__title{margin:0;font:800 15px/1.2 'Poppins',sans-serif;color:#0f172a;letter-spacing:-.01em;background:none !important;-webkit-text-fill-color:#0f172a !important}
      body.dark-mode .asm__title,
      body.dark-mode .asm__title{color:#f1f5f9 !important;-webkit-text-fill-color:#f1f5f9 !important}
      .asm__sub{margin:2px 0 0;font:500 11px/1 inherit;color:#94a3b8}
      body.dark-mode .asm__sub{color:#94a3b8}
      .asm__close{width:32px;height:32px;border:none;border-radius:10px;background:#f1f5f9;color:#64748b;cursor:pointer;display:grid;place-items:center;transition:all .15s;flex-shrink:0}
      .asm__close:hover{background:#fee2e2;color:#dc2626}
      body.dark-mode .asm__close{background:rgba(30,41,59,.8);color:#d4d4d8}
      body.dark-mode .asm__close:hover{background:rgba(239,68,68,.2);color:#fca5a5}

      /* Scrollable body */
      .asm__body{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
      .asm__body::-webkit-scrollbar{width:6px}
      .asm__body::-webkit-scrollbar-track{background:transparent}
      .asm__body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:6px}
      body.dark-mode .asm__body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2)}

      /* Footer */
      .asm__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid #f1f5f9;background:#f8fafc;flex-shrink:0;flex-wrap:wrap}
      body.dark-mode .asm__foot{border-top-color:rgba(148,163,184,.12);background:rgba(15,23,42,.5)}
      .asm__foot-actions{display:flex;gap:8px;margin-left:auto}

      @media (max-width: 480px){
        .asm{align-items:flex-end}
        .asm__sheet{width:100%;max-height:92vh;border-radius:20px 20px 0 0;animation:asmSlideUp .28s ease-out}
        @keyframes asmSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .asm__head{padding:14px 16px}
        .asm__body{padding:12px 16px}
        .asm__foot{padding:10px 16px}
      }

      /* ============================================================
         Compact form rows — namespace .af / .af-row
         ============================================================ */
      .af-row{display:flex;flex-direction:column;gap:6px}
      .af-row__label{font:700 11px/1 inherit;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;padding-left:2px}
      body.dark-mode .af-row__label{color:#64748b}

      /* Пошук */
      .af__search{display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8;transition:all .15s}
      .af__search:focus-within{border-color:#6366f1;background:#fff;color:#0f172a;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
      .af__search input{flex:1;border:none;outline:none;background:transparent;font:500 13px/1 inherit;color:inherit;min-width:0}
      .af__search input::-webkit-search-cancel-button{appearance:none;display:none}
      body.dark-mode .af__search{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.1);color:#64748b}
      body.dark-mode .af__search:focus-within{background:rgba(30,41,59,.9);color:#f4f4f5;border-color:rgba(255,255,255,.5)}

      /* Сортування — повна ширина */
      .af-host .af__sort{width:100%;height:38px;padding:0 36px 0 12px;border-radius:10px;border:1px solid #e2e8f0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:12px;font:600 13px inherit;color:#0f172a;cursor:pointer;appearance:none;-webkit-appearance:none;transition:all .15s}
      .af-host .af__sort:hover{border-color:#cbd5e1}
      .af-host .af__sort:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
      body.dark-mode .af-host .af__sort{background-color:rgba(30,41,59,.6);color:#f4f4f5;border-color:rgba(148,163,184,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
      body.dark-mode .af-host .af__sort option{background:#242428;color:#f4f4f5}

      /* Чіпи статусу */
      .af__chips-row{display:flex;gap:6px;flex-wrap:wrap}
      .af-host .af-chip{padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#475569;font:600 12px inherit;cursor:pointer;transition:all .15s;line-height:1.2;height:auto;box-shadow:none}
      .af-host .af-chip:hover{border-color:#cbd5e1;color:#0f172a;transform:none;box-shadow:none}
      .af-host .af-chip.is-active{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 2px 6px rgba(99,102,241,.25)}
      .af-host .af-chip--ok.is-active{background:#10b981;border-color:#10b981;box-shadow:0 2px 6px rgba(16,185,129,.25)}
      .af-host .af-chip--bad.is-active{background:#ef4444;border-color:#ef4444;box-shadow:0 2px 6px rgba(239,68,68,.25)}
      body.dark-mode .af-host .af-chip{background:rgba(30,41,59,.6);color:#d4d4d8;border-color:rgba(148,163,184,.1)}
      body.dark-mode .af-host .af-chip:hover{background:rgba(30,41,59,.9);color:#f4f4f5;border-color:rgba(148,163,184,.25)}

      /* Пікери */
      .af__pickers{display:flex;gap:6px;flex-wrap:wrap}
      @keyframes afPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

      /* Дати */
      .af__dates{display:flex;gap:8px;flex-wrap:wrap}
      .af-date{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid #e2e8f0;background:#fff}
      .af-date__lbl{font:700 10px/1 inherit;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
      .af-date__inp{flex:1;min-width:0;border:none;background:transparent;font:600 12px inherit;color:#0f172a;outline:none;cursor:pointer;color-scheme:light;padding:0}
      body.dark-mode .af-date{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.1)}
      body.dark-mode .af-date__lbl{color:#64748b}
      body.dark-mode .af-date__inp{color:#f4f4f5;color-scheme:dark}

      /* Активні чіпи (всередині модалки) */
      .af__active{display:flex;flex-wrap:wrap;gap:5px;padding:10px;border-radius:10px;background:rgba(99,102,241,.05);border:1px dashed rgba(99,102,241,.2)}
      body.dark-mode .af__active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
      .af-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:999px;background:rgba(99,102,241,.12);color:#4f46e5;font:600 11px/1.4 inherit;border:1px solid rgba(99,102,241,.2)}
      body.dark-mode .af-tag{background:rgba(255,255,255,.18);color:#e4e4e7;border-color:rgba(255,255,255,.35)}
      .af-tag__k{opacity:.65;text-transform:uppercase;font-size:9px;letter-spacing:.04em}
      .af-tag__x{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(99,102,241,.18);border:none;color:inherit;cursor:pointer;font:700 11px/1 inherit;padding:0;transition:all .12s}
      .af-tag__x:hover{background:#ef4444;color:#fff}

      /* Лічильник у футері */
      .af__count{font:500 12px inherit;color:#64748b}
      body.dark-mode .af__count{color:#94a3b8}
      .af__count b{color:#4f46e5;font-weight:800}
      body.dark-mode .af__count b{color:#e4e4e7}

      /* Кнопки футера */
      .af-host .af-reset,
      .af-host .af-apply{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;margin:0;border-radius:10px;font:700 13px inherit;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;letter-spacing:.01em;white-space:nowrap;line-height:1}
      .af-host .af-reset svg,
      .af-host .af-apply svg{flex-shrink:0}

      .af-host .af-reset{border:1.5px solid #e2e8f0;background:#fff;color:#64748b;box-shadow:0 1px 2px rgba(15,23,42,.04)}
      .af-host .af-reset:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.12)}
      .af-host .af-reset:active{transform:translateY(0);box-shadow:0 1px 2px rgba(239,68,68,.1)}
      .af-host .af-reset svg{transition:transform .35s ease}
      .af-host .af-reset:hover svg{transform:rotate(-180deg)}
      body.dark-mode .af-host .af-reset{background:rgba(30,41,59,.6);color:#94a3b8;border-color:rgba(148,163,184,.15);box-shadow:0 1px 2px rgba(0,0,0,.2)}
      body.dark-mode .af-host .af-reset:hover{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.4);box-shadow:0 4px 12px rgba(239,68,68,.2)}

      .af-host .af-apply{border:none;color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 12px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.2);position:relative;overflow:hidden}
      .af-host .af-apply::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%);pointer-events:none}
      .af-host .af-apply:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.05)}
      .af-host .af-apply:active{transform:translateY(0);box-shadow:0 2px 6px rgba(16,185,129,.3)}
      .af-host .af-apply svg{stroke:#fff}
      body.dark-mode .af-host .af-apply{box-shadow:0 4px 14px rgba(74,160,110,.4), inset 0 1px 0 rgba(255,255,255,.15)}
      body.dark-mode .af-host .af-apply:hover{box-shadow:0 8px 22px rgba(74,160,110,.5), inset 0 1px 0 rgba(255,255,255,.2)}

      /* Замок для старого CSS — занулити нав'язані стилі для всіх button/select всередині host */
      .af-host button,
      .af-host select,
      .af-host input{box-shadow:none !important}

      /* ─── Небезпечна зона: «Очистити архів» ─── */
      .af-host .af-danger-row{margin-top:6px;padding:12px 14px;border-radius:12px;background:#fef2f2;border:1px solid #fee2e2;display:flex;flex-direction:column;gap:8px}
      .af-host .af-danger-row .af-row__label{color:#b91c1c}
      .af-host .af-danger-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:36px;padding:0 14px;border-radius:10px;border:1.5px solid #fecaca;background:#fff;color:#dc2626;font:700 13px inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease}
      .af-host .af-danger-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(220,38,38,.25)}
      .af-host .af-danger-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(220,38,38,.25)}
      .af-host .af-danger-btn svg{flex-shrink:0;stroke:currentColor}
      .af-host .af-danger-hint{font-size:12px;color:#7f1d1d;line-height:1.45}
      body.dark-mode .af-host .af-danger-row{background:rgba(127,29,29,.18);border-color:rgba(220,38,38,.35)}
      body.dark-mode .af-host .af-danger-row .af-row__label{color:#fca5a5}
      body.dark-mode .af-host .af-danger-btn{background:rgba(15,23,42,.45);border-color:rgba(248,113,113,.45);color:#fca5a5}
      body.dark-mode .af-host .af-danger-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff}
      body.dark-mode .af-host .af-danger-hint{color:#fca5a5}

      /* ─── Модал підтвердження очистки архіву ─── */
      #archClearConfirm{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:10010;align-items:center;justify-content:center;padding:16px}
      #archClearConfirm.is-open{display:flex}
      #archClearConfirm .acc__box{background:#fff;border-radius:16px;padding:22px 22px 18px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(15,23,42,.35);animation:accIn .18s ease}
      @keyframes accIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
      #archClearConfirm .acc__title{font:700 17px inherit;color:#0f172a;margin:0 0 8px;display:flex;align-items:center;gap:8px}
      #archClearConfirm .acc__title svg{flex-shrink:0;color:#dc2626}
      #archClearConfirm .acc__body{font:400 14px/1.5 inherit;color:#475569;margin:0 0 18px}
      #archClearConfirm .acc__btns{display:flex;gap:8px;justify-content:flex-end}
      #archClearConfirm .acc__btn{height:38px;padding:0 16px;border-radius:10px;font:700 13px inherit;cursor:pointer;border:1.5px solid transparent;transition:transform .12s ease,box-shadow .15s ease,background .15s ease}
      #archClearConfirm .acc__btn--cancel{background:#fff;border-color:#e2e8f0;color:#475569}
      #archClearConfirm .acc__btn--cancel:hover{background:#f1f5f9}
      #archClearConfirm .acc__btn--danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.32)}
      #archClearConfirm .acc__btn--danger:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(220,38,38,.4);filter:brightness(1.05)}
      #archClearConfirm .acc__btn[disabled]{opacity:.7;cursor:wait;transform:none;box-shadow:none}
      body.dark-mode #archClearConfirm .acc__box{background:#161618;color:#f4f4f5;box-shadow:0 24px 60px rgba(0,0,0,.55)}
      body.dark-mode #archClearConfirm .acc__title{color:#f8fafc}
      body.dark-mode #archClearConfirm .acc__body{color:#94a3b8}
      body.dark-mode #archClearConfirm .acc__btn--cancel{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.2);color:#d4d4d8}
      body.dark-mode #archClearConfirm .acc__btn--cancel:hover{background:rgba(30,41,59,.85)}

      /* ─── Поліпшені кнопки футера модалки ───────────────────── */
      .asm__foot{
        gap:10px !important;
        background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%) !important;
        padding:14px 18px !important;
        border-top:1px solid #e2e8f0 !important;
      }
      body.dark-mode .asm__foot{
        background:linear-gradient(180deg,rgba(15,23,42,.6) 0%,rgba(15,23,42,.85) 100%) !important;
        border-top-color:rgba(148,163,184,.15) !important;
      }

      /* Базові спільні стилі — за ID для максимальної специфічності */
      #archResetFilters,
      #archSettingsApply{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        height:44px !important;
        min-width:120px !important;
        padding:0 20px !important;
        margin:0 !important;
        border-radius:12px !important;
        font:800 13px/1 'Inter','Poppins',system-ui,sans-serif !important;
        letter-spacing:.02em !important;
        cursor:pointer !important;
        white-space:nowrap !important;
        user-select:none !important;
        transition:transform .15s ease, box-shadow .2s ease,
                   background .2s ease, color .2s ease,
                   border-color .2s ease, filter .2s ease !important;
        outline:none !important;
      }
      #archResetFilters svg,
      #archSettingsApply svg{ flex-shrink:0 !important; }

      /* «Скинути» — нейтральна, акцент червоним на hover */
      #archResetFilters{
        background:#ffffff !important;
        border:1.5px solid #e2e8f0 !important;
        color:#64748b !important;
        box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
      }
      #archResetFilters:hover{
        background:#fef2f2 !important;
        border-color:#fca5a5 !important;
        color:#dc2626 !important;
        transform:translateY(-1px) !important;
        box-shadow:0 6px 16px rgba(239,68,68,.18) !important;
      }
      #archResetFilters:hover svg{ transform:rotate(-180deg) !important; }
      #archResetFilters svg{ transition:transform .35s ease !important; }
      #archResetFilters:active{
        transform:translateY(0) !important;
        box-shadow:0 1px 2px rgba(239,68,68,.12) !important;
      }
      body.dark-mode #archResetFilters{
        background:rgba(30,41,59,.6) !important;
        border-color:rgba(148,163,184,.18) !important;
        color:#cbd5e1 !important;
        box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
      }
      body.dark-mode #archResetFilters:hover{
        background:rgba(239,68,68,.12) !important;
        border-color:rgba(239,68,68,.45) !important;
        color:#fca5a5 !important;
        box-shadow:0 6px 16px rgba(239,68,68,.25) !important;
      }

      /* «Готово» — основний CTA, зелений градієнт */
      #archSettingsApply{
        background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
        border:none !important;
        color:#ffffff !important;
        box-shadow:0 6px 18px rgba(16,185,129,.38),
                   inset 0 1px 0 rgba(255,255,255,.25) !important;
        position:relative !important;
        overflow:hidden !important;
      }
      #archSettingsApply::before{
        content:"" !important;
        position:absolute !important; inset:0 !important;
        background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%) !important;
        pointer-events:none !important;
      }
      #archSettingsApply:hover{
        background:linear-gradient(135deg,#059669 0%,#047857 100%) !important;
        transform:translateY(-1px) !important;
        box-shadow:0 10px 24px rgba(16,185,129,.48),
                   inset 0 1px 0 rgba(255,255,255,.3) !important;
        filter:brightness(1.04) !important;
      }
      #archSettingsApply:active{
        transform:translateY(0) !important;
        box-shadow:0 3px 8px rgba(16,185,129,.35) !important;
      }
      #archSettingsApply svg{ stroke:#ffffff !important; }
      body.dark-mode #archSettingsApply{
        box-shadow:0 6px 18px rgba(16,185,129,.45),
                   inset 0 1px 0 rgba(255,255,255,.18) !important;
      }
      body.dark-mode #archSettingsApply:hover{
        box-shadow:0 10px 24px rgba(16,185,129,.55),
                   inset 0 1px 0 rgba(255,255,255,.22) !important;
      }

      /* Мобільна адаптація */
      @media (max-width: 480px){
        #archResetFilters,
        #archSettingsApply{
          height:42px !important;
          min-width:0 !important;
          flex:1 1 0 !important;
          padding:0 14px !important;
          font-size:12.5px !important;
        }
      }
      .af__count{
        font:600 12px/1.3 inherit !important;
        color:#475569 !important;
        flex:1;
        min-width:0;
      }
      body.dark-mode .af__count{color:#d4d4d8 !important}

      @media (max-width: 480px){
        .asm__foot{
          padding:12px 14px env(safe-area-inset-bottom, 12px) !important;
          flex-wrap:nowrap !important;
        }
        .asm__foot-actions{gap:8px !important; flex-shrink:0}
        .af-host .af-reset,
        .af-host .af-apply{
          height:40px !important;
          padding:0 14px !important;
          font-size:12.5px !important;
        }
        .af__count{font-size:11px !important}
      }

      /* ─── Поки модалка відкрита, ховаємо нижню навігацію
             і dark-mode toggle, щоб не наїжджали на футер ─── */
      body.modal-open .tabs-wrap,
      body.modal-open .dark-mode-toggle{
        opacity:0 !important;
        pointer-events:none !important;
        visibility:hidden !important;
      }

      /* ─── Native-select заміна для пікерів ──────────────────── */
      .af__pickers{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important}
      @media (min-width: 640px){
        .af__pickers{grid-template-columns:repeat(3,minmax(0,1fr))}
      }
      .af-host .af-native{
        width:100%;height:42px;padding:0 36px 0 12px;border-radius:10px;
        border:1px solid #e2e8f0;background:#fff
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          no-repeat right 12px center;background-size:12px;
        font:600 13px inherit;color:#0f172a;cursor:pointer;
        appearance:none;-webkit-appearance:none;-moz-appearance:none;
        transition:all .15s;
      }
      .af-host .af-native:hover{border-color:#cbd5e1}
      .af-host .af-native:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1) !important}
      .af-host .af-native.has-value{
        background-color:rgba(99,102,241,.08);
        border-color:rgba(99,102,241,.45);
        color:#4f46e5;
        font-weight:700;
      }
      body.dark-mode .af-host .af-native{
        background-color:rgba(30,41,59,.6);
        color:#e2e8f0;
        border-color:rgba(148,163,184,.1);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
      body.dark-mode .af-host .af-native.has-value{
        background-color:rgba(99,102,241,.18);
        border-color:rgba(99,102,241,.55);
        color:#c7d2fe;
      }
      body.dark-mode .af-host .af-native option{background:#242428;color:#f4f4f5}


/* ==== assets/common/explain-modal.css ==== */
/* ============================================================
   МОДАЛКА ПОЯСНЕННЯ — редизайн.
   ------------------------------------------------------------
   Що було не так: пояснення виглядало як суцільна стіна тексту.
   Дві секції («чому правильно» / «чому інші — ні») були
   візуально однакові, тож головна відповідь не читалась з
   першого погляду, а розбір невірних варіантів зливався з нею.
   Плюс власна геометрія (свої відступи, радіуси, хрестик) не
   збігалася з рештою модалок, і трималось це на суцільних
   !important — бо кожна сторінка мала свої інлайн-стилі.

   Що зараз:
     • оболонку (картка, хрестик, заголовок, бекдроп, мобільний
       аркуш) задає спільний assets/common/modal.css;
     • тут лишився лише ВМІСТ пояснення;
     • «чому правильно» — акцентна картка з лінією збоку,
       читається першою;
     • невірні варіанти — згорнуті картки з міткою «×»,
       розгортаються по одній;
     • квота знизу — тиха службова смужка, не конкурує з текстом.

   Класи задає explain-render.js (.explain-wrap / .ex-section /
   .ex-others / details / summary / .ex-empty) — розмітку НЕ
   міняли, тому JS лишається без змін.
============================================================ */

/* Сумісність: деякі сторінки мають власну обгортку тіла */
#explainModal #explainBody,
#explainModal .ex-body,
#explainModal .ex-wrap{ padding:0; background:transparent; border:0; }

/* Залишок від старого bottom-sheet — ховаємо */
#explainModal .sheet-handle,
#explainModal .sh{ display:none; }

/* ── Загальний контейнер пояснення ─────────────────────────── */
.explain-wrap{
  display:flex; flex-direction:column; gap:14px;
  font-size:14.5px; line-height:1.62; color:var(--ms-ink, #0f172a);
}
.explain-wrap p{ margin:0 0 9px; }
.explain-wrap p:last-child{ margin-bottom:0; }
.explain-wrap ol,
.explain-wrap ul{ margin:8px 0 0; padding-left:20px; }
.explain-wrap li{ margin:0 0 5px; }
.explain-wrap code{
  padding:1px 5px; border-radius:5px; font-size:.9em;
  background:var(--ms-surface-2, #f6faf9); border:1px solid var(--ms-line, #e2e8f0);
}
.explain-wrap img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; }

/* ── «Чому це правильно» — головний блок ───────────────────── */
.explain-wrap .ex-section{
  position:relative;
  padding:14px 16px 14px 17px;
  border-radius:12px;
  background:var(--ms-accent-soft, #ecfdf5);
  border:1px solid var(--ms-line, #e2e8f0);
}
/* Акцентна лінія збоку — око чіпляється за неї першою */
.explain-wrap .ex-section::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:99px; background:var(--ms-accent, #0d9488);
}
.explain-wrap .ex-section h4{
  margin:0 0 8px;
  font-size:11.5px; font-weight:800; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ms-accent-ink, #0f766e);
}

/* ── «Чому інші варіанти — ні» ─────────────────────────────── */
.explain-wrap .ex-others{
  padding:0; background:transparent; border:0;
}
.explain-wrap .ex-others::before{ display:none; }
.explain-wrap .ex-others h4{
  margin:0 0 9px; padding-left:2px;
  font-size:11.5px; font-weight:800; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ms-muted, #64748b);
}

.explain-wrap details{
  margin:0 0 7px;
  border:1px solid var(--ms-line, #e2e8f0); border-radius:11px;
  background:var(--ms-surface, #fff);
  overflow:hidden;
  transition:border-color .15s ease;
}
.explain-wrap details:last-child{ margin-bottom:0; }
.explain-wrap details[open]{ border-color:var(--ms-soft, #94a3b8); }

.explain-wrap summary{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--ms-ink, #0f172a);
  transition:background .15s ease;
}
.explain-wrap summary:hover{ background:var(--ms-surface-2, #f6faf9); }
.explain-wrap summary::-webkit-details-marker{ display:none; }

/* Мітка «невірно» — геометричний глиф, не емодзі */
.explain-wrap summary::before{
  content:'\00D7';
  flex:none; width:21px; height:21px; border-radius:6px;
  display:grid; place-items:center;
  font-size:14px; font-weight:700; line-height:1;
  background:var(--ms-danger-soft, #fff7ed); color:var(--ms-danger, #b45309);
}
/* Стрілка розгортання — праворуч */
.explain-wrap summary::after{
  content:''; margin-left:auto; flex:none;
  width:7px; height:7px;
  border-right:2px solid var(--ms-soft, #94a3b8);
  border-bottom:2px solid var(--ms-soft, #94a3b8);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.explain-wrap details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }

.explain-wrap details > div{
  padding:0 13px 12px 44px;
  font-size:13.8px; line-height:1.6; color:var(--ms-muted, #64748b);
}

/* ── Порожньо ──────────────────────────────────────────────── */
.explain-wrap .ex-empty,
#explainModal .ex-empty{
  padding:26px 14px; text-align:center;
  font-size:14px; color:var(--ms-soft, #94a3b8);
}

/* ── Заблокований блок (заклик прив'язати Telegram / підписка) ──
   Самодостатній: вставляється прямо в #explainBody, поза .explain-wrap.
   Раніше повторно використовував .ex-section і після редизайну
   виглядав як зелена картка «правильна відповідь» — тепер окремий,
   із власною іконкою та помітною кнопкою. */
.ex-lock{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:11px; padding:26px 20px 22px;
}
.ex-lock__ic{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
}
.ex-lock--tg    .ex-lock__ic{ background:#e8f3fc; color:#229ed9; }
.ex-lock--quota .ex-lock__ic{ background:var(--ms-danger-soft, #fff7ed); color:var(--ms-danger, #b45309); }
.ex-lock--sub   .ex-lock__ic{ background:var(--ms-accent-soft, #ecfdf5); color:var(--ms-accent-ink, #0f766e); }
body.dark-mode .ex-lock--tg .ex-lock__ic{ background:#12303f; }

.ex-lock__h{
  font-size:16.5px; font-weight:800; letter-spacing:-.01em;
  color:var(--ms-ink, #0f172a);
}
.ex-lock__t{
  max-width:340px; font-size:14px; line-height:1.6;
  color:var(--ms-muted, #64748b);
}
.ex-lock__t b{ color:var(--ms-ink, #0f172a); font-weight:700; }

.ex-lock__btn{
  margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:11px;
  font-size:14.5px; font-weight:700; text-decoration:none;
  transition:background .15s ease, transform .1s ease;
}
.ex-lock__btn:active{ transform:translateY(1px); }
.ex-lock--tg    .ex-lock__btn{ background:#229ed9; color:#fff; }
.ex-lock--tg    .ex-lock__btn:hover{ background:#1c8bc0; }
.ex-lock--quota .ex-lock__btn,
.ex-lock--sub   .ex-lock__btn{ background:var(--ms-accent, #0d9488); color:#fff; }
.ex-lock--quota .ex-lock__btn:hover,
.ex-lock--sub   .ex-lock__btn:hover{ background:var(--ms-accent-ink, #0f766e); }

/* ── Квота безкоштовних пояснень ───────────────────────────── */
.ex-quota{
  display:flex; align-items:center; gap:7px;
  margin-top:2px; padding:9px 12px;
  border-radius:10px;
  background:var(--ms-surface-2, #f6faf9); border:1px solid var(--ms-line, #e2e8f0);
  font-size:12.5px; color:var(--ms-muted, #64748b);
}
.ex-quota b{ color:var(--ms-ink, #0f172a); font-weight:700; }
.ex-quota a{ color:var(--ms-accent-ink, #0f766e); font-weight:600; text-decoration:none; }
.ex-quota a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .explain-wrap{ font-size:14px; gap:12px; }
  .explain-wrap .ex-section{ padding:12px 13px 12px 15px; }
  .explain-wrap details > div{ padding-left:13px; }
}

/* ═══════════════════════════════════════════════════════════
   ШІ-ПОЯСНЕННЯ — сучасний вигляд розбору.
   Блок іде в кінці файлу, тож перекриває базові правила вище
   без !important. Токени спільні (--ms-*) — темна тема сама.
   ═══════════════════════════════════════════════════════════ */

.explain-wrap{
  gap:16px;
  font-size:15px;
  line-height:1.7;
  /* Текст займає ВСЮ ширину модалки. Раніше ширину тут обмежувала межа в 66 символів —
     через це в широкому діалозі праворуч лишалась порожнеча. Комфортну
     довжину рядка задає сама ширина модалки (див. --lg у modal.css),
     а не обмеження всередині. */
  width:100%;
}
.explain-wrap p{ margin:0 }
.explain-wrap p + p{ margin-top:10px }

/* Вступний абзац — просто трохи більший і напівжирний. Раніше він був
   у зеленій рамці з фоном і смужкою: у модалці це виглядало як банер,
   а не як початок тексту. */
.explain-wrap > p:first-child{
  margin:0 0 2px;
  font-size:15.5px; font-weight:600; color:var(--ms-ink,#0f172a);
}
.explain-wrap > p:first-child b{ color:var(--ms-accent-ink,#0f766e); font-weight:800 }

/* Секція розбору — без підкладки й рамки, лише відступ і заголовок.
   Вкладені сірі картки всередині білої модалки читались як шум. */
.explain-wrap .ex-section,
.explain-wrap .ex-others{
  padding:0; background:none; border:0; border-radius:0;
}
.explain-wrap .ex-section::before,
.explain-wrap .ex-others::before{ display:none }
.explain-wrap .ex-section h4,
.explain-wrap .ex-others h4{
  display:block; margin:0 0 7px; padding:0;
  background:none; border:0; border-radius:0;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ms-muted,#64748b);
}

/* Списки — компактні маркери акцентного кольору */
.explain-wrap ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px }
.explain-wrap li{
  position:relative; margin:0; padding-left:18px;
  font-size:14.5px; line-height:1.65;
}
.explain-wrap li::before{
  content:''; position:absolute; left:3px; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--ms-accent,#0d9488); opacity:.7;
}

/* «Інші варіанти» — рядки з тонким роздільником, без рамок і тіней */
.explain-wrap details{
  margin:0; padding:0;
  background:none; border:0; border-radius:0;
  border-top:1px solid var(--ms-line,#e2e8f0);
  box-shadow:none;
}
.explain-wrap details:first-of-type{ border-top:0 }
.explain-wrap details + details{ margin-top:0 }
.explain-wrap details[open]{ border-color:var(--ms-line,#e2e8f0); box-shadow:none }
.explain-wrap summary{
  padding:11px 0;
  font-size:14.5px; font-weight:600; color:var(--ms-ink,#0f172a);
  border-radius:0;
}
.explain-wrap summary:hover{ background:none; color:var(--ms-accent-ink,#0f766e) }
.explain-wrap details > div{ padding:0 0 12px; font-size:14.5px; line-height:1.65;
                             color:var(--ms-muted,#64748b) }

/* Код і формули */
.explain-wrap code{
  padding:2px 7px; border-radius:7px;
  background:var(--ms-surface-2,#f6faf9);
  border:1px solid var(--ms-line,#e2e8f0);
  font:600 13px ui-monospace,Menlo,monospace; color:var(--ms-accent-ink,#0f766e);
}
.explain-wrap img{ border-radius:12px; border:1px solid var(--ms-line,#e2e8f0) }

/* Порожній стан */
#explainModal .ex-empty{
  padding:44px 16px; text-align:center;
  font-size:14.5px; font-weight:500; color:var(--ms-soft,#94a3b8);
}

/* ── Телефон: щільніше ────────────────────────────────────────
   Модалка тепер на весь екран (assets/common/modal.css), тож
   поля з боків уже не з'їдають ширину. Тут прибираємо зайві
   внутрішні відступи секцій і трохи стискаємо міжрядковий
   інтервал — щоб на екран влазило більше тексту, а не повітря.
   ─────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .explain-wrap{ font-size:14px; line-height:1.55; gap:10px }
  /* Відступів тут більше немає: підкладки й рамки в секцій прибрано
     вище, а padding без фону лише зсував текст від краю модалки. */
  .explain-wrap > p:first-child{ font-size:14px }
  .explain-wrap .ex-section h4{ margin-bottom:5px }
  .explain-wrap li{ margin-bottom:3px }
  .explain-wrap p{ margin:0 }
}
@media (max-width:380px){
  .explain-wrap{ font-size:13.5px; gap:9px }
  .explain-wrap > p:first-child{ font-size:13.5px }
}


/* ==== assets/krok/css/test-features.css ==== */
/* ============================================================
   ФІЧІ ТЕСТУ — СПІЛЬНІ СТИЛІ (модалки + кнопки-дії)
   ------------------------------------------------------------
   Пояснення / схожі / препарат / двійник / макро-мікро / фарма.
   Використовують: сторінка тесту (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-cred{font-size:11px;color:#9ca3af;margin-top:6px;line-height:1.4}
.spec-open{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;
  color:#0ea5e9;text-decoration:none}
.spec-open:hover{color:#0369a1;text-decoration:underline}
body.dark-mode .spec-cred{color:#64748b}
body.dark-mode .spec-open{color:#7dd3fc}
body.dark-mode .spec-open:hover{color:#bae6fd}
.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 }
}

/* ══════════════════════════════════════════════════════════════════
   ФОТО ПАТПРОЦЕСІВ НА ВАРІАНТИ ВІДПОВІДІ (.optimg-btn + .oi-* у #specModal)
   Кнопка-сітка поряд з кнопкою препарату; модалка спільна (#specModal),
   заголовок перемикає JS. Кольори — та сама фіолетова родина, що й spec.
   ══════════════════════════════════════════════════════════════════ */
.optimg-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:#0d9488;transition:background .15s}
.optimg-btn:hover{background:rgba(13,148,136,.10);color:#0f766e}
body.dark-mode .optimg-btn{color:#5eead4}
body.dark-mode .optimg-btn:hover{background:rgba(94,234,212,.16)}
.optimg-btn svg{width:22px;height:22px;display:block}

.oi-opt{border:1px solid #e2e6ef;border-radius:14px;padding:11px 12px;margin-bottom:12px;background:#fff}
body.dark-mode .oi-opt{background:#1a1a1d;border-color:#242428}
.oi-opt:last-child{margin-bottom:0}
.oi-opt.is-empty{opacity:.62}
.oi-opt-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.oi-opt-name{font-weight:700;font-size:14.5px;line-height:1.3}
.oi-opt-ent{font-size:12px;color:#6b7280}
.oi-none{font-size:12.5px;color:#9ca3af}
.oi-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.oi-img{margin:0;border:1px solid #eceff5;border-radius:11px;overflow:hidden;background:#fff}
body.dark-mode .oi-img{border-color:#242428;background:#161618}
.oi-img img{display:block;width:100%;height:180px;object-fit:cover;background:#0b0f19;cursor:zoom-in}
.oi-img img.zoomed{height:auto;max-height:none;object-fit:contain;cursor:zoom-out}
.oi-img figcaption{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.oi-cap{font-size:12.5px;color:#4b5563;line-height:1.45}
body.dark-mode .oi-cap{color:#c9ccd4}
.oi-cred{font-size:11px;color:#9ca3af}
.oi-cred a{color:inherit;text-decoration:underline}
@media (max-width:520px){ .oi-imgs{grid-template-columns:1fr} .oi-img img{height:200px} }

/* Розбір препарату (наш текст) + опис від автора знімка.
   Розбір стоїть НАД знімками свого виду, бо він однаковий для всіх них;
   опис джерела — під конкретним фото, бо стосується саме його. */
.oi-kind{margin-bottom:12px}
.oi-kind:last-child{margin-bottom:0}
.oi-desc{border-left:3px solid #0f766e;background:#f4faf9;border-radius:0 10px 10px 0;
         padding:9px 12px;margin-bottom:9px;display:flex;flex-direction:column;gap:6px}
body.dark-mode .oi-desc{background:#15201f;border-left-color:#2f7d74}
.oi-d-row{display:flex;gap:8px;font-size:12.5px;line-height:1.5}
.oi-d-row b{flex:0 0 116px;color:#0f766e;font-weight:600}
body.dark-mode .oi-d-row b{color:#5eb5aa}
.oi-d-row span{color:#374151}
body.dark-mode .oi-d-row span{color:#c9ccd4}
.oi-src{font-size:11.5px;color:#8a93a3;line-height:1.4;font-style:italic}
body.dark-mode .oi-src{color:#7d838f}
@media (max-width:520px){ .oi-d-row{flex-direction:column;gap:2px} .oi-d-row b{flex:none} }


/* ==== assets/krok/css/krok-modals.css ==== */
/* FILE: /assets/krok/css/krok-modals.css
   ЄДИНИЙ стиль усіх КРОК-модалок — як редизайн логіну/реєстрації (authmodals):
   чиста картка, Ubuntu-заголовок, Raleway-тіло, плоскі зелено-ціанові кнопки,
   заокруглені поля з ціан focus-ring, нейтральний хрестик, єдиний backdrop,
   світла/темна тема. Override-шар: підключається ОСТАННІМ (перед </body>),
   з цільовими !important перекриває розкидані inline-стилі mainhub/design-b/тест.

   УВАГА: у хабі модалки = `.modal > .modal-content` + `.close`;
          у тесті = `.modal > .content` + `.close-x`; плюс кастомні
          `.rm-overlay/.rm-dialog` (результат) і `.dq-modal` (препарат).
          Тому селектори покривають ОБИДВІ структури. */

:root {
  --km-surface: #ffffff;
  --km-surface-2: #f0f6f4;
  --km-ink: #122e2a;
  --km-muted: #4f6b66;
  --km-line: #dde8e5;
  --km-primary: #10b981;
  --km-primary-strong: #0c9f6e;
  --km-on-primary: #ffffff;
  --km-accent: #0891b2;
  --km-danger: #dc2626;
  --km-ring: rgba(8,145,178,.30);
  --km-radius: 18px;
  --km-radius-sm: 10px;
  --km-shadow: 0 24px 60px -22px rgba(13,60,52,.45);
  --km-backdrop: rgba(7,20,18,.55);
  --km-fhead: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --km-fbody: 'Raleway', system-ui, -apple-system, sans-serif;
}
body.dark-mode {
  --km-surface: #121e1c;
  --km-surface-2: #182825;
  --km-ink: #e9f2f0;
  --km-muted: #9db4af;
  --km-line: #243733;
  --km-primary: #2f9e7b;
  --km-primary-strong: #277f64;
  --km-accent: #5fb0c9;
  --km-danger: #f87171;
  --km-shadow: 0 24px 60px -22px rgba(0,0,0,.7);
  --km-backdrop: rgba(0,0,0,.62);
}

/* ── BACKDROP ── */
/* .modal ПРИБРАНО: бекдроп задає assets/common/modal.css.
   Тут лишились лише кастомні оверлеї, яких немає в спільній системі. */
.rm-overlay,
.fc-overlay,
#archSettingsModal {
  background: var(--km-backdrop) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── КАРТКА (обидві структури + кастомні) ── */
/* Generic .content/.modal-content ПРИБРАНО — картку малює
   assets/common/modal.css (у нього head/body/foot зі своїми
   відступами, а тутешній padding !important їх ламав). */
.rm-dialog,
.fc-dialog,
.asm {
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: var(--km-shadow) !important;
  font-family: var(--km-fbody) !important;
  padding: clamp(20px, 4vw, 28px) !important;
}

/* ── ЗАГОЛОВОК: Ubuntu, суцільний колір (без градієнт-тексту) ── */
/* generic h3 → assets/common/modal.css */
.rm-title,
.dq-name,
.asm__title,
.asm h3 {
  font-family: var(--km-fhead) !important;
  font-weight: 700 !important;
  font-size: clamp(19px, 3.4vw, 23px) !important;
  letter-spacing: -.3px !important;
  color: var(--km-ink) !important;
  -webkit-text-fill-color: var(--km-ink) !important;
  background: none !important;
  margin: 0 0 14px !important;
}
.rm-sub, .dq-sub, .modal .content small, .modal-content small, .sim-mode-hint {
  color: var(--km-muted) !important;
  font-family: var(--km-fbody) !important;
}

/* ── ХРЕСТИК (нейтральний квадрат, без обертань) ── */
/* .close-x/.close → assets/common/modal.css */
.dq-close {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--km-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--km-line) !important;
  color: var(--km-muted) !important;
  border-radius: 10px !important;
  font-size: 22px !important; line-height: 1 !important;
  transition: background .15s ease, color .15s ease !important;
}
.dq-close:hover {
  background: var(--km-surface-2) !important;
  color: var(--km-ink) !important;
  transform: none !important;
}

/* ── ПОЛЯ (як на auth: 1.5px border, радіус, ціан focus) ── */
.modal input[type="text"], .modal input[type="search"], .modal textarea, .modal select,
.modal-content input, .modal-content textarea, .modal-content select,
.rm-dialog input, .asm input, .asm select {
  font-family: var(--km-fbody) !important;
  color: var(--km-ink) !important;
  background: var(--km-surface) !important;
  border: 1.5px solid var(--km-line) !important;
  border-radius: var(--km-radius-sm) !important;
}
.modal input:focus, .modal textarea:focus, .modal select:focus,
.modal-content input:focus, .modal-content textarea:focus {
  outline: none !important;
  border-color: var(--km-accent) !important;
  box-shadow: 0 0 0 4px var(--km-ring) !important;
}

/* ── КНОПКИ ──
   Зелений primary/активний сегмент */
.rm-btn--ok,
.st-btn--primary,
.sim-cat-btn.active,
.sim-mode-btn.active,
.dq-mode.is-active,
.asm__btn--primary,
.modal .content button.primary,
.modal-content button.confirm {
  background: var(--km-primary) !important;
  background-image: none !important;
  color: var(--km-on-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important;
  font-weight: 500 !important;
}
.rm-btn--ok:hover, .st-btn--primary:hover,
.dq-mode.is-active:hover, .modal-content button.confirm:hover {
  background: var(--km-primary-strong) !important;
}

/* Ghost / нейтральні */
.rm-btn--ghost,
.st-btn--ghost,
.sim-cat-btn,
.sim-mode-btn,
.dq-mode,
.sim-more-btn,
.asm__btn--ghost {
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-ink) !important;
  border: 1.5px solid var(--km-line) !important;
  box-shadow: none !important;
  font-family: var(--km-fbody) !important;
}
.rm-btn--ghost:hover, .st-btn--ghost:hover,
.sim-cat-btn:hover, .sim-mode-btn:hover, .dq-mode:hover, .sim-more-btn:hover {
  background: var(--km-surface-2) !important;
}

/* Червоний (семантика: «робота над помилками» / небезпечні дії) — плоский */
.rm-btn--primary,
.fc-ok,
.asm__btn--danger {
  background: var(--km-danger) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important;
  font-weight: 500 !important;
}

/* загальна форма всіх кнопок у модалках */
.rm-btn, .st-btn, .sim-cat-btn, .sim-mode-btn, .dq-mode, .sim-more-btn,
.fc-ok, .fc-cancel, .asm__btn {
  border-radius: var(--km-radius-sm) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.rm-btn:hover, .st-btn:hover, .fc-ok:hover { transform: none !important; }

/* ── РЕЗУЛЬТАТ-МОДАЛКА: кільце/стат-кольори лишаємо, але під токени ── */
.rm-stat__v { color: var(--km-ink) !important; }
.rm-stat--ok .rm-stat__v { color: var(--km-primary) !important; }
.rm-stat--bad .rm-stat__v { color: var(--km-danger) !important; }

/* ── МОБІЛЬНИЙ: діалог НА ВЕСЬ ЕКРАН ──
   Цей файл вантажиться ПІСЛЯ assets/common/modal.css і має
   !important, тож положення діалога визначає саме він. Тримаємо
   тут ту саму поведінку, що й у спільному файлі: без полів з
   боків, без заокруглень — уся ширина екрана під текст.
   Внутрішній padding теж стискаємо: clamp(20px,4vw,28px) з
   основного блока на телефоні давав по 20px з кожного боку. */
@media (max-width: 600px) {
  /* generic .content/.modal-content → assets/common/modal.css */
  .rm-dialog,
  .fc-dialog,
  .asm {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
  }
  .modal, .rm-overlay, .fc-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
}
@media (max-width: 380px) {
  .rm-dialog, .fc-dialog, .asm { padding: 11px !important; }
}


/* ==== assets/krok/css/krok-cards-v2.css ==== */
/* FILE: /assets/krok/css/krok-cards-v2.css
   Reskin карток КРОК-хабу: «Великий рік + кругле кільце прогресу».
   Дизайн-система сайту (Ubuntu/Raleway, зелено-ціан, плоско). Override-шар:
   підключається ОСТАННІМ — перекриває обидва скіни A(mainhub)/B(design-b) + inline.
   Розмітку дає krok-hub-v2.js (предмети) і PHP-партіали (роки/системи). */

:root {
  --km-surface: #ffffff;
  --km-surface-2: #f0f6f4;
  --km-ink: #122e2a;
  --km-muted: #4f6b66;
  --km-line: #dde8e5;
  --km-primary: #10b981;
  /* Той самий зелений під БІЛИМ текстом дає 2.54:1 — нижче норми
     (WCAG AA = 4.5). Для плашок із білим написом беремо темніший
     відтінок: 5.0:1. Для фонів і рамок --km-primary лишається. */
  --km-primary-solid: #087f5b;
  --km-primary-strong: #0c9f6e;
  --km-accent: #0891b2;
  --km-danger: #dc2626;
  --km-ring: rgba(8,145,178,.30);
  --km-pill-bg: #ecfdf5;
  --km-pill-bd: #bbe9d6;
  --km-fhead: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --km-fbody: 'Raleway', system-ui, -apple-system, sans-serif;
}
body.dark-mode {
  --km-surface: #121e1c;
  --km-surface-2: #182825;
  --km-ink: #e9f2f0;
  --km-muted: #9db4af;
  --km-line: #243733;
  --km-primary: #2f9e7b;
  /* У темній темі плашка світліша за тло, білий текст читається. */
  --km-primary-solid: #1f7d5f;
  --km-primary-strong: #277f64;
  --km-accent: #5fb0c9;
  --km-danger: #f87171;
  --km-pill-bg: #11261f;
  --km-pill-bd: #2c5b48;
}

/* ── СІТКА: широка по центру (до 1200px), 3 простори картки в ряд (десктоп) ── */
@media (min-width: 1025px) {
  /* виходимо за межі контейнера (.container max-width:1200) і займаємо ширину екрана,
     але рівно 3 у ряд і не ширше 1500px — щоб картки лишались «середні» */
  #grid-years, #grid-systems, #subjectsGrid {
    width: min(84vw, 1100px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* ── КАРТКА ── */
.test-grid .test-item {
  background: var(--km-surface) !important;
  background-image: none !important;
  border: 1px solid var(--km-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(13,60,52,.05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 17px !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
/* картки буклетів/систем/предметів — рівна комфортна висота, кнопки притиснуті донизу */
#grid-years > .test-item,
#grid-systems > .test-item,
#subjectsGrid > .test-item {
  display: flex !important;
  flex-direction: column !important;
  min-height: 148px !important;
}
#grid-years > .test-item > .test-buttons,
#grid-systems > .test-item > .test-buttons,
#subjectsGrid > .test-item > .test-buttons { margin-top: auto !important; }
.test-grid .test-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -14px rgba(13,60,52,.20) !important;
}
.test-item.demo-booklet, .test-item.psy-booklet {
  animation: none !important;
  transform: none !important;
}
.test-item.demo-booklet::before, .test-item.demo-booklet::after,
.test-item.psy-booklet::before, .test-item.psy-booklet::after { display: none !important; content: none !important; }
.test-item *[class*="particle"] { display: none !important; }
/* особливі буклети (демо/психо) — той самий фон/рамка, що й звичайні */
.test-grid .test-item.demo-booklet,
.test-grid .test-item.psy-booklet,
body.dark-mode .test-grid .test-item.demo-booklet,
body.dark-mode .test-grid .test-item.psy-booklet {
  background: var(--km-surface) !important;
  background-image: none !important;
  border-color: var(--km-line) !important;
}

/* ── ШАПКА: ліво (рік+підпис) + кільце ── */
.kc-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 13px !important;
}
/* .test-title переюзано як ліву колону */
.test-grid .test-title.kc-left {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  flex: 1 1 auto !important;
}
.kc-yearrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* велика іконка-замінник року для особливих буклетів (психологи тощо) */
.kc-bigic { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
body.dark-mode .kc-bigic { filter: brightness(1.1); }
.kc-year {
  font-family: var(--km-fhead);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--km-ink);
}
/* найкращий результат: кубок + % справа від року */
.kc-best {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--km-fhead); font-weight: 700; font-size: 13px;
  color: var(--km-primary-strong);
  background: var(--km-pill-bg); border: 1px solid var(--km-pill-bd);
  border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
.kc-best svg { width: 14px; height: 14px; }
/* пігулка «Новинка» (особливі буклети) — той самий стиль, що й бест */
.kc-new {
  display: inline-flex; align-items: center;
  font-family: var(--km-fhead); font-weight: 700; font-size: 11px;
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--km-primary-solid);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
/* велика назва предмета / системи — у дусі великого року буклетів */
.kc-bigtitle {
  font-family: var(--km-fhead);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: var(--km-ink);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* іменована шапка (предмети/системи): великий заголовок на всю ширину зверху,
   нижче рядок «підпис + кільце» — щоб довгі назви не тиснулись поруч із кільцем */
.kc-head.kc-head--named {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.kc-head--named .kc-sub { margin-top: 0; }
.kc-head--named .kc-best { flex: 0 0 auto; }
/* стара пігулка прогресу більше не показується (замість неї — кільце) */
.kc-progress-hidden { display: none !important; }
.kc-sub {
  margin-top: 7px;
  font-family: var(--km-fbody);
  font-size: 13px;
  color: var(--km-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kc-sub img { width: 16px; height: 16px; }
.kc-ai {
  font-family: var(--km-fbody);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(99,102,241,.12); color: #6366f1;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
body.dark-mode .kc-ai { background: rgba(99,102,241,.22); color: #a5b4fc; }

/* ── КІЛЬЦЕ ПРОГРЕСУ ── */
.kc-ring {
  position: relative;
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  /* зелена зона = правильні (0→c1), червона = неправильні (c1→c2), решта = не пройдено */
  background: conic-gradient(
    var(--km-primary) 0 calc(var(--kc-c1, 0) * 1%),
    var(--km-danger) calc(var(--kc-c1, 0) * 1%) calc(var(--kc-c2, 0) * 1%),
    var(--km-surface-2) calc(var(--kc-c2, 0) * 1%) 100%
  );
}
.kc-ring__h {
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--km-surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.kc-ring__p { font-family: var(--km-fhead); font-weight: 700; font-size: 15px; line-height: 1; color: var(--km-primary); }
.kc-ring__f { font-size: 9px; color: var(--km-muted); margin-top: 2px; }

/* ── ПІГУЛКА «Бест» ── */
.best-result {
  display: inline-block !important;
  background: var(--km-pill-bg) !important;
  background-image: none !important;
  border: 1px solid var(--km-pill-bd) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--km-muted) !important;
  font-family: var(--km-fbody) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  margin: 0 0 12px !important;
}
.best-result b { color: var(--km-primary-strong) !important; }
.best-result--mid b { color: #b45309 !important; }
.best-result--low b { color: var(--km-danger) !important; }

/* ── КНОПКИ: значки зліва + зелене play-коло (FAB) справа ── */
.test-grid .test-buttons { display: flex !important; gap: 10px !important; margin: 0 !important; align-items: center !important; }
/* старт = кругла зелена кнопка з play-трикутником, без напису */
.test-grid .start-btn {
  order: 3 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;          /* притискаємо праворуч */
  width: 52px !important; height: 52px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: var(--km-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 18px -6px rgba(16,185,129,.65) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.test-grid .start-btn span { display: none !important; }   /* напис «Почати» прибрано */
.test-grid .start-btn .kc-play { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; margin-left: 2px; }
.test-grid .start-btn:hover {
  background: var(--km-primary-strong) !important;
  transform: scale(1.07) !important;
  box-shadow: 0 12px 24px -6px rgba(16,185,129,.75) !important;
}
body.dark-mode .test-grid .start-btn { box-shadow: 0 8px 18px -6px rgba(47,158,123,.6) !important; }
.test-grid .start-btn:disabled, .test-grid .start-btn[disabled],
.kc-mist-btn:disabled, .kc-mist-btn[disabled] { opacity: .45 !important; cursor: not-allowed !important; }
.test-grid .history-btn {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 48px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-accent) !important;
  border: 1.5px solid var(--km-line) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  height: 44px !important;
}
.test-grid .history-btn:hover { background: var(--km-surface-2) !important; border-color: var(--km-accent) !important; transform: none !important; }
.test-grid .history-btn svg { width: 18px; height: 18px; }

/* компактна кнопка помилок (значок + число) у тому ж ряду — ФІКСОВАНА ширина,
   щоб «Почати» була однакова на картках з помилками і без них */
.kc-mist-btn {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 44px; padding: 0 12px;
  border: 1.5px solid rgba(220,38,38,.28);
  border-radius: 12px;
  background: rgba(220,38,38,.08);
  color: var(--km-danger);
  font-family: var(--km-fhead); font-weight: 700; font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease;
}
.kc-mist-btn:hover { background: rgba(220,38,38,.15); }
.kc-mist-n { font-weight: 700; }
body.dark-mode .kc-mist-btn { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.32); }
/* спейсер більше не потрібен — старт це фіксоване коло справа */
.kc-mist-spacer { display: none !important; }

/* ── ТАБИ / ПОШУК (легкий reskin під сайт) ── */
.tab-btn {
  background: var(--km-surface) !important; background-image: none !important;
  border: 1px solid var(--km-line) !important; color: var(--km-ink) !important;
  box-shadow: none !important; border-radius: 999px !important;
  font-family: var(--km-fbody) !important; font-weight: 600 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.tab-btn.active {
  background: var(--km-primary) !important; background-image: none !important;
  color: #fff !important; border-color: var(--km-primary) !important; box-shadow: none !important;
}
.hub-search input {
  background: var(--km-surface) !important; background-image: none !important;
  border: 1.5px solid var(--km-line) !important; box-shadow: none !important;
  border-radius: 12px !important; font-family: var(--km-fbody) !important; color: var(--km-ink) !important;
}
.hub-search input:focus { border-color: var(--km-accent) !important; box-shadow: 0 0 0 4px var(--km-ring) !important; transform: none !important; }

/* ── ТУЛБАР-КНОПКИ (Мої теми / Моя статистика / Активність) під дизайн карток ── */
.km-toolbtn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important;
  height: 44px !important; padding: 0 18px !important;
  background: var(--km-surface) !important; background-image: none !important;
  color: var(--km-ink) !important;
  border: 1.5px solid var(--km-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important; font-weight: 600 !important; font-size: 14px !important;
  text-decoration: none !important; cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.km-toolbtn:hover { background: var(--km-surface-2) !important; border-color: var(--km-accent) !important; transform: none !important; }
.km-toolbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* головна — зелена заливка */
.km-toolbtn--primary {
  background: var(--km-primary) !important; color: #fff !important; border-color: var(--km-primary) !important;
}
.km-toolbtn--primary:hover { background: var(--km-primary-strong) !important; border-color: var(--km-primary-strong) !important; }
/* адмін — нейтральний темний */
.km-toolbtn--admin {
  background: var(--km-ink) !important; color: #fff !important; border-color: var(--km-ink) !important;
}
.km-toolbtn--admin:hover { filter: brightness(1.12); }

/* ── МОБІЛЬНИЙ ── */
@media (max-width: 600px) {
  .test-grid .test-item { padding: 18px !important; }
  #grid-years > .test-item, #grid-systems > .test-item,
  #subjectsGrid > .test-item { min-height: 184px !important; }
  .kc-year { font-size: 32px !important; }
  .kc-bigtitle { font-size: 20px !important; }
  .kc-ring { width: 64px !important; height: 64px !important; }
  .kc-ring__p { font-size: 16px !important; }
  /* старт = зелене play-коло справа; значки зліва */
  .test-grid .test-buttons { justify-content: flex-start !important; align-items: center !important; }
  .test-grid .start-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    width: 52px !important; height: 52px !important; padding: 0 !important;
    border-radius: 50% !important;
  }
  .test-grid .start-btn span { display: none !important; }
  .test-grid .start-btn .kc-play { width: 22px; height: 22px; }
  .test-grid .history-btn { order: 1 !important; width: 50px !important; height: 50px !important; }
  .kc-mist-btn { order: 2 !important; margin-left: 0 !important; height: 50px !important; }
}

/* ── Тост переносу гостьового прогресу (guest-migrate.js) ── */
.knav-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:3000; pointer-events:none; opacity:0;
  background:var(--km-ink,#2b2735); color:#fff;
  font-family:var(--km-fhead,'Inter',sans-serif); font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  transition:opacity .18s, transform .18s;
}
.knav-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
body.dark-mode .knav-toast{ background:#2f2c3d; }

/* ── Мітка гостьового прогресу на картці (hub-guest-progress.js) ── */
.kc-guest{
  display:inline-flex; align-items:center;
  font-family:var(--km-fbody); font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--km-muted); background:var(--km-surface-2);
  border-radius:999px; padding:3px 8px; white-space:nowrap;
}

/* ── Банер прив'язки Telegram (5 безкоштовних пояснень/добу) ── */
.tg-nudge{
  max-width:820px; margin:10px auto 4px;
  display:flex; align-items:center; gap:14px;
  background:var(--km-surface); border:1px solid var(--km-line);
  border-left:4px solid #229ED9;
  border-radius:14px; padding:13px 16px;
  box-shadow:0 2px 10px rgba(13,60,52,.05);
  font-family:var(--km-fbody);
}
.tg-nudge__ic{ color:#229ED9; flex:0 0 auto; display:flex; }
.tg-nudge__txt{ flex:1 1 auto; min-width:0; }
.tg-nudge__txt b{ display:block; color:var(--km-ink); font-size:14px; font-weight:700; margin-bottom:2px; }
.tg-nudge__txt span{ color:var(--km-muted); font-size:12.5px; line-height:1.45; }
.tg-nudge__act{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tg-nudge__btn{
  background:#229ED9; color:#fff; text-decoration:none;
  font-family:var(--km-fhead); font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:11px; white-space:nowrap;
  transition:filter .15s;
}
.tg-nudge__btn:hover{ filter:brightness(.94); }
.tg-nudge__x{
  border:none; background:transparent; color:var(--km-muted);
  font-size:20px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.tg-nudge__x:hover{ background:var(--km-surface-2); color:var(--km-ink); }
@media (max-width:600px){
  .tg-nudge{ flex-wrap:wrap; gap:10px; padding:12px 14px; }
  .tg-nudge__act{ width:100%; }
  .tg-nudge__btn{ flex:1 1 auto; text-align:center; }
}


/* ── Смужка «твоя група» (views/krok/partials/group_strip.php) ────────
   Токени --km-* спільні з рештою карток хабу, тож смужка сама лягає в
   обидві теми й в обидва скіни (A і design-b). Ширина 820px — та сама,
   що в .tg-nudge вище: два різні рядки під однією панеллю інструментів
   мусять починатись і закінчуватись на одній вертикалі. */
.krok-gstrip{
  max-width:820px; margin:10px auto 14px;
  display:flex; align-items:center; gap:12px;
  background:var(--km-surface); border:1px solid var(--km-line);
  border-left:4px solid var(--km-accent);
  border-radius:14px; padding:11px 15px;
  box-shadow:0 2px 10px rgba(13,60,52,.05);
  font-family:var(--km-fbody); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.krok-gstrip:hover{ transform:translateY(-1px); border-color:var(--km-accent) }
body.dark-mode .krok-gstrip{ box-shadow:none }

.krok-gstrip__ava{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0ea5a4,#0e7490);
  color:#fff; font-family:var(--km-fhead); font-weight:700; font-size:16px;
}
.krok-gstrip__ava img{ width:100%; height:100%; object-fit:cover; display:block }

/* min-width:0 — інакше довга назва групи не дає флекс-елементу
   стиснутись і виштовхує цифри за край смужки. */
.krok-gstrip__b{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.krok-gstrip__n{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.krok-gstrip__n b{
  font-family:var(--km-fhead); font-weight:700; font-size:14px;
  color:var(--km-ink); overflow-wrap:anywhere;
}
/* Той самий чіп номера, що в рейтингу, у шапці групи й на профілі. */
.krok-gstrip__real{
  padding:1px 8px; border-radius:999px;
  background:var(--km-surface-2); border:1px solid var(--km-line);
  font-size:11px; font-weight:700; color:var(--km-ink); white-space:nowrap;
}
.krok-gstrip__real::before{ content:'№ '; color:var(--km-muted); font-weight:400 }
.krok-gstrip__m{ font-size:12.5px; color:var(--km-muted); line-height:1.4 }

.krok-gstrip__s{ flex:0 0 auto; text-align:right; line-height:1.1 }
.krok-gstrip__s b{
  display:block; font-family:var(--km-fhead); font-weight:700;
  font-size:18px; color:var(--km-ink);
}
.krok-gstrip__s span{ font-size:10.5px; color:var(--km-muted); text-transform:uppercase; letter-spacing:.3px }

@media (max-width:560px){
  /* Цифри вниз окремим рядком: у ряд вони з'їдають ~80px, і рядок
     «до Пірогових — 8 правильних» починає ламатись по слову. */
  .krok-gstrip{ flex-wrap:wrap; padding:11px 13px }
  .krok-gstrip__s{ width:100%; text-align:left; display:flex; align-items:baseline; gap:6px }
  .krok-gstrip__s b{ display:inline; font-size:16px }
}

/* ─── ПЕРЕМИКАЧ ФАКУЛЬТЕТУ (Медицина / Стоматологія) ──────────────────
   Сегментований перемикач над вкладками хабу. Це посилання, а не
   кнопки: вибір несе ?faculty=, тож працює без JS і переживає
   перезавантаження. Темна тема — через body.dark-mode, як решта хабу. */
/* ── ПЕРЕМИКАЧ ФАКУЛЬТЕТУ ─────────────────────────────────────────────
   Дві повноцінні картки замість напису: іконка, назва, скільки всередині.
   Активна підсвічена своїм кольором (медицина — зелений, стоматологія —
   ціан), неактивна приглушена. Це посилання, а не кнопки: працює без JS. */
.fac-pick{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px; max-width:640px; margin:0 auto 18px;
}
.fac-card{
  /* --fc — рамка, плитка іконки, галочка (графіка, поріг 3:1).
     --fc-ink — назва (текст, поріг 4.5:1), тому в стоматології він
     темніший за --fc: сам ціан на власному світлому тлі дає лише 3.3:1. */
  --fc: var(--km-primary-solid);
  --fc-ink: var(--km-primary-solid);
  --fc-soft: var(--km-pill-bg);
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:16px; text-decoration:none;
  background:var(--km-surface); border:1px solid var(--km-line);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.fac-card--stom{ --fc: var(--km-accent); --fc-ink:#0e7490; --fc-soft: rgba(8,145,178,.10) }
.fac-card:hover{ transform:translateY(-2px); border-color:var(--fc);
  box-shadow:0 6px 18px rgba(16,24,40,.10) }
.fac-card:focus-visible{ outline:2px solid var(--fc); outline-offset:2px }

/* Іконка в плитці — зайняте місце однакове в обох станах, щоб картка
   не «стрибала» на перемиканні. */
.fac-card__ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--km-surface-2); color:var(--km-muted);
  transition:background .16s, color .16s;
}
.fac-card__ico svg{ width:24px; height:24px; display:block }

.fac-card__body{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.fac-card__ttl{
  font-family:var(--km-fhead); font-weight:700; font-size:16px; line-height:1.2;
  color:var(--km-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fac-card__sub{
  font-family:var(--km-fbody); font-size:12px; line-height:1.3;
  color:var(--km-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fac-card__dot{ opacity:.55; padding:0 2px }

/* Галочка тримає своє місце завжди — інакше текст з'їжджав би вбік. */
.fac-card__mark{
  flex:0 0 auto; margin-left:auto; width:20px; height:20px;
  display:grid; place-items:center; color:var(--fc);
  opacity:0; transform:scale(.7); transition:opacity .16s, transform .16s;
}
.fac-card__mark svg{ width:16px; height:16px; display:block }

.fac-card.is-on{
  background:var(--fc-soft); border-color:var(--fc);
  box-shadow:0 0 0 1px var(--fc) inset, 0 4px 14px rgba(16,24,40,.07);
}
.fac-card.is-on .fac-card__ico{ background:var(--fc); color:#fff }
.fac-card.is-on .fac-card__ttl{ color:var(--fc-ink) }
.fac-card.is-on .fac-card__mark{ opacity:1; transform:none }
.fac-card.is-on:hover{ transform:none }

body.dark-mode .fac-card{ box-shadow:none }
body.dark-mode .fac-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.35) }
/* У темряві --km-primary-solid надто глухий на тлі картки (3.1:1),
   тому чорнило беремо світліше. */
body.dark-mode .fac-card--med{ --fc: var(--km-primary); --fc-ink: var(--km-primary) }
body.dark-mode .fac-card--stom{ --fc-ink: var(--km-accent); --fc-soft: rgba(95,176,201,.12) }
body.dark-mode .fac-card.is-on{ box-shadow:0 0 0 1px var(--fc) inset }
body.dark-mode .fac-card.is-on .fac-card__ico{ color:#0b1614 }

@media (max-width:520px){
  .fac-pick{ gap:8px; margin-bottom:14px }
  .fac-card{ padding:11px 12px; gap:10px; border-radius:14px }
  .fac-card__ico{ width:36px; height:36px; border-radius:10px }
  .fac-card__ico svg{ width:21px; height:21px }
  .fac-card__ttl{ font-size:14px }
  .fac-card__sub{ font-size:11px }
  /* На вузькому екрані числа не влазять поруч із галочкою — ховаємо її,
     активну картку і так видно кольором. */
  .fac-card__mark{ display:none }
}


/* ==== assets/krok/css/krok-question-card.css ==== */
/* ============================================================
   КАРТКА-ПИТАННЯ — ЄДИНЕ ДЖЕРЕЛО ПРАВДИ
   ------------------------------------------------------------
   Один і той самий вигляд для:
     • #test-container — сторінка проходження тесту (krokTestView)
     • #grid-archive   — вкладка «Архів» у КРОК-хабі (krokHubView)
   Обидві рендерять ОДНАКОВУ розмітку (.test-item > .test-info >
   .question-number, h3, .test-meta, ul > li[data-correct]), тож
   стилі тримаємо тут — інакше вони розходяться.

   Підключати ПІСЛЯ design-b-v2.css (і до test-page.css на тесті).
============================================================ */

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

:root{
  --t-bg:#f4f1fb;
  --t-surface:#ffffff;
  --t-ink:#2b2735;
  --t-ink-2:#5d586b;
  --t-muted:#9a95a8;
  --t-line:#ece9f6;
  --t-fill:#f1eff9;
  --t-fill-2:#e7e4f3;
  --t-accent:#8b80f0; --t-accent-hov:#756af0; --t-accent-soft:#ecebfd;
  --t-good:#43b483; --t-good-soft:#e6f7ef; --t-good-ink:#2f9b6e;
  --t-bad:#ef8e9c;  --t-bad-soft:#fdedf0;  --t-bad-ink:#d05f70;
  --t-r:18px; --t-r-sm:13px; --t-r-xs:11px;
  --t-sh:0 2px 8px rgba(70,60,110,.05);
  --t-sh-md:0 8px 26px -10px rgba(70,60,110,.20), 0 2px 6px rgba(70,60,110,.05);
  --t-sh-lg:0 26px 64px -18px rgba(45,35,85,.30);
  --t-f:'Inter',system-ui,-apple-system,sans-serif;
}
body.design-b.dark-mode{
  /* --t-muted підняли з #7c7790: на картці #201f29 він давав 3.8:1,
     тобто нижче норми — саме ним підписані «Запитання N».
     #9691ab дає 5.38:1 і лишається приглушеним. */
  --t-bg:#16151c; --t-surface:#201f29; --t-ink:#e9e7f1; --t-ink-2:#aaa6b8; --t-muted:#9691ab;
  --t-line:#322f3e; --t-fill:#2a2836; --t-fill-2:#332f40;
  --t-accent:#9b90f5; --t-accent-hov:#b0a8f8; --t-accent-soft:rgba(155,144,245,.16);
  --t-good:#5aa888; --t-good-soft:rgba(90,168,136,.14); --t-good-ink:#9ccdb4;
  --t-bad:#cf8a96;  --t-bad-soft:rgba(207,138,150,.14); --t-bad-ink:#e0aeb6;
  --t-sh:0 2px 8px rgba(0,0,0,.4);
  --t-sh-md:0 8px 26px -10px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --t-sh-lg:0 26px 64px -18px rgba(0,0,0,.6);
}

/* ── САМА КАРТКА ── */
/* Розміри нижче — плавні (clamp), а не фіксовані: текст і відступи
   ростуть разом із шириною екрана від 360px до 1200px, далі
   впираються в максимум. Так немає стрибка на 600px, коли картка
   раптом ставала «десктопною» на вузькому телефоні. */
body.design-b #test-container .test-item,
body.design-b #grid-archive .test-item{
  background:var(--t-surface) !important; border:1px solid var(--t-line) !important;
  border-radius:var(--t-r) !important; box-shadow:var(--t-sh-md) !important;
  /* 13px на 360px → 24/26px на 1200px */
  padding:clamp(13px, calc(8.29px + 1.31vw), 24px)
          clamp(13px, calc(7.43px + 1.548vw), 26px) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  animation:none !important;
}
body.design-b #grid-archive .test-item::before{ display:none !important; content:none !important; }
body.design-b #grid-archive .test-item:hover{ transform:none !important; box-shadow:var(--t-sh-md) !important; }

body.design-b #test-container .question-number,
body.design-b #grid-archive .question-number{
  font-family:var(--t-f) !important; background:transparent !important; color:var(--t-muted) !important;
  font-size:clamp(10px, calc(9.57px + .119vw), 11px) !important;
  font-weight:700 !important; letter-spacing:.12em !important;
  text-transform:uppercase !important; padding:0 !important; border:none !important;
}
body.design-b #test-container .test-item h3,
body.design-b #grid-archive .test-item h3{
  font-family:var(--t-f) !important; color:var(--t-ink) !important; font-weight:700 !important;
  /* 14.5px на телефоні → 16.5px на десктопі */
  font-size:clamp(14.5px, calc(13.64px + .238vw), 16.5px) !important;
  line-height:1.5 !important; letter-spacing:-.01em !important;
  margin:clamp(4px, .5vw, 6px) 0 clamp(10px, calc(7.43px + .714vw), 16px) !important;
}

/* ── «Запитання N» = кнопка копіювання ──────────────────────
   Клік копіює умову з варіантами (assets/common/test-copy.js).
   Значок ⧉ підказує, що напис клікабельний; після копіювання
   він на мить стає ✓. Правила скоуповані так само, як решта
   картки, тож діють і в хабі, і на предметних тестах.
   ───────────────────────────────────────────────────────── */
body.design-b #test-container .question-number,
body.design-b #grid-archive .question-number{
  cursor:pointer; user-select:none; -webkit-user-select:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:background-color .12s, color .12s;
}
body.design-b #test-container .question-number::after,
body.design-b #grid-archive .question-number::after{
  content:'\29C9'; font-size:12px; opacity:.5; line-height:1;
}
body.design-b #test-container .question-number:hover,
body.design-b #grid-archive .question-number:hover{
  background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important;
  border-radius:7px; padding:2px 7px !important; margin:-2px -7px !important;
}
body.design-b #test-container .question-number:hover::after,
body.design-b #grid-archive .question-number:hover::after{ opacity:.95; }
body.design-b #test-container .question-number.copied,
body.design-b #grid-archive .question-number.copied{
  background:var(--t-good-soft) !important; color:var(--t-good-ink) !important;
  border-radius:7px; padding:2px 7px !important; margin:-2px -7px !important;
}
body.design-b #test-container .question-number.copied::after,
body.design-b #grid-archive .question-number.copied::after{ content:'\2713'; opacity:1; }

/* ── ВАРІАНТИ + БУКВИ-БЕЙДЖІ ── */
body.design-b #test-container .test-item ul,
body.design-b #grid-archive .test-item ul{ counter-reset:topt; margin:8px 0 0 !important; padding:0 !important; list-style:none !important; }
body.design-b #test-container .test-item ul li,
body.design-b #grid-archive .test-item ul li{
  counter-increment:topt; position:relative;
  background:var(--t-fill) !important; border:1.5px solid transparent !important; border-radius:var(--t-r-sm) !important;
  box-shadow:none !important; color:var(--t-ink) !important; font-family:var(--t-f) !important;
  font-size:clamp(13px, calc(12.14px + .238vw), 15px) !important;
  line-height:1.45 !important;
  /* Лівий відступ навмисно більший за бейдж-букву: між нею і текстом
     має лишатись повітря (≈14px на телефоні, ≈21px на десктопі),
     інакше текст читається як продовження літери. */
  padding:clamp(9px, calc(6.86px + .595vw), 14px)
          clamp(11px, calc(8px + .833vw), 18px)
          clamp(9px, calc(6.86px + .595vw), 14px)
          clamp(46px, calc(39.14px + 1.905vw), 62px) !important;
  margin:clamp(6px, calc(4.29px + .476vw), 10px) 0 !important;
  transition:background-color .13s, border-color .13s, color .13s !important;
}
body.design-b #test-container .test-item ul li::before,
body.design-b #grid-archive .test-item ul li::before{
  content:counter(topt, krok-uk); position:absolute;
  left:clamp(8px, calc(6.71px + .357vw), 11px); top:50%; transform:translateY(-50%);
  width:clamp(22px, calc(19.43px + .714vw), 28px);
  height:clamp(22px, calc(19.43px + .714vw), 28px);
  border-radius:clamp(7px, calc(6.14px + .238vw), 9px);
  display:flex; align-items:center; justify-content:center;
  background:var(--t-surface); color:var(--t-accent); font-family:var(--t-f); font-weight:800;
  font-size:clamp(12px, calc(11.57px + .119vw), 13px);
  box-shadow:0 1px 3px rgba(70,60,110,.14);
}
body.design-b.dark-mode #test-container .test-item ul li::before,
body.design-b.dark-mode #grid-archive .test-item ul li::before{ background:var(--t-fill-2); }
body.design-b #test-container .test-item ul li:hover,
body.design-b #grid-archive .test-item ul li:hover{ background:var(--t-fill-2) !important; transform:none !important; }
body.design-b #test-container .test-item ul li.selected,
body.design-b #grid-archive .test-item ul li.selected{ border-color:var(--t-accent) !important; background:var(--t-accent-soft) !important; }

body.design-b #test-container .test-item ul li.correct,
body.design-b #grid-archive .test-item ul li.correct{
  background:var(--t-good-soft) !important; color:var(--t-good-ink) !important;
  border-color:var(--t-good) !important; font-weight:600 !important; text-decoration:none !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.correct::before,
body.design-b #grid-archive .test-item ul li.correct::before{ color:var(--t-good) !important; }
body.design-b #test-container .test-item ul li.correct::after,
body.design-b #grid-archive .test-item ul li.correct::after{
  content:'✓' !important; color:var(--t-good) !important; background:none !important; box-shadow:none !important;
  width:auto !important; height:auto !important; right:16px !important; font-size:15px !important; font-weight:800 !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.incorrect,
body.design-b #grid-archive .test-item ul li.incorrect{
  background:var(--t-bad-soft) !important; color:var(--t-bad-ink) !important;
  border-color:var(--t-bad) !important; text-decoration:none !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.incorrect::before,
body.design-b #grid-archive .test-item ul li.incorrect::before{ color:var(--t-bad) !important; }
body.design-b #test-container .test-item ul li.incorrect::after,
body.design-b #grid-archive .test-item ul li.incorrect::after{
  content:'✕' !important; color:var(--t-bad) !important; background:none !important; box-shadow:none !important;
  width:auto !important; height:auto !important; right:16px !important; font-size:14px !important; font-weight:800 !important; animation:none !important;
}

/* ── МЕТА-ЧІПИ ── */
body.design-b #test-container .test-meta .chip,
body.design-b #grid-archive .test-meta .chip{
  background:var(--t-fill) !important; color:var(--t-ink-2) !important; border:none !important; border-radius:8px !important;
}

/* ── ІКОНКИ-ДІЇ (пояснення / схожі / архів / обговорення) ── */
body.design-b .explain-btn, body.design-b .similar-btn,
body.design-b .divforarchive, body.design-b .discussion-btn{
  background:transparent !important; color:var(--t-ink-2) !important; border:none !important; border-radius:10px !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(--t-accent-soft) !important; color:var(--t-accent-hov) !important;
}

/* ── ТЕЛЕФОН ──────────────────────────────────────────────
   Розміри тексту, відступів і бейджів сюди БІЛЬШЕ НЕ ПИШЕМО —
   їх веде clamp() вище, плавно від 360px до 1200px. Тут лишилось
   тільки те, що clamp не покриває: заокруглення, службові
   позиції та розмір кнопок-іконок.

   Якщо додати сюди font-size чи padding, воно перебʼє clamp
   (те саме !important, але правило йде пізніше) — і плавність
   зникне зі стрибком на 600px.
   ───────────────────────────────────────────────────────── */
@media (max-width:600px){
  body.design-b #test-container .test-item,
  body.design-b #grid-archive .test-item{ border-radius:14px !important; }

  body.design-b #test-container .question-number,
  body.design-b #grid-archive .question-number{ letter-spacing:.1em !important; }

  body.design-b #test-container .test-item ul,
  body.design-b #grid-archive .test-item ul{ margin:6px 0 0 !important; }
  body.design-b #test-container .test-item ul li,
  body.design-b #grid-archive .test-item ul li{
    border-radius:11px !important; border-width:1.5px !important;
  }
  /* галочка/хрестик — ближче до краю, щоб не тиснули текст */
  body.design-b #test-container .test-item ul li.correct::after,
  body.design-b #grid-archive .test-item ul li.correct::after,
  body.design-b #test-container .test-item ul li.incorrect::after,
  body.design-b #grid-archive .test-item ul li.incorrect::after{
    right:10px !important; font-size:13px !important;
  }

  /* ряд іконок у шапці картки */
  body.design-b .test-info{ margin-bottom:6px !important; }
  body.design-b #test-container .explain-btn, body.design-b #test-container .similar-btn,
  body.design-b #test-container .divforarchive, body.design-b #test-container .discussion-btn,
  body.design-b #test-container .report-btn{
    width:30px !important; height:30px !important;
  }
  body.design-b #test-container .explain-btn img, body.design-b #test-container .similar-btn img,
  body.design-b #test-container .divforarchive img, body.design-b #test-container .discussion-btn img,
  body.design-b #test-container .report-btn img{
    width:18px !important; height:18px !important;
  }
}


/* ==== assets/common/test-card.css ==== */
/* ============================================================
   ТЕСТ — ВИГЛЯД КРОК-ХАБУ НА ВЕСЬ САЙТ.
   ------------------------------------------------------------
   Це ТОЧНА копія вигляду картки питання з КРОК-хабу
   (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{
  /* Ширина гнучка в межах розумного. Було жорстко 158px — і назва теми
     «Мікс — М'язова тканина • Кісткова тканина…» обрізалась у кашу, а
     п'ять контролів по 158px розлазились у три ряди. Тепер поле росте
     під вміст до 300px і стискається, коли поруч тісно. */
  flex:1 1 auto; width:auto; min-width:150px; max-width:300px;
  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);
}

/* УВАГА: тут САМЕ background-color, а не шорткат background.
   Шорткат скидає background-image — а в .arch-sel фоном намальований
   шеврон ⌄. Через це в темній темі стрілки зникали і пігулки виглядали
   як неклікабельні бейджі. */
body.dark-mode .arch-sel,
body.dark-mode .arch-search input,
body.dark-mode .arch-clear{ background-color:#1b1a22; border-color:#322f3e; color:#e8e6ef }
body.dark-mode .arch-sel.is-on{ background-color:rgba(155,144,245,.16); color:#b0a8f8 }
/* світліший штрих шеврона — на темному тлі сірий #9a95a8 майже не видно */
body.dark-mode .arch-sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3aec4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.arch-chip{ background:var(--tc-fill, #f1eff9) }
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; min-width:0; max-width:none; 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 }
}

/* Кнопка архівування — знімаємо дефолтну обгортку <button>.
   Вигляд (фон/рамку) далі задає контекст сторінки: design-b малює її
   прозорою, предметні хаби — білою пігулкою. */
button.divforarchive{
  -webkit-appearance:none; appearance:none;
  padding:0; font:inherit; color:inherit;
  background:none; border:0;
}

/* ═══════════════════════════════════════════════════════════
   ФОКУС НА ВАРІАНТІ ВІДПОВІДІ (assets/common/test-a11y.js).
   Варіанти тепер доступні з клавіатури, тож фокус має бути
   видно — інакше людина не розуміє, де вона в списку.
   ═══════════════════════════════════════════════════════════ */
.test-item ul > li.opt:focus-visible,
.test-item ul > li[data-option]:focus-visible{
  outline:3px solid var(--tc-accent, #8b80f0);
  outline-offset:2px;
  border-radius:inherit;
}
/* Клавіатурний фокус лишаємо помітним і в темній темі */
body.dark-mode .test-item ul > li.opt:focus-visible{
  outline-color:#b0a8f8;
}

/* «Запитання N» тепер <h2> (потрібно для SEO й скрін-рідерів).
   Браузер дав би йому власний розмір і відступи — скидаємо, щоб
   вигляд лишився точно таким, як був у <div>. */
.test-item h2.question-number,
.test-card h2.question-number{
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}

/* Заголовок сторінки тесту — прихований візуально, доступний
   пошуковику й скрін-рідеру (макет має власне оформлення). */
.tv-sr-title{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}