/* Карточка «JS: функции» на главной хаба — лист синьки с чертежом механизма. */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;700&family=Roboto+Condensed:wght@400;700&display=swap");
.qc-jsf { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px 22px; border-radius: 6px; color: #eaf4ff; font-family: "Roboto Condensed", system-ui, sans-serif;
  background-color: #0f4c81; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 16px 16px; border: 2px solid rgba(234, 244, 255, .5); outline: 1px solid rgba(234, 244, 255, .25); outline-offset: -8px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transition: transform .2s; }
.qc-jsf:hover { transform: translateY(-3px); }
.qc-jsf-head { display: flex; align-items: center; gap: 12px; }
.qc-jsf-tile { flex: none; display: grid; place-items: center; width: 50px; height: 46px; border: 2px solid #eaf4ff; color: #ffe26a; font: 700 17px/1 "Jura", sans-serif; }
.qc-jsf-kicker { margin: 0; font: 700 11px "Jura", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a9cdf0; }
.qc-jsf h3 { margin: 0; font: 700 24px/1.1 "Jura", sans-serif; color: #fff; letter-spacing: .02em; }
.qc-jsf-plan { border: 1px dashed rgba(234, 244, 255, .45); padding: 6px; }
.qc-jsf-plan svg { display: block; width: 100%; height: auto; }
.qc-jsf-desc { margin: 0; font-size: 14px; line-height: 1.5; color: #d2e6fb; }
.qc-jsf-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #a9cdf0; }
.qc-jsf-stats b { color: #fff; }
.qc-jsf-mine { font-size: 13px; padding: 6px 10px; border: 1px solid rgba(255, 226, 106, .6); color: #fff; }
.qc-jsf-mine b { color: #ffe26a; }
.qc-jsf-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.qc-jsf-btn { padding: 9px 16px; border: 2px solid #ffe26a; color: #ffe26a; font: 700 14px "Jura", sans-serif; text-decoration: none; letter-spacing: .03em; }
.qc-jsf-btn:hover { background: #ffe26a; color: #0f4c81; }
.qc-jsf-link { color: #a9cdf0; font-size: 13px; text-decoration: none; }
.qc-jsf-link:hover { color: #ffe26a; }