/* font motywu (import musi być pierwszą regułą pliku) */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap&subset=latin-ext');

/* ==========================================================================
   SkillUp — wygląd całej platformy (Motyw 2.0)
   Jeden plik: baza lekcji (klasy jc-*), style platformy przeniesione z WP Idea,
   paleta i tokeny --lk-*, strony publiczne (sk-*), poprawki.
   Publikowany na https://static.lukado.eu/platforma/skillup-motyw.css (push na main),
   ładowany na każdej stronie przez mu-plugin infra/static-assets/skillup-static-assets.php.
   Do 03.10.2026: skillup-custom.css + kurs/johnny-cloud/sekcji BAZA LEKCJI tego pliku (stare ścieżki
   zostają jako kopie do czasu podmiany mu-pluginu, potem do usunięcia).
   ========================================================================== */

/* ==========================================================================
   BAZA LEKCJI (klasy jc-*) — dawny kurs/johnny-cloud/sekcji BAZA LEKCJI tego pliku.
   Kolory z tej sekcji nadpisuje niżej sekcja Motywu 2.0 (tokeny --lk-*).
   ========================================================================== */
/* box-sizing tylko w obrębie lekcji — nie ruszamy reszty strony */
.jc-lesson, .jc-lesson *, .jc-lesson *::before, .jc-lesson *::after { box-sizing: border-box; }

.jc-lesson {
  --jc-ink: #333333;
  --jc-head: #2c3e50;
  --jc-graphite: #222935;
  --jc-graphite-2: #3D4451;
  --jc-mustard: #f39c12;
  --jc-mustard-ink: #9a5b00;      /* musztarda przyciemniona do tekstu na jasnym tle (kontrast AA) */
  --jc-coral: #f67d77;
  --jc-coral-ink: #b8413b;
  --jc-light: #f8f9fa;
  --jc-line: #e2e8f0;
  --jc-muted: #5f6b7a;
  --jc-ok: #1e7e4f;
  --jc-code-bg: #222935;
  --jc-code-ink: #f1f3f5;
  --jc-radius: 12px;

  color: var(--jc-ink);
  font-size: 17px;
  line-height: 1.65;
  max-width: 860px;
}

/* override ramki wtyczki html-from-git (wg STYLE_GUIDE.md) */
.html-from-git:has(.jc-lesson) {
  margin: 0 !important; padding: 0 !important; background: none !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
}

/* --- nagłówki: nadpisanie gradientowego h2 z custom.css --- */
.skill-up-class.jc-lesson h2 {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--jc-head) !important;
  font-size: 1.45em !important;
  font-weight: 700 !important;
  margin: 2.2em 0 0.7em 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.skill-up-class.jc-lesson h3 {
  border-bottom: none !important;
  color: var(--jc-head) !important;
  font-size: 1.15em !important;
  margin: 1.6em 0 0.5em 0 !important;
  padding: 0 !important;
}
.jc-lesson p { margin: 0 0 0.9em 0; }
.jc-lesson a { color: var(--jc-mustard-ink); text-underline-offset: 2px; }
.jc-lesson a:hover { color: var(--jc-graphite); }

/* --- nagłówek lekcji --- */
.jc-header {
  background: var(--jc-graphite);
  border-radius: var(--jc-radius);
  color: #fff;
  padding: 28px 30px 24px;
  margin-bottom: 28px;
}
.jc-header .jc-kicker {
  color: var(--jc-mustard);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.jc-header .jc-title {
  color: #fff;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px 0;
}
.jc-header .jc-goal { color: #fff; font-size: 1.1em; line-height: 1.5; margin: 0 0 16px 0; }
/* starsze wersje lekcji z cache mogą mieć jeszcze tytuł w nagłówku — tytuł pokazuje belka platformy */
.jc-header .jc-title { display: none !important; }
.jc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jc-meta li {
  background: var(--jc-graphite-2);
  border-radius: 25px;
  color: #fff;
  font-size: 0.8em;
  padding: 4px 12px;
}
.jc-meta .jc-johnny { border: 1px solid var(--jc-mustard); }

/* --- „Potrzebujesz” --- */
.jc-needs {
  background: var(--jc-light);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius);
  padding: 14px 18px;
  margin: 0 0 24px 0;
}
.jc-needs strong:first-child { color: var(--jc-head); }
.jc-needs ul { margin: 6px 0 0 0; padding-left: 20px; }

/* --- video (blok z wtyczki CloudFront jest NAD shortcode'em; tu tylko notka) --- */
.jc-video-note { color: var(--jc-muted); font-size: 0.9em; margin: -12px 0 24px 0; }

/* --- ramki --- */
.jc-callout {
  border: 1px solid var(--jc-line);
  border-radius: 8px;
  background: #fff;
  margin: 1.2em 0;
  padding: 12px 16px;
}
.jc-callout > .jc-callout-label {
  display: block;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: var(--jc-graphite-2);
}
.jc-callout p:last-child { margin-bottom: 0; }
.jc-callout--warn { border-color: #f6c9c6; background: #fff6f5; }
.jc-callout--warn > .jc-callout-label { color: var(--jc-coral-ink); }
.jc-callout--practice { border-color: #f5dcae; background: #fffaf0; }
.jc-callout--practice > .jc-callout-label { color: var(--jc-mustard-ink); }
.jc-callout--volatile { background: var(--jc-light); }

/* --- kroki --- */
.jc-steps { counter-reset: jc-step; list-style: none; margin: 1em 0; padding: 0; }
.jc-steps > li {
  counter-increment: jc-step;
  margin: 0 0 1.3em 0;
  padding-left: 48px;
  position: relative;
}
.jc-steps > li::before {
  content: counter(jc-step);
  background: var(--jc-graphite-2);
  border-radius: 50%;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  height: 32px;
  left: 0;
  line-height: 32px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 32px;
}
.jc-result { color: var(--jc-ok); font-size: 0.95em; margin: 0.4em 0 0 0; }
.jc-result::before { content: "Wynik: "; font-weight: 700; }

/* --- kod, prompty, odpowiedzi Johnny'ego --- */
.jc-lesson pre {
  background: var(--jc-code-bg) !important;
  border-radius: 8px !important;
  color: var(--jc-code-ink) !important;
  font-size: 0.88em !important;
  line-height: 1.5 !important;
  margin: 0.6em 0 !important;
  padding: 14px 45px 14px 16px !important;
}
.jc-lesson pre code { background: none !important; color: inherit !important; }
.jc-lesson code:not(pre code) {
  background: #eef1f4;
  border-radius: 4px;
  color: var(--jc-head);
  font-size: 0.9em;
  padding: 1px 5px;
}
.jc-block-label {
  color: var(--jc-muted);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0.8em 0 -0.2em 0;
  text-transform: uppercase;
}
.jc-prompt pre { background: #2f3b4d !important; }
.jc-answer pre { background: #fff !important; border: 1px solid var(--jc-line) !important; color: var(--jc-ink) !important; }

/* --- przycisk kopiowania przy kodzie w tekście: w lekcjach kursu wyłączony ---
   Skrypt platformy dokłada ikonę kopiowania do każdego <code> dłuższego niż 3 znaki,
   także do nazw plików w zdaniach i na checklistach (szum). Kopiowanie zostaje
   w blokach <pre> — tam są komendy i prompty. Uwaga Lukasza po teście 01.10. */
.skill-up-class.jc-lesson .inline-code-copy { display: none !important; }
.skill-up-class.jc-lesson code:not(pre code) { padding-right: 5px !important; min-width: 0 !important; }

/* --- rozwijane (natywne <details>, działa bez JS) --- */
.jc-lesson details {
  border: 1px solid var(--jc-line);
  border-radius: 8px;
  margin: 0.6em 0;
  background: #fff;
}
.jc-lesson details > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 10px 14px 10px 38px;
  position: relative;
  color: var(--jc-head);
}
.jc-lesson details > summary::-webkit-details-marker { display: none; }
.jc-lesson details > summary::before {
  content: "+";
  color: var(--jc-mustard-ink);
  font-weight: 700;
  left: 14px;
  position: absolute;
}
.jc-lesson details[open] > summary::before { content: "\2212"; }
.jc-lesson details > summary:hover { background: var(--jc-light); }
.jc-lesson details > .jc-details-body { padding: 0 16px 12px 38px; }

/* --- zakładki (JS buduje przyciski; bez JS panele stoją jeden pod drugim z tytułami) --- */
.jc-tabs { margin: 1.2em 0; }
.jc-tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--jc-line); }
.jc-tablist button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--jc-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin-bottom: -2px;
  padding: 8px 14px;
}
.jc-tablist button:hover { color: var(--jc-head); background: var(--jc-light); }
.jc-tablist button[aria-selected="true"] { border-bottom-color: var(--jc-mustard); color: var(--jc-head); }
.jc-tablist button:focus-visible { outline: 2px solid var(--jc-mustard); outline-offset: 2px; }
.jc-tab { padding: 14px 2px 2px; }
.jc-tab > .jc-tab-title { font-weight: 700; color: var(--jc-head); margin: 0 0 6px 0; }
.jc-tabs.is-ready .jc-tab > .jc-tab-title { display: none; }
.jc-tabs.is-ready .jc-tab[hidden] { display: none; }

/* --- troubleshooting --- */
.jc-trouble details > summary { font-weight: 600; }
.jc-trouble .jc-cause { color: var(--jc-muted); margin-bottom: 0.4em; }
.jc-trouble .jc-cause::before { content: "Przyczyna: "; font-weight: 700; color: var(--jc-head); }
.jc-trouble .jc-fix::before { content: "Co zrobić: "; font-weight: 700; color: var(--jc-head); }

/* --- „Co masz po lekcji” / DoD --- */
.jc-checklist {
  background: var(--jc-light);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius);
  list-style: none;
  margin: 1em 0;
  padding: 14px 18px;
}
.jc-checklist li { margin: 0.35em 0; }
.jc-checklist label { cursor: pointer; display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.jc-checklist input[type="checkbox"] { accent-color: var(--jc-mustard); margin-top: 0.35em; width: 18px; height: 18px; flex: none; }
.jc-checklist .jc-aws-only { color: var(--jc-muted); font-size: 0.8em; font-weight: 700; margin-left: 6px; }
.jc-progress { color: var(--jc-muted); font-size: 0.85em; margin: -0.4em 0 1em 0; }

/* --- badge „tylko z kontem AWS” w treści --- */
.jc-badge {
  background: var(--jc-graphite-2);
  border-radius: 25px;
  color: #fff;
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  text-transform: uppercase;
  vertical-align: middle;
}
.jc-badge--aws { background: var(--jc-coral); }

/* --- stopka lekcji (nawigację Poprzednia/Następna daje platforma) --- */
/* starsze wersje lekcji (z cache html-from-git) mogą jeszcze mieć pasek „Dalej” — ukryty */
.jc-lesson .jc-next { display: none !important; }
.jc-sources { color: var(--jc-muted); font-size: 0.85em; }
.jc-sources a { color: var(--jc-muted); }
.jc-verified { color: var(--jc-muted); font-size: 0.8em; margin-top: 0.4em; }

/* --- tabele --- */
.jc-lesson table { border-collapse: collapse; margin: 1em 0; width: 100%; font-size: 0.95em; }
.jc-lesson th { background: var(--jc-graphite-2); color: #fff; text-align: left; padding: 8px 10px; }
.jc-lesson td { border-bottom: 1px solid var(--jc-line); padding: 8px 10px; vertical-align: top; }

@media (max-width: 768px) {
  .jc-lesson { font-size: 16px; }
  .jc-header { padding: 22px 18px 18px; }
  .jc-header .jc-title { font-size: 1.35em; }
  .jc-steps > li { padding-left: 42px; }
}



/* --- Sidebar (agenda) collapse/expand styles --- */
.wp-block-columns {
    display: flex;
    transition: all 0.3s;
}
.course-navigation-section {
    width: 260px;
    min-width: 180px;
    max-width: 320px;
    transition: width 0.3s;
    overflow: hidden;
}
.sidebar-collapsed .course-navigation-section {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.sidebar-collapsed .course-navigation-section * {
    display: none !important;
}

/* Ukryj przycisk toggleSidebar gdy sidebar jest zwinięty */
.sidebar-collapsed #toggleSidebar {
    display: none !important;
}
.sidebar-collapsed .wp-block-column[style*="flex-basis:20%"] {
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
}
.sidebar-collapsed .wp-block-column[style*="flex-basis:80%"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
}
.etap_kursu p {
font-size: 12px;
}
.etap_kursu ul li a, .etap_kursu ul li span {
font-size: 12px;
}


.icon-module {
display: none !important;
}
.modul_lekcja_zdjecie {
display: none;
}

/* Belka tytułu lekcji - jednolity grafit, ten sam kolor i zaokrąglenie co nagłówek lekcji (.jc-header) */
.wpi-page-title {
    background: #222935 !important;
    color: white !important;
    padding: 25px !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1.8em !important;
    box-shadow: none !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    
    /* Pełna szerokość kontenera z kolumnami */
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Responsywność na urządzenia mobilne */
@media (max-width: 768px) {
    .wpi-page-title {
        font-size: 1.4em !important;
        padding: 18px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
}

/* Specyficzne reguły dla WordPress - usuń ograniczenia szerokości */
.wp-block-group .wp-block-columns .wp-block-column .wpi-page-title {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Upewnij się, że kontener ma odpowiednią szerokość */
.wp-block-columns .wp-block-column .wpi-page-title {
    max-width: none !important;
    width: 100% !important;
}

/* Zachowaj pełną szerokość dla paska postępów */
.lekcja_top {
    width: 100% !important;
    max-width: none !important;
}

.lekcja_top .contenter {
    width: 100% !important;
    max-width: none !important;
}

/* Kafelki lekcji i modułów: jasna karta z cienką ramką (zamiast ciemnych kafli).
   Cała karta jest klikalna, strzałka w rogu pokazuje, że to link. */
.modul_lekcja {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: none;
    padding: 22px 22px 54px;
    margin-bottom: 24px;
    min-height: 150px;
    height: calc(100% - 24px);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.modul_lekcja:hover {
    background: #fffaf0;
    border-color: #f39c12;
}
.modul_lekcja_zdjecie {
    display: none;
}
.modul_lekcja_tytul {
    margin: 0;
    padding: 0;
    min-height: 0;
}
.modul_lekcja_tytul,
.modul_lekcja_tytul a,
.modul_lekcja_tytul a:hover {
    color: #222935 !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    word-break: normal;
    overflow-wrap: anywhere;
}
.modul_lekcja_tytul a {
    display: block;
    margin: 0;
    padding: 0;
}
/* cała karta klikalna */
.modul_lekcja_tytul a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}
/* strzałka w prawym dolnym rogu */
.modul_lekcja_tytul a::after {
    content: "\2192";
    position: absolute;
    right: 20px;
    bottom: 14px;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    color: #9a5b00;
}
.modul_lekcja_tytul a:focus-visible::before {
    outline: 2px solid #f39c12;
    outline-offset: 2px;
}
.modul_lekcja_opis {
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5f6b7a;
}
/* lekcja jeszcze niedostępna */
.modul_lekcja.lek_niedostepna {
    background: #f8f9fa;
    border-color: #e2e8f0;
}
.modul_lekcja.lek_niedostepna:hover {
    background: #f8f9fa;
    border-color: #e2e8f0;
}
.modul_lekcja.lek_niedostepna .modul_lekcja_tytul,
.modul_lekcja.lek_niedostepna .modul_lekcja_opis {
    opacity: 1;
    color: #5f6b7a !important;
}
@media (max-width: 768px) {
    .modul_lekcja {
        padding: 18px 18px 48px;
        min-height: 0;
        margin-bottom: 14px;
        height: auto;
    }
}

.sidebar-collapsed .wp-block-column[style*="flex-basis:80%"] > * {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
.sidebar-collapsed .wpi-block-page-content,
.sidebar-collapsed .lesson-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}



/* Odstęp poziomy między kolumną agendy a kolumną z kafelkami */
.wp-block-columns > .wp-block-column[style*="flex-basis:20%"] {
    margin-right: 32px;
}
.wp-block-columns > .wp-block-column[style*="flex-basis:80%"] {
    margin-left: 0;
}

/* Nagłówki w treści lekcji (.skill-up-class) - neutralne, zgodne ze STYLE_GUIDE (bez gradientu i bez paska z lewej).
   Lekcje kursu Johnny Cloud mają własny, prostszy wygląd h2 w sekcji BAZA LEKCJI tego pliku. */
.skill-up-class {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.skill-up-class h1 {
    display: none !important; /* Ukryj h1 - mamy już tytuł na stronie */
}

.skill-up-class h2 {
    background: #f8f9fa !important; /* jednolite jasne tło zamiast brzoskwiniowego gradientu */
    color: #2c3e50 !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 1.4em !important;
    box-shadow: none !important;
    margin: 20px 0 12px 0 !important;
    border: 1px solid #e2e8f0 !important;
    width: 100% !important;
    max-width: none !important;
}

.skill-up-class h3 {
    background: none !important;
    color: #3D4451 !important; /* Grafitowy zamiast brzoskwiniowego */
    padding: 12px 0 !important;
    border-radius: 0 !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 1.2em !important;
    box-shadow: none !important;
    margin: 15px 0 10px 0 !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important; /* Subtelna linia oddzielająca */
    padding-bottom: 8px !important;
    width: 100% !important;
    max-width: none !important;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
    .skill-up-class h2 {
        font-size: 1.2em !important;
        padding: 14px 16px !important;
        margin: 15px 0 10px 0 !important;
    }
    
    .skill-up-class h3 {
        font-size: 1.1em !important;
        padding: 10px 0 !important;
        margin: 12px 0 8px 0 !important;
    }
}

/* Przycisk copy dla bloków kodu - nie zmienia wyglądu bloków */
.skill-up-class pre {
    position: relative !important;
    overflow: visible !important; /* Zmiana z overflow-x: auto */
    white-space: pre-wrap !important; /* Zawijaj długie linie */
    word-wrap: break-word !important; /* Łam długie słowa */
    word-break: break-word !important; /* Łam na końcu słów, nie w środku */
    padding-right: 45px !important; /* Miejsce na przycisk copy */
    contain: layout !important; /* Ograniczenie kontekstu pozycjonowania */
    isolation: isolate !important; /* Izolacja warstwy stackingu */
}

.skill-up-class pre code {
    white-space: pre-wrap !important; /* Zawijaj długie linie w kodzie */
    word-wrap: break-word !important;
    word-break: break-word !important; /* Łam na końcu słów, nie w środku */
    padding-right: 45px !important; /* Miejsce na przycisk copy */
}

/* Przycisk copy dla bloków kodu - musztardowy akcent na hover */
.skill-up-class .code-copy-button {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #5f6b7a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Organiczny easing */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(10px) !important;
    transform: none !important;
    will-change: auto !important;
}

.skill-up-class .code-copy-button svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

/* Hover z musztardowym akcentem - interaktywny element */
.skill-up-class .code-copy-button:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: #9a5b00 !important; /* musztarda do tekstu */
    border-color: rgba(243, 156, 18, 0.5) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

.skill-up-class .code-copy-button:active {
    transform: translateY(0) !important;
}

/* Stan "skopiowano": zielony „ok” z palety */
.skill-up-class .code-copy-button.copied {
    background: #ffffff !important;
    color: #1e7e4f !important;
    border-color: rgba(30, 126, 79, 0.4) !important;
}

/* Responsywność dla przycisków copy */
@media (max-width: 768px) {
    .skill-up-class .code-copy-button {
        padding: 6px !important;
        top: 8px !important;
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    .skill-up-class .code-copy-button svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .skill-up-class .inline-code-copy svg {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Stylowanie przycisków copy dla inline code - musztardowy akcent */
.skill-up-class .inline-code-copy {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #5f6b7a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    padding: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Organiczny easing */
    box-shadow: none !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    backdrop-filter: blur(10px) !important;
    contain: layout !important;
    will-change: auto !important;
}

/* Poszerzenie inline code żeby zmieścić przycisk */
.skill-up-class code:not(pre code) {
    position: relative !important;
    padding-right: 24px !important;
    display: inline !important;
    min-width: 30px !important;
    contain: layout !important;
    isolation: isolate !important;
}

.skill-up-class .inline-code-copy svg {
    width: 10px !important;
    height: 10px !important;
    stroke: currentColor !important;
}

/* Hover z musztardowym akcentem - interaktywny element */
.skill-up-class .inline-code-copy:hover {
    background: rgba(243, 156, 18, 0.18) !important;
    color: #9a5b00 !important;
    border-color: rgba(243, 156, 18, 0.5) !important;
}

.skill-up-class .inline-code-copy:active {
    transform: translateY(-50%) !important; /* Zachowaj wyśrodkowanie */
}

/* Stan "skopiowano": zielony „ok” z palety */
.skill-up-class .inline-code-copy.copied {
    background: rgba(30, 126, 79, 0.12) !important;
    color: #1e7e4f !important;
    border-color: rgba(30, 126, 79, 0.4) !important;
}

/* Lewe wcięcie dla całości markdown-body */
.markdown-body {
    padding-left: 20px !important;
    margin-left: 10px !important;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
    .markdown-body {
        padding-left: 15px !important;
        margin-left: 5px !important;
    }
}

/* ==========================================================================
   Kolory elementów platformy zgodnie ze STYLE_GUIDE.md (02.10.2026)
   Grafit #222935 / #3D4451, przyciski nawigacji lekcji w musztardzie #f39c12,
   bez gradientów, bez cieni pod przyciskami, bez przesuwania po najechaniu.
   Te elementy mają kolory ustawione poza tym plikiem (ustawienia kolorów
   WP Idea, style wpisane w HTML szablonu lekcji), więc nadpisujemy je tutaj.
   ========================================================================== */

/* Przycisk „Zwiń/rozwiń agendę” i pływający „Rozwiń agendę”.
   W szablonie lekcji mają miętowy kolor wpisany w atrybucie style.
   Musztarda z grafitowym tekstem: jedyny jasny akcent w kolumnie agendy. */
#toggleSidebar,
#expandSidebar {
    background: #f39c12 !important;
    color: #222935 !important;
    box-shadow: none !important;
}
#toggleSidebar:hover,
#expandSidebar:hover {
    background: #e08e0b !important;
}
#toggleSidebar:focus-visible,
#expandSidebar:focus-visible {
    outline: 2px solid #222935 !important;
    outline-offset: 2px !important;
}

/* Agenda kursu (lista lekcji w kolumnie bocznej).
   Zwykłe pozycje zostają tak, jak daje je platforma: sam tekst.
   Zaznaczona lekcja: musztardowy tekst i znacznik, delikatne grafitowe tło
   (WP Idea dawał tu kolor główny, czyli koral). */
.etap_kursu ul li.active {
    border-left: 4px solid #f39c12 !important;
    background: #eceef1 !important;
}
.etap_kursu ul li.active a {
    color: #9a5b00 !important; /* musztarda do tekstu: ta sama co w lekcjach (kontrast AA) */
}
/* Najechanie na inną lekcję: tylko lekkie tło, bez zmiany koloru tekstu */
.etap_kursu ul li:hover:not(.active) {
    border-left: 4px solid transparent !important;
    background: #f4f5f7 !important;
}
.etap_kursu ul li:hover:not(.active) a {
    color: #222935 !important;
}
/* Znacznik ukończonej lekcji w kolorze musztardy zamiast koralu */
.etap_kursu ul li.zakonczony .etap_kursu_kreska:before {
    background: #f39c12 !important;
}

/* Przyciski „Poprzednia lekcja” / „Następna lekcja”.
   Musztarda z grafitowym tekstem, jak przycisk agendy (wybór Lukasza, 02.10).
   Płaskie: bez kreski pod spodem i bez cienia. */
.lekcja_nast_pop {
    background: #f39c12 !important;
    color: #222935 !important;
    border-bottom: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
}
.lekcja_nast_pop:hover,
.lekcja_nast_pop:focus {
    background: #e08e0b !important;
    color: #222935 !important;
    transform: none !important;
}

/* ==========================================================================
   PALETA PLATFORMY (02.10.2026) — jedno miejsce na kolory
   Źródło prawdy: STYLE_GUIDE.md. Panel kolorów w Publigo nie ma już znaczenia:
   wszystkie jego zmienne są ustawione poniżej i wygrywają z ustawieniami panelu.

   Grafit ciemny  #222935   belki, menu, stopka, tło kodu
   Grafit średni  #3D4451   tekst drugoplanowy i elementy na jasnym tle
   Musztarda      #f39c12   akcent i przyciski akcji (tekst na niej: #222935)
   Musztarda ↓    #e08e0b   hover musztardy, plakietki z białym tekstem
   Musztarda tekst #9a5b00  linki i wyróżnienia na jasnym tle (kontrast AA)
   Koral          #f67d77   wycofany z przycisków i plakietek; zostaje tylko w boksie „Uwaga” w lekcjach
   Tekst          #333333   nagłówki #2c3e50, przygaszony #5f6b7a
   Jasne tło      #f8f9fa   linia #e2e8f0, jasny grafit #eceef1 / #f4f5f7
   Zielony „ok”   #1e7e4f   błąd #b8413b
   Nieaktywne     #c5ccd5   wyłączone przyciski, wyblakłe ikony
   ========================================================================== */
html:root {
    /* kolor główny przycisków i ikon platformy */
    --main-color: #5f6b7a;
    --main-color-hover: #2c3e50;

    /* tła */
    --bg-color: #ffffff;
    --content-header-bg-color: #222935;
    --menu-bg-color: #222935;
    --menu-border-color: #222935;
    --footer-bg-color: #222935;
    --default-img-bg-color: #222935;
    --menu-link-bg-color: #f4f5f7;
    --menu-link-hover-color: #eceef1;
    --menu-active-link-color: #3D4451;
    --lesson-top-bg-color: #eceef1;
    --stage-bg-color: #f4f5f7;
    --tab-bg-color: #ffffff;
    --quiz-summary-img-frame-color: #eceef1;
    --quiz-summary-img-border-color: #f8f9fa;
    --quiz-summary-img-bg-color: #ffffff;
    --inactive-bg-color: #c5ccd5;
    --pagination-bg-color: #5f6b7a;
    --promotion-price-color: #5f6b7a;
    --user-profile-color: #3D4451;

    /* tekst */
    --content-header-color: #2c3e50;
    --alt-text-color: #3D4451;
    --main-text-color: #5f6b7a;
    --lesson-text-color: #333333;
    --lesson-top-text-color: #222935;
    --lesson-completed-link-color: #3D4451;
    --display-mode-color: #222935;
    --comments-third-color: #3D4451;
    --tab-alt-text-color: #5f6b7a;
    --login-label-color: #5f6b7a;
    --form-text-color: #5f6b7a;
    --placeholder-color: rgba(95, 107, 122, 0.7);
    --login-input-placeholder: rgba(95, 107, 122, 0.55);
    --cart-promotion-price-color: #5f6b7a;
    --link-color: #ffffff;
    --menu-bg-color-inverted: #ffffff;
    --footer-text-color: #ffffff;
    --generic-white-color: #ffffff;
    --wrong-answer-color: #3D4451;

    /* akcent musztardowy */
    --stage-text-color: #9a5b00;
    --default-img-color: #f39c12;
    --lesson-icon-color: #e08e0b;
    --breadcrumbs-color: #9a5b00;
    --category-link-color: #9a5b00;
    --discount-code-color: #9a5b00;
    --cart-summary-price-color: #9a5b00;
    --display-mode-active-icon-color: #e08e0b;
    --price-bg-color: #e08e0b;
    --price-border-color: #e08e0b;
    --main-box-border-color: #e08e0b;

    /* linie i obramowania */
    --main-border-color: #e2e8f0;
    --box-border-color: #e2e8f0;
    --cart-border-color: #e2e8f0;
    --menu-link-border-color: #e2e8f0;
    --tab-border-color: #e2e8f0;
    --stage-text-border-color: #e2e8f0;
    --course-stage-line-color: #e2e8f0;
    --completed-lesson-input-border: #e2e8f0;
    --display-mode-icon-color: #c5ccd5;
    --inactive-border-color: #c5ccd5;

    /* stany */
    --price-available-color: #1e7e4f;
    --voucher-redemption-color-green: #1e7e4f;
    --voucher-redemption-color-red: #b8413b;
}

/* --- Kolory wpisane w szablonie Publigo na sztywno (poza zmiennymi) --- */

/* Linki bez własnego koloru (szablon: niebieski #337ab7) */
a {
    color: #9a5b00;
}
a:hover,
a:focus {
    color: #222935;
}
button.order-details-button {
    color: #9a5b00;
}

/* Przyciski „primary” (szablon: niebieski) */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #5f6b7a;
    background-image: none;
    border-color: #5f6b7a;
    color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #2c3e50;
    border-color: #2c3e50;
}

/* Notatki i dyskusje w lekcji (szablon: morski #316861) */
.lesson-discussions-tabs .module-tab.active svg {
    color: #e08e0b;
}
.lesson-notes-tab--communities .notes-textarea:focus {
    border-color: #f39c12;
}
.lesson-notes-tab--communities .btn,
.lesson-notes-tab--communities .btn-secondary,
.lesson-notes-tab--communities .btn-primary {
    background: #5f6b7a;
}
.lesson-notes-tab--communities .btn-secondary:hover,
.lesson-notes-tab--communities .btn-primary:hover {
    background: #2c3e50;
}

/* Menu górne: po najechaniu musztarda (szablon: kolor główny, czyli szary na graficie) */
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu > li:hover > a,
.user a:hover {
    color: #f39c12;
}

/* Przełączniki, listy wyboru, gwiazdki opinii, kropka powiadomień */
input:checked + .toggle {
    background-color: #f39c12;
}
input:focus + .toggle {
    box-shadow: 0 0 1px #f39c12;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3D4451;
}
.publigo-opinion-star.dashicons-star-filled,
.publigo-opinion-star.dashicons-star-empty {
    color: #f39c12;
}
.notifications-wrapper .badge-dot {
    background: #f39c12;
}

/* Pasek cookies: nagłówek i linki brały kolor plakietki ceny (za jasny na tekst) */
.cookie-bar-header {
    color: #9a5b00;
}
.cookie-bar-v3 .cookie-bar-links-container a {
    color: #9a5b00 !important;
}
.cookie-bar .content-container__text-content font {
    color: #5f6b7a;
}

/* Ikony w koszyku to morskie PNG-i: sprowadzone do grafitu */
.tytul_ikona img {
    filter: grayscale(1) brightness(0.55);
}

/* Strony sprzedażowe: akapity na ciemnych sekcjach.
   Publigo nadaje każdemu <p> w treści strony kolor tekstu lekcji (ciemny),
   przez co podtytuł hero, opis instruktora i teksty przy CTA znikały na grafitowym tle. */
.hero-section p.hero-subtitle,
.instructor-card .instructor-info p:not(.instructor-title),
.final-cta-section p.cta-subtitle,
.final-cta-section p.cta-note {
    color: #ffffff;
}

/* Baner quizu na stronie głównej (fiolet → grafit i musztarda) */
.ai-banner-badge {
    background: #222935 !important;
    color: #ffffff !important;
}
.ai-banner-title strong {
    color: #9a5b00 !important;
}
.ai-banner-free {
    color: #5f6b7a !important;
}
.ai-banner-cta:hover {
    background: #e08e0b !important;
}

/* ==========================================================================
   LEKCJE W MARKDOWNIE (wtyczka documents-from-git, klasa .markdown-body)
   Nowe lekcje piszemy w HTML; te reguły utrzymują starsze lekcje w palecie.
   Wtyczka ładuje arkusz GitHuba (niebieskie linki, kolorowe podświetlanie kodu).
   ========================================================================== */
.markdown-body {
    color: #333333;
}
.markdown-body a {
    color: #9a5b00;
}
.markdown-body a:hover {
    color: #222935;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5 {
    color: #2c3e50;
}
.markdown-body h1,
.markdown-body h2 {
    border-bottom-color: #e2e8f0;
}
.markdown-body h6 {
    color: #5f6b7a;
}
.markdown-body hr {
    background-color: #e2e8f0;
    border-bottom-color: #e2e8f0;
}
.markdown-body blockquote {
    color: #5f6b7a;
    border-left-color: #e2e8f0;
}
.markdown-body table th,
.markdown-body table td {
    border-color: #e2e8f0;
}
.markdown-body table tr {
    background-color: #ffffff;
    border-top-color: #e2e8f0;
}
.markdown-body table tr:nth-child(2n) {
    background-color: #f8f9fa;
}
.markdown-body table th {
    background-color: #f4f5f7;
    color: #2c3e50;
}
.markdown-body img {
    background-color: transparent;
}
.markdown-body kbd {
    color: #3D4451;
    background-color: #f8f9fa;
    border-color: #e2e8f0;
    border-bottom-color: #c5ccd5;
    box-shadow: inset 0 -1px 0 #c5ccd5;
}
/* kod w tekście i bloki kodu: jasne, jak boksy w lekcjach HTML */
.markdown-body code,
.markdown-body tt {
    background-color: #eef1f4;
    color: #222935;
}
.markdown-body pre,
.markdown-body .highlight pre {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    color: #333333;
}
.markdown-body pre code,
.markdown-body pre tt {
    background-color: transparent;
    color: inherit;
}
/* podświetlanie składni: tylko kolory z palety */
.markdown-body .pl-c,
.markdown-body .pl-c span {
    color: #5f6b7a;                 /* komentarze */
}
.markdown-body .pl-k,
.markdown-body .pl-kos {
    color: #9a5b00;                 /* słowa kluczowe */
}
.markdown-body .pl-s,
.markdown-body .pl-pds,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre,
.markdown-body .pl-ent {
    color: #1e7e4f;                 /* napisy, znaczniki */
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v,
.markdown-body .pl-e,
.markdown-body .pl-en,
.markdown-body .pl-v,
.markdown-body .pl-smw,
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms,
.markdown-body .pl-ml,
.markdown-body .pl-mq {
    color: #2c3e50;                 /* stałe, nazwy funkcji, nagłówki */
}
.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1,
.markdown-body .pl-mi,
.markdown-body .pl-mb,
.markdown-body .pl-bu {
    color: #333333;
}
.markdown-body .pl-ii,
.markdown-body .pl-c2 {
    color: #ffffff;
    background-color: #b8413b;      /* błąd składni */
}
.markdown-body .pl-md {
    color: #b8413b;
    background-color: #fff6f5;      /* diff: usunięte */
}
.markdown-body .pl-mi1 {
    color: #1e7e4f;
    background-color: #f8f9fa;      /* diff: dodane */
}
.markdown-body .pl-mc {
    color: #9a5b00;
    background-color: #fffaf0;      /* diff: zmienione */
}
.markdown-body .pl-mi2 {
    color: #ffffff;
    background-color: #3D4451;
}
.markdown-body .pl-mdr,
.markdown-body .pl-ba {
    color: #5f6b7a;
}
.markdown-body .pl-sg {
    color: #c5ccd5;
}
.markdown-body .pl-corl {
    color: #1e7e4f;
}
.markdown-body .task-list-item input,
.markdown-body input[type="checkbox"] {
    accent-color: #f39c12;
}
/* etykieta wtyczki „ostatnia aktualizacja / link do GitHuba” */
div.markdown-github div.markdown-github-labels {
    background-color: #3D4451;
    color: #ffffff;
}
div.markdown-github label.github-last-update {
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   CZAT ASYSTENTA (wtyczka wordpress-chatbot-agentcore)
   Arkusz wtyczki ma miętę, bursztyn i fiolet z !important, stąd „body” z przodu.
   ========================================================================== */
body .chat-header {
    background: #f39c12 !important;
    color: #222935 !important;
}
body .chat-header .chat-action-button {
    color: #222935 !important;
}
body .chat-bubble.question {
    background: #f5dcae !important;
    color: #222935 !important;
}
body .chat-bubble.question a {
    color: #222935 !important;
}
body .chat-bubble a {
    color: #9a5b00 !important;
}
body .chat-input {
    border-color: #e2e8f0 !important;
}
body .chat-input:focus {
    border-color: #f39c12 !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2) !important;
}
body .send-button {
    background: #f39c12 !important;
    color: #222935 !important;
    box-shadow: none !important;
}
body .send-button:hover {
    background: #e08e0b !important;
    box-shadow: none !important;
}
body .loading-bubble:after {
    border-top-color: #f39c12 !important;
}
body .typing-dot {
    background: #3D4451;
}
@media not all and (prefers-color-scheme: dark) {
    body .chat-system-notice {
        background: #eceef1;
        color: #3D4451;
    }
}
@media (prefers-color-scheme: dark) {
    body .chat-bubble.answer a {
        color: #f39c12 !important;
    }
    body .chat-bubble.answer code {
        color: #f5dcae !important;
    }
}

/* ==========================================================================
   STRONY SPRZEDAŻOWE: musztarda zamiast koralu (decyzja Lukasza, 02.10.2026)
   Strony opisów szkoleń i „To ja” mają własne style wklejone w treść strony
   (koralowe CTA, plakietki, kółko z ikoną). Nadpisujemy je tutaj, żeby cała
   platforma miała jeden kolor akcji. Tekst na musztardzie zawsze grafitowy.
   ========================================================================== */
.genai-landing .cta-button,
.genai-landing .final-cta-button,
.about-landing .cta-button,
.about-landing .final-cta-button {
    background: #f39c12 !important;
    color: #222935 !important;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3) !important;
}
.genai-landing .cta-button:hover,
.genai-landing .final-cta-button:hover,
.about-landing .cta-button:hover,
.about-landing .final-cta-button:hover {
    background: #e08e0b !important;
    color: #222935 !important;
    box-shadow: 0 12px 34px rgba(243, 156, 18, 0.4) !important;
}
.genai-landing .cta-icon,
.about-landing .cta-icon {
    background: #f39c12 !important;
    color: #222935 !important;
}
/* plakietki nad tytułem w hero */
.genai-landing .free-badge,
.genai-landing .training-badge,
.genai-landing .hero-badge,
.about-landing .hero-badge {
    background: #f39c12 !important;
    color: #222935 !important;
}
/* plakietki instruktora (na ciemnej karcie) */
.genai-landing .badge,
.about-landing .badge {
    background: rgba(243, 156, 18, 0.15) !important;
    color: #f39c12 !important;
    border-color: #f39c12 !important;
}
/* plakietka LAB w programie (na jasnym tle) */
.genai-landing .lab-badge {
    background: #fffaf0 !important;
    color: #9a5b00 !important;
    border-color: #f39c12 !important;
}
/* przyciski formularza zamówienia na stronie sprzedażowej */
body .woocommerce .button,
body .woocommerce input.button,
body .woocommerce button.button {
    background: #f39c12 !important;
    color: #222935 !important;
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3) !important;
}
body .woocommerce .button:hover,
body .woocommerce input.button:hover,
body .woocommerce button.button:hover {
    background: #e08e0b !important;
    box-shadow: 0 12px 34px rgba(243, 156, 18, 0.4) !important;
}

/* ==========================================================================
   MOTYW 2.0 (02.10.2026) — język wizualny lukado.eu na platformie
   Jost, duży lekki tytuł, etykiety wersalikami, panele z cienką ramką,
   cienkie linie zamiast ramek, musztarda jako jedyny akcent.
   Kolory idą przez tokeny --lk-*. Motyw ciemny = te same reguły, inne tokeny
   (klasa html.lk-dark, na razie włączana tylko do podglądu, patrz skillup-motyw.js).
   Uwaga: szablon ustawia html{font-size:10px}, dlatego rozmiary są w px, nie w rem.
   ========================================================================== */

:root {
    --lk-bg: #e9e9e9;
    --lk-fg: #1f1f1f;
    --lk-muted: rgba(30, 30, 30, 0.88);
    --lk-subtle: rgba(30, 30, 30, 0.66);
    --lk-panel: #ffffff;
    --lk-border: rgba(0, 0, 0, 0.12);
    --lk-divider: rgba(0, 0, 0, 0.2);
    --lk-accent: #f39c12;          /* wypełnienia: przyciski, znaczniki */
    --lk-accent-hover: #e08e0b;
    --lk-accent-ink: #1f1f1f;      /* tekst na musztardzie */
    --lk-accent-text: #9a5b00;     /* musztarda jako kolor tekstu na jasnym tle */
    --lk-code: #ffffff;
    --lk-code-fg: #1f1f1f;
    --lk-head: #1e1e1e;            /* pasek górny i stopka (logo jest jasne) */
    --lk-head-fg: #ffffff;
    --lk-font: "Jost", Futura, -apple-system, "Segoe UI", sans-serif;
}
html.lk-dark {
    --lk-bg: #1e1e1e;
    --lk-fg: #ffffff;
    --lk-muted: rgba(255, 255, 255, 0.78);
    --lk-subtle: rgba(255, 255, 255, 0.52);
    --lk-panel: rgba(18, 18, 18, 0.92);
    --lk-border: rgba(255, 255, 255, 0.08);
    --lk-divider: rgba(255, 255, 255, 0.2);
    --lk-accent-text: #f39c12;
    --lk-code: #121212;
    --lk-code-fg: #f1f3f5;
    color-scheme: dark;
}

/* zmienne Publigo podpięte pod tokeny (reszta szablonu idzie za nimi) */
html:root {
    --main-font: var(--lk-font);
    --secondary-font: var(--lk-font);
    --bg-color: var(--lk-bg);
    --content-header-bg-color: var(--lk-head);
    --menu-bg-color: var(--lk-head);
    --menu-border-color: var(--lk-head);
    --footer-bg-color: var(--lk-head);
    --content-header-color: var(--lk-fg);
    --alt-text-color: var(--lk-muted);
    --main-text-color: var(--lk-subtle);
    --lesson-text-color: var(--lk-muted);
    --lesson-top-text-color: var(--lk-muted);
    --lesson-top-bg-color: var(--lk-bg);
    --display-mode-color: var(--lk-fg);
    --tab-alt-text-color: var(--lk-subtle);
    --login-label-color: var(--lk-subtle);
    --form-text-color: var(--lk-subtle);
    --stage-text-color: var(--lk-accent-text);
    --stage-bg-color: transparent;
    --tab-bg-color: var(--lk-panel);
    --main-border-color: var(--lk-divider);
    --box-border-color: var(--lk-border);
    --cart-border-color: var(--lk-divider);
    --tab-border-color: var(--lk-divider);
    --stage-text-border-color: var(--lk-divider);
    --course-stage-line-color: var(--lk-divider);
    --breadcrumbs-color: var(--lk-accent-text);
    --category-link-color: var(--lk-accent-text);
    --discount-code-color: var(--lk-accent-text);
    --cart-summary-price-color: var(--lk-accent-text);
    --main-color: var(--lk-fg);
    --main-color-hover: var(--lk-accent);
}

body {
    background: var(--lk-bg);
    color: var(--lk-muted);
    font-family: var(--lk-font);
}
a {
    color: var(--lk-accent-text);
}
a:hover,
a:focus {
    color: var(--lk-fg);
}

/* --- pasek górny --- */
#header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu > li > a {
    font-family: var(--lk-font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-head-fg);
}
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu > li:hover > a,
.user a:hover {
    color: var(--lk-accent);
}

/* --- pasek postępu pod menu --- */
.lekcja_top {
    background: var(--lk-bg) !important;
    border-bottom: 1px solid var(--lk-divider);
}
.lekcja_top_postep span,
.ukonczony_material label {
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle) !important;
}
.lekcja_top_postep i,
.lekcja_top_postep a i {
    color: var(--lk-accent-text) !important;
}

/* --- tytuł strony: duży i lekki, bez belki --- */
.wpi-page-title {
    background: none !important;
    color: var(--lk-fg) !important;
    text-align: left !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 28px 0 36px !important;
    font-family: var(--lk-font) !important;
    font-weight: 400 !important;
    font-size: clamp(30px, 4.2vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0;
}
/* etykieta nad tytułem (dodaje ją skillup-motyw.js z początku tytułu: „Lekcja 1.1”, „Moduł 1”) */
.lk-eyebrow {
    display: block;
    font-family: var(--lk-font);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 0 0 16px;
}
/* baner kursu na panelu kursu: Publigo pozycjonuje tytuł absolutnie w 300-pikselowym pasie,
   tu wraca do zwykłego układu i wyrównuje się z resztą strony */
.wpi-course-banner {
    background: none !important;
    margin: 0 0 36px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.wpi-course-banner__title-wrapper {
    position: static !important;
    display: block !important;
    transform: none !important;
    width: auto !important;
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 28px 30px 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
h1.wpi-course-banner__title {
    color: var(--lk-fg) !important;
    font-family: var(--lk-font) !important;
    font-weight: 400 !important;
    font-size: clamp(30px, 4.2vw, 52px) !important;
    line-height: 1.08;
    letter-spacing: 0;
}

/* --- układ: stała kolumna agendy zamiast 20% --- */
@media (min-width: 782px) {
    .wp-block-columns > .wp-block-column[style*="flex-basis:20%"] {
        flex: 0 0 300px !important;
        max-width: 300px;
        margin-right: 48px;
    }
    .wp-block-columns > .wp-block-column[style*="flex-basis:80%"] {
        flex: 1 1 0 !important;
        min-width: 0;
    }
}
.course-navigation-section {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.course-navigation-section .row > [class*="col-"] {
    width: 100%;
    float: none;
}

/* --- agenda: lista na cienkich liniach --- */
#course-navigation-section h3 {
    font-family: var(--lk-font) !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em;
    color: var(--lk-fg) !important;
    margin: 0 0 4px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--lk-divider);
}
.etap_kursu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 0;
}
.etap_kursu p,
.etap_kursu p a {
    font-family: var(--lk-font) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-subtle) !important;
    text-decoration: none;
}
.etap_kursu p {
    padding: 18px 34px 14px 0 !important;
    border-bottom: 1px solid var(--lk-divider) !important;
}
.etap_kursu p a:hover {
    color: var(--lk-fg) !important;
}
.etap_kursu p:before,
.etap_kursu p:after,
.etap_kursu ul li:after,
.etap_kursu ul li .etap_kursu_kreska {
    display: none !important;
}
.etap_kursu .button-expand-module {
    right: 0;
    color: var(--lk-subtle);
}
.etap_kursu ul li,
.etap_kursu ul li.active,
.etap_kursu ul li:hover:not(.active) {
    border-left: none !important;
    border-bottom: 1px solid var(--lk-divider) !important;
    background: none !important;
}
.etap_kursu ul li a,
.etap_kursu ul li span {
    font-family: var(--lk-font) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    color: var(--lk-muted) !important;
    padding: 15px 0 !important;
}
.etap_kursu ul li:hover:not(.active) a {
    color: var(--lk-fg) !important;
}
.etap_kursu ul li.active a {
    color: var(--lk-accent-text) !important;
    font-weight: 400 !important;
}
.etap_kursu ul li.zakonczony a::before {
    content: "\2713\00a0\00a0";
    color: var(--lk-accent-text);
}

/* --- kafle modułów i lekcji: panel z numerem --- */
.panel_kursu_moduly,
.modul_lista_lekcji {
    counter-reset: lk;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
}
.panel_kursu_moduly::before,
.panel_kursu_moduly::after,
.modul_lista_lekcji::before,
.modul_lista_lekcji::after {
    display: none;
}
.panel_kursu_moduly > [class*="col-"],
.modul_lista_lekcji > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
}
.modul_lekcja,
.modul_lekcja:hover,
.modul_lekcja.lek_niedostepna,
.modul_lekcja.lek_niedostepna:hover {
    counter-increment: lk;
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 28px 28px 56px;
    min-height: 190px;
    height: 100%;
    margin-bottom: 0;
    transition: border-color 0.4s ease;
}
.modul_lekcja:hover {
    border-color: var(--lk-accent);
}
.modul_lekcja::before {
    content: counter(lk, decimal-leading-zero);
    display: block;
    font-family: var(--lk-font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
    color: var(--lk-accent-text);
    margin-bottom: 18px;
}
.modul_lekcja_tytul,
.modul_lekcja_tytul a,
.modul_lekcja_tytul a:hover {
    font-family: var(--lk-font) !important;
    font-size: 19.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--lk-fg) !important;
}
.modul_lekcja_tytul a::after {
    color: var(--lk-subtle);
    right: 26px;
    bottom: 22px;
    transition: color 0.4s ease;
}
.modul_lekcja:hover .modul_lekcja_tytul a::after {
    color: var(--lk-accent-text);
}
.modul_lekcja_opis {
    font-family: var(--lk-font);
    font-weight: 300;
    color: var(--lk-subtle);
}
.modul_lekcja.lek_niedostepna .modul_lekcja_tytul,
.modul_lekcja.lek_niedostepna .modul_lekcja_opis {
    color: var(--lk-subtle) !important;
}

/* --- przyciski lekcji --- */
#toggleSidebar,
#expandSidebar {
    width: auto !important;
    background: transparent !important;
    color: var(--lk-fg) !important;
    border: 1px solid var(--lk-fg) !important;
    border-radius: 2px !important;
    padding: 10px 18px !important;
    margin-bottom: 22px !important;
    font-family: var(--lk-font) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}
#toggleSidebar:hover,
#expandSidebar:hover {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
}
#expandSidebar {
    background: var(--lk-bg) !important;
}
.lekcja_nast_pop {
    background: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
    border-radius: 2px !important;
}
.lekcja_nast_pop:hover,
.lekcja_nast_pop:focus {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
}
.lekcja_nast_pop.lekcja_pop {
    background: transparent !important;
    color: var(--lk-fg) !important;
    box-shadow: inset 0 0 0 1px var(--lk-fg) !important;
}
.lekcja_nast_pop.lekcja_pop:hover {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
}
@media (min-width: 1131px) {
    .lekcja_nast_pop {
        font-family: var(--lk-font) !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        padding: 12px 22px !important;
    }
}

/* --- treść lekcji (lekcje HTML kursu) --- */
.html-from-git:has(.jc-lesson) {
    background: none !important;
}
.jc-lesson {
    --jc-ink: var(--lk-muted);
    --jc-head: var(--lk-fg);
    --jc-light: var(--lk-panel);
    --jc-line: var(--lk-border);
    --jc-muted: var(--lk-subtle);
    --jc-mustard-ink: var(--lk-accent-text);
    --jc-code-bg: var(--lk-code);
    --jc-code-ink: var(--lk-code-fg);
    font-family: var(--lk-font) !important;
    font-weight: 300;
    font-size: 18px !important;
    color: var(--lk-muted) !important;
    max-width: none !important;
}
.jc-lesson p,
.jc-lesson li {
    color: var(--lk-muted);
}
.jc-lesson strong {
    color: var(--lk-fg);
    font-weight: 500;
}
.jc-header {
    background: none !important;
    padding: 0 0 26px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--lk-divider);
    margin-bottom: 28px;
}
.jc-header .jc-kicker {
    font-family: var(--lk-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    color: var(--lk-accent-text) !important;
}
.jc-header .jc-goal {
    color: var(--lk-fg) !important;
    font-size: 21.5px !important;
    line-height: 1.5 !important;
    font-weight: 300;
}
.jc-header .jc-meta li {
    background: none !important;
    border: 1px solid var(--lk-divider) !important;
    color: var(--lk-muted) !important;
    border-radius: 2px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px !important;
}
.jc-header .jc-meta li.jc-johnny {
    border-color: var(--lk-accent) !important;
    color: var(--lk-accent-text) !important;
}
.skill-up-class.jc-lesson h2 {
    font-family: var(--lk-font) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    color: var(--lk-fg) !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--lk-divider) !important;
    margin: 48px 0 22px !important;
}
.jc-lesson h3 {
    font-family: var(--lk-font);
    font-weight: 500;
    color: var(--lk-fg);
}
.jc-needs,
.jc-callout,
.jc-lesson details,
.jc-answer,
.jc-checklist {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 16px !important;
    color: var(--lk-muted) !important;
}
.jc-callout-label,
.jc-block-label {
    letter-spacing: 0.18em !important;
    font-weight: 400 !important;
    color: var(--lk-accent-text) !important;
}
.jc-lesson pre,
.jc-prompt pre {
    background: var(--lk-code) !important;
    color: var(--lk-code-fg) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 12px !important;
}
.jc-lesson code:not(pre code) {
    background: var(--lk-panel) !important;
    color: var(--lk-fg) !important;
    border: 1px solid var(--lk-border);
}
.jc-steps > li::before {
    background: transparent !important;
    color: var(--lk-accent-text) !important;
    border: 1px solid var(--lk-accent) !important;
    font-family: var(--lk-font) !important;
    font-weight: 500 !important;
}
.jc-lesson summary {
    color: var(--lk-fg);
}

/* --- notatki pod lekcją --- */
.tab ul li {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--lk-accent) !important;
    border-radius: 0 !important;
    min-width: 0 !important;
}
.tab ul li p,
.tab ul li.active p {
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-fg) !important;
}
.tab:after {
    background: var(--lk-divider) !important;
}
.tab_cont h3 {
    font-family: var(--lk-font);
    font-weight: 500;
    color: var(--lk-fg);
}
.tab_cont textarea,
form input,
form textarea,
form select {
    background: var(--lk-panel);
    color: var(--lk-fg);
    border-color: var(--lk-divider);
    border-radius: 2px;
    font-family: var(--lk-font);
}

/* --- formularze i zwykłe przyciski platformy --- */
form input[type="submit"],
form button[type="submit"],
.tab_cont button,
.cookie-bar-v3 .cookie-bar .button {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
    border: 1px solid var(--lk-fg) !important;
    border-radius: 2px !important;
    font-family: var(--lk-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
form input[type="submit"]:hover,
form button[type="submit"]:hover,
.tab_cont button:hover,
.cookie-bar-v3 .cookie-bar .button:hover {
    background: var(--lk-accent) !important;
    border-color: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
}

/* --- stopka --- */
#stopka {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#stopka,
#stopka a,
#stopka span,
#stopka p {
    font-family: var(--lk-font) !important;
}

/* --- pasek postępu --- */
.postep_contenter {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border);
}
.postep_contenter_postep {
    background: var(--lk-accent) !important;
}
.postep_liczba {
    color: var(--lk-accent-ink) !important;
}

/* --- plakietka ceny na kafelku produktu: grafitowy tekst na musztardzie (biały był nieczytelny) --- */
.glowna_box_cena p {
    color: var(--lk-accent-ink) !important;
}

/* ==========================================================================
   STRONY (02.10.2026) — klocki stron publicznych: główna, „To ja”, opisy szkoleń
   Pliki stron w repo (Podstrony/, Opisy szkolen/) nie mają już własnych <style>:
   niosą tylko treść z klasami sk-*, a wygląd jest tutaj. Oba motywy przez tokeny --lk-*.
   ========================================================================== */
.sk-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    font-family: var(--lk-font);
    font-weight: 300;
    color: var(--lk-muted);
    font-size: 17px;
    line-height: 1.6;
}
.sk-page * {
    box-sizing: border-box;
}
.sk-page p {
    margin: 0 0 14px;
    color: var(--lk-muted);
}
.sk-page a {
    color: var(--lk-accent-text);
}
.sk-page a:hover {
    color: var(--lk-fg);
}
.sk-page strong {
    color: var(--lk-fg);
    font-weight: 500;
}
.html-from-git:has(.sk-page) {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* strony opisów szkoleń: Publigo drukuje nad treścią nazwę produktu (h2 w .contenter_tresci),
   chowamy ją, bo tytuł jest w treści strony */
.single-download .contenter_tresci > h2:first-child,
.single-download h1.wpi-page-title,
.single-download .wpi-course-banner {
    display: none !important;
}
.single-download .contenter_tresci {
    padding-top: 28px;
}
/* okruszki nad „To ja” */
.breadcrumbs ul li,
.breadcrumbs ul li a {
    font-family: var(--lk-font);
    font-size: 11.5px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle) !important;
}

/* --- etykiety i nagłówki --- */
.sk-eyebrow {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 0 0 18px;
}
.sk-eyebrow .sk-tag {
    margin-left: 10px;
    vertical-align: middle;
}
.sk-page h1,
.sk-page .sk-h1 {
    font-family: var(--lk-font) !important;
    font-weight: 400 !important;
    font-size: clamp(32px, 4.2vw, 54px) !important;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--lk-fg);
    margin: 0 0 22px;
}
.sk-page h1 em,
.sk-page .sk-h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--lk-subtle);
}
.sk-lead {
    font-size: 19px;
    line-height: 1.6;
    max-width: 820px;
    color: var(--lk-muted);
    margin: 0 0 36px;
}
.sk-section {
    margin: 64px 0 0;
}
.sk-section-title {
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: clamp(20px, 1.9vw, 25px);
    letter-spacing: 0.005em;
    color: var(--lk-fg);
    margin: 0 0 24px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--lk-divider);
}
.sk-note {
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 18px 0 0;
}

/* --- plakietka i tagi --- */
.sk-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 2px;
    background: var(--lk-accent);
    color: var(--lk-accent-ink);
    vertical-align: middle;
}
.sk-tag--outline {
    background: transparent;
    color: var(--lk-muted);
    border: 1px solid var(--lk-divider);
    padding: 5px 9px;
}

/* --- przyciski (selektory z .sk-page, żeby wygrać z .sk-page a) --- */
.sk-page .sk-btn,
.sk-btn {
    display: inline-block;
    padding: 13px 26px;
    border: 1px solid var(--lk-fg);
    border-radius: 2px;
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--lk-fg);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sk-page .sk-btn:hover,
.sk-btn:hover {
    background: var(--lk-fg);
    color: var(--lk-bg);
    text-decoration: none;
}
.sk-page .sk-btn--primary,
.sk-btn--primary {
    background: var(--lk-accent);
    border-color: var(--lk-accent);
    color: var(--lk-accent-ink);
}
.sk-page .sk-btn--primary:hover,
.sk-btn--primary:hover {
    background: var(--lk-fg);
    border-color: var(--lk-fg);
    color: var(--lk-bg);
}
.sk-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.sk-btn-row .sk-muted {
    font-size: 13px;
    color: var(--lk-subtle);
}

/* --- panel --- */
.sk-panel {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 36px);
}
a.sk-panel {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.4s ease;
}
a.sk-panel:hover {
    border-color: var(--lk-accent);
    color: inherit;
}

/* --- pasek faktów --- */
.sk-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--lk-border);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.sk-facts li {
    background: var(--lk-panel);
    padding: 22px 24px;
    margin: 0;
}
.sk-facts .sk-fact-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin-bottom: 8px;
}
.sk-facts .sk-fact-value {
    display: block;
    font-size: 19px;
    font-weight: 400;
    color: var(--lk-fg);
    line-height: 1.3;
}

/* --- listy --- */
.sk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sk-list li {
    position: relative;
    padding: 0 0 0 26px;
    margin: 0 0 12px;
    color: var(--lk-muted);
}
.sk-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lk-subtle);
}
.sk-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.sk-two-col .sk-section-title {
    margin-top: 0;
}

/* --- siatka paneli (czego się nauczysz, dlaczego warto) --- */
.sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    counter-reset: sk;
}
.sk-grid .sk-panel {
    counter-increment: sk;
    padding: 26px 26px 28px;
}
.sk-grid .sk-panel::before {
    content: counter(sk, decimal-leading-zero);
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--lk-accent-text);
    margin-bottom: 16px;
}
.sk-grid h3 {
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    color: var(--lk-fg);
    margin: 0 0 10px;
}
.sk-grid p {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0;
    color: var(--lk-muted);
}

/* --- agenda --- */
.sk-agenda {
    border-top: 1px solid var(--lk-divider);
    margin: 0;
}
.sk-agenda details {
    border-bottom: 1px solid var(--lk-divider);
}
.sk-agenda summary {
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: 3.4rem 1fr auto;
    gap: 16px;
    align-items: baseline;
    padding: 20px 0;
    font-size: clamp(16px, 1.3vw, 18.5px);
    font-weight: 400;
    color: var(--lk-fg);
}
.sk-agenda summary::-webkit-details-marker {
    display: none;
}
.sk-agenda summary .sk-num {
    font-size: 11.5px;
    letter-spacing: 0.18em;
    color: var(--lk-subtle);
}
.sk-agenda summary::after {
    content: "+";
    font-size: 18px;
    font-weight: 300;
    color: var(--lk-subtle);
    transition: transform 0.3s ease;
}
.sk-agenda details[open] summary::after {
    transform: rotate(45deg);
}
.sk-agenda details[open] summary {
    color: var(--lk-accent-text);
}
.sk-agenda .sk-list {
    padding: 0 0 22px 3.4rem;
    margin: 0;
}
.sk-agenda .sk-list li {
    margin-bottom: 10px;
    font-size: 16px;
}
.sk-agenda .sk-tag {
    margin-left: 8px;
    font-size: 9.5px;
    padding: 4px 7px;
    background: transparent;
    color: var(--lk-accent-text);
    border: 1px solid var(--lk-accent);
}

/* --- instruktor / „To ja” --- */
.sk-person {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 36px;
    align-items: start;
}
.sk-person img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
    transition: filter 0.6s ease;
}
.sk-person:hover img {
    filter: none;
}
.sk-person h2,
.sk-person h3 {
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: 24px;
    color: var(--lk-fg);
    margin: 0 0 6px;
}
.sk-person .sk-role {
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-accent-text);
    margin: 0 0 18px;
}
.sk-person .sk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.sk-person p:last-child {
    margin-bottom: 0;
}

/* --- cytat (misja) --- */
.sk-quote {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--lk-fg);
    max-width: 860px;
    margin: 0;
}
.sk-quote::before {
    content: "\201E";
    color: var(--lk-accent-text);
}
.sk-quote::after {
    content: "\201D";
    color: var(--lk-accent-text);
}

/* --- CTA (zapisz się / zamów) --- */
.sk-cta {
    text-align: left;
}
.sk-cta .sk-section-title {
    border: none;
    padding: 0;
    margin: 0 0 10px;
}
.sk-cta p {
    max-width: 720px;
}
.sk-cta .sk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

/* --- linki społecznościowe („To ja”) --- */
.sk-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- strona główna: hero z cytatem --- */
.sk-hero {
    padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
    max-width: 920px;
}
.sk-hero .sk-h1 {
    font-weight: 300;
    font-size: clamp(30px, 3.9vw, 50px);
}
.sk-hero .sk-cite {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 0 0 40px;
}
.sk-hero .sk-note {
    margin: 0;
}

/* --- strona główna: baner quizu --- */
.sk-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    margin: 40px 0 10px;
}
.sk-banner h2 {
    font-family: var(--lk-font);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    letter-spacing: 0.005em;
    color: var(--lk-fg);
    margin: 14px 0 10px;
}
.sk-banner h2 strong {
    font-weight: 500;
    color: var(--lk-accent-text);
}
.sk-banner p {
    max-width: 640px;
    margin: 0;
}
.sk-banner .sk-btn-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* --- kafle produktów Publigo na stronie głównej --- */
html:root {
    --main-box-border-color: var(--lk-border);
}
.widok {
    padding: 10px 0 24px;
}
.widok p,
.opcje_widoku .fa {
    font-family: var(--lk-font);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle);
}
.glowna_boxy .row > div > div {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.4s ease;
}
.glowna_boxy .row > div > div:hover {
    border-color: var(--lk-accent);
}
.glowna_boxy .box_glowna_zdjecie img,
.glowna_boxy img.wpi-lazy-image {
    display: block;
    width: 100%;
}
#page .box_glowna_tytul h2 {
    font-family: var(--lk-font);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.35;
    color: var(--lk-fg);
}
.box_glowna_opis,
.available_quantities_information {
    font-family: var(--lk-font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lk-subtle);
}
.glowna_box_cena,
.glowna_box_cena_dostepny,
.glowna_box_cena_promo {
    background: var(--lk-accent) !important;
    border-radius: 2px !important;
    height: auto !important;
}
.glowna_box_cena p,
.glowna_box_cena_dostepny p,
.glowna_box_cena_od,
.glowna_box_cena_cena,
.glowna_box_cena_waluta {
    color: var(--lk-accent-ink) !important;
    font-family: var(--lk-font) !important;
    letter-spacing: 0.08em;
}
.glowna_box_cena_promocyjna {
    background: var(--lk-fg) !important;
    border-radius: 2px !important;
}
.glowna_box_cena_promocyjna p {
    color: var(--lk-bg) !important;
}
.box_glowna_add_to_cart a,
.strona_kursu_sidebar .box_glowna_add_to_cart a,
.koszyk_form #edd-purchase-button,
.content_koszyk .edd_form #edd-purchase-button {
    background: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
    border-radius: 2px !important;
    font-family: var(--lk-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background 0.3s ease, color 0.3s ease;
}
.box_glowna_add_to_cart a:hover,
.strona_kursu_sidebar .box_glowna_add_to_cart a:hover,
.koszyk_form #edd-purchase-button:hover,
.content_koszyk .edd_form #edd-purchase-button:hover {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
}
.edd-sales-disabled .box_glowna_add_to_cart a,
.edd-sales-disabled .box_glowna_add_to_cart a:hover {
    background: transparent !important;
    color: var(--lk-subtle) !important;
    border: 1px solid var(--lk-divider);
    cursor: default;
}
.edd-sales-disabled .glowna_box_cena,
.edd-sales-disabled .glowna_box_cena_dostepny {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-divider);
}
.edd-sales-disabled .glowna_box_cena p,
.edd-sales-disabled .glowna_box_cena_dostepny p {
    color: var(--lk-subtle) !important;
}

/* --- ramka zamówienia pod opisem szkolenia --- */
.strona_kursu_sidebar,
.wpi-template .strona_kursu_sidebar {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 30px !important;
    max-width: 560px !important;
    margin: 0 auto 40px;
    float: none !important;
}
.strona_kursu_sidebar_tytul {
    font-family: var(--lk-font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lk-subtle) !important;
    margin-bottom: 14px !important;
}
.strona_kursu_sidebar .strona_kursu_sidebar_box p,
.strona_kursu_sidebar .strona_kursu_sidebar_box p span {
    font-family: var(--lk-font);
    color: var(--lk-muted) !important;
}

/* --- telefon --- */
@media (max-width: 782px) {
    .sk-page {
        padding: 0 18px;
    }
    .sk-facts {
        grid-template-columns: 1fr 1fr;
    }
    .sk-facts li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .sk-two-col {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sk-person {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .sk-person img {
        width: 120px;
        height: 120px;
    }
    .sk-banner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .sk-agenda summary {
        grid-template-columns: 2.6rem 1fr auto;
        gap: 12px;
    }
    .sk-agenda .sk-list {
        padding-left: 0;
    }
    .sk-section {
        margin-top: 48px;
    }
    .sk-facts li {
        padding: 16px 18px;
    }
    .strona_kursu_sidebar,
    .wpi-template .strona_kursu_sidebar {
        padding: 22px !important;
    }
}

/* ==========================================================================
   POPRAWKI MOTYWU 2.0 (03.10.2026): przełącznik motywu, „Moje konto”,
   rozwijane menu, licznik koszyka
   ========================================================================== */

/* --- przełącznik motywu (przycisk dodaje skillup-motyw.js w nagłówku) --- */
.lk-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--lk-head-fg);
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.lk-theme-toggle:hover {
    color: var(--lk-accent);
    border-color: var(--lk-accent);
}
.lk-theme-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
}
.lk-theme-toggle .lk-icon-sun { display: none; }
html.lk-dark .lk-theme-toggle .lk-icon-sun { display: block; }
html.lk-dark .lk-theme-toggle .lk-icon-moon { display: none; }
html.lk-dark {
    transition: background 0.4s ease;
}

/* --- rozwijane menu w nagłówku (Moje kursy, Panel kursu): ciemne jak pasek --- */
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu li ul li a {
    background: var(--lk-head) !important;
    color: var(--lk-head-fg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    font-family: var(--lk-font);
    font-size: 14px;
    font-weight: 300;
    width: 280px;
}
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu li ul li a:hover,
.publigo-main-menu-wrapper:not(.force-hamburger-menu) #menu li ul li:hover > a {
    background: #2a2a2a !important;
    color: var(--lk-accent) !important;
}
.publigo-main-menu-wrapper:not(.force-hamburger-menu) .sub-menu-scroll-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* --- licznik koszyka --- */
.koszyk .dymek {
    background: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
    font-family: var(--lk-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
}

/* --- Moje konto: zakładki po lewej (szablon: białe tło na sztywno) --- */
.tabbed-view__tabs-menu__tab-link {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 12px !important;
    transition: border-color 0.3s ease;
}
.tabbed-view__tabs-menu__tab-link:hover {
    border-color: var(--lk-accent) !important;
}
.tabbed-view__tabs-menu__tab-link__title,
.tabbed-view__tabs-menu__tab-link:hover .tabbed-view__tabs-menu__tab-link__title {
    color: var(--lk-fg) !important;
    font-family: var(--lk-font);
    font-weight: 400;
}
.tabbed-view__tabs-menu__tab-link--active {
    border-color: var(--lk-accent) !important;
}
.tabbed-view__tabs-menu__tab-link--active .tabbed-view__tabs-menu__tab-link__title {
    color: var(--lk-accent-text) !important;
}
.tabbed-view__tabs-menu__tab-link--active::after {
    filter: grayscale(1) brightness(1.6);
}
h2.tabbed-view__tab-content__title {
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: 24px;
    color: var(--lk-fg) !important;
    border-bottom-color: var(--lk-divider) !important;
}
.tabbed-view__tab-content fieldset legend,
.tabbed-view__tab-content legend {
    color: var(--lk-fg) !important;
    font-family: var(--lk-font);
    font-weight: 400;
    border-bottom-color: var(--lk-divider) !important;
}
.tabbed-view__tab-content label {
    color: var(--lk-subtle) !important;
}
.bpmj_edd_info_message,
.content_koszyk .edd_empty_cart,
.edd-stripe-alert {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 12px !important;
}
.bpmj_edd_info_message__content,
.bpmj_edd_info_message__content p,
.bpmj_edd_info_message__content h2 {
    color: var(--lk-muted) !important;
}
.bpmj_edd_info_message__icon-wrap {
    color: var(--lk-accent-text) !important;
}
#edd_user_history th,
#edd_user_history td,
.content_koszyk table th,
.content_koszyk table td {
    color: var(--lk-muted);
    border-color: var(--lk-divider) !important;
    font-family: var(--lk-font);
}
#edd_user_history th,
.content_koszyk table th {
    color: var(--lk-fg);
    font-weight: 500;
}
.connect-mobile-app-info h2 {
    color: var(--lk-fg) !important;
}

/* ==========================================================================
   POPRAWKI 03.10 (2): portret, lekcje w markdownie i starsze lekcje HTML w obu motywach
   ========================================================================== */
:root {
    --lk-ok: #1e7e4f;
    --lk-err: #b8413b;
}
html.lk-dark {
    --lk-ok: #6cc497;
    --lk-err: #f29a94;
}

/* portret: zawsze czarno-biały (jak na lukado.eu), kadr z głową w całości */
.sk-person img,
.sk-person:hover img {
    filter: grayscale(1);
    object-position: 50% 12%;
    transition: none;
}

/* wrapper wtyczek: bez białej ramki w obu motywach */
.html-from-git,
#git-add-css {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* starsze lekcje (.skill-up-class bez .jc-lesson): nagłówki i tekst w tokenach motywu */
.skill-up-class {
    font-family: var(--lk-font) !important;
    color: var(--lk-muted);
}
.skill-up-class h2 {
    background: var(--lk-panel) !important;
    color: var(--lk-fg) !important;
    border: 1px solid var(--lk-border) !important;
    font-family: var(--lk-font) !important;
    font-weight: 500 !important;
}
.skill-up-class h3,
.skill-up-class h4,
.skill-up-class h5 {
    color: var(--lk-fg) !important;
    font-family: var(--lk-font) !important;
    font-weight: 500 !important;
    border-bottom-color: var(--lk-divider) !important;
}
.skill-up-class p,
.skill-up-class li,
.skill-up-class td {
    color: var(--lk-muted);
}

/* lekcje w markdownie (.markdown-body) */
.markdown-body {
    color: var(--lk-muted) !important;
    font-family: var(--lk-font) !important;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
}
.markdown-body a {
    color: var(--lk-accent-text) !important;
}
.markdown-body a:hover {
    color: var(--lk-fg) !important;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: var(--lk-fg) !important;
    font-family: var(--lk-font) !important;
    font-weight: 500 !important;
    border-bottom-color: var(--lk-divider) !important;
}
.markdown-body h1 {
    font-size: 30px;
    font-weight: 400 !important;
    letter-spacing: 0.005em;
}
.markdown-body .markdown-heading .anchor {
    display: none;
}
.markdown-body hr {
    background-color: var(--lk-divider) !important;
    border-bottom-color: var(--lk-divider) !important;
}
.markdown-body blockquote {
    color: var(--lk-subtle) !important;
    border-left-color: var(--lk-accent) !important;
}
.markdown-body table th,
.markdown-body table td {
    border-color: var(--lk-divider) !important;
}
.markdown-body table tr,
.markdown-body table tr:nth-child(2n) {
    background-color: var(--lk-panel) !important;
    border-top-color: var(--lk-divider) !important;
}
.markdown-body table th {
    background-color: var(--lk-bg) !important;
    color: var(--lk-fg) !important;
}
.markdown-body img {
    background-color: transparent !important;
    border-radius: 12px;
}
.markdown-body kbd {
    color: var(--lk-fg) !important;
    background-color: var(--lk-panel) !important;
    border-color: var(--lk-divider) !important;
    box-shadow: none !important;
}
.markdown-body code,
.markdown-body tt {
    background-color: var(--lk-panel) !important;
    color: var(--lk-fg) !important;
    border: 1px solid var(--lk-border);
}
.markdown-body pre,
.markdown-body .highlight pre {
    background-color: var(--lk-code) !important;
    color: var(--lk-code-fg) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 12px;
}
.markdown-body pre code,
.markdown-body pre tt {
    background-color: transparent !important;
    border: none;
    color: inherit !important;
}
.markdown-body .pl-c,
.markdown-body .pl-c span {
    color: var(--lk-subtle) !important;
}
.markdown-body .pl-k,
.markdown-body .pl-kos,
.markdown-body .pl-mc {
    color: var(--lk-accent-text) !important;
}
.markdown-body .pl-s,
.markdown-body .pl-pds,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre,
.markdown-body .pl-ent,
.markdown-body .pl-corl,
.markdown-body .pl-mi1 {
    color: var(--lk-ok) !important;
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v,
.markdown-body .pl-e,
.markdown-body .pl-en,
.markdown-body .pl-v,
.markdown-body .pl-smw,
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms,
.markdown-body .pl-ml,
.markdown-body .pl-mq {
    color: var(--lk-fg) !important;
}
.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1,
.markdown-body .pl-mi,
.markdown-body .pl-mb,
.markdown-body .pl-bu {
    color: var(--lk-muted) !important;
}
.markdown-body .pl-md,
.markdown-body .pl-ii,
.markdown-body .pl-c2 {
    color: var(--lk-err) !important;
    background-color: transparent !important;
}
.markdown-body .pl-mi1 {
    background-color: transparent !important;
}
.markdown-body .task-list-item input,
.markdown-body input[type="checkbox"] {
    accent-color: var(--lk-accent);
}
div.markdown-github div.markdown-github-labels {
    background-color: var(--lk-panel) !important;
    color: var(--lk-subtle) !important;
    border: 1px solid var(--lk-border);
    border-radius: 2px;
    font-family: var(--lk-font);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
div.markdown-github div.markdown-github-labels label.github-link a {
    color: var(--lk-accent-text) !important;
}
div.markdown-github label.github-last-update {
    color: var(--lk-subtle) !important;
}
/* przycisk kopiowania kodu (skill-up-code-copy) */
.skill-up-class .code-copy-button {
    background: var(--lk-panel) !important;
    color: var(--lk-subtle) !important;
    border: 1px solid var(--lk-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.skill-up-class .code-copy-button:hover {
    color: var(--lk-accent-text) !important;
    border-color: var(--lk-accent) !important;
}
.skill-up-class .code-copy-button.copied {
    color: var(--lk-ok) !important;
    border-color: var(--lk-ok) !important;
}

/* ==========================================================================
   CZAT ASYSTENTA (wtyczka wordpress-chatbot-agentcore) — lżejszy, w tokenach motywu
   Arkusz wtyczki ma kolory z !important i własny tryb ciemny, stąd „body” i !important.
   ========================================================================== */
body .chat-float-button {
    width: 56px !important;
    height: 56px !important;
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-divider) !important;
    color: var(--lk-accent-text) !important;
    box-shadow: none !important;
    font-size: 22px !important;
    transition: border-color 0.3s ease, color 0.3s ease !important;
}
body .chat-float-button:hover {
    border-color: var(--lk-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}
body .chat-container {
    background: var(--lk-bg) !important;
    border: 1px solid var(--lk-divider) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
    font-family: var(--lk-font) !important;
}
body .chat-header {
    background: var(--lk-bg) !important;
    color: var(--lk-fg) !important;
    border-bottom: 1px solid var(--lk-divider) !important;
    box-shadow: none !important;
}
body .chat-header .chat-title,
body .chat-header .chat-title span {
    font-family: var(--lk-font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--lk-fg) !important;
}
body .chat-header .icon,
body .chat-header .chat-action-button,
body .chat-header .chat-close-button {
    color: var(--lk-subtle) !important;
    background: transparent !important;
    border: none !important;
}
body .chat-header .chat-action-button:hover,
body .chat-header .chat-close-button:hover {
    color: var(--lk-accent-text) !important;
}
body .chat-messages {
    background: var(--lk-bg) !important;
}
body .chat-bubble {
    font-family: var(--lk-font) !important;
    font-weight: 300 !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
body .chat-bubble.answer {
    background: var(--lk-panel) !important;
    border: 1px solid var(--lk-border) !important;
    color: var(--lk-muted) !important;
}
body .chat-bubble.answer p,
body .chat-bubble.answer li,
body .chat-bubble.answer strong,
body .chat-bubble.answer h1,
body .chat-bubble.answer h2,
body .chat-bubble.answer h3 {
    color: var(--lk-muted) !important;
}
body .chat-bubble.answer strong,
body .chat-bubble.answer h1,
body .chat-bubble.answer h2,
body .chat-bubble.answer h3 {
    color: var(--lk-fg) !important;
    font-weight: 500 !important;
}
body .chat-bubble.question {
    background: transparent !important;
    border: 1px solid var(--lk-accent) !important;
    color: var(--lk-fg) !important;
}
body .chat-bubble.question p,
body .chat-bubble.question li,
body .chat-bubble.question strong,
body .chat-bubble.question a {
    color: var(--lk-fg) !important;
}
body .chat-bubble a {
    color: var(--lk-accent-text) !important;
}
body .chat-bubble .chat-avatar-icon,
body .chat-bubble.answer .chat-avatar-icon,
body .chat-bubble.question .chat-avatar-icon {
    color: var(--lk-accent-text) !important;
    background: transparent !important;
}
body .chat-bubble pre,
body .chat-bubble.question pre {
    background: var(--lk-code) !important;
    border: 1px solid var(--lk-border) !important;
    color: var(--lk-code-fg) !important;
}
body .chat-bubble code,
body .chat-bubble pre code,
body .chat-bubble.question code {
    color: var(--lk-code-fg) !important;
    background: var(--lk-code) !important;
}
body .chat-input-container {
    background: var(--lk-bg) !important;
    border-top: 1px solid var(--lk-divider) !important;
}
body .chat-input {
    background: var(--lk-panel) !important;
    color: var(--lk-fg) !important;
    border: 1px solid var(--lk-divider) !important;
    border-radius: 12px !important;
    font-family: var(--lk-font) !important;
    font-size: 15px !important;
    box-shadow: none !important;
}
body .chat-input::placeholder {
    color: var(--lk-subtle) !important;
}
body .chat-input:focus {
    border-color: var(--lk-accent) !important;
    box-shadow: none !important;
    background: var(--lk-panel) !important;
}
body .send-button {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    background: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 15px !important;
}
body .send-button:hover {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
    box-shadow: none !important;
    transform: none !important;
}
body .send-button:disabled {
    background: var(--lk-divider) !important;
    color: var(--lk-subtle) !important;
}
body .typing-dot {
    background: var(--lk-accent) !important;
}
body .loading-bubble:after {
    border-top-color: var(--lk-accent) !important;
}
body .chat-system-notice {
    background: transparent !important;
    border: 1px solid var(--lk-divider) !important;
    color: var(--lk-subtle) !important;
    font-family: var(--lk-font) !important;
    font-size: 12px !important;
}
body .chat-messages::-webkit-scrollbar-thumb {
    background: var(--lk-divider) !important;
}

/* --- strona główna: hero z cytatem, więcej powietrza (03.10) --- */
.sk-hero {
    max-width: 1040px;
    padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
    margin-bottom: 24px;
    border-bottom: 1px solid var(--lk-divider);
}
.sk-hero .sk-eyebrow {
    margin-bottom: 28px;
}
.sk-hero .sk-h1 {
    font-size: clamp(34px, 4.8vw, 66px);
    line-height: 1.1;
    margin-bottom: 26px;
}
.sk-hero .sk-cite {
    margin-bottom: 56px;
}
.sk-hero .sk-note {
    font-size: 13px;
}

/* --- hero na całą szerokość: przyciski i pasek faktów pod cytatem (03.10) --- */
.sk-hero {
    max-width: none;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: clamp(24px, 4vw, 48px);
}
.sk-hero .sk-h1 {
    max-width: 1120px;
}
.sk-hero .sk-cite {
    margin-bottom: 34px;
}
.sk-hero .sk-btn-row {
    margin: 0 0 48px;
}
.sk-hero .sk-facts {
    margin: 0;
}
/* kotwica przycisku „Wybierz szkolenie lub kurs” — lista kursów Publigo */
.glowna_boxy {
    scroll-margin-top: 90px;
}

/* --- hero: cytat z większym światłem między wierszami i literami (03.10) --- */
.sk-hero .sk-h1 {
    line-height: 1.28 !important;
    letter-spacing: 0.01em !important;
    word-spacing: 0.04em;
}
.sk-hero .sk-btn-row {
    margin-bottom: 8px;
}

/* ==========================================================================
   POPRAWKI 03.10 (3): strzałki w pasku postępu, przełącznik motywu, przycisk czatu
   ========================================================================== */
/* strzałki poprzednia/następna w pasku postępu (szablon: biały kwadrat z białą ikoną) */
.lekcja_top_nav__item {
    background: transparent !important;
    border: 1px solid var(--lk-divider) !important;
    border-radius: 6px !important;
    text-indent: 0 !important;
    font-size: 0 !important;
    color: var(--lk-fg) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    margin-left: 6px;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.lekcja_top_nav__item i {
    font-size: 14px !important;
    line-height: 1;
    color: var(--lk-fg) !important;
}
.lekcja_top_nav__item:hover {
    border-color: var(--lk-accent) !important;
}
.lekcja_top_nav__item:hover i {
    color: var(--lk-accent-text) !important;
}

/* przełącznik motywu: bez obramowania, w rozmiarze ikon koszyka i lupy */
.lk-theme-toggle {
    width: 34px !important;
    height: 34px !important;
    margin-left: 2px !important;
    border: none !important;
    color: var(--lk-head-fg) !important;
}
.lk-theme-toggle svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2 !important;
}
.lk-theme-toggle:hover {
    color: var(--lk-accent) !important;
}

/* przycisk czatu: przezroczyste tło, grubsza musztardowa ramka, większa chmurka */
body .chat-float-button {
    width: 60px !important;
    height: 60px !important;
    background: transparent !important;
    border: 2px solid var(--lk-accent) !important;
    color: var(--lk-accent) !important;
    font-size: 28px !important;
}
body .chat-float-button:hover {
    background: var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
}
body .chat-float-button .fa-comment,
body .chat-float-button .fas {
    font-size: 28px !important;
    line-height: 1 !important;
}


/* =====================================================================
   POPRAWKI 4 (03.10.2026, Tim): przycisk kopiowania, strzałki w pasku
   lekcji, checkbox „Ukończone”, kropki na przycisku czatu
   ===================================================================== */

/* --- przycisk „kopiuj” w blokach kodu: dyskretny, bez wypełnienia --- */
.skill-up-class .code-copy-button {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    color: var(--lk-subtle) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.skill-up-class .code-copy-button svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 1.75 !important;
}
.skill-up-class pre:hover .code-copy-button,
.skill-up-class .code-copy-button:focus-visible {
    opacity: 1;
}
.skill-up-class .code-copy-button:hover {
    background: transparent !important;
    color: var(--lk-accent-text) !important;
    border-color: var(--lk-accent) !important;
    opacity: 1;
}
.skill-up-class .code-copy-button.copied {
    background: transparent !important;
    color: var(--lk-ok) !important;
    border-color: var(--lk-ok) !important;
    opacity: 1;
}
.skill-up-class pre code {
    padding-right: 40px !important;
}

/* --- strzałki poprzednia/następna: szersze, własny chevron zamiast caret --- */
.lekcja_top_nav {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    margin-left: 12px;
}
.lekcja_top_nav__item {
    width: 40px !important;
    height: 28px !important;
    margin: 0 !important;
    float: none !important;
    position: relative;
}
.lekcja_top_nav__item i {
    display: none !important;
}
.lekcja_top_nav__item::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: -3px;
}
.lekcja_top_nav__item--prev::after {
    transform: rotate(-135deg);
    margin-left: 3px;
}
.lekcja_top_nav__item:hover::after {
    color: var(--lk-accent-text);
}

/* --- checkbox „Ukończone”: ptaszek wyśrodkowany --- */
.ukonczony_material {
    display: inline-flex !important;
    align-items: center !important;
}
.ukonczony_material input[type="checkbox"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 4px !important;
    background: var(--lk-panel) !important;
    vertical-align: middle !important;
    cursor: pointer;
}
.ukonczony_material input[type="checkbox"]::before {
    font-size: 12px !important;
    line-height: 1 !important;
    position: static !important;
    margin: 0 !important;
    color: var(--lk-accent-text) !important;
}
.ukonczony_material input[type="checkbox"]:checked {
    border-color: var(--lk-accent) !important;
}
.ukonczony_material label {
    line-height: 20px !important;
    margin: 0 !important;
}

/* --- przycisk czatu: kropki widoczne na musztardowej chmurce --- */
body .chat-float-button .typing-dot {
    background: #ffffff !important;
}
html.lk-dark body .chat-float-button .typing-dot {
    background: var(--lk-bg) !important;
}
body .chat-float-button:hover .typing-dot,
html.lk-dark body .chat-float-button:hover .typing-dot {
    background: #ffffff !important;
}


/* =====================================================================
   SK-DOC (03.10.2026, Tim): dokumenty tekstowe — regulamin, polityka,
   inne długie strony. Węższa kolumna, spokojna typografia, oba motywy.
   ===================================================================== */
.sk-doc {
    max-width: 820px;
    padding-bottom: 48px;
}
.sk-doc .sk-lead {
    margin-bottom: 18px;
}
.sk-doc-meta {
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 0 0 40px !important;
}
.sk-doc-part {
    font-family: var(--lk-font);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: 0.005em;
    line-height: 1.2;
    color: var(--lk-fg);
    margin: 72px 0 36px;
    padding: 28px 0 0;
    border-top: 1px solid var(--lk-divider);
}
.sk-doc-part:first-of-type {
    margin-top: 24px;
}
.sk-doc-part .sk-eyebrow {
    margin-bottom: 10px;
}
.sk-doc .sk-section-title {
    margin-top: 48px;
    font-size: clamp(19px, 1.7vw, 22px);
}
.sk-doc h3,
.sk-doc h4 {
    font-family: var(--lk-font);
    font-weight: 500;
    color: var(--lk-fg);
    line-height: 1.3;
    margin: 28px 0 12px;
}
.sk-doc h3 {
    font-size: 18px;
}
.sk-doc h4 {
    font-size: 15.5px;
}
.sk-doc p,
.sk-doc li {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--lk-muted);
}
.sk-doc ul,
.sk-doc ol {
    margin: 0 0 18px;
    padding-left: 26px;
}
.sk-doc ul li,
.sk-doc ol li {
    margin: 0 0 8px;
}
.sk-doc ul {
    list-style: none;
    padding-left: 0;
}
.sk-doc ul > li {
    position: relative;
    padding-left: 24px;
}
.sk-doc ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lk-subtle);
}
.sk-doc ol {
    list-style: none;
    counter-reset: sk-ol;
    padding-left: 0;
}
.sk-doc ol > li {
    position: relative;
    padding-left: 34px;
    counter-increment: sk-ol;
}
.sk-doc ol > li::before {
    content: counter(sk-ol) ".";
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--lk-accent-text);
}
.sk-doc li > ul,
.sk-doc li > ol {
    margin: 10px 0 4px;
}
.sk-doc li > ul > li {
    font-size: 15.5px;
}

/* definicje */
.sk-doc-defs {
    margin: 0 0 24px;
}
.sk-doc-def {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--lk-divider);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--lk-muted);
}
.sk-doc-def:last-child {
    border-bottom: 1px solid var(--lk-divider);
}
.sk-doc-term {
    font-weight: 500;
    color: var(--lk-fg);
}

/* kroki procesu: numer jak w agendzie */
.sk-doc ol.sk-doc-steps {
    counter-reset: sk-step;
    margin: 0 0 24px;
}
.sk-doc ol.sk-doc-steps > li {
    counter-increment: sk-step;
    padding-left: 48px;
    margin: 0 0 10px;
}
.sk-doc ol.sk-doc-steps > li::before {
    content: counter(sk-step, decimal-leading-zero);
    top: 2px;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--lk-accent-text);
}

/* wyróżnienie, notka końcowa, kontakt */
.sk-doc .sk-doc-note {
    padding: 20px 24px;
    border-left: 3px solid var(--lk-accent);
    border-radius: 0 12px 12px 0;
    margin: 0 0 24px;
    font-size: 15.5px;
    line-height: 1.6;
}
.sk-doc-final {
    margin: 36px 0 0 !important;
    font-size: 15px !important;
    color: var(--lk-subtle) !important;
}
.sk-doc .sk-doc-contact {
    margin-top: 40px;
}
.sk-doc .sk-doc-contact h3 {
    margin-top: 0;
}
.sk-doc .sk-doc-contact .sk-list {
    margin: 0;
}
.sk-doc .sk-doc-contact .sk-list li {
    margin-bottom: 6px;
}
@media (max-width: 640px) {
    .sk-doc-def {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* podstrony WP z własnym h1 w treści (To ja, regulamin): chowamy mały tytuł motywu nad okruszkami,
   żeby nie było dwóch nagłówków; okruszki zostają */
.page .contenter:has(.sk-page > h1) > h1 {
    display: none !important;
}
.page .contenter:has(.sk-page > h1) > .breadcrumbs {
    margin-top: 26px;
}


/* =====================================================================
   KURS „WPROWADZENIE DO GENAI NA AWS” (03.10.2026, Tim)
   Lekcje w Material/IntroGenAI/ są przepisane na szablon kursu Johnny Cloud
   (klasy jc-*, patrz sekcja „treść lekcji” wyżej). Tu tylko klocki, których
   szablon Johnny'ego nie ma: siatka kart, lista „Do zapamiętania”, ilustracja
   SVG, wiersz ceny, przycisk w treści oraz quiz.
   ===================================================================== */

/* --- siatka kart --- */
.jc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 1.2em 0;
}
.jc-card {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 0;
}
.jc-card h4,
.jc-lesson h4 {
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.35;
    color: var(--lk-fg);
    margin: 0 0 8px;
}
.jc-lesson h4 {
    margin-top: 1.4em;
}
.jc-card h4 img {
    height: 1.4em;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 0;
}
.jc-card p {
    margin: 0 0 8px;
    font-size: 16px;
}
.jc-card p:last-child,
.jc-card ul:last-child {
    margin-bottom: 0;
}
.jc-card ul {
    margin: 6px 0 0;
    padding-left: 20px;
}
.jc-card li {
    font-size: 16px;
    margin: 0 0 4px;
}
.jc-card-sub {
    color: var(--lk-subtle) !important;
    font-size: 15px !important;
}
.jc-card-num {
    font-family: var(--lk-font);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    color: var(--lk-accent-text);
    margin: 0 0 6px !important;
}
.jc-card details {
    margin: 10px 0 0;
}
.jc-card details > summary {
    font-size: 15px;
}

/* --- „Do zapamiętania” --- */
.jc-takeaways {
    list-style: none;
    margin: 1em 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.jc-takeaways li {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0;
}
.jc-takeaways li > strong {
    display: block;
    font-weight: 500;
    color: var(--lk-fg);
    margin: 0 0 6px;
}
.jc-takeaways li p {
    margin: 0;
    font-size: 16px;
}

/* --- ilustracja (SVG z lekcji) --- */
.jc-figure {
    margin: 1.2em 0;
    text-align: center;
}
.jc-figure svg {
    max-width: 100%;
    height: auto;
}
.jc-figure .jc-block-label {
    text-align: left;
    margin: 0 0 8px;
}

/* --- wiersz ceny (koszty Bedrock) --- */
.jc-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    margin: 0 !important;
    border-bottom: 1px solid var(--lk-border);
}
.jc-row:last-child {
    border-bottom: none;
}
.jc-price {
    color: var(--lk-accent-text);
    font-weight: 500;
    white-space: nowrap;
}

/* --- przycisk w treści --- */
.jc-lesson .jc-btn {
    display: inline-block;
    padding: 13px 26px;
    border: 1px solid var(--lk-fg);
    border-radius: 2px;
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--lk-fg) !important;
    text-decoration: none;
    margin: 6px 0 12px;
}
.jc-lesson .jc-btn:hover {
    background: var(--lk-fg);
    color: var(--lk-bg) !important;
}

/* --- drobiazgi w treści lekcji --- */
.jc-lesson .jc-callout ul,
.jc-lesson .jc-callout ol {
    margin: 6px 0 0;
    padding-left: 20px;
}
.jc-lesson .jc-callout li {
    margin: 0 0 4px;
}
.jc-lesson .jc-callout h4 {
    margin-top: 0.8em;
}
.jc-lesson .jc-callout h4:first-of-type {
    margin-top: 0;
}
.jc-lesson .jc-details-body > *:last-child {
    margin-bottom: 0;
}
.jc-lesson table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 15.5px;
}
.jc-lesson th {
    background: transparent !important;
    color: var(--lk-subtle) !important;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--lk-divider);
    white-space: nowrap;
}
.jc-lesson td {
    color: var(--lk-muted);
    padding: 12px;
    border: none;
    border-bottom: 1px solid var(--lk-border);
    vertical-align: top;
    word-break: normal;
    overflow-wrap: normal;
}
.jc-lesson td strong {
    color: var(--lk-fg);
}
.jc-lesson img {
    max-width: 100%;
    height: auto;
}
.jc-lesson .jc-trouble {
    margin: 1em 0;
}
.jc-lesson summary {
    font-weight: 500;
}

/* --- quiz (markup generuje skrypt w pliku quizu) --- */
.jc-quiz i.fas,
.jc-quiz i.far,
.jc-quiz i.fab {
    display: none !important;
}
.jc-quiz .quiz-section,
.jc-quiz .question-container,
.jc-quiz .results-section {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: clamp(22px, 3vw, 34px);
    margin: 0 0 22px;
}
.jc-quiz .quiz-section h2,
.jc-quiz .results-section h2 {
    margin-top: 0 !important;
}
.jc-quiz .quiz-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}
.jc-quiz .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--lk-divider);
    border-radius: 3px;
    overflow: hidden;
}
.jc-quiz .progress-fill {
    height: 100%;
    background: var(--lk-accent);
    transition: width 0.3s ease;
}
.jc-quiz .progress-text {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    margin: 12px 0 0;
}
.jc-quiz .quiz-btn,
.jc-quiz .restart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lk-accent);
    border: 1px solid var(--lk-accent);
    border-radius: 2px;
    color: var(--lk-accent-ink);
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 13px 22px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.jc-quiz .quiz-btn:hover,
.jc-quiz .restart-btn:hover {
    background: var(--lk-fg);
    border-color: var(--lk-fg);
    color: var(--lk-bg);
}
.jc-quiz .quiz-btn:disabled {
    background: transparent;
    border-color: var(--lk-divider);
    color: var(--lk-subtle);
    cursor: not-allowed;
}
.jc-quiz .question-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--lk-font);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.4;
    color: var(--lk-fg);
    margin: 0 0 14px;
}
.jc-quiz .question-number {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--lk-accent-text);
    flex: none;
}
.jc-quiz .question-text {
    font-size: 17px;
    color: var(--lk-muted);
    margin: 0 0 16px;
}
.jc-quiz .options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jc-quiz .option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lk-bg);
    border: 1px solid var(--lk-border);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--lk-muted);
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.jc-quiz .option:hover,
.jc-quiz .option.selected {
    border-color: var(--lk-accent);
}
.jc-quiz .option.correct {
    border-color: var(--lk-ok);
    color: var(--lk-fg);
}
.jc-quiz .option.incorrect {
    border-color: var(--lk-err);
    color: var(--lk-fg);
}
.jc-quiz .option-letter {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--lk-accent);
    color: var(--lk-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}
.jc-quiz .option.correct .option-letter {
    background: var(--lk-ok);
    border-color: var(--lk-ok);
    color: #fff;
}
.jc-quiz .option.incorrect .option-letter {
    background: var(--lk-err);
    border-color: var(--lk-err);
    color: #fff;
}
.jc-quiz .explanation {
    display: none;
    background: var(--lk-bg);
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 16px;
}
.jc-quiz .explanation.show {
    display: block;
}
.jc-quiz .explanation h4 {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-accent-text);
}
.jc-quiz .explanation p {
    margin: 0;
}
.jc-quiz .results-section {
    display: none;
    text-align: center;
}
.jc-quiz .results-section.show {
    display: block;
}
.jc-quiz .score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--lk-accent);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 400;
    color: var(--lk-fg);
}
.jc-quiz .score-circle.score-excellent {
    border-color: var(--lk-ok);
}
.jc-quiz .score-circle.score-poor {
    border-color: var(--lk-err);
}
.jc-quiz .results-section .jc-callout {
    text-align: left;
    margin-top: 20px;
}
.jc-quiz .lesson-link {
    display: inline-block;
    margin: 6px 8px 0 0;
    padding: 8px 14px;
    border: 1px solid var(--lk-divider);
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lk-fg) !important;
    text-decoration: none;
}
.jc-quiz .lesson-link:hover {
    border-color: var(--lk-accent);
    color: var(--lk-accent-text) !important;
}
.jc-quiz .restart-btn {
    margin-top: 20px;
}
@media (max-width: 782px) {
    .jc-quiz .quiz-navigation {
        flex-wrap: wrap;
    }
    .jc-quiz .progress-bar {
        order: 3;
        flex-basis: 100%;
    }
}

/* --- notatki pod lekcją: podgląd i pole edycji w tokenach (biały box był nieczytelny w ciemnym) --- */
.tab_notatki .note-content,
.tab_notatki textarea {
    background: var(--lk-panel) !important;
    color: var(--lk-muted) !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    font-family: var(--lk-font) !important;
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}
.tab_notatki textarea {
    color: var(--lk-fg) !important;
}
.tab_notatki textarea:focus {
    outline: none !important;
    border-color: var(--lk-accent) !important;
}
.tab_notatki .note-content ::selection,
.tab_notatki .note-content::selection {
    background: var(--lk-accent);
    color: var(--lk-accent-ink);
}

/* --- przełącznik widoku listy kursów („Widok”): ikony siatka 2x2 / siatka 3x3 / lista.
   Publigo używa nazw z Font Awesome 4 (fa-th-large, fa-th, fa-th-list), których FA6 na stronie
   nie ma, więc przyciski były puste. Rysujemy je jako maski SVG w kolorze tekstu — niezależnie
   od fontu ikon, w obu motywach. --- */
.view-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.view-mode p {
    font-family: var(--lk-font);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle) !important;
    margin: 0 8px 0 0 !important;
}
.view-mode .opcje_widoku {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 28px !important;
    margin: 0 !important;
    border: 1px solid var(--lk-divider) !important;
    border-radius: 6px !important;
    background: transparent !important;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.view-mode .opcje_widoku i {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 0 !important;
    background-color: var(--lk-fg) !important;
    -webkit-mask: var(--lk-ico) center / contain no-repeat;
    mask: var(--lk-ico) center / contain no-repeat;
}
.view-mode .opcje_widoku i::before {
    content: none !important;
}
.view-mode .opcje_widoku i.fa-th-large {
    --lk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0' y='0' width='6' height='6' rx='1'/%3E%3Crect x='8' y='0' width='6' height='6' rx='1'/%3E%3Crect x='0' y='8' width='6' height='6' rx='1'/%3E%3Crect x='8' y='8' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}
.view-mode .opcje_widoku i.fa-th {
    --lk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0' y='0' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='0' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='10.4' y='0' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='0' y='5.2' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='5.2' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='10.4' y='5.2' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='0' y='10.4' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='10.4' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='10.4' y='10.4' width='3.6' height='3.6' rx='.6'/%3E%3C/svg%3E");
}
.view-mode .opcje_widoku i.fa-th-list {
    --lk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0' y='0' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='0' width='8.8' height='3.6' rx='.6'/%3E%3Crect x='0' y='5.2' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='5.2' width='8.8' height='3.6' rx='.6'/%3E%3Crect x='0' y='10.4' width='3.6' height='3.6' rx='.6'/%3E%3Crect x='5.2' y='10.4' width='8.8' height='3.6' rx='.6'/%3E%3C/svg%3E");
}
.view-mode .opcje_widoku:hover,
.view-mode .opcje_widoku.active {
    border-color: var(--lk-accent) !important;
}
.view-mode .opcje_widoku.active i {
    background-color: var(--lk-accent-text) !important;
}

/* --- kafelki kursów: przy wyłączonej sprzedaży (formularz .edd-sales-disabled) nie pokazujemy
   ceny; plakietka „Darmowy” (.gratis) zostaje — decyzja Lukasza 07.10 --- */
.edd-sales-disabled .glowna_box_cena:not(:has(.gratis)) {
    display: none !important;
}

/* --- tabele w lekcjach na wąskich ekranach (07.10.2026, Tim) ---
   Nagłówki tabel mają white-space: nowrap, wersaliki i szeroki odstęp liter, więc na telefonie
   kilka kolumn rozpychało całą stronę w bok (także w starszych lekcjach, np. 1.1).
   Na wąskim ekranie nagłówki mogą się zawijać, a tabela, która mimo to się nie mieści,
   przewija się w poziomie w swoim obrębie, bez przesuwania całej strony. */
@media (max-width: 782px) {
    .jc-lesson table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14.5px;
    }
    .jc-lesson th {
        white-space: normal;
        letter-spacing: 0.08em;
        padding: 8px;
    }
    .jc-lesson td {
        padding: 10px 8px;
    }
}

/* --- quiz Modułu 5 kursu GenAI: listy rozwijane i pola wyboru (07.10.2026, Tim) ---
   Pytania „kolejność” i „dopasowanie” używają natywnych <select>, pytania z kilkoma odpowiedziami
   natywnych checkboxów. Bez tych reguł lista ma 13 px i ok. 19 px wysokości (za mały cel dotyku,
   iOS przybliża stronę przy polach poniżej 16 px), a odpowiedź po sprawdzeniu wygląda na klikalną. */
.jc-quiz select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    background-color: var(--lk-bg);
    border: 1px solid var(--lk-divider);
    border-radius: 2px;
    color: var(--lk-fg);
    font-family: var(--lk-font);
    font-size: 16px;
    line-height: 1.3;
}
.jc-quiz select:focus-visible {
    outline: 2px solid var(--lk-accent);
    outline-offset: 2px;
}
.jc-quiz .option input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--lk-accent);
}
.jc-quiz .option.locked {
    cursor: default;
}
.jc-quiz .option.locked:not(.correct):not(.incorrect):hover {
    border-color: var(--lk-border);
}


/* =====================================================================
   ODSTĘPY MIĘDZY ZNAKAMI (07.10.2026): Jost 300 w tekście ciągłym wyglądał
   na ściśnięty. Tekst dostaje lekki dodatni tracking (dziedziczony z body),
   nagłówki nie mają już ujemnego (zmienione w miejscu: 0 / 0.005em).
   Etykiety wersalikami mają własne, większe wartości — bez zmian.
   ===================================================================== */
:root {
    --lk-track: 0.02em;
}
body,
.jc-lesson,
.sk-page,
.markdown-body,
.skill-up-class {
    letter-spacing: var(--lk-track);
}
pre,
code,
kbd,
samp {
    letter-spacing: 0;
}

/* =====================================================================
   FISZKI „DO ZAPAMIĘTANIA” (07.10.2026): skillup-motyw.js zamienia listę
   .jc-takeaways w karuzelę — jedna fiszka naraz, przesuwanie palcem
   (scroll-snap), strzałki, kropki, klawisze ← →. Bez JS zostaje siatka kart.
   ===================================================================== */
.jc-flash {
    max-width: 720px;
    margin: 1.4em auto 2em;
}
.jc-flash-stage {
    position: relative;
    padding-bottom: 14px;
}
/* dwie „kartki pod spodem”: płaski znak stosu fiszek, bez cieni */
.jc-flash-stage::before,
.jc-flash-stage::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 24px;
    border: 1px solid var(--lk-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    background: var(--lk-panel);
}
.jc-flash-stage::after {
    left: 28px;
    right: 28px;
    bottom: 0;
}
.jc-takeaways.is-flash {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 16px;
    outline: none;
}
.jc-takeaways.is-flash::-webkit-scrollbar {
    display: none;
}
.jc-takeaways.is-flash:focus-visible {
    box-shadow: 0 0 0 2px var(--lk-accent);
}
.jc-takeaways.is-flash > li {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 30px 36px 34px;
    border-radius: 16px;
}
.jc-takeaways.is-flash > li::before {
    content: attr(data-flash);
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--lk-accent-text);
    margin: 0 0 14px;
}
.jc-takeaways.is-flash > li > strong {
    font-size: 21px;
    line-height: 1.3;
    margin: 0 0 10px;
}
.jc-takeaways.is-flash > li p {
    font-size: 17.5px;
    line-height: 1.6;
}
.jc-flash-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.jc-flash-btn {
    flex: none;
    width: 44px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--lk-divider);
    border-radius: 6px;
    color: var(--lk-fg);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.jc-flash-btn::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: -3px;
}
.jc-flash-btn--prev::after {
    transform: rotate(-135deg);
    margin-left: 3px;
}
.jc-flash-btn:hover,
.jc-flash-btn:focus-visible {
    border-color: var(--lk-accent);
    color: var(--lk-accent-text);
    outline: none;
}
.jc-flash-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.jc-flash-dot {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}
.jc-flash-dot::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lk-divider);
    transition: background 0.3s ease, transform 0.3s ease;
}
.jc-flash-dot.is-active::after {
    background: var(--lk-accent);
}
.jc-flash-dot:hover::after,
.jc-flash-dot:focus-visible::after {
    background: var(--lk-accent);
}
.jc-flash-dot:focus-visible {
    outline: 2px solid var(--lk-accent);
    outline-offset: 0;
    border-radius: 50%;
}
@media (max-width: 782px) {
    .jc-takeaways.is-flash > li {
        min-height: 200px;
        padding: 24px 22px 26px;
    }
    .jc-takeaways.is-flash > li > strong {
        font-size: 19px;
    }
    .jc-takeaways.is-flash > li p {
        font-size: 16.5px;
    }
}


/* --- diagramy z static/grafiki w lekcjach (08.10.2026): obraz na całą szerokość, zaokrąglony,
   kliknięcie otwiera pełną rozdzielczość --- */
.jc-figure a {
    display: block;
}
.jc-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--lk-border);
}

/* =====================================================================
   POPRAWKI LEKCJI (08.10.2026)
   ===================================================================== */
/* tabele: tekst w komórkach ciemniejszy i pełniejszy (był za jasny) */
.jc-lesson td,
.skill-up-class.jc-lesson td {
    color: var(--lk-muted) !important;
    font-weight: 400;
}
/* wzory w tabelach: zwykły tekst, bez ramki kodu i bez przycisku kopiowania */
.jc-formula {
    color: var(--lk-fg);
    font-weight: 400;
    white-space: normal;
}
.jc-lesson td .copy-inline-btn,
.jc-lesson td .inline-code-copy {
    display: none !important;
}
.jc-lesson td code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--lk-fg) !important;
}

/* zakładki (.jc-tabs) w Motywie 2.0: jak teczki z kartami. Aktywna zakładka to blok
   w kolorze panelu, z obwódką, połączony z panelem treści (wygląda jak jedna karta).
   Zakładki zawsze w jednym rzędzie; gdy się nie mieszczą, rząd przewija się w bok
   (skrypt dosuwa aktywną zakładkę do widoku), więc żadna nie trafia pod inną. */
.jc-tabs {
    margin: 1.4em 0;
}
.jc-tablist {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    z-index: 1;
    margin-bottom: -1px !important;
    border-bottom: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.jc-tablist::-webkit-scrollbar {
    display: none;
}
.jc-tablist.fade-r {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.jc-tablist.fade-l {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
    mask-image: linear-gradient(90deg, transparent, #000 56px);
}
.jc-tablist.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.jc-tablist button {
    flex: 0 0 auto;
    white-space: nowrap;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    padding: 11px 18px 12px !important;
    font-family: var(--lk-font) !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    color: var(--lk-subtle) !important;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.jc-tablist button:hover {
    color: var(--lk-fg) !important;
    background: color-mix(in srgb, var(--lk-panel) 45%, transparent) !important;
}
.jc-tablist button[aria-selected="true"] {
    color: var(--lk-fg) !important;
    background: var(--lk-panel) !important;
    border-color: var(--lk-border) !important;
    cursor: default;
}
.jc-tablist button:focus-visible {
    outline: 2px solid var(--lk-accent);
    outline-offset: -3px;
}
.jc-tabs.is-ready > .jc-tab {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 14px;
    padding: 22px 24px 22px !important;
}
/* pierwsza zakładka otwarta: lewy górny róg panelu prosty, żeby zakładka przechodziła w panel */
.jc-tabs.is-first-active > .jc-tab {
    border-top-left-radius: 0;
}
.jc-tab-term {
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-accent-text) !important;
    margin: 0 0 10px !important;
}
.jc-tab-logo img {
    height: 28px;
    width: auto;
    border-radius: 0;
}
.jc-tab > *:last-child {
    margin-bottom: 0;
}
@media (max-width: 782px) {
    .jc-tablist button {
        font-size: 14.5px !important;
        padding: 9px 13px 10px !important;
    }
    .jc-tabs.is-ready > .jc-tab {
        padding: 16px 16px 18px !important;
    }
}

/* wielkość tekstu lekcji: przyciski A− / A+ w pasku lekcji (skillup-motyw.js ustawia --lk-zoom);
   przy zwiniętej agendzie treść lekcji dodatkowo +10% */
.lesson .html-from-git,
.lesson #git-add-css {
    zoom: var(--lk-zoom, 1);
}
.lesson .wp-block-columns.sidebar-collapsed .html-from-git,
.lesson .wp-block-columns.sidebar-collapsed #git-add-css {
    zoom: calc(var(--lk-zoom, 1) * 1.1);
}
.lk-fontsize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
}
.lk-fontsize button {
    width: 34px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--lk-divider);
    border-radius: 6px;
    color: var(--lk-fg);
    font-family: var(--lk-font);
    font-weight: 500;
    line-height: 26px;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.lk-fontsize button:hover,
.lk-fontsize button:focus-visible {
    border-color: var(--lk-accent);
    color: var(--lk-accent-text);
    outline: none;
}
.lk-fontsize button:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: var(--lk-divider);
    color: var(--lk-fg);
}
.lk-fontsize .lk-fs-minus {
    font-size: 12px;
}
.lk-fontsize .lk-fs-plus {
    font-size: 16px;
}
@media (max-width: 600px) {
    .lk-fontsize {
        margin-right: 8px;
    }
}

/* =====================================================================
   KOLORY W LEKCJACH (08.10.2026, runda 2): kolor niesie znaczenie, nie dekorację.
   zielony = dobrze / zalety / „z”, czerwony = źle / pułapka / „bez”,
   niebieski = egzamin, musztarda = praktyka i przykłady (jak dotąd).
   Klasy: .jc-callout--good / --bad / --warn / --exam / --practice,
   .jc-tab[data-tone="good|bad"], .jc-compare (para obok siebie), .jc-flow (przepływ).
   ===================================================================== */
:root {
    --lk-ok-bg: rgba(30, 126, 79, 0.09);
    --lk-err-bg: rgba(184, 65, 59, 0.085);
    --lk-info: #2b67a8;
    --lk-info-bg: rgba(43, 103, 168, 0.085);
}
html.lk-dark {
    --lk-ok-bg: rgba(108, 196, 151, 0.08);
    --lk-err-bg: rgba(242, 154, 148, 0.08);
    --lk-info: #8db9ea;
    --lk-info-bg: rgba(141, 185, 234, 0.08);
}

/* ramki: cienka obwódka dookoła + etykieta w kolorze znaczenia (bez grubego paska z boku) */
.jc-callout--practice { --jc-tone: var(--lk-accent); }
.jc-callout--good     { --jc-tone: var(--lk-ok);   --jc-tint: var(--lk-ok-bg); }
.jc-callout--bad,
.jc-callout--warn     { --jc-tone: var(--lk-err);  --jc-tint: var(--lk-err-bg); }
.jc-callout--exam     { --jc-tone: var(--lk-info); --jc-tint: var(--lk-info-bg); }
.jc-callout--practice,
.jc-callout--good,
.jc-callout--bad,
.jc-callout--warn,
.jc-callout--exam {
    border: 1.5px solid color-mix(in srgb, var(--jc-tone) 70%, transparent) !important;
}
html.lk-dark .jc-callout--practice,
html.lk-dark .jc-callout--good,
html.lk-dark .jc-callout--bad,
html.lk-dark .jc-callout--warn,
html.lk-dark .jc-callout--exam {
    border-color: color-mix(in srgb, var(--jc-tone) 50%, transparent) !important;
}
.jc-callout--good,
.jc-callout--bad,
.jc-callout--warn,
.jc-callout--exam {
    background: linear-gradient(var(--jc-tint), var(--jc-tint)), var(--lk-panel) !important;
}
.jc-callout--good > .jc-callout-label  { color: var(--lk-ok) !important; }
.jc-callout--bad > .jc-callout-label,
.jc-callout--warn > .jc-callout-label  { color: var(--lk-err) !important; }
.jc-callout--exam > .jc-callout-label  { color: var(--lk-info) !important; }
.jc-callout--good > .jc-callout-label::before  { content: "✓  "; }
.jc-callout--bad > .jc-callout-label::before   { content: "✕  "; }
.jc-callout--warn > .jc-callout-label::before  { content: "!  "; font-weight: 600; }
.jc-callout--exam > .jc-callout-label::before  { content: "◆  "; }

/* para „źle / dobrze” obok siebie */
.jc-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 1.2em 0;
    align-items: stretch;
}
.jc-compare > .jc-callout {
    margin: 0 !important;
}
@media (max-width: 782px) {
    .jc-compare { grid-template-columns: 1fr; }
}

/* zakładki z kolorem znaczenia (np. „Bez MCP” / „Z MCP”) */
.jc-tablist button[data-tone]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 8px 1px 0;
    vertical-align: middle;
    background: var(--jc-tone);
}
.jc-tablist button[data-tone="good"],
.jc-tab[data-tone="good"] { --jc-tone: var(--lk-ok); --jc-tint: var(--lk-ok-bg); }
.jc-tablist button[data-tone="bad"],
.jc-tab[data-tone="bad"]  { --jc-tone: var(--lk-err); --jc-tint: var(--lk-err-bg); }
.jc-tablist button[data-tone][aria-selected="true"] {
    background: linear-gradient(var(--jc-tint), var(--jc-tint)), var(--lk-panel) !important;
    border-color: color-mix(in srgb, var(--jc-tone) 70%, transparent) !important;
    border-width: 1.5px !important;
}
.jc-tabs.is-ready > .jc-tab[data-tone] {
    background: linear-gradient(var(--jc-tint), var(--jc-tint)), var(--lk-panel);
    border: 1.5px solid color-mix(in srgb, var(--jc-tone) 70%, transparent);
}
.jc-tab[data-tone] > .jc-tab-term {
    color: var(--jc-tone) !important;
}

/* przepływ: kafelki ze strzałkami (ol) albo siatka kafelków (ul.jc-flow--many) */
.jc-flow {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 34px;
    margin: 16px 0 18px !important;
    padding: 0 !important;
}
.jc-flow > li {
    position: relative;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: var(--lk-panel);
    border: 1px solid var(--lk-divider);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--lk-muted);
}
.jc-flow > li::marker { content: none; }
.jc-flow > li > strong {
    display: block;
    color: var(--lk-fg);
    font-weight: 500;
}
ol.jc-flow > li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jc-tone, var(--lk-accent-text));
    font-weight: 500;
    font-size: 18px;
}
ul.jc-flow--many {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
@media (max-width: 782px) {
    ol.jc-flow {
        flex-direction: column;
        gap: 26px;
    }
    ol.jc-flow > li:not(:last-child)::after {
        content: "↓";
        right: auto;
        left: 22px;
        top: auto;
        bottom: -25px;
        transform: none;
    }
}

/* karta z „Więcej” otwieranym w okienku (skillup-motyw.js) */
.jc-card.has-more {
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.jc-card.has-more:hover {
    border-color: var(--lk-accent);
}
.jc-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 16px 7px 12px;
    background: transparent;
    border: 1px solid var(--lk-divider);
    border-radius: 999px;
    font-family: var(--lk-font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--lk-fg);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.jc-more::before {
    content: "+";
    color: var(--lk-accent-text);
    font-size: 18px;
    line-height: 1;
}
.jc-card.has-more:hover .jc-more,
.jc-more:focus-visible {
    border-color: var(--lk-accent);
    outline: none;
}

/* okienko: wjeżdża jak panele na lukado.eu (przejrzystość + rozmycie + lekkie powiększenie) */
html.jc-modal-open {
    overflow: hidden;
}
dialog.jc-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 48px);
    overflow: visible;
    color: var(--lk-muted);
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.97);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
dialog.jc-modal.is-open {
    opacity: 1;
    filter: blur(0);
    transform: none;
}
dialog.jc-modal::backdrop {
    background: rgba(18, 18, 18, 0);
    backdrop-filter: blur(0);
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
}
dialog.jc-modal.is-open::backdrop {
    background: rgba(18, 18, 18, 0.45);
    backdrop-filter: blur(4px);
}
.jc-modal-box {
    position: relative;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 38px 40px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    font-family: var(--lk-font);
    letter-spacing: var(--lk-track, 0.02em);
}
html.lk-dark .jc-modal-box {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.jc-modal-close {
    position: absolute;
    top: 22px;
    right: 24px;
    background: none;
    border: none;
    padding: 6px 2px;
    font-family: var(--lk-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    cursor: pointer;
}
.jc-modal-close:hover,
.jc-modal-close:focus-visible {
    color: var(--lk-fg);
    outline: none;
}
.jc-modal-eyebrow {
    margin: 0 90px 8px 0 !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-accent-text) !important;
}
h2.jc-modal-title {
    margin: 0 90px 22px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    font-family: var(--lk-font) !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.25;
    color: var(--lk-fg) !important;
}
.jc-modal-body.jc-lesson {
    font-size: 17px !important;
    zoom: var(--lk-zoom, 1);
}
.jc-modal-box:focus {
    outline: none;
}
/* przyciski kopiowania skopiowane z treści lekcji nie działają w okienku */
.jc-modal .copy-inline-btn,
.jc-modal .inline-code-copy {
    display: none !important;
}
.jc-modal-body > *:first-child { margin-top: 0 !important; }
.jc-modal-body > *:last-child { margin-bottom: 0 !important; }
@media (max-width: 782px) {
    .jc-modal-box { padding: 30px 20px 26px; }
    h2.jc-modal-title { font-size: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
    dialog.jc-modal,
    dialog.jc-modal::backdrop { transition: none; }
}

/* plakietki „Tekst / N min / Quiz” w nagłówku lekcji wyłączone na całej platformie (08.10.2026) */
.jc-header .jc-meta {
    display: none !important;
}
/* odtwarzanie zwiniętej agendy przy wejściu na lekcję: bez animacji wjeżdżania */
html.lk-bez-animacji .wp-block-columns,
html.lk-bez-animacji .wp-block-columns > * {
    transition: none !important;
}

/* listy na stronach (sk-list, sk-doc): kropka zamiast długiej kreski (em dash to „wygląd AI”, 08.10.2026) */

/* opinia: zgoda na podpis imieniem i nazwiskiem (skillup-motyw.js + mu-plugin skillup-opinie.php) */
.lk-opinia-zgoda {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 14px !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lk-muted);
    cursor: pointer;
}
.lk-opinia-zgoda input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--lk-accent);
}

/* =====================================================================
   PORÓWNANIE OBOK SIEBIE: nagłówek kolumny jako pasek (09.10.2026, Tim)
   Lukasz: przy rzucie oka ma być widać, która kolumna to co
   (np. „Przeuczenie” / „Niedouczenie”). Etykieta ramki w .jc-compare
   staje się pełnym paskiem w kolorze znaczenia, z dużym, odwróconym napisem.
   ===================================================================== */
.jc-compare > .jc-callout {
    --jc-head-bg: var(--lk-fg);
    --jc-head-fg: var(--lk-bg, #ffffff);
    padding: 0 20px 18px !important;
    overflow: hidden;
}
.jc-compare > .jc-callout--good { --jc-head-bg: var(--lk-ok);   --jc-head-fg: #ffffff; }
.jc-compare > .jc-callout--bad,
.jc-compare > .jc-callout--warn { --jc-head-bg: var(--lk-err);  --jc-head-fg: #ffffff; }
.jc-compare > .jc-callout--exam { --jc-head-bg: var(--lk-info); --jc-head-fg: #ffffff; }
.jc-compare > .jc-callout--practice { --jc-head-bg: var(--lk-accent); --jc-head-fg: #171717; }
html.lk-dark .jc-compare > .jc-callout--good,
html.lk-dark .jc-compare > .jc-callout--bad,
html.lk-dark .jc-compare > .jc-callout--warn,
html.lk-dark .jc-compare > .jc-callout--exam { --jc-head-fg: #121212; }
.jc-compare > .jc-callout > .jc-callout-label {
    display: block;
    margin: 0 -20px 16px !important;
    padding: 12px 20px 11px !important;
    background: var(--jc-head-bg) !important;
    color: var(--jc-head-fg) !important;
    font-size: 1.12em !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}
.jc-compare > .jc-callout > .jc-callout-label::before { content: none !important; }

/* --- diagram w lekcji: powiększenie w okienku na wierzchu zamiast nowej karty (09.10.2026) --- */
.jc-figure a[data-zoom] { cursor: zoom-in; }
dialog.jc-modal.jc-modal--obraz {
    width: min(1480px, calc(100vw - 32px));
}
.jc-modal--obraz .jc-modal-box {
    padding: 24px 28px 26px;
}
.jc-modal--obraz h2.jc-modal-title {
    font-size: 20px !important;
    margin-bottom: 16px !important;
}
.jc-modal--obraz .jc-modal-close { top: 20px; }
.jc-modal--obraz .jc-modal-body.jc-lesson { zoom: 1; }
img.jc-modal-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    border-radius: 10px;
}
@media (max-width: 782px) {
    .jc-modal--obraz .jc-modal-box { padding: 20px 14px 16px; }
}

/* =====================================================================
   KROKI JAKO KARUZELA (09.10.2026): ol.jc-steps.jc-carousel
   Prostokątne karty w bok, widać brzeg następnej karty, pasek postępu.
   Inny wygląd niż fiszki „Do zapamiętania”: bez stosu kartek, numer kroku.
   ===================================================================== */
.jc-carousel-wrap {
    margin: 1.4em 0 1.8em;
}
ol.jc-carousel.is-carousel {
    display: flex;
    gap: 14px;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    list-style: none !important;
    counter-reset: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    outline: none;
}
ol.jc-carousel.is-carousel::-webkit-scrollbar { display: none; }
ol.jc-carousel.is-carousel:focus-visible { box-shadow: 0 0 0 2px var(--lk-accent); border-radius: 8px; }
ol.jc-carousel.is-carousel > li {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    margin: 0 !important;
    padding: 48px 26px 24px 26px !important;
    min-height: 190px;
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 8px;
    color: var(--lk-muted);
}
ol.jc-carousel.is-carousel > li::before {
    content: attr(data-num) !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 12px 0 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--lk-accent) !important;
    color: #171717 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    vertical-align: middle;
    transform: none !important;
}
ol.jc-carousel.is-carousel > li::after {
    content: attr(data-step);
    position: absolute;
    top: 20px;
    left: 26px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-subtle);
}
ol.jc-carousel.is-carousel > li > strong:first-child,
ol.jc-carousel.is-carousel > li > p:first-child > strong:only-child {
    display: inline;
    font-size: 20px;
    line-height: 1.3;
    color: var(--lk-fg);
    vertical-align: middle;
}
ol.jc-carousel.is-carousel > li > p {
    margin: 14px 0 0 !important;
    font-size: 17px;
    line-height: 1.6;
}
ol.jc-carousel.is-carousel > li > p:first-child { display: inline; margin: 0 !important; }
.jc-carousel-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}
.jc-carousel-bar {
    flex: 1;
    display: flex;
    gap: 5px;
}
.jc-carousel-seg {
    flex: 1;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}
.jc-carousel-seg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 4px;
    border-radius: 2px;
    background: var(--lk-divider);
    transition: background 0.3s ease;
}
.jc-carousel-seg.is-done::after { background: var(--lk-accent); }
.jc-carousel-seg:hover::after,
.jc-carousel-seg:focus-visible::after { background: var(--lk-accent-text); }
.jc-carousel-seg:focus-visible { outline: none; }
.jc-carousel-nav .jc-flash-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 782px) {
    ol.jc-carousel.is-carousel > li { padding: 44px 18px 20px !important; }
    ol.jc-carousel.is-carousel > li::after { top: 16px; left: 18px; }
    ol.jc-carousel.is-carousel > li > strong:first-child { font-size: 18px; }
}

/* =====================================================================
   DUŻY BLOK W OKIENKU (09.10.2026): details.jc-popup
   Wiersz z tytułem i „Otwórz”; treść w okienku na wierzchu, jak „Więcej”.
   ===================================================================== */
.jc-popup-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 1em 0;
    padding: 16px 20px;
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    font-family: var(--lk-font);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.jc-popup-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--lk-fg);
    line-height: 1.35;
}
.jc-popup-open {
    flex: none;
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--lk-divider);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lk-fg);
}
.jc-popup-open::before {
    content: "+";
    color: var(--lk-accent);
    font-weight: 600;
    margin-right: 6px;
}
.jc-popup-btn:hover,
.jc-popup-btn:focus-visible {
    border-color: var(--lk-accent);
    outline: none;
}
dialog.jc-modal.jc-modal--szeroki {
    width: min(1040px, calc(100vw - 32px));
}

/* ==========================================================================
   LANDING KURSU (19.10.2026) — dodatki do klocków STRONY dla strony opisu kursu
   (Opisy szkolen/Wprowadzenie do GenAI na AWS/index.html, .sk-page.sk-lp).
   Ten sam język co reszta: cienkie linie, panele z cienką ramką, musztarda jako jedyny akcent,
   bez cieni, poświat i ciemnych bloków. Nowe są tylko: porównanie w dwóch kolumnach
   z paskiem nagłówka (jak w lekcjach), zrzuty lekcji i program z widocznymi lekcjami.
   ========================================================================== */
.sk-lp .sk-facts {
    margin: 0 0 28px;
}
.sk-lp .sk-facts .sk-fact-value {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
}
.sk-lp .sk-facts li:last-child .sk-fact-value {
    color: var(--lk-accent-text);
}

/* trzy panele w rzędzie zamiast czterech kolumn z pustym miejscem */
.sk-lp .sk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* persony: dwa na dwa */
.sk-lp .sk-lp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-lp .sk-lp-note {
    margin: 18px 0 0;
    color: var(--lk-fg);
}
/* lista z ptaszkiem zamiast kropki */
.sk-lp-checks li::before {
    content: "✓";
    top: 0;
    left: 2px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--lk-accent-text);
    font-weight: 600;
}
.sk-lp-checks li {
    color: var(--lk-fg);
}
.sk-lp-nohooks {
    align-items: start;
    margin: 0 0 24px;
}
/* krótki panel z wezwaniem w środku strony i z poleceniem */
.sk-lp .sk-lp-mid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    padding: 22px 28px;
}
.sk-lp .sk-lp-mid p {
    margin: 0;
}
.sk-page .sk-lp-sign {
    font-style: italic;
    font-size: 20px;
    color: var(--lk-fg);
    margin: 10px 0 0;
}

/* --- dwie kolumny z paskiem nagłówka (przed i po, dla kogo) --- */
.sk-lp-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.sk-lp-col {
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    overflow: hidden;
}
.sk-page .sk-lp-col h3 {
    margin: 0;
    padding: 12px 24px 11px;
    font-family: var(--lk-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--lk-fg);
    color: var(--lk-bg);
}
.sk-page .sk-lp-col--po h3 {
    background: var(--lk-accent);
    color: var(--lk-accent-ink);
}
.sk-lp-col ul {
    list-style: none;
    margin: 0;
    padding: 8px 24px 14px;
}
.sk-lp-col li {
    position: relative;
    padding: 12px 0 12px 30px;
    border-bottom: 1px solid var(--lk-border);
    line-height: 1.5;
}
.sk-lp-col li:last-child {
    border-bottom: 0;
}
.sk-lp-col li::before {
    content: "✕";
    position: absolute;
    left: 2px;
    top: 12px;
    font-size: 13px;
    color: var(--lk-subtle);
}
.sk-lp-col--po li::before {
    content: "✓";
    color: var(--lk-accent-text);
    font-weight: 600;
}

/* --- zrzuty lekcji (klik = okno z powiększeniem, skillup-motyw.js) --- */
.sk-lp-shots {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px 28px;
}
.sk-lp-shot {
    margin: 0;
}
.sk-lp-shot--duzy {
    grid-row: span 2;
}
.sk-lp-shot a {
    display: block;
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color 0.4s ease;
}
.sk-lp-shot a:hover {
    border-color: var(--lk-accent);
}
.sk-lp-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.sk-lp-shot figcaption {
    font-size: 15px;
    line-height: 1.55;
    color: var(--lk-muted);
    margin: 12px 2px 0;
}

/* --- program: lista rozwijana per moduł (sk-agenda) z lekcjami w środku --- */
.sk-lp .sk-lp-program summary {
    grid-template-columns: 3.4rem 1fr auto auto;
}
.sk-lp-meta {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lk-subtle);
    white-space: nowrap;
}
.sk-lp-mod-body {
    padding: 0 0 24px calc(3.4rem + 16px);
    max-width: 900px;
}
.sk-lp-mod-body > p {
    margin: 0 0 14px;
    font-size: 16px;
}
.sk-lp-lessons {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sk-lp-lessons li {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lk-border);
    color: var(--lk-fg);
    font-size: 16px;
    line-height: 1.45;
}
.sk-lp-lessons li:first-child {
    padding-top: 0;
}
.sk-lp-lessons li:last-child {
    border-bottom: 0;
}
.sk-lp-lessons span {
    flex: 0 0 36px;
    font-size: 13px;
    padding-top: 2px;
    color: var(--lk-subtle);
}

/* --- pytania (zwykła agenda, odpowiedź zamiast listy) --- */
.sk-lp .sk-agenda {
    border-top: 0;
}
.sk-lp-faq .sk-lp-answer {
    margin: 0 0 22px;
    max-width: 820px;
}

/* --- panel zapisu: tekst po lewej, ramka zamówienia Publigo po prawej ---
   skillup-motyw.js przenosi .strona_kursu_sidebar do .sk-lp-zapis-slot i chowa pustą kolumnę po niej.
   W panelu ramka traci własną kartę (tło, ramkę, odstępy) i tytuł „Zamówienie”: ma wyglądać jak część strony. */
.sk-lp .sk-lp-zapis {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px 48px;
    align-items: center;
}
.sk-lp-zapis .sk-section-title {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}
.sk-lp-zapis .sk-lp-checks {
    margin: 0;
}
.sk-lp-zapis .sk-lp-checks li {
    margin-bottom: 8px;
}
.sk-lp-zapis-slot:empty {
    display: none;
}
.sk-lp-zapis-slot .strona_kursu_sidebar,
.wpi-template .sk-lp-zapis-slot .strona_kursu_sidebar {
    background: none !important;
    border: 0 !important;
    border-left: 1px solid var(--lk-divider) !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 40px !important;
    margin: 0 !important;
    max-width: none !important;
}
.sk-lp-zapis-slot .strona_kursu_sidebar_tytul {
    display: none !important;
}
.sk-lp-zapis-slot .glowna_box_cena,
.sk-lp-zapis-slot .glowna_box_cena_dostepny,
.sk-lp-zapis-slot .box_glowna_add_to_cart a {
    width: 100% !important;
    margin: 0 0 10px !important;
    min-height: 54px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.sk-lp-zapis-slot .box_glowna_add_to_cart a {
    min-height: 58px;
    text-decoration: none !important;
}
/* cena w panelu jako spokojny napis nad przyciskiem, nie drugi musztardowy blok */
.sk-lp-zapis-slot .glowna_box_cena,
.sk-lp-zapis-slot .glowna_box_cena_dostepny {
    background: none !important;
    border: 0 !important;
    min-height: 0;
    justify-content: flex-start;
    margin: 0 0 6px !important;
}
.sk-lp-zapis-slot .glowna_box_cena p,
.sk-lp-zapis-slot .glowna_box_cena p span,
.sk-lp-zapis-slot .glowna_box_cena_dostepny p,
.sk-lp-zapis-slot .glowna_box_cena_dostepny p span {
    color: var(--lk-accent-text) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    padding: 0 !important;
}
.sk-lp-zapis-slot .glowna_box_cena p,
.sk-lp-zapis-slot .glowna_box_cena_dostepny p {
    margin: 0 !important;
}
.sk-lp-zapis-slot form {
    margin: 0;
}
/* pusta kolumna Publigo po przeniesieniu ramki */
.sk-lp-pusta {
    display: none !important;
}

/* --- telefon --- */
@media (max-width: 900px) {
    .sk-lp .sk-grid,
    .sk-lp-shots {
        grid-template-columns: minmax(0, 1fr);
    }
    .sk-lp-shot--duzy {
        grid-row: auto;
    }
}
@media (max-width: 720px) {
    .sk-lp .sk-lp-zapis {
        grid-template-columns: minmax(0, 1fr);
    }
    .sk-lp-zapis-slot .strona_kursu_sidebar,
    .wpi-template .sk-lp-zapis-slot .strona_kursu_sidebar {
        border-left: 0 !important;
        border-top: 1px solid var(--lk-divider) !important;
        padding: 24px 0 0 !important;
    }
    .sk-lp .sk-lp-program summary {
        grid-template-columns: 2.4rem 1fr auto;
    }
    .sk-lp-meta {
        grid-column: 2;
        grid-row: 2;
        white-space: normal;
    }
    .sk-lp-mod-body {
        padding-left: 0;
    }
    .sk-lp .sk-lp-grid--2,
    .sk-lp-nohooks,
    .sk-lp-compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================
   LEKCJE: rozwijane bloki, tabele porównań, tak/nie w tabelach (20.10.2026, Tim)
   ===================================================================== */
:root {
    --lk-hover: rgba(0, 0, 0, 0.035);
}
html.lk-dark {
    --lk-hover: rgba(255, 255, 255, 0.05);
}

/* --- rozwijane <details>: zaokrąglenia stałe w każdym stanie ---
   Błąd (zgłosił Lukasz): ramka <details> ma border-radius 16px, ale <summary> był zwykłym
   prostokątem bez zaokrągleń. Na :hover summary dostawał tło (w bazie var(--jc-light), w trybie
   ciemnym prawie białe) i jego kwadratowe rogi wystawały poza zaokrągloną ramkę.
   Teraz summary ma te same rogi co ramka (16px minus 1px obwódki), a w otwartym bloku
   zaokrąglone tylko górne. Tło hover z tokenu motywu. */
.jc-lesson details > summary {
    border-radius: 15px;
    transition: background-color 0.2s ease;
}
.jc-lesson details[open] > summary {
    border-radius: 15px 15px 0 0;
}
.jc-lesson details > summary:hover,
.jc-lesson details > summary:focus-visible {
    background: var(--lk-hover);
}
.jc-lesson details > summary:focus-visible {
    outline: 2px solid var(--lk-accent);
    outline-offset: 2px;
}

/* --- tabele w lekcjach: owijka z przewijaniem i mocny, odwrócony nagłówek kolumn ---
   Owijkę .jc-table-wrap dodaje skillup-motyw.js (initTable). Szeroka tabela przewija się
   w poziomie tylko w owijce, strona nie przesuwa się w bok. Nagłówek z <thead> to pasek
   w kolorze tekstu z napisem w kolorze tła (jak paski w .jc-compare), więc porównywane
   kolumny widać od razu. Dotyczy wszystkich lekcji z klasą jc-lesson (także IntroGenAI).
   Tabele bez <thead> zostają jak dotąd. */
.jc-lesson .jc-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0;
}
.jc-lesson .jc-table-wrap > table {
    margin: 0;
}
.jc-lesson table:has(> thead) {
    border-collapse: separate;
    border-spacing: 0;
}
.jc-lesson table > thead > tr > th {
    background: var(--lk-fg) !important;
    color: var(--lk-bg) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.3;
    padding: 11px 12px;
    border: none;
    white-space: normal;
    vertical-align: bottom;
}
.jc-lesson table > thead > tr > th:first-child {
    border-top-left-radius: 10px;
}
.jc-lesson table > thead > tr > th:last-child {
    border-top-right-radius: 10px;
}
/* pierwsza kolumna = etykieta cechy */
.jc-lesson table:has(> thead) > tbody > tr > td:first-child {
    color: var(--lk-fg) !important;
}
@media (max-width: 782px) {
    /* z owijką tabela zostaje tabelą na całą szerokość (stara reguła robiła z niej blok) */
    .jc-lesson table.is-wrapped {
        display: table;
        overflow: visible;
    }
    .jc-lesson table > thead > tr > th {
        font-size: 14px;
        letter-spacing: 0;
        padding: 9px 8px;
    }
}

/* --- tak / nie w komórkach: <span class="jc-yes">tak</span>, <span class="jc-no">nie</span> ---
   Słowo zostaje w HTML dla czytników ekranu, wizualnie zastępuje je ikona (kształt z maski SVG,
   kolor z tokenu motywu). Tak = pełne zielone kółko z ptaszkiem, nie = czerwony krzyżyk
   w obrysowanym kółku, więc różnicę widać też bez rozróżniania kolorów.
   Dopisek po spanie stoi w tej samej linii obok ikony. */
.jc-lesson .jc-yes,
.jc-lesson .jc-no {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 6px 0 0;
    vertical-align: -5px;
    border-radius: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 120%;
    color: transparent;
    font-size: 14px;
    line-height: 22px;
}
.jc-lesson .jc-yes {
    background: var(--lk-ok);
}
.jc-lesson .jc-no {
    border: 1.5px solid var(--lk-err);
}
.jc-lesson .jc-yes::before,
.jc-lesson .jc-no::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--jc-ico) center / 14px 14px no-repeat;
    mask: var(--jc-ico) center / 14px 14px no-repeat;
}
.jc-lesson .jc-yes::before {
    --jc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: #ffffff;
}
html.lk-dark .jc-lesson .jc-yes::before {
    background-color: #121212;
}
.jc-lesson .jc-no::before {
    --jc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 3.6l6.8 6.8M10.4 3.6l-6.8 6.8' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
    background-color: var(--lk-err);
}
@media (forced-colors: active) {
    .jc-lesson .jc-yes,
    .jc-lesson .jc-no {
        border: 1.5px solid CanvasText;
    }
    .jc-lesson .jc-yes::before,
    .jc-lesson .jc-no::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}

/* =====================================================================
   PYTANIA KONTROLNE JAKO KARTY ODWRACANE (22.10.2026, Tim)
   details.jc-flipcard -> .jc-flip (skillup-motyw.js). Przód: pytanie na panelu,
   tył: odpowiedź na musztardzie. Obrót o 180 stopni wokół osi pionowej.
   Obie strony leżą w jednej komórce siatki, więc karta ma wysokość dłuższej strony.
   ===================================================================== */
.jc-flips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 1em 0 1.6em;
}
.jc-flip {
    perspective: 1400px;
    cursor: pointer;
    border-radius: 16px;
    outline: none;
}
.jc-flip:focus-visible {
    box-shadow: 0 0 0 2px var(--lk-accent);
}
.jc-flip-inner {
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jc-flip.is-flipped .jc-flip-inner {
    transform: rotateY(180deg);
}
.jc-flip-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    padding: 20px 22px 18px;
    border-radius: 16px;
    border: 1px solid var(--lk-border);
    background: var(--lk-panel);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.jc-flip-back {
    transform: rotateY(180deg);
    background: var(--lk-accent);
    border-color: var(--lk-accent);
}
.jc-flip-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-accent-text);
}
.jc-flip-q {
    font-size: 16.5px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--lk-fg);
}
.jc-flip-hint {
    margin-top: auto;
    font-size: 12.5px;
    color: var(--lk-subtle);
}
.jc-flip-back .jc-flip-label,
.jc-flip-back .jc-flip-hint,
.jc-flip-back .jc-flip-a,
.skill-up-class.jc-lesson .jc-flip-back .jc-flip-a p,
.skill-up-class.jc-lesson .jc-flip-back .jc-flip-a li,
.skill-up-class.jc-lesson .jc-flip-back .jc-flip-a strong,
.jc-lesson .jc-flip-back .jc-flip-a p,
.jc-lesson .jc-flip-back .jc-flip-a li,
.jc-lesson .jc-flip-back .jc-flip-a strong {
    color: #1f1f1f !important;
}
.jc-flip-back .jc-flip-hint {
    opacity: 0.7;
}
.jc-flip-a {
    font-size: 18px;
    line-height: 1.45;
    font-weight: 500;
}
.jc-lesson .jc-flip-a p {
    font-size: inherit;
    font-weight: inherit;
}
.jc-flip-a p {
    margin: 0 0 6px;
}
.jc-flip-a p:last-child {
    margin-bottom: 0;
}
.jc-flip-a a {
    color: #1f1f1f !important;
    text-decoration: underline;
}
.jc-flip:hover .jc-flip-front {
    border-color: var(--lk-accent);
}
@media (max-width: 720px) {
    .jc-flips {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* karuzela pytań: jedna karta na całą szerokość, przewijanie w bok (skillup-motyw.js, initFlipCarousel) */
.jc-flips.is-carousel {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 2px 0 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.jc-flips.is-carousel::-webkit-scrollbar {
    display: none;
}
.jc-flips.is-carousel > .jc-flip {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.jc-flips.is-carousel .jc-flip-face {
    min-height: 190px;
    padding: 24px 28px 20px;
}
.jc-flips.is-carousel .jc-flip-q {
    font-size: 18px;
}
@media (prefers-reduced-motion: reduce) {
    .jc-flip-inner {
        transition: none;
    }
}

/* --- tabele w lekcjach: nagłówki bez łamania wyrazów i pionowe linie między kolumnami
   (27.10.2026, Tim, po przeglądzie Lukasza) ---
   Nagłówek kolumny łamie się tylko między wyrazami, nigdy w środku wyrazu (w 0.2 „Moduł”
   rozpadał się na „Mo / duł”). Wąska kolumna z samymi cyframi ma więc co najmniej szerokość
   najdłuższego wyrazu nagłówka. Właściwości łamania są ustawione wprost na th, żeby nie
   dziedziczyć overflow-wrap / word-break / hyphens z owijki strony (motyw, wtyczki).
   Pionowe linie między kolumnami: w treści w kolorze linii poziomych (--lk-border),
   w ciemnym pasku nagłówka półprzezroczysta linia w kolorze tła. Bez zewnętrznej ramki,
   zaokrąglone rogi nagłówka zostają. Dotyczy obu kursów (JohnnyCloud i IntroGenAI). */
.jc-lesson th {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: keep-all !important;
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
}
.jc-lesson tr > td + td {
    border-left: 1px solid var(--lk-border);
}
.jc-lesson tr > th + th {
    border-left: 1px solid rgba(128, 128, 128, 0.45);
}
.jc-lesson table > thead > tr > th + th {
    border-left: 1px solid rgba(128, 128, 128, 0.45);
    border-left-color: color-mix(in srgb, var(--lk-bg) 30%, transparent);
}

/* --- odpowiedź Johnny'ego (.jc-answer) jako jedna ramka (27.10.2026, Tim, po przeglądzie Lukasza) ---
   Motyw 2.0 nadał .jc-answer tło, obwódkę i zaokrąglenie panelu (jak .jc-callout), ale bez
   wewnętrznego marginesu: etykieta stała na krawędzi ramki, a <pre> w środku miał własną
   obwódkę i tło (ramka w ramce). Teraz ramka ma ten sam margines co .jc-callout, etykieta
   i tekst odpowiedzi zaczynają się w jednej linii, a <pre> nie ma własnej ramki ani tła.
   Prawy margines <pre> zostaje na przycisk kopiowania. */
.jc-lesson .jc-answer {
    margin: 1.2em 0 !important;
    padding: 12px 16px 14px !important;
}
.jc-lesson .jc-answer > .jc-block-label {
    margin: 0 0 8px 0 !important;
}
.jc-lesson .jc-answer > pre,
.skill-up-class.jc-lesson .jc-answer > pre {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 40px 0 0 !important;
    color: var(--lk-fg) !important;
}
.jc-lesson .jc-answer > pre code {
    background: transparent !important;
    padding: 0 !important;
}

/* =====================================================================
   FORMULARZ OPINII w lekcji „Twoja opinia” (30.10.2026, Tim)
   form.jc-opinia[data-opinia]; obsługa w skillup-motyw.js, zapis przez API (infra/opinie-api).
   Panel jak .jc-callout, gwiazdki jako radio (obrys, po zaznaczeniu i na hover musztarda),
   przycisk wysyłki w musztardzie. Bez JS całość jest wyłączona (fieldset disabled).
   ===================================================================== */
.jc-lesson .jc-opinia {
    --jc-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.85 5.8 6.4.93-4.63 4.5 1.1 6.37L12 17.4l-5.72 3.01 1.1-6.37-4.63-4.5 6.4-.93z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    --jc-star-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.85 5.8 6.4.93-4.63 4.5 1.1 6.37L12 17.4l-5.72 3.01 1.1-6.37-4.63-4.5 6.4-.93z' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background: var(--lk-panel);
    border: 1px solid var(--lk-border);
    border-radius: 16px;
    padding: 26px 28px 24px;
    margin: 28px 0 32px;
    font-family: var(--lk-font);
}
.jc-lesson .jc-opinia fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.jc-lesson .jc-opinia-pola:disabled {
    opacity: 0.5;
}
.jc-lesson .jc-opinia legend,
.jc-lesson .jc-opinia-pole > label {
    display: block;
    padding: 0;
    margin: 0 0 10px;
    font-family: var(--lk-font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lk-fg);
}
.jc-lesson .jc-opinia-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* gwiazdki */
.jc-lesson .jc-opinia-skala {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 2px -6px;
}
.jc-lesson .jc-opinia-skala input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.jc-lesson .jc-opinia-skala label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
}
.jc-lesson .jc-opinia-pola:disabled .jc-opinia-skala label {
    cursor: default;
}
.jc-lesson .jc-opinia-skala label::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: var(--lk-subtle);
    -webkit-mask: var(--jc-star-o) center / contain no-repeat;
    mask: var(--jc-star-o) center / contain no-repeat;
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.jc-lesson .jc-opinia-skala label:hover::before {
    transform: scale(1.08);
}
.jc-lesson .jc-opinia-skala[data-ocena="1"] label:nth-of-type(-n+1)::before,
.jc-lesson .jc-opinia-skala[data-ocena="2"] label:nth-of-type(-n+2)::before,
.jc-lesson .jc-opinia-skala[data-ocena="3"] label:nth-of-type(-n+3)::before,
.jc-lesson .jc-opinia-skala[data-ocena="4"] label:nth-of-type(-n+4)::before,
.jc-lesson .jc-opinia-skala[data-ocena="5"] label:nth-of-type(-n+5)::before {
    background: var(--lk-accent);
    -webkit-mask-image: var(--jc-star-f);
    mask-image: var(--jc-star-f);
}
.jc-lesson .jc-opinia-skala input:focus-visible + label {
    outline: 2px solid var(--lk-accent);
    outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .jc-lesson .jc-opinia-skala label::before { transition: none; }
    .jc-lesson .jc-opinia-skala label:hover::before { transform: none; }
}
.jc-lesson .jc-opinia-blad {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--lk-err) !important;
}
.jc-lesson .jc-opinia-blad:empty {
    display: none;
}

/* treść */
.jc-lesson .jc-opinia-pole {
    margin: 22px 0 0;
}
.jc-lesson .jc-opinia-podpowiedz {
    margin: -4px 0 10px;
    font-size: 15.5px;
    color: var(--lk-subtle) !important;
}
.jc-lesson .jc-opinia textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    padding: 12px 14px;
    resize: vertical;
    background: transparent;
    color: var(--lk-fg);
    border: 1px solid var(--lk-divider);
    border-radius: 8px;
    font-family: var(--lk-font);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.55;
    box-shadow: none;
}
.jc-lesson .jc-opinia textarea:focus {
    outline: none;
    border-color: var(--lk-accent);
    box-shadow: 0 0 0 1px var(--lk-accent);
}
.jc-lesson .jc-opinia-licznik {
    margin: 6px 0 0;
    text-align: right;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--lk-subtle) !important;
}

/* zgoda na podpis */
.jc-lesson .jc-opinia-zgoda {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 6px;
}
.jc-lesson .jc-opinia-zgoda input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--lk-accent);
    cursor: pointer;
}
.jc-lesson .jc-opinia-zgoda label {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--lk-fg);
    font-weight: 400;
    cursor: pointer;
}
.jc-lesson .jc-opinia-zgoda input:focus-visible {
    outline: 2px solid var(--lk-accent);
    outline-offset: 2px;
}
.jc-lesson .jc-opinia-uwaga {
    margin: 0 0 0 32px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lk-subtle) !important;
}
.jc-lesson .jc-opinia-uwaga a {
    color: var(--lk-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* wysyłka i komunikaty */
.jc-lesson .jc-opinia-akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 22px 0 0;
}
.jc-lesson .jc-opinia .jc-opinia-wyslij {
    margin: 0;
    padding: 14px 28px !important;
    background: var(--lk-accent) !important;
    border: 1px solid var(--lk-accent) !important;
    color: var(--lk-accent-ink) !important;
    cursor: pointer;
}
.jc-lesson .jc-opinia .jc-opinia-wyslij:hover {
    background: var(--lk-accent-hover) !important;
    border-color: var(--lk-accent-hover) !important;
    color: var(--lk-accent-ink) !important;
}
.jc-lesson .jc-opinia .jc-opinia-wyslij:focus-visible {
    outline: 2px solid var(--lk-fg);
    outline-offset: 3px;
}
.jc-lesson .jc-opinia .jc-opinia-wyslij:disabled {
    opacity: 0.6;
    cursor: default;
}
.jc-lesson .jc-opinia .jc-opinia-wyslij[aria-busy="true"] {
    cursor: progress;
}
.jc-lesson .jc-opinia-zapisano {
    margin: 0;
    font-size: 14px;
    color: var(--lk-subtle) !important;
}
.jc-lesson .jc-opinia-zapisano:empty {
    display: none;
}
.jc-lesson .jc-opinia-status {
    margin: 18px 0 0;
    padding: 11px 15px;
    border: 1px solid var(--lk-divider);
    border-radius: 10px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--lk-fg) !important;
}
.jc-lesson .jc-opinia-status:empty {
    display: none;
}
.jc-lesson .jc-opinia-status[data-stan="ok"] {
    border-color: color-mix(in srgb, var(--lk-ok) 60%, transparent);
    background: var(--lk-ok-bg);
}
.jc-lesson .jc-opinia-status[data-stan="blad"] {
    border-color: color-mix(in srgb, var(--lk-err) 60%, transparent);
    background: var(--lk-err-bg);
}
.jc-lesson .jc-opinia-status[data-stan="info"] {
    color: var(--lk-muted) !important;
}

@media (max-width: 600px) {
    .jc-lesson .jc-opinia {
        padding: 20px 16px 18px;
        border-radius: 12px;
    }
    .jc-lesson .jc-opinia-skala label {
        width: 48px;
        height: 48px;
    }
    .jc-lesson .jc-opinia-skala label::before {
        width: 38px;
        height: 38px;
    }
    .jc-lesson .jc-opinia-uwaga {
        margin-left: 0;
    }
    .jc-lesson .jc-opinia .jc-opinia-wyslij {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================================
   TABELE W LEKCJACH: JEDEN STYL (02.11.2026, Tim, po przeglądzie Lukasza)
   Pełna siatka: ramka tabeli (pionowe linie także na zewnętrznych brzegach), linie między
   kolumnami i wierszami w jednym, wyraźniejszym kolorze --jc-tab-line. Nagłówek zostaje
   odwróconym paskiem (tekst w kolorze tła). Krótkie wartości nie łamią się: skillup-motyw.js
   (initTable) oznacza komórki do 15 znaków .is-short, a kolumny z samymi krótkimi wartościami
   .is-short-col (zwężone do treści). Na telefonie długie komórki mają minimalną szerokość,
   więc tabela z kilkoma kolumnami przewija się w poziomie w owijce .jc-table-wrap, zamiast
   zwężać kolumny do kilku słów w wierszu. Cień przy brzegu owijki pokazuje, że da się przewinąć.
   ===================================================================== */
.jc-lesson table {
    --jc-tab-line: color-mix(in srgb, var(--lk-fg) 17%, transparent);
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--jc-tab-line) !important;
    border-radius: 10px;
}
.jc-lesson table > thead > tr > th:first-child { border-top-left-radius: 9px; }
.jc-lesson table > thead > tr > th:last-child { border-top-right-radius: 9px; }
.jc-lesson table td {
    border: none;
    border-bottom: 1px solid var(--jc-tab-line);
}
.jc-lesson table tr > td + td,
.jc-lesson table tr > th + td,
.jc-lesson table tr > td + th {
    border-left: 1px solid var(--jc-tab-line);
}
.jc-lesson table tbody > tr:last-child > td,
.jc-lesson table tbody > tr:last-child > th {
    border-bottom: none;
}
.jc-lesson table > tbody > tr:last-child > :first-child { border-bottom-left-radius: 9px; }
.jc-lesson table > tbody > tr:last-child > :last-child { border-bottom-right-radius: 9px; }
.jc-lesson table .is-short {
    white-space: nowrap;
}
.jc-lesson table .is-short-col {
    width: 1%;
}
.jc-lesson table > thead > tr > th.is-short-col:not(.is-short) {
    min-width: 5.5em;
}
/* owijka: przewijanie w poziomie z cieniem przy brzegu, za którym jest dalsza część tabeli */
.jc-lesson .jc-table-wrap {
    background:
        linear-gradient(to right, var(--lk-bg) 30%, transparent) left center / 28px 100% no-repeat local,
        linear-gradient(to left, var(--lk-bg) 30%, transparent) right center / 28px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), transparent) right center / 12px 100% no-repeat scroll;
    scrollbar-width: thin;
}
@media (max-width: 782px) {
    .jc-lesson .jc-table-wrap > table td:not(.is-short),
    .jc-lesson .jc-table-wrap > table th:not(.is-short):not(.is-short-col) {
        min-width: 9em;
    }
    .jc-lesson .jc-table-wrap > table td.is-long {
        min-width: 15em;
    }
    .jc-lesson .jc-table-wrap > table th.is-short-col:not(.is-short) {
        min-width: 4.5em;
    }
}

/* =====================================================================
   KOMPONENTY ZAMIAST ŚCIAN TEKSTU (02.11.2026, po przeglądzie Lukasza)
   ol.jc-numbered: lista w boksach z dużymi numerami (pytania kontrolne, zasady, kroki bez karuzeli).
     <ol class="jc-numbered"><li><strong>Krótkie hasło</strong><p>Jedno-dwa zdania.</p></li>…</ol>
   ul.jc-pf: pary problem → rozwiązanie w wierszach ze strzałką.
     <ul class="jc-pf"><li><p class="jc-pf-problem"><strong>Hasło</strong> zdanie</p><p class="jc-pf-fix"><strong>Hasło</strong> zdanie</p></li>…</ul>
     Etykiety kolumn z atrybutów: <ul class="jc-pf" data-problem="Ograniczenie" data-fix="Rozwiązanie">.
   ===================================================================== */
.jc-lesson ol.jc-numbered {
    counter-reset: jcnum;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 1.2em 0;
    padding: 0;
}
.jc-lesson ol.jc-numbered > li {
    counter-increment: jcnum;
    background: var(--lk-panel);
    border: 1px solid var(--lk-divider);
    border-radius: 12px;
    margin: 0;
    padding: 16px 18px 16px 76px;
    position: relative;
    min-height: 72px;
}
.jc-lesson ol.jc-numbered > li::before {
    content: counter(jcnum);
    color: var(--lk-accent);
    font-size: 2.6em;
    font-weight: 700;
    left: 18px;
    line-height: 1;
    position: absolute;
    top: 14px;
    width: 44px;
    text-align: center;
}
.jc-lesson ol.jc-numbered > li > strong { display: block; color: var(--lk-fg); margin-bottom: 4px; }
.jc-lesson ol.jc-numbered > li > p { margin: 0; color: var(--lk-muted); }
.jc-lesson ol.jc-numbered > li > p + p { margin-top: 6px; }

.jc-lesson ul.jc-pf {
    border: 1px solid var(--lk-divider);
    border-radius: 12px;
    list-style: none;
    margin: 1.2em 0;
    overflow: hidden;
    padding: 0;
}
.jc-lesson ul.jc-pf[data-problem]::before {
    content: attr(data-problem) "\2003\2192\2003" attr(data-fix);
    background: var(--lk-fg);
    color: var(--lk-bg);
    display: block;
    font-weight: 700;
    padding: 10px 18px;
}
.jc-lesson ul.jc-pf > li {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    margin: 0;
}
.jc-lesson ul.jc-pf > li + li { border-top: 1px solid var(--lk-divider); }
.jc-lesson ul.jc-pf > li > p { margin: 0; padding: 14px 18px; }
.jc-lesson ul.jc-pf > li > .jc-pf-problem { grid-column: 1; color: var(--lk-muted); }
.jc-lesson ul.jc-pf > li > .jc-pf-fix { grid-column: 3; background: color-mix(in srgb, var(--lk-accent) 9%, transparent); }
.jc-lesson ul.jc-pf > li > .jc-pf-fix::before {
    content: "\2192";
    color: var(--lk-accent);
    font-size: 1.5em;
    font-weight: 700;
    grid-column: 2;
    position: absolute;
    margin-left: -50px;
}
.jc-lesson ul.jc-pf > li > .jc-pf-fix { position: relative; }
.jc-lesson ul.jc-pf strong { color: var(--lk-fg); display: block; margin-bottom: 2px; }
@media (max-width: 782px) {
    .jc-lesson ul.jc-pf > li { grid-template-columns: 1fr; }
    .jc-lesson ul.jc-pf > li > .jc-pf-fix { grid-column: 1; }
    .jc-lesson ul.jc-pf > li > .jc-pf-fix::before { position: static; margin: 0 8px 0 0; font-size: 1.2em; }
    .jc-lesson ul.jc-pf[data-problem]::before { content: attr(data-problem) " \2192 " attr(data-fix); }
}
/* jc-numbered--wide (02.11.2026): boksy jeden pod drugim na całą szerokość, gdy opisy mają różną długość */
.jc-lesson ol.jc-numbered.jc-numbered--wide { grid-template-columns: 1fr; gap: 10px; }
.jc-lesson ol.jc-numbered.jc-numbered--wide > li { min-height: 0; padding: 14px 20px 14px 76px; }
.jc-lesson ol.jc-numbered.jc-numbered--wide > li::before { top: 50%; transform: translateY(-50%); font-size: 2.2em; }

/* Opcje w scenariuszu karty pytania (02.11.2026): zamiast wyliczania w jednym akapicie
   <summary>Scenariusz…<span class="jc-flip-list"><span><b>Budowa:</b> 15 miesięcy…</span>…</span>Które…?</summary>
   (span, bo summary przyjmuje tylko treść w wierszu). */
.jc-lesson .jc-flip-list,
.jc-lesson summary .jc-flip-list { display: block; margin: 12px 0; padding: 0; }
.jc-lesson .jc-flip-list > span {
    display: block;
    position: relative;
    padding: 6px 0 6px 22px;
    font-weight: 400;
    font-size: 0.82em;
    line-height: 1.45;
    color: var(--lk-muted);
    border-top: 1px solid var(--lk-divider);
}
.jc-lesson .jc-flip-list > span:last-child { border-bottom: 1px solid var(--lk-divider); }
.jc-lesson .jc-flip-list > span::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.95em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lk-accent);
}
.jc-lesson .jc-flip-list b { color: var(--lk-fg); font-weight: 600; }

/* =====================================================================
   NAGŁÓWKI SEKCJI LEKCJI (02.11.2026, wariant C wybrany przez Lukasza)
   Każde h2 w lekcji to kolejny podtemat: musztardowe kółko z numerem (licznik CSS, bez zmian w HTML),
   tytuł 28 px i pozioma linia do prawej krawędzi. „Do zapamiętania” (h2 przed ul.jc-takeaways, po JS przed .jc-flash) bez numeru.
   ===================================================================== */
.skill-up-class.jc-lesson { counter-reset: jcsek; }
.skill-up-class.jc-lesson h2 {
    display: flex !important;
    align-items: center;
    gap: 16px;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 72px 0 26px !important;
}
.skill-up-class.jc-lesson h2:not(:has(+ ul.jc-takeaways, + .jc-flash)) { counter-increment: jcsek; }
.skill-up-class.jc-lesson h2:not(:has(+ ul.jc-takeaways, + .jc-flash))::before {
    content: counter(jcsek);
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lk-accent);
    color: var(--lk-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.skill-up-class.jc-lesson h2::after {
    content: "";
    flex: 1 1 24px;
    min-width: 24px;
    height: 2px;
    background: var(--lk-divider);
}
@media (max-width: 782px) {
    .skill-up-class.jc-lesson h2 { font-size: 22px !important; gap: 12px; margin: 52px 0 20px !important; }
    .skill-up-class.jc-lesson h2:not(:has(+ ul.jc-takeaways, + .jc-flash))::before { width: 36px; height: 36px; font-size: 18px; }
}

/* Karuzela pytań o stałej wysokości (02.11.2026, Tim, uwaga Lukasza: karta ucięta na dole).
   Scenariusz pytania zawsze widoczny, warianty (.jc-flip-scroll) i odpowiedź (.jc-flip-a)
   przewijają się w karcie; .is-more (JS) dokłada cień na dole, gdy niżej jest jeszcze tekst. */
.jc-flips.is-carousel { height: 470px; align-items: stretch; overflow-y: hidden; }
.jc-flips.is-carousel > .jc-flip { align-self: stretch; height: 100%; }
.jc-flips.is-carousel .jc-flip-inner { height: 100%; }
.jc-flips.is-carousel .jc-flip-face { height: 100%; min-height: 0; box-sizing: border-box; overflow: hidden; }
.jc-flips.is-carousel .jc-flip-label,
.jc-flips.is-carousel .jc-flip-hint { flex: 0 0 auto; }
.jc-flips.is-carousel .jc-flip-q { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.jc-flips.is-carousel .jc-flip-q:not(.has-list),
.jc-flips.is-carousel .jc-flip-a { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.jc-flips.is-carousel .jc-flip-stem { flex: 0 0 auto; max-height: 60%; overflow-y: auto; }
.jc-flips.is-carousel .jc-flip-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.jc-flips.is-carousel .jc-flip-scroll .jc-flip-list { margin-top: 12px; }
.jc-flips.is-carousel .jc-flip-scroll,
.jc-flips.is-carousel .jc-flip-stem,
.jc-flips.is-carousel .jc-flip-q,
.jc-flips.is-carousel .jc-flip-a { scrollbar-width: thin; scrollbar-color: var(--lk-border) transparent; }
.jc-flips.is-carousel .is-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
/* Odpowiedź na środku karty i większą czcionką (02.11.2026, Lukasz: wykorzystać puste miejsce).
   margin:auto w kolumnie flex centruje w pionie, a przy długiej odpowiedzi zeruje się i działa przewijanie. */
.jc-flips.is-carousel .jc-flip-a { display: flex; flex-direction: column; font-size: 24px; line-height: 1.45; }
.jc-flips.is-carousel .jc-flip-a > * { width: 100%; max-width: 980px; margin-left: auto !important; margin-right: auto !important; }
.jc-flips.is-carousel .jc-flip-a > :first-child { margin-top: auto !important; }
.jc-flips.is-carousel .jc-flip-a > :last-child { margin-bottom: auto !important; }
.jc-flips.is-carousel .jc-flip-a > p + p { margin-top: 0.6em !important; }
@media (max-width: 720px) {
    .jc-flips.is-carousel { height: clamp(440px, 72vh, 580px); }
    .jc-flips.is-carousel .jc-flip-a { font-size: 19px; }
    .jc-flips.is-carousel .jc-flip-face { padding: 18px 18px 16px; }
}