/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* =========================
   AUTH THEME - SpyCent match
   Używa tokenów z systemu: --sc-accent, --sc-border, --sc-surface-accent, itd.
   ========================= */

/* 1) Zsynchronizuj z design-systemem (nie nadpisuj globalnych :root!) */
:host[b-ql5fthy04r], .auth-shell[b-ql5fthy04r] {
    /* tylko fallbacki na wypadek braku design-systemu */
    --sc-bg: #0b1220;
    --sc-bg-2: color-mix(in srgb, #0f172a 92%, black);
    --sc-fg: #e5ecff;
    --sc-muted: color-mix(in srgb, #e5ecff 55%, var(--sc-text-muted));
    --sc-border: #223047;
    --sc-card: color-mix(in srgb, #0f172a 94%, #000);
    --sc-accent: #ff2e8b; /* RÓŻ - akcent globalny */
    --sc-accent-600: #e11d74;
    --field-h: 40px; /* spójna wysokość pól */
}

/* 2) Shell i kolumny */
.auth-shell[b-ql5fthy04r] {
    background: linear-gradient(180deg, var(--sc-bg) 0%, var(--sc-bg-2) 100%);
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 992px) {
    .auth-shell[b-ql5fthy04r] {
        grid-template-columns: 1fr;
    }

    .brand-pane[b-ql5fthy04r] {
        display: none;
    }
}

/* 3) Panel marki (kolory → róż jako akcent, bordery jak w systemie) */
.brand-pane[b-ql5fthy04r] {
    position: relative;
    color: var(--sc-fg);
    padding: clamp(24px, 4vw, 40px);
    background: radial-gradient(900px 600px at 70% -10%, color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent), linear-gradient(180deg, color-mix(in oklab, var(--sc-surface-accent) 85%, #000) 0%, color-mix(in oklab, var(--sc-surface-accent) 75%, #000) 100%);
    border-right: 1px solid var(--sc-border);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
}

.brand-head[b-ql5fthy04r] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo[b-ql5fthy04r] {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.35));
}

.brand-title[b-ql5fthy04r] {
    font-weight: 800;
    letter-spacing: .3px;
    font-size: 18px;
}

.brand-copy h2[b-ql5fthy04r] {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 8px 0;
    font-weight: 800;
    color: var(--sc-fg);
}

.brand-copy p[b-ql5fthy04r] {
    margin: 0 0 10px 0;
    color: var(--sc-muted);
}

.brand-bullets[b-ql5fthy04r] {
    margin: 0;
    padding-left: 20px;
    color: var(--sc-fg);
}

    .brand-bullets li[b-ql5fthy04r] {
        margin: 6px 0;
    }

.brand-foot[b-ql5fthy04r] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--sc-muted);
}

    .brand-foot a[b-ql5fthy04r] {
        color: color-mix(in oklab, var(--sc-accent) 70%, white);
        text-decoration: none;
    }

        .brand-foot a:hover[b-ql5fthy04r] {
            text-decoration: underline;
        }

/* 4) Panel formularza */
.form-pane[b-ql5fthy04r] {
    display: grid;
    place-items: center;
    padding: clamp(24px,4vw,48px);
}

.form-card[b-ql5fthy04r] {
    width: min(520px, 92vw);
    background: color-mix(in oklab, var(--sc-card) 92%, transparent);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    box-shadow: 0 24px 96px rgba(0,0,0,.45), 0 2px 16px rgba(0,0,0,.2);
    padding: clamp(20px, 3vw, 28px);
    color: var(--sc-fg);
}

    /* 5) Pola formularza - spójna wysokość + focus różowy */
    .form-card[b-ql5fthy04r]  .field {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        margin-bottom: 1rem;
    }

    .form-card[b-ql5fthy04r]  .field > label {
        color: var(--sc-muted);
        font-size: .8125rem;
        font-weight: 600;
    }

    .form-card[b-ql5fthy04r]  .form-control,
    .form-card[b-ql5fthy04r]  .form-select {
        background-color: color-mix(in oklab, var(--sc-surface-accent) 85%, #000);
        color: var(--sc-fg);
        border: 1px solid var(--sc-border);
        border-radius: 12px;
        height: var(--field-h);
        line-height: calc(var(--field-h) - 2px);
        padding: 0 0.9rem; /* pion wyrównuje line-height */
        box-sizing: border-box;
        width: 100%;
    }

    .form-card[b-ql5fthy04r]  .form-control:focus,
    .form-card[b-ql5fthy04r]  .form-select:focus {
        outline: none;
        border-color: var(--sc-accent);
        box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 28%, transparent);
    }

    /* Placeholders czytelne na dark */
    .form-card[b-ql5fthy04r]  .form-control::placeholder {
        color: color-mix(in oklab, var(--sc-muted) 85%, white 15%);
        opacity: 1;
    }

    /* Checkbox zgodny z akcentem - korzysta z globalnej .c-check (app.css) */
    .form-card[b-ql5fthy04r]  .c-check {
        color: var(--sc-muted);
        font-size: .8125rem;
        cursor: pointer;
        user-select: none;
    }

    /* Walidacja */
    .form-card[b-ql5fthy04r]  .input-validation-error {
        border-color: color-mix(in oklab, var(--sc-danger, #ef4444) 70%, var(--sc-border));
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-danger, #ef4444) 22%, transparent);
    }

    /* 6) Przycisk akcji - bez zmiany HTML (twoja .btn-brand) */
    .form-card[b-ql5fthy04r]  .btn-brand {
        background: var(--sc-accent);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 12px 16px;
        justify-content: center;
        font-weight: 700;
        cursor:pointer;
        letter-spacing: .2px;
        transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
        width: 100%;
        box-shadow: 0 6px 14px color-mix(in oklab, var(--sc-accent) 25%, transparent);
    }

        .form-card[b-ql5fthy04r]  .btn-brand:hover {
            background: var(--sc-accent-600);
            box-shadow: 0 10px 24px color-mix(in oklab, var(--sc-accent) 35%, transparent);
        }

        .form-card[b-ql5fthy04r]  .btn-brand:active {
            transform: translateY(1px);
        }

    /* Links na karcie (np. "zapomniałem hasła") */
    .form-card[b-ql5fthy04r]  a,
    .form-card[b-ql5fthy04r]  .link-forgot {
        color: color-mix(in oklab, var(--sc-accent) 85%, white 15%);
        text-decoration: none;
    }

        .form-card[b-ql5fthy04r]  a:hover,
        .form-card[b-ql5fthy04r]  .link-forgot:hover {
            text-decoration: underline;
        }

    /* Tekst pomocniczy na dark */
    .form-card[b-ql5fthy04r]  label,
    .form-card[b-ql5fthy04r]  .form-text {
        color: var(--sc-fg);
    }

    /* Alerty (Bootstrap) w dark */
    .form-card[b-ql5fthy04r]  .alert {
        color: var(--sc-fg);
        background-color: color-mix(in oklab, var(--sc-surface-accent) 80%, #000);
        border-color: color-mix(in oklab, var(--sc-border) 90%, #000);
    }

    /* Komunikaty na karcie auth (reset hasła, aktywacja konta, logowanie) */
    .form-card[b-ql5fthy04r]  .auth-alert {
        padding: 13px 16px;
        border-radius: 10px;
        margin-bottom: 16px;
        font-size: 13.5px;
        line-height: 1.65;
        border: 1px solid transparent;
    }

    .form-card[b-ql5fthy04r]  .auth-alert--error {
        background: color-mix(in srgb, #ef4444 14%, var(--sc-card));
        border-color: color-mix(in srgb, #ef4444 40%, transparent);
        color: #fecaca;
    }

    .form-card[b-ql5fthy04r]  .auth-alert--success {
        background: color-mix(in srgb, #22c55e 14%, var(--sc-card));
        border-color: color-mix(in srgb, #22c55e 40%, transparent);
        color: #bbf7d0;
    }

        .form-card[b-ql5fthy04r]  .auth-alert a {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline;
        }

    /* Adres konta, którego dotyczy link aktywacyjny */
    .form-card[b-ql5fthy04r]  .auth-account {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--sc-surface-accent, #142032) 70%, #000);
        border: 1px solid var(--sc-border);
    }

    .form-card[b-ql5fthy04r]  .auth-account__label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--sc-muted);
    }

    .form-card[b-ql5fthy04r]  .auth-account__value {
        font-size: 14px;
        font-weight: 700;
        color: var(--sc-fg);
        word-break: break-all;
    }
/* /Components/Layout/Loader.razor.rz.scp.css */
.loader[b-wf6ora7mvp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Ponizej dialogow Radzena (1001) i toastow (1002): nakladka ma zaslaniac
       strone, a nie pasek postepu w dialogu ani komunikat o wyniku. */
    z-index: 990;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, .15);
    display: none;
    align-items:center;
    justify-content:center;
}


.loader.active[b-wf6ora7mvp] {
    display:flex;
}
.loader.inactive[b-wf6ora7mvp] {
    display:none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-h6211nvou0] {
    position: relative;
    display: flex;
}

main[b-h6211nvou0] {
    background-color: #fbfcff;
    flex: 1;
}

.navbar-toggler[b-h6211nvou0] {
    color: #50586d;
    justify-self: flex-end;
    cursor: pointer;
}

    .navbar-toggler:hover[b-h6211nvou0] {
        color: #656f8a;
    }

.sticky-sidebar[b-h6211nvou0] {
    width: 190px;
    position: sticky;
    height: 100vh;
    top: 0;
    display: flex;
    flex-direction: column;
}

/* Numer wersji stoi na samym dole paska, poza przewijanym <nav>. Menu bierze
   reszte wysokosci (flex:1), wiec stopka zostaje przyklejona nawet wtedy,
   gdy lista pozycji jest dluzsza niz ekran. */
.sidebar-version[b-h6211nvou0] {
    flex: none;
    padding: 10px 12px 14px;
    text-align: center;
    font-family: "Nunito", sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

.sidebar[b-h6211nvou0] {
    z-index: 11;
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    box-shadow: 0px 0px 24px rgba(27, 46, 94, 0.05);
    transition: all .2s ease-in-out;
}

@media(min-width:900px) {
    .sidebar.inactive[b-h6211nvou0] {
        margin-left: -200px;
        position: relative;
    }
}

@media(max-width:899.98px) {
    .sidebar[b-h6211nvou0] {
        position: fixed;
        top: 0px;
        box-shadow: none;
        left: -200px;
    }

        .sidebar.active[b-h6211nvou0] {
            left: 0px;
        }

    .menu-overlay.active[b-h6211nvou0] {
        display: block;
    }
}

.menu-overlay[b-h6211nvou0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, .15);
    display: none;
}

.top-row[b-h6211nvou0] {
    justify-content: start;
    height: 55px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

    .top-row[b-h6211nvou0]  a:hover, .top-row[b-h6211nvou0]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-h6211nvou0]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 899.98px) {
    .top-row[b-h6211nvou0]  a, .top-row[b-h6211nvou0]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 900px) {

    .top-row[b-h6211nvou0], article[b-h6211nvou0] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.dropdown-menu .dropdown-item[b-h6211nvou0] {
    border-radius: 8px;
    padding: 10px 15px;
}

.dropdown .dropdown-item[b-h6211nvou0] {
    display: flex;
    align-items: center;
}

#blazor-error-ui[b-h6211nvou0] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-h6211nvou0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.toolbar[b-h6211nvou0]  .rz-menu:not(.rz-profile-menu) {
    background:unset !important;
}

.toolbar[b-h6211nvou0]  .rz-navigation-item-link {
    color:#000 !important;
}

.toolbar[b-h6211nvou0]  .rz-menu {
    flex-direction: row;
}

    .toolbar[b-h6211nvou0]  .rz-navigation-menu {
        right: 00px;
        top: 40px;
    }

    .toolbar[b-h6211nvou0]  .rz-navigation-item-link {
        gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: start;
    }

        .toolbar[b-h6211nvou0]  .rz-navigation-item-link i {
            font-size: 20px;
        }

        .toolbar[b-h6211nvou0]  .rz-navigation-item-link a,
        .toolbar[b-h6211nvou0]  .rz-navigation-item-link span,
        .toolbar[b-h6211nvou0]  .rz-navigation-item-link button {
            border: none;
            background: none;
            font-size: 14px;
            cursor: pointer;
            color: #000 !important;
            text-decoration: none;
        } 
/* /Components/Layout/NavMenu.razor.rz.scp.css */


.top-row[b-bx5f2fj75b] {
    min-height: 3.5rem;
    flex: none;
}


.navbar-brand[b-bx5f2fj75b] {
    margin: 0px;
}


.bi[b-bx5f2fj75b] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-bx5f2fj75b] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-bx5f2fj75b] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-bx5f2fj75b] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-bx5f2fj75b] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-bx5f2fj75b] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-bx5f2fj75b] {
        padding-bottom: 1rem;
    }

.nav[b-bx5f2fj75b]  .rz-navigation-item-link {
    color: #fff;
    font-family: "Nunito", sans-serif;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

    .nav[b-bx5f2fj75b]  .rz-navigation-item-link i {
        font-size: 20px;
    }


.nav[b-bx5f2fj75b]  .rz-navigation-item .rz-navigation-menu .rz-navigation-item-link {
    padding: 12px 15px 12px 40px;
    align-items: start;
}

    .nav[b-bx5f2fj75b]  .rz-navigation-item .rz-navigation-menu .rz-navigation-item-link::after {
        content: "";
        position: absolute;
        top: 20px;
        left: 25px;
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background: #fff;
    }

.nav[b-bx5f2fj75b]  .rz-navigation-item-wrapper {
    background: none !important;
}

.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item {
    border: none;
}

/* Podswietlenie aktywnego elementu. Klasa .active pochodzi z NavLinka (Match),
   a -link-active / -wrapper-active z parametru Selected komponentu Radzena -
   stylujemy wszystkie trzy tak samo, zeby zrodlo prawdy bylo w IsActive(). */
.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item-link:hover,
.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item-link:active,
.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item-link.active,
.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item-link-active,
.nav[b-bx5f2fj75b]  .rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
    background-color: #F72585 !important;
}

.nav-item[b-bx5f2fj75b]  .nav-link {
}

.nav-link i[b-bx5f2fj75b] {
    font-size: 20px;
}

.nav-item[b-bx5f2fj75b]  a.active {
    background-color: #F72585;
}

.nav-item[b-bx5f2fj75b]  .nav-link:hover {
    background-color: #F72585;
}
/* /Components/Pages/Admin/Billing/List.razor.rz.scp.css */
/* ============================================================================
   Rozliczenia. Hierarchia strony: portfel jest bohaterem (ciemna karta
   akcentowa, ten sam gradient co naglowki tabel w panelu), pod nim limity
   planu, potem zuzycie, na koncu plany i historia.
   ============================================================================ */

.billing[b-ceauzoh25o] {
    display: grid;
    gap: var(--sc-space-6);
}

/* --- Pasek ostrzezenia --- */
.billing-alert[b-ceauzoh25o] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4) var(--sc-space-5);
    border-radius: var(--sc-radius-lg);
    font-size: 13px;
    line-height: 1.5;
}

    .billing-alert i[b-ceauzoh25o] {
        font-size: 20px;
        flex-shrink: 0;
    }

    .billing-alert strong[b-ceauzoh25o] {
        display: block;
    }

.billing-alert--danger[b-ceauzoh25o] {
    background: color-mix(in srgb, var(--sc-danger) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--sc-danger) 30%, #fff);
    color: var(--sc-danger);
}

.billing-alert--warning[b-ceauzoh25o] {
    background: color-mix(in srgb, var(--sc-warning) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--sc-warning) 32%, #fff);
    color: #a1650a;
}

/* ============================ PORTFEL ============================ */
.wallet[b-ceauzoh25o] {
    position: relative;
    overflow: hidden;
    padding: var(--sc-space-6);
    border-radius: var(--sc-radius-lg);
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    box-shadow: var(--sc-shadow-md);
    color: var(--sc-text-invert);
}

/* Rozswietlenie w rogu - ten sam zabieg co na stronie www SpyCent. */
.wallet__glow[b-ceauzoh25o] {
    position: absolute;
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(247, 37, 134, .38) 0%, rgba(247, 37, 134, .12) 45%, transparent 100%);
}

.wallet__top[b-ceauzoh25o] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sc-space-6);
    flex-wrap: wrap;
}

.wallet__eyebrow[b-ceauzoh25o] {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 10px;
}

.wallet__balance[b-ceauzoh25o] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.wallet__amount[b-ceauzoh25o] {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}

.wallet__unit[b-ceauzoh25o] {
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
}

.wallet__split[b-ceauzoh25o] {
    display: flex;
    gap: var(--sc-space-5);
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

    .wallet__split b[b-ceauzoh25o] {
        color: #fff;
        font-weight: 700;
    }

    .wallet__split .dot[b-ceauzoh25o] {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .wallet__split .dot--plan[b-ceauzoh25o] { background: var(--sc-accent); }
    .wallet__split .dot--topup[b-ceauzoh25o] { background: var(--neon-cyan); }

.wallet__actions[b-ceauzoh25o] {
    display: flex;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.wallet__ghost[b-ceauzoh25o] {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
}

    .wallet__ghost:hover[b-ceauzoh25o] {
        background: rgba(255, 255, 255, .14);
    }

/* --- Pasek zuzycia puli --- */
.wallet__meter[b-ceauzoh25o] {
    position: relative;
    margin-top: var(--sc-space-6);
}

.wallet__meter-head[b-ceauzoh25o] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 8px;
}

    .wallet__meter-head b[b-ceauzoh25o] {
        color: #fff;
    }

.wallet__track[b-ceauzoh25o] {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
}

.wallet__fill[b-ceauzoh25o] {
    height: 100%;
    border-radius: 999px;
    transition: width var(--sc-transition);
}

/* --- Fakty pod paskiem --- */
.wallet__facts[b-ceauzoh25o] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-6);
}

.fact[b-ceauzoh25o] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--sc-space-4);
    border-radius: var(--sc-radius-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}

.fact__label[b-ceauzoh25o] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.fact__value[b-ceauzoh25o] {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.fact__sub[b-ceauzoh25o] {
    font-size: 11px;
    color: rgba(255, 255, 255, .58);
}

.fact__tag[b-ceauzoh25o] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(247, 37, 134, .22);
    color: #ff9ac8;
}

/* ============================ LIMITY PLANU ============================ */
.limits[b-ceauzoh25o] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.limit[b-ceauzoh25o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
}

.limit__head[b-ceauzoh25o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-3);
}

.limit__label[b-ceauzoh25o] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}

.limit__count[b-ceauzoh25o] {
    font-size: 15px;
    font-weight: 800;
    color: var(--sc-text);
    white-space: nowrap;
}

    .limit__count em[b-ceauzoh25o] {
        font-style: normal;
        font-size: 11px;
        font-weight: 600;
        color: var(--sc-text-muted);
    }

.limit__track[b-ceauzoh25o] {
    height: 5px;
    border-radius: 999px;
    background: var(--sc-surface-muted);
    overflow: hidden;
}

.limit__fill[b-ceauzoh25o] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-light-blue), var(--sc-accent));
}

.limit__hint[b-ceauzoh25o] {
    font-size: 11px;
    color: var(--sc-text-muted);
}

/* ============================ ZUZYCIE ============================ */
.usage[b-ceauzoh25o] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--sc-space-6);
}

.usage__caption[b-ceauzoh25o] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
    margin-bottom: var(--sc-space-4);
}

.plat[b-ceauzoh25o] {
    margin-bottom: var(--sc-space-4);
}

.plat__head[b-ceauzoh25o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-3);
    margin-bottom: 5px;
}

.plat__name[b-ceauzoh25o] {
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-text);
}

.plat__value[b-ceauzoh25o] {
    font-size: 13px;
    font-weight: 800;
    color: var(--sc-text);
}

.plat__track[b-ceauzoh25o] {
    height: 8px;
    border-radius: 999px;
    background: var(--sc-surface-muted);
    overflow: hidden;
}

.plat__fill[b-ceauzoh25o] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-light-blue), var(--sc-accent));
}

.plat__meta[b-ceauzoh25o] {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--sc-text-muted);
}

/* ============================ HISTORIA ============================ */
.tab-body[b-ceauzoh25o] {
    padding: var(--sc-space-5) 0 0;
}

.amount[b-ceauzoh25o] {
    font-weight: 800;
}

    .amount.is-in[b-ceauzoh25o] { color: var(--sc-success); }
    .amount.is-out[b-ceauzoh25o] { color: var(--sc-danger); }

.muted[b-ceauzoh25o] {
    font-size: 12px;
    color: var(--sc-text-muted);
}

.mono[b-ceauzoh25o] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}

/* Zakladki siedza wprost w karcie, wiec pasek musi dostac wciecie. */
.billing[b-ceauzoh25o]  .rz-tabview-nav {
    padding: 0 var(--sc-space-6);
}

.billing[b-ceauzoh25o]  .rz-tabview-panels {
    padding: 0 var(--sc-space-6) var(--sc-space-6);
}

/* --- Pusty stan --- */
.empty[b-ceauzoh25o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-3);
    min-height: 200px;
    padding: var(--sc-space-6);
    border: 1px dashed var(--sc-border);
    border-radius: var(--sc-radius-md);
    color: var(--sc-text-muted);
    font-size: 13px;
    text-align: center;
}

    .empty i[b-ceauzoh25o] {
        font-size: 32px;
        opacity: .5;
    }

.empty--sm[b-ceauzoh25o] {
    min-height: 100px;
}

/* ============================ RESPONSYWNOSC ============================ */
@media (max-width: 1200px) {
    .wallet__facts[b-ceauzoh25o],
    .limits[b-ceauzoh25o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usage[b-ceauzoh25o] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .wallet__facts[b-ceauzoh25o],
    .limits[b-ceauzoh25o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wallet__amount[b-ceauzoh25o] {
        font-size: 34px;
    }
}
/* /Components/Pages/Alerts/Channels/List.razor.rz.scp.css */

/* Panel historii wysyłek kanału. */
.modal-backdrop[b-qukmnbemjw] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 35, .45);
}

.modal-panel[b-qukmnbemjw] {
    width: min(920px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--sc-surface);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-lg);
    overflow: hidden;
}

.modal-panel__head[b-qukmnbemjw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5) var(--sc-space-6);
    border-bottom: 1px dashed var(--sc-border);
}

    .modal-panel__head h4[b-qukmnbemjw] {
        margin: 0;
        font-size: 16px;
    }

    .modal-panel__head p[b-qukmnbemjw] {
        margin: 2px 0 0;
        font-size: 12px;
        color: var(--sc-text-muted);
    }

.modal-panel__body[b-qukmnbemjw] {
    padding: var(--sc-space-6);
    overflow-y: auto;
}

.muted[b-qukmnbemjw] {
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* Wynik ostatniej wysyłki w kolumnie listy kanałów. */
.last-send[b-qukmnbemjw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.spy-action-btn:disabled[b-qukmnbemjw] {
    opacity: .45;
    cursor: not-allowed;
}

/* Wariant formularzowy okna modalnego - wezszy, z zamknieciem i stopka akcji. */
.modal-panel--form[b-qukmnbemjw] {
    width: min(520px, 92vw);
}

.modal-panel__close[b-qukmnbemjw] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: var(--sc-text-muted);
    transition: color var(--sc-transition);
}

    .modal-panel__close:hover[b-qukmnbemjw] {
        color: var(--sc-text);
    }

    .modal-panel__close i[b-qukmnbemjw] {
        font-size: 20px;
    }

.modal-panel__foot[b-qukmnbemjw] {
    display: flex;
    justify-content: flex-end;
    gap: var(--sc-space-3);
    padding: var(--sc-space-5) var(--sc-space-6);
    border-top: 1px solid var(--sc-border);
}

.modal-panel .c-field--inline[b-qukmnbemjw] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.modal-panel .c-label--inline[b-qukmnbemjw] {
    font-weight: 400;
    margin: 0;
}

.modal-panel__body .c-note[b-qukmnbemjw] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
}

    .modal-panel__body .c-note i[b-qukmnbemjw] {
        font-size: 18px;
        color: var(--sc-accent);
        flex-shrink: 0;
    }
/* /Components/Pages/Auth/Activate.razor.rz.scp.css */
/* Drobne dopieszczenie dla strony resetu hasła - korzysta z tokenów z AuthLayout */
.auth-forgot-form .form-control[b-oycj1ufkpq] { /* szczególne odstępy tylko dla tej strony */
}

.link-return[b-oycj1ufkpq] {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    font-weight: 500;
}

    .link-return:hover[b-oycj1ufkpq] {
        text-decoration: underline;
    }
/* /Components/Pages/Auth/Denied.razor.rz.scp.css */
.mt-2[b-azc6zzy6s1] { margin-top: 12px; }
/* /Components/Pages/Auth/ForgetPassword.razor.rz.scp.css */
/* Drobne dopieszczenie dla strony resetu hasła - korzysta z tokenów z AuthLayout */
.link-return[b-vo3p4ug3y1] {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    font-weight: 500;
}

    .link-return:hover[b-vo3p4ug3y1] {
        text-decoration: underline;
    }
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Styl lokalny strony logowania - korzysta ze zmiennych z AuthLayout */
.form-row[b-5vwody8v00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 14px 0;
}

.link-forgot[b-5vwody8v00] {
    font-size: 13px;
    text-decoration: none;
}

    .link-forgot:hover[b-5vwody8v00] {
        text-decoration: underline;
    }
/* /Components/Pages/Integrations/Exports.razor.rz.scp.css */
/* === INTEGRATIONS section/grid/cards (shared layout) === */
.integ-section[b-u05dxxizng] {
    margin-bottom: 32px;
}

    .integ-section__title[b-u05dxxizng] {
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--sc-text-muted);
        margin: 0 0 12px 0;
        padding-left: 4px;
    }

.integ-grid[b-u05dxxizng] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.integ-card[b-u05dxxizng] {
    position: relative;
    background: #fff;
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

    .integ-card:hover:not(.integ-card--soon)[b-u05dxxizng] {
        border-color: color-mix(in srgb, var(--sc-accent) 30%, var(--sc-border));
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        transform: translateY(-1px);
    }

.integ-card--wide[b-u05dxxizng] {
    grid-column: 1 / -1;
    padding: 24px;
}

.integ-card--soon[b-u05dxxizng] {
    opacity: 0.6;
}

.integ-card__head[b-u05dxxizng] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.integ-card__icon[b-u05dxxizng] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sc-accent) 10%, #fff);
    color: var(--sc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.integ-card__icon--brand[b-u05dxxizng] {
    background: color-mix(in srgb, var(--sc-info, #3b82f6) 10%, #fff);
    color: var(--sc-info, #3b82f6);
}

.integ-card__title[b-u05dxxizng] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sc-text);
}

.integ-card__desc[b-u05dxxizng] {
    margin: 0;
    font-size: .82rem;
    color: var(--sc-text-muted);
    line-height: 1.5;
    flex: 1;
}

.integ-card__action[b-u05dxxizng] {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.integ-card__actions[b-u05dxxizng] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.integ-card__badge[b-u05dxxizng] {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sc-text-muted) 12%, #fff);
    color: var(--sc-text-muted);
    border: 1px dashed var(--sc-border);
    margin-top: 8px;
}

.integ-card__body[b-u05dxxizng] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Konfigurator wewnątrz wide card - bloki pól z subtelnym separator-em */
.integ-config[b-u05dxxizng] {
    margin-top: 8px;
    padding: 16px;
    background: var(--sc-surface-muted);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Footer wide card - przycisk akcji wyrównany do prawej, normalny rozmiar */
.integ-card__footer[b-u05dxxizng] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sc-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

    .integ-card__footer .c-btn[b-u05dxxizng] {
        min-width: 180px;
    }
/* /Components/Pages/Integrations/Imports.razor.rz.scp.css */
/* === INTEGRATIONS section/grid/cards (shared layout) === */
.integ-section[b-b0b6my26xo] {
    margin-bottom: 32px;
}

    .integ-section__title[b-b0b6my26xo] {
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--sc-text-muted);
        margin: 0 0 12px 0;
        padding-left: 4px;
    }

.integ-grid[b-b0b6my26xo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.integ-card[b-b0b6my26xo] {
    position: relative;
    background: #fff;
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

    .integ-card:hover:not(.integ-card--soon)[b-b0b6my26xo] {
        border-color: color-mix(in srgb, var(--sc-accent) 30%, var(--sc-border));
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        transform: translateY(-1px);
    }

.integ-card--wide[b-b0b6my26xo] {
    grid-column: 1 / -1;
    padding: 24px;
}

.integ-card--soon[b-b0b6my26xo] {
    opacity: 0.6;
}

.integ-card__head[b-b0b6my26xo] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.integ-card__icon[b-b0b6my26xo] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sc-accent) 10%, #fff);
    color: var(--sc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.integ-card__icon--brand[b-b0b6my26xo] {
    background: color-mix(in srgb, var(--sc-info, #3b82f6) 10%, #fff);
    color: var(--sc-info, #3b82f6);
}

.integ-card__title[b-b0b6my26xo] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sc-text);
}

.integ-card__desc[b-b0b6my26xo] {
    margin: 0;
    font-size: .82rem;
    color: var(--sc-text-muted);
    line-height: 1.5;
    flex: 1;
}

.integ-card__action[b-b0b6my26xo] {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.integ-card__actions[b-b0b6my26xo] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.integ-card__badge[b-b0b6my26xo] {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sc-text-muted) 12%, #fff);
    color: var(--sc-text-muted);
    border: 1px dashed var(--sc-border);
    margin-top: 8px;
}

.integ-card__body[b-b0b6my26xo] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pages/Product/List.razor.rz.scp.css */
/* === PAGE WRAPPER === */
.product-list-page[b-813w1ct3dn] {
    background: var(--sc-bg);
}

/* === FILTERS (używamy struktury c-card / c-form) === */
/* Zostawiamy tylko drobne dodatki do nagłówka i akcji (resztę zapewnia design system). */

/* Badge "N aktywne" obok nagłówka "Filtry" */
.filter-total-badge[b-813w1ct3dn] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sc-accent) 12%, #fff);
    color: var(--sc-accent);
    font-size: .7rem;
    font-weight: 800;
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 30%, var(--sc-border));
}

/* === FILTER CHIPS (aktywne filtry jako klikalne chipy) === */
.filter-chips[b-813w1ct3dn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 8px;
}

.filter-chip[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sc-accent) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--sc-accent) 25%, var(--sc-border));
    font-size: .75rem;
    color: var(--sc-text);
    line-height: 1;
}

    .filter-chip__label[b-813w1ct3dn] {
        font-weight: 800;
        color: var(--sc-text-muted);
        font-size: .7rem;
    }

    .filter-chip__value[b-813w1ct3dn] {
        font-weight: 700;
        color: var(--sc-text);
    }

    .filter-chip__remove[b-813w1ct3dn] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: none;
        background: transparent;
        border-radius: 50%;
        color: var(--sc-text-muted);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        padding: 0;
    }

        .filter-chip__remove:hover[b-813w1ct3dn] {
            background: color-mix(in srgb, var(--sc-danger) 12%, #fff);
            color: var(--sc-danger);
        }

/* === FILTER SECTIONS (zwijane, wyraźnie odseparowane) === */
.filter-section[b-813w1ct3dn] {
    margin-top: 14px;
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface-muted);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .filter-section:first-of-type[b-813w1ct3dn] {
        margin-top: 4px;
    }

    .filter-section.is-open[b-813w1ct3dn] {
        background: #fff;
        border-color: color-mix(in srgb, var(--sc-accent) 25%, var(--sc-border));
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

.filter-section__toggle[b-813w1ct3dn] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .78rem;
    font-weight: 800;
    color: var(--sc-text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .filter-section__toggle:hover[b-813w1ct3dn] {
        color: var(--sc-accent);
        background: color-mix(in srgb, var(--sc-accent) 4%, transparent);
    }

    .filter-section__toggle i[b-813w1ct3dn] {
        font-size: 12px;
        color: var(--sc-text-muted);
        transition: transform .15s ease;
    }

    .filter-section.is-open .filter-section__toggle[b-813w1ct3dn] {
        border-bottom: 1px solid var(--sc-border);
        background: #fff;
    }

        .filter-section.is-open .filter-section__toggle i[b-813w1ct3dn] {
            color: var(--sc-accent);
        }

.filter-section__badge[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sc-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    margin-left: 4px;
    letter-spacing: 0;
}

.filter-section__body[b-813w1ct3dn] {
    padding: 18px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #fff;
}

/* Pod-sekcje wewnątrz sekcji - wyraźne .c-label jako "nagłówek grupy pól" */
.filter-section__body .c-field > .c-label[b-813w1ct3dn] {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
    margin-bottom: 8px;
}

/* === SEGMENTED CONTROL (3-4 opcje, jedna aktywna) === */
.segmented[b-813w1ct3dn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 3px;
    background: var(--sc-surface-muted);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    width: fit-content;
    max-width: 100%;
}

.segmented__item[b-813w1ct3dn] {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sc-text-muted);
    white-space: nowrap;
    transition: all .15s ease;
}

    .segmented__item:hover[b-813w1ct3dn] {
        color: var(--sc-text);
    }

    .segmented__item.is-active[b-813w1ct3dn] {
        background: #fff;
        color: var(--sc-accent);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

/* === CHECKBOX GROUPS === */
.filter-checks[b-813w1ct3dn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.filter-check[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--sc-text);
    user-select: none;
}

    .filter-check input[type="checkbox"][b-813w1ct3dn] {
        cursor: pointer;
    }

.filters-title[b-813w1ct3dn] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

    .filters-title svg[b-813w1ct3dn] {
        color: var(--sc-accent);
        flex-shrink: 0;
    }

    .filters-title h3[b-813w1ct3dn] {
        margin: 0 0 2px 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--sc-text);
    }

    .filters-title p[b-813w1ct3dn] {
        margin: 0;
        font-size: .8rem;
        color: var(--sc-text-muted);
        font-weight: 600;
    }

.filters-actions[b-813w1ct3dn] {
    display: flex;
    gap: var(--sc-space-2);
}

/* .c-form, .grid, .c-field, .c-input, .c-select itp. stylowane globalnie przez spycent-design-system.css */


/* === FRESHNESS CHIP (Kolumna "Aktualizacja") === */
.freshness[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid var(--sc-border);
    background: #fff;
    color: var(--sc-text-muted);
    white-space: nowrap;
}

.freshness__dot[b-813w1ct3dn] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-text-muted);
}

.freshness.is-fresh[b-813w1ct3dn] {
    color: var(--sc-success);
    border-color: color-mix(in srgb, var(--sc-success) 30%, var(--sc-border));
    background: color-mix(in srgb, var(--sc-success) 6%, #fff);
}

    .freshness.is-fresh .freshness__dot[b-813w1ct3dn] {
        background: var(--sc-success);
        box-shadow: 0 0 6px var(--sc-success);
    }

.freshness.is-aging[b-813w1ct3dn] {
    color: var(--sc-warning);
    border-color: color-mix(in srgb, var(--sc-warning) 30%, var(--sc-border));
    background: color-mix(in srgb, var(--sc-warning) 6%, #fff);
}

    .freshness.is-aging .freshness__dot[b-813w1ct3dn] {
        background: var(--sc-warning);
    }

.freshness.is-stale[b-813w1ct3dn] {
    color: var(--sc-danger);
    border-color: color-mix(in srgb, var(--sc-danger) 30%, var(--sc-border));
    background: color-mix(in srgb, var(--sc-danger) 6%, #fff);
}

    .freshness.is-stale .freshness__dot[b-813w1ct3dn] {
        background: var(--sc-danger);
    }

.freshness.is-never[b-813w1ct3dn] {
    color: var(--sc-text-muted);
}

/* === KOMÓRKA PRODUKTU === */
.spy-product-cell[b-813w1ct3dn] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.spy-product-img[b-813w1ct3dn] {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: var(--sc-radius-sm);
    border: 1px solid var(--sc-border);
    background: var(--sc-surface-muted);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .spy-product-img img[b-813w1ct3dn] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
    }

.spy-product-placeholder[b-813w1ct3dn] {
    color: var(--sc-text-muted);
}

    .spy-product-placeholder svg[b-813w1ct3dn] {
        width: 24px;
        height: 24px;
    }

.spy-product-info[b-813w1ct3dn] {
    flex: 1;
    text-wrap: auto;
    min-width: 0;
}

.spy-product-name[b-813w1ct3dn] {
    margin: 0 0 4px 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sc-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spy-product-brand[b-813w1ct3dn] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0 0 6px 0;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sc-text-muted);
}

    .spy-product-brand svg[b-813w1ct3dn] {
        width: 10px;
        height: 10px;
        color: var(--sc-accent);
    }

.spy-product-tags[b-813w1ct3dn] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* === KOMÓRKA KODÓW === */
.spy-codes-cell[b-813w1ct3dn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.spy-code-item[b-813w1ct3dn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.spy-code-label[b-813w1ct3dn] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sc-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.spy-code-value[b-813w1ct3dn] {
    font-size: .75rem;
    font-weight: 700;
    color: var(--sc-text);
}

/* === KOMÓRKA STAN/CENY (TWÓJ SKLEP) === */
.spy-stock-cell[b-813w1ct3dn] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 6px;
}

.spy-price-display[b-813w1ct3dn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spy-price-main[b-813w1ct3dn] {
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1rem;
}

.spy-price-sub[b-813w1ct3dn] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sc-text-muted);
}

/* === STATUS DOSTĘPNOŚCI === */
.spy-availability[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    width: fit-content;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface-muted);
}

.spy-availability-dot[b-813w1ct3dn] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
}

/* zielony/czerwony zgodnie z tokenami */
.spy-availability-yes[b-813w1ct3dn] {
    background: color-mix(in srgb, var(--sc-success) 10%, #fff);
    color: var(--sc-success);
    border: 1px solid color-mix(in srgb, var(--sc-success) 25%, var(--sc-border));
}

    .spy-availability-yes .spy-availability-dot[b-813w1ct3dn] {
        background: var(--sc-success);
    }

.spy-availability-no[b-813w1ct3dn] {
    background: color-mix(in srgb, var(--sc-danger) 10%, #fff);
    color: var(--sc-danger);
    border: 1px solid color-mix(in srgb, var(--sc-danger) 25%, var(--sc-border));
}

    .spy-availability-no .spy-availability-dot[b-813w1ct3dn] {
        background: var(--sc-danger);
    }

/* === CAROUSEL (oferty) - ROW LAYOUT ALWAYS, NO OVERFLOW === */
.spy-no-offers[b-813w1ct3dn] {
    text-align: center;
}

.spy-offers-carousel[b-813w1ct3dn] {
    padding: 0;
    max-width: 100%;
    overflow: hidden;
}

    /* Rdzeń Radzena */
    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel,
    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-items {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 12px !important; /* ciaśniej niż 25px */
        box-sizing: border-box;
    }

    /* Nawigacja mieszka w slajdzie */
    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-prev,
    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        overflow: hidden;
    }

    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-prev {
        left: 4px;
        right: auto;
    }

    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-next {
        right: 4px;
        left: auto;
    }

/* --- Karta oferty --- */
.spy-offer-card[b-813w1ct3dn] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* ZAWSZE WIERSZ */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 6px 0;
    padding: 8px 12px;
    border-radius: var(--sc-radius-sm);
    border: 1px solid var(--sc-border);
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

    .spy-offer-card.offer-first[b-813w1ct3dn] {
        background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--neon-pink), var(--neon-purple)) border-box;
        border: 2px solid transparent;
    }

/* Sklep (lewa strona) - wąski, stały */
.spy-offer-shop[b-813w1ct3dn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 68px;
    max-width: 80px;
}

.spy-offer-badge[b-813w1ct3dn] {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    background: var(--sc-info);
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.spy-shop-logo[b-813w1ct3dn] {
    width: 56px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .spy-shop-logo img[b-813w1ct3dn] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

.spy-shop-name[b-813w1ct3dn] {
    font-size: 10px;
    font-weight: 700;
    color: var(--sc-text);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    max-width: 72px;
}

/* Ceny (prawa strona) - elastyczne, mogą się zwężać */
.spy-offer-price[b-813w1ct3dn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0; /* KLUCZ DO BRAKU OVERFLOW W WIERSZU */
}

    .spy-offer-price .spy-price-main[b-813w1ct3dn] {
        font-size: .9rem;
        font-weight: 700;
        color: var(--sc-text);
        margin: 0;
        line-height: 1.1;
    }

    .spy-offer-price .spy-price-sub[b-813w1ct3dn] {
        font-size: .75rem;
        font-weight: 600;
        color: var(--sc-text-muted);
        margin: 0;
        line-height: 1.1;
    }

    /* Długie treści nie wypychają układu */
    .offer-name[b-813w1ct3dn],
    .spy-shop-name[b-813w1ct3dn],
    .spy-offer-price[b-813w1ct3dn],
    .spy-offer-price .spy-price-main[b-813w1ct3dn],
    .spy-offer-price .spy-price-sub[b-813w1ct3dn] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* podstawowo elipsa */
    }

/* --- Mobile tuning (dalej UKŁAD W WIERSZU) --- */
@media (max-width: 968px) {
    .spy-offers-carousel[b-813w1ct3dn]  .rz-carousel-item {
        padding: 0 10px !important;
    }

    /* pozwól zawartości się ścisnąć */
    .spy-offer-card[b-813w1ct3dn], .spy-offer-shop[b-813w1ct3dn], .spy-offer-price[b-813w1ct3dn] {
        min-width: 0;
    }

        /* na węższych ekranach pozwól cenom ZŁAMAĆ linie zamiast robić scroll */
        .spy-offer-price .spy-price-main[b-813w1ct3dn],
        .spy-offer-price .spy-price-sub[b-813w1ct3dn] {
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

    /* badge i logo odrobinę mniejsze */
    .spy-offer-badge[b-813w1ct3dn] {
        font-size: 7.5px;
        padding: 3px 6px;
    }

    .spy-shop-logo[b-813w1ct3dn] {
        width: 50px;
        height: 28px;
    }
}

/* bardzo wąskie ekrany - dalej wiersz, ale ciaśniej */
@media (max-width: 420px) {
    .spy-offer-card[b-813w1ct3dn] {
        gap: 8px;
        padding: 8px;
    }

    .spy-shop-logo[b-813w1ct3dn] {
        width: 44px;
        height: 26px;
    }

    .spy-offer-price .spy-price-main[b-813w1ct3dn] {
        font-size: .85rem;
    }

    .spy-offer-price .spy-price-sub[b-813w1ct3dn] {
        font-size: .72rem;
    }
}


/* Mini-karta w komórce */
.metric-card[b-813w1ct3dn] {
    position: relative;
    display: grid;
    gap: .5rem;
    padding: .75rem .8rem .85rem .9rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    box-shadow: var(--sc-shadow);
    isolation: isolate;
}



.metric-card__head[b-813w1ct3dn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.metric-card__title[b-813w1ct3dn] {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--sc-text);
}

.metric-card__ts[b-813w1ct3dn] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sc-text-muted);
}

/* Skeleton (spójny, kompaktowy) */
.metric-card.is-loading[b-813w1ct3dn] {
    background: #fff;
}

.metric-skel[b-813w1ct3dn] {
    display: grid;
    gap: .45rem;
}

.sk[b-813w1ct3dn] {
    border-radius: 8px;
    background: linear-gradient(90deg, #f2f4f8 25%, #eceff4 37%, #f2f4f8 63%);
    background-size: 400% 100%;
    animation: sksh-b-813w1ct3dn 1.2s infinite;
}

.sk--chip[b-813w1ct3dn] {
    height: 22px;
    width: 110px;
}

.sk--bar[b-813w1ct3dn] {
    height: 10px;
}

.sk--bar-sm[b-813w1ct3dn] {
    width: 70%;
}

@keyframes sksh-b-813w1ct3dn {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

/* Zawartość */
.metric-card__content[b-813w1ct3dn] {
    display: grid;
    gap: .6rem;
}

/* Chip trendu */
.metric-chip[b-813w1ct3dn] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    border: 1px dashed var(--sc-border);
    background: #fff;
    color: var(--sc-text);
}

    .metric-chip svg[b-813w1ct3dn] {
        color: currentColor;
    }

    .metric-chip em[b-813w1ct3dn] {
        font-style: normal;
        font-weight: 700;
        color: var(--sc-text-muted);
        margin-left: .1rem;
    }

    .metric-chip.is-up[b-813w1ct3dn] {
        color: var(--sc-success);
        border-color: color-mix(in srgb, var(--sc-success) 50%, var(--sc-border));
        background: color-mix(in srgb, var(--sc-success) 6%, #fff);
    }

    .metric-chip.is-down[b-813w1ct3dn] {
        color: var(--sc-danger);
        border-color: color-mix(in srgb, var(--sc-danger) 50%, var(--sc-border));
        background: color-mix(in srgb, var(--sc-danger) 6%, #fff);
    }

    .metric-chip.is-flat[b-813w1ct3dn] {
        color: var(--sc-text-muted);
    }

/* Wiersze WWW/MP */
.metric-rows[b-813w1ct3dn] {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: .6rem;
    row-gap: .45rem;
    align-items: center;
}

.metric-row[b-813w1ct3dn] {
    display: contents;
}

.metric-row__label[b-813w1ct3dn] {
    grid-column: 1;
    font-size: .72rem;
    font-weight: 800;
    color: var(--sc-text-muted);
    letter-spacing: .02em;
}

.metric-row__val[b-813w1ct3dn] {
    grid-column: 2;
    justify-self: start;
    font-size: .8rem;
    font-weight: 800;
    color: var(--sc-text);
    padding: .15rem .45rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--sc-border);
}

/* Pasek pozycji */
.metric-bar[b-813w1ct3dn] {
    grid-column: 1 / span 2;
}

/* Drobna separacja treści w gęstej tabeli */
.rz-datatable td .metric-card[b-813w1ct3dn] {
    margin: .1rem 0;
}

/* Kompaktowa karta */
.metric-card--compact[b-813w1ct3dn] {
    padding: .6rem .65rem .7rem .75rem;
}

    .metric-card--compact[b-813w1ct3dn]::before {
        width: 2px;
    }
    /* węższa szyna akcentu */

    /* Gęstszy layout treści */
    .metric-card--compact .metric-card__content[b-813w1ct3dn] {
        gap: .5rem;
    }

.metric-chip[b-813w1ct3dn] {
    padding: .22rem .5rem;
    font-size: .73rem;
}

    .metric-chip svg[b-813w1ct3dn] {
        width: 11px;
        height: 11px;
    }

/* Mniejsza siatka pozycji */
.metric-rows--compact[b-813w1ct3dn] {
    grid-template-columns: 42px 1fr;
    column-gap: .5rem;
    row-gap: .35rem;
}

.metric-row__label[b-813w1ct3dn] {
    font-size: .7rem;
}

.metric-row__val[b-813w1ct3dn] {
    font-size: .78rem;
    padding: .12rem .4rem;
    border-radius: 6px;
}

/* Skeleton - bardziej ściśnięty */
.metric-card.is-loading .metric-skel[b-813w1ct3dn] {
    gap: .35rem;
}

.sk--chip[b-813w1ct3dn] {
    height: 18px;
    width: 96px;
}

.sk--bar[b-813w1ct3dn] {
    height: 8px;
}

.sk--bar-sm[b-813w1ct3dn] {
    width: 60%;
}

/* Minimalny margines w komórce tabeli */
.rz-datatable td .metric-card[b-813w1ct3dn] {
    margin: .05rem 0;
}

/* Jednoliniowy układ WWW + MP */
.metric-inline[b-813w1ct3dn] {
    display: flex;
    gap: .8rem;
    align-items: center;
    justify-content: space-between;
}

    .metric-inline .mini[b-813w1ct3dn] {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: .4rem .5rem;
        min-width: 0;
        flex: 1;
    }

.mini__label[b-813w1ct3dn] {
    font-size: .7rem;
    font-weight: 800;
    color: var(--sc-text-muted);
    letter-spacing: .02em;
}

.mini__val[b-813w1ct3dn] {
    font-size: .78rem;
    font-weight: 800;
    color: var(--sc-text);
    padding: .1rem .38rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--sc-border);
}

/* Kontener paska */
.pos-track[b-813w1ct3dn] {
    --pos: 50; /* pozycja w % (liczba) */
    --edge-pad: 6px; /* marginesy toru wewnątrz paska */
    --track-h: 3px; /* grubość toru */
    position: relative;
    height: 12px; /* całkowita wysokość komponentu */
    overflow: visible; /* dot może wystawać */
    display: grid;
    align-items: center;
}

    /* Sam tor - neutralny (nie barwimy tła kolorem kropki) */
    .pos-track[b-813w1ct3dn]::before {
        content: "";
        display: block;
        height: var(--track-h);
        border-radius: 999px;
        background: linear-gradient(180deg,#ffffff,#fff) padding-box;
        border: 1px solid #e6eaf2;
        box-shadow: inset 0 1px 2px rgba(13,17,23,.05);
    }

    /* Delikatny glow toru zależny od koloru kropki (wspiera nowoczesne przeglądarki) */
    .pos-track:has(.pos-dot--good)[b-813w1ct3dn]::before {
        box-shadow: inset 0 1px 2px rgba(13,17,23,.05), 0 0 0 2px color-mix(in oklab, var(--sc-accent, #ff2e8b) 12%, transparent);
    }

    .pos-track:has(.pos-dot--mid)[b-813w1ct3dn]::before {
        box-shadow: inset 0 1px 2px rgba(13,17,23,.05), 0 0 0 2px color-mix(in oklab, var(--neon-purple, #7c3aed) 16%, transparent);
    }

    .pos-track:has(.pos-dot--bad)[b-813w1ct3dn]::before {
        box-shadow: inset 0 1px 2px rgba(13,17,23,.05), 0 0 0 2px color-mix(in oklab, var(--neon-light-blue, #3b82f6) 18%, transparent);
    }

/* Kropka - precyzyjne pozycjonowanie i wyrazisty look */
.pos-dot[b-813w1ct3dn] {
    position: absolute;
    top: 50%;
    left: calc( var(--edge-pad) + ((100% - (2 * var(--edge-pad))) * var(--pos) / 100) );
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--dot-color, #ff2e8b) 14%, #fff);
    border: 4px solid var(--dot-color, #ff2e8b);
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 5px color-mix(in oklab, var(--dot-color, #ff2e8b) 22%, transparent);
}

/* Mapowanie kropek na paletę projektu (jasność = „lepiej”) */
.pos-dot--good[b-813w1ct3dn] {
    --dot-base: var(--sc-accent, #ff2e8b); /* róż */
    --dot-color: color-mix(in oklab, var(--dot-base) 38%, #fff); /* jaśniej */
}

.pos-dot--mid[b-813w1ct3dn] {
    --dot-base: var(--neon-purple, #7c3aed); /* fiolet */
    --dot-color: color-mix(in oklab, var(--dot-base) 60%, #fff); /* średnio */
}

.pos-dot--bad[b-813w1ct3dn] {
    --dot-base: var(--neon-light-blue, #3b82f6); /* niebieski */
    --dot-color: color-mix(in oklab, var(--dot-base) 78%, #000); /* ciemniej */
}

/* Wersja podbita (opcjonalnie) */
.pos-dot--emph[b-813w1ct3dn] {
    box-shadow: 0 3px 8px rgba(0,0,0,.22), 0 0 0 6px color-mix(in oklab, var(--dot-color, #ff2e8b) 26%, transparent);
}

/* Mini wariant (jak w Twojej kolumnie) - deklaratywnie */
.pos-track--mini[b-813w1ct3dn] {
    height: 12px;
}

/* Komorka pozycji cenowej: ranga, tor z kropka i liczba zrodel. */
.pos-cell[b-813w1ct3dn] {
    display: grid;
    gap: 4px;
}

.pos-cell__head[b-813w1ct3dn] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.pos-cell__rank[b-813w1ct3dn] {
    font-size: 16px;
    font-weight: 800;
    color: var(--sc-text);
    line-height: 1;
}

.pos-cell__total[b-813w1ct3dn] {
    font-size: 11px;
    color: var(--sc-text-muted);
}

.pos-cell__src[b-813w1ct3dn] {
    font-size: 10px;
    color: var(--sc-text-muted);
}
/* /Components/Pages/Product/Stats.razor.rz.scp.css */
/* ============================================================================
   Statystyki produktu. Hierarchia: werdykt (ciemna karta akcentowa) mowi jednym
   zdaniem, jak stoimy; drabina cenowa pokazuje to wizualnie; wykresy i tabela
   sluza do drazenia szczegolow.
   ============================================================================ */

.stats[b-zxxea55ywv] {
    display: grid;
    gap: var(--sc-space-6);
}

/* ============================ WERDYKT ============================ */
.verdict[b-zxxea55ywv] {
    position: relative;
    overflow: hidden;
    padding: var(--sc-space-6);
    border-radius: var(--sc-radius-lg);
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    box-shadow: var(--sc-shadow-md);
    color: var(--sc-text-invert);
}

.verdict__glow[b-zxxea55ywv] {
    position: absolute;
    top: -200px;
    right: -140px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(67, 97, 238, .40) 0%, rgba(114, 9, 183, .16) 48%, transparent 100%);
}

.verdict__product[b-zxxea55ywv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
}

.verdict__thumb[b-zxxea55ywv] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--sc-radius-md);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

    .verdict__thumb img[b-zxxea55ywv] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .verdict__thumb i[b-zxxea55ywv] {
        font-size: 24px;
        color: rgba(255, 255, 255, .45);
    }

.verdict__name[b-zxxea55ywv] {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.verdict__meta[b-zxxea55ywv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-4);
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
}

.verdict__text[b-zxxea55ywv] {
    position: relative;
    margin: var(--sc-space-5) 0 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    max-width: 760px;
}

.verdict__stats[b-zxxea55ywv] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-6);
}

.vstat[b-zxxea55ywv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--sc-space-4);
    border-radius: var(--sc-radius-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}

.vstat__label[b-zxxea55ywv] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.vstat__value[b-zxxea55ywv] {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.vstat__sub[b-zxxea55ywv] {
    font-size: 11px;
    color: rgba(255, 255, 255, .58);
}

/* Kafel pozycji sygnalizuje sytuacje kolorowa listwa i wartoscia, a nie
   przebarwionym tlem - tint na ciemnym granacie robil sie brudny. */
.vstat--rank[b-zxxea55ywv] {
    position: relative;
    padding-left: calc(var(--sc-space-4) + 4px);
    overflow: hidden;
}

    .vstat--rank[b-zxxea55ywv]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--tone, rgba(255, 255, 255, .3));
    }

    .vstat--rank .vstat__value[b-zxxea55ywv] {
        color: var(--tone, #fff);
    }

    .vstat--rank.is-good[b-zxxea55ywv] { --tone: #37d67f; }
    .vstat--rank.is-mid[b-zxxea55ywv] { --tone: #ffc44d; }
    .vstat--rank.is-bad[b-zxxea55ywv] { --tone: #ff5c6c; }
    .vstat--rank.is-neutral[b-zxxea55ywv] { --tone: rgba(255, 255, 255, .45); }

.verdict .is-good[b-zxxea55ywv] { color: #37d67f; }
.verdict .is-bad[b-zxxea55ywv] { color: #ff5c6c; }

/* ============================ DRABINA CENOWA ============================ */
.ladder[b-zxxea55ywv] {
    display: grid;
    gap: 2px;
}

.lrow[b-zxxea55ywv] {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 190px;
    align-items: center;
    gap: var(--sc-space-4);
    padding: 8px var(--sc-space-3);
    border-radius: var(--sc-radius-sm);
    transition: background var(--sc-transition);
}

    .lrow:hover[b-zxxea55ywv] {
        background: var(--sc-surface-muted);
    }

.lrow.is-you[b-zxxea55ywv] {
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    color: #fff;
}

    .lrow.is-you:hover[b-zxxea55ywv] {
        background: linear-gradient(135deg, #0f1123 0%, #2b3068 100%);
    }

.lrow.is-off[b-zxxea55ywv] {
    opacity: .55;
}

.lrow__shop[b-zxxea55ywv] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    min-width: 0;
}

.lrow__logo[b-zxxea55ywv] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.lrow__badge[b-zxxea55ywv] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
}

.lrow__names[b-zxxea55ywv] {
    min-width: 0;
}

.lrow__name[b-zxxea55ywv] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lrow__seller[b-zxxea55ywv] {
    display: block;
    font-size: 11px;
    color: var(--sc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lrow.is-you .lrow__seller[b-zxxea55ywv] {
    color: rgba(255, 255, 255, .6);
}

.lrow__bar[b-zxxea55ywv] {
    height: 10px;
    border-radius: 999px;
    background: var(--sc-surface-muted);
    overflow: hidden;
}

.lrow.is-you .lrow__bar[b-zxxea55ywv] {
    background: rgba(255, 255, 255, .12);
}

.lrow__fill[b-zxxea55ywv] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-light-blue), var(--sc-accent));
}

.lrow.is-you .lrow__fill[b-zxxea55ywv] {
    background: linear-gradient(90deg, var(--neon-cyan), var(--sc-accent));
}

.lrow__right[b-zxxea55ywv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sc-space-2);
}

.lrow__price[b-zxxea55ywv] {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

/* ============================ WYKRESY ============================ */
.charts[b-zxxea55ywv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-6);
}

.hint[b-zxxea55ywv] {
    margin: var(--sc-space-3) 0 0;
    font-size: 11px;
    color: var(--sc-text-muted);
}

/* ============================ KONKURENCI ============================ */
.src[b-zxxea55ywv] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.src__logo[b-zxxea55ywv] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
}

.src__name[b-zxxea55ywv] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-text);
}

.src__seller[b-zxxea55ywv] {
    display: block;
    font-size: 11px;
    color: var(--sc-text-muted);
}

.src__link[b-zxxea55ywv] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text-muted);
    transition: background var(--sc-transition), color var(--sc-transition);
}

    .src__link:hover[b-zxxea55ywv] {
        background: var(--sc-accent-100);
        color: var(--sc-accent);
    }

.muted[b-zxxea55ywv] {
    font-size: 12px;
    color: var(--sc-text-muted);
}

.mono[b-zxxea55ywv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================ ZMIANY CEN ============================ */
.changes[b-zxxea55ywv] {
    display: grid;
    gap: 2px;
}

.chg[b-zxxea55ywv] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sc-space-3);
    padding: 9px var(--sc-space-3);
    border-radius: var(--sc-radius-sm);
    font-size: 13px;
    transition: background var(--sc-transition);
}

    .chg:hover[b-zxxea55ywv] {
        background: var(--sc-surface-muted);
    }

.chg__when[b-zxxea55ywv] {
    font-size: 11px;
    color: var(--sc-text-muted);
    white-space: nowrap;
}

.chg__who[b-zxxea55ywv] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .chg__who em[b-zxxea55ywv] {
        font-style: normal;
        font-weight: 500;
        color: var(--sc-text-muted);
        margin-left: 6px;
    }

.chg__prices[b-zxxea55ywv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .chg__prices s[b-zxxea55ywv] {
        color: var(--sc-text-muted);
    }

    .chg__prices i[b-zxxea55ywv] {
        font-size: 12px;
        color: var(--sc-text-muted);
    }

/* ============================ REKOMENDACJA ============================ */
.reco[b-zxxea55ywv] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-4);
    padding: var(--sc-space-4);
    border-radius: var(--sc-radius-md);
    background: var(--sc-accent-100);
    border: 1px solid color-mix(in srgb, var(--sc-accent) 25%, #fff);
}

    .reco i[b-zxxea55ywv] {
        font-size: 20px;
        color: var(--sc-accent);
        flex-shrink: 0;
    }

    .reco strong[b-zxxea55ywv] {
        display: block;
        font-size: 13px;
        color: var(--sc-text);
    }

    .reco .muted[b-zxxea55ywv] {
        display: block;
        margin-top: 2px;
    }

/* ============================ PUSTY STAN ============================ */
.empty[b-zxxea55ywv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-3);
    min-height: 180px;
    padding: var(--sc-space-6);
    border: 1px dashed var(--sc-border);
    border-radius: var(--sc-radius-md);
    color: var(--sc-text-muted);
    font-size: 13px;
    text-align: center;
}

.empty--sm[b-zxxea55ywv] {
    min-height: 110px;
}

/* ============================ RESPONSYWNOSC ============================ */
@media (max-width: 1280px) {
    .verdict__stats[b-zxxea55ywv] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .charts[b-zxxea55ywv] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
    .lrow[b-zxxea55ywv] {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    .lrow__bar[b-zxxea55ywv] {
        grid-column: 1 / -1;
        order: 3;
    }
}

@media (max-width: 640px) {
    .verdict__stats[b-zxxea55ywv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .chg[b-zxxea55ywv] {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }
}
/* /Components/Pages/Product/View.razor.rz.scp.css */

/* === Box metryk (wyróżniony, ciemny) === */
.c-card--accent .product-metrics[b-zvhsf87avv] {
    color: var(--sc-text-invert);
}

    .c-card--accent .product-metrics h4[b-zvhsf87avv],
    .c-card--accent .product-metrics h3[b-zvhsf87avv],
    .c-card--accent .product-metrics p[b-zvhsf87avv] {
        color: var(--sc-text-invert);
        opacity: .95;
    }

/* Jeśli ProductStatsSummary renderuje "kafle" - lekka pomoc: */
.c-card--accent .c-metric[b-zvhsf87avv] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

.c-card--accent .c-metric__title[b-zvhsf87avv] {
    color: color-mix(in srgb, #fff 70%, var(--sc-text-invert));
}

.c-card--accent .c-metric__value[b-zvhsf87avv] {
    color: #fff;
}

/* === Sekcja "Informacje o produkcie" === */
/* Układ zdjęcia i danych */
.p-summary[b-zvhsf87avv] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sc-space-4);
    align-items: stretch;
}

@media (max-width: 680px) {
    .p-summary[b-zvhsf87avv] {
        grid-template-columns: 1fr;
    }
}

/* Foto */
.p-photo-wrap[b-zvhsf87avv] {
    background: var(--sc-surface-muted);
    border: 1px dashed var(--sc-border);
    border-radius: var(--sc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 200px;
    height: 200px;
}

.p-photo[b-zvhsf87avv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Teksty */
.p-info[b-zvhsf87avv] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.p-name[b-zvhsf87avv] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sc-text);
    line-height: 1.2;
}

.p-sub[b-zvhsf87avv] {
    color: var(--sc-text-muted);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Kody / pigułki */
.codes[b-zvhsf87avv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.pill[b-zvhsf87avv] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    background: var(--sc-surface-muted);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
}

.pill-k[b-zvhsf87avv] {
    color: var(--sc-text-muted);
    font-weight: 700;
}

/* Key-Value grid (parametry) */
.kv[b-zvhsf87avv] {
    display: grid;
    gap: var(--sc-space-3);
    margin-top: .375rem;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

@media (max-width: 1200px) {
    .kv[b-zvhsf87avv] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 680px) {
    .kv[b-zvhsf87avv] {
        grid-template-columns: 1fr;
    }
}

.kv-item[b-zvhsf87avv] {
    background: #fbfcfe;
    border: 1px dashed color-mix(in srgb, var(--sc-border) 70%, #fff);
    border-radius: var(--sc-radius-md);
    font-size: .875rem;
    font-weight: 600;
    padding: .65rem .75rem;
}

.kv-key[b-zvhsf87avv] {
    color: var(--sc-text-muted);
    font-size: .75rem;
}

.kv-val[b-zvhsf87avv] {
    font-weight: 800;
}

/* === Tabele ofert (RadzenDataGrid) - używamy .c-table === */
.c-table[b-zvhsf87avv]  thead th {
    background-color: var(--sc-surface-muted) !important;
    color: var(--sc-text-muted) !important;
    font-weight: 700;
    text-align: left;
    padding: .875rem .75rem;
    border-bottom: 1px solid var(--sc-border);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.c-table[b-zvhsf87avv]  tbody td {
    padding: .875rem .75rem;
    border-bottom: 1px solid var(--sc-border);
    background-color: var(--sc-surface);
    color: var(--sc-text);
    vertical-align: middle;
}

.c-table[b-zvhsf87avv]  tbody tr:hover td {
    background-color: var(--sc-surface-muted);
    transition: background-color 150ms ease-in-out;
}

/* Źródło */
.offer-source[b-zvhsf87avv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

    .offer-source img[b-zvhsf87avv] {
        width: 50px;
        height: 40px;
        object-fit: contain;
        display: block;
    }

.offer-source-name[b-zvhsf87avv] {
    font-size: .75rem;
    font-weight: 800;
    color: var(--sc-text);
    line-height: 1.2;
    word-break: break-word;
}

/* Oferta */
.offer-details[b-zvhsf87avv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.offer-name[b-zvhsf87avv] {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sc-text);
    line-height: 1.4;
    /* zawijaj długie nazwy zamiast ucinać */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Marketplace groups (parent Ceneo card → children seller offers) */
.mp-group[b-zvhsf87avv] {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--sc-surface);
}

.mp-group__header[b-zvhsf87avv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sc-surface-muted);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
}

.mp-group--open .mp-group__header[b-zvhsf87avv] {
    border-bottom-color: var(--sc-border);
}

.mp-group__header:hover[b-zvhsf87avv] {
    background: var(--sc-border);
}

.mp-group__logo[b-zvhsf87avv] {
    width: 40px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.mp-group__info[b-zvhsf87avv] {
    flex: 1;
    min-width: 0;
}

.mp-group__name[b-zvhsf87avv] {
    margin: 0;
    font-weight: 700;
    font-size: .9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-group__meta[b-zvhsf87avv] {
    font-size: .75rem;
    color: var(--sc-text-muted);
    margin-top: 2px;
}

.mp-group__price[b-zvhsf87avv] {
    text-align: right;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mp-group__toggle[b-zvhsf87avv] {
    font-size: 18px;
    color: var(--sc-text-muted);
    transition: transform .2s;
}

.mp-group--open .mp-group__toggle[b-zvhsf87avv] {
    transform: rotate(90deg);
}

.mp-group__children[b-zvhsf87avv] {
    padding: 0;
}

.mp-child[b-zvhsf87avv] {
    display: grid;
    grid-template-columns: 1fr 140px 120px 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--sc-border);
    font-size: .85rem;
}

.mp-child:first-child[b-zvhsf87avv] {
    border-top: none;
}

.mp-child__seller[b-zvhsf87avv] {
    font-weight: 600;
    color: var(--sc-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-child__name[b-zvhsf87avv] {
    font-size: .75rem;
    color: var(--sc-text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.offer-seller[b-zvhsf87avv] {
    margin: 0;
    font-size: .75rem;
    color: var(--sc-text-muted);
    line-height: 1.4;
}

/* Cena */
.offer-price[b-zvhsf87avv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-gross[b-zvhsf87avv] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sc-text);
}

.price-net[b-zvhsf87avv] {
    margin: 0;
    font-size: .75rem;
    color: var(--sc-text-muted);
}

/* Dostępność → korzystamy z c-badge w markupu, więc dodatkowe style niepotrzebne */

/* Paginator Radzena (lekki retusz) */
.c-table[b-zvhsf87avv]  .rz-paginator {
    background-color: var(--sc-surface) !important;
    border-top: 1px solid var(--sc-border) !important;
    padding: 12px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
/* /Components/Shared/Dialogs/BillingPaymentDialog.razor.rz.scp.css */
/* Potwierdzenie platnosci. Kwota siedzi na ciemnej karcie z tym samym gradientem,
   co portfel na stronie rozliczen - dialog ma czytac sie jako jego przedluzenie. */

.pay[b-5gow091eiu] {
    display: grid;
    gap: var(--sc-space-4);
    padding: var(--sc-space-2) 0 0;
}

.pay__summary[b-5gow091eiu] {
    position: relative;
    overflow: hidden;
    padding: var(--sc-space-6);
    border-radius: var(--sc-radius-lg);
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    color: var(--sc-text-invert);
}

.pay__glow[b-5gow091eiu] {
    position: absolute;
    top: -160px;
    right: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(247, 37, 134, .40) 0%, rgba(247, 37, 134, .12) 45%, transparent 100%);
}

.pay__what[b-5gow091eiu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding-bottom: var(--sc-space-4);
    margin-bottom: var(--sc-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}

    .pay__what i[b-5gow091eiu] {
        font-size: 22px;
        color: rgba(255, 255, 255, .5);
        flex-shrink: 0;
    }

.pay__label[b-5gow091eiu] {
    position: relative;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.pay__amount[b-5gow091eiu] {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.pay__value[b-5gow091eiu] {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}

.pay__cur[b-5gow091eiu] {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, .62);
}

.pay__breakdown[b-5gow091eiu] {
    position: relative;
    display: flex;
    gap: var(--sc-space-5);
    margin-top: var(--sc-space-4);
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
}

    .pay__breakdown b[b-5gow091eiu] {
        color: rgba(255, 255, 255, .88);
        font-weight: 700;
    }

/* --- Nota o bramce --- */
.pay__note[b-5gow091eiu] {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4);
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface-muted);
    border: 1px solid var(--sc-border);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sc-text-muted);
}

    .pay__note i[b-5gow091eiu] {
        font-size: 18px;
        color: var(--sc-success);
        flex-shrink: 0;
    }

    .pay__note b[b-5gow091eiu] {
        color: var(--sc-text);
    }

/* --- Akcje --- */
.pay__actions[b-5gow091eiu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--sc-space-3);
    margin-top: var(--sc-space-2);
}

    .pay__actions .c-btn[b-5gow091eiu] {
        justify-content: center;
        gap: 8px;
    }

    .pay__actions .c-btn i[b-5gow091eiu] {
        font-size: 16px;
    }
/* /Components/Shared/Dialogs/ImportProductsDialog.razor.rz.scp.css */
.csv-import-dialog[b-phrpczvt62] {
    max-width: 760px;
}

/* Progress w jednej linii z % */
.progress-row[b-phrpczvt62] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .progress-row .progress-val[b-phrpczvt62] {
        font-weight: 700;
        color: var(--sc-text-muted);
    }

/* KPI (Inserted/Updated/Skipped) */
.kpi-row[b-phrpczvt62] {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.kpi[b-phrpczvt62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-md);
    background: #fff;
    padding: .55rem .75rem;
}

.kpi__label[b-phrpczvt62] {
    font-size: .8rem;
    color: var(--sc-text-muted);
    font-weight: 700;
}

.kpi__value[b-phrpczvt62] {
    font-weight: 800;
}

.kpi--success[b-phrpczvt62] {
    background: color-mix(in srgb, var(--sc-success) 8%, #fff);
}

.kpi--info[b-phrpczvt62] {
    background: color-mix(in srgb, var(--sc-info) 8%, #fff);
}

.kpi--muted[b-phrpczvt62] {
    background: var(--sc-surface);
}

/* Szczegóły błędów/ostrzeżeń */
.c-details[b-phrpczvt62] {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface);
    padding: .5rem .75rem;
}

    .c-details > summary[b-phrpczvt62] {
        font-weight: 800;
        cursor: pointer;
    }

.c-details--danger[b-phrpczvt62] {
    border-color: color-mix(in srgb, var(--sc-danger) 35%, var(--sc-border));
    background: color-mix(in srgb, var(--sc-danger) 6%, #fff);
}

.c-details--warning[b-phrpczvt62] {
    border-color: color-mix(in srgb, var(--sc-warning) 35%, var(--sc-border));
    background: color-mix(in srgb, var(--sc-warning) 6%, #fff);
}

.c-details ul[b-phrpczvt62] {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
}

/* Akcje na dole */
.dialog-actions[b-phrpczvt62] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

/* Nota informacyjna dialogu importu - korzysta z systemowego .c-note. */
.import-note[b-phrpczvt62] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/Shared/Dialogs/PlanPickerDialog.razor.rz.scp.css */
/* Cennik planow w dialogu. Karty maja rowna wysokosc i te same sekcje w tej
   samej kolejnosci, wiec czytaja sie jak tabela porownawcza. */

.picker[b-47y7ev8576] {
    padding: var(--sc-space-2) 0 var(--sc-space-2);
}

.picker__lead[b-47y7ev8576] {
    margin: 0 0 var(--sc-space-5);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sc-text-muted);
}

.plans[b-47y7ev8576] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sc-space-4);
    align-items: stretch;
}

.plan[b-47y7ev8576] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    padding: var(--sc-space-5);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    transition: border-color var(--sc-transition), box-shadow var(--sc-transition), transform var(--sc-transition);
}

    .plan:hover[b-47y7ev8576] {
        border-color: var(--sc-accent);
        box-shadow: var(--sc-shadow-md);
        transform: translateY(-2px);
    }

.plan.is-current[b-47y7ev8576] {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-100);
}

.plan__flag[b-47y7ev8576] {
    position: absolute;
    top: -9px;
    left: var(--sc-space-5);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
}

.plan__name[b-47y7ev8576] {
    font-size: 15px;
    font-weight: 800;
    color: var(--sc-text);
}

/* Stala wysokosc bloku ceny trzyma reszte sekcji w jednej linii. */
.plan__price[b-47y7ev8576] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 44px;
}

.plan__amount[b-47y7ev8576] {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--sc-text);
}

.plan__cur[b-47y7ev8576] {
    font-size: 10px;
    line-height: 1.25;
    color: var(--sc-text-muted);
}

.plan__custom[b-47y7ev8576] {
    font-size: 15px;
    font-weight: 700;
    color: var(--sc-text-muted);
    align-self: center;
}

.plan__coins[b-47y7ev8576] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px var(--sc-space-3);
    border-radius: var(--sc-radius-sm);
    background: var(--sc-accent-100);
    font-size: 12px;
    color: var(--sc-accent-600);
    min-height: 40px;
}

    .plan__coins i[b-47y7ev8576] {
        font-size: 17px;
        flex-shrink: 0;
    }

    .plan__coins b[b-47y7ev8576] {
        font-weight: 800;
    }

.plan__specs[b-47y7ev8576],
.plan__features[b-47y7ev8576] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    font-size: 12px;
}

.plan__specs[b-47y7ev8576] {
    padding-bottom: var(--sc-space-3);
    border-bottom: 1px dashed var(--sc-border);
    color: var(--sc-text-muted);
}

    .plan__specs li[b-47y7ev8576] {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .plan__specs i[b-47y7ev8576] {
        font-size: 15px;
        color: var(--sc-text-muted);
        flex-shrink: 0;
    }

    .plan__specs b[b-47y7ev8576] {
        color: var(--sc-text);
        font-weight: 700;
    }

.plan__features li[b-47y7ev8576] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.plan__features i[b-47y7ev8576] {
    font-size: 15px;
    flex-shrink: 0;
}

.plan__features .is-on[b-47y7ev8576],
.plan__features li.is-on[b-47y7ev8576] {
    color: var(--sc-text);
}

    .plan__features li.is-on i[b-47y7ev8576] {
        color: var(--sc-success);
    }

.plan__features li.is-off[b-47y7ev8576] {
    color: color-mix(in srgb, var(--sc-text-muted) 65%, #fff);
}

    .plan__features li.is-off i[b-47y7ev8576] {
        color: var(--sc-border);
    }

.plan .c-btn[b-47y7ev8576] {
    margin-top: auto;
    justify-content: center;
    text-align: center;
}

@media (max-width: 1000px) {
    .plans[b-47y7ev8576] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .plans[b-47y7ev8576] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/Dialogs/TopupDialog.razor.rz.scp.css */
/* Pakiety doladowania. Kazdy niesie cene jednostkowa i oszczednosc, bo bez tego
   trzy rosnace liczby nie daja klientowi podstawy do wyboru. */

.picker[b-ywidg2frqw] {
    padding: var(--sc-space-2) 0 var(--sc-space-2);
}

.picker__lead[b-ywidg2frqw] {
    margin: 0 0 var(--sc-space-5);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sc-text-muted);
}

.topups[b-ywidg2frqw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sc-space-4);
    align-items: stretch;
}

.topup[b-ywidg2frqw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--sc-space-5);
    text-align: center;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    transition: border-color var(--sc-transition), box-shadow var(--sc-transition), transform var(--sc-transition);
}

    .topup:hover[b-ywidg2frqw] {
        border-color: var(--sc-accent);
        box-shadow: var(--sc-shadow-md);
        transform: translateY(-2px);
    }

.topup.is-best[b-ywidg2frqw] {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-100);
}

.topup__flag[b-ywidg2frqw] {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
}

.topup__label[b-ywidg2frqw] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}

.topup__coins[b-ywidg2frqw] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.topup__amount[b-ywidg2frqw] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--sc-text);
}

.topup__unit[b-ywidg2frqw] {
    font-size: 11px;
    color: var(--sc-text-muted);
}

.topup__price[b-ywidg2frqw] {
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-text);
}

.topup__meta[b-ywidg2frqw] {
    display: grid;
    gap: 3px;
    margin-bottom: var(--sc-space-3);
    font-size: 11px;
    color: var(--sc-text-muted);
}

.topup__save[b-ywidg2frqw] {
    display: inline-block;
    justify-self: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    color: var(--sc-success);
    background: color-mix(in srgb, var(--sc-success) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--sc-success) 30%, #fff);
}

.topup .c-btn[b-ywidg2frqw] {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .topups[b-ywidg2frqw] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/LocalTime.razor.rz.scp.css */
span[b-6jiqfzt738] {
    white-space: nowrap;
}
/* /Components/Shared/ProductStatsSummary.razor.rz.scp.css */
/* Podsumowanie rynkowe produktu na ciemnej karcie akcentowej - tak jak
   wygladalo to wczesniej, tylko z trescia, ktora faktycznie cos mowi. */
.product-summary[b-0u06v748su] {
    background: linear-gradient(135deg, #0f1123 0%, #222751 100%);
    border: none;
    box-shadow: var(--sc-shadow-md);
    overflow: hidden;
}

.product-summary[b-0u06v748su]  .c-card__header {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.product-summary[b-0u06v748su]  .c-card__header h4 {
    color: var(--sc-text-invert);
}

.product-summary[b-0u06v748su]  .c-hint {
    color: rgba(255, 255, 255, .62);
}

.summary-tiles[b-0u06v748su] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sc-space-3);
}

@media (max-width: 1280px) {
    .summary-tiles[b-0u06v748su] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .summary-tiles[b-0u06v748su] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.summary-tile[b-0u06v748su] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--sc-space-4);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--sc-radius-md);
}

.summary-tile__label[b-0u06v748su] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
}

.summary-tile__value[b-0u06v748su] {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.summary-tile__delta[b-0u06v748su] {
    font-size: 11px;
    color: rgba(255, 255, 255, .60);
}

.is-good[b-0u06v748su] { color: #37d67f; }
.is-bad[b-0u06v748su] { color: #ff5c6c; }

/* Pasek zakresu: min - mediana - max z markerem naszej ceny. */
.range-bar[b-0u06v748su] {
    margin-top: var(--sc-space-5);
}

.range-bar__track[b-0u06v748su] {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #37d67f 0%, #f5c451 55%, #ff5c6c 100%);
}

.range-bar__median[b-0u06v748su],
.range-bar__you[b-0u06v748su] {
    position: absolute;
}

.range-bar__median[b-0u06v748su] {
    top: -3px;
    width: 2px;
    height: 12px;
    transform: translateX(-1px);
    background: rgba(255, 255, 255, .55);
}

.range-bar__you[b-0u06v748su] {
    top: -6px;
    width: 4px;
    height: 18px;
    transform: translateX(-2px);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 17, 35, .85), 0 0 12px rgba(255, 255, 255, .45);
}

.range-bar__labels[b-0u06v748su] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
}
/* /Components/Shared/WalletLedger.razor.rz.scp.css */
/* Kwoty w ksiedze: przychody na zielono, rozchody na czerwono. */
.amount[b-s0kw7r59wk] {
    font-weight: 800;
}

    .amount.is-in[b-s0kw7r59wk] { color: var(--sc-success); }
    .amount.is-out[b-s0kw7r59wk] { color: var(--sc-danger); }

.muted[b-s0kw7r59wk] {
    font-size: 12px;
    color: var(--sc-text-muted);
}