/* Карточка «JS: развилки» на главной хаба — белая схема метро с цветными линиями на тёмном хабе. */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Sans+Narrow:wght@700&display=swap");
.qc-jsif { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px 22px; border-radius: 6px; background: #fff; color: #1e2b4a; font-family: "PT Sans", system-ui, sans-serif; border-bottom: 8px solid #e4262c; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); transition: transform .2s; }
.qc-jsif:hover { transform: translateY(-3px); }
.qc-jsif-head { display: flex; align-items: center; gap: 12px; }
.qc-jsif-m { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e4262c; color: #fff; font: 700 26px/1 "PT Sans Narrow", sans-serif; }
.qc-jsif-kicker { margin: 0; font: 700 11px "PT Sans Narrow", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #67708a; }
.qc-jsif h3 { margin: 0; font: 700 24px/1.1 "PT Sans Narrow", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #1e2b4a; }
.qc-jsif-map { aspect-ratio: 1; max-height: 260px; width: 100%; margin: 0 auto; }
.qc-jsif-map svg { display: block; width: 100%; height: 100%; }
.qc-jsif-desc { margin: 0; font-size: 14px; line-height: 1.5; color: #3a4766; }
.qc-jsif-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #67708a; }
.qc-jsif-stats b { color: #1e2b4a; }
.qc-jsif-mine { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: #e3effa; }
.qc-jsif-mine b { color: #0a5ea3; }
.qc-jsif-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-jsif-btn { padding: 9px 18px; border-radius: 999px; background: #0d72c4; color: #fff; font-weight: 700; text-decoration: none; }
.qc-jsif-btn:hover { background: #0a5ea3; }
.qc-jsif-link { color: #67708a; font-size: 13px; text-decoration: none; }
.qc-jsif-link:hover { color: #0d72c4; }