/* =====================================================================
   startsrv-wspolne.css — wspólny arkusz dla OSOBNYCH aplikacji panelu
   (site/panel-user.html, site/panel-admin.html).

   KOPIA Z MONOLITU. Źródło prawdy: site/index-workstations-working.html,
   linie 8–603 (blok <style> katalogu). Monolit NIE JEST modyfikowany —
   decyzja dokumentacji wewnętrznej w dokumentacji wewnętrznej Każdy blok niżej ma podany
   numer linii źródłowej. Jeżeli monolit się zmieni, ten plik trzeba
   zsynchronizować ręcznie — to świadomy koszt separacji aplikacji.

   Reguła (dokumentacji wewnętrznej + dokumentacji wewnętrznej):
   zero nowych palet, zero nowych krojów, zero nowych promieni i cieni.
   Nowe klasy w tym pliku to WYŁĄCZNIE układ (flex/grid/odstępy) zbudowany
   na skopiowanych tokenach — oznaczone prefiksem `.pnl-`.

   Fonty: ten sam <link> do Google Fonts co monolit (linia 7):
   IBM Plex Mono 400;500 + Plus Jakarta Sans 300..800.
   ===================================================================== */

/* --- reset i tokeny — monolit linie 9–15 --- */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --ink:#111318; --white:#fff;
  --blue:#0048ff; --blue-d:#0038cc;
  --g04:#fafbfc; --g06:#f4f5f7; --g10:#eaecef; --g20:#d6d9de;
  --g50:#7a8089; --g70:#3f444d; --border:#e6e8ec;
}
/* --- tokeny warstwy premium — monolit linie 198–204 --- */
:root{
  --blue-soft:#edf4ff;
  --blue-line:rgba(0,72,255,.22);
  --shadow-soft:0 18px 48px rgba(17,19,24,.09);
  --shadow-blue:0 24px 60px rgba(0,72,255,.16);
  --radius:14px;
}

/* --- typografia bazowa — monolit linie 16–19 --- */
html{ -webkit-font-smoothing:antialiased; }
body{ font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); background:var(--white); line-height:1.5; }
.mono{ font-family:'IBM Plex Mono',monospace; }
a{ color:inherit; text-decoration:none; }

/* --- szkielet — monolit linie 20–21, 59 --- */
.layout{ display:flex; min-height:100vh; }
.sidebar{ width:270px; flex-shrink:0; border-right:1px solid var(--border); position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--white); }
.main{ flex:1; min-width:0; }

/* --- marka i meta sidebaru — monolit linie 22, 27–28 --- */
.brand{ padding:26px 24px 22px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.build-stamp{ font-size:10px; letter-spacing:.04em; color:var(--g50); opacity:.7; padding:0 0 10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.side-meta{ padding:0 24px 20px; font-size:9.5px; line-height:1.7; color:var(--g50); letter-spacing:.7px; text-transform:uppercase; }

/* --- drzewko nawigacji — monolit linie 29–57 --- */
.nav-cat{ border-top:1px solid var(--border); }
.nav-cat:last-child{ border-bottom:1px solid var(--border); }
.nav-crow{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; cursor:pointer; user-select:none; transition:background .1s; }
.nav-crow:hover{ background:var(--g04); }
.nav-cat.active > .nav-crow{ background:var(--g06); }
.nav-cat.active .nav-cname{ color:var(--blue); }
.nav-left{ display:flex; align-items:center; gap:13px; }
.nav-cname{ font-size:13.5px; font-weight:500; }
.chev{ font-size:9px; color:var(--g50); transition:transform .2s; }
.nav-cat.open .chev{ transform:rotate(180deg); }
.tree{ display:none; padding-bottom:8px; }
.nav-cat.open .tree{ display:block; }
.t-series-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 24px 8px 51px; cursor:pointer; font-size:12px; font-weight:600; color:var(--g70); user-select:none; }
.t-series-row:hover{ color:var(--ink); }
.t-series.open .t-series-row{ color:var(--blue); }
.t-chev{ font-size:8px; color:var(--g50); transition:transform .2s; }
.t-series.open > .t-series-row .t-chev{ transform:rotate(180deg); }
.t-models{ display:none; }
.t-series.open > .t-models{ display:block; }
.t-model{ display:block; padding:4px 24px 4px 80px; font-size:11.5px; color:var(--g50); cursor:pointer; }
.t-model:hover{ color:var(--blue); }
.t-model.active{ color:var(--ink); font-weight:700; }
.t-series-row.active{ color:var(--ink); }

/* --- nagłówek widoku — monolit linie 60–65 --- */
.hero{ background:var(--blue); color:var(--white); padding:70px 56px 44px; display:flex; align-items:flex-end; justify-content:center; min-height:340px; }
.hero-h1{ font-size:44px; font-weight:600; letter-spacing:-1.2px; text-align:center; }
.intro{ padding:40px 56px; border-bottom:1px solid var(--border); max-width:840px; }
.intro p{ font-size:20px; line-height:1.5; color:var(--g70); font-weight:400; }
.intro-btn{ display:inline-block; margin-top:24px; background:var(--blue); color:#fff; padding:13px 24px; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; cursor:pointer; font-weight:500; }
.intro-btn:hover{ background:var(--blue-d); }
/* monolit linie 208–209 */
.intro-btn{ transition:background .2s ease, transform .2s ease; }
.intro-btn:hover{ transform:translateY(-1px); }

/* --- sekcje treści — monolit linie 66–74 --- */
.series-block{ border-bottom:1px solid var(--border); }
.sb-head{ display:grid; grid-template-columns:280px 1fr; gap:40px; padding:44px 56px 26px; }
.sb-title{ font-size:26px; font-weight:600; letter-spacing:-.5px; }
.sb-desc{ font-size:14px; color:var(--g70); line-height:1.6; }
.fam-block{ padding:0 56px 40px; }
.fam-label{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--g50); font-weight:600; padding:20px 0 12px; }

/* --- siatka kafli — monolit linie 75–82 (wariant bazowy `.grid`
       auto-fill minmax(230px), zinwentaryzowany w dokumentacji wewnętrznej §0 jako
       komponent panelu; warstwa premium z linii 214–251 dotyczy kart
       produktowych ze zdjęciem i NIE jest tu potrzebna).
       `--radius` skopiowany z linii 204, żeby kafle panelu miały ten sam
       promień co kafle katalogu. --- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.card{ border:1px solid var(--border); background:var(--white); padding:20px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; position:relative; border-radius:var(--radius); transition:border-color .13s, box-shadow .13s, transform .13s; }
.card:hover{ border-color:var(--blue); box-shadow:0 6px 24px rgba(0,72,255,.1); transform:translateY(-2px); }
.card:hover .c-arrow{ color:var(--blue); opacity:1; transform:none; }
.c-eyebrow{ font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--g50); margin-bottom:9px; font-weight:600; }
.c-name{ font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:1.25; }
.c-foot{ font-size:11px; color:var(--g50); margin-top:auto; }
.c-arrow{ position:absolute; top:20px; right:20px; font-size:16px; color:var(--g20); opacity:0; transform:translate(-3px,3px); transition:.15s; }
/* monolit linia 320: stopka kafla w kolorze marki */
.c-foot{ margin-top:14px; color:var(--blue); font-weight:600; }
/* monolit linie 318–319 */
.card-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; min-height:21px; }
.card-tag{ border-radius:999px; background:#f0f2f5; color:#69707b; padding:4px 8px; font-size:8.5px; letter-spacing:.35px; font-weight:700; text-transform:uppercase; }
/* monolit linia 314 */
.card-badge{ background:var(--blue); color:#fff; padding:6px 9px; font-size:8.5px; letter-spacing:.7px; font-weight:700; text-transform:uppercase; box-shadow:0 8px 18px rgba(0,72,255,.22); }

/* --- okruszki — monolit linie 84–87 --- */
.crumb{ padding:22px 56px; font-size:12px; color:var(--g50); border-bottom:1px solid var(--border); }
.crumb a{ cursor:pointer; }
.crumb a:hover{ color:var(--blue); }
.crumb .sep{ margin:0 8px; color:var(--g20); }

/* --- widok 50/50 i nagłówki szczegółu — monolit linie 88–95 --- */
.p-layout{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.p-detail{ padding:44px 48px; }
.p-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--g50); font-weight:600; }
.p-name{ font-size:34px; font-weight:700; letter-spacing:-.8px; margin:8px 0 6px; }
.p-sub{ font-size:15px; color:var(--g70); line-height:1.6; margin-bottom:28px; }

/* --- pasek i przełącznik dwukaflowy — monolit linie 102–104, 139–145 --- */
.supply-switch{ margin:22px 0; }
.supply-switch[hidden]{ display:none; }
.supply-title{ font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--g50); margin-bottom:10px; font-weight:600; }
.supply-seg-row{ display:flex; gap:10px; margin-top:8px; }
.supply-seg{ flex:1; text-align:left; padding:12px 14px; border:2px solid #d0d0d0; background:var(--white); cursor:pointer; font:inherit; transition:border-color .15s, background .15s; }
.supply-seg strong{ display:block; font-size:13px; margin:6px 0 3px; }
.supply-seg .seg-desc{ display:block; font-size:11px; line-height:1.45; color:var(--g50); }
.supply-seg.active{ border-color:var(--blue); background:#edf5ff; }
/* monolit linia 122 */
.supply-seg.active{ box-shadow:0 12px 24px -10px rgba(15,98,254,.38), 0 4px 10px -4px rgba(15,98,254,.18); }
.seg-badge{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 8px; background:var(--blue); color:#fff; }
.seg-badge-new{ background:#525252; }

/* --- sekcje konfiguratora — monolit linie 116–125 --- */
.ws-config-section{ margin:26px 0; }
.ws-config-title{ font-size:16px; font-weight:700; margin-bottom:11px; }
.ws-config-options{ display:grid; grid-template-columns:1fr; gap:9px; }
.ws-config-option{ width:100%; text-align:left; padding:14px 15px; border:1px solid var(--border); background:var(--white); color:var(--ink); font-family:inherit; cursor:pointer; }
.ws-config-option:hover{ border-color:var(--blue); }
.ws-config-option.sel{ border-color:var(--blue); box-shadow:inset 3px 0 0 var(--blue), 0 12px 24px -10px rgba(15,98,254,.38), 0 4px 10px -4px rgba(15,98,254,.18); }
.ws-config-option strong{ display:block; font-size:14px; margin-bottom:7px; }
.ws-config-option .ws-price{ float:right; font-size:12px; font-weight:600; color:var(--blue); margin-left:12px; }
.ws-config-option .ws-price.base{ color:var(--g50); font-weight:400; }

/* --- blok ceny i CTA — monolit linie 126–138 --- */
.ws-total{ margin:18px 0 4px; padding:15px 16px; border:1px solid var(--blue); background:var(--white); }
.ws-total-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--g50); }
.ws-total-value{ font-size:26px; font-weight:700; line-height:1.25; }
.ws-total-note{ font-size:11px; color:var(--g50); margin-top:5px; }
/* K2b — sekcja „Wyślij zapytanie" (lead) w podsumowaniu konfiguratora.
   Addytywna, tokeny istniejące: separator nad sekcją oddziela ją od
   przycisku zamówienia. */
.ws-total-zapyt{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.ws-total-zapyt .ff{ margin-top:8px; }
.ws-net-tag{ font-size:13px; font-weight:600; color:var(--g50); margin-left:2px; }
.ws-total-brutto{ font-size:15px; font-weight:600; margin-top:3px; }
.ws-cta-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.ws-cta{ flex:1 1 auto; min-width:180px; padding:11px 16px; font-size:13px; font-weight:600; letter-spacing:.02em; border:1px solid var(--blue); background:var(--blue); color:#fff; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.ws-cta:hover{ background:#0043ce; border-color:#0043ce; }
.ws-cta.secondary{ background:var(--white); color:var(--blue); }
.ws-cta.secondary:hover{ background:#edf5ff; }
.ws-cta-note{ font-size:11px; color:var(--g50); margin-top:7px; line-height:1.5; }

/* --- pole z aurą AI (IBM Carbon for AI) — monolit linie 146–168 --- */
.leasing-box{
  margin:16px 0 4px; padding:14px 16px;
  border:1px solid #78a9ff;
  border-image:linear-gradient(to bottom, rgba(166,200,255,.64), #78a9ff) 1;
  background:linear-gradient(to top, rgba(69,137,255,.10) 0%, rgba(255,255,255,0) 50%), var(--white);
  box-shadow:0 4px 10px 2px rgba(15,98,254,.10);
}
.leasing-title{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--g50); margin-bottom:9px; }
.leasing-controls{ display:flex; gap:14px; flex-wrap:wrap; }
.leasing-controls label{ font-size:11px; color:var(--g50); display:flex; flex-direction:column; gap:4px; }
.leasing-controls select{ padding:7px 9px; border:1px solid #8d8d8d; background:var(--white); font-size:13px; }
.leasing-result{ margin-top:10px; }
.lease-rata{ font-size:19px; font-weight:700; display:block; }
.lease-detale{ font-size:11px; color:var(--g50); }
.leasing-note{ font-size:10.5px; color:var(--g50); margin-top:10px; line-height:1.5; }

/* --- podsumowanie parametrów — monolit linie 173–175 --- */
.p-summary{ background:var(--g06); padding:18px 20px; margin:24px 0; }
.sum-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.sum-row .l{ color:var(--g50); } .sum-row .v{ font-weight:600; }
/* wariant „structured list" — monolit linie 604–609 */
.p-summary.specs{ background:transparent; padding:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.p-summary.specs .sum-row{ display:grid; grid-template-columns:minmax(150px,30%) 1fr; gap:24px; align-items:baseline; padding:12px 18px; border-bottom:1px solid var(--border); font-size:13px; background:var(--white); }
.p-summary.specs .sum-row:nth-child(odd){ background:var(--g04); }
.p-summary.specs .sum-row:last-child{ border-bottom:0; }
.p-summary.specs .sum-row .l{ color:var(--g50); font-weight:400; text-align:left; line-height:1.45; }
.p-summary.specs .sum-row .v{ font-weight:500; text-align:left; line-height:1.5; overflow-wrap:anywhere; hyphens:auto; }

/* --- formularze — monolit linie 176–183 --- */
.p-form h3{ font-size:16px; font-weight:700; margin-bottom:14px; }
.ff{ margin-bottom:11px; }
.ff-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ff label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--g50); margin-bottom:4px; font-weight:600; }
.ff input, .ff textarea{ width:100%; padding:11px 13px; border:1px solid var(--border); font-family:inherit; font-size:14px; background:var(--g04); }
.ff input:focus, .ff textarea:focus{ outline:none; border-color:var(--blue); background:var(--white); }
.btn{ width:100%; padding:15px; background:var(--blue); color:#fff; border:none; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; cursor:pointer; margin-top:6px; }
.btn:hover{ background:var(--blue-d); }

/* --- checkbox Carbon — monolit linie 520–573 --- */
.filter-check{ position:relative; display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; column-gap:9px; min-height:32px; padding:4px 0; cursor:pointer; color:#161616; user-select:none; }
.filter-check input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.filter-box{ width:16px; height:16px; border:1px solid #8d8d8d; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background .11s,border-color .11s,box-shadow .11s; }
.filter-box::after{ content:''; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.filter-check:hover .filter-box{ border-color:#161616; }
.filter-check input:focus-visible + .filter-box{ outline:2px solid #0f62fe; outline-offset:2px; }
.filter-check input:checked + .filter-box{ background:#0f62fe; border-color:#0f62fe; }
.filter-check input:checked + .filter-box::after{ opacity:1; }
.filter-check input:disabled + .filter-box{ background:#f4f4f4; border-color:#c6c6c6; }
.filter-check input:disabled ~ .filter-text{ color:#a8a8a8; }
.filter-text{ font-size:12px; font-weight:400; color:#161616; white-space:normal; line-height:1.35; }

/* --- stan pusty — monolit linia 597 --- */
.no-products{ border:1px dashed rgba(0,72,255,.25); border-radius:14px; padding:24px; background:rgba(245,249,255,.65); color:var(--g70); font-size:13px; }

/* --- przycisk menu mobilnego — monolit linie 184, 188 --- */
.menu-btn{ display:none; }

/* --- punkty łamania — monolit linie 185–195, 360–365 --- */
@media(max-width:940px){
  .sidebar{ position:fixed; left:-270px; z-index:60; transition:left .2s; }
  .sidebar.open{ left:0; }
  .menu-btn{ display:block; position:fixed; top:14px; left:14px; z-index:50; background:var(--ink); color:#fff; border:none; padding:9px 13px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; }
  .hero{ padding:48px 22px; flex-direction:column; gap:6px; } .hero-h1{ font-size:30px; }
  .intro{ padding:28px 22px; } .intro p{ font-size:17px; }
  .sb-head{ grid-template-columns:1fr; gap:12px; padding:32px 22px 20px; } .fam-block{ padding:0 22px 30px; }
  .p-layout{ grid-template-columns:1fr; } .p-detail{ padding:32px 22px; }
  .crumb{ padding:18px 22px; }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* =====================================================================
   WARSTWA PANELU — IBM Carbon UI Shell, motyw WHITE.
   Dyrektywa właściciela 2026-08-08 (HUMAN_APPROVED): panele mają być
   „w pełnym stylu IBM Carbon" na wzór aplikacyjnych stron ibm.com.
   Prefiks nowych klas: `.pnl-`. Zero nowych krojów.

   TOKENY CARBON UŻYTE W PANELU
   Wszystkie poza dwoma są JUŻ W MONOLICIE (monolit ma warstwę Carbon
   w liniach ~450-600: filtry GPU i checkboxy). Numer linii = miejsce,
   z którego wartość jest przepisana:

     #e0e0e0  border-subtle-00   monolit 453, 466, 501, 589
     #161616  text-primary       monolit 457, 474, 509, 529, 559, 577, 596
     #f4f4f4  layer-hover        monolit 467, 567
     #0f62fe  interactive        monolit 489, 499, 560, 562, 563
     #0043ce  interactive-hover  monolit 135, 498
     #edf5ff  highlight          monolit 137, 143
     #c6c6c6  border-disabled    monolit 568
     #8d8d8d  border-strong      monolit 159, 543
     #525252  text-secondary     monolit 145, 482, 592

   DWIE WARTOŚCI SPOZA MONOLITU — podane wprost w dyrektywie właściciela
   2026-08-08 (Carbon white theme):
     #d0e2ff  Carbon Blue 20  — tło tagu „ŚRODOWISKO DEMO"
     #e8e8e8  Carbon Gray 20  — tło aktywnej pozycji side-navu
   ===================================================================== */

/* Jedno przemapowanie zamiast dziesiątek nadpisań: wewnątrz panelu
   `--blue` to Carbon interactive #0f62fe, a `--border` to Carbon
   #e0e0e0. Dzięki temu KAŻDY skopiowany komponent monolitu (.ws-cta,
   .ws-config-option, .card, .supply-seg, .crumb) sam wchodzi w motyw
   Carbon white — bez ruszania monolitu i bez duplikowania reguł.
   Odwracalne jedną linią. */
#pnl-shell, #pnl-logowanie{
  --blue:#0f62fe;
  --blue-d:#0043ce;
  --border:#e0e0e0;
  --ink:#161616;
  --carbon-hover:#f4f4f4;
  --carbon-selected:#e8e8e8;
  --carbon-tag-bg:#d0e2ff;
  --carbon-tag-txt:#0043ce;
  --carbon-topbar-h:48px;
  --carbon-sidenav-w:256px;
}

/* USTERKA F1+F2 RUNDY 1 — NIE KASOWAĆ TEJ REGUŁY.
   `[hidden]` to atrybut, którego `display:none` pochodzi z arkusza
   PRZEGLĄDARKI (UA). Każda reguła autorska ustawiająca `display` bije UA
   — a `.pnl-logowanie` ustawia `display:flex`. Efekt w prawdziwym
   Chromium: ekran logowania renderował się MIMO `hidden=true`, na 100vh,
   jako pierwszy element dokumentu. Stąd „login na #/konfigurator"
   (router i sesja były poprawne) oraz „brak belki 48px przy górze okna"
   (belka lądowała pod ekranem logowania). jsdom tego nie złapał, bo test
   sprawdzał WŁAŚCIWOŚĆ `.hidden`, a nie policzoną widoczność.
   Monolit ma tę samą łatkę punktowo w linii 103 (`.supply-switch[hidden]`)
   — tutaj robimy ją globalnie, bo panel chowa całe ekrany. */
[hidden]{ display:none !important; }

/* Panel = system Carbon, a ten nie ma zaokrągleń (dokumentacja/
   WZORZEC-KAFLI-IBM.md §1: „u IBM zero zaokrągleń"). Monolit zostaje
   ze swoim --radius:14px — zerujemy TYLKO wewnątrz panelu. */
#pnl-shell .card, #pnl-shell .no-products, #pnl-shell .pnl-ladowanie,
#pnl-shell .p-summary.specs, #pnl-logowanie .no-products{ border-radius:0; }

/* --- 1. BELKA GÓRNA — Carbon UI Shell header, 48 px ---------------- */
.pnl-topbar{
  position:sticky; top:0; z-index:8000;
  height:var(--carbon-topbar-h);
  display:flex; align-items:stretch;
  background:#fff; border-bottom:1px solid var(--border);
}
.pnl-marka{
  display:flex; align-items:center; padding:0 16px; flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px;
  letter-spacing:.12em; color:var(--ink); white-space:nowrap;
}
.pnl-marka:hover{ background:var(--carbon-hover); }
.pnl-marka:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

/* pozycje nawigacji globalnej — pełna wysokość belki, aktywna z kreską
   3 px u dołu (wzorzec ibm.com/consulting) */
.pnl-topnav{ display:flex; align-items:stretch; flex:1 1 auto; min-width:0; }
.pnl-topnav-poz{
  display:flex; align-items:center; padding:0 16px;
  font-size:14px; color:var(--ink); white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.pnl-topnav-poz:hover{ background:var(--carbon-hover); }
.pnl-topnav-poz:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.pnl-topnav-poz.aktywna{ border-bottom-color:var(--blue); font-weight:600; }

.pnl-topbar-prawa{ display:flex; align-items:stretch; gap:0; flex:0 0 auto; margin-left:auto; }

/* tag „ŚRODOWISKO DEMO" — Carbon Tag: wysokość 24 px, border-radius
   0.9375rem (pigułka). Carbon celowo robi WYJĄTEK od ostrych rogów
   akurat dla tagów, więc trzymamy się specyfikacji komponentu. */
.pnl-badge-demo{
  align-self:center; margin:0 8px;
  display:inline-flex; align-items:center; height:24px; padding:0 12px;
  border-radius:.9375rem; background:var(--carbon-tag-bg); color:var(--carbon-tag-txt);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.02em; white-space:nowrap;
}
.pnl-topbar-user{ display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--ink); }
.pnl-topbar-user .pnl-user-tekst{ display:flex; flex-direction:column; line-height:1.2; }
.pnl-user-firma{ font-size:12px; font-weight:600; }
.pnl-user-email{ font-size:11px; color:#525252; }

/* „Wyloguj" — Carbon ghost button */
.pnl-wyloguj{
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:transparent; border:0; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:var(--blue);
}
.pnl-wyloguj:hover{ background:#edf5ff; }
.pnl-wyloguj:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

.pnl-pikt{ display:block; flex:0 0 auto; }

/* --- 2. SIDE-NAV — Carbon side-nav na białym, 256 px --------------- */
#pnl-shell .sidebar{
  width:var(--carbon-sidenav-w);
  top:var(--carbon-topbar-h);
  height:calc(100vh - var(--carbon-topbar-h));
  border-right:1px solid var(--border);
  padding-top:8px;
}
#pnl-shell .side-meta{ padding:8px 16px 14px; }
.pnl-nav-poz{
  display:flex; align-items:center; gap:12px;
  min-height:40px; padding:8px 16px;
  border-left:3px solid transparent; color:var(--ink);
}
.pnl-nav-poz:hover{ background:var(--carbon-hover); }
.pnl-nav-poz:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.pnl-nav-poz.aktywna{ background:var(--carbon-selected); border-left-color:var(--blue); }
.pnl-nav-poz.aktywna .pnl-nav-etykieta{ font-weight:600; }
.pnl-nav-etykieta{ font-size:14px; letter-spacing:.01em; }
.pnl-nav-pikt{ display:flex; color:var(--ink); flex:0 0 18px; }
.pnl-nav-znacznik{
  margin-left:auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#525252; border:1px solid var(--border); padding:2px 6px;
}
/* pozycja niegotowa NIE ZNIKA — jest wyszarzona */
.pnl-nav-poz.niegotowa{ color:#8d8d8d; }
.pnl-nav-poz.niegotowa .pnl-nav-pikt{ color:#c6c6c6; }

/* --- 3. TREŚĆ EKRANU ---------------------------------------------- */
.pnl-ekran{ padding:32px 32px 64px; max-width:1584px; }
.pnl-naglowek{ margin-bottom:8px; }
.pnl-naglowek h1{ font-size:28px; font-weight:400; letter-spacing:0; line-height:1.25; }
.pnl-naglowek p{ font-size:14px; color:#525252; line-height:1.6; margin-top:10px; max-width:75ch; }
.pnl-sekcja{ margin-top:32px; }
.pnl-sekcja > h2{ font-size:18px; font-weight:600; margin-bottom:6px; }
.pnl-opis{ font-size:13px; color:#525252; line-height:1.55; margin-bottom:14px; max-width:80ch; }
.pnl-link{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
/* dopisek objaśniający przy kwocie — Carbon helper text */
.pnl-drobne{ color:#525252; font-weight:400; font-size:12px; }

/* widok 50/50 wewnątrz ekranu panelu — `.crumb` i `.p-detail` mają
   własne paddingi z monolitu; wewnątrz `.pnl-ekran` byłyby podwójne */
#pnl-shell .pnl-ekran .crumb{ padding:0 0 16px; border-bottom:1px solid var(--border); margin-bottom:24px; }
#pnl-shell .pnl-ekran .p-layout{ gap:0; }
#pnl-shell .pnl-ekran .p-detail{ padding:0 32px 0 0; }
.pnl-kolumna-prawa{ border-left:1px solid var(--border); }
#pnl-shell .pnl-ekran .p-detail.pnl-kolumna-prawa{ padding:0 0 0 32px; }
#pnl-shell .p-name{ font-size:28px; font-weight:400; letter-spacing:0; }
#pnl-shell .p-eyebrow{ font-size:11px; letter-spacing:.06em; color:#525252; }
#pnl-shell .p-sub{ font-size:14px; color:#525252; margin-bottom:24px; }

/* --- 4. KAFEL — wzorzec kart z ibm.com/us-en ----------------------- */
/* dokumentacji wewnętrznej: tytuł góra-lewo, środek celowo
   pusty, cienki piktogram dół-lewo, strzałka dół-prawo, ramka 1 px,
   róg OSTRY. Hover: ramka w kolorze marki. */
.card.pnl-kafel{
  min-height:224px; padding:16px; gap:0;
  border-radius:0; box-shadow:none; transform:none;
  background:#fff; transition:border-color .11s;
}
.card.pnl-kafel:hover{ border-color:var(--blue); box-shadow:none; transform:none; }
.pnl-kafel-chip{ margin-bottom:10px; }
.card.pnl-kafel .c-eyebrow{ font-size:11px; letter-spacing:.06em; color:#525252; margin-bottom:6px; }
.pnl-kafel-tytul{ font-size:16px; font-weight:400; line-height:1.3; letter-spacing:0; color:var(--ink); }
.pnl-kafel-opis{ font-size:13px; color:#525252; line-height:1.5; margin-top:8px; }
.card.pnl-kafel .card-tags{ margin-top:12px; }
.card.pnl-kafel .card-tag{ border-radius:0; background:var(--carbon-hover); color:#525252; }
.card.pnl-kafel .c-foot{ margin-top:10px; font-size:12px; color:#525252; font-weight:400; }
/* stopka kafla = piktogram + strzałka, „dużo światła" nad nią */
.pnl-kafel-stopka{ margin-top:auto; padding-top:28px; display:flex; align-items:flex-end; justify-content:space-between; }
.pnl-kafel-pikt{ display:flex; color:var(--ink); }
.card.pnl-kafel:hover .pnl-kafel-pikt{ color:var(--blue); }
.pnl-kafel-strzalka{ font-size:20px; line-height:1; color:var(--blue); }
/* zaślepka: akcja niedostępna NIE ZNIKA — jest wyszarzona (05 §1) */
.card.pnl-zaslepka{ cursor:default; background:var(--carbon-hover); color:#8d8d8d; }
.card.pnl-zaslepka:hover{ border-color:var(--border); }

/* --- 5. CHIPY STANU — bez nowej palety ------------- */
/* Stan koduje CIĘŻAR WYPEŁNIENIA, znaczenie niesie ZAWSZE tekst. */
.seg-badge.stan-running{ background:var(--blue); color:#fff; }
.seg-badge.stan-provisioning{ background:#fff; color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); font-family:'IBM Plex Mono',monospace; }
.seg-badge.stan-stopped{ background:#eaecef; color:#3f444d; }
.seg-badge.stan-maintenance{ background:#3f444d; color:#fff; }
.seg-badge.stan-error{ background:var(--ink); color:#fff; }

/* --- 6. PASEK NARZĘDZI I SZUKAJKA --------------------------------- */
.pnl-toolbar{ display:flex; align-items:flex-end; gap:16px; margin-top:24px; }
.pnl-toolbar-pikt{ display:flex; color:var(--ink); padding-bottom:8px; flex:0 0 auto; }
.pnl-szukaj{ flex:1 1 auto; max-width:520px; margin-bottom:0; }
.pnl-szukaj input{ height:48px; border-radius:0; border:0; border-bottom:1px solid #8d8d8d; background:var(--carbon-hover); }
.pnl-szukaj input:focus{ outline:2px solid var(--blue); outline-offset:-2px; background:var(--carbon-hover); }

/* --- 7. PRZYCISKI — Carbon, 48 px, bez zaokrągleń ------------------ */
#pnl-shell .ws-cta, #pnl-logowanie .btn{
  min-height:48px; border-radius:0; letter-spacing:.01em;
}
#pnl-shell .ws-cta{ display:inline-flex; align-items:center; justify-content:space-between; gap:24px; }
#pnl-shell .ws-cta[disabled]{ background:#c6c6c6; border-color:#c6c6c6; color:#fff; cursor:not-allowed; }
#pnl-shell .ws-cta.secondary[disabled]{ background:#fff; border-color:#c6c6c6; color:#c6c6c6; }
#pnl-logowanie .btn{ font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-transform:none; letter-spacing:.01em; text-align:left; }

/* --- 8. OŚ KROKÓW ZAMÓWIENIA (07 §8.1) ---------------------------- */
.pnl-os{ list-style:none; margin:0; padding:0; }
.pnl-os-krok{
  display:grid; grid-template-columns:170px 90px 1fr; gap:12px; align-items:baseline;
  padding:9px 0 9px 14px; border-left:2px solid var(--border); color:#8d8d8d;
}
.pnl-os-krok.zrobiony{ border-left-color:var(--blue); color:var(--ink); }
.pnl-os-stan{ font-size:12px; letter-spacing:.04em; }
.pnl-os-data{ font-size:12px; }
.pnl-os-opis{ font-size:13px; line-height:1.5; }

/* --- 9. STANY ŁADOWANIA I PUSTE ----------------------------------- */
/* geometria z `.no-products` (monolit 597), przemalowana na Carbon */
.pnl-ladowanie{
  border:1px dashed #c6c6c6; padding:24px; background:var(--carbon-hover); color:#525252;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
#pnl-shell .no-products{ border:1px dashed #c6c6c6; background:var(--carbon-hover); color:#525252; line-height:1.6; }
#pnl-shell .no-products b{ color:var(--ink); }

/* --- 10. EKRAN LOGOWANIA ------------------------------------------ */
/* Belka Carbon obowiązuje TAKŻE na logowaniu (uproszczona: logo + tag
   DEMO) — dyrektywa F2 rundy 2. Dlatego ekran logowania to kolumna:
   belka 48 px u góry + wycentrowana scena z kartą. */
.pnl-logowanie{ min-height:100vh; display:flex; flex-direction:column; background:var(--carbon-hover); }
.pnl-logowanie-scena{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:40px 22px; }
.pnl-topbar-prosta{ justify-content:flex-start; }
.pnl-logowanie-karta{ width:100%; max-width:480px; background:#fff; border:1px solid var(--border); padding:32px 32px 30px; }
.pnl-logowanie-pikt{ display:flex; color:var(--ink); margin-bottom:18px; }
.pnl-logowanie-h1{ font-size:26px; font-weight:400; margin:14px 0 8px; }
.pnl-logowanie-sub{ font-size:13px; color:#525252; line-height:1.55; margin-bottom:22px; }
#pnl-logowanie .ff input{ height:48px; border:0; border-bottom:1px solid #8d8d8d; background:var(--carbon-hover); border-radius:0; }
#pnl-logowanie .ff input:focus{ outline:2px solid var(--blue); outline-offset:-2px; background:var(--carbon-hover); }
/* komunikat błędu = Carbon inline notification (obrys + gruba lewa krawędź) */
.pnl-blad{ border:1px solid var(--ink); border-left:3px solid var(--ink); background:#fff; padding:12px 14px; font-size:13px; line-height:1.5; margin:16px 0 0; }
.pnl-demo-hint{ margin-top:22px; border-top:1px solid var(--border); padding-top:16px; font-size:12px; color:#525252; line-height:1.7; }
.pnl-demo-hint code{ font-family:'IBM Plex Mono',monospace; background:var(--carbon-hover); padding:2px 6px; color:var(--ink); }

/* --- 11. RESPONSYWNOŚĆ -------------------------------------------- */
.pnl-menu-btn{ display:none; }
@media(max-width:940px){
  .pnl-menu-btn{
    display:flex; align-items:center; justify-content:center; width:48px;
    background:transparent; border:0; border-right:1px solid var(--border);
    cursor:pointer; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:16px;
  }
  .pnl-menu-btn:hover{ background:var(--carbon-hover); }
  .pnl-topnav{ display:none; }
  .pnl-marka{ padding:0 12px; font-size:13px; }
  .pnl-badge-demo{ font-size:10px; padding:0 8px; }
  .pnl-topbar-user .pnl-user-tekst{ display:none; }
  .pnl-wyloguj{ padding:0 12px; font-size:0; gap:0; }
  #pnl-shell .sidebar{ position:fixed; left:calc(var(--carbon-sidenav-w) * -1); z-index:7000; }
  #pnl-shell .sidebar.open{ left:0; box-shadow:0 4px 16px rgba(0,0,0,.18); }
  .pnl-ekran{ padding:24px 16px 48px; }
  .pnl-naglowek h1{ font-size:22px; }
  #pnl-shell .pnl-ekran .p-detail{ padding:0 0 24px; }
  #pnl-shell .pnl-ekran .p-detail.pnl-kolumna-prawa{ padding:24px 0 0; }
  .pnl-kolumna-prawa{ border-left:0; border-top:1px solid var(--border); }
  .pnl-os-krok{ grid-template-columns:1fr; gap:2px; }
  .pnl-toolbar{ gap:10px; }
}

/* SRV-PANEL-SCROLL-001 — USTERKA ZASTANA (nie regresja, opisana w
   dokumentacji wewnętrznej 2026-08-29 pod SRV-ADM-SEO-001 i w krytyce
   SRV-LLM-KONFIG-001 N-4): dokument miał documentElement.scrollWidth
   > 390 na KAŻDEJ trasie obu paneli.

   Zmierzony na żywo (Chrome/CDP, viewport 390×844) łańcuch przyczynowy:
   `.pnl-badge-demo` niesie PEŁNE zdanie ("ŚRODOWISKO DEMO — dane
   przykładowe" / "PANEL ADMINISTRATORA — DEMO") z `white-space:nowrap`
   — tekst bez zawijania ma min-content równy pełnej szerokości, więc
   nie może się skurczyć. `.pnl-topbar-prawa` ma `flex:0 0 auto`
   (świadomie, żeby odznaka/użytkownik/wylogowanie trzymały się razem),
   więc CAŁY brakujący zapas silnik flexboksa ściąga z JEDYNEGO sąsiada
   bez `flex-shrink:0` i bez ochrony przed zawijaniem — `.pnl-menu-btn`
   (przycisk hamburgera). Efekt: przycisk kurczył się do ok. 10 px
   (cel dotyku dużo mniejszy niż zamierzone 48 px), a mimo to belka
   i tak przekraczała 390 px o odznakę.

   Naprawa: SKRÓCENIE etykiety odznaki na wąskich ekranach — ten sam
   wzorzec co już istniejący `.pnl-wyloguj{ font-size:0 }` wyżej w tym
   bloku (oryginalny tekst zerowany rozmiarem, zastępczy tekst przez
   `content` z WŁASNYM `font-size`). Odznaka „DEMO” zostaje czytelna,
   przycisk hamburgera odzyskuje pełne 48 px, `.pnl-topbar-prawa`
   NIE JEST ruszane (jego `flex:0 0 auto` zostaje — układ jest znów
   węższy niż 390 px, więc krzywa siły flexboksa już nikogo nie ściska).
   Próg 480 px (nie 940 px) — do 480 px starczało miejsca na pełne
   zdanie bez przekroczenia 390 px nie dotyczy, więc zawężamy interwencję
   do realnie wąskich ekranów, zero wpływu na tablet 768–940 px. */
@media(max-width:480px){
  .pnl-badge-demo{ font-size:0; }
  .pnl-badge-demo::before{ content:"DEMO"; font-size:10px; font-weight:600; letter-spacing:.02em; }
}

/* =====================================================================
   SRV-USER-DOST-001 — DOSTĘPNOŚĆ MASZYN (panel klienta, #/dostepnosc)
   Dopisek addytywny: WYŁĄCZNIE nowe klasy `.pnl-dost-*`, żadna istniejąca
   reguła ani token nie jest tu ruszany. Geometria i kolory z warstwy
   Carbon panelu (--ink #161616, --blue #0f62fe, --border #e0e0e0,
   --carbon-hover #f4f4f4, --carbon-tag-bg/--carbon-tag-txt).
   Kolor NIGDY nie jest jedynym nośnikiem znaczenia (05 §0) — odznaka
   zawsze niesie podpis tekstowy; barwy to tylko wzmocnienie.
   ===================================================================== */

/* Nota „statusy oświadczane ręcznie" — geometria Carbon inline
   notification, jak `.pnl-blad`, w wariancie informacyjnym. */
.pnl-dost-nota{
  border:1px solid var(--border); border-left:3px solid var(--blue);
  background:#edf5ff; padding:14px 16px; margin-top:20px;
  font-size:13px; line-height:1.6; color:#525252; max-width:80ch;
}
.pnl-dost-nota b{ color:var(--ink); }
.pnl-dost-znacznik{ margin-top:8px; font-size:11px; letter-spacing:.04em; color:#525252; }

/* Filtr statusu — Carbon content switcher: sklejone przyciski 40 px,
   róg ostry, wybrany na #161616 z białym tekstem. */
.pnl-dost-filtry{ display:flex; flex-wrap:wrap; margin-top:24px; }
.pnl-dost-filtr{
  min-height:40px; padding:0 16px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid #8d8d8d; border-right-width:0; background:var(--white);
  color:var(--ink); font:inherit; font-size:13px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.pnl-dost-filtr:last-child{ border-right-width:1px; }
.pnl-dost-filtr:hover{ background:var(--carbon-hover); }
.pnl-dost-filtr:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.pnl-dost-filtr.aktywny{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pnl-dost-filtr.aktywny + .pnl-dost-filtr{ border-left-color:var(--ink); }
.pnl-dost-licznik{ font-size:11px; color:#525252; }
.pnl-dost-filtr.aktywny .pnl-dost-licznik{ color:#fff; }

/* Lista: wiersz = nazwa + kod (mono) · odznaka statusu · akcja. */
.pnl-dost-grupa{ border-top:1px solid var(--border); }
.pnl-dost-wiersz{
  display:grid; grid-template-columns:minmax(0,1fr) 180px 130px; gap:16px;
  align-items:center; padding:12px 8px; border-bottom:1px solid var(--border);
}
.pnl-dost-wiersz:hover{ background:var(--carbon-hover); }
.pnl-dost-nazwa{ font-size:14px; line-height:1.35; color:var(--ink); min-width:0; }
.pnl-dost-kod{ display:block; margin-top:2px; font-size:11px; letter-spacing:.04em; color:#525252; }
.pnl-dost-akcja{ font-size:13px; justify-self:end; }
.pnl-dost-akcja:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* Odznaki statusu — na bazie `.seg-badge` (geometria bez zmian).
   Pary tło/tekst z palety Carbon, każda z kontrastem ≥ 4.5:1:
   zielona = tag green, szara = tag gray, niebieska = tag blue
   (te same tokeny co tag „ŚRODOWISKO DEMO"), żółta = support-warning. */
.pnl-dost-status{ justify-self:start; font-size:11px; letter-spacing:.02em; text-transform:none; padding:3px 10px; }
.pnl-dost-status--wolna{ background:#a7f0ba; color:#044317; }
.pnl-dost-status--zajeta{ background:#e0e0e0; color:#161616; }
.pnl-dost-status--wycena{ background:var(--carbon-tag-bg); color:var(--carbon-tag-txt); }
.pnl-dost-status--zapytanie{ background:#f1c21b; color:#161616; }

@media(max-width:940px){
  .pnl-dost-wiersz{ grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  .pnl-dost-akcja{ grid-column:2; }
  /* przy zawijaniu każdy przycisk musi domykać ramkę z prawej; ujemne
     marginesy sklejają krawędzie w jedną linię (Carbon content switcher) */
  .pnl-dost-filtr{ flex:1 1 auto; justify-content:center; border-right-width:1px; margin:-1px 0 0 -1px; }
}