@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500;600;700&family=Golos+Text:wght@400;500;600;700&display=swap');
/* Карточка «Хемоинформатики» на главной портала — в стиле квеста: глубокий индиго, решётка из кубиков, холодное
   свечение циана и маджента, огненная плашка «HARD». */
.qc-cheminf { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 6px; color: #e8ecff; font-family: "Golos Text", "Inter", system-ui, sans-serif;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0L27.713 8V24L13.856 32L0 24V8ZM0 8L13.856 16L27.713 8M13.856 16V32M13.856 32V48' fill='none' stroke='%23161a48' stroke-width='.7'/%3E%3C/svg%3E") 0 0 / 27.713px 48px, radial-gradient(circle at 100% 0, rgba(47, 211, 255, .2), transparent 55%), radial-gradient(circle at 0 100%, rgba(255, 79, 216, .14), transparent 50%), #080a22;
  border: 1px solid #262b6b; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qc-cheminf:hover { transform: translateY(-3px); border-color: #3a43a0; box-shadow: 0 24px 60px rgba(47, 211, 255, .18); }
.qc-cheminf-hard { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 6px; background: linear-gradient(135deg, #ff3d3d, #ff9a1f); color: #1a0500; font: 800 11px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; box-shadow: 0 0 14px rgba(255, 106, 31, .5); }
.qc-cheminf-head { display: flex; align-items: center; gap: 14px; padding-right: 64px; }
.qc-cheminf-gem { flex: none; width: 52px; height: 46px; clip-path: polygon(22% 0, 78% 0, 100% 34%, 50% 100%, 0 34%);
  background: linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, .35) 49% 51%, transparent 51%), linear-gradient(180deg, rgba(255, 255, 255, .45) 0 33%, transparent 33%), linear-gradient(135deg, #8af0ff, #2fd3ff 35%, #6a5cff 65%, #ff4fd8); filter: drop-shadow(0 0 8px rgba(47, 211, 255, .55)); }
.qc-cheminf-kicker { margin: 0; font: 600 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #2fd3ff; }
.qc-cheminf h3 { margin: 2px 0 0; font: 600 20px/1.2 "Tektur", "Russo One", "Inter", sans-serif; letter-spacing: .01em; color: #f2f5ff; }
.qc-cheminf-art { aspect-ratio: 1; max-height: 250px; margin: 0 auto; width: 100%; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(circle at 50% 48%, rgba(47, 211, 255, .14) 0, rgba(106, 92, 255, .07) 40%, transparent 70%); }
.qc-cheminf-art svg { width: 100%; height: 100%; max-height: 250px; overflow: visible; }
.qc-cheminf-art.done svg { animation: qcx-glow 3s ease-in-out infinite; }
@keyframes qcx-glow { 50% { filter: drop-shadow(0 0 10px rgba(47, 211, 255, .65)); } }
@media (prefers-reduced-motion: reduce) { .qc-cheminf-art.done svg { animation: none; } }
.qc-cheminf-desc { margin: 0; color: #c6cdf0; font-size: 14px; line-height: 1.5; }
.qc-cheminf-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #949cc9; }
.qc-cheminf-stats b { color: #e8ecff; }
.qc-cheminf-mine { font-size: 13px; padding: 8px 12px; border-radius: 6px; background: rgba(47, 211, 255, .08); border: 1px solid rgba(47, 211, 255, .3); }
.qc-cheminf-mine b { color: #8ae8ff; }
.qc-cheminf-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-cheminf-btn { padding: 11px 18px; border-radius: 8px; background: linear-gradient(135deg, #2fd3ff, #5b8cff); color: #021320; font-weight: 800; text-decoration: none; box-shadow: 0 0 18px rgba(47, 211, 255, .35); }
.qc-cheminf-btn:hover { background: linear-gradient(135deg, #5fe0ff, #7aa2ff); }
.qc-cheminf-link { color: #7f88bf; font-size: 13px; text-decoration: none; }
.qc-cheminf-link:hover { color: #2fd3ff; }
/* главная «в один экран» (hub.css): плашка компактнее — кристалл ниже, описание до трёх строк, чтобы плашка влезала в блок */
@media (min-width: 1000px) and (min-height: 500px), (min-width: 760px) and (min-height: 900px) {
  body.hb-home .hb-grid .qc-cheminf { gap: 10px; }
  body.hb-home .hb-grid .qc-cheminf-art { height: 124px; max-height: none; aspect-ratio: auto; }
  body.hb-home .hb-grid .qc-cheminf-art svg { max-height: none; }
  body.hb-home .hb-grid .qc-cheminf-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}