@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600;700&family=Rubik:wght@400;500;600;700&display=swap');
/* Карточка «Двойной спирали» на главной портала — в стиле квеста: тёмное поле флуоресцентного микроскопа,
   сетка счётной камеры, мягкое свечение каналов (GFP — зелёный, DAPI — синий) и неоновые основания ДНК. */
.qc-helix { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 6px; color: #e3f0ff; font-family: "Rubik", "Inter", system-ui, sans-serif; overflow: hidden;
  background: linear-gradient(rgba(79, 184, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(79, 184, 255, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(circle at 92% 4%, rgba(61, 255, 158, .17), transparent 46%), radial-gradient(circle at 0 100%, rgba(91, 110, 255, .2), transparent 52%), radial-gradient(circle at 60% 120%, rgba(255, 92, 138, .1), transparent 45%), #040a14;
  border: 1px solid #15304a; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qc-helix:hover { transform: translateY(-3px); border-color: #1f4a66; box-shadow: 0 24px 60px rgba(61, 255, 158, .14); }
.qc-helix-head { display: flex; align-items: center; gap: 14px; }
.qc-helix-mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #0f2438, #050b16 72%); box-shadow: 0 0 0 1px #1d3f5c, 0 0 18px rgba(61, 255, 158, .22); }
.qc-helix-mark svg { width: 34px; height: 34px; filter: drop-shadow(0 0 4px rgba(143, 220, 255, .5)); }
.qc-helix-kicker { margin: 0; font: 600 11px "Fira Mono", "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #3dff9e; }
.qc-helix h3 { margin: 2px 0 0; font: 700 20px/1.2 "Comfortaa", "Rubik", sans-serif; color: #f2f8ff; }
.qc-helix-art { width: 100%; height: 150px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(ellipse at 50% 50%, rgba(79, 184, 255, .1) 0, rgba(61, 255, 158, .04) 45%, transparent 72%); }
.qc-helix-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(143, 220, 255, .35)); }
.qc-helix-art.done svg { animation: qch-glow 3.2s ease-in-out infinite; }
@keyframes qch-glow { 50% { filter: drop-shadow(0 0 9px rgba(61, 255, 158, .7)); } }
@media (prefers-reduced-motion: reduce) { .qc-helix-art.done svg { animation: none; } }
.qc-helix-desc { margin: 0; color: #c2d4ec; font-size: 14px; line-height: 1.5; }
.qc-helix-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #8ba3bf; }
.qc-helix-stats b { color: #eaf4ff; }
.qc-helix-mine { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: rgba(61, 255, 158, .07); border: 1px solid rgba(61, 255, 158, .28); }
.qc-helix-mine b { color: #7dffbd; }
.qc-helix-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-helix-btn { padding: 11px 18px; border-radius: 999px; background: linear-gradient(135deg, #3dff9e, #2ad1c9); color: #03140d; font-weight: 700; text-decoration: none; box-shadow: 0 0 18px rgba(61, 255, 158, .35); }
.qc-helix-btn:hover { background: linear-gradient(135deg, #6dffb6, #4fe3dc); }
.qc-helix-link { color: #7f97b5; font-size: 13px; text-decoration: none; }
.qc-helix-link:hover { color: #3dff9e; }
/* главная «в один экран» (hub.css): плашка компактнее — спираль ниже (124 px), описание до трёх строк */
@media (min-width: 1000px) and (min-height: 500px), (min-width: 760px) and (min-height: 900px) {
  body.hb-home .hb-grid .qc-helix { gap: 10px; padding: 18px 20px; }
  body.hb-home .hb-grid .qc-helix-mark { width: 46px; height: 46px; }
  body.hb-home .hb-grid .qc-helix-mark svg { width: 30px; height: 30px; }
  /* «твои задания» — одной строкой, чтобы описанию осталось место */
  body.hb-home .hb-grid .qc-helix-mine { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}