/* /Components/FullScreenModal.razor.rz.scp.css */
/* --- Overlay (Tylko dla efektu tła podczas wjazdu) --- */
.fs-overlay[b-hsatahzape] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(25, 28, 31, 0.4);
    z-index: 2100; /* Wyżej niż BottomSheet */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(2px);
}

.fs-overlay.visible[b-hsatahzape] {
    opacity: 1;
}

/* --- Główny Kontener --- */
.fs-modal[b-hsatahzape] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Pełny ekran */
    background-color: #FFFFFF;
    z-index: 2101; /* Wyżej niż overlay */
    
    /* Animacja wjazdu od dołu */
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); /* Ta sama sprężystość */

    display: flex;
    flex-direction: column;
}

.fs-modal.open[b-hsatahzape] {
    transform: translateY(0);
}

/* --- Header --- */
.fs-header[b-hsatahzape] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Większy padding góry, aby odsunąć od krawędzi ekranu/status barów mobilnych */
    padding: 24px 32px 24px 32px; 
    flex-shrink: 0;
    background: #fff;
    /* Opcjonalnie: Sticky header effect przy scrollowaniu treści */
    z-index: 10;
}

.fs-title[b-hsatahzape] {
    font-size: 1.75rem; /* Jeszcze większy tytuł dla pełnego ekranu */
    font-weight: 800;
    color: #191C1F;
    letter-spacing: -0.02em;
}

/* --- Close Button --- */
.fs-close-btn[b-hsatahzape] {
    background: #F1F5F9; /* Tutaj dałem lekkie tło od razu, by przycisk był bardziej widoczny */
    border: none;
    border-radius: 50%;
    width: 48px; /* Większy przycisk dla łatwiejszego trafienia */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #191C1F;
    transition: all 0.2s;
}

.fs-close-btn .material-symbols-rounded[b-hsatahzape] {
    font-size: 28px;
}

.fs-close-btn:hover[b-hsatahzape] {
    background: #E2E8F0;
    transform: rotate(90deg); /* Mały bajer - obrót przy najechaniu */
}

/* --- Content --- */
.fs-content[b-hsatahzape] {
    flex: 1;
    overflow-y: auto;
    padding: 0 32px 60px 32px; /* Padding na dole na wszelki wypadek */
    
    /* Ukrywanie paska przewijania */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fs-content[b-hsatahzape]::-webkit-scrollbar {
    display: none;
}

/* /Components/GlobalBottomSheet.razor.rz.scp.css */
/* --- Overlay (Tło) --- */
.sheet-overlay[b-ls418zwtpt] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Ciemniejsze, bardziej eleganckie przyciemnienie */
    background-color: rgba(25, 28, 31, 0.4);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Mocniejszy efekt szkła (Frosty look) */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sheet-overlay.visible[b-ls418zwtpt] {
    opacity: 1;
    pointer-events: auto;
}

/* --- Panel (Drawer) --- */
.bottom-sheet[b-ls418zwtpt] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    z-index: 2001;
    /* Bardziej agresywne zaokrąglenie (Styl iOS/Revolut) */
    border-radius: 32px 32px 0 0;
    /* Miękki, głęboki cień zamiast ostrego */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);

    transform: translateY(110%); /* Ukrywamy całkowicie */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Bardzo płynna sprężystość */

    display: flex;
    flex-direction: column;
    /* Maksymalna wysokość nieco mniejsza, żeby widać było tło */
    max-height: 90vh;
}

.bottom-sheet.open[b-ls418zwtpt] {
    transform: translateY(0);
}

/* --- Desktop & Tablet Tweaks (Floating Card) --- */
/* Na większych ekranach panel zamienia się w "lewitującą wyspę" */
@media (min-width: 768px) {
    .bottom-sheet[b-ls418zwtpt] {
        max-width: 540px; /* Węższy, bardziej kompaktowy */
        left: 50%;
        bottom: 24px; /* Odrywamy go od dołu ekranu! */
        border-radius: 32px; /* Zaokrąglamy też dół */

        /* Centrowanie przy wysuwaniu */
        transform: translate(-50%, 110%);
    }
    .bottom-sheet.open[b-ls418zwtpt] {
        transform: translate(-50%, 0);
    }
}

/* --- Uchwyt (Handle) --- */
.sheet-handle-area[b-ls418zwtpt] {
    padding: 16px 0 8px 0; /* Więcej miejsca na palec */
    display: flex;
    justify-content: center;
    cursor: grab;
    flex-shrink: 0; /* Nie zgniataj tego obszaru */
}

.sheet-handle[b-ls418zwtpt] {
    width: 48px; /* Szerszy */
    height: 5px; /* Nieco grubszy */
    background-color: #E3E5E8; /* Bardzo jasny szary, subtelny */
    border-radius: 10px;
}

/* --- Header --- */
.sheet-header[b-ls418zwtpt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 32px 24px 32px; /* Duże marginesy boczne */

    /* USUWAMY border-bottom - to klucz do stylu Revolut. 
       Oddzielenie następuje przez whitespace */
    border-bottom: none;
    flex-shrink: 0;
}

.sheet-title[b-ls418zwtpt] {
    font-size: 1.5rem; /* Większy tytuł */
    font-weight: 800;  /* Extra Bold */
    color: #191C1F;
    letter-spacing: -0.02em; /* Ciaśniejsze litery (modern look) */
}

/* --- Close Button (Ghost Style) --- */
.close-btn[b-ls418zwtpt] {
    background: transparent; /* Przezroczyste tło domyślnie */
    border: none;
    border-radius: 50%;
    width: 40px; /* Duża strefa kliknięcia */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8B959E; /* Szary kolor ikony */
    transition: all 0.2s;
    margin-right: -8px; /* Optyczne wyrównanie do prawej */
}

.close-btn .material-symbols-rounded[b-ls418zwtpt] {
    font-size: 28px; /* Większa ikona */
}

.close-btn:hover[b-ls418zwtpt] {
    background: #F2F3F5; /* Tło pojawia się dopiero po najechaniu */
    color: #191C1F;
}

/* --- Content --- */
.sheet-content[b-ls418zwtpt] {
    padding: 0 32px 40px 32px; /* Content wyrównany z nagłówkiem */
    overflow-y: auto;

    /* Ukrywanie scrollbara dla estetyki (działa na Webkit) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sheet-content[b-ls418zwtpt]::-webkit-scrollbar {
    display: none;
}
/* /Components/NavMenu.razor.rz.scp.css */
 /* =========================================
       DIVINE NAVIGATION SIDEBAR (FIXED LAYOUT)
       =========================================
    */

    /* Główny kontener paska */
    .sidebar-container[b-3fefzfu3of] {
        /* ZMIANA: 100% zamiast 100vh. Dopasowuje się do rodzica (sidebara z MainLayout) */
        height: 100%; 
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        border-right: 1px solid #F1F5F9; 
        padding: 24px 16px; /* Lekko zmniejszony padding góra/dół dla bezpieczeństwa */
        font-family: 'Inter', 'Segoe UI', sans-serif;
        box-sizing: border-box; /* Ważne */
    }
.nav-logo[b-3fefzfu3of] {
    height: 30px; 
    width: auto;
    display: block;
    object-fit: contain;
}
    /* --- BRAND --- */
    .brand-section[b-3fefzfu3of] {
        display: flex; align-items: center; gap: 12px;
        padding: 8px 12px 32px 12px; /* Dostosowane odstępy */
        flex-shrink: 0; /* Zapobiega zgniataniu loga */
    }
    
    .brand-icon[b-3fefzfu3of] {
        width: 40px; height: 40px;
        background: #0F172A; 
        border-radius: 12px;
        color: white;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.4);
    }
    .brand-icon span[b-3fefzfu3of] { font-size: 24px; }

    .brand-text[b-3fefzfu3of] {
        font-size: 1.25rem; font-weight: 800; color: #0F172A; letter-spacing: -0.5px;
    }
    .highlight[b-3fefzfu3of] { color: #3B82F6; }

    /* --- NAWIGACJA --- */
    .nav-scrollable[b-3fefzfu3of] {
        flex: 1; /* Zajmuje całą wolną przestrzeń */
        
        /* ZMIANA: Kluczowe dla flexboxa, żeby scroll działał wewnątrz, a nie wypychał stopkę */
        min-height: 0; 
        
        overflow-y: auto;
        display: flex; flex-direction: column; gap: 6px;
        scrollbar-width: none; 
        padding-bottom: 20px; /* Odstęp od stopki podczas przewijania */
    }
    .nav-scrollable[b-3fefzfu3of]::-webkit-scrollbar { display: none; }

    .nav-group-label[b-3fefzfu3of] {
        font-size: 0.7rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 1px;
        margin: 8px 0 8px 16px;
    }
    .mt-4[b-3fefzfu3of] { margin-top: 24px; }
    .mt-auto[b-3fefzfu3of] { margin-top: auto; }

    /* --- LINKI --- */
    [b-3fefzfu3of] .nav-link {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 18px; /* Lekko zmniejszony padding w pionie, żeby więcej się mieściło */
        border-radius: 16px;
        color: #64748B;
        text-decoration: none;
        font-weight: 600; font-size: 0.95rem;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative; overflow: hidden;
        flex-shrink: 0; /* Zapobiega zgniataniu linków */
    }

    [b-3fefzfu3of] .nav-link .material-symbols-rounded {
        font-size: 22px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        transition: all 0.3s ease;
        color: #94A3B8;
    }

    /* HOVER */
    [b-3fefzfu3of] .nav-link:not(.active):hover {
        background-color: #F8FAFC; color: #1E293B; transform: translateX(4px);
    }
    [b-3fefzfu3of] .nav-link:not(.active):hover .material-symbols-rounded {
        color: #3B82F6; transform: scale(1.1);
    }

    /* ACTIVE */
    [b-3fefzfu3of] .nav-link.active {
        background-color: #0F172A; color: #FFFFFF;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
    }
    [b-3fefzfu3of] .nav-link.active .material-symbols-rounded {
        font-variation-settings: 'FILL' 1; color: #FFFFFF;
    }

    .settings-link[b-3fefzfu3of] { margin-top: 12px; }

    /* --- FOOTER --- */
    .nav-footer[b-3fefzfu3of] {
        flex-shrink: 0; /* Stopka nigdy się nie zmniejsza */
        margin-top: auto; /* Dopycha do dołu, jeśli jest miejsce */
        padding: 12px 16px; /* Bardziej kompaktowa */
        background: #F8FAFC;
        border-radius: 16px;
        display: flex; align-items: center; gap: 12px;
        transition: 0.2s;
        border: 1px solid transparent;
    }
    .nav-footer:hover[b-3fefzfu3of] { background: #F1F5F9; border-color: #E2E8F0; }

    .footer-avatar[b-3fefzfu3of] {
        width: 36px; height: 36px;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 0.9rem; color: #0F172A;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .footer-info[b-3fefzfu3of] { display: flex; flex-direction: column; overflow: hidden; }
    .f-name[b-3fefzfu3of] { font-size: 0.9rem; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .f-role[b-3fefzfu3of] { font-size: 0.75rem; color: #64748B; font-weight: 500; }
/* /Components/SurveysComponents/Edytor/EdytorStart.razor.rz.scp.css */
/* =========================================================
       DIVINE HERO - MOBILE FIX EDITION
       ========================================================= */
    
    /* Globalny reset dla tego komponentu, aby uniknąć błędów wymiarowania */
    .divine-hero[b-mhroj43y6o], .divine-hero *[b-mhroj43y6o] {
        box-sizing: border-box;
    }

    /* --- GŁÓWNY KONTENER --- */
    .divine-hero[b-mhroj43y6o] {
        position: relative;
        background: #FFFFFF;
        border-radius: 32px;
        /* Padding desktopowy */
        padding: 32px;
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.02), 
            0 12px 24px -4px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(0,0,0,0.03);
        overflow: hidden; /* To obcina wszystko co wystaje */
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        margin-bottom: 40px;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .divine-hero.is-loading[b-mhroj43y6o] { cursor: default; pointer-events: none; user-select: none; }

    .divine-hero.is-loaded:hover[b-mhroj43y6o] {
        transform: translateY(-4px);
        box-shadow: 
            0 20px 40px -5px rgba(0, 0, 0, 0.08),
            0 0 0 2px rgba(59, 130, 246, 0.1);
    }

    /* TŁO */
    .hero-backdrop-glow[b-mhroj43y6o] {
        position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
        border-radius: 50%; pointer-events: none; transition: transform 0.5s ease;
        z-index: 0;
    }
    .divine-hero:hover .hero-backdrop-glow[b-mhroj43y6o] { transform: scale(1.1) translate(-20px, 20px); }

    /* ZAWARTOŚĆ WEWNĘTRZNA */
    .hero-content[b-mhroj43y6o] {
        position: relative; z-index: 2;
        display: flex; flex-direction: column; gap: 24px;
        width: 100%; /* Kluczowe */
        max-width: 100%; /* Zabezpieczenie */
    }

    /* --- TOP BAR --- */
    .hero-top-bar[b-mhroj43y6o] {
        display: flex; justify-content: space-between; align-items: flex-start;
        flex-wrap: wrap; gap: 12px; width: 100%;
    }

    .status-wrapper[b-mhroj43y6o] {
        flex-shrink: 0; /* Nie zgniataj statusu */
    }

    .status-pill[b-mhroj43y6o] {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 12px; border-radius: 20px;
        font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        white-space: nowrap; animation: fadeIn-b-mhroj43y6o 0.4s ease-out;
    }
    .status-pill.active[b-mhroj43y6o] { background: #ECFDF5; color: #059669; }
    .status-pill.expired[b-mhroj43y6o] { background: #FEF2F2; color: #DC2626; }
    .status-pill.draft[b-mhroj43y6o] { background: #F1F5F9; color: #475569; border: 1px dashed #CBD5E1; }
    .status-pill.editing[b-mhroj43y6o] { background: #FFFBEB; color: #D97706; }

    .pulse-dot[b-mhroj43y6o] { width: 8px; height: 8px; background: #10B981; border-radius: 50%; position: relative; flex-shrink: 0; }
    .pulse-dot.warning[b-mhroj43y6o] { background: #F59E0B; }
    .pulse-dot[b-mhroj43y6o]::after {
        content: ""; position: absolute; inset: -4px; border-radius: 50%;
        border: 2px solid #10B981; opacity: 0; animation: pulse 2s infinite;
    }
    .pulse-dot.warning[b-mhroj43y6o]::after { border-color: #F59E0B; }

    .date-display[b-mhroj43y6o] {
        display: inline-flex; align-items: center;
        font-size: 0.85rem; font-weight: 500; color: #64748B;
        background: #F8FAFC; padding: 6px 14px; border-radius: 12px;
        white-space: nowrap; animation: fadeIn-b-mhroj43y6o 0.4s ease-out 0.1s backwards;
    }
    .date-display .label[b-mhroj43y6o] { opacity: 0.7; margin-right: 4px; }
    .date-display .value[b-mhroj43y6o] { font-weight: 600; color: #334155; }
    .date-display.expired-text .value[b-mhroj43y6o] { color: #DC2626; }

    /* --- TYTUŁ --- */
    .hero-title-section[b-mhroj43y6o] {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
        width: 100%;
    }
    .title-wrapper[b-mhroj43y6o] { 
        flex: 1; 
        min-width: 0; /* Pozwala na zmniejszanie flex itema */
    }
    
    .title-text[b-mhroj43y6o] {
        font-size: 2rem; font-weight: 800; color: #0F172A; margin: 0;
        line-height: 1.2; letter-spacing: -0.5px;
        background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        /* Łamanie słów */
        overflow-wrap: anywhere; 
        word-break: break-word;
        hyphens: auto;
    }
    .title-text.placeholder[b-mhroj43y6o] { opacity: 0.4; font-style: italic; }

    .edit-hint-badge[b-mhroj43y6o] {
        display: flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 20px;
        background: #F1F5F9; color: #64748B;
        font-size: 0.8rem; font-weight: 600; flex-shrink: 0;
        transition: all 0.3s ease; opacity: 0.8; animation: fadeIn-b-mhroj43y6o 0.5s ease-out 0.2s backwards;
    }
    .divine-hero:hover .edit-hint-badge[b-mhroj43y6o] {
        background: #0F172A; color: white; opacity: 1; transform: translateX(-4px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    }
    .edit-hint-badge span.material-symbols-rounded[b-mhroj43y6o] { font-size: 18px; }

    /* --- GRID --- */
    .hero-grid[b-mhroj43y6o] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-top: 8px;
        width: 100%;
    }

   .glass-tile[b-mhroj43y6o] {
        background: #F8FAFC;
        border: 1px solid #F1F5F9;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        transition: background 0.3s;
        animation: fadeIn-b-mhroj43y6o 0.5s ease-out 0.2s backwards;
        height: 100%;
        min-width: 0; /* CRITICAL FIX: Zapobiega wypychaniu przez flex/grid */
        width: 100%; /* Wypełnij komórkę grida */
    }
    .divine-hero:hover .glass-tile[b-mhroj43y6o] { background: #FFFFFF; border-color: #E2E8F0; }

    .tile-icon[b-mhroj43y6o] {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; margin-top: 2px;
    }
    .tile-icon span[b-mhroj43y6o] { font-size: 24px; }
    
    .tile-icon.blue[b-mhroj43y6o] { background: #EFF6FF; color: #3B82F6; }
    .tile-icon.orange[b-mhroj43y6o] { background: #FFF7ED; color: #F97316; }
    .tile-icon.purple[b-mhroj43y6o] { background: #F3E8FF; color: #9333EA; }

    .tile-data[b-mhroj43y6o] {
        display: flex; flex-direction: column; gap: 4px;
        flex: 1; 
        min-width: 0; /* CRITICAL FIX: Pozwala tekstowi się łamać */
    }
    .tile-label[b-mhroj43y6o] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94A3B8; letter-spacing: 0.5px; }
    
    .tile-value[b-mhroj43y6o] {
        font-size: 0.95rem; font-weight: 600; color: #1E293B;
        line-height: 1.4;
        /* Wymuszanie łamania */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .tile-sub[b-mhroj43y6o] {
        font-size: 0.75rem; color: #64748B;
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* --- SKELETON LOADING --- */
    .skeleton-pill[b-mhroj43y6o] { width: 100px; height: 28px; border-radius: 20px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-mhroj43y6o 1.5s infinite; }
    .skeleton-pill.short[b-mhroj43y6o] { width: 80px; }
    .skeleton-title[b-mhroj43y6o] { width: 60%; height: 32px; border-radius: 8px; margin-top: 4px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-mhroj43y6o 1.5s infinite; }
    .skeleton-title.sub[b-mhroj43y6o] { width: 40%; margin-top: 8px; height: 32px; }
    .skeleton-text[b-mhroj43y6o] { width: 80%; height: 16px; border-radius: 4px; margin-top: 4px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-mhroj43y6o 1.5s infinite; }
    .skeleton-text.sub[b-mhroj43y6o] { width: 50%; margin-top: 6px; height: 12px; }

    @keyframes shimmer-b-mhroj43y6o { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @keyframes fadeIn-b-mhroj43y6o { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    /* =============================================
       MOBILE RESPONSIVENESS (NAPRAWA MARGINESÓW)
       ============================================= */
    @media (max-width: 640px) {
        .divine-hero[b-mhroj43y6o] {
            /* Zmniejszamy padding, ale zachowujemy go (bezpieczny margines) */
            padding: 24px 20px; 
            border-radius: 24px;
            width: 100%;
        }

        .hero-content[b-mhroj43y6o] {
            gap: 20px;
        }

        .hero-title-section[b-mhroj43y6o] {
            flex-direction: column;
            gap: 12px;
        }

        .title-text[b-mhroj43y6o] {
            font-size: 1.6rem;
        }

        .edit-hint-badge[b-mhroj43y6o] { display: none; }

        /* GRID NA MOBILE */
        .hero-grid[b-mhroj43y6o] {
            /* Wymuszamy 1 kolumnę */
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 4px;
            /* Resetujemy szerokość na wszelki wypadek */
            width: 100%;
        }

        /* BLOCZEK NA MOBILE */
        .glass-tile[b-mhroj43y6o] {
            width: 100%; /* Pełna szerokość wewnątrz grida */
            padding: 14px; /* Nieco mniej paddingu wew. na małym ekranie */
        }
        
        /* Zabezpieczenie danych przed wychodzeniem */
        .tile-data[b-mhroj43y6o] {
            width: 100%;
            overflow: hidden; /* Ostateczne zabezpieczenie */
        }
    }
/* /Components/SurveysComponents/Work/WorkStart.razor.rz.scp.css */
    /* =========================================================
       DIVINE HERO - SKOPIOWANE 1:1 Z TWOJEGO WZORCA
       ========================================================= */
    
    .divine-hero[b-rj9ksb6ymt], .divine-hero *[b-rj9ksb6ymt] {
        box-sizing: border-box;
    }

    /* --- GŁÓWNY KONTENER --- */
    .divine-hero[b-rj9ksb6ymt] {
        position: relative;
        border-radius: 32px;
        padding: 32px;
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.02), 
            0 12px 24px -4px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(0,0,0,0.03);
        overflow: hidden;
        cursor: default; /* Zmienione na default, bo to karta informacyjna */
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        margin-bottom: 40px;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .divine-hero.is-loading[b-rj9ksb6ymt] { pointer-events: none; user-select: none; }

    /* TŁO */
    .hero-backdrop-glow[b-rj9ksb6ymt] {
        position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
        border-radius: 50%; pointer-events: none; transition: transform 0.5s ease;
        z-index: 0;
    }
    
    /* ZAWARTOŚĆ WEWNĘTRZNA */
    .hero-content[b-rj9ksb6ymt] {
        position: relative; z-index: 2;
        display: flex; flex-direction: column; gap: 24px;
        width: 100%;
        max-width: 100%;
    }

    /* --- TOP BAR --- */
    .hero-top-bar[b-rj9ksb6ymt] {
        display: flex; justify-content: space-between; align-items: flex-start;
        flex-wrap: wrap; gap: 12px; width: 100%;
    }

    .status-wrapper[b-rj9ksb6ymt] { flex-shrink: 0; }

    .status-pill[b-rj9ksb6ymt] {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 12px; border-radius: 20px;
        font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        white-space: nowrap; animation: fadeIn-b-rj9ksb6ymt 0.4s ease-out;
    }
    .status-pill.active[b-rj9ksb6ymt] { background: #ECFDF5; color: #059669; }
    .status-pill.expired[b-rj9ksb6ymt] { background: #FEF2F2; color: #DC2626; }

    .pulse-dot[b-rj9ksb6ymt] { width: 8px; height: 8px; background: #10B981; border-radius: 50%; position: relative; flex-shrink: 0; }
    .pulse-dot.warning[b-rj9ksb6ymt] { background: #F59E0B; }
    .pulse-dot[b-rj9ksb6ymt]::after {
        content: ""; position: absolute; inset: -4px; border-radius: 50%;
        border: 2px solid #10B981; opacity: 0; animation: pulse-b-rj9ksb6ymt 2s infinite;
    }
    .pulse-dot.warning[b-rj9ksb6ymt]::after { border-color: #F59E0B; }

    .date-display[b-rj9ksb6ymt] {
        display: inline-flex; align-items: center;
        font-size: 0.85rem; font-weight: 500; color: #64748B;
        background: #F8FAFC; padding: 6px 14px; border-radius: 12px;
        white-space: nowrap; animation: fadeIn-b-rj9ksb6ymt 0.4s ease-out 0.1s backwards;
    }
    .date-display .label[b-rj9ksb6ymt] { opacity: 0.7; margin-right: 4px; }
    .date-display .value[b-rj9ksb6ymt] { font-weight: 600; color: #334155; }
    .date-display.expired-text .value[b-rj9ksb6ymt] { color: #DC2626; }

    /* --- TYTUŁ --- */
    .hero-title-section[b-rj9ksb6ymt] {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
        width: 100%;
    }
    .title-wrapper[b-rj9ksb6ymt] { flex: 1; min-width: 0; }
    
    .title-text[b-rj9ksb6ymt] {
        font-size: 2rem; font-weight: 800; color: #0F172A; margin: 0;
        line-height: 1.2; letter-spacing: -0.5px;
        background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
        animation: fadeIn-b-rj9ksb6ymt 0.5s ease-out 0.15s backwards; /* Animacja tytułu */
    }

    .edit-hint-badge[b-rj9ksb6ymt] {
        display: flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 20px;
        background: #F1F5F9; color: #64748B;
        font-size: 0.8rem; font-weight: 600; flex-shrink: 0;
        animation: fadeIn-b-rj9ksb6ymt 0.5s ease-out 0.2s backwards;
    }
    .edit-hint-badge span.material-symbols-rounded[b-rj9ksb6ymt] { font-size: 18px; }

    /* --- GRID --- */
    .hero-grid[b-rj9ksb6ymt] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-top: 8px;
        width: 100%;
    }

   .glass-tile[b-rj9ksb6ymt] {
        background: #F8FAFC;
        border: 1px solid #F1F5F9;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        transition: background 0.3s;
        animation: fadeIn-b-rj9ksb6ymt 0.5s ease-out 0.2s backwards; /* Domyślna animacja */
        height: 100%;
        min-width: 0; 
        width: 100%; 
    }

    .tile-icon[b-rj9ksb6ymt] {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; margin-top: 2px;
        background: #F1F5F9; /* Fallback dla loading */
    }
    .tile-icon span[b-rj9ksb6ymt] { font-size: 24px; }
    
    .tile-icon.blue[b-rj9ksb6ymt] { background: #EFF6FF; color: #3B82F6; }
    .tile-icon.orange[b-rj9ksb6ymt] { background: #FFF7ED; color: #F97316; }
    .tile-icon.purple[b-rj9ksb6ymt] { background: #F3E8FF; color: #9333EA; }

    .tile-data[b-rj9ksb6ymt] {
        display: flex; flex-direction: column; gap: 4px;
        flex: 1; min-width: 0; 
    }
    .tile-label[b-rj9ksb6ymt] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94A3B8; letter-spacing: 0.5px; }
    
    .tile-value[b-rj9ksb6ymt] {
        font-size: 0.95rem; font-weight: 600; color: #1E293B;
        line-height: 1.4; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
    }
    .tile-sub[b-rj9ksb6ymt] {
        font-size: 0.75rem; color: #64748B;
        line-height: 1.3; overflow-wrap: anywhere; word-break: break-word;
    }

    /* --- SKELETON LOADING (Animacja Shimmer) --- */
    .skeleton-pill[b-rj9ksb6ymt] { width: 100px; height: 28px; border-radius: 20px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-rj9ksb6ymt 1.5s infinite; }
    .skeleton-pill.short[b-rj9ksb6ymt] { width: 80px; }
    .skeleton-title[b-rj9ksb6ymt] { width: 60%; height: 32px; border-radius: 8px; margin-top: 4px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-rj9ksb6ymt 1.5s infinite; }
    .skeleton-title.sub[b-rj9ksb6ymt] { width: 40%; margin-top: 8px; height: 32px; }
    .skeleton-text[b-rj9ksb6ymt] { width: 80%; height: 16px; border-radius: 4px; margin-top: 4px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: shimmer-b-rj9ksb6ymt 1.5s infinite; }
    .skeleton-text.sub[b-rj9ksb6ymt] { width: 50%; margin-top: 6px; height: 12px; }

    @keyframes shimmer-b-rj9ksb6ymt { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @keyframes fadeIn-b-rj9ksb6ymt { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pulse-b-rj9ksb6ymt { 0% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.4); } }

    /* =============================================
       MOBILE RESPONSIVENESS
       ============================================= */
    @media (max-width: 640px) {
        .divine-hero[b-rj9ksb6ymt] { padding: 24px 20px; border-radius: 24px; width: 100%; }
        .hero-content[b-rj9ksb6ymt] { gap: 20px; }
        .hero-title-section[b-rj9ksb6ymt] { flex-direction: column; gap: 12px; }
        .title-text[b-rj9ksb6ymt] { font-size: 1.6rem; }
        .edit-hint-badge[b-rj9ksb6ymt] { display: none; }
        .hero-grid[b-rj9ksb6ymt] { grid-template-columns: 1fr; gap: 12px; margin-top: 4px; width: 100%; }
        .glass-tile[b-rj9ksb6ymt] { width: 100%; padding: 14px; }
        .tile-data[b-rj9ksb6ymt] { width: 100%; overflow: hidden; }
    }
/* /Components/SurveyStats.razor.rz.scp.css */
/* --- GŁÓWNY UKŁAD --- */
.stats-container[b-m4tcgarc9b] {
    margin: 24px 0;
    width: 100%;
}

.stats-grid[b-m4tcgarc9b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Usunięte wszystkie klasy animacji (pop-in-sequence) */
}

@media (max-width: 600px) {
    .stats-grid[b-m4tcgarc9b] {
        grid-template-columns: 1fr;
    }
}

.full-width[b-m4tcgarc9b] {
    grid-column: 1 / -1;
}

/* ==========================================================================
   TREŚĆ WŁAŚCIWA (KARTY)
   ========================================================================== */

.glass-stat-card[b-m4tcgarc9b] {
    background: rgba(255, 255, 255, 0.75);
    /* Usunąłem backdrop-filter, jeśli powodował problemy z wydajnością, 
       ale możesz go przywrócić wedle uznania */
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center; /* Wyśrodkowanie w pionie */
    gap: 16px;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
    /* Usunięto animację transform przy wejściu */
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    min-height: 110px;
}

.glass-stat-card:hover[b-m4tcgarc9b] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

/* Ikony */
.stat-icon-bg[b-m4tcgarc9b] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.glass-stat-card.primary .stat-icon-bg[b-m4tcgarc9b] { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); color: #0284c7; }
.glass-stat-card.secondary .stat-icon-bg[b-m4tcgarc9b] { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); color: #ea580c; }
.glass-stat-card.gold .stat-icon-bg[b-m4tcgarc9b] { background: linear-gradient(135deg, #fef9c3 0%, #fde047 100%); color: #ca8a04; }

.stat-icon-bg span[b-m4tcgarc9b] { font-size: 26px; }

/* Teksty */
.stat-content[b-m4tcgarc9b] { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    /* Ważne: justify-content center, żeby ładnie wyglądało przy mniejszej ilości tekstu */
    justify-content: center; 
}

.stat-label[b-m4tcgarc9b] { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.stat-value-row[b-m4tcgarc9b] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stat-number[b-m4tcgarc9b] { font-size: 1.6rem; font-weight: 800; color: #0f172a; line-height: 1; letter-spacing: -0.5px; }
.stat-max[b-m4tcgarc9b] { font-size: 0.95rem; color: #94a3b8; font-weight: 600; margin-left: 2px; }
.stat-desc[b-m4tcgarc9b] { font-size: 0.85rem; color: #94a3b8; font-weight: 500; }

/* --- NOWE STYLE DLA ALARMÓW W KARTA 2 --- */
.urgent-alert[b-m4tcgarc9b] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #dc2626; /* Czerwony tekst */
    font-weight: 500;
    background: #fef2f2;
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
}
.urgent-alert .material-symbols-rounded[b-m4tcgarc9b] {
    font-size: 16px;
}

.safe-alert[b-m4tcgarc9b] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #16a34a; /* Zielony tekst */
    font-weight: 500;
    opacity: 0.8;
}
.safe-alert .material-symbols-rounded[b-m4tcgarc9b] {
    font-size: 16px;
}

/* Badge (Trendy) */
.stat-badge[b-m4tcgarc9b] { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; transform: translateY(-2px); }
.stat-badge.up[b-m4tcgarc9b] { background: #dcfce7; color: #16a34a; }
.stat-badge.down[b-m4tcgarc9b] { background: #fee2e2; color: #dc2626; }
.stat-badge.neutral[b-m4tcgarc9b] { background: #f1f5f9; color: #64748b; }
.stat-badge span[b-m4tcgarc9b] { font-size: 14px; }

/* Progress Bar */
.mini-progress-bar[b-m4tcgarc9b] { height: 6px; background: rgba(203, 213, 225, 0.4); border-radius: 3px; width: 100%; margin-top: 10px; overflow: hidden; }
.bar-fill[b-m4tcgarc9b] { height: 100%; background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%); border-radius: 3px; transition: width 1s ease; }
/* /Forms/AddAdressForm.razor.rz.scp.css */
/* --- BAZOWE STYLE --- */

form[b-fjr5pbvcu7] {
    padding-top: 8px;
    width: 100%;
}

/* Grupa pola (Label + Input) */
.form-group[b-fjr5pbvcu7] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column; /* Label NAD polem */
    gap: 10px;
    width: 100%;
}

/* Stylizacja Etykiet */
/* Używamy ::deep tutaj, bo label może być renderowany głębiej, 
   ale zazwyczaj zwykły selektor wystarczy. 
   Dla pewności dajemy oba lub po prostu label */
label[b-fjr5pbvcu7] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #8B959E !important; /* Wymuszamy kolor */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 8px;
}

/* Stylizacja Przycisków */
.actions[b-fjr5pbvcu7] {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    width: 100%;
}

/* Błędy walidacji */
/* Tutaj ::deep jest POTRZEBNE, bo ValidationMessage generuje div'a dynamicznie */
[b-fjr5pbvcu7] .validation-message {
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 6px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

[b-fjr5pbvcu7] .validation-message::before {
    content: '!'; display: inline-block; margin-right: 6px;
    background: #FF3B30; color: white; width: 16px; height: 16px;
    border-radius: 50%; text-align: center; line-height: 16px; font-size: 10px;
}

/* --- UKŁAD KOLUMN (Grid) --- */

.form-row[b-fjr5pbvcu7] {
    display: flex;
    flex-direction: row; /* Wymusza poziom */
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
}

/* Reset marginesu dla grupy wewnątrz wiersza */
.form-row .form-group[b-fjr5pbvcu7] {
    margin-bottom: 0;
}

.col-grow[b-fjr5pbvcu7] {
    flex: 2;
}

.col-small[b-fjr5pbvcu7] {
    flex: 1;
    min-width: 0;
}

/* Responsywność */
@media (max-width: 400px) {
    .form-row[b-fjr5pbvcu7] {
        flex-direction: column;
        gap: 24px;
    }
}
/* /Forms/AddTag.razor.rz.scp.css */
/* --- 1. BAZOWE STYLE FORMULARZA (Skopiowane z UserAddForm) --- */

form[b-k73kv8fbzo] {
    padding-top: 8px;
}

.form-group[b-k73kv8fbzo] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column; /* To naprawia układ Label nad Inputem */
    gap: 10px;
}

/* Stylizacja Etykiet */
label[b-k73kv8fbzo] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #8B959E;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 8px;
}

/* Stylizacja Przycisków na dole */
.actions[b-k73kv8fbzo] {
    margin-top: 40px;
    display: flex; /* To naprawia układ przycisków */
    gap: 16px;
    padding-bottom: 16px;
    width: 100%;
}

/* Stylizacja błędów walidacji */
.validation-message[b-k73kv8fbzo] {
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 6px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.validation-message[b-k73kv8fbzo]::before {
    content: '!';
    display: inline-block;
    margin-right: 6px;
    background: #FF3B30;
    color: white;
    width: 16px; height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
}

/* --- 2. STYLE WYSZUKIWARKI (Specyficzne dla tego formularza) --- */

/* Wrapper wyszukiwarki */
.search-wrapper[b-k73kv8fbzo] {
    position: relative;
    width: 100%;
}

/* Ikona lupy wewnątrz inputa */
.search-icon-inside[b-k73kv8fbzo] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #C4C8D0;
    pointer-events: none;
    font-size: 24px;
    transition: color 0.2s;
}

.search-wrapper:focus-within .search-icon-inside[b-k73kv8fbzo] {
    color: #0075EB;
}

/* Nadpisujemy padding inputa, ale tylko z prawej strony (dla ikony) */
[b-k73kv8fbzo] .search-input-padding {
    padding-right: 50px !important;
}

/* Lista wyników (Dropdown) */
.search-results-dropdown[b-k73kv8fbzo] {
    position: relative; /* Rozpycha formularz w dół */
    margin-top: 12px;
    background: #FFFFFF;
    border: 2px solid #E8EAEF;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    max-height: 240px;
    overflow-y: auto;
    animation: slideIn-b-k73kv8fbzo 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
}

@keyframes slideIn-b-k73kv8fbzo {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Element listy */
.dropdown-item[b-k73kv8fbzo] {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #F2F3F5;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
}

.dropdown-item:last-child[b-k73kv8fbzo] { border-bottom: none; }
.dropdown-item:hover[b-k73kv8fbzo] { background-color: #F8FAFC; }

.dropdown-item.info[b-k73kv8fbzo] {
    cursor: default;
    color: #8B959E;
    justify-content: center;
    font-weight: 500;
    padding: 20px;
    gap: 8px;
}

/* Awatar usera w liście */
.u-avatar[b-k73kv8fbzo] {
    width: 36px; height: 36px;
    background: #E3F2FD;
    color: #0075EB;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.u-info[b-k73kv8fbzo] { flex: 1; display: flex; flex-direction: column; }
.u-name[b-k73kv8fbzo] { font-weight: 700; color: #191C1F; font-size: 0.95rem; }
.u-email[b-k73kv8fbzo] { color: #8B959E; font-size: 0.8rem; font-weight: 500; }
.arrow[b-k73kv8fbzo] { font-size: 20px; color: #C4C8D0; }

/* Styl Scrollbara */
.search-results-dropdown[b-k73kv8fbzo]::-webkit-scrollbar { width: 6px; }
.search-results-dropdown[b-k73kv8fbzo]::-webkit-scrollbar-track { background: transparent; }
.search-results-dropdown[b-k73kv8fbzo]::-webkit-scrollbar-thumb { background-color: #E8EAEF; border-radius: 3px; }

/* Karta wybranego użytkownika (Selected Pill) */
.selected-viewer-card[b-k73kv8fbzo] {
    background: #F0F9FF;
    border: 2px solid #BAE6FD;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    animation: fadeIn-b-k73kv8fbzo 0.3s ease;
}

@keyframes fadeIn-b-k73kv8fbzo { from { opacity: 0; } to { opacity: 1; } }

.svc-icon[b-k73kv8fbzo] {
    width: 44px; height: 44px;
    background: #FFFFFF;
    color: #0075EB;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 117, 235, 0.15);
}
.svc-icon .material-symbols-rounded[b-k73kv8fbzo] { font-size: 24px; }

.svc-info[b-k73kv8fbzo] { flex: 1; min-width: 0; }
.svc-name[b-k73kv8fbzo] { font-weight: 700; color: #191C1F; font-size: 1rem; }
.svc-email[b-k73kv8fbzo] { color: #8B959E; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Przycisk usuwania (X) */
.svc-remove[b-k73kv8fbzo] {
    background: #FFFFFF;
    border: 2px solid transparent;
    color: #8B959E;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}

.svc-remove:hover[b-k73kv8fbzo] {
    background: #FFF5F5;
    color: #FF3B30;
    border-color: #FF3B30;
}

.spin[b-k73kv8fbzo] { animation: spin-b-k73kv8fbzo 1s linear infinite; }
@keyframes spin-b-k73kv8fbzo { 100% { transform: rotate(360deg); } }
/* /Forms/AddUserForm.razor.rz.scp.css */

form[b-a1m8euvb22] {
    padding-top: 8px;
}

.form-group[b-a1m8euvb22] {
    margin-bottom: 24px; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

label[b-a1m8euvb22] {
    font-size: 0.75rem;     
    font-weight: 800;       
    color: #8B959E;         
    text-transform: uppercase;
    letter-spacing: 0.8px;  
    margin-left: 8px;   
}



.actions[b-a1m8euvb22] {
    margin-top: 40px; 
    display: flex;
    gap: 16px;
    padding-bottom: 16px; 
}




.validation-message[b-a1m8euvb22] {
    color: #FF3B30;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 6px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.validation-message[b-a1m8euvb22]::before {
    content: '!';
    display: inline-block;
    margin-right: 6px;
    background: #FF3B30;
    color: white;
    width: 16px; height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
}
/* /Forms/AutomationEditor.razor.rz.scp.css */
    .editor-container[b-xsg3rs0cft] { padding-bottom: 24px; }
    .header-info[b-xsg3rs0cft] { display: flex; align-items: center; gap: 8px; color: #64748B; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 24px; padding-left: 4px; }
    
    .loading-state[b-xsg3rs0cft] { padding: 40px; text-align: center; color: #94A3B8; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .empty-rules-hint[b-xsg3rs0cft] { text-align: center; color: #94A3B8; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .empty-rules-hint span[b-xsg3rs0cft] { font-size: 32px; color: #CBD5E1; }
    .empty-rules-hint p[b-xsg3rs0cft] { margin: 0; font-weight: 600; color: #64748B; }

    /* CARD STYLING */
    .condition-card[b-xsg3rs0cft] {
        background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px;
        margin-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .condition-card.expanded[b-xsg3rs0cft] { border-color: #3B82F6; box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.1); }

    /* HEADER (CLICKABLE) */
    .cc-header[b-xsg3rs0cft] {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 16px; background: #FFFFFF; cursor: pointer;
        user-select: none; transition: background 0.2s;
    }
    .cc-header:hover[b-xsg3rs0cft] { background: #F8FAFC; }
    
    .cc-left[b-xsg3rs0cft] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .chevron[b-xsg3rs0cft] { color: #94A3B8; transition: transform 0.3s; font-size: 24px; }
    .expanded .chevron[b-xsg3rs0cft] { transform: rotate(180deg); color: #3B82F6; }

    .cc-titles[b-xsg3rs0cft] { display: flex; flex-direction: column; overflow: hidden; }
    .cc-main-title[b-xsg3rs0cft] { font-weight: 700; font-size: 0.9rem; color: #1E293B; }
    .cc-subtitle[b-xsg3rs0cft] { font-size: 0.75rem; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .cc-remove[b-xsg3rs0cft] {
        width: 32px; height: 32px; border-radius: 8px; background: transparent; border: none; 
        color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; 
        transition: 0.2s; flex-shrink: 0;
    }
    .cc-remove:hover[b-xsg3rs0cft] { background: #FEF2F2; color: #EF4444; }

    /* BODY */
.cc-body[b-xsg3rs0cft] { 
        padding: 16px; /* ZMIANA: Było 0 na górze, teraz jest 16px z każdej strony */
        border-top: 1px solid #F1F5F9; 
        animation: slideDown-b-xsg3rs0cft 0.3s ease; 
    }
        @keyframes slideDown-b-xsg3rs0cft { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

    /* RULE BOX */
    .rule-editor-box[b-xsg3rs0cft] {
        background: #F8FAFC; border-radius: 12px; padding: 16px; border: 1px solid #F1F5F9; 
        position: relative; margin-top: 12px;
    }
    .rule-arrow[b-xsg3rs0cft] { position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #F8FAFC; border-top: 1px solid #F1F5F9; border-left: 1px solid #F1F5F9; transform: rotate(45deg); }
    .rule-label[b-xsg3rs0cft] { font-size: 0.75rem; color: #64748B; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; display: block; }
    .helper-text[b-xsg3rs0cft] { font-size: 0.75rem; color: #94A3B8; margin-top: 6px; }

    /* FOOTER */
    /* --- POPRAWIONA STOPKA (BUTTONS SIDE-BY-SIDE) --- */
    .actions-footer[b-xsg3rs0cft] {
        display: flex; 
        align-items: center; 
        margin-top: 24px; 
        padding-top: 16px; 
        border-top: 1px solid #E2E8F0;
        gap: 16px; 
        width: 100%; /* Zapewnia pełną szerokość */
    }

    .btn-danger-outline[b-xsg3rs0cft] {
        flex: 1; /* KLUCZOWE: Rozciąga przycisk na połowę dostępnego miejsca */
        height: 48px; /* Troszkę wyższe dla łatwiejszego klikania */
        padding: 0 12px; 
        border: 1px solid #EF4444; 
        color: #EF4444; 
        background: transparent;
        border-radius: 12px; 
        font-weight: 600; 
        font-size: 0.85rem; 
        cursor: pointer;
        display: flex; 
        align-items: center; 
        justify-content: center;
        gap: 8px; 
        transition: 0.2s;
        white-space: nowrap; 
    }
    .btn-danger-outline:hover[b-xsg3rs0cft] { background: #FEF2F2; }

    .btn-primary[b-xsg3rs0cft] { 
        flex: 1; /* KLUCZOWE: Rozciąga przycisk na drugą połowę */
        height: 48px; 
        padding: 0 12px; 
        border-radius: 12px; 
        border: none; 
        background: #3B82F6; 
        color: white;
        font-weight: 600; 
        cursor: pointer; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        gap: 8px;
        transition: 0.2s; 
        box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
        white-space: nowrap;
    }
    .btn-primary:hover[b-xsg3rs0cft] { background: #2563EB; transform: translateY(-1px); }
    .btn-primary:disabled[b-xsg3rs0cft] { background: #94A3B8; cursor: not-allowed; transform: none; box-shadow: none; }

    
    .row-inputs[b-xsg3rs0cft] { display: flex; gap: 12px; } .row-inputs .form-group[b-xsg3rs0cft] { flex: 1; }
    .switch-selector[b-xsg3rs0cft] { display: flex; background: #E2E8F0; padding: 4px; border-radius: 10px; }
    .switch-selector button[b-xsg3rs0cft] { flex: 1; border: none; padding: 8px; border-radius: 8px; background: transparent; color: #64748B; font-weight: 600; cursor: pointer; }
    .switch-selector button.active[b-xsg3rs0cft] { background: white; color: #3B82F6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .checkbox-wrapper[b-xsg3rs0cft] { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.9rem; color: #334155; }
    
    .btn-dashed[b-xsg3rs0cft] { width: 100%; border: 2px dashed #CBD5E1; background: transparent; color: #64748B; padding: 12px; border-radius: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 16px; transition: 0.2s; }
    .btn-dashed:hover[b-xsg3rs0cft] { border-color: #3B82F6; color: #3B82F6; background: #EFF6FF; }
    
    .mini-spinner.blue[b-xsg3rs0cft] { border-top-color: #3B82F6; width: 32px; height: 32px; border-width: 3px; }
    .mini-spinner.white[b-xsg3rs0cft] { border-top-color: #FFFFFF; border-right-color: rgba(255,255,255,0.3); width: 18px; height: 18px; border-width: 2px; }
/* /Forms/AutomationEmptyState.razor.rz.scp.css */
    .empty-state-container[b-95yo4kehrr] {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
    }

    .icon-wrapper[b-95yo4kehrr] {
        width: 80px; height: 80px;
        background: #F0F9FF;
        color: #0075EB;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 24px;
    }
    
    .icon-wrapper .material-symbols-rounded[b-95yo4kehrr] { font-size: 40px; }

    h3[b-95yo4kehrr] {
        margin: 0 0 12px 0;
        font-size: 1.25rem;
        color: #191C1F;
        font-weight: 700;
    }

    p[b-95yo4kehrr] {
        margin: 0 0 32px 0;
        color: #8B959E;
        line-height: 1.5;
        font-size: 0.9rem;
    }

    .actions[b-95yo4kehrr] {
        display: flex;
        gap: 16px;
        width: 100%;
    }
    
    .btn-primary[b-95yo4kehrr] {
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
/* /Forms/DeleteConfirmationForm.razor.rz.scp.css */
.confirmation-container[b-39xwcjwfcc] {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.icon-wrapper[b-39xwcjwfcc] {
    width: 64px;
    height: 64px;
    background-color: #FFF5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF3B30;
    margin-bottom: 24px;
}

.icon-wrapper .material-symbols-rounded[b-39xwcjwfcc] {
    font-size: 32px;
}

.text-content[b-39xwcjwfcc] {
    margin-bottom: 16px;
    padding: 0 16px;
}

h3[b-39xwcjwfcc] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #191C1F;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

p[b-39xwcjwfcc] {
    font-size: 0.95rem;
    color: #8B959E;
    line-height: 1.5;
    margin: 0;
}

.actions[b-39xwcjwfcc] {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    width: 100%;
}

.btn-secondary[b-39xwcjwfcc] {
    flex: 1;
    background-color: transparent;
    color: #8B959E;
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover[b-39xwcjwfcc] {
    background-color: #F2F3F5;
    color: #191C1F;
}

.btn-danger[b-39xwcjwfcc] {
    flex: 2;
    background: linear-gradient(135deg, #FF3B30, #D32F2F);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
    transition: all 0.2s ease;
}

.btn-danger:hover[b-39xwcjwfcc] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 59, 48, 0.4);
}
.btn-danger:active[b-39xwcjwfcc] {
    transform: translateY(0);
}
.btn-danger:disabled[b-39xwcjwfcc] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* /Forms/EditSurveyForm.razor.rz.scp.css */
/* --- GŁÓWNE STYLE --- */
.form-group[b-70yfdcsc8k] { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.form-group label[b-70yfdcsc8k] { font-size: 0.85rem; font-weight: 600; color: #4B5563; margin-left: 2px; }
.row-2[b-70yfdcsc8k] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.row-2 .form-group[b-70yfdcsc8k] { margin-bottom: 0; }

/* --- INPUTS --- */
.r-input[b-70yfdcsc8k], .clean-input[b-70yfdcsc8k], .clean-date-input[b-70yfdcsc8k] {
    width: 100%; height: 48px; padding: 0 16px; background-color: #F8FAFC;
    border: 1px solid #E2E8F0; border-radius: 12px; font-size: 0.95rem;
    color: #1F2937; outline: none; box-sizing: border-box; font-family: inherit;
    transition: all 0.2s;
}
.clean-input:focus[b-70yfdcsc8k], .clean-date-input:focus[b-70yfdcsc8k] {
    background-color: #FFFFFF; border-color: #0075EB; box-shadow: 0 0 0 3px rgba(0, 117, 235, 0.1);
}
.clean-input.with-search-icon[b-70yfdcsc8k] { padding-left: 45px;}

/* --- CUSTOM SELECT + SEARCH --- */
.custom-select-container[b-70yfdcsc8k] { position: relative; width: 100%; }
.custom-select-container.disabled[b-70yfdcsc8k] { opacity: 0.6; pointer-events: none; }
.custom-select-container.active-z[b-70yfdcsc8k] { z-index: 100; }

.clean-select-trigger[b-70yfdcsc8k] {
    width: 100%; height: 48px; padding: 0 16px; background-color: #F8FAFC;
    border: 1px solid #E2E8F0; border-radius: 12px; display: flex; align-items: center;
    justify-content: space-between; cursor: pointer; transition: all 0.2s;
}
.clean-select-trigger.active[b-70yfdcsc8k] { border-color: #0075EB; background: #FFF; }
.selected-text[b-70yfdcsc8k] { font-size: 0.95rem; color: #1F2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trigger-icon[b-70yfdcsc8k] { color: #64748B; transition: transform 0.3s; }
.clean-select-trigger.active .trigger-icon[b-70yfdcsc8k] { transform: rotate(180deg); }

/* LISTA DROPDOWN */
.custom-options-list[b-70yfdcsc8k] {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: white; border: 1px solid #E2E8F0; border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); z-index: 101;
    overflow: hidden; display: flex; flex-direction: column;
}

/* WYSZUKIWARKA W DROPDOWNIE (STICKY) */
.dropdown-search[b-70yfdcsc8k] {
    padding: 8px; border-bottom: 1px solid #F1F5F9; background: #FFF;
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
}
.search-input-internal[b-70yfdcsc8k] {
    width: 100%; border: none; background: #F1F5F9; height: 36px;
    border-radius: 8px; padding: 0 12px 0 36px; font-size: 0.9rem; outline: none;
}
.search-input-internal:focus[b-70yfdcsc8k] { background: #EEF2FF; color: #0075EB; }
.search-icon-sm[b-70yfdcsc8k] {
    position: absolute; left: 16px; font-size: 18px; color: #94A3B8; pointer-events: none;
}

/* SCROLL AREA */
.options-scroll-area[b-70yfdcsc8k] { max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.custom-option[b-70yfdcsc8k] {
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; transition: background 0.1s; border-bottom: 1px solid #F8FAFC;
}
.custom-option:last-child[b-70yfdcsc8k] { border-bottom: none; }
.custom-option:hover[b-70yfdcsc8k] { background-color: #F8FAFC; }
.custom-option.selected[b-70yfdcsc8k] { background-color: #EFF6FF; color: #0075EB; font-weight: 500; }
.opt-icon[b-70yfdcsc8k] { font-size: 20px; color: #94A3B8; }
.custom-option.selected .opt-icon[b-70yfdcsc8k] { color: #0075EB; }
.check[b-70yfdcsc8k] { margin-left: auto; font-size: 18px; color: #0075EB; }
.empty-state-sm[b-70yfdcsc8k] { padding: 16px; text-align: center; color: #94A3B8; font-size: 0.85rem; }

/* BACKDROP */
.backdrop[b-70yfdcsc8k] { position: fixed; inset: 0; z-index: 90; }

/* --- WYSZUKIWARKA PRACOWNIKA --- */
.search-wrapper[b-70yfdcsc8k] { position: relative; }
.with-search-icon[b-70yfdcsc8k] { padding-right: 44px; }
.search-icon[b-70yfdcsc8k] {
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%);
    color: #94A3B8; 
    pointer-events: none;
}
.search-results-list[b-70yfdcsc8k] {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: white; border: 1px solid #E2E8F0; border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 50; max-height: 240px; overflow-y: auto;
}
.search-item[b-70yfdcsc8k] {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border-bottom: 1px solid #F1F5F9; cursor: pointer;
}
.search-item:hover[b-70yfdcsc8k] { background: #F8FAFC; }
.search-item .avatar[b-70yfdcsc8k] {
    width: 36px; height: 36px; border-radius: 50%; background: #EEF2FF;
    color: #4F46E5; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
}
.search-item .info[b-70yfdcsc8k] { flex: 1; overflow: hidden; }
.search-item .name[b-70yfdcsc8k] { font-size: 0.9rem; font-weight: 600; color: #1E293B; }
.search-item .email[b-70yfdcsc8k] { font-size: 0.75rem; color: #64748B; }
.search-item .arrow[b-70yfdcsc8k] { color: #CBD5E1; }

/* --- KARTA PRACOWNIKA --- */
.worker-card[b-70yfdcsc8k] {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: #FFF; border: 1px solid #E2E8F0; border-radius: 12px;
}
.wc-icon[b-70yfdcsc8k] {
    width: 40px; height: 40px; border-radius: 10px; background: #FFF7ED;
    color: #F97316; display: flex; align-items: center; justify-content: center;
}
.wc-content[b-70yfdcsc8k] { flex: 1; overflow: hidden; }
.wc-name[b-70yfdcsc8k] { font-size: 0.9rem; font-weight: 600; color: #1E293B; }
.wc-email[b-70yfdcsc8k] { font-size: 0.75rem; color: #64748B; }
.wc-remove[b-70yfdcsc8k] {
    width: 32px; height: 32px; background: transparent; border: none;
    color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wc-remove:hover[b-70yfdcsc8k] { background: #FEE2E2; color: #EF4444; border-radius: 8px; }

/* --- BUTTONS & ANIMATION --- */
.actions[b-70yfdcsc8k] { display: flex; gap: 12px; margin-top: 24px; }
.btn-primary[b-70yfdcsc8k], .btn-secondary[b-70yfdcsc8k] {
    flex: 1; height: 48px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.btn-primary[b-70yfdcsc8k] { background: #0075EB; color: white; }
.btn-primary:hover[b-70yfdcsc8k] { background: #0060C2; }
.btn-secondary[b-70yfdcsc8k] { background: #F1F5F9; color: #475569; }
.fade-in[b-70yfdcsc8k] { animation: fadeIn-b-70yfdcsc8k 0.2s ease-out; }
@keyframes fadeIn-b-70yfdcsc8k { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* --- SKELETON --- */
.skeleton-wrapper[b-70yfdcsc8k] { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.sk-group[b-70yfdcsc8k] { display: flex; flex-direction: column; gap: 6px; }
.sk-label[b-70yfdcsc8k], .sk-input[b-70yfdcsc8k], .sk-card[b-70yfdcsc8k], .sk-btn[b-70yfdcsc8k] {
    background: #F1F5F9; position: relative; overflow: hidden;
}
.sk-label[b-70yfdcsc8k]::after, .sk-input[b-70yfdcsc8k]::after, .sk-card[b-70yfdcsc8k]::after, .sk-btn[b-70yfdcsc8k]::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer-b-70yfdcsc8k 1.5s infinite;
}
.sk-label[b-70yfdcsc8k] { height: 14px; border-radius: 4px; }
.sk-input[b-70yfdcsc8k] { height: 48px; border-radius: 12px; }
.sk-card[b-70yfdcsc8k] { height: 60px; border-radius: 12px; }
.sk-btn[b-70yfdcsc8k] { height: 48px; border-radius: 12px; }
@keyframes shimmer-b-70yfdcsc8k { 100% { transform: translateX(100%); } }
/* /Forms/FiltersForm.razor.rz.scp.css */
/* --- GŁÓWNY KONTENER --- */
.filter-container[b-d9tkc6rqcd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    font-family: 'Inter', sans-serif;
    color: #1E293B;
    overflow: hidden; /* Zapobiega scrollowaniu całego body */
    isolation: isolate; /* Nowoczesne fixowanie warstw */
    z-index: 1;
}

/* Obszar scrollowania formularza */
.form-scroll-area[b-d9tkc6rqcd] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 4px 120px 4px; /* Duży padding na dole dla ostatniego dropdowna */
    -webkit-overflow-scrolling: touch;
}

.form-scroll-area[b-d9tkc6rqcd]::-webkit-scrollbar { width: 4px; }
.form-scroll-area[b-d9tkc6rqcd]::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

/* --- RELATIVE WRAPPER (Z-INDEX MAGIC) --- */
.form-group[b-d9tkc6rqcd] {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
    transition: z-index 0s; /* Natychmiastowa zmiana */
}

/* Gdy lista jest otwarta, ten element leci na wierzch */
.form-group.active-group[b-d9tkc6rqcd] {
    z-index: 100; /* To musi być wyżej niż backdrop (90) */
    position: relative; /* Ważne */
}

/* --- THEME COLORS --- */
.theme-emerald[b-d9tkc6rqcd] { --theme-color: #10B981; --theme-bg: #ECFDF5; --theme-border: #A7F3D0; }
.theme-amber[b-d9tkc6rqcd] { --theme-color: #F59E0B; --theme-bg: #FFFBEB; --theme-border: #FDE68A; }
.theme-violet[b-d9tkc6rqcd] { --theme-color: #8B5CF6; --theme-bg: #F5F3FF; --theme-border: #DDD6FE; }
.theme-blue[b-d9tkc6rqcd] { --theme-color: #3B82F6; --theme-bg: #EFF6FF; --theme-border: #BFDBFE; }

label[b-d9tkc6rqcd] {
    font-size: 0.8rem; font-weight: 700; color: #64748B;
    display: flex; align-items: center; gap: 6px; margin-left: 4px;
}
.label-icon[b-d9tkc6rqcd] { font-size: 18px; color: var(--theme-color, #94A3B8); }

/* --- INPUTY --- */
.input-wrapper[b-d9tkc6rqcd] { position: relative; }
.friendly-input[b-d9tkc6rqcd] {
    width: 100%; padding: 14px 16px;
    border: 2px solid #F1F5F9; border-radius: 16px;
    font-size: 0.95rem; color: #0F172A; background: #FAFAFA;
    transition: all 0.2s; outline: none;
}
.friendly-input:focus[b-d9tkc6rqcd] { background: white; border-color: var(--theme-color, #3B82F6); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.friendly-input.with-icon[b-d9tkc6rqcd] { padding-right: 44px; }

.input-icon-right[b-d9tkc6rqcd] {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #94A3B8; pointer-events: none;
}
.clear-icon-inside[b-d9tkc6rqcd] {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #CBD5E1; cursor: pointer; padding: 4px; font-size: 20px;
}

/* --- TRIGGER (SELECT) --- */
.friendly-select-container[b-d9tkc6rqcd] { position: relative; }

.friendly-trigger[b-d9tkc6rqcd] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: #FAFAFA;
    border: 2px solid #F1F5F9; border-radius: 16px;
    cursor: pointer; transition: 0.2s; min-height: 52px;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.friendly-trigger:active[b-d9tkc6rqcd] { transform: scale(0.98); }
.friendly-trigger.active[b-d9tkc6rqcd] { background: white; border-color: var(--theme-color); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.1); }
.friendly-trigger.filled[b-d9tkc6rqcd] { background: var(--theme-bg); border-color: var(--theme-border); }
.friendly-trigger.filled .value-icon[b-d9tkc6rqcd] { color: var(--theme-color); }

.placeholder[b-d9tkc6rqcd] { color: #94A3B8; font-size: 0.95rem; }
.selected-value[b-d9tkc6rqcd] { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1E293B; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.value-icon[b-d9tkc6rqcd] { font-size: 20px; color: #64748B; flex-shrink: 0; }
.arrow-icon[b-d9tkc6rqcd] { color: #CBD5E1; transition: 0.3s; }
.active .arrow-icon[b-d9tkc6rqcd] { transform: rotate(180deg); color: var(--theme-color); }
.disabled[b-d9tkc6rqcd] { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

/* --- DROPDOWN LIST --- */
.friendly-dropdown[b-d9tkc6rqcd] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 101;
    transform-origin: top center;
}

.dropdown-header[b-d9tkc6rqcd] {
    padding: 12px 16px; background: #F8FAFC;
    font-size: 0.7rem; font-weight: 700; color: #94A3B8; text-transform: uppercase;
    border-bottom: 1px solid #F1F5F9; position: sticky; top: 0; z-index: 2;
}



.friendly-option[b-d9tkc6rqcd] {
    padding: 12px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; border-radius: 12px; transition: 0.1s; margin-bottom: 2px;
}
.friendly-option:active[b-d9tkc6rqcd] { background: #F1F5F9; transform: scale(0.98); }
.friendly-option.selected[b-d9tkc6rqcd] { background: var(--theme-bg); border: 1px solid var(--theme-border); }

/* Icons & Content */
.opt-icon-circle[b-d9tkc6rqcd] {
    width: 36px; height: 36px; border-radius: 10px; background: white; border: 1px solid #E2E8F0;
    display: flex; align-items: center; justify-content: center; color: #64748B; flex-shrink: 0;
}
.friendly-option.selected .opt-icon-circle[b-d9tkc6rqcd] { border-color: var(--theme-color); color: var(--theme-color); }
.opt-content[b-d9tkc6rqcd] { flex: 1; min-width: 0; }
.opt-text[b-d9tkc6rqcd] { font-size: 0.9rem; font-weight: 500; color: #334155; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friendly-option.selected .opt-text[b-d9tkc6rqcd] { color: #0F172A; font-weight: 600; }
.opt-sub[b-d9tkc6rqcd] { font-size: 0.75rem; color: #94A3B8; display: block; }
.check[b-d9tkc6rqcd] { font-size: 20px; color: var(--theme-color); margin-left: auto; }

/* --- GLOBAL BACKDROP --- */
.dropdown-backdrop-layer[b-d9tkc6rqcd] {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: 90;
    cursor: pointer; 
    -webkit-tap-highlight-color: transparent;
}

/* --- WORKER CARD --- */
.active-worker-card[b-d9tkc6rqcd] {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1px solid #DDD6FE; border-radius: 16px; padding: 12px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}
.worker-visual[b-d9tkc6rqcd] {
    width: 44px; height: 44px; background: #8B5CF6; color: white; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
}
.worker-info[b-d9tkc6rqcd] { flex: 1; display: flex; flex-direction: column; }
.w-label[b-d9tkc6rqcd] { font-size: 0.7rem; color: #8B5CF6; font-weight: 700; text-transform: uppercase; }
.w-name[b-d9tkc6rqcd] { font-weight: 700; color: #4C1D95; font-size: 1rem; }
.remove-worker-btn[b-d9tkc6rqcd] {
    width: 32px; height: 32px; background: white; border: none; border-radius: 10px;
    color: #A78BFA; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* --- FOOTER --- */
.actions-sticky[b-d9tkc6rqcd] {
    background: white; border-top: 1px solid #F1F5F9;
    padding: 16px 20px; display: grid; grid-template-columns: 1fr 2fr; gap: 16px;
    position: sticky; bottom: 0; z-index: 200;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}
.btn-clean[b-d9tkc6rqcd] {
    height: 52px; background: white; border: 2px solid #E2E8F0; border-radius: 14px;
    color: #64748B; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.btn-gradient[b-d9tkc6rqcd] {
    height: 52px; background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
    border: none; border-radius: 14px; color: white; font-weight: 700; font-size: 0.95rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.4);
}

/* --- ANIMATIONS & SKELETON --- */
.fade-in-up[b-d9tkc6rqcd] { animation: fadeInUp-b-d9tkc6rqcd 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fadeInUp-b-d9tkc6rqcd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.skeleton-wrapper[b-d9tkc6rqcd] { padding: 20px; }
.sk-line[b-d9tkc6rqcd] { width: 100px; height: 16px; background: #E2E8F0; margin-bottom: 8px; border-radius: 4px; }
.sk-input[b-d9tkc6rqcd] { width: 100%; height: 52px; background: #F1F5F9; border-radius: 16px; margin-bottom: 24px; }
.sk-btn[b-d9tkc6rqcd] { width: 100%; height: 52px; background: #F1F5F9; border-radius: 14px; }
.avatar-circle[b-d9tkc6rqcd] {
    width: 32px; height: 32px; background: #E0E7FF; color: #4F46E5;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.arrow-tiny[b-d9tkc6rqcd] { font-size: 18px; color: #CBD5E1; margin-left: auto; }
.search-info[b-d9tkc6rqcd] { padding: 20px; text-align: center; color: #94A3B8; display: flex; gap: 8px; justify-content: center; }
.spin[b-d9tkc6rqcd] { animation: spin-b-d9tkc6rqcd 1s linear infinite; }
@keyframes spin-b-d9tkc6rqcd { to { transform: rotate(360deg); } }

/* --- STYLES ZAKTUALIZOWANE --- */

/* STICKY SEARCH INSIDE DROPDOWN */
.dropdown-search[b-d9tkc6rqcd] {
    padding: 10px;
    border-bottom: 1px solid #F1F5F9;
    background: #FFF;
    position: sticky;
    top: 0; 
    z-index: 10;
    display: flex;
    align-items: center;
}

.search-input-internal[b-d9tkc6rqcd] {
    width: 100%;
    border: none;
    background: #F1F5F9;
    height: 40px;
    border-radius: 10px;
    padding: 0 12px 0 40px; /* Miejsce na ikonę */
    font-size: 0.9rem;
    color: #334155;
    outline: none;
    transition: background 0.2s;
}

.search-input-internal:focus[b-d9tkc6rqcd] {
    background: #EEF2FF;
    color: #3B82F6;
}

.search-icon-sm[b-d9tkc6rqcd] {
    position: absolute;
    left: 20px;
    font-size: 20px;
    color: #94A3B8;
    pointer-events: none;
}

.empty-state-sm[b-d9tkc6rqcd] {
    padding: 24px;
    text-align: center;
    color: #94A3B8;
    font-size: 0.85rem;
}

/* --- Reszta Twoich stylów bez zmian, upewnij się tylko, że .dropdown-scroll ma max-height --- */
.dropdown-scroll[b-d9tkc6rqcd] {
    max-height: 250px; /* Nieco mniej niż poprzednio, bo doszedł search */
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
}

/* Nowa klasa dla tła wewnątrz grupy */
.local-backdrop[b-d9tkc6rqcd] {
    position: fixed; /* Pokrywa cały ekran */
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: transparent; /* Lub rgba(0,0,0,0.05) jeśli chcesz przyciemnienie */
    z-index: 99; /* Wysoko, ale niżej niż dropdown */
    cursor: default;
}

/* Upewniamy się, że dropdown jest wyżej niż backdrop */
.friendly-dropdown[b-d9tkc6rqcd] {
    z-index: 105 !important; /* Musi być wyżej niż 99 */
}

/* Fix dla iOS inputów */
.search-input-internal[b-d9tkc6rqcd] {
    transform: translate3d(0,0,0); /* Wymusza akcelerację GPU, pomaga na focus */
}
/* /Forms/OdrzucAnkieteForm.razor.rz.scp.css */
.rejection-container[b-bsbizpkrnx] {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.icon-wrapper[b-bsbizpkrnx] {
    width: 64px;
    height: 64px;
    background-color: #FFF5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF3B30;
    margin-bottom: 24px;
}

.icon-wrapper .material-symbols-rounded[b-bsbizpkrnx] {
    font-size: 32px;
}

.text-content[b-bsbizpkrnx] {
    margin-bottom: 16px;
    padding: 0 16px;
}

h3[b-bsbizpkrnx] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #191C1F;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

p[b-bsbizpkrnx] {
    font-size: 0.95rem;
    color: #8B959E;
    line-height: 1.5;
    margin: 0;
}

.input-wrapper[b-bsbizpkrnx] {
    width: 100%;
    padding: 0 24px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.reason-input[b-bsbizpkrnx] {
    width: 100%;
    min-height: 100px;
    padding: 16px;
    border: 1px solid #E0E4E8;
    border-radius: 16px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #191C1F;
    resize: none;
    box-sizing: border-box;
    background-color: #F8F9FA;
    transition: all 0.2s ease;
    
}

.reason-input:focus[b-bsbizpkrnx] {
    outline: none;
    border-color: #FF3B30;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}

.actions[b-bsbizpkrnx] {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    box-sizing: border-box;
}

.btn-secondary[b-bsbizpkrnx] {
    flex: 1;
    background-color: transparent;
    color: #8B959E;
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-bsbizpkrnx] {
    background-color: #F2F3F5;
    color: #191C1F;
}

.btn-danger[b-bsbizpkrnx] {
    flex: 2;
    background: linear-gradient(135deg, #FF3B30, #D32F2F);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled)[b-bsbizpkrnx] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 59, 48, 0.4);
}

.btn-danger:active:not(:disabled)[b-bsbizpkrnx] {
    transform: translateY(0);
}

.btn-danger:disabled[b-bsbizpkrnx] {
    opacity: 0.6;
    background: #E0E4E8;
    color: #8B959E;
    box-shadow: none;
    cursor: not-allowed;
}
/* /Forms/PhotoViewier.razor.rz.scp.css */
/* Kontener główny - rzutnia */
.viewer-viewport[b-xiqp5pb2ii] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Minimalna wysokość, żeby na mobile było wygodnie */
    background-color: #0d1117; /* Ciemne tło dla kontrastu */
    overflow: hidden; /* Ukrywamy to co wyjdzie poza ramkę */
    touch-action: none; /* KLUCZOWE: Wyłącza domyślne przewijanie przeglądarki */
    border-radius: 16px; /* Pasuje do stylu Twoich kart */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.viewer-viewport:active[b-xiqp5pb2ii] {
    cursor: grabbing;
}

/* Warstwa transformacji - to nią ruszamy */
.viewer-transformer[b-xiqp5pb2ii] {
    /* will-change: transform; <--- Usuń to lub zostaw, biblioteka sama dodaje optymalizacje */
    /* transform-origin: 0 0; <--- USUŃ TO! To powodowało konflikty przy zoomowaniu do środka */
    
    width: 100%;       /* Dodano: Ważne dla poprawnego centrowania */
    height: 100%;      /* Dodano: Ważne dla poprawnego centrowania */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Samo zdjęcie */
.viewer-image[b-xiqp5pb2ii] {
    max-width: 100%;   /* Zmieniono z 95% na 100% dla pełnego wypełnienia */
    max-height: 100%;  /* Zmieniono z 95% na 100% */
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    /* Cień opcjonalny - przy 'contain: outside' cień może zostać ucięty przez overflow viewportu */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
}

.controls-container[b-xiqp5pb2ii] {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    gap: 12px; /* Odstęp między przyciskami */
    z-index: 10;
}

/* Wspólny styl dla przycisków */
.control-btn[b-xiqp5pb2ii] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 14px; /* Bardziej nowoczesne zaokrąglenie */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.control-btn:hover:not(:disabled)[b-xiqp5pb2ii] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.control-btn:active:not(:disabled)[b-xiqp5pb2ii] {
    transform: scale(0.95);
}

.control-btn:disabled[b-xiqp5pb2ii] {
    opacity: 0.6;
    cursor: wait;
}

/* Wyróżnienie przycisku zapisu (opcjonalne) */
.control-btn.save[b-xiqp5pb2ii] {
    background: rgba(59, 130, 246, 0.2); /* Lekki niebieski tint */
    border-color: rgba(59, 130, 246, 0.4);
}

.control-btn.save:hover:not(:disabled)[b-xiqp5pb2ii] {
    background: rgba(59, 130, 246, 0.4);
}

.material-symbols-rounded[b-xiqp5pb2ii] {
    font-size: 24px;
}

/* Mały loader wewnątrz przycisku */
.spinner-small[b-xiqp5pb2ii] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-xiqp5pb2ii 0.8s linear infinite;
}

@keyframes spin-b-xiqp5pb2ii {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-xiqp5pb2ii {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in[b-xiqp5pb2ii] {
    animation: fadeIn-b-xiqp5pb2ii 0.4s ease-out forwards;
}

.material-symbols-rounded[b-xiqp5pb2ii] {
    font-size: 24px;
}

/* Kontener główny - rzutnia */
.viewer-viewport[b-xiqp5pb2ii] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; 
    background-color: #000000; /* Zmiana na czarny dla lepszego odbioru wideo */
    overflow: hidden; 
    touch-action: none; 
    border-radius: 16px; 
    display: flex;
    align-items: center;
    justify-content: center;
    /* Usuwamy cursor: grab stąd, bo dla wideo to niepotrzebne */
}

/* Kursor łapki tylko dla transformera (zdjęcia) */
.viewer-transformer[b-xiqp5pb2ii] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.viewer-transformer:active[b-xiqp5pb2ii] {
    cursor: grabbing;
}

/* Stylizacja wideo */
.viewer-video[b-xiqp5pb2ii] {
    max-width: 100%;
    max-height: 100%;
    outline: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
}

/* Samo zdjęcie */
.viewer-image[b-xiqp5pb2ii] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
}

.controls-container[b-xiqp5pb2ii] {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    gap: 12px;
    z-index: 20; /* Wyższy index, żeby kontrolki wideo ich nie zasłoniły */
}

/* Reszta stylów przycisków (control-btn, save, spinner) pozostaje bez zmian jak w Twoim kodzie */
.control-btn[b-xiqp5pb2ii] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.control-btn:hover:not(:disabled)[b-xiqp5pb2ii] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.control-btn:active:not(:disabled)[b-xiqp5pb2ii] {
    transform: scale(0.95);
}

.control-btn:disabled[b-xiqp5pb2ii] {
    opacity: 0.6;
    cursor: wait;
}

.control-btn.save[b-xiqp5pb2ii] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.control-btn.save:hover:not(:disabled)[b-xiqp5pb2ii] {
    background: rgba(59, 130, 246, 0.4);
}

.spinner-small[b-xiqp5pb2ii] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-xiqp5pb2ii 0.8s linear infinite;
}

@keyframes spin-b-xiqp5pb2ii {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-xiqp5pb2ii {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in[b-xiqp5pb2ii] {
    animation: fadeIn-b-xiqp5pb2ii 0.4s ease-out forwards;
}

.material-symbols-rounded[b-xiqp5pb2ii] {
    font-size: 24px;
}
/* /Forms/SelectionQuestionForm.razor.rz.scp.css */
/* --- KONTENER GŁÓWNY --- */
.selection-container[b-0w5hwc6hgp] {
    /* Większy odstęp góra/dół dla elegancji */
    padding: 24px 16px 40px 16px; 
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* Zabezpieczenie przed scrollem bocznym */
    max-width: 100vw; 
    overflow-x: hidden;
    box-sizing: border-box;
}

/* --- NAGŁÓWEK --- */
.header p[b-0w5hwc6hgp] {
    margin: 0;
    font-size: 0.95rem;
    color: #94A3B8; /* Bardziej stonowany szary */
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- SIATKA/LISTA --- */
.types-grid[b-0w5hwc6hgp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* --- KARTA OPCJI (PRO STYLE) --- */
.type-card[b-0w5hwc6hgp] {
    /* Layout */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    width: 100%;
    
    /* Reset przycisku */
    background: #FFFFFF;
    border: 1px solid #F1F5F9; /* Bardzo delikatna ramka */
    border-radius: 20px; /* Nowoczesne zaokrąglenie */
    outline: none;
    appearance: none;
    text-align: left;
    
    /* Wygląd */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease,
                background-color 0.2s;
    
    /* Mobile Fixes */
    cursor: pointer;
    touch-action: manipulation; /* Ułatwia klikanie na dotyku */
    -webkit-tap-highlight-color: transparent; /* Usuwa niebieski błysk na Androidzie */
}

/* --- IKONA --- */
.type-icon-wrapper[b-0w5hwc6hgp] {
    width: 48px;
    height: 48px;
    background: #F8FAFC;
    color: #3B82F6; /* Profesjonalny niebieski */
    border-radius: 14px; /* Squircle */
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.type-icon-wrapper .material-symbols-rounded[b-0w5hwc6hgp] { 
    font-size: 26px; 
}

/* --- TREŚĆ --- */
.type-content[b-0w5hwc6hgp] { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    min-width: 0; /* Zapobiega rozpychaniu przez długi tekst */
}

.type-title[b-0w5hwc6hgp] { 
    font-size: 1rem; 
    font-weight: 700; 
    color: #1E293B; /* Ciemny granat, bardzo czytelny */
    letter-spacing: -0.01em;
}

.type-desc[b-0w5hwc6hgp] { 
    font-size: 0.8rem; 
    color: #64748B; 
    line-height: 1.4;
    font-weight: 500;
}

/* --- STRZAŁKA --- */
.type-arrow[b-0w5hwc6hgp] { 
    color: #CBD5E1; 
    margin-left: auto; /* Popycha strzałkę maksymalnie w prawo */
    display: flex;
    align-items: center;
    transition: transform 0.2s, color 0.2s;
}
.type-arrow .material-symbols-rounded[b-0w5hwc6hgp] { 
    font-size: 20px; 
    font-weight: 600;
}

/* ======================================================
   INTERAKCJE (Desktop vs Mobile Separated)
   ====================================================== */

/* TYLKO NA KOMPUTERZE (Hover) */
@media (hover: hover) {
    .type-card:hover[b-0w5hwc6hgp] {
        border-color: #BFDBFE; /* Jasny niebieski */
        background: #F8FAFC;
        transform: translateY(-2px); /* Lekkie uniesienie */
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 
                    0 4px 6px -2px rgba(59, 130, 246, 0.05);
    }

    .type-card:hover .type-icon-wrapper[b-0w5hwc6hgp] {
        background: #EFF6FF;
        color: #2563EB;
    }

    .type-card:hover .type-arrow[b-0w5hwc6hgp] {
        color: #3B82F6;
        transform: translateX(2px); /* Subtelny ruch strzałki */
    }
}

/* TYLKO NA TELEFONIE (Active/Touch) */
.type-card:active[b-0w5hwc6hgp] {
    transform: scale(0.98); /* Kliknięcie "wgniata" przycisk */
    background: #F1F5F9;
    border-color: #CBD5E1;
    box-shadow: none;
    transition-duration: 0.1s;
}
/* /Forms/SurveyActionModal.razor.rz.scp.css */
/* --- SEKCJA ANIMACJI --- */

    .processing-view[b-ozk6ohhmnq] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        min-height: 300px;
    }

    .clone-animation[b-ozk6ohhmnq] {
        position: relative;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
    }

    /* Główna ikona */
    .clone-animation .main-icon[b-ozk6ohhmnq] {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 20px;
        z-index: 2;
        background: #f0ecfd;
        color: #b910a5;
        font-size: 32px;
        box-shadow: 0 10px 25px rgba(185, 16, 165, 0.2);
    }
    
    .clone-animation .main-icon span[b-ozk6ohhmnq] {
        font-size: 32px;
    }

    /* Ikona "Duch" - kopia */
    .clone-animation .ghost-icon[b-ozk6ohhmnq] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 64px;
        height: 64px;
        border-radius: 20px;
        background: #f0ecfd;
        color: #b910a5;
        opacity: 0.6;
        z-index: 1;
        animation: cloneMove-b-ozk6ohhmnq 2s infinite ease-in-out;
    }

    .clone-animation .ghost-icon span[b-ozk6ohhmnq] {
        font-size: 32px;
    }

    /* Pierścień pulsujący */
    .pulse-ring[b-ozk6ohhmnq] {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid #b910a5;
        opacity: 0;
        animation: pulseRing-b-ozk6ohhmnq 2s infinite;
    }

    .processing-text h3[b-ozk6ohhmnq] {
        margin: 0 0 8px 0;
        font-size: 1.1rem;
        color: #1E293B;
        font-weight: 700;
    }

    .processing-text p[b-ozk6ohhmnq] {
        margin: 0;
        font-size: 0.9rem;
        color: #64748B;
    }

    /* --- KLATKI ANIMACJI --- */

    @keyframes cloneMove-b-ozk6ohhmnq {
        0%, 100% {
            transform: translate(0, 0) scale(1);
            opacity: 0;
        }
        50% {
            transform: translate(15px, -15px) scale(0.9);
            opacity: 0.6;
        }
    }

    @keyframes pulseRing-b-ozk6ohhmnq {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        50% {
            opacity: 0.3;
        }
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    /* Utility: Fade In */
    .fade-in[b-ozk6ohhmnq] {
        animation: fadeIn-b-ozk6ohhmnq 0.4s ease forwards;
    }

    @keyframes fadeIn-b-ozk6ohhmnq {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

.action-chooser-container[b-ozk6ohhmnq] {
        padding-top: 8px;
        /* Zapewnia płynne przejście wysokości */
        transition: height 0.3s ease; 
    }

    .header-section[b-ozk6ohhmnq] {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    label[b-ozk6ohhmnq] {
        font-size: 0.75rem;     
        font-weight: 800;       
        color: #8B959E;         
        text-transform: uppercase;
        letter-spacing: 0.8px;  
        margin-left: 8px;   
    }

    .helper-text[b-ozk6ohhmnq] {
        font-size: 0.9rem;
        color: #0F172A;
        margin: 0 0 0 8px;
        opacity: 0.8;
    }

    .cards-grid[b-ozk6ohhmnq] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    .action-card[b-ozk6ohhmnq] {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        padding: 16px;
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
        width: 100%;
        position: relative;
    }

    .action-card:not(:disabled):hover[b-ozk6ohhmnq] {
        border-color: #CBD5E1;
        background: #F8FAFC;
    }

    .action-card.active[b-ozk6ohhmnq] {
        border-color: #3B82F6;
        background: #EFF6FF;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }

    .action-card:disabled[b-ozk6ohhmnq], .action-card.disabled[b-ozk6ohhmnq] {
        opacity: 0.5;
        cursor: not-allowed;
        background: #F1F5F9;
        border-color: #E2E8F0;
        pointer-events: none;
    }

    .action-card:disabled .icon-circle[b-ozk6ohhmnq] {
        filter: grayscale(100%);
        opacity: 0.7;
    }

    .icon-circle[b-ozk6ohhmnq] {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .icon-circle.edit[b-ozk6ohhmnq] {
        background: #EEF2FF;
        color: #6366F1;
    }

    .icon-circle.view[b-ozk6ohhmnq] {
        background: #ECFDF5;
        color: #10B981;
    }

    .icon-circle.remove[b-ozk6ohhmnq] {
        background: #f0ecfd;
        color: #b910a5;
    }

    .card-content[b-ozk6ohhmnq] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .card-title[b-ozk6ohhmnq] {
        font-weight: 700;
        font-size: 0.95rem;
        color: #1E293B;
    }

    .card-desc[b-ozk6ohhmnq] {
        font-size: 0.8rem;
        color: #64748B;
        line-height: 1.3;
    }

    .radio-indicator[b-ozk6ohhmnq] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #CBD5E1;
        flex-shrink: 0;
        position: relative;
    }

    .active .radio-indicator[b-ozk6ohhmnq] {
        border-color: #3B82F6;
        background: #3B82F6;
    }

    .active .radio-indicator[b-ozk6ohhmnq]::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .actions[b-ozk6ohhmnq] {
        margin-top: 20px; 
        display: flex;
        gap: 16px;
        padding-bottom: 16px; 
    }
    
    .btn-primary[b-ozk6ohhmnq] {
        background: #0F172A;
        color: white;
        border: none;
        padding: 0 24px;
        height: 48px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        flex: 1;
        cursor: pointer;
        transition: 0.2s;
    }

    .btn-secondary[b-ozk6ohhmnq] {
        background: transparent;
        color: #64748B;
        border: 1px solid #E2E8F0;
        padding: 0 24px;
        height: 48px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: 0.2s;
    }

    .btn-secondary:hover[b-ozk6ohhmnq] {
        background: #F1F5F9;
        color: #334155;
    }
/* /Layout/LoginLayout.razor.rz.scp.css */
/* Kontener na cały ekran */
.login-layout[b-fwikk8uzwe] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}



/* Responsywność na małych telefonach */
@media (max-width: 480px) {
    .login-layout[b-fwikk8uzwe] {
        padding: 0px;
        /* Na bardzo małych ekranach centrujemy, ale bez marginesów bocznych */
    }

    
}
/* /Layout/MainLayout.razor.rz.scp.css */
 /* =========================================
       DIVINE LAYOUT STRUCTURE
       =========================================
    */

    /* Reset */
    body[b-28t2yoij98] {
        background-color: #F8FAFC; /* Slate 50 - Bardzo jasne tło */
        color: #0F172A;            /* Slate 900 - Bardzo ciemny tekst */
        font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        margin: 0; padding: 0;
        -webkit-font-smoothing: antialiased;
    }
.nav-logo[b-28t2yoij98] {
    height: 30px; 
    width: auto;
    display: block;
    object-fit: contain;
}
    .layout-wrapper[b-28t2yoij98] {
        display: flex;
        min-height: 100vh;
        width: 100%;
        position: relative;
    }

    /* --- SIDEBAR (PANEL BOCZNY) --- */
    .sidebar-panel[b-28t2yoij98] {
        width: 280px;
        height: 100vh;
        background: #FFFFFF;
        position: fixed;
        top: 0; left: 0;
        z-index: 1000;
        border-right: 1px solid #F1F5F9;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        /* Obsługa iPhone Notch/Home Bar */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;

        /* Kluczowe dla Flexbox w NavMenu */
        display: flex; 
        flex-direction: column;
    }

    /* --- CONTENT AREA --- */
    .content-area[b-28t2yoij98] {
        flex: 1;
        margin-left: 280px; /* Miejsce na sidebar */
        display: flex; flex-direction: column;
        min-width: 0;
        transition: margin-left 0.3s ease;
    }

    .page-viewport[b-28t2yoij98] {
        flex: 1;
        padding: 0; /* Padding jest wewnątrz komponentów (np. .liquid-container) */
    }


    /* --- MOBILE TOP BAR (Tylko na małych ekranach) --- */
    .mobile-topbar[b-28t2yoij98] {
        display: none; /* Domyślnie ukryty */
        align-items: center; justify-content: space-between;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
        position: sticky; top: 0; z-index: 900;
        
        padding-top: calc(12px + env(safe-area-inset-top)); /* Safe area */
    }

    .hamburger-btn[b-28t2yoij98] {
        background: transparent; border: none; cursor: pointer;
        width: 40px; height: 40px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: #1E293B; transition: 0.2s;
    }
    .hamburger-btn:active[b-28t2yoij98] { background: #F1F5F9; }
    .hamburger-btn span[b-28t2yoij98] { font-size: 26px; }

    .mobile-brand[b-28t2yoij98] { font-size: 1.2rem; font-weight: 800; color: #0F172A; }
    .highlight[b-28t2yoij98] { color: #3B82F6; }


    /* --- MOBILE OVERLAY --- */
    .mobile-overlay[b-28t2yoij98] {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, 0.4); /* Ciemny granat z przezroczystością */
        backdrop-filter: blur(4px);
        z-index: 990;
        opacity: 0; pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .mobile-overlay.active[b-28t2yoij98] { opacity: 1; pointer-events: auto; }


    /* --- RESPONSYWNOŚĆ --- */
    @media (max-width: 992px) {
        /* Sidebar domyślnie schowany */
        .sidebar-panel[b-28t2yoij98] {
            transform: translateX(-100%);
            border-right: none;
            box-shadow: 10px 0 40px rgba(0,0,0,0.1); /* Cień rzucany na content */
        }
        .sidebar-panel.open[b-28t2yoij98] { transform: translateX(0); }

        /* Content rozciągnięty na całą szerokość */
        .content-area[b-28t2yoij98] { margin-left: 0; }

        /* Pokazujemy Top Bar */
        .mobile-topbar[b-28t2yoij98] { display: flex; }
    }

        .push-notification-toast[b-28t2yoij98] {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        background: #ffffff;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 
                    0 4px 12px -2px rgba(0,0,0,0.05);
        z-index: 10000;
        animation: slideUpFade-b-28t2yoij98 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        border: 1px solid rgba(0,0,0,0.03);
    }

    .push-icon-circle[b-28t2yoij98] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #EFF6FF; /* Jasny niebieski */
        color: #0079EA; /* Twój kolor brandowy */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .push-icon-circle span[b-28t2yoij98] {
        font-size: 24px;
    }

    .push-content[b-28t2yoij98] {
        flex: 1;
    }

    .push-content strong[b-28t2yoij98] {
        display: block;
        font-size: 0.95rem;
        color: #1e293b;
        margin-bottom: 2px;
    }

    .push-content p[b-28t2yoij98] {
        margin: 0;
        font-size: 0.8rem;
        color: #64748b;
        line-height: 1.3;
    }

    .push-actions[b-28t2yoij98] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-push-confirm[b-28t2yoij98] {
        background: #0079EA;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .btn-push-confirm:active[b-28t2yoij98] {
        background: #005bb5;
        transform: scale(0.98);
    }

    .btn-push-dismiss[b-28t2yoij98] {
        background: transparent;
        border: none;
        color: #94a3b8;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
    }

    .btn-push-dismiss:hover[b-28t2yoij98] {
        background: #f1f5f9;
        color: #475569;
    }

    @keyframes slideUpFade-b-28t2yoij98 {
        from {
            opacity: 0;
            transform: translate(-50%, 100%);
        }
        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }

    /* Responsywność dla bardzo małych ekranów */
    @media (max-width: 360px) {
        .push-notification-toast[b-28t2yoij98] {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .push-actions[b-28t2yoij98] {
            width: 100%;
            justify-content: flex-end;
        }
    }
/* /Pages/Ankieta.razor.rz.scp.css */
/* =========================================
   LIQUID WHITE - BUILDER (FULL PRO EDITION)
   =========================================
*/
*[b-h97035m0qu] { box-sizing: border-box; }

/* --- CONTAINER & BACKGROUND --- */
.liquid-container[b-h97035m0qu] {
    position: relative; width: 100%; max-width: 900px;
    margin: 0 auto; padding: 40px 24px; min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif; color: #0F172A;
}

.ambient-light[b-h97035m0qu] {
    position: fixed; width: 800px; height: 800px; border-radius: 50%;
    filter: blur(120px); opacity: 0.06; z-index: -1; pointer-events: none;
}
.ambient-light.one[b-h97035m0qu] { background: radial-gradient(circle, #3B82F6 0%, transparent 70%); top: -200px; left: -200px; }
.ambient-light.two[b-h97035m0qu] { background: radial-gradient(circle, #10B981 0%, transparent 70%); bottom: -300px; right: -200px; }

/* --- LAYOUT WRAPPERS --- */
.builder-content[b-h97035m0qu] { display: flex; flex-direction: column; gap: 40px; }
.questions-stream[b-h97035m0qu] { display: flex; flex-direction: column; gap: 0; }

/* =========================================
   QUESTION CARD (BASE - MOBILE FRIENDLY)
   =========================================
*/
.question-block[b-h97035m0qu] { 
    position: relative; 
    z-index: 1; 
    transition: z-index 0s; 
}

.glass-panel[b-h97035m0qu] {
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px);
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}
/* --- TOP ACTIONS (Prawy górny róg) --- */
.top-actions[b-h97035m0qu] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100; /* Nad innymi elementami */
}

/* Szklany Czerwony Przycisk */
.btn-glass-danger[b-h97035m0qu] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 68, 68, 0.3); /* Czerwona ramka */
    color: #EF4444; /* Czerwona ikona */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.btn-glass-danger span[b-h97035m0qu] {
    font-size: 24px;
}

.btn-glass-danger:hover[b-h97035m0qu] {
    background: #FEF2F2;
    border-color: #EF4444;
    transform: scale(1.05) rotate(5deg); /* Lekki obrót przy hover */
    box-shadow: 0 8px 15px rgba(239, 68, 68, 0.15);
}

.btn-glass-danger:active[b-h97035m0qu] {
    transform: scale(0.95);
}

/* Responsywność: Na mobile przesuń trochę, żeby nie nachodziło na krawędzie */
@media (max-width: 640px) {
    .top-actions[b-h97035m0qu] {
        top: -10px; /* Korekta względem wrappera */
        right: 0px;
    }
}
/* --- TOP BAR --- */
.qc-topbar[b-h97035m0qu] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    background: rgba(255,255,255,0.4);
}
.qc-info[b-h97035m0qu] { display: flex; align-items: center; gap: 12px; }

.q-number[b-h97035m0qu] {
    font-size: 0.9rem; font-weight: 800; color: #0F172A;
    background: #F1F5F9; padding: 4px 10px; border-radius: 8px;
}
.q-type-badge[b-h97035m0qu] {
    font-size: 0.75rem; font-weight: 700; color: #64748B;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.status-icon[b-h97035m0qu] {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.status-icon.warning[b-h97035m0qu] { color: #F59E0B; background: #FEF3C7; }
.status-icon.success[b-h97035m0qu] { color: #10B981; background: #D1FAE5; }
.status-icon span[b-h97035m0qu] { font-size: 16px; }

/* --- TOOLS & LOGIC BUTTON --- */
.qc-tools[b-h97035m0qu] {
    display: flex; align-items: center; gap: 4px;
    background: #FFFFFF; border: 1px solid #E2E8F0; padding: 4px; border-radius: 10px;
}
.tool-btn[b-h97035m0qu] {
    width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px;
    color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.tool-btn:hover[b-h97035m0qu] { background: #F1F5F9; color: #0F172A; }
.tool-btn span[b-h97035m0qu] { font-size: 20px; }
.tool-sep[b-h97035m0qu] { width: 1px; height: 16px; background: #E2E8F0; margin: 0 2px; }

/* Logic Button Highlight */
.tool-btn.has-logic[b-h97035m0qu] {
    background: #EFF6FF;
    color: #3B82F6;
    border: 1px solid #BFDBFE;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    animation: pulseBlue-b-h97035m0qu 2s infinite;
}
@keyframes pulseBlue-b-h97035m0qu {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* --- MAIN CONTENT --- */
.qc-main[b-h97035m0qu] { padding: 24px; display: flex; gap: 24px; align-items: flex-start; }
.qc-text-content[b-h97035m0qu] { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.q-title[b-h97035m0qu] { font-size: 1.15rem; font-weight: 700; color: #1E293B; margin: 0; line-height: 1.4; }
.q-desc[b-h97035m0qu] { font-size: 0.9rem; color: #64748B; margin: 0; line-height: 1.5; }

/* Media Slot */
.media-slot[b-h97035m0qu] {
    width: 64px; height: 64px; border-radius: 14px;
    background: #F8FAFC; border: 2px dashed #CBD5E1; color: #94A3B8;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s; cursor: pointer; position: relative;
}
.media-slot:hover[b-h97035m0qu] { border-color: #3B82F6; color: #3B82F6; background: #EFF6FF; }
.media-slot.filled[b-h97035m0qu] { border-style: solid; border-color: #BFDBFE; background: #EFF6FF; color: #3B82F6; }
.media-slot span[b-h97035m0qu] { font-size: 24px; }
.count-badge[b-h97035m0qu] {
    position: absolute; top: -6px; right: -6px;
    background: #3B82F6; color: white; font-size: 0.65rem; font-weight: 700;
    padding: 2px 6px; border-radius: 10px; border: 2px solid white;
}

/* --- PREVIEW ZONE --- */
.qc-preview-zone[b-h97035m0qu] {
    background: #F8FAFC; padding: 16px 24px 24px 24px;
    border-top: 1px solid #F1F5F9;
}
.preview-label[b-h97035m0qu] { font-size: 0.7rem; font-weight: 700; color: #CBD5E1; text-transform: uppercase; margin-bottom: 8px; }

/* ==========================================================
   INTERIM ADD BUTTON (PLUSIKI) - BASE (MOBILE PRO STYLE)
   ========================================================== */
.interim-add-zone[b-h97035m0qu] {
    height: 32px; 
    display: flex; align-items: center; justify-content: center;
    /* Duży odstęp na mobile, żeby nie nachodziło na treść */
    margin: 20px 0; 
    position: relative; z-index: 20; 
    /* Na mobile zawsze widoczne, ale subtelne */
    opacity: 1; pointer-events: auto; 
    transition: all 0.2s ease;
}

/* Ukrywamy linię na mobile - wygląda czyściej */
.interim-add-zone .line[b-h97035m0qu] { 
    display: none; 
    flex: 1; height: 2px; background: #3B82F6; border-radius: 2px; 
    transform: scaleX(1); opacity: 0.5;
}

.btn-interim[b-h97035m0qu] {
    /* PRO Mobile Style: Biały, lekko przezroczysty, z cieniem */
    width: 42px; height: 42px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #3B82F6; /* Niebieska ikona */
    border: 1px solid #E2E8F0; /* Delikatna ramka */
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Miękki cień */
    margin: 0 12px; z-index: 101; 
    transition: transform 0.2s;
}

/* Feedback przy dotyku na mobile */
.btn-interim:active[b-h97035m0qu] {
    background: #EFF6FF;
    transform: scale(0.95);
    border-color: #BFDBFE;
}

/* --- COMPONENT MOCKUPS --- */
.mock-input[b-h97035m0qu] {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; height: 48px;
    padding: 0 16px; display: flex; align-items: center; font-size: 0.95rem; color: #94A3B8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.mock-input.number[b-h97035m0qu], .mock-input.date[b-h97035m0qu] { justify-content: space-between; }

.mock-scale[b-h97035m0qu] {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px;
    display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.mock-scale .lbl[b-h97035m0qu] { font-weight: 700; color: #64748B; font-size: 0.8rem; }
.mock-scale .track[b-h97035m0qu] { flex: 1; height: 6px; background: #F1F5F9; border-radius: 4px; position: relative; }
.mock-scale .thumb[b-h97035m0qu] { width: 18px; height: 18px; background: #FFFFFF; border: 4px solid #3B82F6; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.mock-binary[b-h97035m0qu] { display: flex; gap: 12px; }
.mock-binary .opt[b-h97035m0qu] {
    flex: 1; height: 44px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-weight: 600; color: #64748B;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.mock-upload[b-h97035m0qu] {
    height: 80px; background: #FFFFFF; border: 2px dashed #CBD5E1; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: #94A3B8; font-size: 0.9rem;
}

/* =========================================
   SORTABLE JS STYLES (INDUSTRIAL GRADE)
   =========================================
*/

.multi-preview-container[b-h97035m0qu] {
    position: relative; min-height: 120px;
    display: flex; flex-direction: column;
}

/* SortableJS Classes */
.sortable-drag[b-h97035m0qu] {
    opacity: 1 !important;
    background: #FFFFFF;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
    cursor: grabbing;
    z-index: 9999;
}
.sortable-ghost[b-h97035m0qu] {
    opacity: 0.4;
    background: #F1F5F9;
    border: 2px dashed #3B82F6;
}

/* Opcje Managera */
.options-manager-panel[b-h97035m0qu] {
    background: #FFFFFF; border-radius: 16px; border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05); overflow: hidden;
    display: flex; flex-direction: column;
}

.omp-header[b-h97035m0qu] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #F1F5F9; background: #F8FAFC;
}
.omp-title[b-h97035m0qu] { font-size: 0.8rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; }
.omp-spacer[b-h97035m0qu] { width: 32px; }

/* Lista Sortowalna */
.omp-list-wrapper[b-h97035m0qu] { position: relative; min-height: 50px; }
.omp-list[b-h97035m0qu] {
    position: relative; padding: 8px; 
    display: flex; flex-direction: column; gap: 8px;
    max-height: 300px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.opt-row[b-h97035m0qu] {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
    user-select: none;
}

/* UCHWYT (MOBILE CRITICAL) */
.opt-drag-handle[b-h97035m0qu] {
    width: 40px; height: 40px; 
    display: flex; align-items: center; justify-content: center;
    cursor: grab; color: #CBD5E1; border-radius: 8px;
    touch-action: none; /* Pozwala na drag, blokuje scroll */
}
.opt-drag-handle:hover[b-h97035m0qu] { background: #F1F5F9; color: #64748B; }
.opt-drag-handle:active[b-h97035m0qu] { cursor: grabbing; color: #3B82F6; }

/* Overlay */
.updating-overlay[b-h97035m0qu] {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.6); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s;
    border-radius: 12px;
}
.updating-overlay.visible[b-h97035m0qu] { opacity: 1; pointer-events: all; }

/* Reszta opcji */
.opt-content[b-h97035m0qu] { flex: 1; overflow: hidden; padding: 0 4px; }
.opt-text[b-h97035m0qu] { font-size: 0.95rem; color: #334155; font-weight: 500; }
.opt-actions[b-h97035m0qu] { display: flex; gap: 4px; }

.btn-icon-action[b-h97035m0qu] {
    width: 28px; height: 28px; border: none; background: transparent; border-radius: 6px;
    color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.btn-icon-action:hover[b-h97035m0qu] { background: #F1F5F9; color: #3B82F6; }
.btn-icon-action.danger:hover[b-h97035m0qu] { background: #FEF2F2; color: #EF4444; }
.btn-icon-action span[b-h97035m0qu] { font-size: 18px; }

.omp-footer[b-h97035m0qu] { padding: 12px 16px; border-top: 1px solid #F1F5F9; background: #FFFFFF; }
.btn-add-option[b-h97035m0qu] {
    width: 100%; padding: 10px; border: 2px dashed #CBD5E1; border-radius: 10px;
    background: transparent; color: #64748B; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
}
.btn-add-option:hover[b-h97035m0qu] { border-color: #3B82F6; background: #EFF6FF; color: #3B82F6; }
.btn-add-option span.material-symbols-rounded[b-h97035m0qu] { font-size: 20px; }

/* Preview Buttons */
.btn-manage-options[b-h97035m0qu] {
    width: 100%; padding: 12px; background: #FFFFFF;
    border: 1px dashed #CBD5E1; border-radius: 12px;
    color: #64748B; font-size: 0.9rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.btn-manage-options:hover[b-h97035m0qu] {
    border-color: #3B82F6; border-style: solid; color: #3B82F6; background: #EFF6FF;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.btn-manage-options:hover .material-symbols-rounded[b-h97035m0qu] { transform: rotate(90deg); }

.btn-back-small[b-h97035m0qu] {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: white;
    color: #64748B; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.2s;
}
.btn-back-small:hover[b-h97035m0qu] { background: #3B82F6; color: white; }

/* Mockup list styles */
.mock-multi[b-h97035m0qu] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.m-row.static[b-h97035m0qu] {
    padding: 8px 12px; background: transparent; border: none; box-shadow: none; gap: 12px; display: flex; align-items: center;
}
.m-row.static .box[b-h97035m0qu] { width: 18px; height: 18px; border: 2px solid #CBD5E1; border-radius: 5px; flex-shrink: 0; }
.mock-text[b-h97035m0qu] { font-size: 0.85rem; color: #64748B; font-weight: 500; }
.m-more-indicator[b-h97035m0qu] { font-size: 0.75rem; color: #94A3B8; margin-left: 44px; margin-top: -4px; font-weight: 600; }


/* =========================================
   AUTOMATION EDITOR STYLES
   =========================================
*/
.editor-container[b-h97035m0qu] { padding-bottom: 24px; }
.header-info[b-h97035m0qu] { display: flex; align-items: center; gap: 8px; color: #64748B; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 24px; padding-left: 4px; }

.loading-state[b-h97035m0qu] { padding: 40px; text-align: center; color: #94A3B8; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-rules-hint[b-h97035m0qu] { text-align: center; color: #94A3B8; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-rules-hint span[b-h97035m0qu] { font-size: 32px; color: #CBD5E1; }
.empty-rules-hint p[b-h97035m0qu] { margin: 0; font-weight: 600; color: #64748B; }

/* Accordion Card */
.condition-card[b-h97035m0qu] {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px;
    margin-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.condition-card.expanded[b-h97035m0qu] { border-color: #3B82F6; box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.1); }

.cc-header[b-h97035m0qu] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: #FFFFFF; cursor: pointer;
    user-select: none; transition: background 0.2s;
}
.cc-header:hover[b-h97035m0qu] { background: #F8FAFC; }

.cc-left[b-h97035m0qu] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.chevron[b-h97035m0qu] { color: #94A3B8; transition: transform 0.3s; font-size: 24px; }
.expanded .chevron[b-h97035m0qu] { transform: rotate(180deg); color: #3B82F6; }

.cc-titles[b-h97035m0qu] { display: flex; flex-direction: column; overflow: hidden; }
.cc-main-title[b-h97035m0qu] { font-weight: 700; font-size: 0.9rem; color: #1E293B; }
.cc-subtitle[b-h97035m0qu] { font-size: 0.75rem; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cc-remove[b-h97035m0qu] {
    width: 32px; height: 32px; border-radius: 8px; background: transparent; border: none; 
    color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; 
    transition: 0.2s; flex-shrink: 0;
}
.cc-remove:hover[b-h97035m0qu] { background: #FEF2F2; color: #EF4444; }

.cc-body[b-h97035m0qu] { 
    padding: 16px; border-top: 1px solid #F1F5F9; animation: slideDown-b-h97035m0qu 0.3s ease; 
}
@keyframes slideDown-b-h97035m0qu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Rule Box */
.rule-editor-box[b-h97035m0qu] {
    background: #F8FAFC; border-radius: 12px; padding: 16px; border: 1px solid #F1F5F9; 
    position: relative; margin-top: 12px;
}
.rule-arrow[b-h97035m0qu] { position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #F8FAFC; border-top: 1px solid #F1F5F9; border-left: 1px solid #F1F5F9; transform: rotate(45deg); }
.rule-label[b-h97035m0qu] { font-size: 0.75rem; color: #64748B; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; display: block; }
.helper-text[b-h97035m0qu] { font-size: 0.75rem; color: #94A3B8; margin-top: 6px; }

/* Actions Footer (Side-by-Side) */
.actions-footer[b-h97035m0qu] {
    display: flex; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid #E2E8F0; gap: 16px; width: 100%;
}
.btn-danger-outline[b-h97035m0qu] {
    flex: 1; height: 48px; padding: 0 12px; border: 1px solid #EF4444; color: #EF4444; background: transparent;
    border-radius: 12px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; white-space: nowrap;
}
.btn-danger-outline:hover[b-h97035m0qu] { background: #FEF2F2; }
.btn-dock-danger[b-h97035m0qu] {
        width: 44px; height: 44px; flex-shrink: 0;
        border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.507);
        background: transparent; 
        color: #ffffff;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.2s;
    }
    .btn-dock-danger:hover[b-h97035m0qu] {
        background: #EF4444; color: white;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    }
    .btn-dock-danger:active[b-h97035m0qu] { transform: scale(0.9); }
    .btn-dock-danger:disabled[b-h97035m0qu] { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); }
.btn-primary[b-h97035m0qu] { 
    flex: 1; height: 48px; padding: 0 12px; border-radius: 12px; border: none; background: #3B82F6; color: white;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: 0.2s; box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2); white-space: nowrap;
}
.btn-primary:hover[b-h97035m0qu] { background: #2563EB; transform: translateY(-1px); }
.btn-primary:disabled[b-h97035m0qu] { background: #94A3B8; cursor: not-allowed; transform: none; box-shadow: none; }

/* Common Forms */
.row-inputs[b-h97035m0qu] { display: flex; gap: 12px; } .row-inputs .form-group[b-h97035m0qu] { flex: 1; }
.switch-selector[b-h97035m0qu] { display: flex; background: #E2E8F0; padding: 4px; border-radius: 10px; }
.switch-selector button[b-h97035m0qu] { flex: 1; border: none; padding: 8px; border-radius: 8px; background: transparent; color: #64748B; font-weight: 600; cursor: pointer; }
.switch-selector button.active[b-h97035m0qu] { background: white; color: #3B82F6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.checkbox-wrapper[b-h97035m0qu] { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.9rem; color: #334155; }

.btn-dashed[b-h97035m0qu] { width: 100%; border: 2px dashed #CBD5E1; background: transparent; color: #64748B; padding: 12px; border-radius: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 16px; transition: 0.2s; }
.btn-dashed:hover[b-h97035m0qu] { border-color: #3B82F6; color: #3B82F6; background: #EFF6FF; }
/* =========================================
   CONTROL PANEL CARD (NOWY STYL)
   ========================================= */
.control-panel-card[b-h97035m0qu] {
    /* Dziedziczy glass-panel */
    padding: 16px 24px;
    margin-bottom: 24px; /* Odstęp od EdytorStart */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Sekcja Statusu (Lewa strona) */
.cp-status[b-h97035m0qu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-label[b-h97035m0qu] {
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
}

.cp-badge[b-h97035m0qu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.cp-badge.neutral[b-h97035m0qu] { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
.cp-badge.success[b-h97035m0qu] { background: #D1FAE5; color: #059669; border: 1px solid #A7F3D0; }
.cp-badge.processing[b-h97035m0qu] { background: #EFF6FF; color: #3B82F6; border: 1px solid #BFDBFE; }
.cp-badge span.material-symbols-rounded[b-h97035m0qu] { font-size: 18px; }

/* Sekcja Akcji (Prawa strona) */
.cp-actions[b-h97035m0qu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Przycisk Usuwania (Subtelny) */
.btn-cp-danger[b-h97035m0qu] {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #EF4444;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cp-danger:hover[b-h97035m0qu] {
    background: #FEF2F2;
    border-color: #FECACA;
}
.btn-cp-danger:disabled[b-h97035m0qu] { opacity: 0.5; cursor: not-allowed; }

/* Przycisk Publikacji (Główny) */
.btn-cp-primary[b-h97035m0qu] {
    height: 44px;
    padding: 0 24px;
    border-radius: 12px;
    border: none;
    background: #3B82F6; /* Niebieski Brand */
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}
.btn-cp-primary:hover[b-h97035m0qu] {
    background: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(59, 130, 246, 0.4);
}
.btn-cp-primary:disabled[b-h97035m0qu] {
    background: #94A3B8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.mini-spinner.blue[b-h97035m0qu] { border-top-color: #3B82F6; width: 32px; height: 32px; border-width: 3px; }
.mini-spinner.white[b-h97035m0qu] { border-top-color: #FFFFFF; border-right-color: rgba(255,255,255,0.3); width: 18px; height: 18px; border-width: 2px; }
.mini-spinner[b-h97035m0qu] {
    width: 16px; height: 16px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-h97035m0qu 1s infinite linear;
}
/* --- FOOTER MAIN --- */
.builder-footer[b-h97035m0qu] { margin-top: 32px; }
.liquid-btn-big[b-h97035m0qu] {
    width: 100%; height: 60px;
    background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px);
    border: 2px dashed #CBD5E1; border-radius: 20px;
    color: #64748B; font-size: 1rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    cursor: pointer; transition: all 0.3s;
}
.liquid-btn-big:hover[b-h97035m0qu] {
    background: #EFF6FF; border-color: #3B82F6; color: #3B82F6; transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.2);
}

/* --- ANIMATIONS & LOADER --- */
.fade-in-up[b-h97035m0qu] { opacity: 0; animation: fadeInUp-b-h97035m0qu 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.delay-1[b-h97035m0qu] { animation-delay: 0.1s; } .delay-2[b-h97035m0qu] { animation-delay: 0.2s; } .delay-3[b-h97035m0qu] { animation-delay: 0.3s; }
@keyframes fadeInUp-b-h97035m0qu { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.loading-overlay[b-h97035m0qu] {
    position: fixed; inset: 0; background: white; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.divine-loader[b-h97035m0qu] {
    width: 60px; height: 60px; border-radius: 50%; border: 3px solid #F1F5F9; border-top-color: #3B82F6;
    animation: spin-b-h97035m0qu 1s linear infinite;
}
@keyframes spin-b-h97035m0qu { 100% { transform: rotate(360deg); } }
.loading-text h3[b-h97035m0qu] { margin: 0; color: #0F172A; } .loading-text p[b-h97035m0qu] { margin: 4px 0 0 0; color: #94A3B8; }

/* --- EMPTY STATE --- */
.empty-canvas[b-h97035m0qu] { text-align: center; padding: 80px 0; color: #94A3B8; }
.empty-icon[b-h97035m0qu] { width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.empty-icon span[b-h97035m0qu] { font-size: 40px; color: #CBD5E1; }
.empty-canvas h3[b-h97035m0qu] { color: #1E293B; margin-bottom: 8px; }

/* =======================================================
   DESKTOP ONLY HOVER EFFECTS (@media hover)
   Eliminuje double-tap na mobile.
   ======================================================= */
@media (hover: hover) {
    /* Podnoszenie karty */
    .glass-panel:hover[b-h97035m0qu] {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
        border-color: #FFFFFF; 
        z-index: 5;
    }
    .tool-btn.danger:hover[b-h97035m0qu] {
    background: #FEF2F2;
    color: #EF4444;
}

/* Opcjonalnie: animacja pulsu przy hover na danger */
.tool-btn.danger:active[b-h97035m0qu] {
    transform: scale(0.9);
}
    
    .question-block:hover[b-h97035m0qu] { z-index: 10; }

    /* Plusiki - domyślnie ukryte na PC, bo na mobile są w stylu bazowym */
    .interim-add-zone[b-h97035m0qu] {
        opacity: 0; pointer-events: none;
        /* ZMIANA: Na komputerze wracamy do ujemnego marginesu, bo tam to działa dobrze */
        margin: -12px 0; 
    }
    .interim-add-zone .line[b-h97035m0qu] { 
        display: block; /* Linia wraca na PC */
        transform: scaleX(0); transition: transform 0.3s ease; 
    }

    /* Plusiki - pokaż po najechaniu na blok LUB strefę */
    .question-block:hover .interim-add-zone[b-h97035m0qu],
    .interim-add-zone:hover[b-h97035m0qu] {
        opacity: 1; pointer-events: auto;
    }
    
    .interim-add-zone:hover .line[b-h97035m0qu] { transform: scaleX(1); }
    
    .btn-interim[b-h97035m0qu] {
        /* Reset do niebieskiego guzika na PC */
        background: #3B82F6; color: white; border: 2px solid white;
        width: 36px; height: 36px;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    .btn-interim:hover[b-h97035m0qu] { 
        transform: scale(1.2); background: #2563EB; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5); 
    }

    /* --- PUBLISH DOCK (FLOATING BAR) --- */
    .publish-dock[b-h97035m0qu] {
        position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
        width: calc(100% - 48px); max-width: 600px;
        background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px);
        border-radius: 20px; padding: 8px 12px; /* Mniejszy padding w pionie */
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .dock-status[b-h97035m0qu] {
        display: flex; align-items: center; gap: 8px; justify-content: center;
        color: white; font-size: 0.9rem; font-weight: 500;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    
    .dock-info[b-h97035m0qu] { color: #94A3B8; font-size: 0.85rem; }
    
    .success-icon[b-h97035m0qu] { color: #10B981; font-size: 20px; animation: popIn-b-h97035m0qu 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @keyframes popIn-b-h97035m0qu { from { transform: scale(0); } to { transform: scale(1); } }

    .dock-spinner[b-h97035m0qu] {
        width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.2);
        border-top-color: white; border-radius: 50%; animation: spin-b-h97035m0qu 1s infinite linear;
    }

    /* Przycisk Publikacji (Prawa) */
    .btn-publish[b-h97035m0qu] {
        height: 44px; padding: 0 20px; border-radius: 12px; border: none;
        background: white; color: #0F172A; font-weight: 700; font-size: 0.9rem;
        display: flex; align-items: center; gap: 8px; cursor: pointer;
        transition: all 0.2s; flex-shrink: 0;
    }
    .btn-publish:hover[b-h97035m0qu] { background: #F1F5F9; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,255,255,0.2); }
    .btn-publish:active[b-h97035m0qu] { transform: scale(0.95); }
    .btn-publish:disabled[b-h97035m0qu] { opacity: 0.7; cursor: not-allowed; transform: none; }

    /* Responsywność */
    @media (max-width: 640px) {
        .publish-dock[b-h97035m0qu] { bottom: 16px; width: calc(100% - 32px); }
        .builder-footer[b-h97035m0qu] { padding-bottom: 90px; } /* Zrób miejsce na docka */
        .control-panel-card[b-h97035m0qu] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        text-align: center;
    }
    
    .cp-status[b-h97035m0qu] {
        justify-content: center;
        width: 100%;
    }
    
    .cp-actions[b-h97035m0qu] {
        width: 100%;
        justify-content: space-between; /* Rozrzuć przyciski */
    }
    
    .btn-cp-danger[b-h97035m0qu] {
        flex: 1;
        border: 1px solid #FECACA; /* Na mobile dodaj ramkę dla lepszej widoczności */
    }
    .btn-cp-primary[b-h97035m0qu] {
        flex: 1.5; /* Publikacja ważniejsza = szersza */
    }
    }
    @media (max-width: 400px) {
        .status-text[b-h97035m0qu] { display: none; }
        .btn-label[b-h97035m0qu] { display: none; } /* Tylko ikona publikacji na mini ekranach */
        .btn-publish[b-h97035m0qu] { padding: 0 12px; }
    }
}

/* --- IMAGE MANAGER SHEET STYLES --- */

.image-manager-sheet[b-h97035m0qu] {
    padding-bottom: 20px;
    display: flex; flex-direction: column; gap: 20px;
}

/* Upload Zone */
.upload-zone[b-h97035m0qu] {
    height: 80px;
    border: 2px dashed #CBD5E1; border-radius: 16px;
    background: #F8FAFC;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}
.upload-zone:hover[b-h97035m0qu] {
    border-color: #3B82F6; background: #EFF6FF; color: #3B82F6;
}
.uz-content[b-h97035m0qu] { display: flex; align-items: center; gap: 12px; color: #64748B; pointer-events: none; }
.uz-icon span[b-h97035m0qu] { font-size: 28px; }
.uz-text[b-h97035m0qu] { font-weight: 600; font-size: 0.9rem; }

/* Grid */
.manager-grid[b-h97035m0qu] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    max-height: 400px; overflow-y: auto;
}

.mgr-item[b-h97035m0qu] {
    aspect-ratio: 1; border-radius: 12px; overflow: hidden;
    position: relative; background: #E2E8F0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s, opacity 0.3s;
}
.mgr-item.deleting[b-h97035m0qu] { transform: scale(0.5); opacity: 0; }

.mgr-img[b-h97035m0qu] {
    width: 100%; height: 100%; object-fit: cover;
}

.btn-mgr-delete[b-h97035m0qu] {
    position: absolute; top: 4px; right: 4px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px);
    border: none; color: #EF4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: 0.2s;
}
.btn-mgr-delete:hover[b-h97035m0qu] { transform: scale(1.1); background: #FEF2F2; }
.btn-mgr-delete span[b-h97035m0qu] { font-size: 18px; }

/* Loading State */
.mgr-item.loading[b-h97035m0qu] { display: flex; align-items: center; justify-content: center; background: #F1F5F9; }
.mgr-spinner[b-h97035m0qu] {
    width: 24px; height: 24px; border: 3px solid #E2E8F0; border-top-color: #3B82F6;
    border-radius: 50%; animation: spin-b-h97035m0qu 1s infinite linear;
}

.empty-images-hint[b-h97035m0qu] {
    text-align: center; color: #94A3B8; font-size: 0.9rem; padding: 20px 0;
}

.sheet-footer-btn[b-h97035m0qu] { margin-top: 10px; }

/* Utility classes for input file */
.relative-container[b-h97035m0qu] { position: relative; }
.absolute-fill-input[b-h97035m0qu] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* --- NAPRAWA WYŚWIETLANIA ZDJĘĆ W TLE --- */
.media-slot[b-h97035m0qu] {
    /* To zapewnia, że zdjęcie jest wyśrodkowane i wypełnia cały kwadrat */
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Zachowujemy twoje style */
    position: relative;
    transition: all 0.2s;
}

/* Kiedy jest podgląd, chcemy żeby licznik był bardziej czytelny */
.media-slot.has-preview .count-badge[b-h97035m0qu] {
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Cień dla kontrastu */
    z-index: 2;
}

/* Opcjonalnie: przyciemnienie tła, żeby licznik był lepiej widoczny */
.media-slot.has-preview[b-h97035m0qu]::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.1); /* Lekkie przyciemnienie */
    border-radius: inherit;
}

/* --- VIDEO SUPPORT STYLES --- */

/* 1. Wygląd Media Slot, gdy jest wideo */
.media-slot.is-video[b-h97035m0qu] {
    background: #1E293B !important; /* Ciemne tło dla filmu */
    border-color: #334155;
    color: white;
}

.media-slot .video-icon[b-h97035m0qu] {
    font-size: 28px;
    color: white;
    animation: pulseVideo-b-h97035m0qu 2s infinite;
}

@keyframes pulseVideo-b-h97035m0qu {
    0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
    100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

/* 2. Manager Grid - obsługa tagu video */
.mgr-item video.mgr-img[b-h97035m0qu] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wypełnia kwadrat, przycina boki */
    background: black;
}

/* 3. Mała ikonka kamery w rogu miniatury w managerze (żeby było jasne co to) */
.video-indicator[b-h97035m0qu] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    pointer-events: none;
}
.video-indicator span[b-h97035m0qu] {
    font-size: 16px;
}
/* /Pages/AnkietaWork.razor.rz.scp.css */
    /* =================================================================
       ETHEREAL CLARITY UI (Light, Crisp, Premium)
       ================================================================= */
    
    .ethereal-container[b-1wkyuslgk0] {
        width: 100%; min-height: 100vh;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        color: #1E293B; /* Slate 800 */
        background-color: #F8FAFC; /* Slate 50 */
        overflow-x: hidden; padding-bottom: 100px;
    }

    /* --- BACKGROUND --- */
    .ethereal-bg[b-1wkyuslgk0] { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .orb[b-1wkyuslgk0] { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; }
    .o1[b-1wkyuslgk0] { width: 800px; height: 800px; background: #E0E7FF; top: -20%; left: -10%; } /* Indigo Tint */
    .o2[b-1wkyuslgk0] { width: 600px; height: 600px; background: #FCE7F3; bottom: -10%; right: -10%; } /* Pink Tint */
    .glass-surface[b-1wkyuslgk0] { position: absolute; inset: 0; backdrop-filter: blur(60px); background: rgba(255,255,255,0.3); }

    /* --- LAYOUT --- */
    .content-frame[b-1wkyuslgk0] {
        position: relative; z-index: 1; max-width: 760px; margin: 0 auto;
        padding: 40px 20px; display: flex; flex-direction: column; gap: 40px;
    }

    /* --- LOADER --- */
    .loader-wrap[b-1wkyuslgk0] { height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
    .pulse-ring[b-1wkyuslgk0] {
        width: 48px; height: 48px; border-radius: 50%; border: 3px solid #6366F1;
        border-right-color: transparent; animation: spin-b-1wkyuslgk0 0.8s infinite linear;
    }
    .loader-txt[b-1wkyuslgk0] { font-weight: 500; color: #64748B; letter-spacing: 0.5px; }
    @keyframes spin-b-1wkyuslgk0 { 100% { transform: rotate(360deg); } }

    /* --- ANIMATION UTILS --- */
    .fade-in[b-1wkyuslgk0] { opacity: 0; animation: fadeOnly-b-1wkyuslgk0 0.8s ease-out forwards; }
    .fade-in-up[b-1wkyuslgk0] { opacity: 0; animation: fadeUp-b-1wkyuslgk0 0.8s ease-out forwards; }
    .delay-0[b-1wkyuslgk0]{animation-delay:0.1s}.delay-1[b-1wkyuslgk0]{animation-delay:0.15s}.delay-2[b-1wkyuslgk0]{animation-delay:0.2s}.delay-3[b-1wkyuslgk0]{animation-delay:0.25s}.delay-4[b-1wkyuslgk0]{animation-delay:0.3s}
    @keyframes fadeOnly-b-1wkyuslgk0 { to { opacity: 1; } }
    @keyframes fadeUp-b-1wkyuslgk0 { from { transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


    /* --- CARD DESIGN --- */
    .questions-slot[b-1wkyuslgk0] { display: flex; flex-direction: column; gap: 24px; }

    .q-card[b-1wkyuslgk0] {
        background: #FFFFFF;
        border-radius: 24px;
        padding: 32px 40px; /* Szeroki padding */
        /* Cień: Miękki, wielowarstwowy, kolorowy */
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.01),
            0 10px 15px -3px rgba(0, 0, 0, 0.01),
            0 0 0 1px rgba(0,0,0,0.02); /* Border zastąpiony cieniem */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .q-card:hover[b-1wkyuslgk0] {
        transform: translateY(-2px);
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.03),
            0 10px 10px -5px rgba(0, 0, 0, 0.01),
            0 0 0 1px rgba(99, 102, 241, 0.1); /* Delikatne podświetlenie ramki */
    }

    /* Meta (Badge & Required) */
    .q-meta-row[b-1wkyuslgk0] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .q-badge[b-1wkyuslgk0] {
        font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
        color: #6366F1; background: #EEF2FF; padding: 4px 12px; border-radius: 100px;
    }
    .q-req[b-1wkyuslgk0] { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: #F43F5E; text-transform: uppercase; }
    .q-req .dot[b-1wkyuslgk0] { width: 6px; height: 6px; background: #F43F5E; border-radius: 50%; }

    /* Content Text */
    .q-heading[b-1wkyuslgk0] {
        font-size: 1.4rem; font-weight: 800; color: #0F172A; margin: 0 0 8px 0; line-height: 1.3;
    }
    .q-sub[b-1wkyuslgk0] { font-size: 1rem; color: #64748B; margin: 0; line-height: 1.6; }

    /* Gallery */
    .q-gallery[b-1wkyuslgk0] { display: flex; gap: 12px; margin-top: 24px; overflow-x: auto; padding-bottom: 8px; }
    .gallery-img[b-1wkyuslgk0] {
        width: 100px; height: 100px; border-radius: 16px; background-size: cover; background-position: center;
        flex-shrink: 0; border: 2px solid #F1F5F9; position: relative; overflow: hidden; cursor: zoom-in;
        transition: 0.2s;
    }
    .gallery-img:hover[b-1wkyuslgk0] { border-color: #6366F1; transform: scale(1.05); }
    .zoom-hint[b-1wkyuslgk0] { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; color: white; }
    .gallery-img:hover .zoom-hint[b-1wkyuslgk0] { opacity: 1; }

    .q-interaction[b-1wkyuslgk0] { margin-top: 32px; }


    /* =================================================================
       INPUTS 2.0 (Polished & Interactive)
       ================================================================= */

    /* 1. TEXT / NUMBER (Grouped with Icon) */
    .inp-field-group[b-1wkyuslgk0] {
        display: flex; align-items: stretch;
        background: #F8FAFC; border: 1px solid #E2E8F0;
        border-radius: 16px; overflow: hidden;
        transition: 0.3s;
    }
    .inp-field-group:focus-within[b-1wkyuslgk0] {
        background: #FFFFFF; border-color: #6366F1;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

    .icon-addon[b-1wkyuslgk0] {
        width: 50px; display: flex; align-items: center; justify-content: center;
        color: #94A3B8; background: #F1F5F9; border-right: 1px solid #E2E8F0;
    }
    .icon-addon span[b-1wkyuslgk0] { font-size: 22px; }
    /* Warianty kolorów ikon przy focusie (opcjonalnie) */
    .inp-field-group:focus-within .icon-addon[b-1wkyuslgk0] { color: #6366F1; background: #EEF2FF; border-right-color: #E0E7FF; }

    .inp-text[b-1wkyuslgk0] {
        flex: 1; padding: 16px 20px; border: none; background: transparent;
        font-size: 1rem; color: #1E293B; outline: none; font-family: inherit; font-weight: 500;
        resize: none;
    }


    /* 2. YES/NO (Big Tiles) */
    .grid-binary[b-1wkyuslgk0] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    
    .tile-option[b-1wkyuslgk0] { cursor: pointer; display: block; }
    .tile-option input[b-1wkyuslgk0] { display: none; }
    
    .tile-face[b-1wkyuslgk0] {
        background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px;
        padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px;
        transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    .tile-icon[b-1wkyuslgk0] {
        width: 44px; height: 44px; border-radius: 12px; background: #F8FAFC;
        display: flex; align-items: center; justify-content: center; color: #94A3B8;
        transition: 0.2s;
    }
    .tile-label[b-1wkyuslgk0] { font-weight: 700; font-size: 1.1rem; color: #64748B; transition: 0.2s; }

    /* Hover */
    .tile-option:hover .tile-face[b-1wkyuslgk0] { border-color: #CBD5E1; background: #F8FAFC; transform: translateY(-3px); }

    /* Checked YES */
    .tile-option.yes input:checked + .tile-face[b-1wkyuslgk0] {
        border-color: #10B981; background: #ECFDF5; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); padding: 20px;
    }
    .tile-option.yes input:checked + .tile-face .tile-icon[b-1wkyuslgk0] { background: #10B981; color: white; }
    .tile-option.yes input:checked + .tile-face .tile-label[b-1wkyuslgk0] { color: #047857; }

    /* Checked NO */
    .tile-option.no input:checked + .tile-face[b-1wkyuslgk0] {
        border-color: #EF4444; background: #FEF2F2; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);padding: 20px;
    }
    .tile-option.no input:checked + .tile-face .tile-icon[b-1wkyuslgk0] { background: #EF4444; color: white; }
    .tile-option.no input:checked + .tile-face .tile-label[b-1wkyuslgk0] { color: #991B1B; }


    /* 3. SLIDER (Refined) */
    .slider-block[b-1wkyuslgk0] { padding: 10px 0; }
    
    .slider-top[b-1wkyuslgk0] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .s-label[b-1wkyuslgk0] { font-size: 0.75rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; }
    
    .s-value-bubble[b-1wkyuslgk0] {
        font-size: 2rem; font-weight: 900; color: #6366F1;
        width: 60px; height: 50px; background: #EEF2FF; border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.1);
    }

    .slider-rail-wrap[b-1wkyuslgk0] { width: 100%; height: 12px; position: relative; }
    
    .range-input[b-1wkyuslgk0] {
        -webkit-appearance: none; width: 100%; height: 12px; border-radius: 12px;
        background: #E2E8F0; outline: none; cursor: pointer; margin: 0;
    }
    
    .thumbnails-grid[b-1wkyuslgk0] {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.thumb-item[b-1wkyuslgk0] {
    aspect-ratio: 1; /* Kwadratowe kafelki */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #E2E8F0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

    /* Thumb Styling */
    .range-input[b-1wkyuslgk0]::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 32px; height: 32px; border-radius: 50%;
        background: #FFFFFF; border: 4px solid #6366F1;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transform: scale(1); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        margin-top: 0px;
    }
    .range-input:active[b-1wkyuslgk0]::-webkit-slider-thumb { transform: scale(1.2); background: #6366F1; border-color: white; }


    /* 4. MULTI SELECT (Action Rows) */
    .multi-stack[b-1wkyuslgk0] { display: flex; flex-direction: column; gap: 12px; }
    
    .multi-row[b-1wkyuslgk0] { display: block; cursor: pointer; }
    .multi-row input[b-1wkyuslgk0] { display: none; }
    
    .row-surface[b-1wkyuslgk0] {
        display: flex; align-items: center; gap: 16px;
        padding: 16px 20px; background: #FFFFFF;
        border: 1px solid #E2E8F0; border-radius: 16px;
        transition: 0.2s;
    }
    
    .row-check[b-1wkyuslgk0] {
        width: 24px; height: 24px; border-radius: 8px; border: 2px solid #CBD5E1;
        display: flex; align-items: center; justify-content: center; background: #F8FAFC;
        transition: 0.2s; color: white;
    }
    .row-check span[b-1wkyuslgk0] { font-size: 16px; transform: scale(0); transition: 0.2s; }
    
    .row-txt[b-1wkyuslgk0] { font-weight: 550; font-size: 0.90rem; color: #6f7a89; transition: 0.2s; }

    /* Hover */
    .multi-row:hover .row-surface[b-1wkyuslgk0] { background: #F8FAFC; border-color: #94a3b87c; }

    /* Checked */
    .multi-row input:checked + .row-surface[b-1wkyuslgk0] {
        background: #EEF2FF; 
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.1);
    }
    .multi-row input:checked + .row-surface .row-check[b-1wkyuslgk0] { background: #6366F1; border-color: #6366F1; }
    .multi-row input:checked + .row-surface .row-check span[b-1wkyuslgk0] { transform: scale(1); }
    .multi-row input:checked + .row-surface .row-txt[b-1wkyuslgk0] { color: #1E293B; font-weight: 700; font-size: 0.95rem; }


    /* 5. UPLOAD (Dropzone) */
    .file-dropzone[b-1wkyuslgk0] {
        border: 2px dashed #E2E8F0; border-radius: 20px; padding: 32px;
        background: #F9FAFB; cursor: pointer; transition: 0.3s;
    }
    .file-dropzone:hover[b-1wkyuslgk0] { border-color: #6366F1; background: #EEF2FF; }
    
    .dz-content[b-1wkyuslgk0] { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .dz-icon[b-1wkyuslgk0] {
        width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF;
        display: flex; align-items: center; justify-content: center;
        color: #6366F1; box-shadow: 0 4px 10px rgba(0,0,0,0.05); font-size: 28px;
        transition: 0.3s;
    }
    .file-dropzone:hover .dz-icon[b-1wkyuslgk0] { transform: scale(1.1) rotate(10deg); }
    .dz-info strong[b-1wkyuslgk0] { display: block; color: #1E293B; font-size: 1.1rem; }
    .dz-info span[b-1wkyuslgk0] { color: #94A3B8; font-size: 0.9rem; }


    /* --- FOOTER --- */
    .footer-slot[b-1wkyuslgk0] { margin-top: 60px; text-align: center; padding-bottom: 40px; }
    
    .btn-primary-glow[b-1wkyuslgk0] {
        background: #265298; /* Solid Black/Navy */
        color: white; border: none; padding: 20px 56px; border-radius: 100px;
        font-size: 1.15rem; font-weight: 700; cursor: pointer;
        display: inline-flex; align-items: center; gap: 12px;
        transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 10px 25px -5px rgba(30, 41, 59, 0.2);
    }
    .btn-primary-glow:hover[b-1wkyuslgk0] { transform: scale(1.02); box-shadow: 0 20px 40px -10px rgba(30, 41, 59, 0.2); }
    .btn-primary-glow:active[b-1wkyuslgk0] { transform: scale(0.96); }

    .secure-info[b-1wkyuslgk0] { margin-top: 24px; color: #94A3B8; font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .secure-info span[b-1wkyuslgk0] { font-size: 16px; color: #10B981; }

    /* Empty */
    .empty-view[b-1wkyuslgk0] { text-align: center; padding: 80px 0; color: #94A3B8; }
    .empty-icon[b-1wkyuslgk0] { font-size: 48px; margin-bottom: 16px; color: #E2E8F0; }

    /* Mobile */
    @media (max-width: 640px) {
        .q-card[b-1wkyuslgk0] { padding: 24px 20px; }
        .q-heading[b-1wkyuslgk0] { font-size: 1.3rem; }
        .grid-binary[b-1wkyuslgk0] { grid-template-columns: 1fr; }
        .tile-face[b-1wkyuslgk0] { flex-direction: row; height: auto; justify-content: flex-start; }
    }

    /* Kontener na media (img/video) */
.media-container[b-1wkyuslgk0] {
    width: 100%;
    height: 100%;
    position: relative;
}

.media-container img[b-1wkyuslgk0], 
.media-container video[b-1wkyuslgk0] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wypełnianie kwadratu */
    display: block;
}

/* Specyficzne dla wideo - czarne tło */
.media-container.video[b-1wkyuslgk0] {
    background: #0F172A; 
}

/* Ikona kamery w rogu wideo (żeby odróżnić od zdjęcia przed kliknięciem) */
.video-badge[b-1wkyuslgk0] {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Żeby nie przeszkadzało w klikaniu play */
    z-index: 2;
}
.video-badge span[b-1wkyuslgk0] { font-size: 16px; }

.validation-error-border[b-1wkyuslgk0] {
    border: 2px solid #ff4d4d !important;
    box-shadow: 0 4px 20px rgba(255, 77, 77, 0.15);
}

.error-banner[b-1wkyuslgk0] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.error-banner .material-symbols-rounded[b-1wkyuslgk0] {
    font-size: 1.2rem;
}

/* Overlay usuwania (istniejący styl, upewnij się że z-index jest wysoki) */
.thumb-overlay[b-1wkyuslgk0] {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.2s;
    z-index: 5; /* Nad wideo i badge */
}
.thumb-item:hover .thumb-overlay[b-1wkyuslgk0] { opacity: 1; }

.btn-thumb-delete[b-1wkyuslgk0] {
    width: 36px; height: 36px; border-radius: 50%;
    background: white; border: none; color: #EF4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transform: scale(0.8); transition: 0.2s;
}
.thumb-item:hover .btn-thumb-delete[b-1wkyuslgk0] { transform: scale(1); }
.btn-thumb-delete:hover[b-1wkyuslgk0] { background: #FEF2F2; transform: scale(1.1); }

  
/* /Pages/Home.razor.rz.scp.css */
*[b-ibyuzxuveq] {
    box-sizing: border-box;
}

/* --- GŁÓWNY KONTENER --- */
.liquid-container[b-ibyuzxuveq] {
    position: relative;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: #0F172A;
}

/* --- AMBIENT LIGHT --- */
.ambient-light[b-ibyuzxuveq] {
    position: fixed;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}

.ambient-light.one[b-ibyuzxuveq] {
    background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
    top: -200px;
    left: -200px;
}

.ambient-light.two[b-ibyuzxuveq] {
    background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
    bottom: -300px;
    right: -200px;
}

@keyframes floatLight-b-ibyuzxuveq {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 30px) scale(1.05);
    }
}


/* --- HEADER --- */
.liquid-header[b-ibyuzxuveq] {
    margin-bottom: 24px;
}

.header-content[b-ibyuzxuveq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}
.header-line[b-ibyuzxuveq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

.titles[b-ibyuzxuveq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-greeting[b-ibyuzxuveq] {
    font-size: 0.8rem;
    color: #64748B;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.header-content h1[b-ibyuzxuveq] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    color: #0F172A;
    line-height: 1.1;
}

/* Przycisk Główny */
.liquid-btn-primary[b-ibyuzxuveq] {
    background: #0F172A;
    color: white;
    border: none;
    padding: 0 20px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.4);
    transition: 0.2s;
}

.liquid-btn-primary:hover[b-ibyuzxuveq] {
    transform: translateY(-2px);
    background: #1E293B;
}

.liquid-btn-primary:active[b-ibyuzxuveq] {
    transform: scale(0.96);
}


/* --- SEARCH BAR --- */
.search-wrapper-floating[b-ibyuzxuveq] {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.search-wrapper-floating:focus-within[b-ibyuzxuveq] {
    background: white;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    border-color: #BFDBFE;
}

.search-icon[b-ibyuzxuveq] {
    position: absolute;
    left: 20px;
    color: #94A3B8;
}

.search-wrapper-floating:focus-within .search-icon[b-ibyuzxuveq] {
    color: #3B82F6;
}

.search-wrapper-floating input[b-ibyuzxuveq] {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 50px;
    font-size: 1rem;
    color: #1E293B;
}

.search-wrapper-floating input[b-ibyuzxuveq]::placeholder {
    color: #CBD5E1;
    font-weight: 400;
}

.clear-btn[b-ibyuzxuveq] {
    position: absolute;
    right: 16px;
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
}

.clear-btn:hover[b-ibyuzxuveq] {
    color: #EF4444;
    transform: scale(1.1);
}


/* --- STRUMIEŃ LISTY --- */
/* Zmieniono na prostszy układ dla wirtualizacji */
.surveys-stream[b-ibyuzxuveq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 100px;
}


/* --- KARTA (MASTERPIECE) --- */
.liquid-row-card[b-ibyuzxuveq] {
    background: white; /* Czysta biel dla lepszego kontrastu */
    border: 1px solid #F1F5F9;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px; /* Odstęp między kartami */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Bardzo delikatny cień */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.liquid-row-card:active[b-ibyuzxuveq] {
    transform: scale(0.98);
}


.row-content[b-ibyuzxuveq] {
    display: flex;
    align-items: center; /* Wyśrodkowanie w pionie */
    gap: 16px;
}
.visual-anchor[b-ibyuzxuveq] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Nie zgniataj mnie! */
    font-size: 24px;
}

.visual-anchor .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 24px;
}
.box-draft[b-ibyuzxuveq] {
    background: #EEF2FF;
    color: #6366F1; /* Indygo */
}

.box-active[b-ibyuzxuveq] {
    background: #EFF6FF;
    color: #3B82F6; /* Niebieski */
}

.box-completed[b-ibyuzxuveq] {
    background: #ECFDF5;
    color: #10B981; /* Zielony */
}

.box-sync[b-ibyuzxuveq] {
    background: #FFF7ED;
    color: #F97316; /* Pomarańcz */
    animation: pulseSync-b-ibyuzxuveq 2s infinite;
}


/* --- KROPKA STATUSU (BEZ ANIMACJI PULSOWANIA) --- */
.status-indicator[b-ibyuzxuveq] {
    padding-top: 6px; /* Wyrównanie kropki do pierwszej linii tekstu */
}
.status-dot[b-ibyuzxuveq] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.dot-active[b-ibyuzxuveq] {
    background: #3B82F6;
}

.dot-completed[b-ibyuzxuveq] {
    background: #10B981;
}

/* USUNIĘTO ::after z animacją pulseRing */

.dot-completed[b-ibyuzxuveq] {
    background: #10B981;
    box-shadow: 0 0 0 2px white, 0 0 8px rgba(16, 185, 129, 0.3);
}

.dot-draft[b-ibyuzxuveq] {
    background: #6366F1;
}

.dot-archived[b-ibyuzxuveq] {
    background: #94A3B8;
}

.dot-archived[b-ibyuzxuveq] {
    background: #94A3B8;
    box-shadow: 0 0 0 2px white;
}


/* --- TREŚĆ KARTY --- */
.row-main-info[b-ibyuzxuveq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Bardzo mały odstęp, żeby grupa była zwarta */
    overflow: hidden;
}
.title-wrap[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.row-title[b-ibyuzxuveq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E293B; /* Ciemny granat, prawie czarny */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.date-badge[b-ibyuzxuveq] {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 500;
    flex-shrink: 0;
}
.meta-stack[b-ibyuzxuveq] {
    display: flex;
    flex-direction: column;
}
.title-row[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-row[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.liquid-row-card:hover .row-title[b-ibyuzxuveq] {
    color: #0F172A;
}
.meta-line[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meta-line .icon-mini[b-ibyuzxuveq] {
    font-size: 16px;
    color: #94A3B8;
    flex-shrink: 0;
}

/* Styl dla Firmy */
.meta-line.company[b-ibyuzxuveq] {
    color: #334155;
    font-weight: 600;
}
.company-name[b-ibyuzxuveq] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569; /* Średni szary */
}
.sub-address[b-ibyuzxuveq] {
    font-size: 0.8rem;
    color: #94A3B8; /* Jasny szary - najmniej ważna informacja */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Styl dla Adresu */
.meta-line.address[b-ibyuzxuveq] {
    color: #64748B;
    font-weight: 400;
}
.row-actions[b-ibyuzxuveq] {
    align-self: center; /* Wyśrodkowanie strzałki w pionie względem całej karty */
    margin-left: 8px;
}
/* Metadane (Firma, Adres) */
.meta-row[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748B;
    font-size: 0.8rem;
    font-weight: 500;
}

.meta-item[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-mini[b-ibyuzxuveq] {
    font-size: 16px;
    color: #94A3B8;
}

.liquid-row-card:hover .icon-mini[b-ibyuzxuveq] {
    color: #64748B;
}

.meta-item.address .icon-mini[b-ibyuzxuveq] {
    transform: translateY(3px);
}

.meta-item.company[b-ibyuzxuveq] {
    color: #334155;
    font-weight: 600;
}

.meta-item.address[b-ibyuzxuveq] {
    color: #64748B;
}

.meta-item.date[b-ibyuzxuveq] {
    color: #94A3B8;
    font-size: 0.75rem;
}

.dot-separator[b-ibyuzxuveq] {
    color: #CBD5E1;
    font-size: 0.6rem;
}

/* Pracownik */
.meta-item.user[b-ibyuzxuveq] {
    background: #F1F5F9;
    color: #475569;
    padding: 4px 10px 4px 6px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.meta-item.user .icon-mini[b-ibyuzxuveq] {
    font-size: 16px;
    color: #64748B;
    transform: translateY(1px);
}

.liquid-row-card:hover .meta-item.user[b-ibyuzxuveq] {
    background: #EEF2FF;
    color: #4F46E5;
}

.liquid-row-card:hover .meta-item.user .icon-mini[b-ibyuzxuveq] {
    color: #6366F1;
}


/* --- AKCJA (STRZAŁKA SLIDE) --- */
.row-actions[b-ibyuzxuveq] {
    margin-left: auto;
}
.action-arrow[b-ibyuzxuveq] {
    color: #CBD5E1;
    font-size: 24px;
}
.liquid-row-card:hover .action-arrow[b-ibyuzxuveq] {
    color: #3B82F6;
}
@keyframes pulseSync-b-ibyuzxuveq {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
.action-icon[b-ibyuzxuveq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F8FAFC;
    color: #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.action-icon span[b-ibyuzxuveq] {
    font-size: 20px;
}

.liquid-row-card:hover .action-icon[b-ibyuzxuveq] {
    background: #0F172A;
    color: white;
}

.liquid-row-card.st-active:hover .action-icon[b-ibyuzxuveq] {
    background: #3B82F6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* --- LOADER --- */
.empty-state-liquid[b-ibyuzxuveq] {
    text-align: center;
    padding: 60px 0;
    color: #94A3B8;
}

.empty-visual[b-ibyuzxuveq] {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.empty-visual span[b-ibyuzxuveq] {
    font-size: 32px;
    color: #CBD5E1;
}

.btn-text-action[b-ibyuzxuveq] {
    background: none;
    border: none;
    color: #3B82F6;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.empty-state-liquid h3[b-ibyuzxuveq] {
    color: #1E293B;
    font-weight: 700;
    margin-bottom: 8px;
}

.skeleton-row[b-ibyuzxuveq] {
    height: 100px;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid #F1F5F9;
}

.skeleton-row[b-ibyuzxuveq]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.8), transparent);
    animation: shimmer-b-ibyuzxuveq 1.5s infinite;
}

@keyframes shimmer-b-ibyuzxuveq {
    100% {
        transform: translateX(100%);
    }
}

/* USUNIĘTO .fade-in-group */

/* --- MOBILE --- */
@media (max-width: 640px) {
    .liquid-container[b-ibyuzxuveq] {
        padding: 30px 16px;
    }

    .header-content[b-ibyuzxuveq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-content h1[b-ibyuzxuveq] {
        font-size: 2rem;
    }

    .liquid-btn-primary[b-ibyuzxuveq] {
        width: 100%;
        justify-content: center;
    }

    .tabs-container[b-ibyuzxuveq] {
        width: 100%;
        justify-content: space-between;
    }

    .tab-btn[b-ibyuzxuveq] {
        flex: 1;
        justify-content: center;
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    .liquid-row-card[b-ibyuzxuveq] {
        padding: 16px;
    }

    .row-content[b-ibyuzxuveq] {
        gap: 12px;
    }

    .row-title[b-ibyuzxuveq] {
        font-size: 1rem;
    }

    .meta-row[b-ibyuzxuveq] {
        gap: 6px;
    }

    .meta-item[b-ibyuzxuveq] {
        font-size: 0.75rem;
    }

    .dot-separator[b-ibyuzxuveq] {
        display: none;
    }

    .meta-item.address[b-ibyuzxuveq] {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    .action-icon[b-ibyuzxuveq] {
        width: 36px;
        height: 36px;
    }

    .action-icon span[b-ibyuzxuveq] {
        font-size: 20px;
    }
}

/* Title Row z Badgem */
.title-row[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-offline[b-ibyuzxuveq] {
    color: #10B981;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.badge-offline span[b-ibyuzxuveq] {
    font-size: 18px;
}

.badge-cloud[b-ibyuzxuveq] {
    color: #94A3B8;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.badge-cloud span[b-ibyuzxuveq] {
    font-size: 18px;
}

.badge-draft-pill[b-ibyuzxuveq] {
    background: #EEF2FF;
    color: #6366F1;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.draft-label[b-ibyuzxuveq] {
    font-size: 0.8rem;
    color: #6366F1;
    font-weight: 500;
}
/* Downloading State */
.liquid-row-card.downloading[b-ibyuzxuveq] {
    pointer-events: none;
    opacity: 0.8;
}

.loading-bar[b-ibyuzxuveq] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #E2E8F0;
}

.loading-bar[b-ibyuzxuveq]::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 40%;
    background: #3B82F6;
    animation: loadingMove-b-ibyuzxuveq 1s infinite linear;
}

@keyframes loadingMove-b-ibyuzxuveq {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(350%);
    }
}

.spin[b-ibyuzxuveq] {
    animation: spin-b-ibyuzxuveq 1s infinite linear;
}

@keyframes spin-b-ibyuzxuveq {
    100% {
        transform: rotate(360deg);
    }
}

.row-main-info[b-ibyuzxuveq] {
    gap: 6px;
}

/* --- NAGŁÓWKI SEKCJI --- */
.section-label[b-ibyuzxuveq] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 12px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-label .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 18px;
}

.section-spacer[b-ibyuzxuveq] {
    height: 20px;
}

/* --- TABS / STATS BAR --- */
.stats-bar[b-ibyuzxuveq] {
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tabs-container[b-ibyuzxuveq] {
    display: inline-flex;
    background: rgba(241, 245, 249, 0.8);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.tab-btn[b-ibyuzxuveq] {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    white-space: nowrap;
}

.tab-btn:hover[b-ibyuzxuveq] {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}

.tab-btn.active[b-ibyuzxuveq] {
    background: white;
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.counter[b-ibyuzxuveq] {
    background: #E2E8F0;
    color: #64748B;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.active .counter[b-ibyuzxuveq] {
    background: #0F172A;
    color: white;
}

.active .counter.draft-c[b-ibyuzxuveq] {
    background: #6366F1;
}

/* Indygo dla draftów */
.active .counter.pub-c[b-ibyuzxuveq] {
    background: #10B981;
}

/* Zielony dla pub */

.liquid-row-card.syncing-mode[b-ibyuzxuveq] {
    opacity: 0.8;
    background: #F8FAFC;
    border-color: #E2E8F0;
    pointer-events: none;
}

.badge-warning-pill[b-ibyuzxuveq] {
    background: #FFF7ED;
    color: #F97316;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #FFEDD5;
}

.spin-slow[b-ibyuzxuveq] {
    animation: spin-b-ibyuzxuveq 2s infinite linear;
    color: #3B82F6;
}

.eyebrow-row[b-ibyuzxuveq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.status-capsule[b-ibyuzxuveq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
}

/* Wariant dla sukcesu (Ukończono) */
.status-capsule.success[b-ibyuzxuveq] {
    background: #DCFCE7;       /* Bardzo jasna zieleń */
    color: #166534;            /* Ciemna zieleń dla czytelności */
    border: 1px solid #BBF7D0; /* Subtelna ramka */
}

.status-capsule.success .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 14px;
    color: #15803D;
}

.status-capsule.control[b-ibyuzxuveq] {
    background: #fcdcdc;       /* Bardzo jasna zieleń */
    color: #65161d;            /* Ciemna zieleń dla czytelności */
    border: 1px solid #f7bbbb; /* Subtelna ramka */
}

.status-capsule.control .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 14px;
    color: #80151c;
}

/* --- NOWY PANEL FILTRÓW --- */
.filters-panel-trigger[b-ibyuzxuveq] {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

/* Stan aktywny (gdy są filtry) - lekko bardziej widoczny */
.filters-panel-trigger.active-state[b-ibyuzxuveq] {
    background: rgba(255, 255, 255, 0.85);
    border-color: #BFDBFE; /* Subtelny niebieski obrys */
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12);
}

.filters-panel-trigger:hover[b-ibyuzxuveq] {
    transform: translateY(-1px);
    background: white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Obszar klikalny (lewa strona) */
.filters-content-area[b-ibyuzxuveq] {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 16px;
    cursor: pointer;
    overflow: hidden; /* Ważne dla przewijania */
}

.filters-content-area .search-icon[b-ibyuzxuveq] {
    /* RESETOWANIE STARYCH STYLÓW (Kluczowe) */
    position: static; /* Ważne! Jeśli wcześniej było 'absolute', to powodowało nakładanie */
    transform: none;  /* Reset ewentualnych przesunięć */
    
    /* UKŁAD */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;   /* Ikona nie może się zgniatać */
    
    /* ODSTĘP */
    margin-right: 12px; /* Sztywny odstęp między ikoną a tekstem */
    
    /* WYGLĄD */
    color: #94A3B8;
    font-size: 22px;
}

.filters-panel-trigger.active-state .search-icon[b-ibyuzxuveq] {
    color: #3B82F6;
}

.placeholder-text[b-ibyuzxuveq] {
    color: #94A3B8;
    font-size: 0.95rem;
    user-select: none;
}

/* Kontener na pastylki (Chips) */
.active-chips-container[b-ibyuzxuveq] {
    display: flex;
    gap: 8px;
    overflow-x: auto; /* Poziome przewijanie na mobile */
    padding-right: 10px;
    scrollbar-width: none; /* Firefox ukrycie paska */
    -ms-overflow-style: none; /* IE ukrycie paska */
    align-items: center;
    height: 100%;
}

.active-chips-container[b-ibyuzxuveq]::-webkit-scrollbar {
    display: none; /* Chrome/Safari ukrycie paska */
}

/* Wygląd pojedynczej pastylki */
.filter-chip[b-ibyuzxuveq] {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #1E40AF;
    padding: 4px 10px; /* Padding wewnątrz pastylki */
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    
    /* KLUCZOWE ZMIANY */
    display: inline-flex; /* Użyj inline-flex dla lepszego zachowania szerokości */
    align-items: center;
    gap: 8px; /* Zwiększono odstęp z 4px na 8px */
    height: 32px;
    max-width: 100%; /* Zabezpieczenie */
}

.chip-icon[b-ibyuzxuveq] {
    font-size: 18px; /* Nieco większa ikona dla czytelności */
    opacity: 0.7;
    
    /* KLUCZOWE ZMIANY */
    flex-shrink: 0; /* TO NAPRAWIA NAKŁADANIE: Ikona nie może się kurczyć */
    display: flex;  /* Centrowanie samej ikony w jej pudełku */
    align-items: center;
    justify-content: center;
}

.chip-label[b-ibyuzxuveq] {
    /* Opcjonalnie: jeśli tekst jest bardzo długi, utnij go */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Różne kolory dla różnych typów filtrów (opcjonalnie) */
.filter-chip.type-tag[b-ibyuzxuveq] {
    background: #F0FDF4; /* Zielony */
    border-color: #DCFCE7;
    color: #166534;
}

.filter-chip.type-point[b-ibyuzxuveq] {
    background: #FFF7ED; /* Pomarańcz */
    border-color: #FFEDD5;
    color: #9A3412;
}

.filter-chip.type-user[b-ibyuzxuveq] {
    background: #F3E8FF; /* Fiolet */
    border-color: #F3E8FF;
    color: #6B21A8;
}

/* Przycisk czyszczenia (Prawa strona) */
.clear-filters-btn[b-ibyuzxuveq] {
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #94A3B8;
    border-left: 1px solid rgba(0,0,0,0.05);
    transition: 0.2s;
    flex-shrink: 0;
}

.clear-filters-btn:hover[b-ibyuzxuveq] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.05);
}

/* Mobile adjust */
@media (max-width: 640px) {
    .filters-panel-trigger[b-ibyuzxuveq] {
        height: 50px; /* Nieco niższy na mobile */
    }
    
    .filters-content-area[b-ibyuzxuveq] {
        padding-left: 12px;
    }
    
    .placeholder-text[b-ibyuzxuveq] {
        font-size: 0.85rem;
    }
}

@media (max-width: 640px) {
    .row-title[b-ibyuzxuveq] {
        font-size: 1rem;
    }
    
    .header-line[b-ibyuzxuveq] {
        flex-direction: column; /* Na bardzo małych ekranach data spadnie pod tytuł */
        gap: 4px;
    }

    .date-badge[b-ibyuzxuveq] {
        align-self: flex-start; /* Wyrównanie do lewej na mobile */
        border: none;
        background: transparent;
        padding: 0;
        color: #94A3B8;
        font-size: 0.7rem;
    }
    
    .meta-line[b-ibyuzxuveq] {
        font-size: 0.8rem;
    }
}
/* --- REVOLUT LIST STYLE --- */

/* Kontener całego wiersza */
.revolut-row[b-ibyuzxuveq] {
    position: relative; /* Dla loading-bar */
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: white;
    border-radius: 18px;
    margin-bottom: 10px;
    gap: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #F1F5F9;
    overflow: hidden;
}
.revolut-row:hover[b-ibyuzxuveq] {
    background-color: #F8FAFC;
    border-color: #E2E8F0;
    transform: translateY(-1px);
}
.revolut-row:active[b-ibyuzxuveq] {
    background-color: #F8FAFC;
    transform: scale(0.98);
}
.is-downloading[b-ibyuzxuveq] {
    opacity: 0.6;
    pointer-events: none;
}
.revolut-row.is-downloading[b-ibyuzxuveq] {
    opacity: 0.7;
    pointer-events: none;
}

/* --- 1. AVATAR (Kółko) --- */
.rev-avatar[b-ibyuzxuveq] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rev-avatar .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 22px;
}

/* Kolory awatarów */
.av-blue[b-ibyuzxuveq] {
    background: #EFF6FF; /* Bardzo jasny niebieski */
    color: #3B82F6;      /* Niebieski tekst */
}

.av-success[b-ibyuzxuveq] {
    background: #ECFDF5;
    color: #10B981;
}

.av-draft[b-ibyuzxuveq] {
    background: #F1F5F9;
    color: #64748B;
}

.av-sync[b-ibyuzxuveq] {
    background: #FFF7ED;
    color: #F97316;
}

/* --- 2. TREŚĆ (Środek) --- */
.rev-content[b-ibyuzxuveq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.rev-title[b-ibyuzxuveq] {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.rev-subtitle-stack[b-ibyuzxuveq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rev-subtitle-stack .company[b-ibyuzxuveq] {
    font-size: 0.85rem;
    color: #475569; /* Slate 600 */
    font-weight: 600;
}

.rev-subtitle-stack .address[b-ibyuzxuveq] {
    font-size: 0.75rem;
    color: #94A3B8; /* Slate 400 */
    font-weight: 400;
}

.draft-text[b-ibyuzxuveq] {
    font-style: italic;
    color: #94A3B8 !important;
}

/* --- 3. PRAWA STRONA (Data i Ikona) --- */
.rev-side[b-ibyuzxuveq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch; /* Rozciąga do pełnej wysokości karty */
    min-width: 75px;
    padding: 2px 0;
}

.rev-date[b-ibyuzxuveq] {
    font-size: 0.72rem;
    color: #94A3B8;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.rev-status-icon[b-ibyuzxuveq] {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rev-status-icon .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 18px;
}

.icon-success[b-ibyuzxuveq] { color: #10B981; }
.icon-gray[b-ibyuzxuveq] { color: #CBD5E1; }
.icon-orange[b-ibyuzxuveq] { color: #F97316; }

/* BADGE DO POBIERANIA */
.status-badge.download-needed[b-ibyuzxuveq] {
    color: #3B82F6; /* Revolut Blue */
    background: #EFF6FF;
    padding: 2px 6px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-badge.download-needed .material-symbols-rounded[b-ibyuzxuveq] {
    font-size: 18px;
}
/* /Pages/LoginPage.razor.rz.scp.css */
/* Kontener główny - tło jasnoszare */
.login-container[b-pg8s7us4e5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 20px;
}

/* Karta logowania - biała z cieniem */
.login-card[b-pg8s7us4e5] {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.20);
    text-align: center;
    transition: height 0.3s ease;
}

/* Logo placeholder */
.logo-placeholder[b-pg8s7us4e5] {
    width: 48px;
    height: 48px;
    background: #0075EB; /* Revolut Blue */
    color: white;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

h3[b-pg8s7us4e5] {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: #191C1F;
}

.subtitle[b-pg8s7us4e5] {
    color: #8B959E;
    margin-bottom: 32px;
    font-size: 15px;
    line-height: 1.5;
}

.form-content[b-pg8s7us4e5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.input-group label[b-pg8s7us4e5] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #8B959E;
    margin-bottom: 8px;
    margin-left: 4px;
}

/* Inputy w stylu fintech */
.fintech-input[b-pg8s7us4e5] {
    width: 100%;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: #F3F4F6;
    font-size: 16px;
    color: #191C1F;
    transition: all 0.2s;
    box-sizing: border-box;
}

.fintech-input:focus[b-pg8s7us4e5] {
    outline: none;
    background-color: #ffffff;
    border-color: #0075EB;
    box-shadow: 0 0 0 4px rgba(0, 117, 235, 0.1);
}

[b-pg8s7us4e5] .fintech-input.valid {
    /* Opcjonalnie: styl dla poprawnego pola */
    border-color: transparent;
}
[b-pg8s7us4e5] .fintech-input.invalid {
    border-color: #E11900;
    background-color: rgba(225, 25, 0, 0.03);
}

/* Przycisk akcji */
.action-btn[b-pg8s7us4e5] {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background-color: #0075EB;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.action-btn:hover[b-pg8s7us4e5] {
    background-color: #005BB5;
}

.action-btn:disabled[b-pg8s7us4e5] {
    background-color: #B0D5FF;
    cursor: not-allowed;
}

/* "Pastylka" z emailem */
.user-pill[b-pg8s7us4e5] {
    background: #E8F2FF;
    color: #0075EB;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}

.user-pill:hover[b-pg8s7us4e5] {
    background: #D6E8FF;
    border-color: #B0D5FF;
}

.change-link[b-pg8s7us4e5] {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
}

/* Linki w stopce */
.footer-link[b-pg8s7us4e5] {
    margin-top: 24px;
}

.footer-link a[b-pg8s7us4e5] {
    color: #0075EB;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Błędy */
.error-message[b-pg8s7us4e5] {
    color: #E11900;
    font-size: 13px;
    background: rgba(225, 25, 0, 0.05);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

[b-pg8s7us4e5] .validation-message {
    color: #E11900;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 4px;
}

/* Spinner ładowania */
.spinner[b-pg8s7us4e5] {
    display: inline-block;
    width: 20px;
    height: 20px;
}

/* Wiadomość o sukcesie (zielona) */
.success-message[b-pg8s7us4e5] {
    color: #059669;
    font-size: 13px;
    background: #ECFDF5;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Preview.razor.rz.scp.css */
    /* Main Layout */
    .liquid-container[b-4kjebclfft] {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 40px 24px;
        min-height: 100vh;
        font-family: 'Inter', sans-serif;
        color: #1E293B;
    }

    .ambient-light[b-4kjebclfft] {
        position: fixed;
        width: 800px;
        height: 800px;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.06;
        z-index: -1;
        pointer-events: none;
    }

    .ambient-light.one[b-4kjebclfft] {
        background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
        top: -200px;
        left: -200px;
    }

    .ambient-light.two[b-4kjebclfft] {
        background: radial-gradient(circle, #10B981 0%, transparent 70%);
        bottom: -300px;
        right: -200px;
    }

    .glass-panel[b-4kjebclfft] {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    /* Header Section */
    .header-card[b-4kjebclfft] {
        padding: 0;
        margin-bottom: 24px;
        overflow: hidden;
    }

    .header-main[b-4kjebclfft] {
        padding: 32px;
        text-align: center;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
        position: relative;
    }

    .report-badge[b-4kjebclfft] {
        display: inline-block;
        background: #EEF2FF;
        color: #4F46E5;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 16px;
        border: 1px solid #C7D2FE;
    }

    .header-main h1[b-4kjebclfft] {
        font-size: 2rem;
        font-weight: 800;
        margin: 0 0 8px 0;
        color: #0F172A;
        letter-spacing: -0.5px;
    }

    .header-subtitle[b-4kjebclfft] {
        margin: 0;
        color: #64748B;
        font-size: 1.1rem;
    }

    .meta-grid[b-4kjebclfft] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: rgba(248, 250, 252, 0.5);
    }

    .meta-item[b-4kjebclfft] {
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        border-right: 1px solid rgba(226, 232, 240, 0.6);
        transition: background 0.3s;
    }

    .meta-item:last-child[b-4kjebclfft] {
        border-right: none;
    }

    .meta-item:hover[b-4kjebclfft] {
        background: rgba(255, 255, 255, 0.8);
    }

    .meta-icon[b-4kjebclfft] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .meta-icon span[b-4kjebclfft] {
        font-size: 24px;
    }

    .meta-icon.company[b-4kjebclfft] {
        background: #ECFDF5;
        color: #059669;
    }

    .meta-icon.point[b-4kjebclfft] {
        background: #EFF6FF;
        color: #2563EB;
    }

    .meta-icon.employee[b-4kjebclfft] {
        background: #FFF7ED;
        color: #EA580C;
    }

    .meta-content[b-4kjebclfft] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .meta-label[b-4kjebclfft] {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #94A3B8;
        letter-spacing: 0.5px;
    }

    .meta-value[b-4kjebclfft] {
        font-weight: 600;
        color: #334155;
        font-size: 0.95rem;
    }

    /* Question Cards */
    .question-block[b-4kjebclfft] {
        margin-bottom: 20px;
    }

    .qc-topbar[b-4kjebclfft] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
        background: rgba(255, 255, 255, 0.4);
    }

    .qc-info[b-4kjebclfft] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .q-number[b-4kjebclfft] {
        font-size: 0.9rem;
        font-weight: 800;
        color: #0F172A;
        background: #F1F5F9;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .q-type-badge[b-4kjebclfft] {
        font-size: 0.75rem;
        font-weight: 700;
        color: #64748B;
        text-transform: uppercase;
        background: transparent;
    }

    .score-pill[b-4kjebclfft] {
        display: flex;
        align-items: baseline;
        gap: 4px;
        background: #F8FAFC;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #E2E8F0;
    }

    .score-val[b-4kjebclfft] {
        font-weight: 800;
        color: #0F172A;
        font-size: 1.1rem;
    }

    .score-sep[b-4kjebclfft] {
        color: #CBD5E1;
        font-weight: 400;
        font-size: 1rem;
    }

    .score-max[b-4kjebclfft] {
        color: #64748B;
        font-weight: 600;
    }

    .score-unit[b-4kjebclfft] {
        font-size: 0.7rem;
        font-weight: 700;
        color: #94A3B8;
        text-transform: uppercase;
        margin-left: 2px;
    }

    .qc-main[b-4kjebclfft] {
        padding: 24px;
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .qc-text-content[b-4kjebclfft] {
        flex: 1;
    }

    .q-title[b-4kjebclfft] {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1E293B;
        margin: 0;
        line-height: 1.4;
    }

    .q-desc[b-4kjebclfft] {
        font-size: 0.9rem;
        color: #64748B;
        margin: 8px 0 0 0;
        line-height: 1.5;
    }

    .media-slot[b-4kjebclfft] {
        width: 72px;
        height: 72px;
        border-radius: 16px;
        background: #F8FAFC;
        border: 2px solid #E2E8F0;
        background-size: cover;
        background-position: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .qc-preview-zone[b-4kjebclfft] {
        background: #FAFAFA;
        padding: 20px 24px;
        border-top: 1px solid #F1F5F9;
    }

    .preview-label[b-4kjebclfft] {
        font-size: 0.7rem;
        font-weight: 800;
        color: #CBD5E1;
        text-transform: uppercase;
        margin-bottom: 12px;
        letter-spacing: 0.5px;
    }

    /* Summary Section */
    /* --- PODSUMOWANIE: PREMIUM DARK STYLE --- */
    .summary-card.dark-mode[b-4kjebclfft] {
        padding: 24px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Ciemny, elegancki gradient (Slate 900 -> Slate 800) */
        background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* Subtelna ramka */
        box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.5);
        /* Mocny cień pod spodem */
        color: white;
        position: relative;
        overflow: hidden;
    }

    /* Dodatkowy efekt "glow" w tle */
    .summary-card.dark-mode[b-4kjebclfft]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
        /* Złota poświata */
        filter: blur(40px);
        pointer-events: none;
    }

    .summary-left[b-4kjebclfft] {
        display: flex;
        align-items: center;
        gap: 24px;
        z-index: 1;
    }

    .summary-icon-box[b-4kjebclfft] {
        width: 64px;
        height: 64px;
        /* Złoty gradient */
        background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
        color: #FFFBEB;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
        /* Złota poświata */
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .summary-icon-box span[b-4kjebclfft] {
        font-size: 32px;
    }

    .summary-texts[b-4kjebclfft] {
        display: flex;
        flex-direction: column;
    }

    .summary-label[b-4kjebclfft] {
        font-size: 1.25rem;
        font-weight: 800;
        color: #FFFFFF;
        /* Czysta biel */
        line-height: 1.2;
        letter-spacing: 0.5px;
    }

    .summary-sub[b-4kjebclfft] {
        font-size: 0.9rem;
        color: #94A3B8;
        /* Jasny szary tekst pomocniczy */
        font-weight: 500;
    }

    .summary-right[b-4kjebclfft] {
        display: flex;
        align-items: center;
        gap: 24px;
        /* Efekt szkła na ciemnym tle */
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 12px 24px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1;
    }

    .score-display[b-4kjebclfft] {
        display: flex;
        align-items: baseline;
    }

    .score-big[b-4kjebclfft] {
        font-size: 2.2rem;
        font-weight: 800;
        color: #FFFFFF;
        /* Biel */
        line-height: 1;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .score-divider[b-4kjebclfft] {
        font-size: 1.5rem;
        color: #64748B;
        margin: 0 6px;
        font-weight: 300;
    }

    .score-total[b-4kjebclfft] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #94A3B8;
    }

    .score-tag[b-4kjebclfft] {
        font-size: 0.75rem;
        font-weight: 800;
        color: #F59E0B;
        /* Złoty akcent */
        margin-left: 8px;
        transform: translateY(-2px);
        letter-spacing: 1px;
    }

    .mini-chart[b-4kjebclfft] {
        width: 52px;
        height: 52px;
    }

    .circular-chart-mini[b-4kjebclfft] {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    /* Ścieżka tła wykresu na ciemnym tle */
    .circular-chart-mini .circle-bg-dark[b-4kjebclfft] {
        fill: none;
        stroke: rgba(255, 255, 255, 0.1);
        /* Półprzezroczysta biel */
        stroke-width: 3;
    }

    /* Ścieżka postępu - złota */
    .circular-chart-mini .circle-stroke-gold[b-4kjebclfft] {
        fill: none;
        stroke: #F59E0B;
        /* Złoty */
        stroke-width: 3;
        stroke-linecap: round;
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
        /* Lekkie świecenie */
    }

    /* Answer Types Styling */
    .read-input[b-4kjebclfft] {
        background: white;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: 14px 16px;
        color: #334155;
        font-weight: 500;
        min-height: 48px;
        display: flex;
        align-items: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .read-input.number[b-4kjebclfft],
    .read-input.date[b-4kjebclfft] {
        justify-content: space-between;
    }

    .read-binary[b-4kjebclfft] {
        display: flex;
        gap: 12px;
    }

    .read-opt[b-4kjebclfft] {
        flex: 1;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #94A3B8;
        border: 1px solid #E2E8F0;
        background: #FFFFFF;
        opacity: 0.6;
        transition: all 0.2s;
    }

    .read-opt.selected-yes[b-4kjebclfft] {
        background: #ECFDF5;
        color: #059669;
        border-color: #10B981;
        opacity: 1;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .read-opt.selected-no[b-4kjebclfft] {
        background: #FEF2F2;
        color: #DC2626;
        border-color: #EF4444;
        opacity: 1;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    }

    .read-scale[b-4kjebclfft] {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        background: white;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid #E2E8F0;
    }

    .scale-point[b-4kjebclfft] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.95rem;
        color: #64748B;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
    }

    .scale-point.active[b-4kjebclfft] {
        background: #3B82F6;
        color: white;
        border-color: #3B82F6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        transform: translateY(-2px);
    }

    .read-multi[b-4kjebclfft] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .read-multi-row[b-4kjebclfft] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: white;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        opacity: 0.6;
    }

    .read-multi-row.checked[b-4kjebclfft] {
        border-color: #3B82F6;
        background: #F0F9FF;
        opacity: 1;
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.05);
    }

    .check-box[b-4kjebclfft] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        border: 2px solid #CBD5E1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        transition: 0.2s;
    }

    .read-multi-row.checked .check-box[b-4kjebclfft] {
        background: #3B82F6;
        border-color: #3B82F6;
        color: white;
    }

    .read-picker-card[b-4kjebclfft] {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 16px;
        transition: all 0.2s ease;
    }

    .read-picker-card.has-files[b-4kjebclfft] {
        background: #F0F9FF;
        /* Jasny niebieski */
        border-color: #BAE6FD;
    }

    .read-picker-card.has-files[b-4kjebclfft] {
        background: #F0F9FF;
        /* Jasny niebieski */
        border-color: #BAE6FD;
    }

    .picker-icon-wrapper[b-4kjebclfft] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: #FFFFFF;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    }

    .picker-action[b-4kjebclfft] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0284C7;
        opacity: 0.5;
    }

    .read-picker-card.has-files .picker-icon-wrapper[b-4kjebclfft] {
        color: #0284C7;
        /* Niebieski */
    }

    .read-picker-card.empty .picker-icon-wrapper[b-4kjebclfft] {
        color: #94A3B8;
        /* Szary */
    }

    .picker-content[b-4kjebclfft] {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .picker-label[b-4kjebclfft] {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748B;
        margin-bottom: 2px;
    }

    .picker-value[b-4kjebclfft] {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1E293B;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Footer */
    .builder-footer[b-4kjebclfft] {
        margin-top: 10px;
        padding-bottom: 60px;
    }

    .liquid-btn-big[b-4kjebclfft] {
        width: 100%;
        height: 60px;
        background: white;
        border: 1px solid #E2E8F0;
        border-radius: 16px;
        color: #64748B;
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        cursor: pointer;
        transition: 0.2s;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    }

    .liquid-btn-big:hover[b-4kjebclfft] {
        border-color: #94A3B8;
        color: #334155;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    }

    /* Animation Utilities */
    .fade-in-up[b-4kjebclfft] {
        animation: fadeInUp-b-4kjebclfft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }

    @keyframes fadeInUp-b-4kjebclfft {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .delay-1[b-4kjebclfft] {
        animation-delay: 0.1s;
    }

    .delay-2[b-4kjebclfft] {
        animation-delay: 0.2s;
    }

    .delay-3[b-4kjebclfft] {
        animation-delay: 0.3s;
    }

    /* Responsive */
    @media (max-width: 640px) {
        .meta-grid[b-4kjebclfft] {
            grid-template-columns: 1fr;
        }

        .meta-item[b-4kjebclfft] {
            border-right: none;
            border-bottom: 1px solid rgba(226, 232, 240, 0.6);
            padding: 16px;
        }

        .header-main h1[b-4kjebclfft] {
            font-size: 1.5rem;
        }

        .summary-card.dark-mode[b-4kjebclfft] {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            padding: 24px;
        }

        .summary-right[b-4kjebclfft] {
            width: 100%;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.05);
            /* Nieco ciemniejsze na mobile */
        }
    }

    /* =========================================
       LIQUID LOADER ANIMATION
       ========================================= */

    /* Kontener na cały ekran z efektem szkła */
    .loading-overlay.glass-mode[b-4kjebclfft] {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(25px); /* Mocne rozmycie tła */
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeInOverlay-b-4kjebclfft 0.5s ease-out;
    }

    .liquid-loader-content[b-4kjebclfft] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        transform: translateY(0);
        animation: floatUp-b-4kjebclfft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* --- ORB & RIPPLES (Wizualizacja) --- */
    .liquid-orb-wrapper[b-4kjebclfft] {
        position: relative;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Główna kula */
    .orb-core[b-4kjebclfft] {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        z-index: 10;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
        animation: pulseCore-b-4kjebclfft 2s infinite ease-in-out;
    }

    .orb-core span[b-4kjebclfft] {
        font-size: 32px;
        animation: spinIcon-b-4kjebclfft 3s infinite linear; 
    }

    /* Fale (Ripples) */
    .orb-ripple[b-4kjebclfft] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 2px solid #3B82F6;
        opacity: 0;
        z-index: 1;
    }

    .orb-ripple.one[b-4kjebclfft] {
        width: 64px; height: 64px;
        animation: rippleEffect-b-4kjebclfft 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
    }

    .orb-ripple.two[b-4kjebclfft] {
        width: 64px; height: 64px;
        animation: rippleEffect-b-4kjebclfft 2s infinite cubic-bezier(0, 0.2, 0.8, 1) 0.6s; /* Opóźnienie */
    }

    /* --- TEKST I PASEK --- */
    .loader-text-group[b-4kjebclfft] {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* Połyskujący tekst nagłówka */
    .shimmer-text[b-4kjebclfft] {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0;
        background: linear-gradient(90deg, #1E293B 0%, #3B82F6 50%, #1E293B 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmerText-b-4kjebclfft 3s linear infinite;
    }

    .loader-text-group p[b-4kjebclfft] {
        margin: 0;
        color: #64748B;
        font-size: 0.95rem;
        font-weight: 500;
    }

    /* Pasek postępu */
    .loader-progress-track[b-4kjebclfft] {
        width: 200px;
        height: 4px;
        background: #E2E8F0;
        border-radius: 4px;
        margin-top: 16px;
        overflow: hidden;
        position: relative;
    }

    .loader-progress-fill[b-4kjebclfft] {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 40%;
        background: #3B82F6;
        border-radius: 4px;
        animation: indeterminateProgress-b-4kjebclfft 1.5s infinite ease-in-out;
    }

    /* --- KEYFRAMES --- */
    @keyframes fadeInOverlay-b-4kjebclfft {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes floatUp-b-4kjebclfft {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulseCore-b-4kjebclfft {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    }

    @keyframes rippleEffect-b-4kjebclfft {
        0% { width: 64px; height: 64px; opacity: 0.8; border-width: 4px; }
        100% { width: 140px; height: 140px; opacity: 0; border-width: 0px; }
    }

    @keyframes shimmerText-b-4kjebclfft {
        to { background-position: 200% center; }
    }

    @keyframes indeterminateProgress-b-4kjebclfft {
        0% { left: -40%; width: 40%; }
        50% { left: 30%; width: 60%; }
        100% { left: 100%; width: 10%; }
    }
    
    @keyframes spinIcon-b-4kjebclfft {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); } 
    }

    /* --- GALERIA ZDJĘĆ --- */
    .gallery-grid[b-4kjebclfft] {
        display: grid;
        /* Automatyczne dopasowanie kolumn, min 100px szerokości */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
        width: 100%;
    }

    .gallery-item[b-4kjebclfft] {
        position: relative;
        /* Kwadratowy format 1:1 */
        aspect-ratio: 1/1; 
        background-color: #F1F5F9;
        background-size: cover;
        background-position: center;
        border-radius: 16px;
        border: 2px solid #E2E8F0;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Efekt hover - lekkie powiększenie i cień */
    .gallery-item:hover[b-4kjebclfft] {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px -5px rgba(59, 130, 246, 0.3); /* Niebieska poświata */
        border-color: #3B82F6;
        z-index: 2;
    }

    /* Nakładka z ikoną lupy */
    .gallery-overlay[b-4kjebclfft] {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.4); /* Ciemne tło */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        backdrop-filter: blur(2px);
    }

    .gallery-item:hover .gallery-overlay[b-4kjebclfft] {
        opacity: 1;
    }

    .gallery-overlay span[b-4kjebclfft] {
        color: white;
        font-size: 32px;
        transform: scale(0.8);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .gallery-item:hover .gallery-overlay span[b-4kjebclfft] {
        transform: scale(1);
    }
/* /Pages/Reports.razor.rz.scp.css */
/* ==========================================================================
   1. BAZA I TŁO (LIQUID CONTAINER)
   ========================================================================== */
.liquid-container[b-z2nak3h5uu] {
    position: relative;
    min-height: 100vh;
    padding: 24px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #0f172a;
    overflow-x: hidden;
    background-color: #f8fafc; /* Fallback */
}

/* Ambient Lights - Światła w tle */
.ambient-light[b-z2nak3h5uu] {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

.ambient-light.one[b-z2nak3h5uu] {
    top: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.ambient-light.two[b-z2nak3h5uu] {
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

/* ==========================================================================
   2. HEADER I TYPOGRAFIA
   ========================================================================== */
.report-header[b-z2nak3h5uu] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.titles h1[b-z2nak3h5uu] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(90deg, #0f172a, #334155);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titles p[b-z2nak3h5uu] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

/* Przycisk powrotu */
.btn-back[b-z2nak3h5uu] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.btn-back:hover[b-z2nak3h5uu] {
    background: #ffffff;
    color: #0284c7;
    transform: translateX(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   3. PANEL KONFIGURACJI (FILTRY)
   ========================================================================== */
.glass-panel[b-z2nak3h5uu] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

.config-panel[b-z2nak3h5uu] {
    padding: 32px;
    margin-bottom: 32px;
}

.panel-header[b-z2nak3h5uu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 24px;
}

.filters-grid[b-z2nak3h5uu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Style Inputów */
.form-group label[b-z2nak3h5uu] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.glass-input[b-z2nak3h5uu] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    color: #0f172a;
    transition: all 0.2s;
    outline: none;
}

.glass-input:focus[b-z2nak3h5uu] {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.glass-input[b-z2nak3h5uu]::placeholder {
    color: #94a3b8;
}

.date-range[b-z2nak3h5uu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sep[b-z2nak3h5uu] {
    color: #cbd5e1;
    font-weight: 700;
}

/* ==========================================================================
   4. PRZYCISKI AKCJI
   ========================================================================== */
.actions-row[b-z2nak3h5uu] {
    display: flex;
    justify-content: flex-end;
}

.liquid-btn-primary[b-z2nak3h5uu] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.liquid-btn-primary:hover:not(:disabled)[b-z2nak3h5uu] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}

.liquid-btn-primary:disabled[b-z2nak3h5uu] {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* Spinner w przycisku */
.mini-spinner[b-z2nak3h5uu] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-z2nak3h5uu 0.8s linear infinite;
}

@keyframes spin-b-z2nak3h5uu { to { transform: rotate(360deg); } }

/* ==========================================================================
   5. SEKCJA WYNIKÓW (METRYKI)
   ========================================================================== */
.metrics-grid[b-z2nak3h5uu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .metrics-grid[b-z2nak3h5uu] { grid-template-columns: 1fr; }
}

.metric-card[b-z2nak3h5uu] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s;
}

.metric-card:hover[b-z2nak3h5uu] { transform: translateY(-3px); }

.m-icon[b-z2nak3h5uu] {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.m-icon span[b-z2nak3h5uu] { font-size: 26px; }
.m-icon.blue[b-z2nak3h5uu] { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.m-icon.gold[b-z2nak3h5uu] { background: linear-gradient(135deg, #fbbf24, #d97706); }
.m-icon.green[b-z2nak3h5uu] { background: linear-gradient(135deg, #34d399, #059669); }

.m-content[b-z2nak3h5uu] { display: flex; flex-direction: column; }
.m-val[b-z2nak3h5uu] { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.m-lbl[b-z2nak3h5uu] { font-size: 0.8rem; color: #64748b; font-weight: 500; }

/* ==========================================================================
   6. TABELA WYNIKÓW
   ========================================================================== */
.table-panel[b-z2nak3h5uu] {
    padding: 0;
    overflow: hidden; /* Ważne dla border-radius */
}

.table-scroll[b-z2nak3h5uu] {
    overflow-x: auto;
}

.report-table[b-z2nak3h5uu] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.report-table th[b-z2nak3h5uu] {
    background: rgba(248, 250, 252, 0.7);
    padding: 18px 24px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
}

.report-table td[b-z2nak3h5uu] {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 0.9rem;
    vertical-align: middle;
}

.report-table tr:last-child td[b-z2nak3h5uu] { border-bottom: none; }
.report-table tr:hover[b-z2nak3h5uu] { background: rgba(255, 255, 255, 0.5); }

/* Elementy w komórkach */
.cell-col[b-z2nak3h5uu] { display: flex; flex-direction: column; gap: 2px; }
.main-text[b-z2nak3h5uu] { font-weight: 600; color: #0f172a; }
.sub-text[b-z2nak3h5uu] { font-size: 0.8rem; color: #64748b; }
.fw-600[b-z2nak3h5uu] { font-weight: 600; }
.text-right[b-z2nak3h5uu] { text-align: right; }

.id-badge[b-z2nak3h5uu] {
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Statusy */
.status-pill[b-z2nak3h5uu] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-pill.success[b-z2nak3h5uu] { background: #dcfce7; color: #16a34a; }
.status-pill.pending[b-z2nak3h5uu] { background: #fff7ed; color: #ea580c; }

/* Komórka wyniku (Score) */
/* ==========================================================================
   POPRAWIONA SEKCJA SCORE (TABELA)
   ========================================================================== */

.score-cell[b-z2nak3h5uu] {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Dopychamy do prawej krawędzi komórki */
    gap: 12px;
    white-space: nowrap; /* Zapobiega łamaniu wiersza */
    min-width: 140px; /* Minimalna szerokość, żeby komórka nie była ściśnięta */
}

/* Kontener na liczby (np. 30 / 120) */
.score-wrapper[b-z2nak3h5uu] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums; /* KLUCZOWE: Cyfry zajmują tyle samo miejsca */
}

.score-val[b-z2nak3h5uu] {
    font-weight: 700;
    color: #0f172a;
    font-size: 1rem;
    text-align: right;
}

.score-max[b-z2nak3h5uu] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Pastylka z procentami */
.score-percent[b-z2nak3h5uu] {
    width: 50px; /* SZTYWNA SZEROKOŚĆ - Zapobiega skakaniu */
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0; /* Nie pozwala się zgniatać */
}

/* Kolory pastylek (bez zmian, tylko dla kompletności) */
.score-percent.high[b-z2nak3h5uu] { color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; }
.score-percent.mid[b-z2nak3h5uu] { color: #ca8a04; background: #fefce8; border: 1px solid #fef08a; }
.score-percent.low[b-z2nak3h5uu] { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }

/* ==========================================================================
   7. LOADER (SHIMMER)
   ========================================================================== */
.loader-card[b-z2nak3h5uu] {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    margin-bottom: 16px;
}

.shimmer-effect[b-z2nak3h5uu]::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: shimmerMove-b-z2nak3h5uu 1.5s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes shimmerMove-b-z2nak3h5uu {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.full-width[b-z2nak3h5uu] { grid-column: 1 / -1; width: 100%; }

/* ==========================================================================
   8. ANIMACJE I EMPTY STATE
   ========================================================================== */
.fade-in-up[b-z2nak3h5uu] {
    animation: fadeInUp-b-z2nak3h5uu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.delay-1[b-z2nak3h5uu] { animation-delay: 0.1s; }

@keyframes fadeInUp-b-z2nak3h5uu {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-state[b-z2nak3h5uu] {
    text-align: center;
    padding: 80px 0;
    color: #94a3b8;
}
.empty-state span[b-z2nak3h5uu] { font-size: 64px; margin-bottom: 16px; opacity: 0.5; display: block; }
.empty-state h3[b-z2nak3h5uu] { color: #0f172a; margin: 0 0 8px 0; font-size: 1.2rem; }
/* /Pages/Sukces.razor.rz.scp.css */
    /* --- UKŁAD STRONY --- */
    .liquid-container[b-rgrzmirlfm] {
        position: relative; width: 100%; height: 100vh;
        background: #F8FAFC; overflow: hidden;
        font-family: 'Inter', sans-serif;
    }
    
    .centered-layout[b-rgrzmirlfm] {
        display: flex; align-items: center; justify-content: center;
        padding: 24px;
    }

    /* --- TŁO AMBIENT --- */
    .ambient-light[b-rgrzmirlfm] {
        position: absolute; width: 600px; height: 600px; border-radius: 50%;
        filter: blur(120px); opacity: 0.1; z-index: 0; pointer-events: none;
    }
    .ambient-light.one[b-rgrzmirlfm] { background: #10B981; top: -100px; left: -100px; animation: float-b-rgrzmirlfm 10s infinite alternate; } /* Zieleń sukcesu */
    .ambient-light.two[b-rgrzmirlfm] { background: #3B82F6; bottom: -100px; right: -100px; animation: float-b-rgrzmirlfm 12s infinite alternate-reverse; }

    @keyframes float-b-rgrzmirlfm { from { transform: translate(0,0); } to { transform: translate(40px, 40px); } }

    /* --- KARTA --- */
    .success-card[b-rgrzmirlfm] {
        text-align: center; position: relative; z-index: 2;
        display: flex; flex-direction: column; align-items: center; gap: 32px;
        max-width: 400px; width: 100%;
    }

    /* --- TEKSTY --- */
    .text-content h1[b-rgrzmirlfm] {
        font-size: 2.5rem; font-weight: 800; color: #0F172A; margin: 0 0 8px 0;
        background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .text-content p[b-rgrzmirlfm] {
        font-size: 1.1rem; color: #64748B; margin: 0; line-height: 1.6;
    }

    /* --- ANIMACJA CHECKMARK (Czysty CSS SVG) --- */
    .checkmark-wrapper[b-rgrzmirlfm] {
        position: relative; width: 120px; height: 120px;
        display: flex; align-items: center; justify-content: center;
    }

    .checkmark[b-rgrzmirlfm] { width: 100px; height: 100px; border-radius: 50%; display: block; stroke-width: 3; stroke: #fff; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #10B981; animation: fill-b-rgrzmirlfm .4s ease-in-out .4s forwards, scale-b-rgrzmirlfm .3s ease-in-out .9s both; }

    .checkmark__circle[b-rgrzmirlfm] { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #10B981; fill: none; animation: stroke-b-rgrzmirlfm 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }

    .checkmark__check[b-rgrzmirlfm] { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke-b-rgrzmirlfm 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

    .glow-effect[b-rgrzmirlfm] {
        position: absolute; width: 100%; height: 100%; border-radius: 50%;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
        animation: pulseGlow-b-rgrzmirlfm 2s infinite; z-index: -1;
    }

    @keyframes stroke-b-rgrzmirlfm { 100% { stroke-dashoffset: 0; } }
    @keyframes scale-b-rgrzmirlfm { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
    @keyframes fill-b-rgrzmirlfm { 100% { box-shadow: inset 0px 0px 0px 60px #10B981; } }
    @keyframes pulseGlow-b-rgrzmirlfm { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }

    /* --- ANIMACJE WEJŚCIA TEKSTU --- */
    .fade-in-up[b-rgrzmirlfm] { opacity: 0; transform: translateY(20px); animation: fadeInUp-b-rgrzmirlfm 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    .delay-1[b-rgrzmirlfm] { animation-delay: 0.4s; }
    .delay-2[b-rgrzmirlfm] { animation-delay: 0.6s; }

    @keyframes fadeInUp-b-rgrzmirlfm { to { opacity: 1; transform: translateY(0); } }

    /* --- BUTTON --- */
    .action-area[b-rgrzmirlfm] {
        opacity: 0; transform: translateY(10px); transition: all 0.8s ease; pointer-events: none;
    }
    .action-area.visible[b-rgrzmirlfm] { opacity: 1; transform: translateY(0); pointer-events: all; }

    .liquid-btn-primary[b-rgrzmirlfm] {
        background: #0F172A; color: white; border: none; padding: 0 32px; height: 56px; border-radius: 18px;
        display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1rem; cursor: pointer;
        box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .liquid-btn-primary:hover[b-rgrzmirlfm] { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.5); background: #1E293B; }
    .liquid-btn-primary:active[b-rgrzmirlfm] { transform: scale(0.96); }

    .material-symbols-rounded[b-rgrzmirlfm] { font-size: 20px; }
/* /Pages/Tags.razor.rz.scp.css */
*[b-it3dh9d6m9] { box-sizing: border-box; }

.liquid-container[b-it3dh9d6m9] {
    position: relative; width: 100%; max-width: 950px; margin: 0 auto;
    padding: 50px 24px; min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; color: #0F172A;
}

/* --- AMBIENT LIGHT --- */
.ambient-light[b-it3dh9d6m9] {
    position: fixed; width: 800px; height: 800px; border-radius: 50%;
    filter: blur(140px); opacity: 0.08; z-index: -1; pointer-events: none;
    animation: floatLight-b-it3dh9d6m9 15s ease-in-out infinite alternate;
}
.ambient-light.one[b-it3dh9d6m9] { background: radial-gradient(circle, #3B82F6 0%, transparent 70%); top: -200px; left: -200px; }
.ambient-light.two[b-it3dh9d6m9] { background: radial-gradient(circle, #8B5CF6 0%, transparent 70%); bottom: -300px; right: -200px; animation-delay: -5s; }
@keyframes floatLight-b-it3dh9d6m9 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px, 30px) scale(1.05); } }

/* --- HEADER --- */
.liquid-header[b-it3dh9d6m9] { margin-bottom: 60px; padding: 0 8px; position: relative; z-index: 2; }

.header-content[b-it3dh9d6m9] { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 40px; 
}

.titles[b-it3dh9d6m9] { display: flex; flex-direction: column; gap: 6px; }
.sub-greeting[b-it3dh9d6m9] {
    font-size: 0.85rem; color: #64748B; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    background: linear-gradient(90deg, #64748B, #94A3B8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.header-content h1[b-it3dh9d6m9] {
    font-size: 2.75rem; font-weight: 800; margin: 0; line-height: 1.1; letter-spacing: -1.5px;
    color: #0F172A; background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.liquid-btn-primary[b-it3dh9d6m9] {
    background: #0F172A; color: white; border: none; padding: 0 24px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    flex-shrink: 0; /* Zapobiega zgniataniu przycisku */
}
.liquid-btn-primary:hover[b-it3dh9d6m9] { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.5); background: #1E293B; }
.liquid-btn-primary:active[b-it3dh9d6m9] { transform: scale(0.96); }

/* --- SEARCH BAR --- */
.search-wrapper-floating[b-it3dh9d6m9] {
    position: relative;
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
    border-radius: 20px; height: 64px; width: 100%; transition: all 0.4s ease; display: flex; align-items: center;
}
.search-wrapper-floating:focus-within[b-it3dh9d6m9] { transform: translateY(-4px); background: #FFFFFF; box-shadow: 0 15px 40px rgba(0, 117, 235, 0.1); border-color: #fff; }

.search-icon[b-it3dh9d6m9] { position: absolute; left: 24px; color: #94A3B8; font-size: 24px; pointer-events: none; z-index: 2; transition: color 0.3s; }
.search-wrapper-floating:focus-within .search-icon[b-it3dh9d6m9] { color: #3B82F6; }

.search-wrapper-floating input[b-it3dh9d6m9] {
    border: none; background: transparent; width: 100%; height: 100%; outline: none;
    font-size: 1.05rem; font-weight: 500; color: #1E293B;
    padding-left: 60px; padding-right: 20px;
}
.search-wrapper-floating input[b-it3dh9d6m9]::placeholder { color: #CBD5E1; }

/* --- LISTA FIRM --- */
.tags-stream[b-it3dh9d6m9] { display: flex; flex-direction: column; gap: 24px; padding-bottom: 80px; }

.glass-card[b-it3dh9d6m9] {
    background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px);
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: all 0.3s ease;
    overflow: hidden;
}
.glass-card:hover[b-it3dh9d6m9] { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-color: #fff; }
.glass-card.expanded[b-it3dh9d6m9] { background: #FFFFFF; box-shadow: 0 20px 50px rgba(0,0,0,0.08); border-color: #F1F5F9; transform: scale(1.01); z-index: 5; }

/* ZMIANA: align-items: flex-start dla obsługi zawijania tekstu */
.card-header-row[b-it3dh9d6m9] { 
    padding: 20px 24px; 
    display: flex; 
    align-items: flex-start; /* Ważne! */
    gap: 20px; 
    cursor: pointer; 
    user-select: none; 
}

.icon-box[b-it3dh9d6m9] {
    width: 52px; height: 52px; background: #F8FAFC; border-radius: 16px; color: #1E293B;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: all 0.3s;
    /* Lekka korekta, żeby ikona była ładnie względem pierwszej linii tekstu */
    margin-top: 2px;
}
.glass-card:hover .icon-box[b-it3dh9d6m9] { background: #0F172A; color: white; }
.icon-box span[b-it3dh9d6m9] { font-size: 26px; }

.card-main-info[b-it3dh9d6m9] { 
    flex: 1; display: flex; flex-direction: column; gap: 4px; 
    min-width: 0; margin-right: 8px;
    /* Wyśrodkowanie w pionie względem ikony, jeśli tekst jest krótki */
    justify-content: center; 
    min-height: 52px; /* Wysokość ikony */
}

/* ZMIANA: Usunięto ellipsis, dodano word-break */
.card-title[b-it3dh9d6m9] { 
    font-size: 1.1rem; font-weight: 700; color: #0F172A; 
    white-space: normal; 
    word-break: break-word;
    line-height: 1.3;
}
.card-meta[b-it3dh9d6m9] { font-size: 0.85rem; color: #64748B; display: flex; gap: 6px; }
.meta-value[b-it3dh9d6m9] { font-weight: 600; color: #334155; }

.header-actions[b-it3dh9d6m9] { 
    display: flex; gap: 8px; margin-right: 12px; 
    margin-top: 8px; /* Wyrównanie do góry przy wielowierszowym tekście */
}

.action-btn[b-it3dh9d6m9] {
    width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent;
    color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.action-btn:hover[b-it3dh9d6m9] { background: #F1F5F9; color: #0F172A; }
.action-btn.danger:hover[b-it3dh9d6m9] { background: #FEF2F2; color: #EF4444; }

.chevron-wrapper[b-it3dh9d6m9] { 
    color: #CBD5E1; display: flex; transition: transform 0.3s; 
    margin-top: 14px; /* Wyrównanie do ikony */
}
.glass-card.expanded .chevron-wrapper[b-it3dh9d6m9] { transform: rotate(180deg); color: #0075EB; }

/* --- SEKCJA ADRESÓW --- */
.addresses-container[b-it3dh9d6m9] {
    background: #F8FAFC; border-top: 1px solid #F1F5F9; padding: 24px;
    animation: slideDown-b-it3dh9d6m9 0.3s ease-out;
}
@keyframes slideDown-b-it3dh9d6m9 { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.addresses-top-bar[b-it3dh9d6m9] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-label[b-it3dh9d6m9] { font-size: 0.75rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 1px; }

.btn-text-add[b-it3dh9d6m9] {
    background: rgba(59, 130, 246, 0.08);
    color: #2563EB; 
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer; border: none; 
    border-radius: 12px;
    padding: 8px 16px;
    display: flex; align-items: center; gap: 8px; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-text-add:hover[b-it3dh9d6m9] { 
    background: #3B82F6; color: white; 
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-text-add .material-symbols-rounded[b-it3dh9d6m9] { font-size: 18px; transition: transform 0.3s; }
.btn-text-add:hover .material-symbols-rounded[b-it3dh9d6m9] { transform: rotate(90deg); }

.addresses-list[b-it3dh9d6m9] { display: flex; flex-direction: column; gap: 12px; }

/* ZMIANA: align-items: flex-start */
.address-row[b-it3dh9d6m9] {
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; padding: 16px;
    display: flex; 
    align-items: flex-start; /* Ważne dla długich adresów */
    gap: 16px; 
    transition: all 0.2s;
    position: relative;
}
.address-row:hover[b-it3dh9d6m9] { border-color: #CBD5E1; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }

.addr-icon-small[b-it3dh9d6m9] {
    width: 36px; height: 36px; background: #EFF6FF; color: #3B82F6; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-top: 2px; /* Wyrównanie do linii tekstu */
}
.addr-icon-small span[b-it3dh9d6m9] { font-size: 20px; }

.addr-details[b-it3dh9d6m9] { 
    flex: 1; display: flex; flex-direction: column; gap: 4px; 
    min-width: 0; 
    justify-content: center; 
    min-height: 36px; /* Min wysokość dopasowana do ikony */
}

/* ZMIANA: Pełne zawijanie tekstu */
.addr-name[b-it3dh9d6m9] { 
    font-size: 0.95rem; font-weight: 700; color: #1E293B; 
    white-space: normal; 
    word-break: break-word;
    line-height: 1.3;
}
.addr-full[b-it3dh9d6m9] { 
    font-size: 0.85rem; color: #64748B; 
    white-space: normal; 
    word-break: break-word;
    line-height: 1.4;
}

.addr-actions[b-it3dh9d6m9] { 
    display: flex; align-items: center; gap: 8px; 
    /* Jeśli adres jest długi, przyciski trzymamy u góry */
    margin-top: 2px; 
}
.v-separator[b-it3dh9d6m9] { width: 1px; height: 24px; background: #E2E8F0; margin: 0 4px; }

.btn-pill-primary[b-it3dh9d6m9] {
    background: #0F172A; color: white; border: none; border-radius: 20px; padding: 6px 16px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: 0.2s;
    flex-shrink: 0;
}
.btn-pill-primary:hover[b-it3dh9d6m9] { background: #334155; transform: translateY(-1px); }
.btn-pill-primary span.material-symbols-rounded[b-it3dh9d6m9] { font-size: 16px; }

/* TRYB EDYCJI */
.address-row.edit-mode[b-it3dh9d6m9] {
    background: #FFFFFF; 
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 24px;
    box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.15);
    cursor: default;
    animation: popIn-b-it3dh9d6m9 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}
@keyframes popIn-b-it3dh9d6m9 {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.edit-mode-content[b-it3dh9d6m9] { width: 100%; display: flex; flex-direction: column; gap: 16px; }

.inputs-grid[b-it3dh9d6m9] { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

.glass-input-group[b-it3dh9d6m9] { display: flex; flex-direction: column; gap: 8px; }
.glass-input-group label[b-it3dh9d6m9] { font-size: 0.75rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; }

.glass-input-group input[b-it3dh9d6m9] {
    background: #F8FAFC; 
    border: 2px solid #F1F5F9; 
    padding: 12px 16px; 
    border-radius: 12px;
    font-size: 0.95rem; color: #0F172A; font-weight: 500;
    outline: none; transition: all 0.2s;
}
.glass-input-group input:focus[b-it3dh9d6m9] { 
    background: #FFFFFF; 
    border-color: #3B82F6; 
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); 
}

.edit-buttons[b-it3dh9d6m9] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

.btn-cancel[b-it3dh9d6m9] { 
    background: transparent; border: none; color: #64748B; font-weight: 600; cursor: pointer; padding: 10px 16px; border-radius: 10px; transition: 0.2s;
}
.btn-cancel:hover[b-it3dh9d6m9] { background: #F1F5F9; color: #1E293B; }

.btn-save[b-it3dh9d6m9] { 
    background: #3B82F6; color: white; border: none; border-radius: 10px; padding: 10px 28px; font-weight: 600; cursor: pointer; 
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); transition: 0.2s;
}
.btn-save:hover[b-it3dh9d6m9] { background: #2563EB; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4); }

.skeleton-card[b-it3dh9d6m9] { height: 80px; background: white; border-radius: 24px; margin-bottom: 16px; position: relative; overflow: hidden; }
.skeleton-card[b-it3dh9d6m9]::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(248,250,252,0.8), transparent); animation: shimmer-b-it3dh9d6m9 1.5s infinite; }
@keyframes shimmer-b-it3dh9d6m9 { 100% { transform: translateX(100%); } }

.empty-placeholder[b-it3dh9d6m9] { text-align: center; padding: 24px; color: #94A3B8; }
.empty-placeholder span[b-it3dh9d6m9] { font-size: 32px; color: #CBD5E1; display: block; margin-bottom: 8px; }

/* --- MOBILE --- */
@media (max-width: 800px) {
    .liquid-container[b-it3dh9d6m9] { padding: 24px 12px; }
    
    /* Poprawka dla przycisku dodawania - w kolumnie, pod tytułem */
    .header-content[b-it3dh9d6m9] { 
        flex-direction: column; 
        align-items: flex-start; /* Do lewej */
        gap: 20px; 
    }
    .header-content h1[b-it3dh9d6m9] { font-size: 2rem; }
    
    /* Przycisk na pełną szerokość */
    .liquid-btn-primary[b-it3dh9d6m9] { width: 100%; justify-content: center; }
    
    /* Karta Firmy */
    .card-header-row[b-it3dh9d6m9] { padding: 16px 12px; gap: 12px; }
    .icon-box[b-it3dh9d6m9] { width: 42px; height: 42px; border-radius: 12px; }
    .icon-box span[b-it3dh9d6m9] { font-size: 22px; }
    
    .header-actions[b-it3dh9d6m9] { gap: 4px; margin-right: 0; }
    .action-btn[b-it3dh9d6m9] { width: 32px; height: 32px; }
    
    /* Adresy */
    .addresses-container[b-it3dh9d6m9] { padding: 16px; }
    .address-row[b-it3dh9d6m9] { padding: 12px; gap: 10px; }
    
    .addr-icon-small[b-it3dh9d6m9] { width: 32px; height: 32px; }
    .addr-icon-small span[b-it3dh9d6m9] { font-size: 18px; }
    
    .inputs-grid[b-it3dh9d6m9] { grid-template-columns: 1fr; gap: 12px; }
    .address-row.edit-mode[b-it3dh9d6m9] { padding: 16px; }
    
    /* Ukrywanie tekstu 'Ankieta' na mobile, bo się nie zmieści */
    .hide-mobile[b-it3dh9d6m9] { display: none; }
}
/* /Pages/Users.razor.rz.scp.css */
    /* =========================================
       LIQUID WHITE - DIVINE EDITION (USERS)
       =========================================
    */
    *[b-2pdetko3ni] { box-sizing: border-box; }

    /* --- KONTENER --- */
    .liquid-container[b-2pdetko3ni] {
        position: relative; width: 100%; max-width: 950px; margin: 0 auto;
        padding: 50px 24px; min-height: 100vh;
        font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; color: #0F172A;
    }

    /* --- AMBIENT LIGHT (Różowy i Niebieski dla ludzi) --- */
    .ambient-light[b-2pdetko3ni] {
        position: fixed; width: 800px; height: 800px; border-radius: 50%;
        filter: blur(140px); opacity: 0.08; z-index: -1; pointer-events: none;
        animation: floatLight-b-2pdetko3ni 15s ease-in-out infinite alternate;
    }
    .ambient-light.one[b-2pdetko3ni] { background: radial-gradient(circle, #EC4899 0%, transparent 70%); top: -200px; left: -200px; }
    .ambient-light.two[b-2pdetko3ni] { background: radial-gradient(circle, #3B82F6 0%, transparent 70%); bottom: -300px; right: -200px; animation-delay: -5s; }
    @keyframes floatLight-b-2pdetko3ni { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px, 30px) scale(1.05); } }

    /* --- HEADER --- */
    .liquid-header[b-2pdetko3ni] { margin-bottom: 60px; padding: 0 8px; position: relative; z-index: 2; }
    .header-content[b-2pdetko3ni] { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
    .titles[b-2pdetko3ni] { display: flex; flex-direction: column; gap: 6px; }
    .sub-greeting[b-2pdetko3ni] {
        font-size: 0.85rem; color: #64748B; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
        background: linear-gradient(90deg, #64748B, #94A3B8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .header-content h1[b-2pdetko3ni] {
        font-size: 2.75rem; font-weight: 800; margin: 0; line-height: 1.1; letter-spacing: -1.5px;
        color: #0F172A; background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* Przycisk Główny */
    .liquid-btn-primary[b-2pdetko3ni] {
        background: #0F172A; color: white; border: none; padding: 0 24px; height: 52px; border-radius: 16px;
        display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
        box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .liquid-btn-primary:hover[b-2pdetko3ni] { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.5); background: #1E293B; }
    .liquid-btn-primary:active[b-2pdetko3ni] { transform: scale(0.96); }


    /* --- WYSZUKIWARKA (Fixed) --- */
    .search-wrapper-floating[b-2pdetko3ni] {
        position: relative;
        background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
        border-radius: 20px; height: 64px; width: 100%; transition: all 0.4s ease; display: flex; align-items: center;
    }
    .search-wrapper-floating:focus-within[b-2pdetko3ni] { transform: translateY(-4px); background: #FFFFFF; box-shadow: 0 15px 40px rgba(0, 117, 235, 0.1); border-color: #fff; }
    
    .search-icon[b-2pdetko3ni] { position: absolute; left: 24px; color: #94A3B8; font-size: 24px; pointer-events: none; z-index: 2; transition: color 0.3s; }
    .search-wrapper-floating:focus-within .search-icon[b-2pdetko3ni] { color: #3B82F6; }
    
    .search-wrapper-floating input[b-2pdetko3ni] {
        border: none; background: transparent; width: 100%; height: 100%; outline: none;
        font-size: 1.05rem; font-weight: 500; color: #1E293B;
        padding-left: 60px; padding-right: 20px;
    }
    .search-wrapper-floating input[b-2pdetko3ni]::placeholder { color: #CBD5E1; }


    /* --- LISTA UŻYTKOWNIKÓW --- */
    .users-stream[b-2pdetko3ni] { display: flex; flex-direction: column; gap: 16px; padding-bottom: 80px; }

    /* KARTA UŻYTKOWNIKA */
    .liquid-user-card[b-2pdetko3ni] {
        background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px);
        border-radius: 24px; padding: 16px 24px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        display: flex; align-items: center; justify-content: space-between;
        cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        position: relative; overflow: hidden;
    }
    .liquid-user-card:hover[b-2pdetko3ni] {
        transform: translateY(-4px) scale(1.005);
        background: rgba(255, 255, 255, 0.95);
        border-color: #fff;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06);
    }

    /* LEWA STRONA */
    .card-left[b-2pdetko3ni] { display: flex; align-items: center; gap: 20px; flex: 1; }

    /* Avatar Bubble */
    .avatar-bubble[b-2pdetko3ni] {
        width: 56px; height: 56px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem; font-weight: 700; flex-shrink: 0;
        box-shadow: 0 8px 20px -5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .liquid-user-card:hover .avatar-bubble[b-2pdetko3ni] { transform: scale(1.1) rotate(-5deg); }

    /* Kolory ról dla Avatara */
    .role-admin.avatar-bubble[b-2pdetko3ni] { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); color: #0284C7; }
    .role-worker.avatar-bubble[b-2pdetko3ni] { background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%); color: #9333EA; }
    .role-viewer.avatar-bubble[b-2pdetko3ni] { background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); color: #64748B; }

    .user-details[b-2pdetko3ni] { display: flex; flex-direction: column; gap: 4px; }
    
    .name-row[b-2pdetko3ni] { display: flex; align-items: center; gap: 8px; }
    .u-name[b-2pdetko3ni] { font-size: 1.1rem; font-weight: 700; color: #0F172A; }
    
    .u-email[b-2pdetko3ni] { font-size: 0.9rem; color: #64748B; font-weight: 500; }

    /* Status Dot (Pulsujący) */
    .status-dot[b-2pdetko3ni] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; position: relative; }
    
    .status-dot.active[b-2pdetko3ni] { background: #10B981; box-shadow: 0 0 0 2px white, 0 0 10px rgba(16, 185, 129, 0.4); }
    .status-dot.active[b-2pdetko3ni]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid #10B981; opacity: 0 }
    
    .status-dot.pending[b-2pdetko3ni] { background: #F59E0B; box-shadow: 0 0 0 2px white; }


    /* PRAWA STRONA */
    .card-right[b-2pdetko3ni] { display: flex; align-items: center; gap: 16px; }

    .role-badge[b-2pdetko3ni] {
        font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        padding: 6px 12px; border-radius: 12px;
    }
    /* Kolory tekstu badge'a */
    .role-badge.role-admin[b-2pdetko3ni] { background: rgba(2, 132, 199, 0.1); color: #0284C7; }
    .role-badge.role-worker[b-2pdetko3ni] { background: rgba(147, 51, 234, 0.1); color: #9333EA; }
    .role-badge.role-viewer[b-2pdetko3ni] { background: rgba(100, 116, 139, 0.1); color: #64748B; }

    .v-separator[b-2pdetko3ni] { width: 1px; height: 32px; background: #F1F5F9; margin: 0 8px; }

    /* Przycisk Usuwania */
    .action-btn[b-2pdetko3ni] {
        width: 40px; height: 40px; border-radius: 12px; border: none; background: transparent;
        color: #CBD5E1; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }
    .action-btn.danger:hover[b-2pdetko3ni] { background: #FEF2F2; color: #EF4444; transform: scale(1.1); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15); }

    /* Chevron Hint */
    .chevron-hint[b-2pdetko3ni] { color: #E2E8F0; display: flex; transition: all 0.3s; }
    .liquid-user-card:hover .chevron-hint[b-2pdetko3ni] { transform: translateX(4px); color: #0F172A; }


    /* --- LOADER & EMPTY --- */
    .skeleton-row[b-2pdetko3ni] { height: 90px; width: 100%; background: white; border-radius: 24px; position: relative; overflow: hidden; border: 1px solid #F1F5F9; }
    .skeleton-row[b-2pdetko3ni]::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(248,250,252,0.8), transparent); animation: shimmer-b-2pdetko3ni 1.5s infinite; }
    @keyframes shimmer-b-2pdetko3ni { 100% { transform: translateX(100%); } }

    .empty-state-liquid[b-2pdetko3ni] { text-align: center; padding: 80px 0; color: #94A3B8; animation: fadeIn-b-2pdetko3ni 0.5s ease-out; }
    .empty-visual[b-2pdetko3ni] { width: 80px; height: 80px; background: white; border-radius: 50%; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); }
    .empty-visual span[b-2pdetko3ni] { font-size: 36px; color: #CBD5E1; }
    .empty-state-liquid h3[b-2pdetko3ni] { color: #1E293B; font-weight: 700; margin-bottom: 8px; }
    @keyframes fadeIn-b-2pdetko3ni { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* --- MOBILE --- */
    @media (max-width: 640px) {
        .liquid-container[b-2pdetko3ni] { padding: 30px 16px; }
        .header-content[b-2pdetko3ni] { flex-direction: column; align-items: flex-start; gap: 20px; }
        .liquid-btn-primary[b-2pdetko3ni] { width: 100%; justify-content: center; }

        .liquid-user-card[b-2pdetko3ni] { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
        .card-left[b-2pdetko3ni] { width: 100%; }
        .card-right[b-2pdetko3ni] { width: 100%; justify-content: space-between; padding-top: 16px; border-top: 1px solid #F1F5F9; }
        
        .v-separator[b-2pdetko3ni] { display: none; }
        .chevron-hint[b-2pdetko3ni] { display: none; } /* Ukrywamy strzałkę na mobile, bo karta i tak cała klikalna */
    }
/* /Pages/Ustawienia.razor.rz.scp.css */
    *[b-ui0cl6n3jw] { box-sizing: border-box; }

   .liquid-container[b-ui0cl6n3jw] {
    position: relative; 
    width: 100%; 
    max-width: 950px; 
    margin: 0 auto;
    padding: 50px 24px; 
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; 
    color: #0F172A;
}

    .ambient-light[b-ui0cl6n3jw] {
        position: fixed; width: 800px; height: 800px; border-radius: 50%;
        filter: blur(140px); opacity: 0.08; z-index: -1; pointer-events: none;
        animation: floatLight-b-ui0cl6n3jw 15s ease-in-out infinite alternate;
    }
    .ambient-light.one[b-ui0cl6n3jw] { background: radial-gradient(circle, #EC4899 0%, transparent 70%); top: -200px; left: -200px; }
    .ambient-light.two[b-ui0cl6n3jw] { background: radial-gradient(circle, #3B82F6 0%, transparent 70%); bottom: -300px; right: -200px; animation-delay: -5s; }
    @keyframes floatLight-b-ui0cl6n3jw { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px, 30px) scale(1.05); } }

    .liquid-header[b-ui0cl6n3jw] { margin-bottom: 50px; padding: 0 8px; position: relative; z-index: 2; }
    .header-content[b-ui0cl6n3jw] { display: flex; justify-content: space-between; align-items: flex-end; }
    .titles[b-ui0cl6n3jw] { display: flex; flex-direction: column; gap: 6px; }
    .sub-greeting[b-ui0cl6n3jw] {
        font-size: 0.85rem; color: #64748B; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
        background: linear-gradient(90deg, #64748B, #94A3B8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .header-content h1[b-ui0cl6n3jw] {
        font-size: 2.75rem; font-weight: 800; margin: 0; line-height: 1.1; letter-spacing: -1.5px;
        color: #0F172A; background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    .liquid-btn-primary[b-ui0cl6n3jw] {
        background: #0F172A; color: white; border: none; padding: 0 28px; height: 52px; border-radius: 16px;
        display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
        box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .liquid-btn-primary:hover[b-ui0cl6n3jw] { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.5); background: #1E293B; }
    .liquid-btn-primary:active[b-ui0cl6n3jw] { transform: scale(0.96); }
    
    /* --- PRZYCISK WYLOGOWYWANIA --- */
    .liquid-btn-danger[b-ui0cl6n3jw] {
        background: #EF4444; color: white; border: none; padding: 0 28px; height: 48px; border-radius: 16px;
        display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        width: 100%;
    }
    .liquid-btn-danger:hover[b-ui0cl6n3jw] { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3); background: #DC2626; }
    .liquid-btn-danger:active[b-ui0cl6n3jw] { transform: scale(0.96); }

    .spin[b-ui0cl6n3jw] { animation: rotate-b-ui0cl6n3jw 1s linear infinite; }
    @keyframes rotate-b-ui0cl6n3jw { 100% { transform: rotate(360deg); } }

    .settings-grid[b-ui0cl6n3jw] {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
        padding-bottom: 60px;
    }

    .liquid-card[b-ui0cl6n3jw] {
        background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px);
        border-radius: 24px; padding: 24px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 20px rgba(0,0,0,0.02);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex; flex-direction: column;
    }
    .liquid-card:hover[b-ui0cl6n3jw] { transform: translateY(-4px); box-shadow: 0 15px 35px -5px rgba(0,0,0,0.05); border-color: white; }

    .card-header[b-ui0cl6n3jw] { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
    .header-text h3[b-ui0cl6n3jw] { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1E293B; }
    .header-text p[b-ui0cl6n3jw] { margin: 2px 0 0 0; font-size: 0.85rem; color: #64748B; font-weight: 500; }

    .icon-bubble[b-ui0cl6n3jw] {
        width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem; flex-shrink: 0;
    }
    .icon-bubble.purple[b-ui0cl6n3jw] { background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%); color: #9333EA; }
    .icon-bubble.blue[b-ui0cl6n3jw] { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); color: #0284C7; }
    .icon-bubble.pink[b-ui0cl6n3jw] { background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%); color: #DB2777; }
    /* Nowy kolor dla wylogowania */
    .icon-bubble.red[b-ui0cl6n3jw] { background: linear-gradient(135deg, #FECACA 0%, #FCA5A5 100%); color: #DC2626; }

    .toggles-list[b-ui0cl6n3jw] { display: flex; flex-direction: column; gap: 16px; }
    .logout-wrapper[b-ui0cl6n3jw] { margin-top: auto; }

    .separator[b-ui0cl6n3jw] { height: 1px; background: #F1F5F9; width: 100%; }

    .toggle-row[b-ui0cl6n3jw] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .toggle-info[b-ui0cl6n3jw] { display: flex; flex-direction: column; gap: 2px; }
    .t-label[b-ui0cl6n3jw] { font-size: 0.95rem; font-weight: 600; color: #334155; }
    .t-desc[b-ui0cl6n3jw] { font-size: 0.8rem; color: #94A3B8; }

    .liquid-switch[b-ui0cl6n3jw] {
        position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0;
    }
    .liquid-switch input[b-ui0cl6n3jw] { opacity: 0; width: 0; height: 0; }
    
    .slider[b-ui0cl6n3jw] {
        position: absolute; cursor: pointer; inset: 0; background-color: #E2E8F0;
        transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 34px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }
    .slider[b-ui0cl6n3jw]:before {
        position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px;
        background-color: white; transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    input:checked + .slider[b-ui0cl6n3jw] { background-color: #0F172A; }
    input:checked + .slider[b-ui0cl6n3jw]:before { transform: translateX(22px); }
    
    .liquid-switch:hover .slider[b-ui0cl6n3jw]:before { transform: scale(1.1); }
    input:checked:hover + .slider[b-ui0cl6n3jw]:before { transform: translateX(22px) scale(1.1); }

    @media (max-width: 640px) {
        .liquid-container[b-ui0cl6n3jw] { padding: 30px 16px; }
        .header-content[b-ui0cl6n3jw] { flex-direction: column; align-items: flex-start; gap: 20px; }
        .liquid-btn-primary[b-ui0cl6n3jw] { width: 100%; justify-content: center; }
        .settings-grid[b-ui0cl6n3jw] { grid-template-columns: 1fr; }
    }