/* ============================================================
   MAKIETA PANELU KLIENTA na stronie głównej  (.pmk)
   ------------------------------------------------------------
   Odwzorowanie prawdziwego widoku panelu (css/panel.css, design system v8)
   w sekcji marketingowej. Klient ma zobaczyć, co dokładnie kupuje, zanim
   założy konto — dlatego kolory, krój, odstępy i OSTRE narożniki są przepisane
   1:1 z panelu, a nie „zainspirowane".

   DLACZEGO OSOBNY PLIK, A NIE @import panel.css:
   panel.css ma ~164 kB i deklaruje tokeny na :root — zaciągnięcie go tutaj
   przemalowałoby całą stronę firmową. Dlatego wszystkie tokeny siedzą na .pmk
   (kaskada kończy się na makiecie) i są ZDUPLIKOWANE świadomie. Zmieniasz
   paletę panelu → popraw też ten blok, inaczej makieta zacznie kłamać.

   NAZEWNICTWO: prefiks .pmk- na KAŻDEJ klasie. Strona firmowa to eksport
   Webflow z bardzo ogólnymi nazwami (.card, .btn, .nav) — bez prefiksu
   makieta i szablon zjadłyby się nawzajem.
   ============================================================ */

.pmk{
  /* ---- tokeny panelu: ciemny motyw (domyślny, jak w panelu) ---- */
  --pmk-bg:#0c0b0c;
  --pmk-surface:#1a181b;        /* element W karcie (kafelek, pole, chip) */
  --pmk-surface-2:#151416;      /* KARTA na tle strony */
  --pmk-border:rgba(255,255,255,.075);
  --pmk-border-2:rgba(255,255,255,.14);
  --pmk-txt:#f1f0f4;
  --pmk-muted:#a19da8;
  --pmk-faint:#8a868e;
  --pmk-accent:#ff005c;
  --pmk-accent-2:#ff3d78;
  --pmk-accent-btn:#eb0055;
  --pmk-accent-soft:rgba(255,0,92,.13);
  --pmk-ok:#2bd18a;
  --pmk-ok-bg:rgba(43,209,138,.14);
  --pmk-warn:#e0a33a;
  --pmk-bad:#ff5a72;
  --pmk-glow:0 4px 20px rgba(255,0,92,.26);
  --pmk-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -26px rgba(0,0,0,.9);
  --pmk-inset:inset 0 1px 0 rgba(255,255,255,.035);
  --pmk-chrome:#0f0e10;         /* pasek „przeglądarki" nad makietą */

  /* Kroje ładowane LENIWO (js/panel-mockup.js) dopiero, gdy sekcja zbliża się
     do ekranu. Strona główna nie może płacić dwoma rodzinami webfontów za
     obrazek w połowie dokumentu. Do tego czasu działa stos systemowy — ten
     sam, który panel ma w fallbacku, więc makieta nie „skacze" po podmianie. */
  --pmk-sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --pmk-head:'Manrope','Inter','Segoe UI',system-ui,sans-serif;
  --pmk-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 200px zamiast panelowych 248px: makieta stoi w kolumnie o połowie szerokości
     sekcji, więc każdy piksel oddany nawigacji zabiera go treści. Panel sam
     zwęża nawigację przy mniejszym oknie — to ten sam ruch, nie inny układ. */
  --pmk-sidebar:200px;
  margin:3rem 0 0;
}

/* Jasny motyw strony → jasny motyw PANELU (panel też go ma). Makieta zmienia
   skórę razem ze stroną zamiast wisieć ciemnym prostokątem w jasnym layoucie. */
body.light-mode .pmk{
  --pmk-bg:#f0ede8;
  --pmk-surface:#ffffff;
  --pmk-surface-2:#fdfcfa;
  --pmk-border:rgba(20,10,30,.10);
  --pmk-border-2:rgba(20,10,30,.17);
  --pmk-txt:#1b1720;
  --pmk-muted:#5a5560;
  --pmk-faint:#6f6974;
  --pmk-accent:#e4004e;
  --pmk-accent-2:#c2003f;
  --pmk-accent-btn:#e8004f;
  --pmk-accent-soft:rgba(232,0,79,.10);
  --pmk-ok:#1a7a44;
  --pmk-ok-bg:rgba(26,122,68,.12);
  --pmk-warn:#8a5d0a;
  --pmk-bad:#b8253c;
  --pmk-glow:0 4px 20px rgba(232,0,79,.26);
  --pmk-shadow:0 1px 2px rgba(40,20,50,.06),0 12px 30px -22px rgba(40,20,50,.34);
  --pmk-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --pmk-chrome:#e6e2db;
}

.pmk *{box-sizing:border-box}

/* ---- zdjęcie globalnej blokady kroju (TYLKO wewnątrz makiety) ----
   Strona wymusza mono na wszystkim:
       *,*::before,*::after{font-family:'JetBrains Mono',monospace !important}
   (css/webwebwebsite.webflow.css). Dla strony to celowy zamek, ale makieta ma
   pokazywać PANEL, a panel stoi na Inter/Manrope (css/panel.css --sans/--head).
   W mono przestaje być podobizną i staje się osobnym interfejsem.
   `!important` jest tu jedyną drogą: selektor `*` ma zerową swoistość, więc
   żadna klasa go nie przebije bez tego. Wpuszczamy `inherit`, żeby to reguły
   niżej (też `!important`) decydowały o kroju — ta jest tylko zdjęciem zamka.
   MUSI stać PRZED regułami z konkretnym krojem: przy równej swoistości
   (0,1,0) i obu `!important` wygrywa późniejsza w pliku. */
.pmk,.pmk *,.pmk *::before,.pmk *::after{font-family:inherit!important}
.pmk{font-family:var(--pmk-sans)!important}

/* ---- DLACZEGO KAŻDE `color:` W TYM PLIKU MA `!important` ----
   css/lightmode.css zawiera:
       body.light-mode span:not(.toggle-icon):not(.toggle-label):not(.text-span-27){color:inherit}
   Swoistość (0,4,2) — wyższa niż jakikolwiek selektor `.pmk-*`. W jasnym motywie
   gasiła KOLOR KAŻDEGO <span> w makiecie: wartości KPI traciły zieleń i pomarańcz,
   liczniki w nawigacji stawały się szarym tekstem na czerwonej plakietce,
   „Wszystkie systemy sprawne" robiło się czarne. Makieta kłamała o tym, jak
   panel wygląda — a to jej jedyne zadanie.
   Punktowe podbijanie swoistości znaczyłoby ~18 selektorów utrzymywanych
   równolegle do markupu, i psułoby się przy każdej zamianie <b> na <span>.
   Jednolity `!important` w całym pliku jest przewidywalny: wewnątrz .pmk
   kolejność wygranych ustala WYŁĄCZNIE swoistość reguł z tego pliku. */

/* ---- podpis nad makietą ---- */
.pmk-cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:0 0 .9rem;font-family:var(--pmk-mono)!important;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#a8a6a8!important;
}
body.light-mode .pmk-cap{color:#4a4646!important}
.pmk-cap b{color:#ff005c!important;font-weight:500}
body.light-mode .pmk-cap b{color:#e8004f!important}

/* ============================================================
   DWA OKNA OBOK SIEBIE
   ------------------------------------------------------------
   Sekcja pokazuje DWA różne widoki panelu naraz, a nie jeden ekran
   przełączany zakładkami: odwiedzający ma zobaczyć zakres aplikacji jednym
   spojrzeniem, bez czekania, aż coś się samo przewinie.

   `minmax(0,…)` na obu kolumnach jest tu obowiązkowe. Domyślne `min-width:auto`
   pozwoliłoby kolumnie rozepchnąć się do szerokości najszerszego dziecka
   (pasek zakładek!) i wtedy jedno okno wystawałoby poza sekcję — dokładnie ta
   usterka, którą ta przebudowa naprawia.

   Proporcja 1.3 : 1, bo widoki nie są równie gęste: „Opieka nad stroną" ma
   nawigację, wykres i sześć kafelków, „Podglądy" tylko kartę z formularzem.
   Równy podział zostawiałby pod drugim oknem pusty prostokąt.
   ============================================================ */
/* `align-items:start`, a NIE domyślne stretch. Rozciągnięcie obu okien do
   wspólnej wysokości dokładało pod krótszym widokiem ~380px pustego wnętrza —
   czytało się jak wada renderowania, nie jak koniec ekranu. Dwa zrzuty o różnej
   wysokości to normalny widok; pustka wypada wtedy POZA ramą, czyli nigdzie. */
.pmk-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}

/* Każde okno jest WŁASNYM kontenerem zapytań. Kluczowa decyzja tego pliku:
   o tym, czy panel chowa nawigację i ściska górny pasek, decyduje szerokość
   OKNA, a nie ekranu. Dzięki temu wąska kolumna na biurku wygląda identycznie
   jak to samo okno na telefonie — bo to ten sam stan panelu, nie osobny tryb
   makiety. Na @media byłoby to nie do zapisania: te same 520px raz są połową
   biurka, raz całym telefonem. */
.pmk-win{margin:0;min-width:0;display:flex;flex-direction:column;container:pmk-okno / inline-size}

/* Podpis pod oknem — mówi, KTÓRY to widok. Bez niego dwa zrzuty obok siebie
   czytają się jak dwa stany tego samego ekranu. */
.pmk-label{
  margin:.7rem 0 0;font-family:var(--pmk-mono)!important;font-size:.66rem;line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;color:#8f8d8f!important;
}
body.light-mode .pmk-label{color:#6a6666!important}
.pmk-label b{color:#ff005c!important;font-weight:500;margin-right:.5rem}
body.light-mode .pmk-label b{color:#e8004f!important}

/* ============================================================
   RAMA — makieta ma czytać się jak zrzut ekranu, nie jak część strony
   ============================================================ */
.pmk-frame{
  position:relative;border:1px solid var(--pmk-border-2);background:var(--pmk-bg);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.03) inset;
  /* Kolumnowy flex, żeby `.pmk-app` (a przez to nawigacja boczna) sięgało dna
     ramy — inaczej „Wyloguj" wisiałby w połowie okna zamiast pod listą. */
  display:flex;flex-direction:column;
  /* Dymki i nawigacja mogą wyjść poza kadr — rama je przycina jak krawędź okna. */
  overflow:hidden;
}
body.light-mode .pmk-frame{box-shadow:0 40px 80px -55px rgba(40,20,50,.45)}

/* pasek adresu — dowód, że to działająca aplikacja pod własnym adresem */
.pmk-chrome{
  display:flex;align-items:center;gap:.7rem;padding:.55rem .85rem;
  background:var(--pmk-chrome);border-bottom:1px solid var(--pmk-border);
}
.pmk-dots{display:flex;gap:6px;flex:0 0 auto}
.pmk-dots i{width:9px;height:9px;border-radius:50%;background:var(--pmk-border-2);display:block}
.pmk-url{
  flex:1;min-width:0;font-family:var(--pmk-mono)!important;font-size:11px;color:var(--pmk-faint)!important;
  background:var(--pmk-surface-2);border:1px solid var(--pmk-border);padding:.3rem .7rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pmk-url b{color:var(--pmk-muted)!important;font-weight:400}
.pmk-lock{color:var(--pmk-ok)!important;font-style:normal}

/* Makieta NIE przewija się już w poziomie. Wcześniej `.pmk-app` miało sztywne
   min-width, a rama przesuwała treść jak zdjęcie w okienku — przy dwóch oknach
   obok siebie to znaczyło, że jedno z nich nie mieści się w szerokości sekcji.
   Teraz układ się przelewa, tak jak przelewa się prawdziwy panel; wierność
   nic na tym nie traci, bo to jego własna responsywność. */
.pmk-app{
  display:flex;flex:1;background:var(--pmk-bg);color:var(--pmk-txt)!important;
  font-family:var(--pmk-sans)!important;font-size:14px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  text-align:left;
}

/* ============================================================
   NAWIGACJA BOCZNA
   ============================================================ */
.pmk-side{
  width:var(--pmk-sidebar);flex:0 0 var(--pmk-sidebar);
  background:var(--pmk-bg);border-right:1px solid var(--pmk-border);
  /* Dół 40px = dokładnie tyle, ile wygasza maska niżej. Gdy lista jest krótsza
     od okna, „Wyloguj" siada na tym marginesie i zostaje w pełnym kontraście;
     bez tego wpadałby w gradient i wyglądałby na wyłączony. */
  padding:20px 14px 40px;display:flex;flex-direction:column;gap:2px;
}
.pmk-logo{
  font-family:var(--pmk-head)!important;font-weight:800;font-size:21px;letter-spacing:-.5px;
  padding:4px 12px 16px;color:var(--pmk-txt)!important;
}
.pmk-logo span{color:var(--pmk-accent)!important}
.pmk-sec{
  font-family:var(--pmk-mono)!important;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--pmk-faint)!important;padding:14px 12px 6px;font-weight:500;
}
.pmk-nav{display:flex;flex-direction:column;gap:2px}
.pmk-item{
  display:flex;align-items:center;gap:11px;padding:8px 12px;
  color:var(--pmk-muted)!important;font-size:13px;font-weight:600;position:relative;
}
.pmk-item svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pmk-item.is-on{color:var(--pmk-txt)!important;background:var(--pmk-accent-soft)}
.pmk-item.is-on::before{
  content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:2.5px;
  background:var(--pmk-accent);box-shadow:0 0 10px var(--pmk-accent);
}
.pmk-item.is-on svg{color:var(--pmk-accent-2)!important}
/* licznik nieprzeczytanych — dokładnie jak .nav-item .badge.warn w panelu */
.pmk-item .pmk-cnt{
  margin-left:auto;background:var(--pmk-bad);color:#fff!important;font-family:var(--pmk-mono)!important;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
}
/* `margin-top:auto` spycha „Wyloguj" na dół, dokładnie jak w panelu. Gdy scena
   jest krótsza od nawigacji, auto-margines schodzi do zera i pozycje po prostu
   płyną dalej — wtedy dół listy wychodzi poza ramę (.pmk-frame ma overflow:hidden).
   Wygaszenie ostatnich 40 px mówi „lista leci dalej" zamiast pokazywać pozycję
   przeciętą w połowie. */
.pmk-side{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);
}
.pmk-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--pmk-border)}

/* ============================================================
   GÓRNY PASEK
   ============================================================ */
.pmk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pmk-top{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:0 18px;min-height:62px;background:var(--pmk-bg);
  border-bottom:1px solid var(--pmk-border);
}
/* Odpowiednik .menu-btn z panelu. Domyślnie ukryty — pokazuje się dopiero, gdy
   OKNO zwęzi się poniżej 620px i zniknie nawigacja boczna (patrz @container na
   dole pliku). Sam nic nie robi: to część obrazka, nie przycisk — stąd
   aria-hidden, brak fokusu i brak kursora. */
.pmk-burger{
  display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;background:var(--pmk-surface);border:1px solid var(--pmk-border);
  color:var(--pmk-muted)!important;
}
.pmk-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* Drugie okno NIE ma nawigacji bocznej w treści — to widok „Podglądy" w stanie
   zwiniętym — więc hamburger stoi tam ZAWSZE. Bez tego przy szerokości okna
   między 620px a pełną (np. 825px na tablecie, gdy okna są jedno pod drugim)
   lewa strona górnego paska zostawała pusta: ani listy, ani przycisku do jej
   rozwinięcia. Panel nigdy tak nie wygląda. */
.pmk-w2 .pmk-burger{display:flex}
.pmk-search{
  position:relative;flex:1;max-width:300px;height:36px;display:flex;align-items:center;
  padding:0 12px 0 34px;background:var(--pmk-surface);border:1px solid var(--pmk-border);
  color:var(--pmk-faint)!important;font-size:13px;
  /* W panelu to <input> — tekst nigdy się nie łamie, tylko przycina. Tu jest to
     <div>, więc bez tego przy ściśniętym pasku „Szukaj w panelu" rozpadało się
     na trzy linijki i wychodziło poza ramkę pola. */
  white-space:nowrap;overflow:hidden;
}
.pmk-search svg{position:absolute;left:11px;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
/* kursor „piszący" w polu szukania — jedyna animacja, która sugeruje żywe UI */
.pmk-caret{display:inline-block;width:1px;height:14px;background:var(--pmk-accent);
  margin-left:2px;vertical-align:-2px;opacity:0}
.pmk.is-live .pmk-caret{animation:pmk-blink 1.1s steps(1) infinite}
@keyframes pmk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.pmk-topright{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pmk-ghost{
  display:flex;align-items:center;gap:6px;height:36px;padding:0 11px;
  background:var(--pmk-surface);border:1px solid var(--pmk-border);
  color:var(--pmk-muted)!important;font-size:12px;font-weight:600;white-space:nowrap;
}
.pmk-ghost svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.pmk-timer{font-family:var(--pmk-mono)!important;font-size:12px}
.pmk-timer b{color:var(--pmk-txt)!important;font-weight:700;letter-spacing:.5px}
.pmk-bell{
  position:relative;width:36px;height:36px;border-radius:999px;padding:0;justify-content:center;
}
.pmk-bell i{
  position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--pmk-accent);box-shadow:0 0 0 2px var(--pmk-surface),0 0 8px var(--pmk-accent);
}
.pmk-user{
  display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;
  border:1px solid var(--pmk-border);background:var(--pmk-surface);
}
.pmk-av{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;background:var(--pmk-accent);color:#fff!important;
  box-shadow:var(--pmk-glow);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;font-family:var(--pmk-head)!important;
}
.pmk-uname{font-size:12px;font-weight:700;line-height:1.15}
.pmk-urole{font-family:var(--pmk-mono)!important;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--pmk-muted)!important;line-height:1.3}

/* ============================================================
   PASEK ZAKŁADEK  (odpowiednik .vtab z panelu)
   ============================================================ */
/* Pasek jest częścią OBRAZKA: żadna zakładka nie jest przyciskiem, więc nie
   obiecuje kliknięcia, którego makieta nie obsłuży. `overflow:hidden` zamiast
   `auto` — pasek ma być ucięty krawędzią okna, a nie oferować przewijanie
   listy, która i tak nigdzie nie prowadzi. */
.pmk-tabs{
  display:flex;gap:7px;padding:14px 22px 0;overflow:hidden;
  /* Zakładek jest więcej, niż mieści się w oknie — dokładnie jak w panelu.
     Wygaszenie prawej krawędzi czyta się jako „pasek jedzie dalej"; bez tego
     ostatnia zakładka jest ucięta w połowie litery i wygląda na błąd układu. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 58px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 58px),transparent);
}
/* Okno 2 pokazuje widok z ŚRODKA listy, więc pasek jest przesunięty: wygaszamy
   obie krawędzie, żeby czytało się „pasek jedzie w obie strony", a nie
   „lista zaczyna się od Treści".
   Tylko w wąskim oknie: gdy okna stoją jedno pod drugim (tablet, ~825px), cała
   lista mieści się na ekranie i wygaszona lewa krawędź KŁAMAŁABY — obiecywała
   przewinięcie, którego nie ma. */
@container pmk-okno (max-width:760px){
  .pmk-tabs.is-mid{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 52px,#000 calc(100% - 58px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 52px,#000 calc(100% - 58px),transparent);
  }
}
.pmk-tab{
  flex:0 0 auto;padding:7px 13px;background:var(--pmk-surface);border:1px solid var(--pmk-border);
  color:var(--pmk-muted)!important;font-family:inherit;font-weight:600;font-size:12px;white-space:nowrap;
}
.pmk-tab.is-on{
  background:var(--pmk-accent);border-color:var(--pmk-accent);color:#fff!important;box-shadow:var(--pmk-glow);
}

/* ============================================================
   TREŚĆ + PRZEŁĄCZANIE SCEN
   ============================================================ */
.pmk-body{padding:22px;position:relative}
.pmk-scene{display:none}
.pmk-scene.is-on{display:block}
.pmk.is-live .pmk-scene.is-on{animation:pmk-in .45s cubic-bezier(.4,0,.2,1) both}
/* Drugie okno wchodzi ułamek sekundy później. Oba naraz czytają się jak jeden
   blok, który mrugnął; z przesunięciem widać, że to dwa osobne ekrany. */
.pmk-w2 .pmk-scene{animation-delay:.14s}
@keyframes pmk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.pmk-h1{font-family:var(--pmk-head)!important;font-size:24px;font-weight:800;letter-spacing:-.028em;
  line-height:1.12;margin:0 0 6px;color:var(--pmk-txt)!important}
.pmk-sub{margin:0 0 20px;color:var(--pmk-muted)!important;font-size:13px;max-width:74ch}

.pmk-card{
  background:var(--pmk-surface-2);border:1px solid var(--pmk-border);
  box-shadow:var(--pmk-inset),var(--pmk-shadow);padding:20px;margin:0 0 16px;position:relative;
}
.pmk-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 16px}
.pmk-h2{font-family:var(--pmk-head)!important;font-size:17px;font-weight:700;margin:0;letter-spacing:-.015em}
.pmk-note{color:var(--pmk-muted)!important;font-size:12.5px;margin:0 0 14px;max-width:80ch}

/* ---- pasek stanu „wszystkie systemy sprawne" ---- */
.pmk-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.pmk-live{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;
  background:var(--pmk-ok-bg);color:var(--pmk-ok)!important;font-weight:700;font-size:13px;
}
.pmk-live i{width:8px;height:8px;border-radius:50%;background:var(--pmk-ok);display:block}
.pmk.is-live .pmk-live i{animation:pmk-pulse 2.4s ease-out infinite}
@keyframes pmk-pulse{
  0%{box-shadow:0 0 0 0 rgba(43,209,138,.55)}
  70%{box-shadow:0 0 0 7px rgba(43,209,138,0)}
  100%{box-shadow:0 0 0 0 rgba(43,209,138,0)}
}
.pmk-plan{
  font-family:var(--pmk-mono)!important;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--pmk-accent-soft);color:var(--pmk-accent-2)!important;font-weight:600;
}
.pmk-stamp{font-family:var(--pmk-mono)!important;font-size:11px;color:var(--pmk-faint)!important;margin-left:auto}

/* ---- pasek 30 dni dostępności ---- */
.pmk-days{display:flex;gap:3px;align-items:flex-end;height:34px;margin:0 0 6px}
.pmk-days b{
  flex:1;height:100%;background:var(--pmk-ok);opacity:.85;display:block;
  transform-origin:bottom;transform:scaleY(1);
}
.pmk.is-live .pmk-days b{transform:scaleY(.08);animation:pmk-grow .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pmk-grow{to{transform:scaleY(1)}}
.pmk-days b.is-warn{background:var(--pmk-warn)}
.pmk-axis{display:flex;justify-content:space-between;font-family:var(--pmk-mono)!important;
  font-size:10px;color:var(--pmk-faint)!important;margin:0 0 18px}

/* ---- wykres czasu odpowiedzi ---- */
.pmk-spark{margin:0 0 6px}
.pmk-spark svg{display:block;width:100%;height:72px}
.pmk-spark path{fill:none;stroke:var(--pmk-accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pmk-spark .pmk-fill{fill:var(--pmk-accent-soft);stroke:none}
.pmk.is-live .pmk-spark path:not(.pmk-fill){
  stroke-dasharray:640;stroke-dashoffset:640;animation:pmk-draw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards;
}
@keyframes pmk-draw{to{stroke-dashoffset:0}}
.pmk.is-live .pmk-spark .pmk-fill{opacity:0;animation:pmk-fade .6s ease 1.1s forwards}
@keyframes pmk-fade{to{opacity:1}}
.pmk-legend{display:flex;gap:18px;font-family:var(--pmk-mono)!important;font-size:10.5px;
  color:var(--pmk-faint)!important;margin:0 0 4px}
.pmk-legend b{color:var(--pmk-muted)!important;font-weight:500}

/* ---- kafelki KPI ---- */
/* 190px, bo okno ma teraz połowę szerokości sekcji: przy dawnych 272px sześć
   kafelków spadało do JEDNEJ kolumny i widok rozciągał się na dwa ekrany.
   190px daje równe 2×3 w oknie i nie łamie etykiet w rodzaju „ŚR. CZAS
   ODPOWIEDZI" — parzysta liczba kafelków nigdy nie zostawia sieroty. */
.pmk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 16px}
.pmk-kpi{
  background:var(--pmk-surface);border:1px solid var(--pmk-border);padding:14px 15px;position:relative;
}
.pmk-klab{font-family:var(--pmk-mono)!important;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pmk-faint)!important;display:block;margin:0 0 7px;line-height:1.4}
.pmk-kval{font-family:var(--pmk-head)!important;font-size:26px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--pmk-txt)!important;display:block}
.pmk-kval small{font-size:14px;font-weight:700;color:var(--pmk-muted)!important;margin-left:2px}
.pmk-ksub{font-size:11px;color:var(--pmk-muted)!important;display:block;margin-top:5px}
.pmk-kpi.is-ok .pmk-kval{color:var(--pmk-ok)!important}
.pmk-kpi.is-warn .pmk-kval{color:var(--pmk-warn)!important}
.pmk-kpi.is-bad .pmk-kval{color:var(--pmk-bad)!important}

/* ---- wiersz sklepu + Core Web Vitals ---- */
.pmk-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:0 0 16px}
.pmk-flag{
  display:flex;flex-direction:column;gap:3px;padding:11px 14px;
  background:var(--pmk-surface);border:1px solid var(--pmk-border);min-width:150px;
}
.pmk-flag.is-bad{border-color:rgba(255,90,114,.4);background:rgba(255,90,114,.08)}
.pmk-flag em{font-family:var(--pmk-mono)!important;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pmk-faint)!important;font-style:normal}
.pmk-flag b{font-size:14px;font-weight:700}
.pmk-flag.is-bad b{color:var(--pmk-bad)!important}
.pmk-flag.is-ok b{color:var(--pmk-ok)!important}

.pmk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.pmk-chip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--pmk-mono)!important;font-size:10.5px;
  padding:6px 11px;border:1px solid var(--pmk-border-2);background:var(--pmk-surface);
  color:var(--pmk-muted)!important;
}
.pmk-chip b{color:var(--pmk-txt)!important;font-weight:700}
.pmk-chip i{width:6px;height:6px;border-radius:50%;display:block}
.pmk-chip.is-ok i{background:var(--pmk-ok)}
.pmk-chip.is-warn i{background:var(--pmk-warn)}
/* Krzywa ta sama, co w reszcie pliku. Wcześniej chipy miały krzywą sprężynującą
   — przeskakiwały pozycję docelową i wracały. Był to jedyny ruch w makiecie czytany
   jako ozdoba, a nie jako wczytujący się panel: monitoring nie sprężynuje. */
.pmk.is-live .pmk-chip{opacity:0;animation:pmk-pop .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pmk-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

/* ---- rząd przycisków raportów ---- */
.pmk-acts{display:flex;flex-wrap:wrap;gap:8px}
.pmk-act{
  padding:8px 13px;background:var(--pmk-surface);border:1px solid var(--pmk-border-2);
  color:var(--pmk-txt)!important;font-size:12px;font-weight:600;white-space:nowrap;position:relative;
}
.pmk-act.is-primary{background:var(--pmk-accent-btn);border-color:rgba(255,0,92,.62);
  color:#fff!important;box-shadow:var(--pmk-glow)}

/* ============================================================
   SCENA „PODGLĄDY"
   ============================================================ */
.pmk-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 16px;
  background:var(--pmk-accent-soft);border:1px solid rgba(255,0,92,.28);position:relative;
}
.pmk-banner-txt{flex:1;min-width:220px}
.pmk-banner b{display:block;font-family:var(--pmk-head)!important;font-size:14px;font-weight:700;margin:0 0 2px}
.pmk-banner span{font-size:12px;color:var(--pmk-muted)!important}

.pmk-drop{
  border:1px dashed var(--pmk-border-2);background:var(--pmk-surface);
  padding:34px 20px;text-align:center;position:relative;margin:0 0 16px;
}
.pmk-drop svg{width:30px;height:30px;stroke:var(--pmk-faint);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin:0 0 10px}
.pmk-drop b{display:block;font-size:14px;font-weight:700;margin:0 0 4px}
.pmk-drop span{font-size:12px;color:var(--pmk-faint)!important}
.pmk.is-live .pmk-scene.is-on .pmk-drop{animation:pmk-breathe 3.4s ease-in-out infinite}
@keyframes pmk-breathe{
  0%,100%{border-color:var(--pmk-border-2)}
  50%{border-color:var(--pmk-accent-2)}
}

.pmk-field{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 16px}
.pmk-field label{flex:1;min-width:200px;display:block;position:relative}
.pmk-flab{font-family:var(--pmk-mono)!important;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pmk-faint)!important;display:block;margin:0 0 6px}
.pmk-select{
  display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 13px;
  background:var(--pmk-surface);border:1px solid var(--pmk-border-2);color:var(--pmk-txt)!important;font-size:13px;
}
.pmk-select em{font-style:normal;color:var(--pmk-faint)!important;font-size:11px}

.pmk-warn{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 16px;
  background:rgba(224,163,58,.12);border:1px solid rgba(224,163,58,.35);
  color:var(--pmk-txt)!important;font-size:12.5px;
}
.pmk-warn b{color:var(--pmk-warn)!important}

.pmk-pager{display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--pmk-border);padding-top:14px;margin-top:4px}

/* ============================================================
   ZNACZNIKI Z DYMKAMI  — sedno sekcji: każdy tłumaczy JEDNĄ funkcję
   ============================================================ */
.pmk-anchor{position:relative}

.pmk-mark{
  position:absolute;z-index:6;width:22px;height:22px;padding:0;
  background:none;border:0;cursor:pointer;line-height:0;
  top:-11px;right:-11px;
}
.pmk-mark[data-side="left"]{right:auto;left:-11px}
.pmk-mark[data-side="mid"]{right:auto;left:50%;margin-left:-11px}

.pmk-mark i{
  display:block;width:22px;height:22px;border-radius:50%;position:relative;
  background:var(--pmk-accent-btn);box-shadow:0 0 0 3px var(--pmk-bg),var(--pmk-glow);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
/* krzyżyk „+" rysowany CSS-em: nie zależy od fontu ani od pliku z ikonami */
.pmk-mark i::before,.pmk-mark i::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%);
}
.pmk-mark i::before{width:9px;height:1.5px}
.pmk-mark i::after{width:1.5px;height:9px}
/* pierścień zapraszający do najechania — tylko gdy sekcja jest na ekranie */
.pmk-mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--pmk-accent);
  opacity:0;pointer-events:none;
}
.pmk.is-live .pmk-mark::after{animation:pmk-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes pmk-ring{
  0%{opacity:.75;transform:scale(1)}
  70%{opacity:0;transform:scale(2.1)}
  100%{opacity:0;transform:scale(2.1)}
}
.pmk-mark:hover i,.pmk-mark:focus-visible i,.pmk-mark.is-on i{transform:scale(1.18)}
.pmk-mark:focus-visible{outline:3px solid var(--pmk-accent-soft);outline-offset:3px;border-radius:50%}
.pmk-mark.is-on i::after{transform:translate(-50%,-50%) rotate(90deg)}

.pmk-tip{
  position:absolute;z-index:9;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  /* cqw, NIE vw: dymek przycina rama OKNA, a nie ekran. Przy dwóch oknach obok
     siebie 72vw to więcej niż całe okno — dymek wychodził poza kadr i rama
     ucinała mu bok. */
  width:min(272px,84cqw);padding:12px 14px;
  background:var(--pmk-surface);border:1px solid var(--pmk-accent-2);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;
  text-align:left;
}
body.light-mode .pmk-tip{box-shadow:0 20px 44px -22px rgba(40,20,50,.45)}
.pmk-tip b{
  display:block;font-family:var(--pmk-head)!important;font-size:13px;font-weight:700;
  color:var(--pmk-txt)!important;margin:0 0 4px;line-height:1.35;
}
.pmk-tip span{display:block;font-size:12px;line-height:1.6;color:var(--pmk-muted)!important}
/* Dymek przy prawej krawędzi okna wychodziłby poza kadr — przypinamy go do
   prawej. `11px`, a nie `-11px`: znacznik sam wystaje 11px poza kartę, więc
   liczone od jego krawędzi dymek lądował 22px za kartą i w wąskim oknie
   wchodził pod przycinającą ramę. Teraz prawa krawędź dymka pokrywa się
   z prawą krawędzią karty, którą opisuje. */
.pmk-mark[data-tip="end"] .pmk-tip{left:auto;right:11px;transform:translateY(-6px)}
.pmk-mark[data-tip="start"] .pmk-tip{left:-11px;transform:translateY(-6px)}
/* dymek nad znacznikiem — dla rzeczy stojących przy dolnej krawędzi makiety */
.pmk-mark[data-up] .pmk-tip{top:auto;bottom:calc(100% + 12px)}

.pmk-mark:hover .pmk-tip,
.pmk-mark:focus-visible .pmk-tip,
.pmk-mark.is-on .pmk-tip{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.pmk-mark[data-tip="end"]:hover .pmk-tip,
.pmk-mark[data-tip="end"]:focus-visible .pmk-tip,
.pmk-mark[data-tip="end"].is-on .pmk-tip,
.pmk-mark[data-tip="start"]:hover .pmk-tip,
.pmk-mark[data-tip="start"]:focus-visible .pmk-tip,
.pmk-mark[data-tip="start"].is-on .pmk-tip{transform:translateY(0)}

/* ============================================================
   STOPKA SEKCJI
   ============================================================ */
.pmk-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:.9rem 0 0;font-family:var(--pmk-mono)!important;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8f8d8f!important;
}
body.light-mode .pmk-foot{color:#6a6666!important}
.pmk-hint{display:inline-flex;align-items:center;gap:.5rem}
.pmk-hint i{width:10px;height:10px;border-radius:50%;background:#ff005c;display:block;flex:0 0 10px}
body.light-mode .pmk-hint i{background:#e8004f}

/* ============================================================
   RESPONSYWNOŚĆ — DWA POZIOMY, KAŻDY O CZYM INNYM
   ------------------------------------------------------------
   @media  odpowiada na pytanie „ile okien mieści się w rzędzie" (układ SEKCJI).
   @container odpowiada na „jak panel zachowuje się w oknie tej szerokości"
   (układ APLIKACJI). Mieszanie tych dwóch było źródłem starego błędu: reguła
   pisana pod telefon dobierała się do węższej kolumny na biurku i odwrotnie.
   ============================================================ */

/* ---- poziom 1: układ sekcji ---- */
/* 1080px, bo poniżej węższa kolumna schodzi pod ~460px — a tam panel musi
   schować i nawigację, i połowę górnego paska. Dwa okaleczone okna obok siebie
   pokazują mniej niż dwa pełne jedno pod drugim. */
@media(max-width:1080px){
  .pmk-two{grid-template-columns:minmax(0,1fr);gap:2.2rem}
}
@media(max-width:760px){
  .pmk{margin-top:2.2rem}
  .pmk-cap,.pmk-foot,.pmk-label{font-size:.6rem}
}

/* ---- poziom 2: zachowanie panelu w oknie ---- */
/* ≤720px: panel zwija plakietkę użytkownika do samego awatara — dokładnie to
   robi prawdziwy panel od ≤900px (.user-chip .uc-meta{display:none}). Bez tego
   imię i rola zjadały pole szukania, które ściskało się do kilkudziesięciu
   pikseli i wyglądało na zepsute. */
@container pmk-okno (max-width:720px){
  .pmk-user > span:not(.pmk-av){display:none}
  .pmk-user{padding:4px}
  .pmk-app{font-size:13px}
}
/* ≤620px: nawigacja boczna zostawiałaby na treść tyle, że odwiedzający
   widziałby SPIS MENU zamiast produktu. Panel rozwiązuje to tak samo — poniżej
   1024px chowa .sidebar i pokazuje hamburger. To jego własny stan, nie
   uproszczenie makiety, więc drugie okno wygląda tu jak prawdziwy zrzut. */
@container pmk-okno (max-width:620px){
  .pmk-side{display:none}
  .pmk-burger{display:flex}
  /* Hamburger zajmuje miejsce, którego nie było — coś musi ustąpić. W panelu
     pierwsze wylatuje „Jak to działa": pomoc jest przy każdej funkcji, więc
     przycisk w pasku nie jest jedyną drogą. Bez tego pole szukania ścinało
     się poniżej własnego tekstu i „Szukaj w panelu" było ucięte w połowie. */
  .pmk-help{display:none}
}
/* ≤460px (telefon albo bardzo wąska sekcja): górny pasek oddaje wszystko, co
   nie jest tożsamością i powiadomieniem — tak jak panel. Kafelki KPI trzymamy
   na sztywnych dwóch kolumnach: auto-fit zwinąłby je do jednej i sam pulpit
   miałby wtedy wysokość dwóch ekranów. */
@container pmk-okno (max-width:460px){
  .pmk-timer{display:none}
  .pmk-body{padding:14px}
  .pmk-tabs{padding:12px 14px 0}
  .pmk-top{padding:0 12px}
  .pmk-card{padding:15px}
  .pmk-h1{font-size:20px}
  .pmk-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pmk-kval{font-size:22px}
  .pmk-legend{gap:10px;flex-wrap:wrap}
  .pmk-drop{padding:24px 14px}
  /* Dymek szerszy od okna wyszedłby poza kadr (rama przycina) — zwężamy go
     do szerokości OKNA, a nie ekranu: to okno go obcina. */
  .pmk-tip{width:min(240px,78cqw)}
  /* Znacznik „start" siedzi na kafelku, który w wąskim oknie zajmuje POŁOWĘ
     szerokości — dymek rozciągnięty od niego w prawo wychodził wtedy 42px poza
     ramę. Centrujemy go na znaczniku: to jedyne ustawienie, które mieści się
     w obie strony niezależnie od tego, w której kolumnie stoi kafelek. */
  .pmk-mark[data-tip="start"] .pmk-tip{left:50%;right:auto;transform:translateX(-50%) translateY(-6px)}
  .pmk-mark[data-tip="start"]:hover .pmk-tip,
  .pmk-mark[data-tip="start"]:focus-visible .pmk-tip,
  .pmk-mark[data-tip="start"].is-on .pmk-tip{transform:translateX(-50%) translateY(0)}
}

/* ============================================================
   OGRANICZONY RUCH — WCAG 2.3.3 (Animation from Interactions).
   !important WYMAGANE: reguły wyżej mają wyższą specyficzność (.pmk.is-live …).
   Makieta zostaje w pełni czytelna, znika wyłącznie ruch.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .pmk.is-live .pmk-days b,
  .pmk.is-live .pmk-spark path:not(.pmk-fill),
  .pmk.is-live .pmk-spark .pmk-fill,
  .pmk.is-live .pmk-chip,
  .pmk.is-live .pmk-scene.is-on,
  .pmk.is-live .pmk-live i,
  .pmk.is-live .pmk-mark::after,
  .pmk.is-live .pmk-caret,
  .pmk.is-live .pmk-scene.is-on .pmk-drop{
    animation:none!important;
  }
  .pmk.is-live .pmk-days b{transform:none!important}
  .pmk.is-live .pmk-spark path{stroke-dashoffset:0!important}
  .pmk.is-live .pmk-spark .pmk-fill,
  .pmk.is-live .pmk-chip{opacity:1!important}
  .pmk.is-live .pmk-caret{opacity:1!important}
  .pmk-mark i,.pmk-tip{transition:none!important}
  .pmk-mark:hover i,.pmk-mark:focus-visible i,.pmk-mark.is-on i{transform:none!important}
}