@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Alegreya+Sans:wght@400;500;700;800&family=Victor+Mono:wght@500;600&display=swap');
/* Карточка «Уробороса» на главной портала — в стиле квеста: тёмная «алхимическая» лаборатория (глубокий индиго,
   пчелиные соты бензольных колец на фоне), золотая змея и фиолетово-голубое свечение π-облаков нанокольца.
   «В работе» — приглушённая, без входа. */
.qc-ouro { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 6px; color: #ece6ff; font-family: "Alegreya Sans", "Inter", system-ui, sans-serif; overflow: hidden; text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cpath d='M21 0 42 12.12v24.25L21 48.5 0 36.37V12.12zM21 48.5v24.25' fill='none' stroke='%23d77bff' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0 / 42px 72.75px,
    radial-gradient(circle at 92% 2%, rgba(215, 123, 255, .22), transparent 46%), radial-gradient(circle at 4% 104%, rgba(242, 196, 90, .16), transparent 50%), radial-gradient(circle at 55% 120%, rgba(111, 227, 255, .1), transparent 45%), #07051a;
  border: 1px solid #2a2160; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); transition: transform .2s, box-shadow .2s, border-color .2s; }
article.qc-ouro:hover { transform: translateY(-3px); border-color: #4a3a98; box-shadow: 0 24px 60px rgba(215, 123, 255, .18); }
.qc-ouro.is-wip { filter: saturate(.75); }
.qc-ouro-head { display: flex; align-items: center; gap: 14px; }
.qc-ouro-mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #1d1650, #07051a 72%); box-shadow: 0 0 0 1px #3b2f80, 0 0 18px rgba(215, 123, 255, .25); }
.qc-ouro-mark svg { width: 38px; height: 38px; filter: drop-shadow(0 0 4px rgba(242, 196, 90, .45)); }
.qc-ouro-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font: 600 11px "Victor Mono", "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #f2c45a; }
.qc-ouro-badge { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(215, 123, 255, .55); color: #e7b8ff; letter-spacing: .02em; text-transform: none; white-space: nowrap; font-family: "Alegreya Sans", sans-serif; font-size: 12px; }
.qc-ouro h3 { margin: 2px 0 0; font: 700 22px/1.15 "Philosopher", "Alegreya Sans", serif; color: #fff4d6; letter-spacing: .01em; text-shadow: 0 0 14px rgba(242, 196, 90, .25); }
.qc-ouro-art { width: 100%; height: 150px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(ellipse at 50% 55%, rgba(215, 123, 255, .14) 0, rgba(111, 227, 255, .04) 45%, transparent 72%); }
.qc-ouro-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(215, 123, 255, .35)); stroke-linecap: round; }
.qc-ouro-pi { fill: rgba(111, 227, 255, .12); stroke: #d77bff; stroke-width: .26; animation: qco-pi 3.6s ease-in-out infinite; }
.qc-ouro-art.done svg { animation: qco-glow 3.2s ease-in-out infinite; }
.qc-ouro-art.done .qc-ouro-snake { filter: drop-shadow(0 0 4px rgba(255, 220, 140, .9)); }
@keyframes qco-pi { 50% { stroke: #8fe6ff; fill: rgba(215, 123, 255, .2); } }
@keyframes qco-glow { 50% { filter: drop-shadow(0 0 9px rgba(242, 196, 90, .75)); } }
@media (prefers-reduced-motion: reduce) { .qc-ouro-pi, .qc-ouro-art.done svg { animation: none; } }
.qc-ouro-desc { margin: 0; color: #cfc6ee; font-size: 15px; line-height: 1.45; }
.qc-ouro-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: #9a90c4; }
.qc-ouro-stats b { color: #fff4d6; }
.qc-ouro-mine { font-size: 13.5px; padding: 8px 12px; border-radius: 8px; background: rgba(242, 196, 90, .07); border: 1px solid rgba(242, 196, 90, .3); }
.qc-ouro-mine b { color: #ffd97a; }
.qc-ouro-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-ouro-btn { padding: 11px 18px; border-radius: 999px; background: linear-gradient(135deg, #ffe08a, #f2c45a 45%, #d77bff); color: #1a0f00; font-weight: 800; text-decoration: none; box-shadow: 0 0 18px rgba(242, 196, 90, .3); }
.qc-ouro-btn:hover { background: linear-gradient(135deg, #fff0b8, #ffd27a 45%, #e59bff); }
.qc-ouro-link { color: #9a90c4; font-size: 13px; text-decoration: none; }
.qc-ouro-link:hover { color: #f2c45a; }
.qc-ouro-soon { margin-top: auto; color: #b9a7ea; font-size: 13.5px; }
/* главная «в один экран» (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-ouro { gap: 10px; padding: 18px 20px; }
  body.hb-home .hb-grid .qc-ouro-mark { width: 46px; height: 46px; }
  body.hb-home .hb-grid .qc-ouro-mark svg { width: 34px; height: 34px; }
  /* «твои задания» — одной строкой, чтобы описанию осталось место */
  body.hb-home .hb-grid .qc-ouro-mine { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}