/* Vouchery – panel w układzie Tabler 1.7.1 (web/layouts/tabler.html), na wzór Planera (planer/web/static/web/panel.css).
   Menu pionowe, treść na całą szerokość, menu składane do ikon. Kolory tylko ze zmiennych Tablera – działa w trybie
   jasnym i ciemnym. Krój Inter z plików lokalnych. */

:root { --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --vc-line: var(--tblr-border-color); --vc-surface: var(--tblr-bg-surface); --vc-muted: var(--tblr-secondary);
  --vc-soft: var(--tblr-bg-surface-secondary); --vc-strong: color-mix(in srgb, var(--tblr-body-color) 38%, var(--tblr-bg-surface)); }
body { font-feature-settings: "cv11", "ss01"; }
.num, .text-end, td { font-variant-numeric: tabular-nums; }

/* ---------- znak aplikacji ---------- */
.app-brand-mark { display: inline-flex; width: 2rem; height: 2rem; flex: none; align-items: center; justify-content: center;
  border-radius: .375rem; background: var(--tblr-primary); color: var(--tblr-primary-fg); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.app-brand-mark-lg { width: 3rem; height: 3rem; font-size: 1.6rem; border-radius: .5rem; }
.app-brand-name { font-size: 1.25rem; font-weight: 600; color: var(--tblr-body-color); }

/* ---------- menu boczne (jak Planer N28, wariant B): stałe, nagłówki sekcji, „Zwiń do ikon” ---------- */
[data-vc-theme] { display: flex; align-items: center; width: 100%; }
.vc-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.vc-brand:hover { text-decoration: none; }
.navbar-vertical {
  --tblr-navbar-active-bg: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
  --nav-active-bar: var(--tblr-primary);
  background: var(--tblr-bg-surface);
}
.navbar-vertical .navbar-nav .nav-link { position: relative; border-radius: var(--tblr-border-radius); }
/* Nagłówki sekcji (FIRMA, SYSTEM): szare napisy Tablera, nieklikalne; mniejszy odstęp niż domyślny */
.navbar-vertical .nav-section-title { --tblr-sidebar-section-title-margin-top: .9rem; padding-top: .2rem; padding-bottom: .2rem; }
/* Aktywna pozycja: tło w kolorze głównym (12%), pasek 3 px po lewej, pogrubienie, ikona w kolorze głównym */
.navbar-vertical .navbar-nav > .nav-item.active > .nav-link { background: var(--tblr-navbar-active-bg); color: var(--tblr-body-color); font-weight: 600; }
.navbar-vertical .navbar-nav > .nav-item.active > .nav-link::before {
  content: ""; position: absolute; inset-block: .4rem; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-active-bar);
}
.navbar-vertical .navbar-nav > .nav-item.active > .nav-link .nav-link-icon { color: var(--tblr-primary); }
.navbar-vertical .navbar-nav .nav-link .badge { position: static; transform: none; margin-inline-start: auto; }
/* „Zwiń do ikon” nad kontem, zawsze widoczny; ikona zależna od stanu bez czekania na skrypt */
.navbar-vertical .vc-fold { width: 100%; text-align: start; color: var(--tblr-secondary); }
.navbar-vertical .vc-fold:hover { color: var(--tblr-body-color); }
.navbar-vertical .vc-fold:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.navbar-vertical .vc-fold:focus:not(:focus-visible):not(:hover) { background-color: transparent; }
.navbar-vertical .vc-fold kbd { margin-inline-start: auto; font-size: .6875rem; padding: .05rem .3rem; background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary); border: 1px solid var(--tblr-border-color); box-shadow: none; }
.vc-fold .vc-fold-on, html[data-bs-sidebar=folded] .vc-fold .vc-fold-off { display: none; }
html[data-bs-sidebar=folded] .vc-fold .vc-fold-on { display: inline-block; }
/* Tryb ikon: stały wąski pasek (Tabler „folded”, bez wysuwania po najechaniu); liczniki w rogu ikony, nazwy w dymkach */
html[data-bs-sidebar=folded] .navbar-vertical .app-brand-name,
html[data-bs-sidebar=folded] .navbar-vertical .vc-org { display: none; }
html[data-bs-sidebar=folded] .navbar-vertical .nav-link { justify-content: center; }
html[data-bs-sidebar=folded] .navbar-vertical .nav-link .nav-link-icon { margin: 0; }
html[data-bs-sidebar=folded] .navbar-vertical .nav-link .badge {
  position: absolute; top: .15rem; inset-inline-end: .15rem; margin: 0; padding: .1rem .3rem; font-size: .625rem; line-height: 1; }
.vc-tip { position: fixed; z-index: 1100; pointer-events: none; padding: .3rem .55rem; border-radius: 4px; font-size: .75rem; font-weight: 500;
  line-height: 1.3; white-space: nowrap; background: var(--tblr-gray-800); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.vc-tip::before { content: ""; position: absolute; top: 50%; left: -4px; margin-top: -4px; border: 4px solid transparent; border-left: 0; border-right-color: var(--tblr-gray-800); }
[data-bs-theme=dark] .vc-tip { background: var(--tblr-gray-200); color: var(--tblr-gray-900); }
[data-bs-theme=dark] .vc-tip::before { border-right-color: var(--tblr-gray-200); }
.navbar-vertical .account-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.navbar-vertical .account-title small { color: var(--tblr-secondary); font-size: .75rem; }
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link { padding-top: .4rem; padding-bottom: .4rem; min-height: 0; }
}
/* przełącznik firm (PK01) */
.vc-org-btn { gap: .5rem; font-weight: 600; min-width: 0; }
.vc-org-btn .text-truncate { min-width: 0; }
.vc-org .dropdown-menu form { margin: 0; }
.vc-account-btn { padding: 0; border: 0; background: none; border-radius: 50%; }
.vc-account-btn:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.dropdown-menu form { margin: 0; }
#tresc:focus { outline: none; }

/* ---------- telefon: dolny pasek i arkusz „Więcej” ---------- */
.app-mobile-bar { display: none; }
.vc-mobile-top { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--vc-line); }
.app-navigation-sheet .offcanvas-header { gap: 8px; border-bottom: 1px solid var(--vc-line); padding: 12px 16px; }
.app-navigation-sheet .offcanvas-body { padding: 12px 16px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
.app-navigation-handle { flex: none; width: 36px; height: 4px; border-radius: 3px; background: var(--vc-strong); margin: 10px auto 0; }
.app-navigation-group { margin: 18px 10px 6px; font-size: 12px; font-weight: 600; color: var(--vc-muted); }
.app-navigation-choice { display: flex; align-items: center; gap: 12px; min-height: 50px; width: 100%; padding: 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tblr-body-color); text-align: left; font-size: 14px; text-decoration: none; }
.app-navigation-choice > span:not(.app-nav-icon):not(.badge) { flex: 1; }
.app-navigation-choice.active { background: var(--tblr-primary-lt); color: var(--tblr-primary); font-weight: 600; }
.app-nav-icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: var(--vc-muted); }
.app-navigation-choice.active .app-nav-icon { color: inherit; }
#app-navigation-sheet { height: auto; max-height: min(85dvh, 760px); border-radius: 18px 18px 0 0; }
@media (max-width: 991.98px) {
  .page > .navbar-vertical { display: none !important; }
  .page-wrapper { padding-bottom: 76px; }
  .app-mobile-bar { position: fixed; inset: auto 0 0; z-index: 1035; display: flex; gap: 4px; padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    background: var(--tblr-bg-surface); border-top: 1px solid var(--vc-line); box-shadow: 0 -2px 12px color-mix(in srgb, var(--tblr-body-color) 6%, transparent); }
  .app-mobile-link { position: relative; display: flex; flex: 1; min-width: 0; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; border-radius: 8px; background: transparent; color: var(--vc-muted); font-size: 12px; line-height: 1.25; padding: 5px 2px; text-align: center; text-decoration: none; }
  .app-mobile-link .app-nav-icon { font-size: 24px; width: 24px; height: 24px; color: inherit; }
  .app-mobile-link.active { color: var(--tblr-primary); background: var(--tblr-primary-lt); font-weight: 600; }
  .app-mobile-link > span:not(.app-nav-icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: -.01em; }
}
.app-mobile-link:focus-visible, .app-navigation-choice:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -3px; }

/* ---------- nagłówek strony (jak w Planerze, N26 tam) ---------- */
.vc-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vc-head { margin-top: 1.25rem; min-height: 2.5rem; }
.vc-head .page-title { font-size: 1.375rem; line-height: 1.3; }
.vc-head .page-subtitle { font-size: .875rem; color: var(--tblr-secondary); margin-top: .1rem; }
.vc-head .page-subtitle:empty { display: none; }
.vc-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title act" "sub act"; column-gap: 1rem; align-items: center; }
.vc-head-grid .page-title { grid-area: title; }
.vc-head-grid .page-subtitle { grid-area: sub; }
.vc-head-acts { grid-area: act; }
.vc-head-acts .btn-list { flex-wrap: nowrap; justify-content: flex-end; }
.vc-head-acts .btn-list:not(:has(> *)) { display: none; }
.vc-head-acts .btn-list > form { display: inline-flex; margin: 0; }
.vc-head-more { display: none; }
.vc-head .page-tabs { margin-top: .9rem; }
.vc-main > .page-body { margin-top: 1rem; }
@media (max-width: 575.98px) {
  .vc-head { margin-top: .75rem; }
  .vc-head .page-title { font-size: 1.25rem; }
  .vc-head-grid { grid-template-areas: "title act" "sub sub"; column-gap: .5rem; }
  .vc-head-acts .btn-list > :not([data-main]):not(.vc-head-more) { display: none !important; }
  .vc-head-more { display: inline-flex; }
}
.vc-messages { max-width: 860px; }
.vc-messages .alert-dismissible { display: flex; align-items: center; gap: .75rem; padding-inline-end: .75rem; }
.vc-messages .alert-dismissible .btn-close { position: static; margin-inline-start: auto; padding: .5rem; flex: none; }

/* ---------- liczby strony (kafelki) ---------- */
.vc-stats { display: flex; flex-wrap: wrap; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--tblr-border-radius-lg); margin-bottom: 1rem; overflow: hidden; }
.vc-stat { flex: 1 1 160px; padding: .85rem 1.1rem; border-right: 1px solid var(--vc-line); }
.vc-stat:last-child { border-right: 0; }
.vc-stat b { display: block; font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--tblr-body-color); font-variant-numeric: tabular-nums; }
.vc-stat span { display: block; color: var(--vc-muted); font-size: .8125rem; margin-top: .1rem; }
.vc-stat.warn b { color: var(--tblr-red); }

/* formularze na wąskiej kolumnie */
.vc-form { max-width: 640px; }
/* dostęp obsługi: QR, link i PIN */
.vc-qr { width: 200px; height: 200px; padding: .5rem; background: #fff; border-radius: var(--tblr-border-radius); border: 1px solid var(--vc-line); }
.vc-qr svg { width: 100%; height: 100%; display: block; }
.vc-pin { font-size: 2rem; font-weight: 700; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.vc-link { word-break: break-all; }
.vc-access-info { flex: 1 1 16rem; min-width: 0; }
@media print {
  .vc-print-card { border: 1px solid #000; padding: 1rem; }
}

/* ---------- strona logowania i wejścia obsługi (jak logowanie panelu w Planerze) ---------- */
.lp { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; color: var(--tblr-body-color);
  background:
    radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--tblr-primary) 13%, transparent), transparent 70%),
    radial-gradient(760px 480px at 105% 108%, color-mix(in srgb, var(--tblr-primary) 9%, transparent), transparent 70%),
    var(--tblr-bg-surface-secondary); }
.lp-tools { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: flex; gap: .4rem; }
.lp-tools .btn { --tblr-btn-padding-x: .55rem; color: var(--tblr-secondary); background: var(--tblr-bg-surface); }
.lp-tools .lp-ico-light, [data-bs-theme=dark] .lp-tools .lp-ico-dark { display: none; }
[data-bs-theme=dark] .lp-tools .lp-ico-light { display: inline-block; }
.lp-tools form { margin: 0; }
.lp-main { flex: 1; display: flex; }
.lp-col { width: 100%; max-width: 440px; margin: auto; padding: 2.5rem 16px; }
.lp-head { text-align: center; margin-bottom: 1.5rem; }
.lp-head h1 { font-size: 1.5rem; font-weight: 700; margin: .75rem 0 .15rem; }
.lp-head p { color: var(--tblr-secondary); margin: 0; }
.lp-card { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .07); padding: 1.75rem 1.75rem 1.5rem; }
[data-bs-theme=dark] .lp-card { box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.lp-card h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; }
.lp-lead { color: var(--tblr-secondary); margin: 0 0 1.25rem; font-size: .875rem; }
.lp-card .form-label { font-weight: 600; }
.lp-card .btn-primary { min-height: 48px; }
.lp-code { text-align: center; font-size: 1.6rem !important; font-weight: 600; letter-spacing: .5em; padding-left: 1.5em !important; font-variant-numeric: tabular-nums; }
.lp-code.is-invalid { background-image: none !important; padding-inline-end: 1.5rem !important; }
.lp-code::placeholder { letter-spacing: .5em; color: var(--tblr-border-color); }
.lp-alert { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; padding: .65rem .8rem; border-radius: 8px; font-size: .875rem;
  background: color-mix(in srgb, var(--tblr-red) 10%, var(--tblr-bg-surface)); color: var(--tblr-body-color); border: 1px solid color-mix(in srgb, var(--tblr-red) 30%, transparent); }
.lp-alert i { color: var(--tblr-red); font-size: 1rem; line-height: 1.3; }
.lp-alert.info { background: color-mix(in srgb, var(--tblr-primary) 8%, var(--tblr-bg-surface)); border-color: color-mix(in srgb, var(--tblr-primary) 25%, transparent); }
.lp-alert.info i { color: var(--tblr-primary); }
.lp-foot { margin: 1.25rem 0 0; text-align: center; font-size: .8125rem; color: var(--tblr-secondary); }
.lp-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 575.98px) {
  .lp-col { padding: 3.25rem 16px 1.5rem; }
  .lp-card { padding: 1.35rem 1.15rem 1.25rem; }
}

/* ---------- ekran obsługi (dostęp współdzielony) ---------- */
.vc-staff { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--tblr-bg-surface-secondary); }
.vc-staff-top { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--vc-line); }
.vc-staff-top .who { min-width: 0; line-height: 1.2; }
.vc-staff-top .who small { display: block; color: var(--vc-muted); }
.vc-staff-body { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 1.25rem 16px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Kody zapasowe logowania dwuetapowego (N20, N23) */
.vc-backup-codes { columns: 2; column-gap: 1.5rem; padding-left: 1.6rem; margin: 0 0 1rem; font-family: var(--tblr-font-monospace); font-size: 1rem; }
.vc-backup-codes li { padding: .15rem 0; }
.lp-card .vc-qr { width: 220px; height: 220px; }
.lp-card details summary { cursor: pointer; color: var(--tblr-secondary); }
.vc-otp { text-align: center; font-size: 1.35rem !important; font-weight: 600; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.vc-login-code { font-family: var(--tblr-font-monospace); font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- marka panelu firmy (N16): firma w menu, logo na telefonie, kolor z /motyw/<rrggbb>.css ---------- */
.vc-org { margin: .35rem .75rem .15rem; min-width: 0; }
.vc-orgbox { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; padding: .45rem .6rem; text-align: start;
  border: 1px solid var(--tblr-border-color); border-radius: 8px; background: var(--tblr-bg-surface); color: var(--tblr-body-color); }
button.vc-orgbox:hover { background: var(--tblr-bg-surface-secondary); }
button.vc-orgbox:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.vc-orgbox-logo { max-height: 32px; max-width: 64px; object-fit: contain; flex: none; }
.vc-orgbox-ph { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 6px; font-weight: 700; font-size: .75rem;
  background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); border: 1px solid var(--tblr-border-color); }
.vc-orgbox-nm { font-weight: 600; line-height: 1.2; min-width: 0; font-size: .875rem; }
.vc-orgbox-nm small { display: block; color: var(--tblr-secondary); font-weight: 400; font-size: .75rem; }
.vc-orgbox-sel { color: var(--tblr-secondary); flex: none; }
.vc-org .dropdown-menu { min-width: 100%; }
html[data-bs-sidebar=folded] .navbar-vertical .vc-org { display: block; margin-inline: .35rem; }
html[data-bs-sidebar=folded] .vc-orgbox { justify-content: center; padding: .3rem; }
html[data-bs-sidebar=folded] .vc-orgbox-nm, html[data-bs-sidebar=folded] .vc-orgbox-sel { display: none; }
html[data-bs-sidebar=folded] .vc-orgbox-logo { max-width: 40px; }
@media (max-width: 991.98px) { .vc-org { display: none; } }
.vc-mtop { min-width: 0; }
.vc-mlogo { max-height: 32px; max-width: 64px; object-fit: contain; }
.vc-mname { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vc-mname b { font-size: 1rem; font-weight: 600; color: var(--tblr-body-color); }
.vc-mname small { font-size: .7rem; color: var(--tblr-secondary); font-weight: 400; display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.app-brand-mark.vc-vmini { width: .95rem; height: .95rem; font-size: .6rem; border-radius: 3px; }
.lp-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.vc-staff-top .vc-staff-logo { max-height: 32px; max-width: 72px; object-fit: contain; }
/* Odcień do tekstu, ikon i linków (--vc-accent-text) – czytelny także dla jasnego koloru marki (UI-THEME-006).
   Zmienne ustawia plik /motyw/<rrggbb>.css albo podgląd na żywo w Ustawieniach → Wygląd (web/static/web/brand.js). */
html[data-vc-brand] .text-primary { color: var(--vc-accent-text) !important; }
html[data-vc-brand] .bg-primary-lt { color: var(--vc-accent-text) !important; }
html[data-vc-brand] .navbar-vertical .navbar-nav > .nav-item.active > .nav-link .nav-link-icon { color: var(--vc-accent-text); }
html[data-vc-brand] .app-mobile-link.active, html[data-vc-brand] .app-navigation-choice.active { color: var(--vc-accent-text) !important; }
html[data-vc-brand] .btn-link { --tblr-btn-color: var(--vc-accent-text); --tblr-btn-hover-color: var(--vc-accent-text); color: var(--vc-accent-text); }
html[data-vc-brand] .dv-btn > .ti { color: var(--vc-accent-text); }
html[data-vc-brand] .form-check-input:focus, html[data-vc-brand] .form-control:focus, html[data-vc-brand] .form-select:focus { border-color: var(--vc-accent-text); }

/* ---------- Ustawienia → Wygląd i Domyślne wystawienia (N16, prototyp rejestr/proto/marka) ---------- */
.vc-field-narrow .form-select, .vc-field-narrow .form-control { max-width: 22rem; }
.vc-logo-box { display: grid; place-items: center; width: 220px; max-width: 100%; height: 96px; border-radius: 10px; border: 1px dashed var(--vc-strong);
  background: repeating-conic-gradient(var(--vc-soft) 0 25%, var(--vc-surface) 0 50%) 0 0 / 16px 16px; }
.vc-logo-box img { max-width: 200px; max-height: 80px; object-fit: contain; }
.vc-sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.vc-sw { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; margin: 0; border: 2px solid var(--vc-line); border-radius: 10px;
  background: var(--vc-surface); cursor: pointer; position: relative; }
.vc-sw input { position: absolute; opacity: 0; pointer-events: none; }
.vc-sw:has(input:checked) { border-color: var(--tblr-body-color); }
.vc-sw:has(input:focus-visible) { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.vc-sw .chip { width: 28px; height: 28px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.vc-sw small { display: block; color: var(--vc-muted); font-family: ui-monospace, Consolas, monospace; font-size: .7rem; }
.chip-default { background: #066fd1; } .chip-kobalt { background: #325ce3; } .chip-zolty { background: #f2d500; }
.chip-lesny { background: #286656; } .chip-lawendowy { background: #7654a3; }
.vc-hex { max-width: 9rem; font-family: ui-monospace, Consolas, monospace; }
.vc-pv { border: 1px solid var(--vc-line); border-radius: 10px; padding: .85rem; background: var(--vc-soft); }
.vc-pv-bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; background: var(--vc-surface); border-radius: 8px; border: 1px solid var(--vc-line); margin-bottom: .6rem; min-width: 0; }
.vc-pv-bar img { max-height: 24px; max-width: 56px; object-fit: contain; }
.vc-pv-bar .app-brand-mark { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
.vc-pv-nav { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: 6px; position: relative; font-weight: 600; font-size: .875rem;
  background: color-mix(in srgb, var(--tblr-primary) 12%, transparent); }
.vc-pv-nav::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--tblr-primary); }
.vc-pv-nav .ti { color: var(--vc-accent-text, var(--tblr-primary)); }
.vc-pv .btn { pointer-events: none; }
.vc-where { display: grid; gap: .75rem; }
.vc-where-row { display: flex; gap: .75rem; align-items: flex-start; }
.vc-thumb { width: 92px; height: 64px; flex: none; border-radius: 8px; border: 1px solid var(--vc-line); overflow: hidden; position: relative; background: var(--tblr-bg-surface-secondary); }
.vc-thumb .side { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: var(--tblr-bg-surface); border-right: 1px solid var(--vc-line); }
.vc-thumb .side i { position: absolute; left: 4px; right: 4px; height: 5px; border-radius: 2px; background: var(--vc-line); top: 20px; }
.vc-thumb .side i:nth-of-type(2) { top: 30px; } .vc-thumb .side i:nth-of-type(3) { top: 40px; }
.vc-thumb .side i.on { background: var(--tblr-primary); }
.vc-thumb .lg { position: absolute; left: 4px; top: 4px; width: 18px; height: 9px; object-fit: contain; }
.vc-thumb .btnx { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 11px; border-radius: 3px; background: var(--tblr-primary); }
.vc-thumb .lp-x { position: absolute; inset: 0; background: radial-gradient(60px 40px at 10% 0, color-mix(in srgb, var(--tblr-primary) 30%, transparent), transparent), var(--tblr-bg-surface-secondary); }
.vc-thumb .card-x { position: absolute; left: 22px; right: 22px; top: 24px; bottom: 6px; background: var(--tblr-bg-surface); border-radius: 4px; border: 1px solid var(--vc-line); }
.vc-thumb .card-x-low { top: 22px; }
.vc-thumb .card-x b { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 7px; border-radius: 2px; background: var(--tblr-primary); }
.vc-thumb .card-x b.muted { background: var(--vc-line); }
.vc-thumb .top-x { position: absolute; left: 0; right: 0; top: 5px; display: flex; justify-content: center; }
.vc-thumb .top-x img { height: 14px; max-width: 44px; object-fit: contain; }
.vc-thumb .top-x span { width: 14px; height: 14px; border-radius: 3px; background: var(--tblr-primary); }
.vc-yn { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; margin-right: .5rem; }
.vc-yn .ti { font-size: .9rem; }
.vc-yn.no { color: var(--vc-muted); }
/* domyślny kolor Vouchery w kontenerze (miniatury stron bez koloru firmy) */
.vc-neutral { --tblr-primary: #066fd1; --tblr-primary-rgb: 6, 111, 209; --tblr-primary-fg: #fff; --vc-accent-text: #066fd1; }

/* ---------- Wystaw voucher (N16): warianty ważności, koniec okresu, ustawienia domyślne ---------- */
.vd-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.vd-pills label { margin: 0; position: relative; }
.vd-pills input { position: absolute; opacity: 0; pointer-events: none; }
.vd-pills span { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--vc-line); border-radius: 2rem; cursor: pointer; font-weight: 500; background: var(--vc-surface); }
.vd-pills input:checked + span { background: var(--tblr-primary); border-color: var(--tblr-primary); color: var(--tblr-primary-fg); font-weight: 600; }
.vd-pills input:focus-visible + span { outline: 2px solid var(--vc-accent-text, var(--tblr-primary)); outline-offset: 2px; }
.vd-end { margin-top: .5rem; padding: .5rem .75rem; border-radius: 8px; background: var(--vc-soft); font-size: .875rem; }
.vd-end[hidden] { display: none; }
.df-strip { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-size: .8125rem; color: var(--vc-muted); margin-bottom: .75rem; }
.vc-date { max-width: 14rem; }