/* ===== STRONY KATEGORII: nowy wyglad (szkielet HUD + przyciski konsolowe SNS), 2026-11-08 =====
   Kolor strony: --pg-cb / --pg-cb2 / --pg-ink (ustawiane w <style id="sns-cb-page"> kazdej kategorii) */

/* przycisk na karcie narzedzia */
.tool-card .tool-cta.sns-cb.sns-cb.sns-cb{margin-top:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;min-height:46px;padding:12px 16px;white-space:normal;text-align:center;--cbc2:var(--pg-cb2);--cbink:var(--pg-ink)}
.tool-card .tool-cta.sns-cb>span:not(.cta-code){font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.tool-card:hover .tool-cta.sns-cb.sns-cb.sns-cb:not(.fill){background:color-mix(in srgb,var(--cbc) 52%,transparent);transform:translateY(-3px)}
.tool-card:hover .tool-cta.sns-cb.sns-cb.sns-cb.fill{filter:brightness(1.1);transform:translateY(-3px)}

/* pasek filtrow (generowany przez main.js z inline style) -> chipy SNS */
#sns-filter-bar{display:flex;flex-wrap:wrap;gap:10px 12px;margin:6px 0 22px}
#sns-filter-bar .filter-btn{--cbc:var(--pg-cb);border:0!important;border-radius:0!important;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
 background:linear-gradient(180deg,color-mix(in srgb,var(--cbc) 22%,transparent),color-mix(in srgb,var(--cbc) 6%,transparent))!important;
 border-bottom:2px solid color-mix(in srgb,var(--cbc) 60%,transparent)!important;color:rgba(255,255,255,.82)!important;
 padding:11px 20px!important;font:700 11px/1.2 'Space Mono',monospace!important;letter-spacing:.08em!important;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .2s!important}
#sns-filter-bar .filter-btn:hover{background:color-mix(in srgb,var(--cbc) 45%,transparent)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-2px)}
#sns-filter-bar .filter-btn[style*="linear-gradient"]{background:linear-gradient(90deg,var(--pg-cb),var(--pg-cb2))!important;color:var(--pg-ink)!important;border-bottom:2px solid #fff!important}

/* naglowki w kolorze strony */
.stage section h1 .gradient-text,.stage section h2 .gradient-text{background:linear-gradient(90deg,var(--pg-cb),var(--pg-cb2))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.stage .section-tag{color:var(--pg-cb)}

/* karty z kodem rabatowym: zloty przycisk + ciemna pigulka z kodem (jak na kartach rabatowych) */
.tool-card .tool-cta--code.sns-cb.sns-cb.sns-cb{--cbc:#ffd66b;--cbc2:#f0a500;--cbink:#1a1203;flex-wrap:wrap;gap:6px 10px}
.tool-card .tool-cta .cta-code{background:#1c1408;color:#ffe08a;border:1px solid rgba(255,214,107,.6);border-radius:4px;animation:none;font:700 10.5px/1 'Space Mono',monospace;padding:4px 8px;letter-spacing:.03em;text-transform:none}

/* wstazka TOP WYBOR na kartach narzedzi: ta sama geometria co na kartach rabatowych (kat 72.9 st., owija rog) */
.tool-card>.ribbon-corner-wrap{width:80px;height:250px}
.tool-card>.ribbon-corner-wrap .ribbon-corner{box-sizing:border-box;width:500px;height:28px;line-height:14px;padding:7px 90px 7px 0;right:auto;bottom:auto;left:-182px;top:138px;transform:rotate(-72.9deg);transform-origin:center;font-size:11px}
.tool-card:has(>.ribbon-corner-wrap) .tool-cta.sns-cb.sns-cb.sns-cb{width:calc(100% - 62px)}

/* pigulki (tagi) zawsze rowno nad przyciskiem: wolne miejsce nad nimi, nie miedzy nimi a przyciskiem */
.tool-card .tool-card-inner>.tool-tags{margin-top:auto!important;margin-bottom:0!important;padding-top:10px}
.tool-card .tool-card-inner>.tool-cta.sns-cb.sns-cb.sns-cb{margin-top:12px}

/* kafelki statystyk (#sns-stats-bar z main.js): kolory z koloru strony (--pg-cb), nie stale cyan/fiolet/roz/teal, 2026-11-08.
   Kafelek 1 = kolor strony, 2 = jasniejszy, 3 i 4 = sasiednie odcienie (przesuniecie barwy +-28 st.; w starszych przegladarkach tony jasniejsze). */
#sns-stats-bar .sns-tile{--tc:var(--pg-cb);border-color:color-mix(in srgb,var(--tc) 40%,transparent);
 background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 24%,transparent) 0%,color-mix(in srgb,var(--tc) 8%,transparent) 45%,rgba(6,10,20,.75) 100%)}
#sns-stats-bar .sns-tile::before{background:var(--tc)}
#sns-stats-bar .sns-tile .sns-tile-n{color:var(--tc)}
#sns-stats-bar .sns-tile:hover{box-shadow:0 12px 48px color-mix(in srgb,var(--tc) 30%,transparent)}
#sns-stats-bar .sns-tile:nth-child(2){--tc:color-mix(in srgb,var(--pg-cb) 62%,#fff)}
#sns-stats-bar .sns-tile:nth-child(3){--tc:var(--pg-cb2)}
#sns-stats-bar .sns-tile:nth-child(4){--tc:color-mix(in srgb,var(--pg-cb) 80%,#fff)}
@supports (color:hsl(from red calc(h + 28) s l)){
 #sns-stats-bar .sns-tile:nth-child(3){--tc:hsl(from var(--pg-cb) calc(h + 28) s l)}
 #sns-stats-bar .sns-tile:nth-child(4){--tc:hsl(from var(--pg-cb) calc(h - 28) s l)}
}