/**
 * Wspólny jasny motyw dla stron z nawigacją Faceit Finder.
 * Ładuj po /css/design-tokens.css (zmienne --ff-*).
 */
body.light-mode {
  background: var(--ff-bg-page-light, #f4f4f5);
  color: var(--ff-text-on-light-primary, #18181b);
}
body.light-mode::before {
  background: var(--ff-bg-page-light, #f4f4f5) !important;
}
body.light-mode .liquid-glass-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
body.light-mode .liquid-glass-nav {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .liquid-glass-nav .font-bold.text-lg.text-white,
body.light-mode .liquid-glass-nav .text-white {
  color: #18181b !important;
}
body.light-mode .liquid-glass-nav .text-gray-300 {
  color: #52525b !important;
}
body.light-mode .liquid-glass-nav .hover\:text-white:hover {
  color: #18181b !important;
}
body.light-mode .liquid-glass-nav .bg-black\/95,
body.light-mode .liquid-glass-nav .bg-black\/90 {
  background: rgba(255, 255, 255, 0.98) !important;
}
body.light-mode .liquid-glass-nav .border-white\/20 {
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode .liquid-glass-nav a.text-gray-300,
body.light-mode .liquid-glass-nav button.text-gray-300 {
  color: #52525b !important;
}
body.light-mode .liquid-glass-nav a.hover\:text-white:hover,
body.light-mode .liquid-glass-nav button.hover\:text-white:hover {
  color: #18181b !important;
}
body.light-mode .liquid-glass-footer {
  background: #fafafa;
  border-color: transparent;
  border-top-color: rgba(0, 0, 0, 0.1);
  color: #3f3f46;
}
body.light-mode .liquid-glass-footer .font-bold.text-xl.text-white {
  color: #18181b !important;
}
body.light-mode .liquid-glass-footer p.text-sm.text-zinc-400 {
  color: #52525b !important;
}
body.light-mode .liquid-glass-footer .grid h3 {
  color: #71717a !important;
}
body.light-mode .liquid-glass-footer a.footer-link {
  color: #52525b !important;
}
body.light-mode .liquid-glass-footer a.footer-link:hover {
  color: #c2410c !important;
}
body.light-mode .liquid-glass-footer .flex.flex-col.gap-2\.5 a.text-sm.text-zinc-300 {
  color: #52525b !important;
}
body.light-mode .liquid-glass-footer .flex.flex-col.gap-2\.5 a.text-sm.text-zinc-300:hover {
  color: #c2410c !important;
}
body.light-mode .liquid-glass-footer a.text-xs.text-zinc-500 {
  color: #71717a !important;
}
body.light-mode .liquid-glass-footer nav.max-w-5xl a {
  color: #64748b !important;
}
body.light-mode .liquid-glass-footer nav.max-w-5xl a:hover {
  color: #18181b !important;
}
body.light-mode .liquid-glass-footer p.text-zinc-600 {
  color: #71717a !important;
}
body.light-mode .liquid-glass-footer > div > div.border-t {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode main .text-white,
body.light-mode main h1.text-white,
body.light-mode main h2.text-white,
body.light-mode main h3.text-white {
  color: #18181b !important;
}
body.light-mode main .text-zinc-100 {
  color: #27272a !important;
}
body.light-mode main .text-zinc-200 {
  color: #3f3f46 !important;
}
body.light-mode main .text-zinc-300 {
  color: #52525b !important;
}
body.light-mode main .text-zinc-400 {
  color: #71717a !important;
}
body.light-mode main .text-zinc-500 {
  color: #71717a !important;
}
body.light-mode main .text-gray-200 {
  color: #3f3f46 !important;
}
body.light-mode main .text-gray-300 {
  color: #52525b !important;
}
body.light-mode main .text-gray-400 {
  color: #71717a !important;
}
body.light-mode main .text-gray-500 {
  color: #71717a !important;
}

/* Hero: „steamcommunityz.com” — wyższy kontrast na jasnym tle (wcześniej szary zlewał się z vignette) */
body.light-mode main .hero-steamcommunityz-tagline {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(24, 24, 27, 0.14) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
body.light-mode main .hero-steamcommunityz-tagline .text-gray-200 {
  color: #18181b !important;
  font-weight: 600;
}
body.light-mode main .hero-steamcommunityz-tagline .text-gray-300 {
  color: #27272a !important;
}
body.light-mode main .hero-steamcommunityz-tagline .text-gray-500 {
  color: #52525b !important;
}
body.light-mode main .hero-steamcommunityz-tagline .hero-z-in {
  color: #c2410c !important;
}

body.light-mode main .border-white\/10,
body.light-mode main .border-white\/12,
body.light-mode main .border-white\/5,
body.light-mode main .border-white\/\[0\.08\] {
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode main .bg-zinc-950\/60 {
  background: rgba(244, 244, 245, 0.92) !important;
  color: #18181b !important;
}
body.light-mode main .bg-white\/5 {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light-mode main input::placeholder,
body.light-mode main textarea::placeholder {
  color: #71717a !important;
}

/* Treść artykułu (Tailwind prose-invert na jasnym tle) */
body.light-mode .article-body.prose-invert {
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-lead: #475569;
  --tw-prose-links: #c2410c;
  --tw-prose-bold: #0f172a;
  --tw-prose-counters: #64748b;
  --tw-prose-bullets: #64748b;
  --tw-prose-hr: #e2e8f0;
  --tw-prose-quotes: #475569;
  --tw-prose-quote-borders: #e2e8f0;
  --tw-prose-captions: #64748b;
  --tw-prose-code: #0f172a;
  --tw-prose-pre-code: #e2e8f0;
  --tw-prose-pre-bg: #1e293b;
  --tw-prose-th-borders: #cbd5e1;
  --tw-prose-td-borders: #e2e8f0;
}
body.light-mode .article-body,
body.light-mode .article-body.text-white {
  color: #1e293b !important;
}
body.light-mode .article-body a {
  color: #c2410c !important;
}
body.light-mode .article-body a:hover {
  color: #ea580c !important;
}
body.light-mode .skin-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode .skin-name {
  color: #1e293b !important;
}
body.light-mode .skin-img {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Kalkulator i tabela marketplace w treści bloga */
body.light-mode #marketplaces-wrap,
body.light-mode #marketplaces-calculator-wrap {
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}
body.light-mode #marketplaces-wrap .bg-white\/\[0\.06\],
body.light-mode #marketplaces-calculator-wrap .bg-white\/\[0\.06\] {
  background: rgba(249, 250, 251, 0.98) !important;
}
body.light-mode #marketplaces-wrap .bg-black\/20,
body.light-mode #marketplaces-wrap .bg-black\/30,
body.light-mode #marketplaces-calculator-wrap .bg-black\/20,
body.light-mode #marketplaces-calculator-wrap .bg-black\/30 {
  background: rgba(255, 255, 255, 0.92) !important;
}
body.light-mode #marketplaces-wrap .bg-black\/95,
body.light-mode #marketplaces-wrap #marketplaces-col-picker-menu,
body.light-mode #marketplaces-wrap #marketplaces-payment-picker-menu {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}
body.light-mode #marketplaces-wrap .text-white,
body.light-mode #marketplaces-calculator-wrap .text-white {
  color: #0f172a !important;
}
body.light-mode #marketplaces-wrap .text-gray-300,
body.light-mode #marketplaces-calculator-wrap .text-gray-300 {
  color: #334155 !important;
}
body.light-mode #marketplaces-wrap .text-gray-400,
body.light-mode #marketplaces-calculator-wrap .text-gray-400 {
  color: #475569 !important;
}
body.light-mode #marketplaces-wrap .text-gray-500,
body.light-mode #marketplaces-calculator-wrap .text-gray-500 {
  color: #64748b !important;
}
body.light-mode #marketplaces-wrap input,
body.light-mode #marketplaces-wrap select,
body.light-mode #marketplaces-wrap .marketplaces-select,
body.light-mode #marketplaces-wrap .marketplaces-col-picker-btn,
body.light-mode #marketplaces-calculator-wrap input {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}
body.light-mode #marketplaces-wrap .marketplaces-select,
body.light-mode #marketplaces-wrap .marketplaces-col-picker-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(0,0,0,0.55)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
}
body.light-mode #marketplaces-wrap thead {
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode #marketplaces-wrap tbody tr {
  border-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-mode #marketplaces-wrap tbody tr:hover {
  background: rgba(255, 85, 0, 0.07) !important;
}
body.light-mode #marketplaces-wrap label span.text-sm,
body.light-mode #marketplaces-wrap #marketplaces-col-picker-menu span,
body.light-mode #marketplaces-wrap #marketplaces-payment-picker-menu span {
  color: #334155 !important;
}
body.light-mode #marketplaces-wrap label.hover\:bg-white\/10:hover,
body.light-mode #marketplaces-wrap #marketplaces-col-picker-menu label:hover,
body.light-mode #marketplaces-wrap #marketplaces-payment-picker-menu label:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Wyszukiwarka skrzynek CS2 w treści bloga */
body.light-mode #csgo-all-cases-search .csgo-filters-card,
body.light-mode #csgo-all-cases-search .csgo-case-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}
body.light-mode #csgo-all-cases-search .csgo-filters-title,
body.light-mode #csgo-all-cases-search .csgo-case-title {
  color: #0f172a !important;
}
body.light-mode #csgo-all-cases-search .csgo-release-badge {
  color: #475569 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
body.light-mode #csgo-all-cases-search select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(0,0,0,0.55)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
}
body.light-mode #csgo-all-cases-search select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Semantyczne kolory w main (tabele, statusy) */
body.light-mode main .text-green-400 {
  color: #15803d !important;
}
body.light-mode main .text-red-400 {
  color: #b91c1c !important;
}
body.light-mode main .text-amber-400 {
  color: #b45309 !important;
}
body.light-mode main .text-blue-400 {
  color: #1d4ed8 !important;
}

/* Nawigacja: hover na jasnym tle */
body.light-mode .liquid-glass-nav .hover\:bg-white\/10:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Focus na jasnym tle */
body.light-mode *:focus-visible {
  outline: 2px solid var(--ff-focus-ring, rgba(255, 85, 0, 0.55));
  outline-offset: 2px;
}

/* Tabele marketplace / kalkulator w blogu – nagłówek przy przewijaniu */
body.light-mode #marketplaces-wrap table thead th,
body.light-mode #marketplaces-calculator-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
body:not(.light-mode) #marketplaces-wrap table thead th,
body:not(.light-mode) #marketplaces-calculator-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(24, 24, 27, 0.95) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Profil gracza /id/… (profile.html + wstrzyknięcia z kontrolera) */
body.light-mode .stats-tab:hover,
body.light-mode .matches-tab:hover {
  color: #374151 !important;
}
body.light-mode .season-tab-btn:hover {
  color: #374151 !important;
}
body.light-mode main .season-tab-btn.bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: #111827 !important;
}
body.light-mode main .season-tab-btn.hover\:text-white:hover {
  color: #111827 !important;
}
body.light-mode #cookie-consent-banner {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body.light-mode #cookie-consent-banner .text-gray-300 {
  color: #4b5563 !important;
}
body.light-mode #cookie-consent-banner .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-mode main .rounded-full.border-black {
  border-color: #e4e4e7 !important;
}