/* Jasny motyw strony głównej: domyślny od 26.10.2026; ciemny z przełącznika w pasku albo ?motyw=ciemny.
   Ta sama treść i ten sam układ co start.html; tu tylko kolory. Tło: pastelowe poświaty jak na coverze LinkedIna,
   rozlane jak światło LED na ścianie, bez krawędzi. Każda reguła zaczyna się od html[data-motyw="jasny"], więc wygrywa
   z ciemnym arkuszem niezależnie od kolejności. */
html[data-motyw="jasny"] {
  color-scheme: light;
  --kosmos: #F5F7FB;
  --kosmos-2: #FFFFFF;
  --gwiazda: #1E2430;
  --szary: #4C5566;
  --szary-2: #6B7485;
  --brzoskwinia-jasna: #C2492F;
  --brzoskwinia-mgla: rgba(255, 125, 107, .12);
  --szklo: rgba(255, 255, 255, .72);
  --szklo-2: rgba(255, 255, 255, .92);
  --krawedz: rgba(30, 36, 48, .09);
  --krawedz-2: rgba(30, 36, 48, .16);
  --g3: 0 1px 2px rgba(30, 36, 48, .06), 0 28px 56px -24px rgba(30, 36, 48, .22);
  --j-panel: rgba(255, 255, 255, .78);
  --j-cien: 0 1px 2px rgba(30, 36, 48, .05), 0 24px 60px -28px rgba(30, 36, 48, .22);
  --j-tekst-2: #4C5566;
}

/* ---------- Tło: poświaty zamiast mgławic, scena 3D w odwróconych kolorach ---------- */
html[data-motyw="jasny"] .niebo {
  background:
    radial-gradient(42% 38% at 4% 6%, rgba(140, 180, 250, .38), transparent 72%),
    radial-gradient(46% 40% at 96% 4%, rgba(255, 170, 150, .40), transparent 72%),
    radial-gradient(40% 36% at 10% 96%, rgba(130, 215, 185, .38), transparent 72%),
    radial-gradient(36% 30% at 62% 100%, rgba(150, 190, 250, .30), transparent 72%),
    radial-gradient(30% 26% at 92% 70%, rgba(130, 215, 185, .26), transparent 72%),
    linear-gradient(105deg, #F7F9FD 0%, #EEF3FB 55%, #F6F2F4 100%);
}
/* Scena 3D sumuje światło (AdditiveBlending), więc na jasnym tle białe punkty znikają, a brzoskwiniowe kule i kropki zostają. */
html[data-motyw="jasny"] #scena3d { opacity: .9; }
html[data-motyw="jasny"] .ziarno { opacity: .02; }
html[data-motyw="jasny"] .hero__w::before,
html[data-motyw="jasny"] .glowa::before,
html[data-motyw="jasny"] .przestrzen__tytul::before { background: radial-gradient(closest-side, rgba(247, 249, 253, .75), rgba(247, 249, 253, .45) 60%, rgba(247, 249, 253, 0)); }

/* ---------- Typografia ---------- */
html[data-motyw="jasny"] .zar { background-image: linear-gradient(100deg, #FF8A73 0%, #E5533F 55%, #C2492F 100%); }
html[data-motyw="jasny"] .hero h1,
html[data-motyw="jasny"] .hero__lead { text-shadow: none; }
html[data-motyw="jasny"] .hero__lead,
html[data-motyw="jasny"] .glowa p,
html[data-motyw="jasny"] .przestrzen__tytul p,
html[data-motyw="jasny"] .fakty span,
html[data-motyw="jasny"] .pdz__kol--radar,
html[data-motyw="jasny"] .pdz__pasek,
html[data-motyw="jasny"] .opaska p,
html[data-motyw="jasny"] .cz__p,
html[data-motyw="jasny"] .cz__pkt,
html[data-motyw="jasny"] .pyt p,
html[data-motyw="jasny"] .brief__p,
html[data-motyw="jasny"] .brief__lista li,
html[data-motyw="jasny"] .cn-liczby span,
html[data-motyw="jasny"] .cn-cechy li,
html[data-motyw="jasny"] .cn-wspolne li { color: var(--j-tekst-2); }
html[data-motyw="jasny"] .nad i { box-shadow: 0 0 10px 1px rgba(255, 125, 107, .45); }
html[data-motyw="jasny"] ::selection { color: #1A0E0B; }

/* ---------- Szklane panele: białe zamiast granatowych ---------- */
html[data-motyw="jasny"] .pasek__w,
html[data-motyw="jasny"] .hud,
html[data-motyw="jasny"] .adnot,
html[data-motyw="jasny"] .adnot::after,
html[data-motyw="jasny"] .adnot.mala:hover,
html[data-motyw="jasny"] .adnot.mala:focus,
html[data-motyw="jasny"] .adnot.mala.otwarta,
html[data-motyw="jasny"] .wykres,
html[data-motyw="jasny"] .pdz__kol--radar,
html[data-motyw="jasny"] .opaska,
html[data-motyw="jasny"] .pyt,
html[data-motyw="jasny"] .form,
html[data-motyw="jasny"] .kom__w,
html[data-motyw="jasny"] .powiad,
html[data-motyw="jasny"] .cn-demo,
html[data-motyw="jasny"] .cn-okres,
html[data-motyw="jasny"] .cn-plan,
html[data-motyw="jasny"] .cn-wspolne,
html[data-motyw="jasny"] .cn-dodatki { background: var(--j-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--j-cien); }
/* Zwinięta etykieta w scenie 3D to sama pigułka (::after); panel z opisem pojawia się dopiero po najechaniu albo otwarciu.
   Reguła wyżej daje tło każdej etykiecie i przebija .adnot.mala, więc w spoczynku zdejmujemy tło, ramkę, cień i rozmycie. */
html[data-motyw="jasny"] .adnot.mala:not(:hover):not(:focus):not(.otwarta) { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-motyw="jasny"] .lejek__karta { background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .74)); box-shadow: 0 40px 100px -44px rgba(30, 36, 48, .28); }
html[data-motyw="jasny"] .cn-plan--wyrozniony { background: linear-gradient(180deg, rgba(255, 237, 234, .95), rgba(255, 255, 255, .86) 46%); box-shadow: 0 30px 80px -40px rgba(255, 125, 107, .45); }
/* Cennik: ikony w kartach planów, w „W każdym planie” i w dodatkach. Linie ciemniejsze niż w ciemnym motywie, żeby nie ginęły na bieli;
   warianty powtórzone, bo reguła ogólna z html[data-motyw] przebija same klasy wariantów. */
html[data-motyw="jasny"] .cn-ik { background: rgba(30, 36, 48, .05); color: #4C5566; }
html[data-motyw="jasny"] .cn-ik--firmy { background: rgba(255, 125, 107, .14); color: #D9573F; }
html[data-motyw="jasny"] .cn-ik--skan { background: rgba(76, 201, 164, .16); color: #17855F; }
html[data-motyw="jasny"] .cn-ik--analityk { background: linear-gradient(145deg, rgba(79, 141, 247, .16), rgba(167, 139, 250, .14)); color: #3F6FD8; }
html[data-motyw="jasny"] .cn-ik--zrodla { background: rgba(79, 141, 247, .12); color: #3F6FD8; }
html[data-motyw="jasny"] .cn-ik--boost { background: linear-gradient(135deg, #FF8A4C 0%, #F2582F 48%, #DB3E22 100%); }
html[data-motyw="jasny"] .cn-dodatki li { background: rgba(245, 247, 251, .85); }
/* Cennik: blok źródeł danych i integracji (29.10.2026). */
html[data-motyw="jasny"] .cn-lejek li { background: var(--j-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--j-cien); }
html[data-motyw="jasny"] .cn-lejek__cel { background: linear-gradient(180deg, rgba(255, 237, 234, .95), rgba(255, 255, 255, .86)) !important; }
html[data-motyw="jasny"] .cn-lejek__nr { background: rgba(76, 201, 164, .16); color: #17855F; }
html[data-motyw="jasny"] .cn-lejek__cel .cn-lejek__nr { background: var(--brzoskwinia); color: #1A0E0B; }
html[data-motyw="jasny"] .cn-zrodla,
html[data-motyw="jasny"] .cn-integracje { background: var(--j-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--j-cien); }
html[data-motyw="jasny"] .cn-zrodla__lista li,
html[data-motyw="jasny"] .cn-integracje li { background: rgba(245, 247, 251, .85); }
html[data-motyw="jasny"] .cn-zrodla__lista .cn-ik { background: rgba(76, 201, 164, .16); color: #17855F; }
html[data-motyw="jasny"] .cn-zrodla__liczba { background-image: linear-gradient(120deg, #1E2430 20%, #17855F); }
html[data-motyw="jasny"] .cn-integracje li p { color: var(--j-tekst-2); }
html[data-motyw="jasny"] .cn-int__pigulka { border: 1px solid var(--krawedz-2); box-shadow: 0 1px 2px rgba(30, 36, 48, .06); }
html[data-motyw="jasny"] .opaska { box-shadow: 0 30px 80px -40px rgba(255, 125, 107, .35); }
html[data-motyw="jasny"] .pole input { background: #FFFFFF; }
html[data-motyw="jasny"] .portal { box-shadow: var(--j-cien); }
@media (max-width: 900px) { html[data-motyw="jasny"] .tygodnie { background: var(--j-panel); box-shadow: var(--j-cien); } }

/* ---------- Białe karty produktu: lżejszy cień, bez czarnej poświaty ---------- */
html[data-motyw="jasny"] .war { box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -30px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .war--baza { box-shadow: 0 0 0 1px var(--krawedz), 0 60px 140px -40px rgba(255, 125, 107, .30), 0 40px 80px -40px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .okno,
html[data-motyw="jasny"] .ekran { box-shadow: 0 0 0 1px var(--krawedz), 0 60px 140px -50px rgba(255, 125, 107, .35), 0 40px 90px -40px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .bkarta,
html[data-motyw="jasny"] .sk { box-shadow: 0 0 0 1px var(--krawedz), 0 60px 140px -50px rgba(79, 141, 247, .35), 0 40px 90px -40px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .por-panel { box-shadow: 0 0 0 1px var(--krawedz), 0 40px 90px -40px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .por-panel--radar { box-shadow: 0 0 0 1px var(--krawedz), 0 50px 110px -40px rgba(76, 201, 164, .40), 0 40px 90px -40px rgba(30, 36, 48, .2); }
html[data-motyw="jasny"] .pdz__kol--ty,
html[data-motyw="jasny"] .kom__firma { box-shadow: 0 0 0 1px var(--krawedz), 0 40px 90px -36px rgba(255, 125, 107, .40); }
html[data-motyw="jasny"] .cz__okno { box-shadow: 0 0 0 1px var(--krawedz), 0 50px 110px -46px rgba(79, 141, 247, .40); }
html[data-motyw="jasny"] .pd-zadanie { box-shadow: 0 0 0 1px var(--krawedz), 0 22px 44px -24px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .pd-zadanie--aktywne { box-shadow: 0 0 0 1px rgba(255, 125, 107, .3), 0 40px 80px -30px rgba(255, 125, 107, .35), 0 30px 60px -30px rgba(30, 36, 48, .2); }
html[data-motyw="jasny"] .pdz__li,
html[data-motyw="jasny"] .pd-pusto { box-shadow: 0 0 0 1px var(--krawedz), 0 30px 60px -30px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .mat { box-shadow: 0 0 0 1px var(--krawedz), 0 40px 80px -36px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .mat.opub { box-shadow: 0 40px 80px -36px rgba(76, 201, 164, .45), 0 0 0 2px rgba(76, 201, 164, .55); }
html[data-motyw="jasny"] .mat.teraz { box-shadow: 0 40px 90px -30px rgba(255, 125, 107, .55), 0 0 0 2px var(--brzoskwinia); }
html[data-motyw="jasny"] .tor__linia { background: linear-gradient(90deg, transparent, rgba(255, 125, 107, .45) 15%, rgba(30, 36, 48, .14) 50%, rgba(76, 201, 164, .45) 85%, transparent); }
html[data-motyw="jasny"] .notka,
html[data-motyw="jasny"] .e-toast { box-shadow: 0 10px 24px -12px rgba(30, 36, 48, .35); }

/* ---------- Kroki, węzły, pętla: jasne kółka ---------- */
html[data-motyw="jasny"] .wezel span,
html[data-motyw="jasny"] .krok__n,
html[data-motyw="jasny"] .petla li > span { background: #FFFFFF; box-shadow: 0 6px 16px -8px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .wezel span { box-shadow: 0 0 0 6px var(--kosmos), 0 6px 16px -8px rgba(30, 36, 48, .25); }
html[data-motyw="jasny"] .wezel.trwa span { background: var(--brzoskwinia); box-shadow: 0 0 0 6px var(--kosmos), 0 0 36px 6px rgba(255, 125, 107, .4); }
html[data-motyw="jasny"] .wezel.gotowy span,
html[data-motyw="jasny"] .krok.bylo .krok__n { background: #E2F6EF; color: #17694F; }
html[data-motyw="jasny"] .krok.on .krok__n,
html[data-motyw="jasny"] .petla li.on > span { background: var(--brzoskwinia); }

/* ---------- Akademia: wideo zostaje ciemne ---------- */
html[data-motyw="jasny"] .ak__start,
html[data-motyw="jasny"] .ak__koniec { color: #EEF1F7; }

/* ---------- Logo: napis granatowy zamiast jasnego ---------- */
html[data-motyw="jasny"] .logo-napis path[fill="#F5F7FB"] { fill: #1E2430; }

/* ---------- Dostęp (formularz na dole) i drobne akcenty ---------- */
html[data-motyw="jasny"] .portal { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 170, 150, .30), transparent 55%), rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-motyw="jasny"] .portal p { color: var(--j-tekst-2); }
html[data-motyw="jasny"] .form { background: rgba(255, 255, 255, .9); }
html[data-motyw="jasny"] .cn-beta { color: #C2492F; }
html[data-motyw="jasny"] .pyt__link:hover,
html[data-motyw="jasny"] .pyt__link:focus-visible { color: #8F2F1C; }
html[data-motyw="jasny"] .hud p,
html[data-motyw="jasny"] .adnot span,
html[data-motyw="jasny"] .kom-k.s0 { color: var(--j-tekst-2); }
html[data-motyw="jasny"] .hud small { color: #17694F; }
/* Akapit z kolorem w atrybucie style (sekcja „Piszesz, gdy powód jest świeży”). */
html[data-motyw="jasny"] p[style*="#D0D6E1"] { color: var(--j-tekst-2) !important; }

/* ---------- Menu na telefonie ---------- */
html[data-motyw="jasny"] .mmenu { background: rgba(255, 255, 255, .94); box-shadow: var(--j-cien); }
html[data-motyw="jasny"] .mmenu__linki a { background: #F3F5FA; }