{"id":750,"date":"2026-08-26T09:26:14","date_gmt":"2026-08-26T09:26:14","guid":{"rendered":"https:\/\/www.labiryntywiary.pl\/?page_id=750"},"modified":"2026-08-27T09:50:43","modified_gmt":"2026-08-27T09:50:43","slug":"baza-nowych-sprawnosci","status":"publish","type":"page","link":"https:\/\/www.labiryntywiary.pl\/?page_id=750","title":{"rendered":"Baza nowych sprawno\u015bci"},"content":{"rendered":"\n<!-- ==========================================\n     KOMPONENT: BANK NOWYCH SPRAWNO\u015aCI LLW (AKORDEON + MODAL)\n     DYNAMICZNA INTEGRACJA Z GOOGLE SHEETS (150+ SPRAWNO\u015aCI)\n     STYL: NEO-BRUTALISM \/ CATHOLIC SCOUTING\n=========================================== -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n                fontFamily: {\n                    sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n                    mono: ['\"Roboto Mono\"', 'monospace'],\n                },\n                colors: { \n                    brutal: { \n                        accent: '#4F46E5', \n                        red: '#DC2626', \n                        green: '#22C55E', \n                        yellow: '#EAB308', \n                        blue: '#3B82F6' \n                    } \n                }\n            }\n        }\n    }\n<\/script>\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&family=Roboto+Mono:wght@400;700&display=swap');\n    .font-sans-brutal { font-family: 'Plus Jakarta Sans', sans-serif; }\n    \n    .neo-badge {\n        border: 4px solid #000;\n        border-radius: 1.5rem;\n        box-shadow: 6px 6px 0px 0px #000;\n        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    .neo-badge:hover {\n        transform: translateY(-3px);\n        box-shadow: 9px 9px 0px 0px #000;\n    }\n    .neo-btn { \n        border: 4px solid #000;\n        border-radius: 1rem;\n        box-shadow: 4px 4px 0px 0px #000;\n        transition: all 0.15s ease-in-out; \n    }\n    .neo-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px 0px #000; }\n    .neo-btn:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px 0px #000; }\n    \n    .neo-tag {\n        border-radius: 0.5rem;\n        box-shadow: 2px 2px 0px 0px #000000;\n        transition: all 0.15s ease-in-out;\n    }\n    .neo-tag:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0px 0px #000000; }\n    .neo-tag:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px 0px #000000; }\n\n    \/* Karta sprawno\u015bci w modalu (uk\u0142ad fizyczny z tabeli) *\/\n    .scout-card-modal {\n        border: 4px solid #000;\n        background-color: #ffffff;\n        box-shadow: 8px 8px 0px 0px #000;\n        border-radius: 1rem;\n        overflow: hidden;\n    }\n\n    \/* Kafelek na li\u015bcie akordeonu *\/\n    .badge-tile {\n        border: 3px solid #000;\n        background: #ffffff;\n        box-shadow: 3px 3px 0px 0px #000;\n        border-radius: 0.75rem;\n        transition: all 0.15s ease;\n    }\n    .badge-tile:hover {\n        transform: translate(-2px, -2px);\n        box-shadow: 6px 6px 0px 0px #000;\n        border-color: #000;\n    }\n\n    \/* Ni\u0107 Ariadny *\/\n    .ariadne-thread {\n        background-image: linear-gradient(to bottom, #DC2626 50%, transparent 50%);\n        background-size: 4px 20px;\n        background-repeat: repeat-y;\n        background-position: center;\n        width: 4px;\n        margin: 0 auto;\n    }\n\n    \/* DRUKOWANIE \/ GENEROWANIE PDF KARTY *\/\n    @media print {\n        header, footer, nav, #mainContent, .no-print {\n            display: none !important;\n        }\n        body, html {\n            background: white !important;\n            padding: 0 !important;\n            margin: 0 !important;\n        }\n        #modalBackdrop {\n            position: static !important;\n            background: none !important;\n            display: block !important;\n            padding: 0 !important;\n        }\n        #modalContainer {\n            box-shadow: none !important;\n            border: 2px solid #000 !important;\n            max-width: 100% !important;\n            width: 100% !important;\n            margin: 0 !important;\n            page-break-inside: avoid;\n        }\n        .scout-card-modal {\n            box-shadow: none !important;\n            border: 2px solid #000 !important;\n        }\n    }\n<\/style>\n\n<div class=\"font-sans-brutal bg-white text-black min-h-screen pb-24 selection:bg-brutal-accent selection:text-white\" id=\"mainContent\">\n    <main class=\"max-w-7xl mx-auto px-4 md:px-6 xl:px-8 py-6 xl:py-12 relative\">\n        \n        <!-- HERO -->\n        <section class=\"mb-12 mt-0 text-center xl:text-left\">\n            <div class=\"flex flex-wrap items-center justify-center xl:justify-start gap-3 mb-6\">\n                <span class=\"font-mono text-[10px] font-bold uppercase tracking-widest bg-gray-100 text-black border-[2px] border-black rounded-full inline-block px-4 py-1\">Duszpasterstwo S\u0142u\u017cby Liturgicznej<\/span>\n                <span class=\"font-mono text-[10px] font-bold uppercase tracking-widest bg-brutal-accent text-white border-[2px] border-black rounded-full inline-block px-3 py-1\">\n                    Aktualizacje &#038; Nowe Sprawno\u015bci\n                <\/span>\n            <\/div>\n            \n            <h1 class=\"text-4xl sm:text-6xl md:text-7xl xl:text-8xl font-black uppercase tracking-tight leading-none mb-8 break-words\">\n                Nowe <br class=\"hidden xl:block\">\n                <span class=\"text-brutal-accent relative inline-block\">\n                    Sprawno\u015bci\n                    <svg class=\"absolute w-full h-4 -bottom-2 left-0 text-brutal-accent\/30\" viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\"><path d=\"M0 5 Q 50 10 100 5\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\" fill=\"transparent\"\/><\/svg>\n                <\/span>\n            <\/h1>\n            \n            <div class=\"border-l-[4px] border-brutal-accent pl-4 md:pl-6 py-2 max-w-4xl\">\n                <p class=\"text-lg md:text-2xl font-bold leading-relaxed text-black mb-3\">\n                    Oficjalne centrum aktualizacji i rozszerze\u0144 systemu LLW. Znajdziesz tutaj sprawno\u015bci zaktualizowane wzgl\u0119dem wyda\u0144 drukowanych sprzed wrze\u015bnia 2026 roku oraz zupe\u0142nie nowe \u015bcie\u017cki formacyjne, kt\u00f3re nie znalaz\u0142y si\u0119 w wersji ksi\u0105\u017ckowej.\n                <\/p>\n                <p class=\"text-sm md:text-base font-bold text-gray-600\">\n                    Wybierz dzia\u0142, otw\u00f3rz interesuj\u0105c\u0105 Ci\u0119 sprawno\u015b\u0107 i pobierz gotow\u0105 kart\u0119 w formacie PDF do druku i realizacji na zbi\u00f3rkach.\n                <\/p>\n            <\/div>\n        <\/section>\n\n        <!-- NI\u0106 ARIADNY -->\n        <div class=\"h-10 ariadne-thread hidden md:block opacity-50 no-print\"><\/div>\n\n        <!-- 01: PASEK WYSZUKIWANIA I STATYSTYK -->\n        <section class=\"my-8 no-print\">\n            <div class=\"neo-badge p-6 md:p-8 bg-gray-50 flex flex-col gap-6\">\n                \n                <div class=\"flex flex-col lg:flex-row items-center justify-between gap-4\">\n                    <!-- Live Search -->\n                    <div class=\"w-full lg:w-3\/5 relative\">\n                        <input \n                            type=\"text\" \n                            id=\"searchInput\" \n                            placeholder=\"Szukaj sprawno\u015bci (np. kielich, \u015bpiew, kadzid\u0142o, A:1)...\" \n                            class=\"w-full bg-white border-[3px] border-black rounded-xl px-5 py-4 font-bold text-sm text-black placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brutal-accent shadow-[3px_3px_0px_0px_#000]\"\n                        >\n                    <\/div>\n\n                    <!-- Przyciski masowe akordeon\u00f3w -->\n                    <div class=\"flex items-center gap-2 w-full lg:w-auto justify-between lg:justify-end\">\n                        <button onclick=\"expandAllAccordions(true)\" class=\"neo-tag bg-white hover:bg-black hover:text-white text-black font-black text-xs uppercase px-4 py-3 border-[2px] border-black transition-all\">\n                            Rozwi\u0144 Wszystkie\n                        <\/button>\n                        <button onclick=\"expandAllAccordions(false)\" class=\"neo-tag bg-white hover:bg-black hover:text-white text-black font-black text-xs uppercase px-4 py-3 border-[2px] border-black transition-all\">\n                            Zwi\u0144 Wszystkie\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Pasek wska\u017anik\u00f3w -->\n                <div class=\"flex flex-wrap items-center justify-between gap-4 pt-4 border-t-[2px] border-gray-200\">\n                    <div class=\"flex items-center gap-6\">\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"font-mono text-xs font-bold text-gray-500 uppercase\">Dzia\u0142\u00f3w formacyjnych:<\/span>\n                            <span id=\"departmentsCount\" class=\"font-black text-base text-black bg-white border-[2px] border-black px-2.5 py-0.5 rounded-lg shadow-[2px_2px_0px_0px_#000]\">0<\/span>\n                        <\/div>\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"font-mono text-xs font-bold text-gray-500 uppercase\">Dost\u0119pnych sprawno\u015bci:<\/span>\n                            <span id=\"badgesTotalCount\" class=\"font-black text-base text-black bg-brutal-yellow border-[2px] border-black px-2.5 py-0.5 rounded-lg shadow-[2px_2px_0px_0px_#000]\">0<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <span class=\"font-mono text-[11px] font-bold text-gray-500 hidden sm:inline\">\n                        Kliknij na wybran\u0105 sprawno\u015b\u0107, aby zobaczy\u0107 pe\u0142n\u0105 kart\u0119 zadania.\n                    <\/span>\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n        <!-- 02: KONTENER AKORDEON\u00d3W (DZIA\u0141Y I SPRAWNO\u015aCI) -->\n        <section class=\"my-10\">\n            \n            <!-- Loader \u0142adowania danych -->\n            <div id=\"loadingState\" class=\"text-center py-20\">\n                <div class=\"w-14 h-14 border-[4px] border-black border-t-brutal-accent rounded-full animate-spin mx-auto mb-4\"><\/div>\n                <p class=\"font-mono text-sm font-bold uppercase tracking-widest text-gray-600\">Wczytywanie banku sprawno\u015bci&#8230;<\/p>\n            <\/div>\n\n            <!-- Komunikat b\u0142\u0119du -->\n            <div id=\"errorState\" class=\"hidden neo-badge bg-brutal-red\/10 border-brutal-red p-8 text-center max-w-2xl mx-auto my-8\">\n                <div class=\"w-12 h-12 rounded-full bg-brutal-red text-white font-black text-2xl flex items-center justify-center mx-auto mb-4\">!<\/div>\n                <h3 class=\"text-xl font-black uppercase text-brutal-red mb-2\">Chwilowy problem z wczytaniem<\/h3>\n                <p class=\"text-sm font-bold text-gray-700 leading-relaxed mb-4\" id=\"errorMessage\">\n                    Nie uda\u0142o si\u0119 po\u0142\u0105czy\u0107 z baz\u0105 sprawno\u015bci. Spr\u00f3buj od\u015bwie\u017cy\u0107 stron\u0119.\n                <\/p>\n                <button onclick=\"loadGoogleSheetData()\" class=\"neo-btn bg-black text-white px-6 py-3 font-bold text-xs uppercase\">Od\u015bwie\u017c dane<\/button>\n            <\/div>\n\n            <!-- AKORDEONY GENEROWANE DYNAMICZNIE PRZEZ JS -->\n            <div class=\"space-y-6\" id=\"accordionContainer\">\n                <!-- Wstrzykiwane przez JS -->\n            <\/div>\n\n            <!-- Stan braku wynik\u00f3w wyszukiwania -->\n            <div id=\"noResultsState\" class=\"hidden neo-badge bg-white p-12 text-center my-8\">\n                <h3 class=\"text-2xl font-black uppercase mb-2\">Brak pasuj\u0105cych sprawno\u015bci<\/h3>\n                <p class=\"text-sm font-bold text-gray-500 mb-4\">Nie znaleziono pozycji pasuj\u0105cych do szukanej frazy.<\/p>\n                <button onclick=\"clearSearch()\" class=\"neo-btn bg-black text-white px-6 py-3 font-bold text-xs uppercase\">Wyczy\u015b\u0107 wyszukiwanie<\/button>\n            <\/div>\n\n        <\/section>\n\n        <!-- NI\u0106 ARIADNY -->\n        <div class=\"h-16 ariadne-thread hidden md:block opacity-50 no-print\"><\/div>\n\n        <!-- 03: JAK ZDOBYWA\u0106 SPRAWNO\u015aCI W PARAFII (SEKCJA DLA U\u017bYTKOWNIK\u00d3W) -->\n        <section class=\"my-16 no-print\">\n            <div class=\"neo-badge p-8 xl:p-12 bg-gray-50 border-l-[12px] border-l-brutal-accent\">\n                <div class=\"flex items-center gap-4 mb-6\">\n                    <div class=\"w-12 h-12 bg-black text-white rounded-full flex items-center justify-center font-mono font-black text-sm shrink-0\">\n                        03\n                    <\/div>\n                    <div>\n                        <span class=\"font-mono text-[10px] font-bold uppercase tracking-widest text-gray-500\">Metoda Skautowa w Praktyce<\/span>\n                        <h2 class=\"text-2xl md:text-3xl font-black uppercase text-black\">Jak zdobywa\u0107 sprawno\u015bci w parafii?<\/h2>\n                    <\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 my-6\">\n                    <div class=\"bg-white border-[3px] border-black p-6 rounded-2xl shadow-[3px_3px_0px_0px_#000]\">\n                        <div class=\"w-8 h-8 rounded-full bg-brutal-green text-black font-black flex items-center justify-center text-sm mb-3 border border-black\">1<\/div>\n                        <h3 class=\"font-black uppercase text-base mb-2\">Wyb\u00f3r i Wydruk<\/h3>\n                        <p class=\"text-xs font-bold text-gray-600 leading-relaxed\">\n                            Ministrant lub animator wybiera sprawno\u015b\u0107, otwiera jej kart\u0119 i pobiera gotowy plik PDF do wydruku.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-white border-[3px] border-black p-6 rounded-2xl shadow-[3px_3px_0px_0px_#000]\">\n                        <div class=\"w-8 h-8 rounded-full bg-brutal-yellow text-black font-black flex items-center justify-center text-sm mb-3 border border-black\">2<\/div>\n                        <h3 class=\"font-black uppercase text-base mb-2\">Realizacja 4 krok\u00f3w<\/h3>\n                        <p class=\"text-xs font-bold text-gray-600 leading-relaxed\">\n                            Uczestnik czyta fragment, skanuje kod QR do wideo, zapoznaje si\u0119 z teori\u0105 i wykonuje zadanie praktyczne.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-white border-[3px] border-black p-6 rounded-2xl shadow-[3px_3px_0px_0px_#000]\">\n                        <div class=\"w-8 h-8 rounded-full bg-brutal-red text-white font-black flex items-center justify-center text-sm mb-3 border border-black\">3<\/div>\n                        <h3 class=\"font-black uppercase text-base mb-2\">Zaliczenie i Odznaka<\/h3>\n                        <p class=\"text-xs font-bold text-gray-600 leading-relaxed\">\n                            Animator lub duszpasterz weryfikuje wykonanie, podpisuje kart\u0119 i odnotowuje zdobycie odznaki w LLW APP.\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flex flex-col sm:flex-row items-center gap-4 mt-8\">\n                    <a href=\"https:\/\/www.app.labiryntywiary.pl\/\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-black text-white font-black uppercase text-xs sm:text-sm tracking-widest neo-btn px-8 py-4 hover:bg-brutal-accent transition-colors\">\n                        Przejd\u017a do LLW APP\n                    <\/a>\n                    <a href=\"https:\/\/www.labiryntywiary.pl\/?page_id=638\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-white text-black font-black uppercase text-xs sm:text-sm tracking-widest neo-btn px-6 py-4 hover:bg-gray-100 transition-colors\">\n                        Poznaj Struktur\u0119 Formacji\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- NI\u0106 ARIADNY -->\n        <div class=\"h-16 ariadne-thread hidden md:block opacity-50 no-print\"><\/div>\n\n        <!-- 04: GLOBALNE CTA -->\n        <section class=\"mt-12 mb-6 text-center px-4 border-[4px] border-black rounded-[2rem] p-8 md:p-14 bg-white shadow-[10px_10px_0px_0px_#000000] relative overflow-hidden no-print\">\n            <div class=\"absolute inset-0 opacity-5\" style=\"background-image: radial-gradient(#000 2px, transparent 2px); background-size: 24px 24px;\"><\/div>\n            \n            <div class=\"relative z-10 max-w-4xl mx-auto\">\n                <span class=\"font-mono text-[10px] font-bold uppercase tracking-widest bg-gray-100 text-black border-[2px] border-black rounded-full inline-block px-4 py-1 mb-6\">Wsparcie Duszpasterstwa<\/span>\n                \n                <h2 class=\"text-3xl sm:text-4xl md:text-5xl font-black uppercase mb-6 leading-tight\">\n                    Wprowad\u017a Sprawno\u015bci <br>Do Swojej Parafii\n                <\/h2>\n                \n                <p class=\"text-base md:text-xl font-bold text-gray-700 mb-10 max-w-2xl mx-auto leading-relaxed\">\n                    Zam\u00f3w komplet podr\u0119cznik\u00f3w i kart sprawno\u015bci lub aktywuj cyfrow\u0105 platform\u0119 LLW APP dla ministrant\u00f3w i lektor\u00f3w.\n                <\/p>\n                \n                <div class=\"flex flex-col sm:flex-row items-center justify-center gap-5\">\n                    <a href=\"https:\/\/www.labiryntywiary.pl\/?page_id=653\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-black text-white font-black uppercase text-base md:text-lg tracking-[0.1em] neo-btn px-8 py-5 hover:bg-brutal-accent animate-[pulse_3s_ease-in-out_infinite] hover:animate-none transition-colors\">\n                        ZAMAWIAM MATERIA\u0141Y\n                    <\/a>\n                    \n                    <a href=\"https:\/\/www.labiryntywiary.pl\/?page_id=687\" class=\"inline-flex w-full sm:w-auto items-center justify-center bg-white text-black font-black uppercase text-base md:text-lg tracking-[0.1em] neo-btn px-8 py-5 hover:bg-gray-50 transition-colors\">\n                        AKTYWUJ KOD DOST\u0118PU\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/main>\n<\/div>\n\n<!-- ==========================================\n     MODAL ZE SZCZEG\u00d3\u0141AMI KARTY SPRAWNO\u015aCI\n     (WIERNE ODTWORZENIE FIZYCZNEJ KARTY Z OBRAZU)\n=========================================== -->\n<div id=\"modalBackdrop\" class=\"fixed inset-0 bg-black\/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-2 sm:p-4 md:p-6 overflow-y-auto\" onclick=\"handleBackdropClick(event)\">\n    \n    <div id=\"modalContainer\" class=\"bg-white border-[3px] sm:border-[4px] border-black rounded-2xl sm:rounded-[1.5rem] shadow-[6px_6px_0px_0px_#000] sm:shadow-[12px_12px_0px_0px_#000] w-full max-w-3xl max-h-[94vh] overflow-y-auto p-3 sm:p-6 md:p-8 relative my-auto\" onclick=\"event.stopPropagation()\">\n        \n        <!-- NAG\u0141\u00d3WEK MODALU DLA MOBILE Z PRZYCISKIEM ZAMKNI\u0118CIA (ZAPOBIEGA NACHODZENIU NA KART\u0118) -->\n        <div class=\"flex items-center justify-between pb-2 mb-2 border-b-[2px] border-black sm:hidden no-print\">\n            <span class=\"font-mono text-[10px] font-black uppercase tracking-wider text-gray-600\">Karta Sprawno\u015bci LLW<\/span>\n            <button onclick=\"closeModal()\" class=\"w-8 h-8 bg-black text-white rounded-lg flex items-center justify-center font-black text-sm active:scale-95 transition-transform\" aria-label=\"Zamknij\">\n                \u2715\n            <\/button>\n        <\/div>\n\n        <!-- PRZYCISK ZAMKNI\u0118CIA (X) - WIDOCZNY NA DESKTOPIE -->\n        <button onclick=\"closeModal()\" class=\"hidden sm:flex absolute top-4 right-4 sm:top-5 sm:right-5 z-50 w-10 h-10 bg-white border-[3px] border-black rounded-xl items-center justify-center font-black text-xl hover:bg-black hover:text-white transition-colors shadow-[3px_3px_0px_0px_#000] no-print cursor-pointer\" aria-label=\"Zamknij\">\n            \u2715\n        <\/button>\n\n        <!-- KONTENER KARTY (WYPE\u0141NIANY PRZEZ JS) -->\n        <div id=\"modalCardContent\" class=\"overflow-x-auto\">\n            <!-- Wstrzykiwane przez JS -->\n        <\/div>\n\n        <!-- DOLNY PASEK AKCJI W MODALU -->\n        <div class=\"mt-4 sm:mt-6 pt-4 sm:pt-6 border-t-[3px] border-black flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4 no-print\">\n            <button onclick=\"printCard()\" class=\"w-full sm:w-auto inline-flex items-center justify-center bg-brutal-yellow text-black font-black uppercase text-xs sm:text-sm tracking-wider neo-btn px-5 py-3 sm:px-6 sm:py-3.5 hover:bg-black hover:text-white transition-colors\">\n                Generuj PDF \/ Drukuj Kart\u0119\n            <\/button>\n\n            <div class=\"flex flex-col sm:flex-row items-center gap-2 sm:gap-3 w-full sm:w-auto\">\n                <a href=\"https:\/\/www.app.labiryntywiary.pl\/\" class=\"w-full sm:w-auto inline-flex items-center justify-center bg-black text-white font-black uppercase text-xs sm:text-sm tracking-wider neo-btn px-5 py-3 sm:px-6 sm:py-3.5 hover:bg-brutal-accent transition-colors\">\n                    Otw\u00f3rz w LLW APP\n                <\/a>\n                <button onclick=\"closeModal()\" class=\"w-full sm:w-auto inline-flex items-center justify-center bg-gray-100 text-black font-black uppercase text-xs sm:text-sm tracking-wider neo-tag px-5 py-2.5 sm:py-3 border-[2px] border-black hover:bg-gray-200 transition-colors\">\n                    Zamknij\n                <\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<!-- ==========================================\n     LOGIKA JS: AKORDEONY, MODAL, GOOGLE SHEETS, DRUK\n=========================================== -->\n<script>\n    \/**\n     * =========================================================================\n     * KONFIGURACJA ARKUSZA GOOGLE\n     * =========================================================================\n     *\/\n    const CONFIG = {\n        \/\/ Wklej tutaj sw\u00f3j identyfikator arkusza Google:\n        SHEET_ID: \"18PGuCq1bqWJ9_UGYMVwlkXj8dzzX8JVc99OVS0YlcE4\",\n        \n        \/\/ Nazwa zak\u0142adki (domy\u015blnie Arkusz1)\n        SHEET_NAME: \"Arkusz1\",\n        \n        \/\/ Przyk\u0142adowe dane pocz\u0105tkowe zgodne z now\u0105 struktur\u0105 10 kolumn\n        FALLBACK_DATA: [\n            {\n                stopien: \"A1\",\n                numer: \"1\",\n                kod: \"A1:1\",\n                sprawnosc: \"Pos\u0142uga przy kielichu\",\n                dzial: \"S\u0142u\u017cba O\u0142tarza\",\n                kolor: \"zielony\",\n                ikonaUrl: \"\",\n                przeczytal: \"Przeczyta\u0142 i om\u00f3wi\u0142 fragment: \u0141k 22,14\u201320.\",\n                obejrzal: \"https:\/\/youtu.be\/RjYkqJV8NXw?si=Uf91O3UepOQn94em\",\n                kartaWiedzy: \"Zapozna\u0142 si\u0119 z kart\u0105 wiedzy nr 10 i 11.\",\n                wykonal: \"Wyt\u0142umaczy\u0142 i wykona\u0142 czynno\u015bci zwi\u0105zane z przynoszeniem kielicha do o\u0142tarza.\"\n            },\n            {\n                stopien: \"B1\",\n                numer: \"1\",\n                kod: \"B1:1\",\n                sprawnosc: \"Pos\u0142uga przy ampu\u0142kach\",\n                dzial: \"S\u0142u\u017cba O\u0142tarza\",\n                kolor: \"zielony\",\n                ikonaUrl: \"\",\n                przeczytal: \"Przeczyta\u0142 fragment o przygotowaniu dar\u00f3w w OWMR (nr 142).\",\n                obejrzal: \"https:\/\/youtu.be\/RjYkqJV8NXw\",\n                kartaWiedzy: \"Zapozna\u0142 si\u0119 z kart\u0105 wiedzy nr 12 (Naczynia liturgiczne: ampu\u0142ki i lavabo).\",\n                wykonal: \"Prawid\u0142owo poda\u0142 ampu\u0142ki kap\u0142anowi i wykona\u0142 obmycie r\u0105k (Lavabo).\"\n            },\n            {\n                stopien: \"C1\",\n                numer: \"45\",\n                kod: \"C1:45\",\n                sprawnosc: \"Znawca dyrygentury\",\n                dzial: \"\u015apiew\",\n                kolor: \"niebieski\",\n                ikonaUrl: \"\",\n                przeczytal: \"Przeczyta\u0142 podstawy gest\u00f3w dyrygenckich w muzyce ko\u015bcielnej.\",\n                obejrzal: \"https:\/\/youtu.be\/RjYkqJV8NXw\",\n                kartaWiedzy: \"Zapozna\u0142 si\u0119 z kart\u0105 wiedzy nr 30 (Dykcja, intonacja i tempo).\",\n                wykonal: \"Poprowadzi\u0142 \u015bpiew scholi podczas pr\u00f3by liturgicznej.\"\n            }\n        ]\n    };\n\n    let allBadges = [];\n    let activeModalBadge = null;\n\n    \/\/ Paleta styl\u00f3w kart (czysty Neo-Brutalizm bez ikonek)\n    const COLOR_THEMES = {\n        zielony: {\n            border: 'border-brutal-green',\n            badgeBg: 'bg-brutal-green',\n            text: 'text-green-950'\n        },\n        czerwony: {\n            border: 'border-brutal-red',\n            badgeBg: 'bg-brutal-red',\n            text: 'text-white'\n        },\n        niebieski: {\n            border: 'border-brutal-blue',\n            badgeBg: 'bg-brutal-blue',\n            text: 'text-white'\n        },\n        zolty: {\n            border: 'border-brutal-yellow',\n            badgeBg: 'bg-brutal-yellow',\n            text: 'text-black'\n        }\n    };\n\n    \/\/ Pobieranie danych z Google Sheets\n    async function loadGoogleSheetData() {\n        const loadingEl = document.getElementById('loadingState');\n        const errorEl = document.getElementById('errorState');\n\n        loadingEl.classList.remove('hidden');\n        errorEl.classList.add('hidden');\n\n        if (!CONFIG.SHEET_ID || CONFIG.SHEET_ID === \"TUTAJ_WKLEJ_ID_ARKUSZA_GOOGLE\") {\n            console.warn(\"U\u017cywam danych demonstracyjnych FALLBACK_DATA.\");\n            allBadges = CONFIG.FALLBACK_DATA;\n            renderAll();\n            loadingEl.classList.add('hidden');\n            return;\n        }\n\n        \/\/ Je\u015bli podano nazw\u0119 arkusza dodajemy parametr, w przeciwnym razie pobiera pierwsz\u0105 zak\u0142adk\u0119 domy\u015blnie\n        const sheetParam = CONFIG.SHEET_NAME ? `&sheet=${encodeURIComponent(CONFIG.SHEET_NAME)}` : '';\n        const gvizUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${CONFIG.SHEET_ID}\/gviz\/tq?tqx=out:json${sheetParam}`;\n\n        try {\n            const response = await fetch(gvizUrl);\n            if (!response.ok) throw new Error(`HTTP error ${response.status}`);\n            \n            const text = await response.text();\n            const startIdx = text.indexOf('{');\n            const endIdx = text.lastIndexOf('}');\n            if (startIdx === -1 || endIdx === -1) throw new Error(\"Nieprawid\u0142owy format odpowiedzi Google Visualization\");\n            const jsonText = text.substring(startIdx, endIdx + 1);\n            const json = JSON.parse(jsonText);\n\n            const rows = json.table.rows;\n            const parsed = [];\n\n            rows.forEach((r, idx) => {\n                const c = r.c;\n                if (!c) return;\n\n                const getVal = (i) => (c[i] && c[i].v !== null && c[i].v !== undefined) ? String(c[i].v).trim() : \"\";\n\n                \/\/ MAPOWANIE NOWEJ STRUKTURY ARKUSZA:\n                \/\/ Kolumna A (0): STOPIE\u0143 (np. A1, C1)\n                \/\/ Kolumna B (1): NUMER (np. 1, 45)\n                \/\/ Kolumna C (2): SPRAWNO\u015a\u0106 (np. Znawca dyrygentury)\n                \/\/ Kolumna D (3): DZIA\u0141 (np. \u015apiew)\n                \/\/ Kolumna E (4): KOLOR (zielony, czerwony, niebieski, zolty)\n                \/\/ Kolumna F (5): IKONA_URL\n                \/\/ Kolumna G (6): PRZECZYTAL\n                \/\/ Kolumna H (7): OBEJRZAL\n                \/\/ Kolumna I (8): KARTA_WIEDZY\n                \/\/ Kolumna J (9): WYKONAL\n\n                const stopien = getVal(0);\n                const numer = getVal(1);\n                const sprawnosc = getVal(2);\n                const dzial = getVal(3);\n\n                if (!stopien && !sprawnosc && !dzial) return;\n\n                \/\/ IGNOROWANIE WIERSZA Z NAG\u0141\u00d3WKAMI TABELI\n                const stopienLower = stopien.toLowerCase();\n                const numerLower = numer.toLowerCase();\n                const sprawnoscLower = sprawnosc.toLowerCase();\n                const dzialLower = dzial.toLowerCase();\n\n                if (\n                    stopienLower.includes('stopie') || \n                    numerLower.includes('numer') || \n                    sprawnoscLower.includes('sprawno') || \n                    dzialLower.includes('dzia')\n                ) {\n                    return; \/\/ Pomi\u0144 wiersz nag\u0142\u00f3wkowy\n                }\n\n                \/\/ Generowanie sp\u00f3jnego kodu (np. C1:45, A1:1)\n                let kod = \"\";\n                if (stopien && numer) {\n                    kod = `${stopien}:${numer}`;\n                } else if (stopien || numer) {\n                    kod = stopien || numer;\n                } else {\n                    kod = `SP-${idx+1}`;\n                }\n\n                parsed.push({\n                    stopien: stopien,\n                    numer: numer,\n                    kod: kod,\n                    sprawnosc: sprawnosc || \"Bez nazwy\",\n                    dzial: dzial || \"Inne Dzia\u0142y\",\n                    kolor: (getVal(4) || \"zielony\").toLowerCase(),\n                    ikonaUrl: getVal(5),\n                    przeczytal: getVal(6),\n                    obejrzal: getVal(7),\n                    kartaWiedzy: getVal(8),\n                    wykonal: getVal(9)\n                });\n            });\n\n            allBadges = parsed.length > 0 ? parsed : CONFIG.FALLBACK_DATA;\n            renderAll();\n            loadingEl.classList.add('hidden');\n\n        } catch (err) {\n            console.error(\"B\u0142\u0105d \u0142adowania z Google Sheets:\", err);\n            allBadges = CONFIG.FALLBACK_DATA;\n            renderAll();\n            loadingEl.classList.add('hidden');\n            document.getElementById('errorMessage').innerText = `Wy\u015bwietlam dane demonstracyjne. B\u0142\u0105d po\u0142\u0105czenia: ${err.message}`;\n            errorEl.classList.remove('hidden');\n        }\n    }\n\n    \/\/ Grupowanie sprawno\u015bci wed\u0142ug DZIA\u0141\u00d3W\n    function groupByDepartment(badges) {\n        return badges.reduce((acc, badge) => {\n            const dept = badge.dzial || \"Inne Dzia\u0142y\";\n            if (!acc[dept]) acc[dept] = [];\n            acc[dept].push(badge);\n            return acc;\n        }, {});\n    }\n\n    \/\/ G\u0142\u00f3wna funkcja renderuj\u0105ca akordeony\n    function renderAll(searchFilter = '') {\n        const container = document.getElementById('accordionContainer');\n        const noResults = document.getElementById('noResultsState');\n        const deptCountEl = document.getElementById('departmentsCount');\n        const totalCountEl = document.getElementById('badgesTotalCount');\n\n        const searchLower = searchFilter.toLowerCase().trim();\n\n        \/\/ Filtrowanie sprawno\u015bci\n        const filteredBadges = allBadges.filter(b => {\n            if (!searchLower) return true;\n            return (b.sprawnosc && b.sprawnosc.toLowerCase().includes(searchLower)) ||\n                   (b.dzial && b.dzial.toLowerCase().includes(searchLower)) ||\n                   (b.kod && b.kod.toLowerCase().includes(searchLower)) ||\n                   (b.stopien && b.stopien.toLowerCase().includes(searchLower)) ||\n                   (b.numer && String(b.numer).toLowerCase().includes(searchLower)) ||\n                   (b.przeczytal && b.przeczytal.toLowerCase().includes(searchLower)) ||\n                   (b.kartaWiedzy && b.kartaWiedzy.toLowerCase().includes(searchLower)) ||\n                   (b.wykonal && b.wykonal.toLowerCase().includes(searchLower));\n        });\n\n        totalCountEl.innerText = filteredBadges.length;\n\n        if (filteredBadges.length === 0) {\n            container.innerHTML = '';\n            deptCountEl.innerText = 0;\n            noResults.classList.remove('hidden');\n            return;\n        }\n\n        noResults.classList.add('hidden');\n\n        const grouped = groupByDepartment(filteredBadges);\n        const deptNames = Object.keys(grouped);\n        deptCountEl.innerText = deptNames.length;\n\n        container.innerHTML = deptNames.map((deptName, index) => {\n            const items = grouped[deptName];\n            const deptId = `dept-accordion-${index}`;\n            \/\/ Je\u015bli szukamy frazy, akordeony otwieraj\u0105 si\u0119 automatycznie\n            const isOpen = searchLower.length > 0 || index === 0;\n\n            return `\n                <div class=\"border-[4px] border-black rounded-[1.25rem] bg-white overflow-hidden shadow-[6px_6px_0px_0px_#000] transition-all\">\n                    \n                    <!-- NAG\u0141\u00d3WEK AKORDEONU (DZIA\u0141) -->\n                    <button \n                        type=\"button\" \n                        onclick=\"toggleAccordion('${deptId}')\" \n                        class=\"w-full p-5 md:p-6 bg-gray-50 hover:bg-gray-100 flex items-center justify-between text-left border-b-[3px] border-black transition-colors group cursor-pointer\"\n                        aria-expanded=\"${isOpen}\"\n                    >\n                        <div class=\"flex items-center gap-4 flex-wrap\">\n                            <div class=\"w-10 h-10 bg-black text-white font-mono rounded-xl flex items-center justify-center font-black text-xs shrink-0 group-hover:bg-brutal-accent transition-colors shadow-[2px_2px_0px_0px_#000]\">\n                                ${String(index + 1).padStart(2, '0')}\n                            <\/div>\n                            <div>\n                                <span class=\"font-mono text-[9px] uppercase font-bold tracking-widest text-gray-500 block leading-none mb-1\">DZIA\u0141 FORMACYJNY<\/span>\n                                <h3 class=\"font-black text-lg md:text-2xl uppercase text-black leading-tight\">${deptName}<\/h3>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"flex items-center gap-3\">\n                            <span class=\"font-mono text-xs font-black bg-white border-[2px] border-black px-3 py-1 rounded-full shadow-[2px_2px_0px_0px_#000]\">\n                                ${items.length} ${items.length === 1 ? 'sprawno\u015b\u0107' : (items.length < 5 ? 'sprawno\u015bci' : 'sprawno\u015bci')}\n                            <\/span>\n                            <div class=\"w-8 h-8 rounded-full border-[2px] border-black bg-white flex items-center justify-center font-black text-sm transition-transform duration-200 accordion-arrow ${isOpen ? 'rotate-180' : ''}\">\n                                \u25bc\n                            <\/div>\n                        <\/div>\n                    <\/button>\n\n                    <!-- ZAWARTO\u015a\u0106 AKORDEONU (GRID SPRAWNO\u015aCI W DANYM DZIALE) -->\n                    <div id=\"${deptId}\" class=\"${isOpen ? 'block' : 'hidden'} p-5 md:p-8 bg-white\">\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6\">\n                            ${items.map(badge => {\n                                const theme = COLOR_THEMES[badge.kolor] || COLOR_THEMES.zielony;\n                                return `\n                                    <div \n                                        onclick=\"openBadgeModal('${badge.kod}')\" \n                                        class=\"badge-tile p-4 md:p-5 flex flex-col justify-between cursor-pointer hover:bg-gray-50\/80 group border-l-[8px] ${theme.border}\"\n                                    >\n                                        <div>\n                                            <div class=\"flex items-center justify-between gap-2 mb-3\">\n                                                <span class=\"font-mono font-black text-xs text-black bg-gray-100 border-[2px] border-black px-2 py-0.5 rounded shadow-[1px_1px_0px_0px_#000]\">\n                                                    ${badge.kod}\n                                                <\/span>\n                                                <span class=\"w-7 h-7 rounded-lg ${theme.badgeBg} border-[2px] border-black flex items-center justify-center text-sm shadow-[1px_1px_0px_0px_#000]\">\n                                                    ${badge.ikonaUrl ? `<img decoding=\"async\" src=\"${badge.ikonaUrl}\" class=\"w-4 h-4 object-contain\">` : `<span class=\"w-2.5 h-2.5 bg-black rounded-full\"><\/span>`}\n                                                <\/span>\n                                            <\/div>\n                                            \n                                            <h4 class=\"font-black text-base md:text-lg uppercase text-black leading-snug group-hover:text-brutal-accent transition-colors mb-2\">\n                                                ${badge.sprawnosc}\n                                            <\/h4>\n\n                                            <p class=\"text-xs font-bold text-gray-600 line-clamp-2 leading-relaxed\">\n                                                ${badge.wykonal || badge.przeczytal || 'Kliknij, aby zobaczy\u0107 zadania...'}\n                                            <\/p>\n                                        <\/div>\n\n                                        <div class=\"mt-4 pt-3 border-t-[2px] border-gray-100 flex items-center justify-between\">\n                                            <span class=\"font-mono text-[10px] font-bold text-gray-400 uppercase\">Karta zada\u0144<\/span>\n                                            <span class=\"font-black text-xs text-black group-hover:text-brutal-accent transition-colors\">\n                                                Otw\u00f3rz kart\u0119\n                                            <\/span>\n                                        <\/div>\n                                    <\/div>\n                                `;\n                            }).join('')}\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            `;\n        }).join('');\n    }\n\n    \/\/ Otwieranie \/ zamykanie akordeonu\n    function toggleAccordion(id) {\n        const body = document.getElementById(id);\n        if (!body) return;\n        const isHidden = body.classList.contains('hidden');\n        const btn = body.previousElementSibling;\n        const arrow = btn.querySelector('.accordion-arrow');\n\n        if (isHidden) {\n            body.classList.remove('hidden');\n            if (arrow) arrow.classList.add('rotate-180');\n            btn.setAttribute('aria-expanded', 'true');\n        } else {\n            body.classList.add('hidden');\n            if (arrow) arrow.classList.remove('rotate-180');\n            btn.setAttribute('aria-expanded', 'false');\n        }\n    }\n\n    \/\/ Masowe rozwijanie\/zwijanie akordeon\u00f3w\n    function expandAllAccordions(expand = true) {\n        document.querySelectorAll('[id^=\"dept-accordion-\"]').forEach(body => {\n            const btn = body.previousElementSibling;\n            const arrow = btn.querySelector('.accordion-arrow');\n            if (expand) {\n                body.classList.remove('hidden');\n                if (arrow) arrow.classList.add('rotate-180');\n                btn.setAttribute('aria-expanded', 'true');\n            } else {\n                body.classList.add('hidden');\n                if (arrow) arrow.classList.remove('rotate-180');\n                btn.setAttribute('aria-expanded', 'false');\n            }\n        });\n    }\n\n    \/\/ Generowanie kodu QR dla linku wideo\n    function getQrCodeUrl(url) {\n        if (!url) return '';\n        return `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=160x160&margin=4&data=${encodeURIComponent(url)}`;\n    }\n\n    \/\/ Otwieranie modalu ze sprawno\u015bci\u0105\n    function openBadgeModal(kod) {\n        const badge = allBadges.find(b => b.kod === kod);\n        if (!badge) return;\n\n        activeModalBadge = badge;\n        const theme = COLOR_THEMES[badge.kolor] || COLOR_THEMES.zielony;\n        const qrUrl = badge.obejrzal ? getQrCodeUrl(badge.obejrzal) : '';\n        const modalContent = document.getElementById('modalCardContent');\n\n        modalContent.innerHTML = `\n            <div class=\"scout-card-modal w-full\">\n                \n                <!-- G\u00d3RNY BLOK KARTY (NAG\u0141\u00d3WEK) -->\n                <div class=\"border-b-[3px] sm:border-b-[4px] border-black grid grid-cols-12 bg-white\">\n                    \n                    <div class=\"col-span-8 sm:col-span-9 border-r-[3px] sm:border-r-[4px] border-black flex flex-col divide-y-[2px] sm:divide-y-[3px] divide-black\">\n                        \n                        <!-- 1. SPRAWNO\u015a\u0106 -->\n                        <div class=\"p-2.5 sm:p-5 bg-white\">\n                            <span class=\"font-mono text-[8px] sm:text-[9px] uppercase font-bold text-gray-500 block leading-none mb-1\">SPRAWNO\u015a\u0106<\/span>\n                            <h3 class=\"font-black text-sm sm:text-2xl md:text-3xl uppercase text-black leading-tight break-words\">${badge.sprawnosc}<\/h3>\n                        <\/div>\n\n                        <!-- 2. DZIA\u0141 (WY\u015aRODKOWANY) -->\n                        <div class=\"p-2 sm:p-3.5 bg-gray-50 flex flex-col items-center justify-center text-center\">\n                            <span class=\"font-mono text-[7px] sm:text-[8px] uppercase font-bold text-gray-500 block leading-none mb-0.5 sm:mb-1\">DZIA\u0141<\/span>\n                            <span class=\"font-black text-[10px] sm:text-base uppercase text-gray-900 leading-tight block break-words\">${badge.dzial}<\/span>\n                        <\/div>\n\n                        <!-- 3. KOD (WY\u015aRODKOWANY) -->\n                        <div class=\"p-2 sm:p-3 bg-white flex items-center justify-center gap-2 sm:gap-3 text-center\">\n                            <span class=\"font-mono text-[9px] sm:text-[10px] uppercase font-bold text-gray-500\">KOD:<\/span>\n                            <span class=\"font-mono font-black text-xs sm:text-lg text-black bg-gray-100 border-[2px] border-black px-2 sm:px-3 py-0.5 rounded shadow-[1px_1px_0px_0px_#000]\">${badge.kod}<\/span>\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- ODZNAKA \/ GRAFIKA -->\n                    <div class=\"col-span-4 sm:col-span-3 ${theme.badgeBg} p-2 sm:p-3 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n                        ${badge.ikonaUrl \n                            ? `<img decoding=\"async\" src=\"${badge.ikonaUrl}\" alt=\"${badge.sprawnosc}\" class=\"w-12 h-12 sm:w-20 sm:h-20 object-contain drop-shadow-[2px_2px_0px_#000]\">`\n                            : `<div class=\"w-10 h-10 sm:w-16 sm:h-16 bg-white border-[2px] sm:border-[3px] border-black rounded-xl sm:rounded-2xl flex items-center justify-center font-mono font-black text-xs sm:text-lg text-black shadow-[2px_2px_0px_0px_#000]\">${badge.kod}<\/div>`\n                        }\n                        <span class=\"font-mono text-[7px] sm:text-[8px] font-black uppercase tracking-widest text-black\/80 mt-1 sm:mt-2\">LLW BADGE<\/span>\n                    <\/div>\n\n                <\/div>\n\n                <!-- NAG\u0141\u00d3WEK TABELI ZADA\u0143 -->\n                <div class=\"grid grid-cols-12 bg-black text-white font-mono text-[8px] sm:text-[11px] font-black uppercase tracking-wider border-b-[2px] sm:border-b-[3px] border-black text-center\">\n                    <div class=\"col-span-7 sm:col-span-8 p-1.5 sm:p-2.5 text-left pl-2.5 sm:pl-4 border-r-[2px] border-gray-700\">ZADANIE DO WYKONANIA<\/div>\n                    <div class=\"col-span-2 sm:col-span-2 p-1.5 sm:p-2.5 border-r-[2px] border-gray-700\">DATA<\/div>\n                    <div class=\"col-span-3 sm:col-span-2 p-1.5 sm:p-2.5\">PODPIS<\/div>\n                <\/div>\n\n                <!-- WIERSZE ZADA\u0143 FORMACYJNYCH -->\n                <div class=\"divide-y-[2px] sm:divide-y-[3px] divide-black text-[11px] sm:text-sm font-bold bg-white\">\n                    \n                    <!-- 1. PRZECZYTA\u0141 -->\n                    <div class=\"grid grid-cols-12 min-h-[48px] sm:min-h-[56px] items-stretch\">\n                        <div class=\"col-span-7 sm:col-span-8 p-2 sm:p-4 border-r-[2px] sm:border-r-[3px] border-black flex flex-col sm:flex-row items-start gap-1.5 sm:gap-2.5\">\n                            <span class=\"font-mono text-[8px] sm:text-[10px] font-black uppercase bg-gray-100 border border-black px-1.5 py-0.5 rounded shrink-0\">1. Przeczyta\u0142<\/span>\n                            <span class=\"text-gray-800 leading-snug break-words\">${badge.przeczytal || \"\u2014\"}<\/span>\n                        <\/div>\n                        <div class=\"col-span-2 sm:col-span-2 border-r-[2px] sm:border-r-[3px] border-black bg-white\"><\/div>\n                        <div class=\"col-span-3 sm:col-span-2 bg-white\"><\/div>\n                    <\/div>\n\n                    <!-- 2. OBEJRZA\u0141 (Z KODEM QR) -->\n                    <div class=\"grid grid-cols-12 min-h-[64px] sm:min-h-[72px] items-stretch\">\n                        <div class=\"col-span-7 sm:col-span-8 p-2 sm:p-4 border-r-[2px] sm:border-r-[3px] border-black flex flex-col sm:flex-row items-start gap-2 sm:gap-3\">\n                            <span class=\"font-mono text-[8px] sm:text-[10px] font-black uppercase bg-gray-100 border border-black px-1.5 py-0.5 rounded shrink-0\">2. Obejrza\u0142<\/span>\n                            <div class=\"flex flex-col sm:flex-row items-start gap-2 sm:gap-3 w-full\">\n                                ${qrUrl ? `\n                                    <div class=\"shrink-0 border-[2px] border-black rounded p-0.5 bg-white shadow-[1px_1px_0px_0px_#000] sm:shadow-[2px_2px_0px_0px_#000]\">\n                                        <img decoding=\"async\" src=\"${qrUrl}\" alt=\"QR Kod\" class=\"w-10 h-10 sm:w-14 sm:h-14\">\n                                    <\/div>\n                                ` : ''}\n                                <div class=\"flex flex-col justify-center min-w-0 flex-1\">\n                                    <span class=\"text-[9px] sm:text-[11px] text-gray-600 mb-0.5\">Materia\u0142 wideo:<\/span>\n                                    ${badge.obejrzal ? `\n                                        <a href=\"${badge.obejrzal}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-brutal-accent hover:underline break-all text-[9px] sm:text-[11px] font-mono font-bold leading-tight\">\n                                            ${badge.obejrzal}\n                                        <\/a>\n                                    ` : '<span class=\"text-gray-400\">\u2014<\/span>'}\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"col-span-2 sm:col-span-2 border-r-[2px] sm:border-r-[3px] border-black bg-white\"><\/div>\n                        <div class=\"col-span-3 sm:col-span-2 bg-white\"><\/div>\n                    <\/div>\n\n                    <!-- 3. KARTA WIEDZY -->\n                    <div class=\"grid grid-cols-12 min-h-[48px] sm:min-h-[56px] items-stretch\">\n                        <div class=\"col-span-7 sm:col-span-8 p-2 sm:p-4 border-r-[2px] sm:border-r-[3px] border-black flex flex-col sm:flex-row items-start gap-1.5 sm:gap-2.5\">\n                            <span class=\"font-mono text-[8px] sm:text-[10px] font-black uppercase bg-gray-100 border border-black px-1.5 py-0.5 rounded shrink-0\">3. Karta Wiedzy<\/span>\n                            <span class=\"text-gray-800 leading-snug break-words\">${badge.kartaWiedzy || \"\u2014\"}<\/span>\n                        <\/div>\n                        <div class=\"col-span-2 sm:col-span-2 border-r-[2px] sm:border-r-[3px] border-black bg-white\"><\/div>\n                        <div class=\"col-span-3 sm:col-span-2 bg-white\"><\/div>\n                    <\/div>\n\n                    <!-- 4. WYKONA\u0141 -->\n                    <div class=\"grid grid-cols-12 min-h-[56px] sm:min-h-[64px] items-stretch bg-amber-50\/20\">\n                        <div class=\"col-span-7 sm:col-span-8 p-2 sm:p-4 border-r-[2px] sm:border-r-[3px] border-black flex flex-col sm:flex-row items-start gap-1.5 sm:gap-2.5\">\n                            <span class=\"font-mono text-[8px] sm:text-[10px] font-black uppercase bg-black text-white px-1.5 py-0.5 rounded shrink-0\">4. Wykona\u0142<\/span>\n                            <span class=\"text-black font-black leading-snug break-words\">${badge.wykonal || \"\u2014\"}<\/span>\n                        <\/div>\n                        <div class=\"col-span-2 sm:col-span-2 border-r-[2px] sm:border-r-[3px] border-black bg-white\"><\/div>\n                        <div class=\"col-span-3 sm:col-span-2 bg-white\"><\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n        `;\n\n        document.getElementById('modalBackdrop').classList.remove('hidden');\n        document.body.style.overflow = 'hidden';\n    }\n\n    \/\/ Zamykanie modalu\n    function closeModal() {\n        document.getElementById('modalBackdrop').classList.add('hidden');\n        document.body.style.overflow = '';\n        activeModalBadge = null;\n    }\n\n    \/\/ Zamykanie po klikni\u0119ciu w t\u0142o\n    function handleBackdropClick(event) {\n        if (event.target === document.getElementById('modalBackdrop')) {\n            closeModal();\n        }\n    }\n\n    \/\/ Zamkni\u0119cie klawiszem Escape\n    document.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') closeModal();\n    });\n\n    \/\/ Drukowanie \/ Zapis do PDF karty w oknie\n    function printCard() {\n        window.print();\n    }\n\n    \/\/ Wyszukiwanie na \u017cywo\n    document.addEventListener('DOMContentLoaded', () => {\n        const searchInput = document.getElementById('searchInput');\n        if (searchInput) {\n            searchInput.addEventListener('input', (e) => {\n                renderAll(e.target.value);\n            });\n        }\n\n        loadGoogleSheetData();\n    });\n\n    function clearSearch() {\n        const searchInput = document.getElementById('searchInput');\n        if (searchInput) {\n            searchInput.value = '';\n            renderAll('');\n        }\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Duszpasterstwo S\u0142u\u017cby Liturgicznej Aktualizacje &#038; Nowe Sprawno\u015bci Nowe Sprawno\u015bci Oficjalne centrum aktualizacji i rozszerze\u0144 systemu LLW. Znajdziesz tutaj sprawno\u015bci zaktualizowane wzgl\u0119dem wyda\u0144 drukowanych sprzed wrze\u015bnia 2026 roku oraz zupe\u0142nie nowe \u015bcie\u017cki formacyjne, kt\u00f3re nie znalaz\u0142y si\u0119 w wersji ksi\u0105\u017ckowej. Wybierz dzia\u0142, otw\u00f3rz interesuj\u0105c\u0105 Ci\u0119 sprawno\u015b\u0107 i pobierz gotow\u0105 kart\u0119 w formacie PDF do druku i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-750","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=750"}],"version-history":[{"count":9,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/750\/revisions"}],"predecessor-version":[{"id":771,"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=\/wp\/v2\/pages\/750\/revisions\/771"}],"wp:attachment":[{"href":"https:\/\/www.labiryntywiary.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}