/* ======================================================================
   sDMT STUDIO , JEDEN arkusz dla calej strefy admina (Zadanie J).
   Zrodlo tokenow (przeczytane w calosci w tej sesji):
     ~/strategie/dokumenty/wzorce_ui/notion/DESIGN.md  , baza: jasny
       kanwas #f6f5f4 + biale karty, hairline obwodki (nie cienie),
       12px promien kart, jeden chromatyczny akcent.
     ~/strategie/dokumenty/wzorce_ui/linear/DESIGN.md , gestosc (compact
       8-12px padding), cienkie obwodki, typografia Inter w wagach 400-510
       z ciasnym trackingiem na naglowkach.

   ⛔ REBRANDING AURORA (D957, E1, 2026-09-05): warstwa zmiennych ponizej
   przepisana na kierunek "Aurora" zaakceptowany przez wlasciciela
   (specyfikacje/panel_rebranding_2026-09-05.md, wzorzec 1:1
   specyfikacje/makiety_aurora/aurora.css). Tlo biale/#fafafa, tekst niemal
   czarny #111, drugi plan #6b7280, obramowania #e5e7eb, promienie 10-16px,
   cienie miekkie, font Inter (Google Fonts w bazowych szablonach + fallback
   system-ui), akcent glowny = gradient indygo #4f46e5 -> fiolet #9333ea ->
   magenta #db2777 (--au-gradient), uzywany na przyciskach/aktywnych
   pigulkach/liczbach KPI; --v-accent zostaje SOLIDNYM kolorem (indygo) dla
   kontekstow, gdzie gradient nie dziala (obwodki, plaski tekst, focus).
   Wszystkie DOTYCHCZASOWE zmienne (--v-*, --a-*, --color-*) dostaly NOWE
   wartosci (812 klas przelacza sie bez przepisywania kazdej), nowe tokeny
   marki dopisane obok jako --au-* (patrz blok ponizej ":root" WZORNIKA).
   Stary Notion Blue #0075de USUNIETY (byl JEDYNYM akcentem , patrz
   historyczny opis nizej, nieaktualny od D957).

   ⛔ Ten plik zastepuje style_admin.css (Zadanie H) W CALOSCI , admin_base.html
   laduje WYLACZNIE ten arkusz. Uzywa TYCH SAMYCH nazw zmiennych i klas co
   static/style_virale.css (--v-nazwy, .v-chip, .v-cal-, .v-modal, ...), zeby
   szablony WSPOLDZIELONE z klientem (kalendarz, koncepty, virale, konta)
   renderowaly sie IDENTYCZNIE strukturalnie po obu stronach , rozni sie
   WYLACZNIE paleta (tu Notion Blue jasny, u klienta fiolet z Zadania A,
   celowo nietkniety , poza zakresem tego zadania). To jest NAPRAWA regresji
   K3/K5/K6: admin nie mial ZADNEGO arkusza definiujacego te klasy.
   ====================================================================== */

/* E1/E4 (D386, wlasciciel "B"): font panelu Plus Jakarta Sans zamiast Inter,
   probki polskich znakow w wagach 400-800 obejrzane na fiksturze przed
   wyborem. Pliki produkcyjne w static/fonts/ (dwa zakresy unicode, jak w
   probce E1: latin + latin-ext, zeby polskie znaki mialy pelne pokrycie bez
   fallbacku). Zrodlo deklaracji: static/fonts_test/probki.html (usuniete po
   wdrozeniu, ten sam @font-face przeniesiony tu bez zmian). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/PlusJakartaSans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --v-radius: 14px;
  --v-radius-sm: 10px;
  --v-maxw: 1280px;
  --v-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* AURORA (D957) , JEDYNY motyw: kanwas biel/#fafafa, tekst niemal czarny,
     akcent solidny = indygo (gradient pelny --au-gradient nizej, uzywany
     punktowo na przyciskach/aktywnych pigulkach/KPI). */
  --v-bg: #fafafa;
  --v-surface: #ffffff;
  --v-surface-2: #f3f4f6;
  --v-text: #111111;
  --v-muted: #6b7280;
  --v-border: #e5e7eb;
  --v-accent: #4f46e5;
  --v-accent-strong: #4338ca;
  --v-accent-contrast: #ffffff;
  --v-ok-bg: #dcfce7; --v-ok-fg: #166534;
  --v-err-bg: #fee2e2; --v-err-fg: #991b1b;
  --v-warn-bg: #fef3c7; --v-warn-fg: #92400e;
  --v-off-bg: #f3f4f6; --v-off-fg: #6b7280;
  --v-ig: #c2255c;
  --v-fb: #2f5bb7;
  --v-shadow: none;

  /* Aliasy --a-* , kilka szablonow admina (viral_start.html, viral_przeglad.html)
     ma inline style="color:var(--a-muted)" sprzed tego zadania. Zamiast gonic
     kazde inline wystapienie osobno, alias trzyma je dzialajace pod JEDNYM
     zrodlem koloru (--v-muted), zeby paleta nigdy nie rozjechala sie w dwie
     strony przy kolejnej zmianie tokenow. */
  --a-muted: var(--v-muted);
  --a-text: var(--v-text);
  --a-bg: var(--v-bg);
  --a-surface: var(--v-surface);
  --a-border: var(--v-border);
  --a-accent: var(--v-accent);
  --a-off-bg: var(--v-off-bg);
}

/* ======================================================================
   TOKENY WZORNIKA (Zadanie D321, 2026-08-19) , przeczytane w calosci:
   ~/system2/material/ux_panelu/WZORNIK_PANELU.md. NOWA warstwa obok
   istniejacych --v-* i --a-* powyzej , nie nadpisuje ich, zeby widoki spoza
   zakresu D321 (kalendarz, wyniki, koncepty, itd.) zostaly nietkniete.
   Kolory wskazuja na ISTNIEJACE --v-* (jeden akcent, D957: indygo Aurora),
   zeby nie powstala druga, rozjezdzajaca sie paleta , patrz WZORNIK sekcja 1.6.
   Zakres uzycia dzis: templates/viral_przebiegi.html + viral_start.html.
   Pozostale widoki dalej licza wylacznie --v-* i --a-*, bez zmian. */
:root {
  /* Skala odstepow 4/8pt (WZORNIK 1.1) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Container max-width (WZORNIK 1.3) , alias istniejacego --v-maxw
     + nowy szerszy wariant dla widokow gestych w dane */
  --container-max: var(--v-maxw);
  --container-max-wide: 1440px;

  /* Skala typografii (WZORNIK 1.4) */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  /* Hotfix szerokosci (D966): skala plynna clamp() zamiast stalego 32px ,
     rosnie/maleje z szerokoscia viewportu (w tym efektywnie przy zoomie
     przegladarki 125-150%), zeby dlugie naglowki nie wymuszaly przewijania
     w poziomie na wezszych efektywnych szerokosciach. */
  --font-size-2xl: clamp(24px, 2vw + 8px, 34px);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Promienie i cienie (WZORNIK 1.5) , sm/lg to aliasy istniejacych tokenow.
     AURORA (D957): promienie 10-16px, cienie miekkie i plytkie (bazowe
     rgba(17,17,17,...), zgodnie z nowym --v-text). */
  --radius-sm: 8px;
  --radius-md: var(--v-radius-sm);
  --radius-lg: var(--v-radius);
  --radius-xl: 18px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 4px 16px -4px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 14px 34px -10px rgba(17, 17, 17, 0.12);

  /* Ruch: czas i easing (WZORNIK 3.1) */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Semantyczne kolory (WZORNIK 1.6, warstwa SEMANTIC) , KAZDY wskazuje
     na istniejacy token --v-* powyzej, zero nowych surowych wartosci
     poza --color-border-strong (pochodna --v-border, nie ma odpowiednika). */
  --color-bg-page: var(--v-bg);
  --color-bg-surface: var(--v-surface);
  --color-bg-surface-muted: var(--v-off-bg);
  --color-border: var(--v-border);
  --color-border-strong: rgba(0, 0, 0, 0.16);
  --color-text-primary: var(--v-text);
  --color-text-secondary: var(--v-muted);
  --color-text-muted: var(--v-muted);
  --color-text-on-accent: var(--v-accent-contrast);
  --color-accent: var(--v-accent);
  --color-accent-hover: var(--v-accent-strong);
  --color-accent-subtle: color-mix(in srgb, var(--v-accent) 10%, var(--v-surface));
  --color-accent-border: color-mix(in srgb, var(--v-accent) 35%, transparent);
  --color-success: var(--v-ok-fg);
  --color-success-subtle: var(--v-ok-bg);
  --color-danger: var(--v-err-fg);
  --color-danger-subtle: var(--v-err-bg);
  --color-warning: var(--v-warn-fg);
  --color-warning-subtle: var(--v-warn-bg);
}

/* ======================================================================
   TOKENY MARKI AURORA (--au-*, D957) , DOPISANE OBOK --v-*, --color-* (zero
   nadpisania), 1:1 ze specyfikacje/makiety_aurora/aurora.css. Uzywane
   punktowo tam, gdzie plaski --v-accent nie wystarcza: gradient na
   przyciskach glownych/aktywnych pigulkach/liczbach KPI/pasku marki, glow
   na hover, oraz JEDNA mapa kolorow statusow sztuk i akcji (chipy nizej). */
:root {
  --au-indygo: #4f46e5;
  --au-fiolet: #9333ea;
  --au-magenta: #db2777;
  --au-gradient: linear-gradient(135deg, var(--au-indygo) 0%, var(--au-fiolet) 55%, var(--au-magenta) 100%);
  --au-gradient-tekst: linear-gradient(135deg, var(--au-indygo), var(--au-magenta));
  --au-gradient-pasek: linear-gradient(90deg, var(--au-indygo), var(--au-fiolet), var(--au-magenta));

  --au-bg: #ffffff;
  --au-bg-przyciemnione: #fafafa;
  --au-tekst: #111111;
  --au-tekst-2: #6b7280;
  --au-tekst-3: #9ca3af;
  --au-obramowanie: #e5e7eb;
  --au-obramowanie-mocne: #d1d5db;

  /* jedna mapa kolorow dla statusow SZTUK i AKCJI, admin + klient (patrz
     sekcja "CHIPY STATUSOW" nizej) */
  --au-status-szkic-bg: #f3f4f6;      --au-status-szkic-fg: #374151;
  --au-status-tekst-ok-bg: #ede9fe;   --au-status-tekst-ok-fg: #5b21b6;
  --au-status-do-klienta-bg: #fce7f3; --au-status-do-klienta-fg: #9d174d;
  --au-status-klient-ok-bg: #dcfce7;  --au-status-klient-ok-fg: #166534;
  --au-status-render-bg: #e0e7ff;     --au-status-render-fg: #3730a3;
  --au-status-kalendarz-bg: #dcfce7;  --au-status-kalendarz-fg: #14532d;
  --au-status-blad-bg: #fee2e2;       --au-status-blad-fg: #991b1b;

  --au-promien-sm: 8px;
  --au-promien: 12px;
  --au-promien-lg: 18px;
  --au-promien-pigulka: 999px;
  --au-cien-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --au-cien: 0 4px 16px -4px rgba(17, 17, 17, 0.08);
  --au-cien-lg: 0 14px 34px -10px rgba(17, 17, 17, 0.12);
  --au-glow-btn: 0 8px 24px -8px rgba(147, 51, 234, 0.55);
  --au-glow-btn-hover: 0 14px 34px -10px rgba(219, 39, 119, 0.6), 0 0 0 3px rgba(147, 51, 234, 0.12);
  --au-glow-pigulka: 0 4px 14px -4px rgba(147, 51, 234, 0.55);

  --au-font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Hotfix szerokosci (D966, 2026-09-05): strona wychodzila za ekran (pasek
   poziomego przewijania) u admina i klientow, widoczne zwlaszcza przy
   zoomie 125-150% (efektywny viewport 1280-1536px). Zrodla: (1) siatka
   kalendarza .v-cal-grid miala repeat(7, 1fr) BEZ minmax(0, 1fr) , 1fr bez
   minmax liczy automatyczne minimum z tresci komorek (chipy z
   white-space:nowrap), wiec kolumny nie mogly sie skurczyc ponizej tresci;
   (2) tabele .v-table (admin_reklamy/admin_ab/admin_lead_magnety) BEZ
   .v-table-wrap i BEZ wlasnego CSS (literowka wzgledem .v-tbl , tabela
   renderowala sie w szerokosci domyslnej przegladarki, szerszej niz karta).
   Naprawa PONIZEJ: overflow-x:clip na html/body (NIE hidden , hidden na
   body psuje position:sticky elementow w srodku, patrz zlecenie),
   .v-cal-grid -> minmax(0, 1fr), .v-table dostaje pelny styl + wlasne
   przewijanie w poziomie (bez wrappera, patrz sekcja TABELA). */
html, body.a-body, body.v-body, body.pk-body { overflow-x: clip; }
img, svg { max-width: 100%; }

body.a-body, body.v-body {
  margin: 0;
  font-family: var(--v-font);
  font-size: 15px;
  line-height: 1.55;
  background: var(--v-bg);
  color: var(--v-text);
  /* E4: cyfry liczb tabularne (rowna szerokosc) w calym panelu, zeby liczby
     w kaflach/tabelach nie "skakaly" przy zmianie wartosci , dziedziczy sie
     do kazdego elementu, pojedyncze .tabular-nums na liczbach ponizej to
     tylko doprecyzowanie tam gdzie inny font-variant-numeric nadpisuje. */
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  letter-spacing: -0.006em;
}

/* ---------- MENU GORNE PASTYLKOWE (Zadanie E2, zastapilo lewy sidebar , wiecej
   szerokosci roboczej dla tresci; ta sama nawigacja co dawny .v-sidebar/.a-sidebar,
   WYLACZNIE inny uklad , zero nowych/ukrytych linkow). ---------- */
.v-topmenu, .a-topmenu {
  background: var(--v-surface);
  border-bottom: 1px solid var(--v-border);
  position: sticky; top: 0; z-index: 6;
}
/* Poprawka po odbiorze D408 (zrzut 1440: "admin/Wyloguj" spadalo do
   DRUGIEGO rzedu): flex-wrap:wrap na TYM kontenerze pozwalal calemu
   .a-topmenu-user (ostatniemu elementowi flex) zejsc na nowa linie, mimo
   ze .a-navpills mial wlasne flex-shrink i mogl sie zmiescic. Poprawka:
   nowrap na szerokich ekranach (spaceoWithbetween rozpycha logo+pillsy
   od bloku uzytkownika), .a-navpills nadal ma WLASNY flex-wrap:wrap
   nizej , gdyby zabraklo miejsca, to POZYCJE W SRODKU (pillsy) zawijaja
   sie do drugiego wiersza W SOBIE, NIE caly blok uzytkownika. Zawijanie
   calego paska (nowrap -> wrap) dopiero ponizej ~1100px, patrz media
   query przy koncu tego bloku. */
.v-topmenu-inner, .a-topmenu-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 6px 8px;
  padding: 10px clamp(14px, 2vw, 22px);
}
@media (max-width: 1100px) {
  .v-topmenu-inner, .a-topmenu-inner { flex-wrap: wrap; }
}
.v-brand, .a-brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.01em; color: var(--v-text); text-decoration: none;
  flex: 0 0 auto; padding: 4px 0;
}
.v-brand:hover, .a-brand:hover { color: var(--v-accent); }
.v-brand-mark, .a-brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--v-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
/* AURORA (D957 pkt 3): wordmark "sDMT" chromu klienta w gradiencie marki
   (viral_base.html , usunieta osobna kwadratowa plakietka .v-brand-mark). */
.v-brand-name {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  background: var(--au-gradient-tekst); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.v-brand:hover .v-brand-name { filter: brightness(1.06); }
.v-navpills, .a-navpills {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  background: var(--v-surface); border: 1px solid var(--v-border);
  border-radius: var(--au-promien-pigulka); padding: 4px;
}
/* Zadanie J punkt 1 (zachowane w E2): DWA/TRZY obszary z etykieta grupy ,
   granica KLIENCI / PLATFORMA VIRALI / SYSTEM ma zostac CZYTELNA rowniez
   w pastylkach, nie tylko w pionowym sidebarze. */
.v-navpills-label, .a-navpills-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--v-muted); padding: 0 1px; flex: 0 0 auto; white-space: nowrap;
}
.v-navpills-sep, .a-navpills-sep {
  width: 1px; align-self: stretch; min-height: 18px;
  background: var(--v-border); margin: 0 1px; flex: 0 0 auto;
}
.v-pilllink, .a-pilllink {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--v-muted); text-decoration: none; font-weight: 600; font-size: 13px;
  white-space: nowrap; transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.v-pilllink:hover, .a-pilllink:hover { background: var(--v-off-bg); color: var(--v-text); }
/* AURORA (D957 pkt 3): wskaznik aktywnej pigulki = gradient marki + glow,
   przejscie animowane (transition powyzej) zamiast plaskiego akcentu. */
.v-pilllink.on, .a-pilllink.on { background: var(--au-gradient); color: #fff; font-weight: 700; box-shadow: var(--au-glow-pigulka); }
.v-pilllink.on:hover, .a-pilllink.on:hover { background: var(--au-gradient); color: #fff; }
.v-pilllink.a-locked, .a-pilllink.a-locked { opacity: .5; cursor: not-allowed; }
/* Poprawka po odbiorze D408 (1440px, pasek w jednym rzedzie): pozycje grupy
   System "mniej eksponowane" (Konta portalu, Stary widok) , mniejsza
   pastylka odzyskuje miejsce w wasko-shrinkowanym .a-navpills. */
.a-pilllink-sm { padding: 4px 6px; font-size: 11px; }
.v-nav-badge, .a-nav-badge {
  font-size: 10.5px; font-weight: 700; background: var(--v-err-bg); color: var(--v-err-fg);
  border-radius: 999px; padding: 1px 6px;
}
/* 2026-09-08 (przeglad nawigacji klienta): klientka ma juz TYLKO jedna
   pozycje w miejscu dawnego paska pigulek (Do akceptacji/Koncepty
   usuniete, patrz viral_base.html) , zamiast pastylki samotnej w duzym
   pustym .v-navpills, prosty tytul sekcji w stylu Aurora (ta sama
   gradientowa czcionka co wordmark marki .v-brand-name, D957 pkt 3). */
.v-section-title {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; padding: 8px 2px;
  background: var(--au-gradient-tekst); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.v-section-title:hover, .v-section-title:visited, .v-section-title:active {
  color: transparent; -webkit-text-fill-color: transparent; text-decoration: none;
}
.v-section-title:hover { filter: brightness(1.06); }
.v-topmenu-user, .a-topmenu-user {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
/* D408: nazwa zalogowanego przy przycisku Wyloguj (prawy kraniec paska) ,
   zwykly tekst, nie link/przycisk, wiec wlasna, minimalna klasa. */
.a-user-name {
  font-size: 12.5px; color: var(--v-muted); padding: 7px 8px; white-space: nowrap;
}
.v-theme-btn, .v-link, .v-powrot, .a-theme-btn, .a-link {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; text-align: left; cursor: pointer;
  color: var(--v-muted); font-size: 12.5px; font-weight: 500;
  padding: 7px 8px; border-radius: var(--v-radius-sm); text-decoration: none;
  font-family: var(--v-font);
}
.v-theme-btn:hover, .v-link:hover, .v-powrot:hover, .a-theme-btn:hover, .a-link:hover {
  background: var(--v-off-bg); color: var(--v-text);
}
/* W sidebarze .v-link/.v-powrot byly width:100% (kolumna). W poziomym pasku
   uzytkownika maja zostac naturalnej szerokosci , nadpisanie TYLKO w tym
   kontekscie, reszta uzyc .v-link (admin_style.html, admin_koncepty.html) nietknieta. */
.v-topmenu-user .v-link, .v-topmenu-user .v-powrot,
.a-topmenu-user .v-link, .a-topmenu-user .a-link { width: auto; }
.a-link-old { font-size: 11.5px; opacity: .85; }

/* ======================================================================
   SIDEBAR ADMINA (D957, punkt 2) , zastepuje poziome menu pastylkowe
   .topnav/.menu/.tools-* powyzej (zostaje w pliku jako martwy kod, admin_base.html
   go juz nie renderuje , zero ryzyka usuwania 150 linii na produkcji).
   3 grupy (Klient/Automatyzacja/System), skladany (zwiniete = wask pasek
   ikon), stan w localStorage (static/aurora_ui.js). Selektor klienta
   zostaje w .a-topbar (nizej), poza sidebarem. ====================== */
.a-shell { display: flex; align-items: flex-start; min-height: 100vh; max-width: 100vw; }
.a-content { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.side-nav {
  --sn-w: 240px;
  width: var(--sn-w); flex: 0 0 auto;
  background: var(--v-surface); border-right: 1px solid var(--v-border);
  display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
  transition: width .18s ease;
}
.side-nav.zwiniete { --sn-w: 72px; }
.side-nav__marka {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px;
  border-bottom: 1px solid var(--v-border); flex: 0 0 auto;
}
.side-nav__marka-tekst {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  background: var(--au-gradient-tekst); -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; overflow: hidden; text-decoration: none;
}
.side-nav.zwiniete .side-nav__marka-tekst,
.side-nav.zwiniete .side-nav__etykieta,
.side-nav.zwiniete .side-nav__grupa-tytul,
.side-nav.zwiniete .side-nav__user-info { display: none; }
.side-nav__zwin {
  margin-left: auto; border: 1px solid var(--v-border); background: var(--v-surface); border-radius: 8px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--v-muted); flex: 0 0 auto;
}
.side-nav.zwiniete .side-nav__zwin { margin-left: 0; }
.side-nav__zwin:hover { color: var(--v-text); border-color: var(--color-border-strong); }
.side-nav__zwin svg { transition: transform .18s ease; }
.side-nav.zwiniete .side-nav__zwin svg { transform: rotate(180deg); }

.side-nav__body { padding: 14px 10px; overflow-y: auto; flex: 1 1 auto; }
.side-nav__grupa { margin-bottom: 18px; }
.side-nav__grupa-tytul {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--au-tekst-3); padding: 0 10px; margin: 0 0 6px;
}
.side-nav__link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--v-muted); text-decoration: none;
  margin-bottom: 2px; white-space: nowrap;
}
.side-nav__link svg { flex: 0 0 auto; width: 17px; height: 17px; }
.side-nav__link:hover { background: var(--v-off-bg); color: var(--v-text); }
.side-nav__link.on {
  color: var(--au-indygo); font-weight: 700;
  background: linear-gradient(90deg, rgba(147,51,234,.10), rgba(219,39,119,.03));
}
.side-nav__link.a-locked { opacity: .5; cursor: not-allowed; pointer-events: none; }
.side-nav.zwiniete .side-nav__link { justify-content: center; padding: 10px; }
.side-nav__badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; background: var(--au-status-blad-bg);
  color: var(--au-status-blad-fg); border-radius: var(--au-promien-pigulka); padding: 1px 7px;
}
.side-nav.zwiniete .side-nav__badge { display: none; }

/* stopka: "Widok klienta" (reuzywa .tools-menu/.tools-dropdown , patrz wyzej)
   + uzytkownik/Wyloguj */
.side-nav__stopka { border-top: 1px solid var(--v-border); padding: 10px; flex: 0 0 auto; }
.side-nav__stopka .tools-menu { width: 100%; margin-bottom: 6px; }
.side-nav__stopka .tools-trigger { width: 100%; justify-content: flex-start; border-radius: 9px; border-color: var(--v-border); font-size: 12.5px; }
.side-nav__stopka .tools-dropdown { bottom: calc(100% + 8px); top: auto; left: 0; right: auto; }
.side-nav.zwiniete .side-nav__stopka .tools-trigger { justify-content: center; padding: 9px; gap: 0; }
.side-nav.zwiniete .side-nav__stopka .tools-trigger svg:last-child { display: none; }
.side-nav__user { display: flex; align-items: center; gap: 8px; padding: 4px; }
.side-nav__user-info { min-width: 0; flex: 1 1 auto; }
.side-nav__user-name { font-size: 12.5px; font-weight: 600; color: var(--v-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav__user .logout-link { font-size: 11.5px; }
.side-nav.zwiniete .side-nav__user { justify-content: center; }

/* topbar mobile (logo + hamburger CSS-only) , widoczny WYLACZNIE <=768px */
.a-mobile-topbar, .sidebar-scrim { display: none; }
.mnav-toggle-input { display: none; }
@media (max-width: 768px) {
  .a-mobile-topbar {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--v-surface); border-bottom: 1px solid var(--v-border);
    position: sticky; top: 0; z-index: 61;
  }
  .a-mobile-topbar__logo {
    font-size: 17px; font-weight: 800; letter-spacing: -.02em;
    background: var(--au-gradient-tekst); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .mnav-toggle-input {
    display: block; appearance: none; -webkit-appearance: none;
    position: relative; width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--v-border); background: var(--v-surface); margin: 0; padding: 0;
    cursor: pointer; flex: 0 0 auto;
  }
  .mnav-toggle-input::before, .mnav-toggle-input::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 2px; background: var(--v-text); transform: translate(-50%, -50%);
    transition: transform .15s ease;
  }
  .mnav-toggle-input::before { box-shadow: 0 -5px 0 var(--v-text), 0 5px 0 var(--v-text); }
  .mnav-toggle-input:checked::before { box-shadow: none; transform: translate(-50%, -50%) rotate(45deg); }
  .mnav-toggle-input:checked::after { transform: translate(-50%, -50%) rotate(-45deg); }

  .a-shell { display: block; }
  .side-nav {
    position: fixed; z-index: 62; left: 0; top: 0; bottom: 0; --sn-w: 264px;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--au-cien-lg);
  }
  body:has(.mnav-toggle-input:checked) .side-nav { transform: translateX(0); }
  .side-nav__zwin { display: none; }
  .sidebar-scrim {
    position: fixed; inset: 0; background: rgba(17,17,17,.32); z-index: 59;
  }
  body:has(.mnav-toggle-input:checked) .sidebar-scrim { display: block; }
  .a-content { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .side-nav, .side-nav__zwin svg, .mnav-toggle-input::before, .mnav-toggle-input::after { transition: none; }
}

/* Hotfix szerokosci (D966): sidebar admina responsywny, zeby na wezszych
   efektywnych szerokosciach (zoom 125-150% na laptopie) sidebar nie
   zabieral za duzo miejsca tresci. 240px zostaje TYLKO od 1400px w gore
   (wartosc domyslna --sn-w w .side-nav powyzej); 1200-1399px , 200px;
   ponizej 1200px (ale powyzej mobile 768px, ktory ma WLASNY off-canvas
   ukladwyzej) , automatyczne zwiniecie do paska ikon, NIEZALEZNIE od stanu
   zapisanego w localStorage (ten ma pierwszenstwo TYLKO >=1200px , stad
   przycisk zwijania tez ukryty w tym zakresie, zeby nie sugerowac wyboru,
   ktorego i tak nie da sie utrzymac). */
@media (max-width: 1399px) and (min-width: 1200px) {
  .side-nav { --sn-w: 200px; }
}
@media (max-width: 1199px) and (min-width: 769px) {
  .side-nav { --sn-w: 72px; }
  .side-nav__marka-tekst, .side-nav__etykieta, .side-nav__grupa-tytul, .side-nav__user-info { display: none; }
  .side-nav__link { justify-content: center; padding: 10px; }
  .side-nav__zwin { display: none; }
}

/* ---------- TOPBAR DRUGORZEDNY (wybor klienta + dzwonek, Zadanie H, w a-main) ---------- */
.a-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--v-border);
  background: var(--v-surface);
}
.a-klient-form { display: flex; align-items: center; gap: 10px; }
.a-klient-select {
  font-size: 13.5px; font-weight: 500; padding: 7px 11px; border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border); background: var(--v-bg); color: var(--v-text);
  font-family: var(--v-font); min-width: 210px;
}
.a-nieaktywni-link { font-size: 12.5px; color: var(--v-muted); text-decoration: none; }
.a-nieaktywni-link:hover { color: var(--v-accent); }
.a-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; background: var(--v-off-bg);
  color: var(--v-text); text-decoration: none; font-weight: 700; font-size: 12px;
}
.a-bell:hover { background: var(--v-border); }
.a-bell-count {
  position: absolute; top: -3px; right: -3px; background: var(--v-err-fg); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------- GLOWNA TRESC ---------- */
.v-main, .a-main { flex: 1; min-width: 0; padding: 26px clamp(16px, 4vw, 40px) 60px; }
.a-main { padding: 0; }
.a-wrap { max-width: var(--v-maxw); margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 60px; }
.v-wrap { max-width: var(--v-maxw); margin: 0 auto; }

.v-preview-bar, .a-preview-bar {
  background: var(--v-warn-bg); color: var(--v-warn-fg);
  text-align: center; font-size: 13px; padding: 9px 14px;
  border-radius: var(--v-radius-sm); margin-bottom: 16px;
}
.v-preview-bar a { color: var(--v-warn-fg); }
/* Z214: "Wróć do panelu admina" jest teraz formularz+przycisk (POST czyszczacy
   tryb klienta w sesji), nie zwykly link , wpisany w linie tekstu paska. */
.v-preview-bar-form { display: inline; }
.v-preview-bar .v-link { display: inline; padding: 0; color: var(--v-warn-fg); text-decoration: underline; }

.v-head { margin-bottom: 20px; }
.v-head h1, .a-head h1 { font-size: clamp(20px, 1.2vw + 12px, 24px); margin: 0 0 5px; letter-spacing: -0.015em; font-weight: 600; }
.v-head p, .a-head p { margin: 0; color: var(--v-muted); font-size: 14px; }
.a-head { margin-bottom: 18px; }

.v-stack, .a-stack { display: flex; flex-direction: column; gap: 16px; }
.v-stack-sm, .a-stack-sm { display: flex; flex-direction: column; gap: 9px; }
.v-row, .a-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.v-row-between, .a-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Zadanie J punkt 2: subtelny pasek etapu, WYLACZNIE strony Platformy Virali.
   Celowo cichy: jedna linia tekstu + kropka, NIE wielki wezlowy pasek
   (ten dawny, KN Zadania D, znika ze wszystkich kart per decyzje wlasciciela). */
.v-etap-subtelny {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--v-muted); margin: -8px 0 4px;
}
.v-etap-subtelny .kropka {
  width: 6px; height: 6px; border-radius: 999px; background: var(--v-accent); flex: 0 0 auto;
}
.v-etap-subtelny strong { color: var(--v-text); font-weight: 600; }

/* Zlecenie wlasciciela 2026-08-19: pasek KROKOW procesu Platformy Virali ,
   klikalna nawigacja gora tresci (Tworcy -> Przebiegi -> Wyniki -> Selekcja
   -> Koncepty), zeby nie trzeba bylo klikac w lewe menu. Wzor: kreatory
   duzych platform (1-2-3-4-5, aktualny podswietlony, poprzednie klikalne,
   nastepny jako przycisk ze strzalka). Renderowany przez partial
   templates/_virale_kroki.html, wlaczany w kazdym z 5 widokow. Odrebny od
   .v-etap-subtelny wyzej (ten zostaje "cichy" tam, gdzie krokow nie ma,
   np. Prompty). */
.v-kroki {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin: 0 0 16px; padding: 8px 10px; background: var(--v-surface);
  border: 1px solid var(--v-border); border-radius: var(--v-radius);
}
.v-kroki-brak { margin: 0 0 16px; font-size: 12.5px; color: var(--v-muted); }
.v-krok {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; padding: 6px 10px; border-radius: 999px; text-decoration: none;
  color: var(--v-muted); background: transparent; white-space: nowrap; line-height: 1;
}
.v-krok-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; font-size: 11px;
  background: var(--v-off-bg); color: var(--v-off-fg); flex: 0 0 auto;
}
a.v-krok-zrobiony { color: var(--v-ok-fg); }
a.v-krok-zrobiony .v-krok-nr { background: var(--v-ok-bg); color: var(--v-ok-fg); }
a.v-krok-zrobiony:hover { background: var(--v-off-bg); }
.v-krok-aktualny { color: var(--v-text); background: var(--v-off-bg); cursor: default; }
.v-krok-aktualny .v-krok-nr { background: var(--v-accent); color: var(--v-accent-contrast); }
a.v-krok-pozniej { color: var(--v-muted); }
a.v-krok-pozniej:hover { background: var(--v-off-bg); }
a.v-krok-nastepny {
  color: var(--v-accent-contrast); background: var(--v-accent); font-weight: 700;
}
a.v-krok-nastepny .v-krok-nr { background: rgba(255, 255, 255, 0.28); color: #fff; }
a.v-krok-nastepny:hover { background: var(--v-accent-strong); }
.v-krok-strzalka { font-size: 13px; }
.v-krok-lacznik { color: var(--v-border); font-size: 12px; flex: 0 0 auto; padding: 0 2px; }

/* ---------- SIATKA KAFLI ---------- */
.v-grid, .a-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.a-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .a-grid-2 { grid-template-columns: 1fr; } }

/* ---------- KARTY ---------- */
.v-card, .a-card {
  background: var(--v-surface); border: 1px solid var(--v-border);
  border-radius: var(--v-radius); padding: 18px; box-shadow: var(--v-shadow);
}
.v-card h2, .a-card h2 { font-size: 15.5px; margin: 0 0 4px; font-weight: 600; }
.a-card h3 { font-size: 13.5px; margin: 0 0 4px; font-weight: 600; }

/* ---------- PILL / ZNACZKI ---------- */
.v-pill, .a-pill {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--v-off-bg); color: var(--v-off-fg);
}
.v-pill.ok, .a-pill.ok { background: var(--v-ok-bg); color: var(--v-ok-fg); }
.v-pill.err, .a-pill.err { background: var(--v-err-bg); color: var(--v-err-fg); }
.v-pill.warn, .a-pill.warn { background: var(--v-warn-bg); color: var(--v-warn-fg); }
.v-pill.accent, .a-pill.accent { background: var(--v-accent); color: var(--v-accent-contrast); }
.v-pill.off { background: var(--v-off-bg); color: var(--v-off-fg); }

/* ---------- KAFEL TWORCY / ROLKI (juz uzywany w szablonach, dawniej bez arkusza) ---------- */
.v-tile { display: flex; flex-direction: column; gap: 11px; }
.v-thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--v-radius-sm);
  overflow: hidden; background: var(--v-off-bg);
}
.v-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-thumb-badge {
  position: absolute; left: 9px; bottom: 9px;
  background: rgba(23, 23, 26, 0.72); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.v-avatar {
  width: 48px; height: 48px; border-radius: 999px; background: var(--v-off-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--v-accent); font-size: 16px; flex: 0 0 auto;
}
.v-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-handle { font-weight: 600; font-size: 14px; }
.v-tile-meta { font-size: 12.5px; color: var(--v-muted); }
.v-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 4px 0; }
.v-metric { background: var(--v-off-bg); border-radius: var(--v-radius-sm); padding: 7px 5px; text-align: center; }
.v-metric-num { display: block; font-weight: 700; font-size: 14px; }
.v-metric-label { font-size: 10.5px; color: var(--v-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- PRZYCISKI (AURORA D957: glowny = gradient + glow + polysk na
   hover, drugi = obrys, stan ladowania ze spinnerem) ---------- */
.v-btn, .a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--v-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-family: var(--v-font); position: relative;
}
.v-btn.primary, .a-btn.primary {
  background: var(--au-gradient); color: var(--v-accent-contrast); border-color: transparent;
  box-shadow: var(--au-glow-btn); overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.v-btn.primary::after, .a-btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.v-btn.primary:hover, .a-btn.primary:hover { background: var(--au-gradient); transform: translateY(-1px); box-shadow: var(--au-glow-btn-hover); }
.v-btn.primary:hover::after, .a-btn.primary:hover::after { transform: translateX(120%); }
/* obrys , drugi rzad przyciskow (bylo: wypelnienie szarym) */
.v-btn.ghost, .a-btn.ghost { background: var(--v-surface); color: var(--v-text); border-color: var(--v-border); }
.v-btn.ghost:hover, .a-btn.ghost:hover { background: var(--v-bg); border-color: var(--color-border-strong); }
.v-btn:active, .a-btn:active { transform: scale(.98); }
.v-btn:disabled, .v-btn.oczekuje { opacity: .55; pointer-events: none; }
.v-btn.primary:disabled, .a-btn.primary:disabled { box-shadow: none; transform: none; }
.v-btn.primary:disabled::after, .a-btn.primary:disabled::after { display: none; }
/* D720: .a-btn (uzywany w /admin/plan) BEZ pointer-events:none , przycisk
   'Akceptuj tekst' zablokowany bez wariantu nadal ma dzialajacy title=
   'Wybierz wariant' na hover (natywny tooltip disabled buttonow). */
.a-btn:disabled { opacity: .55; cursor: not-allowed; }
.v-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v-btn-row .v-btn { flex: 1 1 auto; }

/* Stan ladowania (D957 pkt 4): KAZDY formularz POST z przyciskiem glownym
   dostaje te klase + disabled na submit (patrz static/aurora_ui.js) , blokuje
   podwojne klikniecie. Dziala tez na .ghost (spinner ciemny zamiast bialego).
   Selektor `.is-loading::after` MUSI byc ZA `.primary::after` powyzej (rowna
   specyficznosc, wygrywa kolejnosc w pliku) , nadpisuje polysk spinnerem. */
.v-btn.is-loading, .a-btn.is-loading { color: transparent; pointer-events: none; }
.v-btn.is-loading::after, .a-btn.is-loading::after {
  content: ""; position: absolute; inset: auto; top: 50%; left: 50%; margin: -7.5px 0 0 -7.5px;
  width: 15px; height: 15px; border-radius: 50%; background: none; transform: none;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: au-spin .7s linear infinite;
}
.v-btn.ghost.is-loading::after, .a-btn.ghost.is-loading::after {
  border-color: rgba(17,17,17,.25); border-top-color: var(--v-text);
}
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .v-btn.is-loading::after, .a-btn.is-loading::after { animation: none; border-top-color: rgba(255,255,255,.9); }
  .v-btn.ghost.is-loading::after, .a-btn.ghost.is-loading::after { border-top-color: var(--v-text); }
}

/* ---------- ROZWIJANE PANELE ---------- */
.v-disclosure { border-top: 1px solid var(--v-border); padding-top: 9px; margin-top: 2px; }
.v-disclosure > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--v-text);
  padding: 5px 2px;
}
.v-disclosure > summary::-webkit-details-marker { display: none; }
.v-disclosure > summary::after { content: "+"; color: var(--v-muted); font-weight: 700; }
.v-disclosure[open] > summary::after { content: "-"; }
.v-disclosure-body { padding: 9px 2px 2px; font-size: 13.5px; }
/* Zadanie M2, znalezisko przy zrzutach K6: bare '1fr' bez minmax(0, ...) NIE
   kurczy sie ponizej min-content swojej tresci , dla krotkich metadanych
   (dotychczasowy jedyny uzytek tej reguly) bylo to niewidoczne, ale dla
   DLUGIEGO tekstu DM (private_reply/followup, wielozdaniowy) tekst
   przelewal sie POZA modal zamiast zawijac sie normalnie. minmax(0, 1fr)
   to standardowa naprawa tego efektu ("grid blowout"). */
.v-disclosure-body dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 11px; }
.v-disclosure-body dt { color: var(--v-muted); font-weight: 500; }
.v-disclosure-body dd { margin: 0; }
/* Zadanie W1 (2026-08-20, naprawa specyficznosci): wzorzec
   <dl class="v-disclosure-body v-tight-dl"> (Selekcja, Koncepty, popup
   Wynikow) klada klase v-disclosure-body NA SAMYM dl, nie na opakowujacym
   elemencie , descendant selector wyzej (".v-disclosure-body dl") taki
   dl nigdy nie lapal (dt/dd dostawaly kolor, bo SA potomkami, ale caly
   dl zostawal jednokolumnowy zamiast siatki). Dopisujemy wariant na sam
   element, zeby oba wzorce znaczyly wizualnie to samo. */
dl.v-disclosure-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 11px; margin: 0; }
.v-disclosure-body .v-empty { color: var(--v-muted); }

/* ---------- D870/Etap 1 (2026-09-04): edycja tekstu opisu w oknie kalendarza ---------- */
.v-btn.sm { padding: 6px 10px; font-size: 12.5px; }
.v-tekst-edycja-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-tekst-licznik { font-size: 11.5px; color: var(--v-muted); text-align: right; margin-top: 3px; }
.v-tekst-licznik.przekroczony { color: var(--v-danger, #c0392b); font-weight: 600; }
.v-tekst-edycja-akcje { display: flex; gap: 8px; margin-top: 8px; }
.v-tekst-baner-zmiana {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--v-radius-sm);
  background: color-mix(in srgb, var(--v-accent) 12%, transparent); font-size: 13px;
}
#v-tekst-wersje-lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.v-tekst-wersja {
  border: 1px solid var(--v-border); border-radius: var(--v-radius-sm); padding: 8px 10px; font-size: 12.5px;
}
.v-tekst-wersja-meta { color: var(--v-muted); margin-bottom: 4px; }

/* ---------- D870/Etap 2 (2026-09-04): edycja tekstu plansz/slajdow/okladki ---------- */
.v-plansza-edytory { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v-plansza-edytor-blok { display: inline-flex; }


/* ---------- FORMULARZE ---------- */
.v-field { display: flex; flex-direction: column; gap: 5px; }
.v-field label { font-weight: 500; font-size: 13.5px; }
.v-hint { font-size: 11.5px; color: var(--v-muted); margin: 0; }
.v-input, .v-select, .v-textarea {
  width: 100%; font-size: 14px; padding: 9px 11px; border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm); background: var(--v-surface); color: var(--v-text); font-family: var(--v-font);
}
.v-textarea { resize: vertical; }
.v-textarea.mono { font-family: var(--v-mono); font-size: 12.5px; }
.v-select:focus {
  outline: 2px solid color-mix(in srgb, var(--v-accent) 35%, transparent);
  border-color: var(--v-accent);
}
/* E2/Z301 punkt 4: focus ring GRADIENTOWY (Aurora) na pola tekstowe i
   textarea , dwie warstwy background (tresc plaska, obwodka gradientowa
   przez background-origin/clip), border zostaje 1px wiec uklad sie nie
   przesuwa. .v-select zostaje jednokolorowy (natywna strzalka przegladarki,
   zero ryzyka niespojnego malowania tla pod nia). */
.v-input:focus, .v-textarea:focus {
  outline: none; border-color: transparent;
  background-image: linear-gradient(var(--v-surface), var(--v-surface)),
                     var(--au-gradient, linear-gradient(135deg, var(--v-accent), var(--v-accent)));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-fiolet, var(--v-accent)) 16%, transparent);
}

/* ---------- TABELA ---------- */
.v-table-wrap, .a-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-tbl, .a-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.v-tbl th, .v-tbl td, .a-tbl th, .a-tbl td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--v-border); }
.v-tbl th, .a-tbl th { color: var(--v-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
/* E2/Z301 punkt 5: zebra + naglowek przyklejony (aurora.css wzorzec), na
   TYCH SAMYCH klasach , zero nowego komponentu tabeli. */
.v-tbl thead th, .a-tbl thead th { position: sticky; top: 0; background: var(--v-surface); z-index: 1; }
.v-tbl tbody tr:nth-child(even), .a-tbl tbody tr:nth-child(even) { background: var(--v-bg); }

/* Hotfix szerokosci (D966): .v-table/.a-table (admin_reklamy, admin_ab,
   admin_lead_magnety) byly UZYWANE w szablonach BEZ zadnego CSS (literowka
   wzgledem .v-tbl powyzej) i BEZ wrappera .v-table-wrap , tabela renderowala
   sie w naturalnej szerokosci przegladarki, szerszej niz karta, i pchala
   cala strone w poziomie. display:block + overflow-x:auto na SAMEJ tabeli
   daje przewijanie w poziomie bez konieczności dodawania wrappera w kazdym
   szablonie (tbody/tr/td zachowuja wlasny uklad tabeli niezaleznie od
   display elementu <table>, to standardowa technika). */
.v-table, .a-table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.v-table th, .v-table td, .a-table th, .a-table td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--v-border); white-space: nowrap; }
.v-table th, .a-table th { color: var(--v-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
/* E2/Z301 punkt 5: zebra + naglowek przyklejony , jak .v-tbl powyzej. */
.v-table thead th, .a-table thead th { position: sticky; top: 0; background: var(--v-surface); z-index: 1; }
.v-table tbody tr:nth-child(even), .a-table tbody tr:nth-child(even) { background: var(--v-bg); }

/* ---------- FILTR PIGULKI NAD TABELA (E2/Z301 punkt 5) , JS klienta,
   bez przeladowania: .v-table-filtr zawiera pigulki data-filtr="status",
   wiersze tabeli oznaczone data-status="..." (patrz static/app_virale.js
   funkcja podepnijFiltryTabel , dziala na KAZDEJ tabeli z ta struktura,
   uzyte dzis w Historii akcji reklam). ---------- */
.v-table-filtr { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.v-table-filtr button {
  border: 1px solid var(--v-border); background: var(--v-surface); color: var(--v-muted);
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: var(--v-radius-pigulka, 999px); cursor: pointer;
}
.v-table-filtr button:hover { border-color: var(--v-obramowanie-mocne, var(--v-border)); color: var(--v-text); }
.v-table-filtr button.on { background: var(--au-gradient, var(--v-accent)); color: #fff; border-color: transparent; }

/* ---------- STANY PUSTE / KOMUNIKATY ---------- */
.v-empty, .a-empty { color: var(--v-muted); text-align: center; padding: 26px 14px; font-size: 13.5px; }
.v-alert { padding: 11px 15px; border-radius: var(--v-radius-sm); font-size: 13.5px; }
.v-alert.ok { background: var(--v-ok-bg); color: var(--v-ok-fg); }
.v-alert.err { background: var(--v-err-bg); color: var(--v-err-fg); }
.v-stan { font-size: 12.5px; min-height: 18px; }
.v-stan.ok { color: var(--v-ok-fg); }
.v-stan.err { color: var(--v-err-fg); }
.v-stan.warn { color: var(--v-warn-fg); }

/* ---------- STATYSTYKI ---------- */
.v-stat-grid, .a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; margin-top: 14px; }
.a-stats { margin-top: 0; }
.v-stat-tile, .a-stat { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 12px; text-align: center; }
.a-stat { text-align: left; }
.v-stat-num { font-size: 20px; font-weight: 700; display: block; }
.v-stat-label { font-size: 11px; color: var(--v-muted); }
.a-stat-lbl { font-size: 10.5px; color: var(--v-muted); text-transform: uppercase; letter-spacing: .04em; }
.a-stat-val { font-size: 17px; font-weight: 700; margin-top: 2px; }
.a-stat-sub { font-size: 11.5px; color: var(--v-muted); }
.v-log, .a-log {
  background: var(--v-off-bg); border-radius: var(--v-radius-sm); padding: 12px 14px; font-size: 12px;
  font-family: var(--v-mono); white-space: pre-wrap; word-break: break-word;
  max-height: 380px; overflow-y: auto; color: var(--v-text);
}
.a-log-line { padding: 2px 0; border-bottom: 1px solid var(--v-border); }
.a-log-line:last-child { border-bottom: none; }
.a-log-src { color: var(--v-muted); margin-right: 6px; }

/* ---------- LISTY POZYCJI (Start S1/S2) ---------- */
.a-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--v-border); border-radius: var(--v-radius-sm); font-size: 12.5px;
}
.a-item-czas { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--v-muted); flex: 0 0 auto; }
.a-item-klient { font-weight: 600; flex: 0 0 auto; }
.a-item-tresc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- KAFLE ZDROWIA (Start S3) ---------- */
.a-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 11px; }
.a-health-tile { border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 13px; background: var(--v-surface); }
.a-health-tile h3 { margin: 0 0 7px; }
.a-health-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--v-muted); padding: 3px 0; }
.a-health-row strong { color: var(--v-text); }

/* ---------- SCENY ---------- */
.v-sceny { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.v-sceny li { display: flex; gap: 9px; font-size: 12.5px; }
.v-sceny-czas { flex: 0 0 auto; font-weight: 600; color: var(--v-accent); font-family: var(--v-mono); }

/* ======================================================================
   KALENDARZ (naprawa regresji K3: IDENTYCZNA struktura co u klientki)
   ====================================================================== */
.v-cal-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start;
  min-width: 0; font-size: 13px;
}
@media (max-width: 980px) { .v-cal-layout { grid-template-columns: minmax(0, 1fr); } }

/* Hotfix szerokosci (D966): repeat(7, 1fr) BEZ minmax(0, ...) liczy minimum
   kazdej kolumny z tresci komorki (chipy nowrap) , kolumny nie moga sie
   skurczyc ponizej tego minimum, wiec CALA siatka (i strona) rozjezdzala
   sie w poziomie. minmax(0, 1fr) pozwala kolumnie skurczyc sie do 0, chipy
   w srodku dostaly wlasny overflow/ellipsis nizej (.v-chip, .v-chip-kod). */
.v-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--v-border); border: 1px solid var(--v-border);
  border-radius: var(--v-radius); overflow: hidden; min-width: 0;
}
.v-cal-dow {
  background: var(--v-surface-2); color: var(--v-muted); font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 9px; text-align: center;
}
.v-cal-day {
  background: var(--v-surface); min-height: 104px; padding: 7px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.v-cal-day.v-cal-poza { background: var(--v-bg); opacity: .6; }
.v-cal-day.v-cal-dzis { box-shadow: inset 0 0 0 2px var(--v-accent); }
.v-cal-daynum { font-size: 12px; font-weight: 600; color: var(--v-muted); }
.v-cal-day.v-cal-dzis .v-cal-daynum { color: var(--v-accent); }

.v-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0;
  max-width: 100%; overflow: hidden;
  font-size: 10.5px; font-weight: 600; padding: 4px 7px; border-radius: 999px;
  text-decoration: none; color: var(--v-text); background: var(--v-off-bg);
  border: 1px solid var(--v-border);
  font-family: var(--v-font); cursor: pointer; text-align: left;
}
.v-chip-ikona {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  background: var(--v-border); color: var(--v-text); font-size: 8.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border: 2px solid var(--v-muted); overflow: hidden; box-sizing: border-box;
}
.v-chip-ig .v-chip-ikona { border-color: var(--v-ig); }
.v-chip-fb .v-chip-ikona { border-color: var(--v-fb); }
.v-chip-czas { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.v-chip-kod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

/* Wlasciciel 2026-09-18: plakietka kanalu IG/FB , ikona SVG inline + tekst,
   JEDNO miejsce prawdy (macro plakietka_kanalu, templates/viral_kalendarz.html),
   uzywana w kafelku kalendarza (chip) i w liscie "Nadchodzace". Kolory =
   istniejace tokeny --v-ig/--v-fb (te same, ktore juz barwia obwodke ikony
   S/R w chipie , zero nowych kolorow). */
.v-plakietka-kanal {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 1px 5px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  line-height: 1.5; white-space: nowrap;
}
.v-plakietka-kanal svg { flex: 0 0 auto; display: block; }
.v-plakietka-kanal--ig { background: color-mix(in srgb, var(--v-ig) 14%, var(--v-surface)); color: var(--v-ig); }
.v-plakietka-kanal--fb { background: color-mix(in srgb, var(--v-fb) 14%, var(--v-surface)); color: var(--v-fb); }

/* W kafelku kalendarza chip jest bardzo waski (D967: ponizej 1400px
   .v-chip-kod znika calkowicie , plakietka zostaje JEDYNYM widocznym
   znacznikiem kanalu w tym momencie), wiec dostaje mniejsza, dopasowana do
   skali chipa (10.5px) wersje , ikona i tekst ZOSTAJA, tylko mniejsze. */
.v-chip .v-plakietka-kanal { padding: 0 4px; font-size: 8.5px; gap: 2px; }
.v-chip .v-plakietka-kanal svg { width: 11px; height: 11px; }

/* E2/Z301 punkt 7 (D967): pod 1400px chip kalendarza obcinal tytul do 1-2
   liter (kolumna zbyt waska na ikone+godzine+kod jednoczesnie) , ponizej
   tego progu zostaje WYLACZNIE ikona formatu + godzina, pelny tytul dalej
   dostepny w atrybucie title (tooltip na hover + czytniki ekranu, patrz
   templates/viral_kalendarz.html macro chip()). Od 1400px w gore bez zmian. */
@media (max-width: 1400px) {
  .v-chip-kod { display: none; }
  .v-chip { justify-content: center; gap: 4px; }
}

.v-chip-czeka { background: var(--v-warn-bg); color: var(--v-warn-fg); border-style: dashed; }
.v-chip-zaakceptowana { background: var(--v-ok-bg); color: var(--v-ok-fg); }
.v-chip-zaakceptowana .v-chip-ikona { background: var(--v-ok-fg); color: var(--v-ok-bg); }
.v-chip-wstrzymana { background: var(--v-off-bg); color: var(--v-off-fg); opacity: .85; }
.v-chip-opublikowana {
  background: color-mix(in srgb, var(--v-fb) 14%, var(--v-surface));
  color: var(--v-fb); cursor: default; pointer-events: none;
}
.v-chip-opublikowana .v-chip-ikona { background: var(--v-fb); color: #fff; }
button.v-chip:hover:not(.v-chip-opublikowana) { filter: brightness(0.97); background: var(--v-border); }
button.v-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--v-accent) 45%, transparent); }

/* Zadanie DO NAGRANIA (2026-09-02): chip WYRAZNIE inny niz IG/FB , obwodka +
   tlo w tonacji ostrzezenia (--v-err), niezaleznie od stanu (czeka/opublikowana),
   zeby rzucal sie w oczy w siatce miesiaca. */
.v-chip-do-nagrania {
  border: 2px solid var(--v-err-fg); background: var(--v-err-bg); color: var(--v-err-fg);
  font-weight: 700;
}
.v-chip-do-nagrania .v-chip-ikona { background: var(--v-err-fg); color: #fff; border-color: var(--v-err-fg); }

/* D951 (4): wpis 'nagranie' JUZ oznaczony jako nagrany (viral_db.
   oznacz_nagranie_gotowe) , zielona obwodka zamiast czerwonej "do zrobienia"
   powyzej (przedtem chip zostawal czerwony na zawsze, tylko etykieta tekstowa
   zmieniala sie na "NAGRANE", co mylilo klientke i wlasciciela w siatce). */
.v-chip-nagrane {
  border: 2px solid var(--v-ok-fg); background: var(--v-ok-bg); color: var(--v-ok-fg);
  font-weight: 700;
}
.v-chip-nagrane .v-chip-ikona { background: var(--v-ok-fg); color: #fff; border-color: var(--v-ok-fg); }

/* Funkcja C (czeka na nagranie, 2026-09-02): wpis PUBLIKACJI powiazany z
   nagraniem jeszcze nieukonczonym , zolta obwodka (--v-warn), rozne od
   czerwonej v-chip-do-nagrania (ktora oznacza sam wpis 'nagranie'). */
.v-chip-czeka-nagranie {
  border: 2px solid var(--v-warn-fg); background: var(--v-warn-bg); color: var(--v-warn-fg);
  font-weight: 700;
}
.v-chip-czeka-nagranie .v-chip-ikona { background: var(--v-warn-fg); color: #fff; border-color: var(--v-warn-fg); }


/* Funkcja A (okladki A/B z wyborem, 2026-09-02): dwie miniatury obok siebie
   w oknie podgladu, kazda z wlasnym przyciskiem wyboru pod spodem. */
.v-okno-okladki-ab { display: flex; gap: 10px; flex-wrap: wrap; }
.v-okno-okladka-wariant {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.v-okno-okladka-wariant img { width: 100%; border-radius: 10px; border: 1px solid var(--v-border); }
.v-okno-okladka-wariant.wybrana img { border: 2px solid var(--v-ok-fg); }

/* Funkcja C: baner "czeka na nagranie" / "material w montazu" w oknie podgladu. */
.v-banner-nagranie { border: 1px dashed var(--v-warn-fg); }

/* Funkcja B: sekcja "Wpisy niekompletne" w panelu admina. */
.v-lista-niekompletne { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.v-link-jak-tekst {
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--v-accent);
  text-decoration: underline; cursor: pointer;
}


.v-chip-kropka {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 4px;
  background: currentColor;
}
.v-chip-kropka.v-chip-czeka { background: transparent; border: 2px dashed var(--v-warn-fg); }
.v-chip-kropka.v-chip-zaakceptowana { color: var(--v-ok-fg); }
.v-chip-kropka.v-chip-wstrzymana { color: var(--v-off-fg); }
.v-chip-kropka.v-chip-opublikowana { color: var(--v-fb); }

.v-legenda { display: flex; flex-wrap: wrap; gap: 13px; font-size: 11.5px; color: var(--v-muted); }
.v-legenda-item { display: flex; align-items: center; }

.v-cal-wiecej summary { font-size: 10.5px; color: var(--v-accent); cursor: pointer; list-style: none; font-weight: 600; }
.v-cal-wiecej summary::-webkit-details-marker { display: none; }
.v-cal-wiecej[open] summary { margin-bottom: 4px; }

.v-upcoming { display: flex; flex-direction: column; gap: 9px; }
.v-upcoming-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px; border: 1px solid var(--v-border); border-radius: var(--v-radius-sm); width: 100%; background: none; cursor: pointer; font-family: var(--v-font); }
.v-upcoming-date { flex: 0 0 auto; font-weight: 700; font-size: 12px; color: var(--v-accent); min-width: 48px; text-align: left; }
.v-upcoming-title { font-size: 13px; font-weight: 600; text-align: left; }
.v-upcoming-meta { font-size: 11.5px; color: var(--v-muted); text-align: left; }
a.v-upcoming-item, button.v-upcoming-item { text-decoration: none; color: inherit; }
a.v-upcoming-item:hover, button.v-upcoming-item:hover { border-color: var(--v-accent); }
/* ======================================================================
   E2/Z301 (panel_rebranding_2026-09-05.md, punkt 1): BOKS "DO AKCEPTACJI"
   przy kalendarzu klienta , lista sztuk czekajacych na decyzje tekstu
   (status DO-KLIENTA), otwiera SZUFLADE z prawej (patrz .v-drawer nizej).
   ====================================================================== */
.v-akc-list { display: flex; flex-direction: column; gap: 10px; }
.v-akc-item {
  border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; background: var(--v-surface);
}
.v-akc-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-akc-item__title {
  font-size: 13px; font-weight: 700; background: none; border: none; padding: 0; margin: 0;
  color: var(--v-text); text-align: left; cursor: pointer; font-family: var(--v-font);
}
.v-akc-item__title:hover { color: var(--v-accent); }
.v-akc-item__meta { font-size: 11.5px; color: var(--v-muted); margin: 0; }
.v-akc-item__actions { display: flex; gap: 8px; }
.v-akc-item__actions .v-btn { flex: 1 1 0; padding: 8px 10px; font-size: 12.5px; }

/* ======================================================================
   SZUFLADA AKCEPTACJI (E2/Z301) , panel z prawej (60% szer. na desktopie,
   pelny ekran na mobile), NIEZALEZNA od .v-modal ogolnego (zero zmian w
   istniejacych oknach podgladu admina/wynikow/selekcji , to jest osobny,
   mniejszy komponent uzywany WYLACZNIE przez kalendarz klienta).
   ⛔ ZWYKLY <div> (nie natywny <dialog>): showModal() w headless Chromium
   renderowal poprawna geometrie w DOM (getBoundingClientRect pelny ekran)
   ale MALOWAL element w rozmiarze tresci (obserwowane zrzutami playwright,
   2026-09-05) , top-layer + fill-mode animacji dawaly niespojny wynik
   malowania w headless. Div z rola dialog + wlasnym tlem (.v-drawer-tlo)
   i JS-owym focus trap/Esc (patrz templates/viral_kalendarz.html) dziala
   identycznie dla uzytkownika, bez tej pulapki. */
.v-drawer-tlo {
  position: fixed; inset: 0; background: rgba(17, 17, 17, 0.35); z-index: 150;
}
.v-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; z-index: 151;
  width: min(60vw, 860px); max-width: 100vw; height: 100vh; max-height: 100vh;
  border: none; border-radius: var(--v-radius) 0 0 var(--v-radius);
  padding: 0; background: var(--v-surface); color: var(--v-text);
  box-shadow: -16px 0 40px -12px rgba(17, 17, 17, 0.22);
  animation: v-drawer-wjazd .22s var(--ease-out) both;
}
@keyframes v-drawer-wjazd {
  from { transform: translateX(28px); opacity: .5; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .v-drawer { animation: none; } }
.v-drawer-body { padding: 24px; overflow-y: auto; height: 100%; box-sizing: border-box; position: relative; }
.v-drawer-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--v-off-bg); color: var(--v-text); border: none;
  border-radius: 999px; width: 32px; height: 32px; font-size: 20px; font-weight: 600;
  line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.v-drawer-close:hover { background: var(--v-border); }
@media (max-width: 760px) {
  .v-drawer { width: 100vw; max-width: 100vw; border-radius: 0; }
}


/* ---------- DROBNE NARZEDZIA ---------- */
.v-select.v-auto { width: auto; }
.v-gap-sm { gap: 10px; }
.v-details-form { margin-top: 12px; }
.v-align-start { align-self: flex-start; }
.v-center-text { text-align: center; }
.v-summary-plain { cursor: pointer; font-weight: 600; list-style: none; }
.v-summary-plain::-webkit-details-marker { display: none; }
.v-subhead { margin: 4px 0 0; }
.v-subhead h2 { margin: 0; font-size: 17px; }

.v-source-row { display: flex; gap: 9px; align-items: flex-start; }
.v-source-thumb { width: 60px; height: 76px; flex: 0 0 auto; border-radius: var(--v-radius-sm); overflow: hidden; background: var(--v-off-bg); }
.v-source-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-tight-dl { border-top: none; padding-top: 10px; }

/* Zadanie W1 (2026-08-20): link wprost do rolki na Instagramie , karta
   Wynikow i okno szczegolu (widoczny, nie zagniezdzony w przycisku okna). */
.v-link-ig {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--v-accent);
  text-decoration: none; align-self: flex-start;
}
.v-link-ig:hover { text-decoration: underline; }

/* Zadanie W1: pasek sortowania/filtra warstwy nad siatka Wynikow. */
.v-filter-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: -4px 0 4px; }
.v-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--v-muted); }
.v-filter-field select { min-width: 190px; }

/* Zadanie W1: miniatura w oknie szczegolu Wynikow (wieksza niz .v-thumb
   na karcie, ale nie tak dominujaca jak wideo kalendarza , to tu jest
   zdjecie poglądowe, nie odtwarzacz). */
.v-okno-okladka-wyniki { display: block; width: 100%; max-width: 320px; border-radius: var(--v-radius); margin: 0 auto 4px; }
.v-btn-row.v-mt { margin-top: 12px; }

.v-toggle-form { display: none; flex-direction: column; gap: 9px; margin-top: 7px; }
.v-toggle-form.otwarty { display: flex; }
.v-title-sm { font-size: 14px; margin: 0; font-weight: 600; }
.v-list-item { padding: 9px 11px; border: 1px solid var(--v-border); border-radius: var(--v-radius-sm); }
.mono { font-family: var(--v-mono); font-size: 12.5px; }
.v-pill-clear { color: inherit; }

/* ======================================================================
   OKNO PODGLADU WPISU (natywny <dialog>)
   ====================================================================== */
.v-modal {
  position: relative; border: none; border-radius: var(--v-radius); padding: 0; color: var(--v-text);
  background: var(--v-surface); box-shadow: 0 12px 32px rgba(23, 23, 26, 0.14);
  width: min(720px, 92vw); max-height: 88vh; overflow: hidden;
}
.v-modal::backdrop { background: rgba(23, 23, 26, 0.35); }
.v-modal-body { padding: 22px; overflow-y: auto; max-height: 88vh; position: relative; }
.v-modal-close {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  background: var(--v-off-bg); color: var(--v-text); border: none;
  border-radius: 999px; width: 32px; height: 32px; font-size: 20px; font-weight: 600;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.v-modal-close:hover { background: var(--v-border); }
@media (max-width: 720px) {
  .v-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .v-modal-body { max-height: 100vh; }
}

/* Zadanie M5 (D158/D161): .v-modal-close jest position:absolute w prawym
   gornym rogu (top/right: 11px, srednica 32px) , bez tego odstepu plakietka
   stanu (justify-content:space-between, flush do prawej krawedzi tresci)
   renderowala sie DOKLADNIE pod przyciskiem zamkniecia i byla przez niego
   przycieta/zaslonieta. padding-right daje jej wlasny pas, bez nachodzenia. */
.v-okno-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding-right: 34px; }
.v-okno-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.v-okno-meta { color: var(--v-muted); font-size: 12.5px; margin: 0 0 13px; }
.v-okno-media { margin-bottom: 13px; }
.v-okno-okladka { display: none; }
.v-okno-plansza { display: block; width: 100%; max-width: 280px; border-radius: var(--v-radius); margin: 0 auto; }
.v-okno-wideo { width: 100%; border-radius: var(--v-radius); background: #000; max-height: 60vh; }
/* Naprawa okna podgladu (2026-09-02): podglad materialu wg typu pliku ,
   pojedynczy obraz (plan miesiaca albo okladka starego systemu), karuzela
   kilku slajdow z pasem miniatur, i placeholder czytelny na 390px kiedy
   plik jeszcze nie trafil na serwer. */
.v-okno-okladka-glowna { display: block; width: 100%; max-width: 280px; border-radius: var(--v-radius); margin: 0 auto; }
.v-okno-plansza-wideo { max-width: 280px; margin: 0 auto; max-height: none; aspect-ratio: 9 / 16; }
/* Naprawa okna podgladu (2026-09-02, zgloszenie wlasciciela): okno bylo za
   duze , przyciski Wstrzymaj/Zaakceptuj i sekcja opisu nie miescily sie na
   1080p bez przewijania. Podglad wideo max. ok. 45vh. Gradient ::after
   sugeruje przewijanie , widoczny tylko gdy JS wykryje tresc ponizej
   widocznego obszaru (klasa .v-modal-scrollable, patrz szablon). */
.v-okno-wideo, .v-okno-plansza-wideo { max-height: 45vh; }
.v-modal-body.v-modal-scrollable::after {
  content: ""; position: sticky; left: 0; right: 0; bottom: 0; display: block;
  height: 34px; margin: -34px -22px 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--v-surface));
}
/* Naprawa okna podgladu (2026-09-02): brak okladki (thumbnail) dla wpisu ,
   komunikat czytelny zamiast pustki/klatki wideo jako namiastki. */
.v-okno-brak-okladki {
  margin: 0; padding: 18px 14px; text-align: center; font-size: 12.5px;
  color: var(--v-muted); background: var(--v-bg); border: 1px dashed var(--v-border);
  border-radius: var(--v-radius);
}
/* Ikona ostrzezenia przy chipie w siatce, gdy brakuje okladki (thumbnail). */
.v-chip-brak-okladki::after { content: "⚠"; margin-left: 4px; font-size: 10px; }
.v-media-placeholder {
  margin: 0; padding: 28px 14px; text-align: center; font-size: 12.5px;
  color: var(--v-muted); background: var(--v-bg); border: 1px dashed var(--v-border);
  border-radius: var(--v-radius);
}
.v-okno-karuzela-otoczka { position: relative; }
.v-okno-karuzela {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.v-okno-karuzela-strzalka {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--v-border);
  background: color-mix(in srgb, var(--v-surface) 88%, transparent); color: var(--v-text);
  font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.v-okno-karuzela-strzalka.lewo { left: 2px; }
.v-okno-karuzela-strzalka.prawo { right: 2px; }
.v-okno-karuzela-strzalka:hover { background: var(--v-surface); }
.v-okno-karuzela-licznik {
  position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 11px; font-weight: 700;
  color: #fff; background: rgba(0,0,0,0.55); border-radius: 999px; padding: 2px 8px;
}
.v-okno-karuzela-slajd {
  flex: 0 0 auto; scroll-snap-align: start; width: min(260px, 78vw);
}
.v-okno-karuzela-slajd img, .v-okno-karuzela-slajd video {
  display: block; width: 100%; border-radius: var(--v-radius); max-height: 60vh;
}
.v-okno-miniatury { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.v-okno-miniatura {
  display: block; width: 46px; height: 46px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--v-border); flex: 0 0 auto; background: #000;
}
.v-okno-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-okno-miniatura-wideo {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: #fff; font-size: 14px;
}
.v-field-hint { font-size: 11.5px; color: var(--v-muted); margin: 2px 0 0; }

/* Zadanie DO NAGRANIA (2026-09-02): scenariusz jako JEDEN ciagly tekst do
   przeczytania (klientka nie zna slow hak/CTA), akapity z odstepem, pierwszy
   (hak) i ostatni (zaproszenie) lekko wyroznione. */
.v-nagranie-info { margin: 0 0 10px; font-size: 12.5px; color: var(--v-muted); font-weight: 600; }
.v-nagranie-scenariusz { display: flex; flex-direction: column; gap: 12px; }
.v-nagranie-scenariusz p { margin: 0; white-space: pre-line; font-size: 14.5px; line-height: 1.5; }
.v-nagranie-wskazowki { margin: 0 0 10px; font-size: 12.5px; color: var(--v-muted); }
.v-nagranie-scenariusz p.v-nagranie-naglowek { font-weight: 400; font-size: 13px; color: var(--v-muted); }

.v-hist-poprawka { border-left: 3px solid var(--v-warn-fg); }
.v-hist-wiadomosc { border-left: 3px solid var(--v-accent); }
.v-hist-akceptacja { border-left: 3px solid var(--v-ok-fg); }
.v-hist-wstrzymanie { border-left: 3px solid var(--v-off-fg); }
.v-hist-poprawka_wprowadzona, .v-hist-poprawka_auto_zatwierdzona { border-left: 3px solid var(--v-fb); }

.v-krok-lista { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.v-krok-lista li { font-size: 12.5px; color: var(--v-muted); padding-left: 17px; position: relative; }
.v-krok-lista li.zrobiony { color: var(--v-ok-fg); }
.v-krok-lista li.aktywny { color: var(--v-accent); font-weight: 600; }
.v-krok-lista li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px;
  border-radius: 999px; background: var(--v-border);
}
.v-krok-lista li.zrobiony::before { background: var(--v-ok-fg); }
.v-krok-lista li.aktywny::before { background: var(--v-accent); }
.v-diff { display: grid; gap: 9px; margin-top: 9px; }
.v-diff-stary { color: var(--v-muted); text-decoration: line-through; font-size: 12.5px; }
.v-diff-nowy { font-size: 13.5px; }

.v-opis-tekst { white-space: pre-wrap; margin: 0; }
/* Zadanie M2: tresc DM (private_reply/followup z dm_engine_config.json) ,
   ten sam wzorzec co v-opis-tekst, jako modyfikator wewnatrz dl/dd bramy. */
.v-dm-tekst { white-space: pre-wrap; }
.v-opis-brak { display: inline-block; margin: 0; }
.v-mini-toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.v-mini-toggle { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 auto; }
.v-mini-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.v-mini-toggle-slider {
  position: absolute; inset: 0; background: var(--v-off-bg); border: 1px solid var(--v-border);
  border-radius: 999px; transition: background .15s;
}
.v-mini-toggle-slider::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: var(--v-muted); border-radius: 50%; transition: transform .15s, background .15s;
}
.v-mini-toggle input:checked + .v-mini-toggle-slider { background: var(--v-ok-bg); border-color: var(--v-ok-fg); }
.v-mini-toggle input:checked + .v-mini-toggle-slider::before { transform: translateX(17px); background: var(--v-ok-fg); }
.v-mini-toggle input:disabled + .v-mini-toggle-slider { opacity: .5; cursor: not-allowed; }
.v-mini-toggle input:disabled { cursor: not-allowed; }
.v-mini-toggle-label { font-size: 12.5px; color: var(--v-muted); }
.v-bramka-pill { display: inline-block; }
.v-notatka-wew { font-size: 11.5px; color: var(--v-muted); font-style: italic; margin: 4px 0 0; }

/* Karta "Co pojdzie na profil" (etap 1, 2026-09-21): okladka po lewej,
   komplet faktow po prawej, na waskim ekranie jedna kolumna (regula ponizej
   w bloku RESPONSYWNOSC). */
.v-karta-profil { display: flex; gap: 12px; align-items: flex-start; }
.v-karta-profil-okladka {
  width: 96px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--v-border);
  object-fit: cover; background: var(--v-off-bg);
}
.v-karta-profil-tresc { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px; }
.v-karta-profil-hak { margin: 0; font-size: 13.5px; }
.v-karta-profil-pliki { margin: 0; padding-left: 18px; font-size: 12.5px; }
.v-karta-profil-pliki li { overflow-wrap: anywhere; }

/* ---------- RESPONSYWNOSC ---------- */
@media (max-width: 860px) {
  /* Zadanie E2: menu gorne NIE dostaje hamburgera , pastylki zawijaja sie
     (flex-wrap juz na .v-navpills/.a-navpills), tylko dociasniamy odstepy. */
  .v-topmenu-inner, .a-topmenu-inner { gap: 6px 10px; padding: 8px 14px; }
  .v-navpills-label, .a-navpills-label { padding-left: 0; }
  .v-karta-profil { flex-direction: column; }
  .v-karta-profil-okladka { width: 100%; max-width: 220px; }
  .v-main, .a-main { padding: 18px 14px 40px; }
  .a-main { padding: 0; }
  .a-topbar { flex-wrap: wrap; }
  .a-klient-select { min-width: 0; flex: 1; }
  .v-cal-day { min-height: 84px; }
}

/* ======================================================================
   WYNIKI , lejek klienta (Zadanie Z31-B). Czyta system_status.json sekcja
   funnel; uzywa WYLACZNIE istniejacej palety (--v-ok/--v-warn/--v-err/
   --v-off/--v-accent), zero nowych kolorow, zero fioletu, zero emoji.

   ITERACJA 3 (korekta wlasciciela 2026-08-18): "graficznie jedna bryla".
   ITERACJA 2 rysowala ksztalt PIECIOMA kartami zwezanymi przez nth-of-type
   (CSS-owy trik, dwa ksztalty naraz , karta + niby-lejek). Teraz ksztalt to
   JEDEN <svg> ze stykajacych sie trapezow, zbudowany server-side w
   app/funnel_svg.py (referencja logiki: ~/strategie/dashboard/app.js
   funnelSvg, paleta WYLACZNIE nasza , jasny motyw, tokeny statusu ponizej).
   .w-etap-card ponizej bryly to teraz SZCZEGOLY (pelna szerokosc, zwykle
   karty), nie druga proba narysowania lejka , stad brak nth-of-type. */
.w-bryla-wrap { max-width: 440px; margin: 4px auto 0; }
.w-bryla-svg { display: block; width: 100%; height: auto; }
.w-bryla-mini-wrap { max-width: 168px; margin: 6px auto 4px; }
.w-bryla-mini-wrap .w-bryla-svg { width: 100%; height: auto; }
.w-detale-naglowek { font-size: 15.5px; font-weight: 600; margin: 4px 0 2px; }
.w-etapy { display: flex; flex-direction: column; gap: 12px; }
.w-etap-card { border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 15px 16px; background: var(--v-surface); width: 100%; box-sizing: border-box; }
.w-etap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.w-etap-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.w-etap-nieaktywny { color: var(--v-muted); font-size: 12.5px; margin: 8px 0 0; }
.w-platforma-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--v-border); font-size: 13px; }
.w-platforma-row:first-of-type { border-top: none; }
.w-platforma-nazwa { font-weight: 600; flex: 0 0 auto; min-width: 84px; }
.w-platforma-metryka { color: var(--v-muted); flex: 1; min-width: 0; }
.w-platforma-wartosc { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.w-powod { color: var(--v-muted); font-size: 13px; margin: 8px 0 0; }
.w-drilldown { font-size: 13px; margin: 12px 0 0; padding: 10px 12px; background: var(--v-off-bg); border-radius: var(--v-radius-sm); }
.w-caveat { font-size: 11.5px; color: var(--v-muted); margin: 7px 0 0; }
.w-diagnoza { font-size: 12.5px; color: var(--v-muted); margin: 6px 0 0; }
/* podpowiedz "co zrobic" PRZY KAZDYM etapie (iteracja 2) , neutralna, akcent
   po lewej (nie kolor problemu , kolor juz niesie pill statusu nad tekstem) */
.w-hint { font-size: 12.5px; color: var(--v-text); margin: 10px 0 0; padding: 9px 11px; background: var(--v-off-bg); border-left: 3px solid var(--v-accent); border-radius: var(--v-radius-sm); }
.w-hint strong { font-weight: 600; }

/* trend tygodniowy , slupki wylacznie CSS (CSP blokuje zewnetrzne biblioteki) */
.w-trend { margin-top: 14px; }
.w-trend-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.w-trend-slupek { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 1 0; height: 100%; min-width: 24px; }
.w-trend-val { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.w-trend-bar { width: 100%; max-width: 34px; min-height: 3px; background: var(--v-accent); border-radius: 4px 4px 0 0; }
.w-trend-labels { display: flex; gap: 8px; margin-top: 4px; }
.w-trend-lbl { flex: 1 1 0; min-width: 24px; text-align: center; font-size: 10px; color: var(--v-muted); }

/* kafel kompaktowy na Przegladzie , zostaje pionowa lista (malo miejsca),
   ale z lekkim zwezaniem (echo ksztaltu trojkata pelnego widoku, iteracja 2).
   Selektor scoped do .w-kafel-lista , NIE dotyka .a-item uzywanego gdzie
   indziej w panelu. */
.w-kafel-lista { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 10px; }
.w-kafel-lista .a-item { width: 100%; box-sizing: border-box; }
.w-kafel-lista .a-item:nth-of-type(1) { max-width: 100%; }
.w-kafel-lista .a-item:nth-of-type(2) { max-width: 94%; }
.w-kafel-lista .a-item:nth-of-type(3) { max-width: 88%; }
.w-kafel-lista .a-item:nth-of-type(4) { max-width: 82%; }
.w-kafel-lista .a-item:nth-of-type(5) { max-width: 76%; }

/* ======================================================================
   RAPORT (Zadanie Z36 -> V2 D223 -> V3 D241) , dashboard onepage. Prefiks
   r- (raport) i rp- (raport v3, elementy NOWE w tej iteracji: hero/delty/
   lejek-paski/najlepszy-material/opublikowane-chipy), zeby nie kolidowac z
   w- (wyniki) ani istniejacymi v-/a-. WYLACZNIE istniejace tokeny palety
   (--v-accent/--v-muted/--v-border/--v-surface-2/--v-ok-fg/--v-warn-fg/
   --v-err-fg/--v-off-fg), zero nowych kolorow, zero fioletu, zero emoji ,
   ta sama zasada co sekcja WYNIKI powyzej. Siatka KPI jest CELOWO
   responsywna od 2 kolumn (telefon) do 4-5 (desktop) , klientka czyta
   glownie na telefonie, ma wygladac PIEKNIE tam, nie tylko "poprawnie"
   (spec_raport_v3.md, sekcja WYGLAD). */

/* Przycisk-dziecko flexa .v-stack-sm/.v-field (align-items:stretch domyslnie)
   NIE ma sie rozciagac na cala szerokosc karty , to byla realna przyczyna
   krytyki wlasciciela v2 "szare przyciski pelnej szerokosci słabe" (NIE
   .v-btn-row, ktorego tu juz nie ma , sam kontener flex-column rozciaga
   pojedyncze dziecko). align-self:flex-start przywraca naturalna szerokosc
   przycisku (jak wszedzie indziej w panelu), kolor zostaje istniejacy .ghost. */
.rp-btn-auto { align-self: flex-start; }

/* HERO: jedna najwazniejsza liczba miesiaca, wysrodkowana, WIELKA */
.rp-hero { text-align: center; padding: 22px 16px 20px; }
.rp-hero-num {
  font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--v-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.rp-hero-num.rp-hero-brak { font-size: 20px; font-weight: 600; color: var(--v-muted); }
.rp-hero-zdanie { margin: 10px 0 0; font-size: 14.5px; color: var(--v-muted); }
@media (min-width: 560px) { .rp-hero-num { font-size: 56px; } }

.r-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.r-kpi-row-2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) {
  .r-kpi-row:not(.r-kpi-row-2) { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.r-kpi-tile {
  border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 14px 14px 12px;
  background: var(--v-surface-2); display: flex; flex-direction: column; gap: 4px;
}
.r-kpi-num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--v-text); }
.r-kpi-num.r-kpi-brak { font-size: 14px; font-weight: 600; color: var(--v-muted); }
.r-kpi-lbl { font-size: 12px; color: var(--v-muted); line-height: 1.3; }
.r-kpi-note { font-size: 11px; color: var(--v-muted); margin-top: 1px; }

/* Z411: przyrost obserwujacych na karcie "Twoje wyniki" (Start klientki,
   /kalendarz) , NIGDY czerwony, wartosc ujemna/zerowa jest tylko informacja,
   nie alarm (stad ten sam szary co reszta metadanych, zamiast v-err). */
.r-kpi-delta { font-size: 12px; font-weight: 600; margin-top: 2px; }
.r-kpi-delta-dodatni { color: var(--v-ok-fg); }
.r-kpi-delta-neutralny { color: var(--v-muted); }

/* Z411: iskierka (sparkline) SVG generowana w Pythonie (app/viral_kalendarz.py
   ::iskierka_obserwujacych_svg) , zero bibliotek, wysokosc stala ~48px,
   szerokosc dopasowana do karty. */
.r-kpi-wykres { margin-top: 10px; }
.r-kpi-wykres svg { display: block; width: 100%; height: 48px; }

/* Z421: karta "Twoje konsultacje" na Start klientki , formularz 3 pol,
   mobilnie (pola pod soba na waskim ekranie, patrz media query nizej). */
.v-konsultacje-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-konsultacje-lista li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.v-konsultacje-data { color: var(--v-muted); font-variant-numeric: tabular-nums; min-width: 76px; }
.v-konsultacje-notatka { color: var(--v-text); }
.v-konsultacje-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.v-konsultacje-form input, .v-konsultacje-form select {
  font-family: var(--v-font); font-size: 13px; padding: 6px 9px; border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border); background: var(--v-bg); color: var(--v-text);
}
.v-konsultacje-form input[type="date"] { width: 140px; }
.v-konsultacje-form input[type="text"] { flex: 1 1 140px; }
@media (max-width: 480px) {
  .v-konsultacje-form { flex-direction: column; align-items: stretch; }
  .v-konsultacje-form input, .v-konsultacje-form select, .v-konsultacje-form button { width: 100%; }
}

/* delta % vs poprzedni miesiac , strzalka kierunkowa kolorem, brak danych =
   etykieta tekstowa zamiast fikcyjnego %. */
.rp-delta {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rp-delta-up { color: var(--v-ok-fg); }
.rp-delta-up::before { content: "▲"; font-size: 9px; }
.rp-delta-down { color: var(--v-err-fg); }
.rp-delta-down::before { content: "▼"; font-size: 9px; }
.rp-delta-brak { color: var(--v-muted); font-weight: 500; font-size: 11px; }

/* LEJEK JAKO PASKI POSTEPU (AgencyAnalytics-style) , zastepuje bryle SVG z
   V2 w RAPORCIE (funnel_svg.py zostaje WYLACZNIE dla widoku Wyniki). */
.rp-lejek { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.rp-lejek-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rp-lejek-label { font-size: 13.5px; font-weight: 600; color: var(--v-text); }
.rp-lejek-value { font-size: 13px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; }
.rp-lejek-value-brak { font-size: 12px; font-weight: 500; color: var(--v-muted); }
.rp-lejek-track {
  height: 10px; border-radius: 999px; background: var(--v-surface-2); overflow: hidden;
  border: 1px solid var(--v-border); margin-top: 5px;
}
.rp-lejek-track-pusta { background: transparent; border-style: dashed; }
.rp-lejek-fill { height: 100%; border-radius: 999px; min-width: 3px; }

/* NAJLEPSZY MATERIAL MIESIACA , jedna karta, miniatura placeholder (brak
   thumbnail_url w dzisiejszych zrodlach danych) + liczby + jedno zdanie. */
.rp-material { display: flex; gap: 14px; margin-top: 10px; align-items: flex-start; }
.rp-material-thumb {
  flex: 0 0 auto; width: 64px; height: 84px; border-radius: var(--v-radius-sm);
  background: var(--v-surface-2); border: 1px solid var(--v-border); color: var(--v-muted);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  text-align: center; padding: 4px;
}
.rp-material-body { flex: 1 1 auto; min-width: 0; }
.rp-material-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.rp-material-stat { display: flex; flex-direction: column; }
.rp-material-num { font-size: 17px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; }
.rp-material-lbl { font-size: 11px; color: var(--v-muted); }
.rp-material-zdanie { font-size: 13.5px; color: var(--v-text); margin: 8px 0 10px; }

/* oś czasu "Co dla Ciebie zrobiliśmy" , ikony jako litery w kółku, kolor
   WYLACZNIE jeden ton (rozroznienie jest po literze, nie po sygnalizowaniu
   fałszywego statusu OK/blad tam gdzie statusu nie ma). V3: kazda pozycja
   ma DRUGA linie (korzysc, "PO CO to bylo") , flex-start zamiast center. */
.r-timeline { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.r-timeline-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.r-typ-ikona {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--v-off-bg); color: var(--v-text);
  border: 1px solid var(--v-border); margin-top: 1px;
}
.r-timeline-tekst { display: flex; flex-direction: column; gap: 2px; }
.r-timeline-etykieta { font-weight: 600; color: var(--v-text); }
.r-timeline-korzysc { font-size: 12.5px; color: var(--v-muted); }

/* "Opublikowaliśmy" , zbiorczo per typ, BEZ siatki linkow (D232d). */
.rp-opublikowane { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.rp-opublikowane-chip {
  display: flex; align-items: baseline; gap: 6px; border: 1px solid var(--v-border);
  border-radius: 999px; padding: 8px 16px; background: var(--v-surface-2);
}
.rp-opublikowane-num { font-size: 16px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; }
.rp-opublikowane-lbl { font-size: 12.5px; color: var(--v-muted); text-transform: capitalize; }

/* ============================================================
   SYSTEM / STRUKTURA (D217/D218): drzewo katalogow system2 + podglad
   pliku, tylko odczyt (app/system2_routes.py, app/system2_read.py).
   ============================================================ */
.sys-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .sys-layout { grid-template-columns: 1fr; } }

.sys-tree { max-height: calc(100vh - 160px); overflow-y: auto; }
.sys-tree-lista, .sys-tree ul { list-style: none; margin: 0; padding-left: 14px; }
.sys-tree-lista { padding-left: 0; }
.sys-tree li { margin: 1px 0; }
.sys-tree summary {
  cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 6px;
  border-radius: var(--v-radius-sm); list-style: none; color: var(--v-text);
}
.sys-tree summary::-webkit-details-marker { display: none; }
.sys-tree summary::before { content: "\25b8"; display: inline-block; width: 12px; color: var(--v-muted); }
.sys-tree details[open] > summary::before { content: "\25be"; }
.sys-tree summary:hover { background: var(--v-off-bg); }
.sys-plik {
  display: block; padding: 4px 6px 4px 20px; border-radius: var(--v-radius-sm);
  color: var(--v-muted); text-decoration: none; font-size: 13px; word-break: break-word;
}
.sys-plik:hover { background: var(--v-off-bg); color: var(--v-text); }
.sys-plik.on { background: var(--v-accent); color: var(--v-accent-contrast); font-weight: 600; }

.sys-preview { padding: 18px; min-height: 220px; }
.sys-preview-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sys-preview-head h2 { margin: 0; font-size: 17px; font-weight: 600; word-break: break-word; }
.sys-note {
  font-size: 12.5px; background: var(--v-warn-bg); color: var(--v-warn-fg);
  padding: 8px 11px; border-radius: var(--v-radius-sm); margin: 0 0 12px;
}
.sys-note a { color: inherit; font-weight: 700; }
.sys-mono {
  font-family: var(--v-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word;
  background: var(--v-off-bg); padding: 14px; border-radius: var(--v-radius-sm);
  overflow-x: auto; max-height: 72vh; overflow-y: auto; margin: 0;
}
.sys-md { font-size: 14.5px; line-height: 1.6; overflow-wrap: break-word; }
.sys-md h1, .sys-md h2, .sys-md h3, .sys-md h4 { line-height: 1.3; margin: 18px 0 8px; }
.sys-md h1 { font-size: 21px; }
.sys-md h2 { font-size: 18px; }
.sys-md h3 { font-size: 16px; }
.sys-md p { margin: 8px 0; }
.sys-md ul, .sys-md ol { padding-left: 20px; margin: 8px 0; }
.sys-md li { margin: 4px 0; }
.sys-md strong { font-weight: 700; }
.sys-md blockquote { border-left: 3px solid var(--v-border); padding-left: 12px; color: var(--v-muted); margin: 10px 0; }
.sys-md code { background: var(--v-off-bg); padding: 1px 5px; border-radius: 5px; font-size: 13px; font-family: var(--v-mono); }
.sys-md pre { background: var(--v-off-bg); padding: 12px; border-radius: var(--v-radius-sm); overflow-x: auto; }
.sys-md pre code { background: none; padding: 0; }
.sys-md hr { border: none; border-top: 1px solid var(--v-border); margin: 16px 0; }
.sys-md table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0; }
.sys-md th, .sys-md td { border: 1px solid var(--v-border); padding: 6px 9px; text-align: left; }
.sys-md th { background: var(--v-off-bg); }

/* ============ Zadanie B1: karta "Do wydobycia od klientow" (Start) ============
   Inwentarz brakow informacji od klientow (zrodlo: system2/logi/
   braki_klientow.json). BRAK ma byc wyrazniejszy niz INFO, pytanie do
   klienta szarym tekstem, awaria zrodla GLOSNA (braki-blad). */
.braki-klient h3 { font-size: 14.5px; margin: 6px 0 6px; display: flex; align-items: center; gap: 8px; }
.braki-wpis { align-items: baseline; flex-wrap: wrap; }
.braki-wpis .a-pill { flex: 0 0 auto; }
.braki-info { opacity: 0.72; }
.braki-co { font-weight: 600; flex: 0 0 auto; }
.braki-pytanie { color: var(--v-muted); font-size: 13px; }
.braki-stopka { color: var(--v-muted); font-size: 12.5px; margin: 10px 0 0; }
.braki-blad { background: var(--v-err-bg); color: var(--v-err-fg); border-radius: var(--v-radius-sm); padding: 12px 14px; font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ---------- Pomysly z ksiazki (D310) ---------- */
.p-liczniki { display: flex; gap: 6px; flex-wrap: wrap; }
.p-filtry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.p-filtr { width: auto; font-size: 13px; padding: 6px 9px; }
.p-filtr-wyczysc { font-size: 13px; }
.p-pille { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.p-karta { border-left: 4px solid transparent; transition: border-color .15s, opacity .15s; }
.p-karta.p-wchodzi { border-left-color: var(--v-ok-fg); }
.p-karta.p-pozniej { border-left-color: var(--v-warn-fg); }
.p-karta.p-odrzucony { border-left-color: var(--v-err-fg); opacity: .55; }
.p-pole { margin: 4px 0; font-size: 13.5px; }
.p-flaga-tresc { font-size: 13px; padding: 8px 11px; border-radius: var(--v-radius-sm); margin: 6px 0; }
.p-flaga-tresc.warn { background: var(--v-warn-bg); color: var(--v-warn-fg); }
.p-flaga-tresc.err { background: var(--v-err-bg); color: var(--v-err-fg); }
.p-cytat { color: var(--v-muted); font-style: italic; }
.p-filar-nazwy { color: var(--v-muted); font-size: 12px; margin: -4px 0 8px; }

/* ---------- Style (referencje designu, zlecenie wlasciciela 2026-08-20) ---------- */
.st-liczniki { display: flex; gap: 6px; flex-wrap: wrap; }
.st-filtry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-filtr { width: auto; font-size: 13px; padding: 6px 9px; }
.st-filtr-wyczysc { font-size: 13px; }
.st-grupa-tytul { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 12px; }
.st-grupa-tytul:first-child { margin-top: 0; }
.st-grupa-tytul h2 { margin: 0; font-size: 17px; }
.st-grupa-licznik { color: var(--v-muted); font-size: 13px; }
.st-karta { border-left: 4px solid transparent; transition: border-color .15s, opacity .15s; padding: 14px; }
.st-karta.st-do_bazy { border-left-color: var(--v-ok-fg); }
.st-karta.st-odrzucona { border-left-color: var(--v-err-fg); opacity: .55; }
.st-thumb-btn {
  display: block; width: 100%; padding: 0; margin: 0 0 10px; border: none;
  background: transparent; cursor: zoom-in; border-radius: var(--v-radius-sm);
}
.st-thumb-btn .v-thumb { aspect-ratio: 4 / 5; }
.st-pille { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.st-meta { font-size: 13px; margin: 3px 0; }
.st-meta strong { font-weight: 600; }
.st-dlaczego { color: var(--v-muted); font-size: 13px; margin: 6px 0 0; }
.st-okno-obraz { display: block; width: 100%; max-width: 560px; border-radius: var(--v-radius); margin: 0 auto 14px; }

/* ======================================================================
   KOMPONENTY WZORNIKA (Zadanie D321, 2026-08-19) , przepisane z
   WZORNIK_PANELU.md sekcja 2, uzyte WYLACZNIE w viral_przebiegi.html
   (2a formularz dwukolumnowy, 2f naglowek strony, 2e pusty stan) i
   viral_start.html (2c kafle statystyk, 2d karty rekordow zamiast
   kolejnej tabeli, 2e pusty stan). Klasy sa NOWE (brak kolizji ze
   --v-* i --a-* powyzej, sprawdzone grepem przed dopisaniem), wiec zero
   ryzyka dla widokow ktore ich nie uzywaja.
   ====================================================================== */

/* ---------- 2f: naglowek strony (naglowek + opis + akcje po prawej) ---------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap;
}
.page-header__title {
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold);
  color: var(--color-text-primary); margin: 0 0 var(--space-2) 0; letter-spacing: -0.015em;
}
.page-header__desc { font-size: var(--font-size-md); color: var(--color-text-secondary); margin: 0; max-width: 60ch; }
.page-header__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }
@media (max-width: 767px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header__actions { justify-content: flex-start; }
}

/* ---------- 2a: formularz dwukolumnowy ---------- */
.form-2col {
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); max-width: 640px;
}
.form-section { margin-bottom: var(--space-6); }
.form-section__title {
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); margin: 0 0 var(--space-1) 0;
}
.form-section__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--span-2 { grid-column: 1 / -1; }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.field__input {
  font-size: var(--font-size-md); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-text-primary); font-family: var(--v-font);
}
.field__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
/* E2/Z301 punkt 4: focus ring gradientowy , WYLACZNIE input/textarea (select
   zostaje jednokolorowy, regula wyzej , natywna strzalka przegladarki). */
.field__input:not(select):focus {
  outline: none; border-color: transparent;
  background-image: linear-gradient(var(--color-bg-surface), var(--color-bg-surface)),
                     var(--au-gradient, linear-gradient(135deg, var(--color-accent), var(--color-accent)));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-fiolet, var(--color-accent)) 16%, transparent);
}
.field__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.form-actions {
  display: flex; justify-content: flex-start; align-items: center; gap: var(--space-3);
  margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-2col { padding: var(--space-6); }
}

/* ---------- 2c: karta statystyki (stat tile) + rzad kafli ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat-tile {
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.stat-tile__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.stat-tile__value {
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  margin-top: var(--space-2); font-variant-numeric: tabular-nums;
}
.stat-tile__delta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); margin-top: var(--space-3); }
.stat-tile__delta--up { color: var(--color-success); }
.stat-tile__delta--down { color: var(--color-danger); }
.stat-tile__delta--neutral { color: var(--color-text-muted); }

/* E2/Z301 punkt 2: delta jako PIGULKA (chip), nie goly kolorowy tekst , i
   sparkline SVG 7 dni z gradientem, dla kart kondycji reklam admina
   (/admin/reklamy). Rozszerza .stat-tile istniejacy (viral_start.html i
   inne), zero nowego rownoleglego komponentu KPI. */
.stat-tile__delta-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full);
  margin-top: var(--space-2);
}
.stat-tile__delta-pill--up { background: var(--color-success-subtle); color: var(--color-success); }
.stat-tile__delta-pill--down { background: var(--color-danger-subtle); color: var(--color-danger); }
.stat-tile__delta-pill--neutral { background: var(--color-bg-surface-muted); color: var(--color-text-muted); }
.stat-tile__spark { display: block; margin-top: var(--space-3); width: 100%; height: 28px; }
.stat-tile__nota { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
/* D409 zadanie B (ekran potwierdzenia przebiegu): kafel "Razem" wyroznionym
   akcentem , ten sam wzorzec co makieta material/ux_panelu/mockup_flow_virali. */
.stat-tile--total { background: var(--color-accent-subtle); border-color: var(--color-accent-border); }
.stat-tile--total .stat-tile__value { color: var(--color-accent); }
@media (max-width: 1023px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- 2d: karty rekordow zamiast tabeli ---------- */
.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.record-card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.record-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.record-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; }
.record-card__meta { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.record-card__meta-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); }
.record-card__meta-row dt { color: var(--color-text-muted); margin: 0; }
.record-card__meta-row dd { color: var(--color-text-primary); margin: 0; font-weight: var(--font-weight-medium); text-align: right; }
.record-card__actions { display: flex; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
/* D407: soft delete tworcow , wyszarzony kafel w widoku "Pokaz usunietych". */
.record-card--usuniety { opacity: .55; }

.badge {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
}
.badge--success { background: var(--color-success-subtle); color: var(--color-success); }
.badge--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.badge--muted { background: var(--color-bg-surface-muted); color: var(--color-text-muted); }

/* ---------- CHIPY STATUSOW (D957, punkt 5) ----------
   JEDNA mapa kolorow dla statusow SZTUK (SZKIC-TEKST/TEKST-OK/DO-KLIENTA/
   KLIENT-OK/RENDER/KALENDARZ) i AKCJI reklam (WYKONANO/ODRZUCONO/CZEKA/BLAD),
   IDENTYCZNA u admina i klienta (jeden arkusz, jedno miejsce). Uzycie:
   templates/plan.html (klasa_pill_sztuka), templates/admin_reklamy.html
   (klasa_status_akcji). .chip-poprawka to rozszerzenie POZA literalna liste
   z decyzji (status sztuki KLIENT-POPRAWKA nie miesci sie w 6 kolorach ,
   dostaje ton ostrzegawczy z istniejacych --v-warn-* zeby nie mnozyc palety). */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 10px; border-radius: var(--au-promien-pigulka);
  white-space: nowrap; border: 0;
}
.chip-szkic       { background: var(--au-status-szkic-bg);       color: var(--au-status-szkic-fg); }
.chip-tekst-ok    { background: var(--au-status-tekst-ok-bg);    color: var(--au-status-tekst-ok-fg); }
.chip-do-klienta  { background: var(--au-status-do-klienta-bg);  color: var(--au-status-do-klienta-fg); }
.chip-klient-ok   { background: var(--au-status-klient-ok-bg);   color: var(--au-status-klient-ok-fg); }
.chip-render      { background: var(--au-status-render-bg);      color: var(--au-status-render-fg); }
.chip-kalendarz   { background: var(--au-status-kalendarz-bg);   color: var(--au-status-kalendarz-fg); }
.chip-blad        { background: var(--au-status-blad-bg);        color: var(--au-status-blad-fg); }
.chip-muted       { background: var(--au-status-szkic-bg);       color: var(--au-tekst-2); }
.chip-poprawka    { background: var(--v-warn-bg);                color: var(--v-warn-fg); }

/* ---------- 2e: pusty stan ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-16) var(--space-6); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg); background: var(--color-bg-surface-muted);
}
.empty-state__icon {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.empty-state__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; }
.empty-state__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); max-width: 40ch; margin: 0; }

/* ---------- 3.2: wejscie listy, stagger 40ms/element (Jinja loop.index0
   zamiast JS , prosciej, ten sam efekt). Tylko opacity+transform (3.3),
   szanuje prefers-reduced-motion. ---------- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-grid > .stat-tile, .record-grid > .record-card {
  opacity: 0; animation: fade-in-up var(--duration-base) var(--ease-out) forwards;
  animation-delay: calc(var(--stagger-index, 0) * 40ms);
}
@media (prefers-reduced-motion: reduce) {
  .stat-grid > .stat-tile, .record-grid > .record-card { animation: none; opacity: 1; }
}

/* Zadanie HUB KONCEPTY (2026-08-20): reset chrome przegladarki na <button>
   uzywanym jako inline odnosnik (np. "z virala @konto" na karcie viral,
   templates/admin_koncepty.html) , .v-link-ig sam w sobie zaklada <a>
   (bez wlasciwosci border/background/padding przegladarki dla <button>),
   wiec <button class="v-link-ig"> bez tego resetu wygladal jak przycisk
   systemowy w szarej ramce zamiast lekkiego inline linku. */
.hub-link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }

/* ============================================================
   E3/E4 PULPIT (D362/D363, sekcje 3 i 7-10 specyfikacji redesignu):
   pulpit zywy czytajacy z sdmt.db (app/pulpit_read.py, app/pulpit_svg.py,
   app/pulpit_routes.py). Hero + kafle KPI reuzywaja ISTNIEJACE klasy
   .rp-hero/.rp-hero-num/.r-kpi-row/.r-kpi-tile/.r-kpi-num/.r-kpi-lbl/.rp-delta
   (raport miesieczny, WYZEJ w tym pliku) , zero duplikacji, ta sama
   wizualna gramatyka "liczba + delta" w obu miejscach. Ponizej WYLACZNIE
   elementy, ktorych raport jeszcze nie mial: pasek filtrow, wykres SVG
   z markerami zdarzen, dziennik reczny, Pareto materialow, pastylka
   swiezosci danych.
   ============================================================ */

/* AKCENT KONFIGUROWALNY (?akcent=A/B/C, zadanie 3): trzy warianty do wyboru
   wlasciciela na zrzutach. A = obecny Notion Blue (domyslny, brak zmiany).
   B = glęboka zielen, C = sliwka , obie dobrane tak samo kontrastowo jak
   oryginalny akcent (WCAG AA na bialym tle karty), reszta palety (statusy,
   szarosci) NIETKNIETA. Dziala WYLACZNIE tam, gdzie szablon dopisze atrybut
   data-akcent do <body> (pulpit), reszta panelu bez zmian. */
body[data-akcent="B"] {
  --v-accent: #0b7a4b;
  --v-accent-strong: #075c38;
}
body[data-akcent="C"] {
  --v-accent: #7a3a63;
  --v-accent-strong: #5c2a4a;
}

/* ---------- PASEK FILTROW (zakres dat, porownanie, tor, platforma/format,
   metryka wykresu) , jeden rzad pastylek/selektow nad pulpitem, zawija sie
   na mobile. Formularz GET , caly stan filtrow zyje w URL (zadanie 13). */
.pl-filtry {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin-bottom: 14px; padding: 10px 12px; background: var(--v-surface);
  border: 1px solid var(--v-border); border-radius: var(--v-radius);
}
.pl-filtry-grupa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-filtry-etykieta { font-size: 11.5px; color: var(--v-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-right: 2px; }
.pl-filtry select, .pl-filtry input[type="date"] {
  font-family: var(--v-font); font-size: 13px; padding: 5px 8px; border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border); background: var(--v-bg); color: var(--v-text);
}
.pl-filtry-sep { width: 1px; align-self: stretch; background: var(--v-border); margin: 0 2px; }
.pl-tor-grupa { display: inline-flex; border: 1px solid var(--v-border); border-radius: 999px; overflow: hidden; }
.pl-tor-opcja {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; color: var(--v-muted); text-decoration: none;
  background: var(--v-surface);
}
.pl-tor-opcja:hover { background: var(--v-off-bg); color: var(--v-text); }
.pl-tor-opcja.on { background: var(--v-accent); color: var(--v-accent-contrast); }
.pl-btn-submit {
  font-family: var(--v-font); font-size: 12.5px; font-weight: 600; padding: 6px 14px;
  border-radius: var(--v-radius-sm); border: 1px solid var(--v-accent); background: var(--v-accent);
  color: var(--v-accent-contrast); cursor: pointer;
}
.pl-link-reset { font-size: 12px; color: var(--v-muted); text-decoration: none; }
.pl-link-reset:hover { color: var(--v-text); }

/* Bohater konfigurowalny , mini selektor pod liczba glowna */
.pl-hero-wybor { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pl-hero-wybor a {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-decoration: none;
  color: var(--v-muted); border: 1px solid var(--v-border);
}
.pl-hero-wybor a.on { background: var(--v-accent); border-color: var(--v-accent); color: var(--v-accent-contrast); }
.pl-hero-porownanie { font-size: 13px; color: var(--v-muted); margin-top: 4px; }
.pl-hero-porownanie strong { color: var(--v-text); font-variant-numeric: tabular-nums; }
.pl-kafel-podtytul { font-size: 11px; color: var(--v-muted); margin-top: 2px; }
.pl-kafel-tor-brak { font-size: 11.5px; color: var(--v-muted); font-style: italic; }

/* ---------- WYKRES GLOWNY (inline SVG z app/pulpit_svg.py) ---------- */
.pl-wykres-wrap { margin-top: 6px; }
.pl-wykres-svg { width: 100%; height: auto; display: block; }
.pl-wykres-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--v-muted); }
.pl-wykres-legenda-poz { display: inline-flex; align-items: center; gap: 5px; }
.pl-legenda-kreska { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--v-text); }
.pl-legenda-kreska.przerywana { border-top-style: dashed; border-color: var(--v-muted); }
.pl-legenda-slupek { display: inline-block; width: 10px; height: 10px; background: var(--v-off-fg); opacity: .55; border-radius: 2px; }
.pl-legenda-znacznik { display: inline-block; width: 2px; height: 12px; background: var(--v-accent); }
.pl-legenda-anomalia { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--v-err-fg); }
.pl-wykres-akcje { display: flex; gap: 10px; margin-top: 8px; }
.pl-wykres-akcje a { font-size: 12px; color: var(--v-muted); text-decoration: none; }
.pl-wykres-akcje a:hover { color: var(--v-accent); }

/* ---------- TABELA POD WYKRESEM (dokladne liczby, zrodlo prawdy) ---------- */
.pl-tabela-wrap { overflow-x: auto; margin-top: 10px; }
table.pl-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.pl-tabela th, table.pl-tabela td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--v-border); white-space: nowrap; }
table.pl-tabela th:first-child, table.pl-tabela td:first-child { text-align: left; }
table.pl-tabela th { color: var(--v-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
table.pl-tabela td { font-variant-numeric: tabular-nums; color: var(--v-text); }
table.pl-tabela tr.pl-row-anomalia td:first-child { color: var(--v-err-fg); font-weight: 700; }

/* ---------- WARSTWA ZDARZEN + DZIENNIK RECZNY ---------- */
.pl-zdarzenia-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.pl-zdarzenie { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pl-zdarzenie-data { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--v-muted); font-size: 11.5px; min-width: 68px; }
.pl-zdarzenie-typ { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--v-off-bg); color: var(--v-off-fg); }
.pl-zdarzenie-typ.publikacja { background: var(--v-ok-bg); color: var(--v-ok-fg); }
.pl-zdarzenie-typ.reczne { background: var(--v-warn-bg); color: var(--v-warn-fg); }
.pl-dziennik-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pl-dziennik-form input[type="date"] { width: 140px; }
.pl-dziennik-form input[type="text"] { flex: 1 1 200px; }
.pl-dziennik-form input, .pl-dziennik-form select {
  font-family: var(--v-font); font-size: 13px; padding: 6px 9px; border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border); background: var(--v-bg); color: var(--v-text);
}

/* ---------- PARETO MATERIALOW (top/dol wg zasiegu) ---------- */
.pl-pareto-zdanie { font-size: 13.5px; color: var(--v-text); margin: 4px 0 10px; }
.pl-pareto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-pareto-poz { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pl-pareto-rank { flex: 0 0 auto; width: 18px; color: var(--v-muted); font-variant-numeric: tabular-nums; }
.pl-pareto-opis { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v-text); }
.pl-pareto-wartosc { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- POCHODNE + SWIEZOSC + CEL ---------- */
.pl-pochodne { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.pl-pochodna { display: flex; flex-direction: column; gap: 1px; }
.pl-pochodna-num { font-size: 15px; font-weight: 700; color: var(--v-text); font-variant-numeric: tabular-nums; }
.pl-pochodna-lbl { font-size: 11px; color: var(--v-muted); cursor: help; }
.pl-swiezosc { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--v-muted); background: var(--v-off-bg); padding: 4px 10px; border-radius: 999px; }
.pl-swiezosc-kropka { width: 6px; height: 6px; border-radius: 50%; background: var(--v-ok-fg); flex: 0 0 auto; }
.pl-swiezosc.pl-brak .pl-swiezosc-kropka { background: var(--v-off-fg); }
.pl-cel-pasek { height: 8px; border-radius: 999px; background: var(--v-surface-2); border: 1px solid var(--v-border); overflow: hidden; margin-top: 6px; }
.pl-cel-fill { height: 100%; background: var(--v-accent); border-radius: 999px; }
.pl-cel-tekst { font-size: 12px; color: var(--v-muted); margin-top: 4px; }

/* Grid dolnych 3 kart (lejek | silnik DM | najlepszy material) , 1 kolumna
   na mobile, 3 na desktop; reuzywa .a-card jako pojedyncza karta. */
.pl-dolny-rzad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .pl-dolny-rzad { grid-template-columns: 1fr; } }

.pl-insight-card {
  background: color-mix(in srgb, var(--v-accent) 6%, var(--v-surface));
  border: 1px solid color-mix(in srgb, var(--v-accent) 25%, var(--v-border));
  padding: 10px 16px 12px;
}
.pl-insight-head { display: flex; align-items: center; gap: 6px; }
.pl-insight-icon { display: inline-flex; color: var(--v-accent); flex: 0 0 auto; }
.pl-insight-title { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--v-muted); }
.pl-insight-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-insight-item { display: flex; align-items: flex-start; gap: 6px; }
.pl-insight-item__ikon { color: var(--v-accent); flex: 0 0 auto; margin-top: 3px; }
.pl-insight-zdanie { font-size: 12.5px; color: var(--v-text); margin: 0; line-height: 1.4; }

/* ---------- IN3 (D461): karta "Puls tygodnia" (scripts/puls_tygodniowy.py) ---------- */
.puls-card { background: color-mix(in srgb, var(--v-accent) 5%, var(--v-surface)); border: 1px solid color-mix(in srgb, var(--v-accent) 22%, var(--v-border)); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.puls-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.puls-card__title-wrap { display: flex; align-items: center; gap: 8px; }
.puls-card__icon { display: inline-flex; color: var(--v-accent); flex: 0 0 auto; }
.puls-card__title { font-size: 14px; font-weight: 700; color: var(--v-text); }
.puls-card__zakres { font-size: 12px; color: var(--v-muted); }
.puls-card__sekcja { display: flex; flex-direction: column; gap: 2px; }
.puls-card__label { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--v-muted); margin-top: 4px; }
.puls-card__zdanie { font-size: 14px; color: var(--v-text); line-height: 1.5; margin: 2px 0 0; }
.puls-card__ts { font-size: 11px; color: var(--v-muted); align-self: flex-end; }

/* ---------- SYSTEM -> KLIENCI (R3, D393/D395, rejestr + monitoring) ---------- */
.kl-pasek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; }
.kl-pasek-poz { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kl-pasek-nazwa { font-size: 13px; font-weight: 600; color: var(--v-text); margin-top: 2px; }
.kl-pasek-szczegol { font-size: 11.5px; color: var(--v-muted); }
.kl-pasek-komunikat { font-size: 11px; color: var(--v-muted); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-liczniki { font-size: 12.5px; color: var(--v-muted); }
.kl-nazwa-tech { font-size: 11.5px; color: var(--v-muted); margin: 0 0 10px; }
.kl-nazwa-tech code { font-family: var(--v-mono); }
.kl-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.kl-mt-sm { margin-top: 10px; }
.kl-monitoring-tytul { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--v-text); }
.kl-tabela-wrap { overflow-x: auto; }
table.kl-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.kl-tabela th, table.kl-tabela td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--v-border); }
table.kl-tabela th { color: var(--v-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
table.kl-tabela td { color: var(--v-text); }

/* ======================================================================
   WYNIKI , WIDOK FLOW (D406/D409 zadanie B, VE2, mockup_flow_virali.png
   EKRAN 2): lewa kolumna rolek + karta glowna aktywnej rolki. Wzor
   .v-cal-layout (grid 2 kolumny), tu kolumna listy jest WASKA i PIERWSZA
   (lewa), karta glowna elastyczna. ====================================== */
.v-flow-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .v-flow-layout { grid-template-columns: 1fr; } }

.v-flow-lista {
  display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 2px;
}
.v-flow-item {
  display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--v-radius-sm);
  border: 1px solid var(--v-border); background: var(--v-surface); text-decoration: none; color: inherit;
}
.v-flow-item:hover { background: var(--v-off-bg); }
.v-flow-item.on { border-color: var(--v-accent); background: color-mix(in srgb, var(--v-accent) 8%, var(--v-surface)); }
.v-flow-item.v-flow-odrzucony { opacity: .5; }
.v-flow-thumb { width: 42px; height: 42px; border-radius: var(--v-radius-sm); overflow: hidden; background: var(--v-off-bg); flex: 0 0 auto; }
.v-flow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-flow-thumb-brak { display: block; width: 100%; height: 100%; }
.v-flow-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.v-flow-info .v-handle { font-size: 13px; }
.v-flow-info .v-tile-meta { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-flow-main { min-width: 0; }

/* D408: Prompty jako "link poboczny" obok steppera (menu gorne straciło
   osobna pastylke dla Prompty, patrz templates/_virale_kroki.html i
   admin_base.html). .v-kroki-row trzyma stepper i ten link w jednym
   wierszu; przenosimy dolny margines z .v-kroki na caly wiersz, zeby nie
   podwajac odstepu. */
.v-kroki-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.v-kroki-row .v-kroki { margin: 0; flex: 1 1 auto; min-width: 220px; }
.v-kroki-prompty {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; color: var(--v-muted); text-decoration: none;
  border: 1px dashed var(--v-border); white-space: nowrap; flex: 0 0 auto;
}
.v-kroki-prompty:hover { background: var(--v-off-bg); color: var(--v-text); }

/* VE-D425 (soft delete przebiegow i rolek z Wynikow): jeden generyczny
   modyfikator "wyszarzony" , reuzywany na wierszu tabeli Przebiegow i na
   kaflu siatki Wynikow, ten sam efekt co juz istniejace .record-card--usuniety
   (D407) i .v-flow-item.v-flow-odrzucony, tylko nazwa neutralna wzgledem
   znacznika HTML (tr/article), zeby nie mnozyc prawie identycznych regul. */
.v-row-usuniety { opacity: .55; }

/* VE-D427 (koncepty od pisarza systemowego, VE3): flaga bezpiecznika na
   karcie konceptu , tresc naruszen bywa dluzsza niz zwykly pill, wiec
   pelna szerokosc + zawijanie zamiast domyslnego inline-block .v-pill. */
.v-flaga-koncept { display: block; width: 100%; white-space: normal; }

/* VE-D427: kolumna dwoch pilli (rekomendacja + status wyboru) w waskim
   wierszu lewej listy Wynikow , obok siebie w rzedzie nachodzily sie
   (zmierzone zrzutem VE3), pionowy stack + wyrownanie do prawej naprawia. */
.v-flow-pille { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }

/* ======================================================================
   WZORNIK-V2 (KP1, D451/D457/D459) , nowa estetyka Pulpitu (kafle z
   ikonami w kolkach, delta-pille, miekkie wielowarstwowe cienie, gauge
   polkole, gradient pod linia wykresu, sekcje zwijane z kluczowa liczba
   w naglowku, feed dziennika). Zrodlo: material/ux_panelu/mockup_pulpit_v2
   .html/png + SMACZKI_WIZUALNE.md, wdrozone w templates/pulpit_widok.html.
   Uzywa TOKENOW WZORNIKA juz zdefiniowanych wyzej w tym pliku (--space-*,
   --font-size-*, --radius-*, --color-*) , tylko DWA nowe tokeny cienia,
   bo istniejace --shadow-md/--shadow-lg nie maja warstwy "ostry blisko +
   miekki daleko" z briefu wlasciciela (SMACZKI pkt 2). Klasy tej sekcji sa
   NOWE (bez kolizji z istniejacymi , sprawdzone), z jednym wyjatkiem:
   .stat-grid/.stat-tile juz istnialy (viral_start.html i inne), wiec kafle
   metryk pulpitu dostaly wlasne nazwy .hero-stat-grid/.hero-stat-tile.
   Ten sam wzornik ma reuzyc sesja "dashboard" przy widoku Plan. ---------- */
:root {
  --wz2-shadow-card: 0 1px 2px rgba(23, 27, 33, 0.05), 0 8px 24px rgba(23, 27, 33, 0.07);
  --wz2-shadow-card-sm: 0 1px 2px rgba(23, 27, 33, 0.05);
}

/* ---------- pasek filtrow (pill) ---------- */
.filters {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-bg-surface); border-radius: var(--radius-full);
  padding: var(--space-2); box-shadow: var(--wz2-shadow-card-sm);
  flex-wrap: wrap;
}
.filters__group { display: flex; align-items: center; gap: 6px; padding: 1px var(--space-2); flex-wrap: wrap; }
.filters__label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.filters__select {
  border: none; background: transparent; font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-text-primary); padding: 2px 2px; border-radius: var(--radius-sm);
}
.filters__select:hover, .filters__select:focus { background: var(--color-bg-surface-muted); }
.filters__sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--color-border); }
.tor-pills { display: inline-flex; background: var(--color-bg-surface-muted); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.tor-pill { font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 5px 13px; border-radius: var(--radius-full); color: var(--color-text-muted); text-decoration: none; }
.tor-pill.on { background: var(--color-bg-surface); color: var(--color-accent); box-shadow: var(--wz2-shadow-card-sm); }
.tor-pill:hover:not(.on) { color: var(--color-text-primary); }

/* ---------- karta bazowa v2 ---------- */
.card { background: var(--color-bg-surface); border-radius: var(--radius-xl); box-shadow: var(--wz2-shadow-card); }

/* ---------- D477 pkt a: puls (mala kafelka) + pasek zdrowia w rzedzie ---------- */
.top-row { display: flex; gap: var(--space-4); align-items: stretch; flex-wrap: wrap; }
.top-row .health-bar { flex: 1 1 480px; min-width: 280px; }
/* Ponizej 820px .top-row przechodzi na column , "flex: 1 1 480px" powyzej
   liczylby sie wtedy jako WYSOKOSC (basis na osi glownej kolumny), nie
   szerokosc , zmierzony realny bug na zrzucie 768px: health-bar rozciagal
   sie do 480px pustej wysokosci. Reset na auto w kolumnie. */
@media (max-width: 820px) {
  .top-row { flex-direction: column; }
  .top-row .health-bar { flex: none; min-width: 0; }
}

/* ---------- Puls tygodnia jako mala kafelka (details, D477 pkt a) ---------- */
.puls-mini { flex: 0 0 300px; padding: 0; border: 1px solid var(--color-border); overflow: hidden; }
@media (max-width: 820px) { .puls-mini { flex: 1 1 auto; } }
.puls-mini__summary {
  list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4);
  display: flex; align-items: flex-start; gap: var(--space-2); min-height: 90px; box-sizing: border-box;
}
.puls-mini__summary::-webkit-details-marker { display: none; }
.puls-mini__icon {
  width: 26px; height: 26px; border-radius: var(--radius-full); flex: 0 0 auto; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-subtle); color: var(--color-accent);
}
.puls-mini__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.puls-mini__title { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); }
.puls-mini__headline {
  font-size: 12.5px; line-height: 1.35; color: var(--color-text-primary); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.puls-mini__chev { color: var(--color-text-muted); flex: 0 0 auto; margin-top: 3px; transition: transform .15s ease; }
.puls-mini[open] .puls-mini__chev { transform: rotate(90deg); }
.puls-mini__detail { padding: 0 var(--space-4) var(--space-4); border-top: 1px dashed var(--color-border-strong); margin-top: 2px; padding-top: var(--space-3); }
.puls-mini .puls-card__head { display: flex; justify-content: flex-end; margin-bottom: 2px; }

/* ---------- pasek zdrowia konta ---------- */
.health-bar {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); position: relative; overflow: hidden;
  border: 1px solid var(--color-border);
}
.health-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.health-bar--slaby { background: linear-gradient(180deg, var(--color-danger-subtle) 0%, var(--color-bg-surface) 84px); }
.health-bar--slaby::before { background: var(--color-danger); }
.health-bar--ok { background: linear-gradient(180deg, var(--color-warning-subtle) 0%, var(--color-bg-surface) 84px); }
.health-bar--ok::before { background: var(--color-warning); }
.health-bar--dobry { background: linear-gradient(180deg, var(--color-success-subtle) 0%, var(--color-bg-surface) 84px); }
.health-bar--dobry::before { background: var(--color-success); }
.health-bar--neutral { background: var(--color-bg-surface); }
.health-bar--neutral::before { background: var(--color-border-strong); }
.health-bar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.health-bar__msg { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 640px; }
.health-bar__dot {
  width: 34px; height: 34px; border-radius: var(--radius-full); flex: 0 0 auto; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-surface-muted); color: var(--color-text-secondary);
}
.health-bar--slaby .health-bar__dot { background: var(--color-danger-subtle); color: var(--color-danger); }
.health-bar--ok .health-bar__dot { background: var(--color-warning-subtle); color: var(--v-warn-fg); }
.health-bar--dobry .health-bar__dot { background: var(--color-success-subtle); color: var(--color-success); }
.health-bar__text { display: flex; flex-direction: column; gap: 2px; }
.health-bar__sentence { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-primary); line-height: var(--line-height-tight); }
.health-bar__sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.faza-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px var(--space-3);
  border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.health-bar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px var(--space-4);
  border-radius: var(--radius-full); background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong); font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-text-primary); box-shadow: var(--wz2-shadow-card-sm);
}
.chip__arrow { color: var(--color-text-muted); font-size: 11px; }

/* IN2 (D461): ostrzezenia paska zdrowia , wariant bursztynowy istniejacego
   .chip, osobny kontener pod chipami akcji (health-bar__actions). */
.health-bar__warnings { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 2px; }
.chip--warn {
  background: var(--color-warning-subtle); border-color: var(--color-warning);
  color: var(--v-warn-fg); align-self: flex-start; text-align: left;
}
.chip--warn svg { flex: 0 0 auto; color: var(--v-warn-fg); }
.health-bar__details { margin-top: 2px; }
.health-bar__details-link {
  list-style: none; cursor: pointer; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.health-bar__details-link::-webkit-details-marker { display: none; }
.health-bar__details[open] .health-bar__details-link svg { transform: rotate(180deg); }
.health-bar__details-link svg { transition: transform .15s ease; }
.health-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); }
.health-dim { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-surface-muted); border-radius: var(--radius-md); }
.health-dim__label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.dim-pill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-full); }
.dim-pill--slaby { background: var(--color-danger-subtle); color: var(--color-danger); }
.dim-pill--ok { background: var(--color-warning-subtle); color: var(--v-warn-fg); }
.dim-pill--dobry { background: var(--color-success-subtle); color: var(--color-success); }

/* ---------- hero (gauge) + 4 kafle ---------- */
.hero-row { display: flex; gap: var(--space-6); align-items: stretch; flex-wrap: wrap; }
.gauge-card { flex: 1 1 300px; max-width: 336px; padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; align-items: center; text-align: center; }
.gauge-card__label { align-self: flex-start; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; }
.gauge-svg { margin-top: var(--space-2); max-width: 100%; height: auto; }
.gauge-value { font-size: 52px; font-weight: 250; letter-spacing: -.02em; color: var(--color-text-primary); margin-top: -30px; font-variant-numeric: tabular-nums; }
.gauge-value--brak { font-size: 18px; font-weight: 600; color: var(--color-text-muted); margin-top: 10px; }
.gauge-unit { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.gauge-delta { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-full); background: var(--color-success-subtle); color: var(--color-success); font-size: 12px; font-weight: 600; }
.gauge-goal { margin-top: var(--space-2); font-size: 12px; color: var(--color-text-muted); }

.hero-stat-grid { flex: 1 1 420px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.hero-stat-tile { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); min-height: 132px; justify-content: center; }
.hero-stat-tile__head { display: flex; align-items: center; gap: var(--space-3); }
.hero-stat-tile__icon { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hero-stat-tile__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; }
.hero-stat-tile__value { font-size: 30px; font-weight: 250; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; min-height: 36px; display: flex; align-items: center; }
.hero-stat-tile__value--brak { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.hero-stat-tile__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hero-stat-tile__note { font-size: 12px; color: var(--color-text-muted); }
.hero-stat-tile__caption { font-size: 11px; color: var(--color-text-muted); margin-top: -2px; }
.delta-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; }
.delta-pill--up { background: var(--color-success-subtle); color: var(--color-success); }
.delta-pill--down { background: var(--color-danger-subtle); color: var(--color-danger); }
.delta-pill--neutral { background: var(--color-bg-surface-muted); color: var(--color-text-muted); font-weight: 500; }
@media (max-width: 900px) { .hero-stat-grid { grid-template-columns: 1fr; } }

/* ---------- wykres glowny ---------- */
.chart-card { padding: var(--space-6) var(--space-8) var(--space-8); }
.chart-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }
.chart-card__title { font-size: var(--font-size-lg); font-weight: 600; }
.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.legend-line { width: 16px; height: 3px; border-radius: 2px; background: var(--color-accent); display: inline-block; }
.legend-line.dashed { background: repeating-linear-gradient(90deg, var(--color-text-muted) 0 5px, transparent 5px 9px); height: 2px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-text); display: inline-block; }
.freshness { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.freshness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.freshness--brak .freshness-dot { background: var(--color-text-muted); }

/* ---------- sekcje zwijane ---------- */
.section-collapsible { padding: 0; }
.section-collapsible > summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.section-collapsible > summary::-webkit-details-marker { display: none; }
.section-summary__left { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.section-summary__chev { color: var(--color-text-muted); transition: transform .15s ease; flex: 0 0 auto; }
.section-collapsible[open] > summary .section-summary__chev { transform: rotate(90deg); }
.section-summary__title { font-size: var(--font-size-lg); font-weight: 600; }
.section-summary__badge { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.section-summary__headline { font-size: var(--font-size-lg); font-weight: 250; color: var(--color-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.section-body { padding: 0 var(--space-8) var(--space-8); }

/* lejek , prawdziwy ksztalt (bryla trapezow), D473 pkt 2; Z414 przywraca ten
   ksztalt w pulpicie (dane z sdmt.db, jedno okno dat z filtru nad lejkiem) */
.pl-lejek-svg-wrap { max-width: 480px; margin: 4px auto 0; }
.pl-lejek-svg-wrap .w-bryla-svg { display: block; width: 100%; height: auto; }

/* lejek z sdmt.db (Z409/Z414): filtr zakresu + bryla obok kolumny diagnoz */
.pl-lejek-filtr { margin-bottom: var(--space-4); }
.pl-lejek-pomiar { margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.pl-lejek-uklad { display: grid; grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
  gap: var(--space-6); align-items: start; }
/* Element siatki z marginesem auto kurczy sie do tresci (SVG bez wymiarow ma
   wtedy domyslne 300px) , stad jawne width, zeby bryla wypelniala kolumne. */
.pl-lejek-uklad .pl-lejek-svg-wrap { width: 100%; }
.pl-lejek-diagnozy { min-width: 0; }
.pl-lejek-diagnozy__tytul { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary);
  margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.pl-lejek-diag { margin-bottom: var(--space-3); }
.pl-lejek-diag__gora { display: flex; align-items: baseline; gap: var(--space-2); }
.pl-lejek-diag__tekst { font-size: 12px; line-height: 1.45; color: var(--color-text-primary); margin-top: 2px; }
.pl-lejek-nazwa { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); }
.pl-lejek-wartosc { margin-left: auto; font-size: var(--font-size-md); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-lejek-opis { font-size: 11px; line-height: 1.4; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pl-lejek-diag--brak .pl-lejek-wartosc { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); }
.pl-lejek-diag--brak .pl-lejek-nazwa { color: var(--color-text-muted); }
/* Z425: wyroznienie JEDNEGO glownego punktu naprawy w panelu diagnoz
   (pierwszy etap PROBLEM od gory) , subtelne, zeby nie konkurowalo z
   pigulkami statusow obok. */
.pl-lejek-glowny { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--v-err-fg); border: 1px solid var(--v-err-fg); border-radius: 999px; padding: 1px 7px; }
.pl-lejek-diag--glowny { border-left: 2px solid var(--v-err-fg); padding-left: var(--space-2); }
/* Z425: karta "Rolki" pod bryla , ta sama tabela co reszta pulpitu
   (.pl-tabela), tylko tytul rolki zostaje wyrownany do lewej i przyciety. */
.pl-lejek-rolki { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-rolki__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.pl-lejek-rolki__zdanie { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
table.pl-tabela-rolki th, table.pl-tabela-rolki td { padding: 6px 6px; }
table.pl-tabela-rolki td.pl-rolka-tytul { text-align: left; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.pl-tabela-rolki td.pl-rolka-tytul a { color: var(--v-text); text-decoration: none; border-bottom: 1px dotted var(--v-border); }
table.pl-tabela-rolki td.pl-rolka-tytul a:hover { color: var(--v-accent); }
table.pl-tabela-rolki .a-pill { font-variant-numeric: tabular-nums; }
/* Z474 (D1099): karta "Etapy" pod karta "Rolki" , TOFU/MOFU/BOFU tego samego
   okna co bryla lejka, ta sama tabela co reszta pulpitu (.pl-tabela). */
.pl-lejek-etapy { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-etapy__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.pl-lejek-etapy__zdanie { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
table.pl-tabela-etapy th, table.pl-tabela-etapy td { padding: 6px 8px; }
table.pl-tabela-etapy .a-pill { font-variant-numeric: tabular-nums; }
/* Z419: karta "Relacje" pod karta "Rolki" , pieć kafli agregatu 7 dni
   (insights Stories, okno 24h, zbierane co 4h). Prostsze niz tabela Rolek,
   bo relacja znika po 24h , nie ma sensu listowac pojedynczych relacji
   starszych niz dzien, agregat mowi wszystko, co da sie dzis pokazac. */
.pl-lejek-relacje { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-relacje__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.pl-lejek-relacje__zdanie { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.pl-lejek-relacje__kafle { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pl-lejek-relacje__kafel { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.pl-lejek-relacje__wartosc { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; }
.pl-lejek-relacje__etykieta { font-size: 11px; color: var(--color-text-muted); }
/* Z421: karta "Konsultacje" , obok karty "Sprzedaż": tabela + dwa
   formularze zwarte (dodaj / zmień status w wierszu), ten sam wzorzec co
   .pl-dziennik-form. */
.pl-lejek-konsultacje { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-konsultacje__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.pl-lejek-konsultacje__zdanie { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
table.pl-tabela-konsultacje th, table.pl-tabela-konsultacje td { padding: 6px 6px; }
.pl-konsultacje-status-form { display: flex; gap: 4px; align-items: center; }
.pl-konsultacje-dodaj-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.pl-konsultacje-dodaj-form input[type="date"] { width: 140px; }
.pl-konsultacje-dodaj-form input[type="number"] { width: 120px; }
.pl-konsultacje-dodaj-form input[type="text"] { flex: 1 1 160px; }
.pl-konsultacje-dodaj-form input, .pl-konsultacje-dodaj-form select,
.pl-konsultacje-status-form select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 8px;
  font-size: var(--font-size-sm); background: var(--color-bg-surface); color: var(--color-text-primary);
}
/* Z423: karta "Sprzedaż" pod karta "Relacje" , tabela zamówień Shopify,
   ten sam wzorzec co karta "Rolki" (.pl-tabela). */
.pl-lejek-sprzedaz { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-sprzedaz__tytul { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.pl-lejek-sprzedaz__zdanie { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.pl-lejek-sprzedaz__testowe { font-size: 11px; color: var(--color-text-muted); margin: var(--space-2) 0 0; }
table.pl-tabela-sprzedaz th, table.pl-tabela-sprzedaz td { padding: 6px 6px; }
.pl-lejek-trend { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pl-lejek-trend .pl-lejek-trend-svg { max-width: 720px; }
.pl-lejek-trend__tytul { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm);
  font-weight: 500; color: var(--color-text-primary); margin: 0 0 var(--space-2); }
.pl-lejek-legenda { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.pl-lejek-legenda i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }
.pl-lejek-legenda__zasieg { background: var(--color-accent); }
.pl-lejek-legenda__dm { background: var(--color-text-muted); }
.pl-lejek-trend-svg { display: block; width: 100%; height: auto; }
@media (max-width: 980px) { .pl-lejek-uklad { grid-template-columns: 1fr; gap: var(--space-4); } }

/* lejek , stare paski segmentowe (nieuzywane od D473, zostawione zeby nie
   ruszac reszty arkusza bez potrzeby) */
.funnel-list { display: flex; flex-direction: column; gap: var(--space-4); }
.funnel-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr minmax(80px, 110px); align-items: center; gap: var(--space-4); }
.funnel-row__label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); }
.funnel-row__label small { display: block; font-size: 11px; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
.funnel-track { display: flex; gap: 3px; }
.funnel-seg { flex: 1; height: 10px; border-radius: 3px; background: var(--color-bg-surface-muted); }
.funnel-seg.filled { background: var(--color-accent); }
.funnel-row__value { text-align: right; font-size: var(--font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .funnel-row { grid-template-columns: 1fr; text-align: left; } .funnel-row__value { text-align: left; } }

/* pareto */
.pareto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.pareto-col__title { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-3); }
.pareto-list { display: flex; flex-direction: column; gap: 2px; }
.pareto-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.pareto-item:last-child { border-bottom: none; }
.pareto-rank { width: 20px; font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.pareto-body { flex: 1; min-width: 0; }
.pareto-fmt { font-size: var(--font-size-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pareto-date { font-size: 11px; color: var(--color-text-muted); }
.pareto-val { font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
@media (max-width: 760px) { .pareto-grid { grid-template-columns: 1fr; } }

/* budzet ads + konto klienta (reuzywa .ads-tile) */
.ads-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ads-tile { flex: 1 1 180px; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-surface-muted); display: flex; flex-direction: column; gap: 4px; }
.ads-tile__label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.ads-tile__value { font-size: 24px; font-weight: 250; font-variant-numeric: tabular-nums; }
.ads-tile__note { font-size: 11px; color: var(--color-text-muted); }

/* D481: kafle kompaktowe "Budzet ads" (mniejsza odmiana .hero-stat-tile,
   7 kafli w rzedzie: Wydatek/Koszt-za-wynik/CPC/CTR/CPM/Czestotliwosc/
   Zasieg platny) + chip zdrowia w naglowku sekcji zwinietej. Chipy kafli
   REUZYWAJA .dim-pill (dobry/ok/slaby , juz istnieje dla wymiarow zdrowia),
   delta REUZYWA .delta-pill , zero nowej palety kolorow. */
.section-summary__headline-group { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.ads-compact-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ads-compact-tile {
  flex: 1 1 128px; min-width: 118px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg-surface-muted);
  display: flex; flex-direction: column; gap: 4px; min-height: 92px; justify-content: center;
}
.ads-compact-tile__label { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.ads-compact-tile__value { font-size: 19px; font-weight: 250; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ads-compact-tile__value--brak { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.ads-compact-tile__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; min-height: 20px; }
.ads-compact-note { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-3); }
@media (max-width: 700px) { .ads-compact-tile { flex: 1 1 45%; } }
@media (max-width: 420px) { .ads-compact-tile { flex: 1 1 100%; } }

/* dziennik / feed aktywnosci */
.feed-list { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: var(--space-4); padding: var(--space-3) 0; position: relative; }
.feed-item__icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--color-accent-subtle); color: var(--color-accent); }
.feed-item__icon.manual { background: var(--color-bg-surface-muted); color: var(--color-text-secondary); }
.feed-item__icon.wniosek { background: var(--color-success-subtle); color: var(--color-success); }  /* IN4 D461 */
.feed-item__body { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.feed-item__title { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); }
.feed-item__meta { font-size: 12px; color: var(--color-text-muted); }
.feed-item:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 42px; bottom: -12px; width: 1px; background: var(--color-border); }

/* stopka */
.footer-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-2); flex-wrap: wrap; gap: var(--space-3); }
.footer-bar__exports { display: flex; gap: var(--space-4); }
.footer-bar__exports a { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-accent); text-decoration: none; }
.footer-bar__exports a:hover { text-decoration: underline; }

/* ======================================================================
   WZORNIK-V2: MENU GORNE + WIRALE BIBLIOTEKA + KONCEPTY (D501, wykonawca
   Sonnet). Zrodlo: material/ux_panelu/mockup_wirale_v2.html + mockup_
   koncepty_v2.html (D499, zaakceptowane przez wlasciciela D501). Klasy
   przeniesione z makiet w duzej mierze 1:1 (brama jakosci wymaga porownania
   z makieta), uzywaja TOKENOW juz zdefiniowanych wyzej w tym pliku , tylko
   kilka nowych tokenow ponizej (kolory zrodel konceptu + cien "lg" karty
   aktywnej, ktorych brakowalo w istniejacym --shadow-lg). Wyjatek od
   "zero fioletu" (naglowek pliku): --color-pisarz to SWIADOMA decyzja
   z zaakceptowanej makiety , kodowanie TRZECH zrodel konceptu kolorem
   (VIRAL niebieski / KSIAZKA zielony / PISARZ fiolet), nie element chrome. */
:root {
  --wz2-shadow-card-lg: 0 2px 4px rgba(23, 27, 33, 0.05), 0 16px 40px rgba(23, 27, 33, 0.09);
  --color-viral: var(--color-accent);
  --color-viral-subtle: var(--color-accent-subtle);
  --color-ksiazka: #16824f;
  --color-ksiazka-subtle: #e9f7ef;
  --color-pisarz: #6a3ad1;
  --color-pisarz-subtle: #f2ecfd;
}

/* ---------- TOPNAV V2 (zastepuje .a-topmenu na stronach po D501) ---------- */
.topnav { position: sticky; top: 0; z-index: 40; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--wz2-shadow-card-sm); }
.topnav__inner { max-width: var(--container-max-wide); margin-inline: auto; padding-inline: var(--space-8); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.topnav__left { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.topnav .brand { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; color: inherit; text-decoration: none; }
.topnav .brand__mark { width: 34px; height: 34px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-accent), #003a70); color: var(--color-text-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-md); }
.topnav .brand__word { font-weight: 700; font-size: var(--font-size-md); letter-spacing: -.01em; }
.topnav__sep { width: 1px; height: 26px; background: var(--color-border); flex: 0 0 auto; }
.topnav .menu { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.topnav .menu__item { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; text-decoration: none; }
.topnav .menu__item:hover { background: var(--color-bg-surface-muted); color: var(--color-text-primary); }
.topnav .menu__item--active, .topnav .menu__item--active:hover { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; }
.topnav__right { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }

/* Narzedzia: <details>/<summary> CSS-only, zero JS (zlecenie: "czysty CSS
   :focus-within/details"). summary domyslny trojkat wylaczony wlasnym
   markerem SVG obracanym atrybutem [open]. */
.tools-menu { position: relative; }
.tools-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; list-style: none; }
.tools-trigger::-webkit-details-marker { display: none; }
.tools-trigger:hover { background: var(--color-bg-surface-muted); }
.tools-menu[open] .tools-trigger { background: var(--color-bg-surface-muted); }
.tools-menu[open] .tools-trigger svg:last-child { transform: rotate(180deg); }
.tools-trigger svg:last-child { transition: transform var(--duration-fast) var(--ease-out); }
.tools-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--color-bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 50; }
.tools-dropdown__item { display: flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); text-decoration: none; }
.tools-dropdown__item:hover { background: var(--color-bg-surface-muted); color: var(--color-accent); }
/* Z214: przelacznik "Widok klienta" , lista klientow to formularze <button>
   (POST, nie GET), reset nativnego wygladu buttona zeby wygladaly jak
   .tools-dropdown__item (linki Narzedzia obok). */
.tools-dropdown__button {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit;
}
/* Klik gdziekolwiek indziej zamyka <details> natywnie w wiekszosci przegladarek
   po utracie fokusu; dopinamy :focus-within jako dodatkowe wsparcie klawiatury. */
.tools-menu:not([open]):focus-within .tools-trigger { background: var(--color-bg-surface-muted); }

/* AURORA (D957): .avatar globalny (bylo .topnav .avatar , scoped tylko do
   dawnego menu admina). Uzyty w stopce side-nav (admin) i w naglowku
   klienta (viral_base.html, punkt 3: avatar z inicjalami zamiast "Wyloguj"). */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--au-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.logout-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
/* Menu avatara (klient): <details>/<summary> CSS-only, ten sam wzorzec co
   .tools-menu/.tools-trigger powyzej , wylogowanie w rozwijanym menu,
   dostepne klawiatura (Tab do <summary>, Enter/Spacja otwiera, Tab dalej
   do przycisku Wyloguj w srodku). */
.v-avatar-trigger { list-style: none; cursor: pointer; display: inline-flex; border-radius: 50%; }
.v-avatar-trigger::-webkit-details-marker { display: none; }
.v-avatar-trigger:focus-visible, .v-avatar-trigger:focus-visible .avatar { outline: 2px solid var(--au-fiolet); outline-offset: 2px; }
.v-avatar-menu[open] .v-avatar-trigger .avatar { box-shadow: 0 0 0 3px var(--au-status-tekst-ok-bg); }
.v-avatar-menu .tools-dropdown { min-width: 170px; }
.topnav .logout-link:hover { color: var(--color-text-primary); }
.topnav-user-name { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; }

/* a-wrap dostaje ten sam max-width co topnav, zeby tresc byla wyrownana
   (D501 wymog "1 rzad na 1440", zmierzone zrzutem). */
.a-wrap--v2 { max-width: var(--container-max-wide); }

@media (max-width: 1024px) {
  .topnav .menu { display: none; }
}

/* ---------- PASEK KROKU (Wirale: Zrodla / Przebiegi / Biblioteka) ---------- */
.step-pasek { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; background: var(--color-bg-surface); border-radius: var(--radius-full); padding: var(--space-2) var(--space-3); box-shadow: var(--wz2-shadow-card-sm); margin-bottom: var(--space-4); }
.step-pasek__item { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; }
.step-pasek__item--done { color: var(--color-text-secondary); }
.step-pasek__item--done .step-pasek__dot { color: var(--color-success); }
.step-pasek__item--active { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: 600; }
.step-pasek__chevron { color: var(--color-border-strong); }

/* ---------- SPLIT VIEW (Biblioteka) ---------- */
.split { display: flex; gap: var(--space-6); align-items: flex-start; }
.split__list { flex: 0 0 488px; display: flex; flex-direction: column; overflow: hidden; }
.split__list-head { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-border); }
.split__list-title { font-size: var(--font-size-md); font-weight: 600; flex: 0 0 auto; }
.split__list-count { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }

.reel-rows { display: flex; flex-direction: column; padding: var(--space-3); gap: 2px; max-height: 72vh; overflow-y: auto; }
.reel-row { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border-left: 3px solid transparent; text-decoration: none; color: inherit; }
.reel-row:hover { background: var(--color-bg-surface-muted); }
.reel-row--active { background: var(--color-accent-subtle); border-left-color: var(--color-accent); }
.reel-row--active:hover { background: var(--color-accent-subtle); }
.reel-row--decyzja { opacity: .55; }
.reel-row__thumb { flex: 0 0 auto; width: 42px; height: 60px; border-radius: 8px; background: linear-gradient(160deg, var(--gray-200, #e4e6ea), var(--gray-300, #cbd0d9)); display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.reel-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.reel-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reel-row__author { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); }
.reel-row__title { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-row__foot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.rec-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.rec-badge--warte { background: var(--color-accent-subtle); color: var(--color-accent); }
.rec-badge--neutralny { background: var(--color-bg-surface-muted); color: var(--color-text-muted); }
.rec-badge--nietrafiony { background: var(--color-danger-subtle); color: var(--color-danger); }
/* Z108/D667: wariant bursztynowy , komentarz compliance doradczy, tor
   "tylko_organika" (dozwolone w organice, nie w reklamie Meta). */
.rec-badge--uwaga { background: var(--color-warning-subtle); color: var(--color-warning); }

.reel-row__reach { flex: 0 0 auto; text-align: right; font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-primary); min-width: 74px; }
.reel-row__reach small { display: block; font-size: 10px; color: var(--color-text-muted); font-weight: 400; }

.reel-row__quick { position: relative; z-index: 1; flex: 0 0 auto; display: none; align-items: center; gap: 4px; }
.reel-row:hover .reel-row__reach, .reel-row:hover .reel-row__foot { display: none; }
.reel-row:hover .reel-row__quick { display: flex; }
.qa-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
.qa-btn--interesuje { background: var(--color-accent); color: var(--color-text-on-accent); }
.qa-btn--odrzuc { background: var(--color-danger-subtle); color: var(--color-danger); }
.qa-btn--pomin { background: var(--color-bg-surface-muted); color: var(--color-text-muted); }

.hint-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px dashed var(--color-border-strong); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.hint-sep { color: var(--color-border-strong); }
kbd, .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--v-mono); font-size: 11px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); border-radius: 6px; }

/* ---------- DETAIL PANEL (Biblioteka) ---------- */
.split__detail { flex: 1; padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.detail-cols { display: flex; gap: var(--space-6); align-items: flex-start; }
.player { flex: 0 0 216px; width: 216px; height: 384px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--gray-800, #2c3340), var(--gray-900, #171b21)); position: relative; overflow: hidden; }
.player img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: .85; }
.player__tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-full); background: rgba(255,255,255,.14); color: #fff; font-size: 10px; font-weight: 600; backdrop-filter: blur(2px); z-index: 1; }
.player__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--gray-900, #171b21); z-index: 1; }
.player__duration { position: absolute; bottom: 10px; right: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; z-index: 1; }

.detail-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.detail-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.detail-meta strong { color: var(--color-text-primary); font-weight: 600; }
.detail-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); }
.detail-hook { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -.01em; line-height: var(--line-height-tight); }
.detail-section { display: flex; flex-direction: column; gap: 4px; }
.detail-section__label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.detail-section__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); }

.eval-card { background: var(--color-bg-surface-muted); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.eval-card__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.eval-card__title { font-size: var(--font-size-sm); font-weight: 600; }
.eval-list { display: flex; flex-direction: column; gap: 6px; }
.eval-list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.eval-list__icon { flex: 0 0 auto; color: var(--color-success); margin-top: 2px; }

.detail-actions { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border-strong); }
.btn--danger-ghost { background: transparent; color: var(--color-danger); border-color: var(--color-danger-subtle); }
.btn kbd { margin-left: 2px; }
.btn--primary kbd { color: var(--color-text-on-accent); background: rgba(255,255,255,.22); border: none; }
.btn--ghost kbd, .btn--danger-ghost kbd { color: var(--color-text-secondary); background: var(--color-bg-surface-muted); border: 1px solid var(--color-border-strong); border-bottom-width: 2px; }

/* ---------- KONCEPTY: LICZNIK + FILTRY ---------- */
.progress-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.progress-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.progress-card__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; }
.progress-card__value { font-size: var(--font-size-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-card__value small { color: var(--color-text-muted); font-weight: 400; }
.progress-track { width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--color-bg-surface-muted); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)); }

.filter-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chip-f { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); box-shadow: var(--wz2-shadow-card-sm); text-decoration: none; cursor: pointer; }
.chip-f--active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); font-weight: 600; }
.chip-f--disabled { opacity: .55; cursor: default; }
.chip-f__count { font-size: 11px; opacity: .8; }

.view-toggle { display: inline-flex; background: var(--color-bg-surface-muted); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.view-toggle__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); color: var(--color-text-muted); border: none; background: none; cursor: pointer; font-family: inherit; }
.view-toggle__item.on { background: var(--color-bg-surface); color: var(--color-accent); box-shadow: var(--wz2-shadow-card-sm); }

/* ---------- KONCEPTY: BADGE ZRODLA ---------- */
.src-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.src-badge--viral { background: var(--color-viral-subtle); color: var(--color-viral); }
.src-badge--ksiazka { background: var(--color-ksiazka-subtle); color: var(--color-ksiazka); }
.src-badge--pisarz { background: var(--color-pisarz-subtle); color: var(--color-pisarz); }

/* ---------- KONCEPTY: KARTA AKTYWNA + ZAJAWKI ---------- */
.queue { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.active-card { width: 100%; max-width: 820px; padding: var(--space-8); box-shadow: var(--wz2-shadow-card-lg); display: flex; flex-direction: column; gap: var(--space-5); }
.active-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.active-card__filar { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.active-card__body { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.active-card__media { flex: 0 0 152px; width: 152px; height: 152px; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.media--viral { background: linear-gradient(160deg, var(--gray-800, #2c3340), var(--gray-900, #171b21)); display: flex; align-items: center; justify-content: center; }
.media--viral svg { color: rgba(255,255,255,.9); }
.media--viral .media__badge { position: absolute; bottom: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; font-weight: 600; }
.media--ksiazka { background: var(--color-ksiazka-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-3); text-align: center; }
.media--ksiazka svg { color: var(--color-ksiazka); }
.media--ksiazka__title { font-size: 11px; font-weight: 700; color: var(--color-ksiazka); }
.media--ksiazka__author { font-size: 10px; color: var(--color-text-secondary); }
.media--pisarz { background: var(--color-pisarz-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: var(--space-3); }
.media--pisarz svg { color: var(--color-pisarz); }
.media--pisarz__label { font-size: 10px; font-weight: 700; color: var(--color-pisarz); text-transform: uppercase; letter-spacing: .03em; }

.active-card__content { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-3); }
.active-card__hook { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -.01em; line-height: var(--line-height-tight); }
.active-card__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); }
.active-card__quote { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-style: italic; border-left: 3px solid var(--color-ksiazka-subtle); padding-left: var(--space-3); }
.active-card__quote cite { display: block; margin-top: 4px; font-style: normal; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.active-card__meta-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.active-card__hint { font-size: 13px; color: var(--color-text-muted); }

.active-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.action-btns { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.upnext { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: var(--space-2); }
.upnext__label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-left: var(--space-2); }
.upnext-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit; }
.upnext-card--1 { opacity: .88; }
.upnext-card--2 { opacity: .72; }
.upnext-card__media { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.upnext-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upnext-card__hook { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext-card__filar { font-size: 11px; color: var(--color-text-muted); }

/* ---------- KONCEPTY: GESTY WIDOK ---------- */
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.section-title { font-size: var(--font-size-lg); font-weight: 600; }
.section-title__sub { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 400; }
.dense-list { display: flex; flex-direction: column; }
.dense-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); }
.dense-row:last-child { border-bottom: none; }
.dense-row:hover { background: var(--color-bg-surface-muted); }
.dense-row__src { flex: 0 0 96px; }
.dense-row__hook { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dense-row__filar { flex: 0 0 200px; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dense-row__rec { flex: 0 0 110px; }
.dense-row__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 30px; height: 30px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-text-secondary); cursor: pointer; text-decoration: none; }
.icon-btn--accept { color: var(--color-success); border-color: var(--color-success-subtle); }
.icon-btn--reject { color: var(--color-danger); border-color: var(--color-danger-subtle); }
.menu__item.a-locked { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* D501 fix: .v-flow-item wewnatrz .reel-row jest teraz NIEWIDZIALNYM
   overlayem na cala szerokosc wiersza (stretched-link pattern , zachowuje
   dawny selektor JS .v-flow-item[href*=...] dzialajacy, patrz viral_wyniki.
   html), nie kartą , zeruje dawne tlo/obwodke/padding (inaczej jego OPAQUE
   tlo .v-surface, malowane NAD tresc wiersza per kolejnosc malowania
   pozycjonowanych potomkow, calkowicie zakrywalo widoczna tresc , znaleziony
   realny bug, zmierzony zrzutem). */
.reel-row .v-flow-item,
.reel-row .v-flow-item:hover,
.reel-row .v-flow-item.on { background: transparent; border: none; padding: 0; }

/* ---------- F2-A (D503): START = KOLEJKA DZIALAN ---------- */
.kolejka-sekcja { border-left: 3px solid var(--v-border); }
.kolejka-sekcja--pilne { border-left-color: var(--v-err-fg); }
.kolejka-sekcja--ruch { border-left-color: var(--v-warn-fg); }
.kolejka-sekcja--klient { border-left-color: var(--v-accent); }
.kolejka-wiersz { flex-wrap: wrap; }
.kolejka-wiersz .a-item-tresc { white-space: normal; overflow: visible; text-overflow: clip; }
.kolejka-akcja { margin-left: auto; flex: 0 0 auto; padding: 6px 12px; font-size: 12px; }
.kolejka-pusta .empty-state__icon { color: var(--v-ok-fg); background: var(--v-ok-bg); }

/* ---------- F2-B (D503): RAPORTY MASTER-DETAIL ---------- */
.rap-row { justify-content: space-between; }
.rap-row .reel-row__author { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }
.rap-row .reel-row__title { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.rap-detail { gap: var(--space-5); }
.rap-edytor { border: 1px solid var(--v-accent); }
.rap-kroki { margin: 2px 0 0; }
.rap-kroki summary { cursor: pointer; font-size: 12.5px; color: var(--v-muted); padding: 4px 0; }
.rap-kroki .v-textarea { margin-top: 6px; }
.rap-zatwierdz { align-self: flex-start; }

/* ---------- F2-C (D503): KLIENCI ODCHUDZENI ---------- */
.kl-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.kl-dot.ok { background: var(--v-ok-fg); }
.kl-dot.warn { background: var(--v-warn-fg); }
.kl-dot.err { background: var(--v-err-fg); }
.kl-dot.off { background: var(--v-muted); opacity: .45; }

.kl-pasek-cienki {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  padding: 8px 16px; border: 1px solid var(--v-border); border-radius: 999px;
  background: var(--v-surface); font-size: 12px; margin: 0 0 14px;
}
.kl-pasek-cienki__etykieta { color: var(--v-muted); font-weight: 600; }
.kl-pasek-cienki__poz { display: inline-flex; align-items: center; gap: 6px; color: var(--v-text); cursor: default; }

.kl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--v-border); background: var(--v-surface); font-size: 12.5px; font-weight: 500;
  cursor: pointer; color: var(--v-text); font-family: inherit;
}
.kl-chip.on { background: var(--v-accent); color: var(--v-accent-contrast); border-color: var(--v-accent); }

.kl-zrodla-linia { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.kl-zrodlo-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v-text); cursor: default; }

.kl-config { margin-top: 10px; }
.kl-config summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--v-muted); padding: 4px 0; }
.kl-config[open] summary { margin-bottom: 4px; }

.kl-nieaktywni-tytul { font-size: 13px; font-weight: 600; color: var(--v-muted); margin: 18px 0 8px; }
.kl-belka { border: 1px solid var(--v-border); border-radius: var(--v-radius); background: var(--v-off-bg); margin-bottom: 8px; overflow: hidden; }
.kl-belka[open] { background: var(--v-surface); }
.kl-belka summary {
  cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  color: var(--v-muted); font-size: 13px; font-weight: 500; list-style: none;
}
.kl-belka summary::-webkit-details-marker { display: none; }
.kl-belka-tech { font-size: 11px; color: var(--v-muted); font-family: var(--v-mono); margin-left: auto; }
.kl-belka-body { padding: 0 16px 16px; }
.kl-belka-body .kl-karta { border: none; padding: 12px 0 0; box-shadow: none; }

/* filtr "Tylko problemy" , ukrywa karty/belki bez zadnego zrodla nieaktualne/brak_danych */
body.kl-tylko-problemy .kl-karta[data-problem="0"] { display: none; }
body.kl-tylko-problemy .kl-belka[data-problem="0"] { display: none; }

/* ---------- F2-D (D503): ZAPLECZE , ZAKLADKI POZIOME ---------- */
.zap-tabs { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin: 4px 0 4px; }
.zap-tab {
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--font-size-sm);
  font-weight: 500; color: var(--color-text-secondary); text-decoration: none; border: 1px solid transparent;
}
.zap-tab:hover { background: var(--color-bg-surface-muted); color: var(--color-text-primary); }
.zap-tab--active, .zap-tab--active:hover {
  background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; border-color: var(--color-accent-border);
}

/* ---------- TOAST (D509 usprawnienie, E2/Z301 punkt 5: prawy dolny rog,
   znika po 4 s, wariant --err TRWALY dla bledow , zamykany wylacznie
   recznie przyciskiem X) , jeden wspolny helper window.vToast w
   app_virale.js (ladowany na kazdej stronie admina i klienta). ---------- */
.v-toast {
  position: fixed; right: 20px; bottom: 20px; left: auto; transform: translateY(16px);
  display: flex; align-items: center; gap: var(--space-4); max-width: min(92vw, 420px);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--gray-900, #171b21); color: #fff; box-shadow: var(--shadow-lg);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.v-toast.widoczny { opacity: 1; transform: translateY(0); pointer-events: auto; }
.v-toast--err { background: var(--color-danger, #991b1b); }
@media (max-width: 480px) { .v-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; } }
.v-toast__msg { font-size: var(--font-size-sm); font-weight: 500; }
.v-toast__link {
  font-size: var(--font-size-sm); font-weight: 700; color: #fff; text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.5);
}
.v-toast__link:hover { border-bottom-color: #fff; }
.v-toast__close {
  margin-left: auto; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.v-toast__close:hover { background: rgba(255,255,255,.22); }


/* ======================================================================
   D513 SZLIFY PULPITU (2026-08-23, przeklik wlasciciela): nowy uklad gory
   (filtry -> wykres+insight obok -> pasek zdrowia -> kafle KPI pomniejszone
   -> sekcje parami), dzialania przy wymiarach zdrowia i chipach IN2,
   Pareto/Dziennik klikalne do posta, "Nastepne kroki" jako zwarte zadania.
   Cel: gorne 100vh (1440x900) miesci filtry+wykres+insight+pasek zdrowia+
   kafle KPI, scroll dopiero do sekcji parami. ---------------------------- */

/* ---------- wykres + "co widac w liczbach" OBOK (2/3 + 1/3) ---------- */
.chart-insight-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--space-4); align-items: stretch; }
.chart-insight-row .chart-card { min-width: 0; }
.pl-insight-card--side { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 980px) {
  .chart-insight-row { grid-template-columns: 1fr; }
}

/* ---------- kafle KPI pomniejszone: gauge + 4 kafle w jednym rzedzie ---------- */
.kpi-row { display: grid; grid-template-columns: minmax(160px, 200px) repeat(4, 1fr); gap: var(--space-3); align-items: stretch; }
.kpi-row .gauge-card { max-width: none; padding: var(--space-3) var(--space-4); }
.kpi-row .gauge-svg { width: 128px; height: auto; }
.kpi-row .gauge-value { font-size: 20px; margin-top: 6px; }
.kpi-row .gauge-unit { font-size: 10.5px; }
.kpi-row .gauge-goal { font-size: 10.5px; }
.kpi-row .hero-stat-tile { min-height: 96px; padding: var(--space-3) var(--space-4); gap: 4px; }
.kpi-row .hero-stat-tile__icon { width: 28px; height: 28px; }
.kpi-row .hero-stat-tile__icon svg { width: 14px; height: 14px; }
.kpi-row .hero-stat-tile__value { font-size: 22px; min-height: 26px; }
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- sekcje parami (Lejek+Budzet ads, Pareto+Dziennik) ---------- */
.section-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.section-pair .section-collapsible { margin: 0; }
@media (max-width: 980px) {
  .section-pair { grid-template-columns: 1fr; }
}

/* ---------- D513 pkt 3a: dzialania per wymiar zdrowia (kazdy wymiar to
   wlasny <details>, zeby dzialania nie zaslaly listy gdy nie sa potrzebne) ---------- */
details.health-dim { border: none; padding: 4px 0; }
details.health-dim > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  cursor: pointer; list-style: none;
}
details.health-dim > summary::-webkit-details-marker { display: none; }
details.health-dim > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--color-text-muted);
  border-bottom: 1.6px solid var(--color-text-muted); transform: rotate(45deg); flex: 0 0 auto; margin-left: 2px;
  transition: transform .15s ease;
}
details.health-dim[open] > summary::after { transform: rotate(-135deg); }
.health-dim__body { padding: 6px 0 10px; }
.health-dim__opis { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 6px; }
.health-dim__dzialania { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.health-dim__dzialania li { font-size: 12px; color: var(--color-text-primary); padding-left: 15px; position: relative; line-height: 1.4; }
.health-dim__dzialania li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }

/* ---------- D513 pkt 3b: chip ostrzezenia rozwijany z 1 dzialaniem ---------- */
details.chip-warn-details { display: block; }
details.chip-warn-details > summary { list-style: none; cursor: pointer; }
details.chip-warn-details > summary::-webkit-details-marker { display: none; }
details.chip-warn-details > summary .chip__arrow { transition: transform .15s ease; display: inline-block; }
details.chip-warn-details[open] > summary .chip__arrow { transform: rotate(90deg); }
.chip-warn-action {
  font-size: 12px; color: var(--color-text-primary); background: var(--color-bg-surface-muted);
  border-radius: var(--radius-md); padding: 7px 11px; margin: 4px 0 0 6px; max-width: 620px;
}

/* ---------- D513 pkt 1: Pareto + Dziennik klikalne do posta na IG/FB ---------- */
a.pareto-item, a.feed-item { text-decoration: none; color: inherit; border-radius: var(--radius-md); }
a.pareto-item:hover, a.feed-item:hover { background: var(--color-bg-surface-muted); }
.pareto-item__ext { color: var(--color-text-muted); flex: 0 0 auto; }

/* ---------- D513 pkt 1: opis pusty (caption realnie brak na IG) , uczciwy
   placeholder zamiast pustej linii ---------- */
.pl-opis-brak { color: var(--color-text-muted); font-style: italic; }

/* ---------- D513(e): trescii miesiaca wiarygodnie z bazy + legacy note ---------- */
.tresci-legacy-note { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.4; }

/* ---------- D513 pkt 5: "Nastepne kroki" jako zwarte zadania (checkbox-
   wyglad bez logiki, badge kto: My/Klient) ---------- */
.kroki-lista { display: flex; flex-direction: column; gap: 6px; }
.kroki-task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-bg-surface-muted); }
.kroki-task__checkbox { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--color-border-strong); flex: 0 0 auto; }
.kroki-task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kroki-task__tekst { font-size: 13px; font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kroki-task__notatka { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kroki-task__badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-full); }
.kroki-task__badge--my { background: var(--color-accent-subtle); color: var(--color-accent); }
.kroki-task__badge--klient { background: var(--color-warning-subtle); color: var(--v-warn-fg); }

/* ---------- D513 pkt 2 (kompresja gory, cel 100vh na 1440x900): above-the-
   fold (filtry, wykres+insight, pasek zdrowia, kafle KPI) w wlasnym,
   ciasniejszym stosie zamiast domyslnego 16px .a-stack gap. ---------- */
.pl-above-fold { display: flex; flex-direction: column; gap: 10px; }
.pl-above-fold .top-row { margin: 0; }
.pl-above-fold .chart-card { padding: 14px 20px 16px; }
.pl-above-fold .chart-card__head { margin-bottom: 6px; }
.pl-above-fold .chart-legend { margin-top: 4px; }
.pl-above-fold .pl-insight-card--side { padding: 8px 14px 10px; }
.pl-above-fold .health-bar { padding-top: 12px; padding-bottom: 12px; }
.pl-page .page-header { margin-bottom: 10px; }
.pl-page .page-header__title { font-size: 22px; margin-bottom: 2px; }
.pl-page .page-header__desc { font-size: 12px; }

/* D513 pkt 2 (dalsza kompresja, pomiar 1440x900): pasek zdrowia zwarciej ,
   zdanie mniejsze, podtytul "Ocena na podstawie..." ukryty (juz niesie to
   samo, co widac po rozwinieciu Szczegoly), mniejszy odstep miedzy blokami. */
.pl-above-fold .health-bar { gap: 6px; }
.pl-above-fold .health-bar__sentence { font-size: 14.5px; }
.pl-above-fold .health-bar__sub { display: none; }
.pl-above-fold .health-bar__actions { gap: 6px; }
.pl-above-fold .chip { padding: 5px 10px; font-size: 12px; }

/* D513 pkt 2 (dalsza kompresja, ostatni docisk pomiaru 1440x900). */
.pl-above-fold { gap: 8px; }
.pl-page .page-header { margin-bottom: 6px; }

/* D513 pkt 2: wiersz "Tabela dokladnych liczb" + eksporty NA JEDNEJ LINII ,
   eksporty przypiete w rogu (position:absolute), details zostaje
   samodzielnym, poprawnym elementem (summary+tabela), nie flex-childem. */
.pl-wykres-foot { position: relative; margin-top: 8px; min-height: 20px; }
.pl-wykres-foot__tabela > summary { cursor: pointer; font-size: 12.5px; color: var(--v-muted); font-weight: 600; list-style: none; padding-right: 150px; }
.pl-wykres-foot__tabela > summary::-webkit-details-marker { display: none; }
.pl-wykres-akcje--rog { position: absolute; top: 0; right: 0; margin-top: 0; }

/* ======================================================================
   D517: BLOK KAFLE (2 RZEDY) + PANEL "ZADANIA" (LEWO 2/3 kafle, PRAWO 1/3
   panel na wysokosc obu rzedow). Pasek zdrowia NAD tym blokiem zostaje
   WYLACZNIE diagnoza+faza+Szczegoly (chipy dzialan/ostrzezenia IN2
   przeniesione tu, do panelu , zero dublowania tresci). Iteracja 3
   (pomiar 1440x900 przez playwright, getBoundingClientRect , patrz
   notatka przebiegu): kazdy poziom kompresji ponizej zmierzony, nie
   zgadywany. ---------------- */
.kafle-zadania-blok { display: grid; grid-template-columns: minmax(0, 2fr) minmax(224px, 1fr); gap: var(--space-4); align-items: stretch; }
.kafle-zadania-blok__kafle { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
@media (max-width: 980px) {
  .kafle-zadania-blok { grid-template-columns: 1fr; }
}

/* rzad 1 (organiczne), D521a: wlasciciel odrzucil wielokropki na etykietach
   kafli (nic nie moze byc uciete). Fix u zrodla , krotsze etykiety ("DM"
   zamiast "Wiadomosci DM z silnika", podpis "automatyczne odpowiedzi" pod
   liczba; "Obserwujacy" zamiast "Obserwujacy, liczba bohater" w kaflu
   gauge, pelny opis zostaje w title=). Notki, ktore i tak sa dlugie (np.
   "brak pomiaru sprzed okresu", "suma torow ~ Meta nie odlicza...") , PELNY
   tekst, mniejsza czcionka, zawijanie do 2 linii zamiast ciecia. */
.kafle-zadania-blok .kpi-row .hero-stat-tile { min-height: 104px; padding: 9px 12px; gap: 3px; min-width: 0; }
.kafle-zadania-blok .kpi-row.kpi-row { grid-template-columns: minmax(0, 190px) repeat(4, minmax(0, 1fr)); }
/* E2/Z301 punkt 2: pulpit klientki (prosty=True) pokazuje TYLKO 2 kafle
   (obserwujacy, zasieg) zamiast 4 , siatka wezsza, zero pustych kolumn. */
.kafle-zadania-blok .kpi-row.kpi-row--prosty { grid-template-columns: minmax(0, 190px) repeat(2, minmax(0, 1fr)); }
.kafle-zadania-blok .kpi-row .hero-stat-tile__label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-size: 11.5px; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__value { font-size: 19px; min-height: 22px; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__value--brak { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; line-height: 1.25; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__note { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; display: inline-block; font-size: 10.5px; line-height: 1.3; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__caption { font-size: 10px; line-height: 1.2; }
.kafle-zadania-blok .kpi-row .gauge-card { padding: 8px 12px; min-width: 0; }
.kafle-zadania-blok .kpi-row .gauge-card__label { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; }
.kafle-zadania-blok .kpi-row .gauge-svg { width: 88px; margin-top: 3px; }
.kafle-zadania-blok .kpi-row .gauge-value { font-size: 17px; margin-top: 4px; }
.kafle-zadania-blok .kpi-row .gauge-unit { font-size: 10px; margin-top: 0; }
.kafle-zadania-blok .kpi-row .gauge-card__label { font-size: 10.5px; line-height: 1.2; }

/* rzad 2: metryki platne D481 W LINII (nie w zwijanej karcie jak dawniej) ,
   REUZYWA .ads-compact-tile (bez zmian wizualnych kafli), WYMUSZA dokladnie
   6 kolumn (grid, nie flex-wrap , przy flex-wrap ostatni kafel Czestotliwosc
   zawijal sie do DRUGIEGO rzedu i podwajal wysokosc calego bloku). D521a:
   chip zdrowia (dim-pill, np. "CZESTOTLIWOSC W NORMIE") MUSI byc w calosci
   widoczny , zero wielokropka, zamiast tego przelamanie do 2 linii i wyzsze
   kafle (min-height); siatka CSS sama wyrownuje wysokosci w rzedzie. */
.kafle-ads { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px var(--space-4) 8px; }
.kafle-ads__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 5px; flex-wrap: wrap; }
.kafle-ads__title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); }
.kafle-ads .ads-compact-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: stretch; }
.kafle-ads .ads-compact-tile { min-height: 62px; padding: 6px 8px; gap: 3px; min-width: 0; }
.kafle-ads .ads-compact-tile__value { font-size: 14.5px; }
.kafle-ads .ads-compact-tile__label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: break-word; word-break: break-word; }
.kafle-ads .ads-compact-tile__foot { min-height: 0; }
.kafle-ads .dim-pill, .kafle-ads .delta-pill { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; font-size: 9px; padding: 2px 7px; line-height: 1.25; border-radius: var(--radius-md); }
.kafle-ads .ads-compact-note { margin-top: 4px; font-size: 10.5px; }
.ads-quiet-line { font-size: 12.5px; color: var(--color-text-muted); margin: 0; padding: 6px 2px; }
/* D521a iteracja 3: przy 1180px 6 waskich kolumn lamalo pojedyncze slowa
   ("CZESTOTLIWOSC" na "CZESTOTLIWOS" + osierocone "C") , 3 kolumny dają
   kaflom dosc miejsca na etykiete w jednej/dwoch pelnych liniach. */
@media (max-width: 1220px) { .kafle-ads .ads-compact-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kafle-ads .ads-compact-grid { grid-template-columns: repeat(2, 1fr); } }

/* panel "Zadania" , kropka koloru (priorytet) + 1 linia + link, stopka
   linkuje do Startu (admin) gdzie zyje kompletna Kolejka dzialan. */
.zadania-panel { display: flex; flex-direction: column; padding: 10px var(--space-4) 8px; height: 100%; min-width: 0; }
.zadania-panel__head { margin-bottom: 4px; }
.zadania-panel__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); }
.zadania-panel__pusto { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-text-muted); font-size: 12.5px; padding: 12px 4px; }
.zadania-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow-y: auto; }
.zadanie { display: flex; align-items: flex-start; gap: 7px; padding: 3px 4px; border-radius: var(--radius-md); }
.zadanie:hover { background: var(--color-bg-surface-muted); }
.zadanie__kropka { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
.zadanie--pilne .zadanie__kropka { background: var(--color-danger); }
.zadanie--wazne .zadanie__kropka { background: var(--color-warning); }
.zadanie--plan .zadanie__kropka { background: var(--color-accent); }
.zadanie__tekst { font-size: 11.5px; line-height: 1.3; color: var(--color-text-primary); text-decoration: none; }
.zadanie__tekst:hover { text-decoration: underline; }
.zadania-panel__stopka { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--color-border); text-align: right; }
.zadania-panel__stopka a { font-size: 11.5px; font-weight: 600; color: var(--color-accent); text-decoration: none; }
.zadania-panel__stopka a:hover { text-decoration: underline; }

/* D583: badge subtelny 'projekt' , odroznia zadania z tabeli "zadania" (system CLI/panelu /admin/zadania) od operacyjnych (kolejka_read) w panelu Zadan pulpitu klienta. */
.zadanie__tag-projekt { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 3px; padding: 0 4px; vertical-align: middle; margin-right: 2px; }

/* dalsza kompresja gory (cel: 1440x900 bez przyciecia , patrz D513 above-fold).
   Pasek zdrowia D517 niesie WYLACZNIE diagnoze+faze+Szczegoly (bez chipow
   akcji/ostrzezen, przeniesionych do panelu Zadan) , moze byc zwarciejszy
   niz w D513, kiedy niosl tez chipy. */
.pl-above-fold .health-bar { padding-top: 4px; padding-bottom: 4px; gap: 3px; }
.pl-above-fold .health-bar__sentence { font-size: 13px; }
.pl-above-fold .health-bar__dot { width: 24px; height: 24px; }
.pl-above-fold .health-bar__details-link { font-size: 12px; }
.pl-above-fold .kafle-zadania-blok { margin-top: 0; }

/* iteracja 4 (dalszy docisk 1440x900 , po dodaniu rzedu 2 kafli platnych i
   panelu Zadan, above-fold potrzebowal wiecej miejsca niz w D513): wykres+
   filtry+odstepy odrobine zwarciej, bez zmiany ich tresci/uklada. */
.pl-above-fold { gap: 5px; }
.pl-above-fold .chart-card { padding: 8px 16px 8px; }
.kafle-ads__head { line-height: 1.15; }
.kafle-ads .section-summary__headline-group { gap: 6px; }
.kafle-ads__title { line-height: 16px; }

/* iteracja 5+6 (docisk koncowy , pomiar wykazal, ze .health-bar__msg
   max-width:640px z rdzenia stylu wymuszal 2 linie diagnozy zdrowia nawet
   przy pelnej szerokosci paska , tu wiecej miejsca, jedna linia). */
.pl-above-fold .health-bar__msg { max-width: none; }

/* iteracja 7 (ostatni docisk , 21px ponad 900px): ikony rzedu 1 mniejsze +
   ciasniejszy odstep ikona-etykieta, gap kafla mniejszy. */
.kafle-zadania-blok .kpi-row .hero-stat-tile__icon { width: 20px; height: 20px; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__icon svg { width: 11px; height: 11px; }
.kafle-zadania-blok .kpi-row .hero-stat-tile__head { gap: 6px; }

/* ---------- WIADOMOSCI KLIENTOW (D533): watek admin<->klient ---------- */
.wtk-list { display: flex; flex-direction: column; gap: var(--space-3); max-height: 52vh; overflow-y: auto;
  padding: var(--space-2) 0; }
.wtk-msg { display: flex; flex-direction: column; gap: 4px; max-width: 68%; }
.wtk-msg--right { align-self: flex-end; align-items: flex-end; }
.wtk-msg--left { align-self: flex-start; align-items: flex-start; }
.wtk-msg__bubble { padding: 10px 14px; border-radius: var(--radius-lg); font-size: var(--font-size-sm);
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.wtk-msg--right .wtk-msg__bubble { background: var(--color-accent); color: var(--v-accent-contrast, #fff);
  border-bottom-right-radius: 4px; }
.wtk-msg--left .wtk-msg__bubble { background: var(--color-bg-surface-muted); color: var(--color-text-primary);
  border-bottom-left-radius: 4px; }
.wtk-msg__meta { font-size: 11px; color: var(--color-text-muted); padding: 0 4px; }
.wtk-form { display: flex; gap: var(--space-3); align-items: flex-end; border-top: 1px solid var(--color-border);
  padding-top: var(--space-4); margin: 0; }
.wtk-form .v-textarea { flex: 1; resize: vertical; min-height: 44px; }

/* ======================================================================
   D543: WIDOK /admin/zadania (chipy, wiersze rozwijane, formularz dodaj)
   ====================================================================== */
.za-lista-glowna { display: flex; flex-direction: column; gap: 6px; }
.za-belka {
  background: var(--v-surface); border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
}
.za-belka[open] { border-color: var(--v-accent); }
.za-wiersz {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; list-style: none; font-size: 13.5px;
}
.za-wiersz::-webkit-details-marker { display: none; }
.za-id { flex: 0 0 auto; color: var(--v-muted); font-size: 12px; }
.za-tytul { flex: 1 1 260px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.za-kto { flex: 0 0 auto; color: var(--v-muted); font-size: 12px; min-width: 74px; }
.za-wiek { flex: 0 0 auto; min-width: 70px; text-align: right; }
.za-blokada { flex: 0 0 auto; font-size: 12px; color: var(--v-muted); min-width: 90px; }
.za-detale { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.za-opis { font-size: 13.5px; color: var(--v-text); margin: 0; }
.za-akcje { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.za-akcje .v-field { min-width: 160px; }
.za-akcje .v-btn-row { margin-left: auto; }
.za-stan { min-height: 16px; }

.za-czeka { border-color: var(--v-warn-fg); }
.za-czeka h2 { color: var(--v-warn-fg); }
.za-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.za-wiersz-mini { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.za-tytul-mini { flex: 1 1 auto; }

.za-form-dodaj { border-color: var(--v-accent); }
.za-form-rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }

@media (max-width: 767px) {
  .za-wiersz { flex-wrap: wrap; }
  .za-tytul { flex-basis: 100%; white-space: normal; order: -1; }
}

/* ---------- KONCEPTY: PROPOZYCJE PISARZA (Z49/D451/D553) , hooki jako karty-
   radio z etykieta wzorca (jak makieta planu, templates/plan.html .pl-hak)
   + warianty tresci obok siebie. Nowe lokalne klasy, tokeny wspoldzielone
   z reszta sekcji KONCEPTY wyzej w tym pliku. ---------- */
.pisarz-hooki { display: flex; flex-direction: column; gap: 6px; }
.pisarz-hook { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.pisarz-hook:hover { background: var(--color-bg-surface-muted); }
.pisarz-hook input[type="radio"] { flex: 0 0 auto; margin-top: 3px; }
.pisarz-hook:has(input:checked), .pisarz-hook--checked { border-color: var(--color-pisarz); background: var(--color-pisarz-subtle); }
.pisarz-hook__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pisarz-hook__wzorzec { font-size: 12px; font-weight: 600; font-style: italic; color: var(--color-pisarz); }
.pisarz-hook__tekst { font-size: var(--font-size-sm); color: var(--color-text-primary); }

.pisarz-warianty { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pisarz-wariant { flex: 1 1 260px; min-width: 220px; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.pisarz-wariant:hover { background: var(--color-bg-surface-muted); }
.pisarz-wariant input[type="radio"] { flex: 0 0 auto; margin-top: 3px; }
.pisarz-wariant:has(input:checked), .pisarz-wariant--checked { border-color: var(--color-pisarz); background: var(--color-pisarz-subtle); }
.pisarz-wariant__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pisarz-wariant__kat { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.pisarz-wariant__tresc { font-size: 13px; color: var(--color-text-secondary); white-space: pre-wrap; line-height: var(--line-height-normal); }

@media (max-width: 640px) {
  .pisarz-warianty { flex-direction: column; }
  .pisarz-wariant { flex-basis: auto; }
}

/* Przycisk generacji (D451: "Zamów propozycje od pisarza (30)"), widoczny
   przy pustym/niepelnym zrodle Pisarz. */
.pisarz-generator { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); background: var(--color-pisarz-subtle); border-radius: var(--radius-lg); }
.pisarz-generator__text strong { color: var(--color-pisarz); }
.pisarz-generator__text p { margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ======================================================================
   Z50: ADMIN MOBILE-FIRST (<=768px). Zakres wylacznie mobile , ZERO reguł
   poza @media (max-width:768px) w tej sekcji, zeby desktop zostal bit
   w bit taki sam (brama D473: zero zmian wizualnych desktopu).
   D957: sekcje 1 (TOPNAV) i 2 (PANEL MOBILE, .mnav-panel/.mnav-tools) tej
   notatki USUNIETE , admin_base.html juz nie renderuje .topnav/.menu/
   .mnav-panel (zastapione sidebarem .side-nav, patrz sekcja "SIDEBAR
   ADMINA" wyzej w pliku , WLASNY hamburger CSS-only .mnav-toggle-input
   + .a-mobile-topbar, ten sam mechanizm checkbox+CSS bez JS). Reszta
   ponizej (wybor klienta/pulpit/split-view/dlugie ciagi/dotyk) NIETKNIETA,
   nie dotyczy nawigacji. */
.split__mobile-back { display: none; }
@media (max-width: 768px) {
  /* ---------- 3. WYBOR KLIENTA (a-topbar): pelna szerokosc ---------- */
  .a-klient-form { flex: 1 1 100%; gap: 8px; }
  .a-klient-select { width: 100%; flex: 1 1 auto; min-height: 40px; }
  .a-bell { width: 40px; height: 40px; flex: 0 0 auto; }

  /* ---------- 4. PULPIT: kafle 1-2 kolumny, wykres przewijalny ---------- */
  /* Nadpisuje ".kafle-zadania-blok .kpi-row.kpi-row" (D513/D517), ktore
     wymuszalo STALE 5 kolumn (gauge + 4 kafle) bez wzgledu na szerokosc
     ekranu (specificznosc wyzsza niz ogolna ".kpi-row" responsywna) ,
     na 390px kolumny 30px szerokosci, tekst nachodzil ("Leady"/"brak
     danych" nieczytelne, zmierzone playwright). Gauge na wlasnym rzedzie
     (pelna szerokosc), 4 kafle 2x2 pod nim. */
  .kafle-zadania-blok .kpi-row.kpi-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .kafle-zadania-blok .kpi-row .gauge-card { grid-column: 1 / -1; }
  .pl-wykres-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pl-wykres-wrap svg { max-width: none; }

  /* ---------- 5. SPLIT VIEW (Wirale Biblioteka / Wiadomosci / Raporty):
     lista <-> szczegol pelnoekranowo, jeden widoczny naraz ---------- */
  .split, .v-flow-layout.split { flex-direction: column; gap: 0; }
  .split__list { flex: 1 1 auto; width: 100%; }
  .split__detail { width: 100%; padding: var(--space-4); }
  .split[data-detail-otwarty="tak"] .split__list,
  .v-flow-layout[data-detail-otwarty="tak"] .split__list { display: none; }
  .split:not([data-detail-otwarty="tak"]) .split__detail,
  .v-flow-layout:not([data-detail-otwarty="tak"]) .split__detail,
  .split:not([data-detail-otwarty="tak"]) .v-flow-main,
  .v-flow-layout:not([data-detail-otwarty="tak"]) .v-flow-main { display: none; }
  .split__mobile-back {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
    padding: 0 var(--space-2); margin-bottom: var(--space-2);
    font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent);
    text-decoration: none;
  }
  .detail-cols { flex-direction: column; }
  .player { width: 100%; max-width: 280px; margin: 0 auto; }

  /* ---------- 5b. DLUGIE NIEROZLAMYWALNE CIAGI (sciezki plikow w komunikatach
     bledow/opisach , np. "/tmp/.../braki_klientow.json" bez spacji) , same
     pchaly document.scrollWidth poza 390px mimo white-space:normal (ten
     lamie WYLACZNIE na spacjach, nie w srodku slowa). Zmierzone playwright
     (Start + Koncepty), zero elementu z overflow wg getBoundingClientRect ,
     to "ink overflow", nie layout overflow. ---------- */
  .a-item-tresc, .v-alert, .a-empty { overflow-wrap: anywhere; word-break: break-word; }
  /* step-pasek (Zrodla > Przebiegi > Biblioteka): inline-flex bez zawijania,
     392px tresci na 390px ekranie (zmierzone) , wlasny poziomy scroll
     zamiast poszerzania calego dokumentu. */
  .step-pasek { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 6. DOTYK: cele akcji/chipow >=40px, hinty klawiszy ukryte -- */
  .hint-bar, .btn kbd, .qa-btn kbd, .v-btn kbd { display: none; }
  .kl-chip, .chip-f, .step-pasek__item, .tools-dropdown__item {
    min-height: 40px; padding-top: 0; padding-bottom: 0;
  }
  .reel-row { min-height: 44px; }
}

/* ---------- P1 (spec_flow_klienta.md): renderowanie strukturalne tresci
   wariantu (HOOK:/TEKST:/CTA:/SLAJD n:/PRODUKCJA:), wspolne dla admin/plan
   (pl-*) i /klient/tresci (v-*) , szablon: templates/_tresc_macros.html. -- */
.tr-struktura { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; }
.tr-linia { display: flex; flex-direction: column; gap: 3px; }
.tr-linia p, .tr-slajd p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.tr-etykieta {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--v-accent);
}
.tr-linia--cta .tr-etykieta { color: var(--v-muted); }
.tr-tekst { display: flex; flex-direction: column; gap: 8px; }
.tr-tekst p { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.tr-slajd {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 10px;
  border-left: 2px solid var(--v-border); background: var(--v-off-bg); border-radius: var(--v-radius-sm);
}
.tr-slajd__nr { font-size: 10.5px; font-weight: 700; color: var(--v-muted); text-transform: uppercase; letter-spacing: .03em; }
.tr-produkcja { margin: 2px 0 0; font-size: 11.5px; color: var(--v-muted); font-style: italic; }
.tr-prewrap { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ---------- P4 (wlasciciel 2026-08-27): edytor wariantow A/B pisarza ,
   przycisk Edytuj + panel inline (Zapisz/Anuluj) przy kazdym hooku/wariancie
   na karcie aktywnej (Kolejka). Wspoldzieli zmienne z .pisarz-hook/.pisarz-wariant
   powyzej. ---------- */
.pisarz-hook-wrap, .pisarz-wariant-wrap { display: flex; flex-direction: column; gap: 4px; }
.pisarz-edytuj-btn {
  align-self: flex-start; margin-left: var(--space-3); font-size: 11.5px; font-weight: 600;
  color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: 2px 4px;
  text-decoration: underline; text-underline-offset: 2px;
}
.pisarz-edytuj-btn:hover { color: var(--color-pisarz); }
.pisarz-edycja-pole {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 0 var(--space-3);
  padding: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
}
.pisarz-edytowane {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--color-pisarz); background: var(--color-pisarz-subtle);
  border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}

/* ======================================================================
   LOGIN (E3/Z350, Aurora) , dwie kolumny na desktopie: lewa to obraz marki
   (gradient Aurora + siatka kropek + jedno zdanie), prawa to formularz.
   Ponizej 900 px lewa kolumna ZNIKA (display:none) , na telefonie zostaje
   sam formularz, zgodnie z decyzja wlasciciela. Zastepuje w calosci karte
   wycentrowana z Z147 (te same nazwy .login-*, nowy uklad).
   Zero surowych kolorow: wylacznie tokeny --au-, --v- i --space- z gory
   tego pliku (⛔ w komentarzu CSS nie wolno pisac gwiazdki przed ukosnikiem,
   bo "gwiazdka ukosnik" zamyka komentarz i zjada nastepne reguly).
   Kontrast: #111 i #6b7280 na bieli oraz biel na najjasniejszym
   koncu gradientu (#db2777) mieszcza sie w AA.
   ---------------------------------------------------------------------- */
.login-body {
  margin: 0; min-height: 100vh;
  background: var(--au-bg-przyciemnione); font-family: var(--au-font);
  color: var(--au-tekst);
}
.login-split {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .login-split { grid-template-columns: 1.05fr 1fr; }
}

/* ----- lewa kolumna: obraz marki ----- */
.login-marka {
  display: none; position: relative; overflow: hidden;
  background: var(--au-gradient); color: #fff;
  padding: var(--space-16) var(--space-12);
  align-items: flex-end;
}
@media (min-width: 900px) { .login-marka { display: flex; } }
/* Siatka kropek , delikatna, czysto dekoracyjna (kontener ma aria-hidden). */
.login-marka-kropki {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 100% at 20% 15%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 20% 15%, #000 25%, transparent 78%);
  pointer-events: none;
}
.login-marka-tresc { position: relative; max-width: 30ch; }
.login-marka-logo {
  display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: var(--space-6);
}
.login-marka-zdanie {
  margin: 0; font-size: 27px; line-height: 1.32; font-weight: 600;
  letter-spacing: -.015em;
}

/* ----- prawa kolumna: formularz ----- */
.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--au-bg);
}
.login-card { width: 100%; max-width: 380px; }
.login-logo {
  display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: var(--space-8);
  background: var(--au-gradient-tekst); -webkit-background-clip: text;
  background-clip: text; color: transparent; width: max-content;
}
/* Na telefonie lewej kolumny nie ma, wiec logo w karcie niesie marke samo. */
.login-title {
  font-size: 27px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 var(--space-2); color: var(--au-tekst);
}
.login-subtitle {
  color: var(--au-tekst-2); font-size: 14px; line-height: 1.55;
  margin: 0 0 var(--space-6);
}
.login-blad {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--space-4);
  padding: 10px 12px; border-radius: var(--au-promien-sm);
  background: var(--au-status-blad-bg); color: var(--au-status-blad-fg);
  font-size: 13.5px; line-height: 1.45;
}
.login-blad svg { flex: 0 0 auto; margin-top: 2px; }
.login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 13px; font-weight: 600; color: var(--au-tekst); }
.login-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  border-radius: var(--au-promien-sm); border: 1px solid var(--au-obramowanie-mocne);
  background: var(--au-bg); font: inherit; font-size: 14.5px; color: var(--au-tekst);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input::placeholder { color: var(--au-tekst-3); }
.login-input:hover { border-color: var(--au-tekst-3); }
.login-input:focus, .login-input:focus-visible {
  outline: none; border-color: var(--au-fiolet);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, .16);
}
.login-submit {
  margin-top: var(--space-2); width: 100%; padding: 12px 20px; border: none;
  border-radius: var(--au-promien-pigulka); background: var(--au-gradient);
  color: #fff; font-weight: 700; font-size: 14.5px; font-family: inherit;
  cursor: pointer; box-shadow: var(--au-glow-btn);
  transition: box-shadow .18s ease, transform .18s ease;
}
.login-submit:hover { box-shadow: var(--au-glow-btn-hover); transform: translateY(-1px); }
.login-submit:active { transform: none; }
.login-submit:focus-visible { outline: 2px solid var(--au-fiolet); outline-offset: 3px; }
.login-forgot { margin: var(--space-4) 0 0; font-size: 13px; text-align: center; }
.login-forgot a { color: var(--au-tekst-2); text-decoration: none; }
.login-forgot a:hover { color: var(--au-indygo); text-decoration: underline; }
.login-forgot a:focus-visible { outline: 2px solid var(--au-fiolet); outline-offset: 2px; border-radius: 4px; }

/* separator "albo" , kreska po obu stronach slowa */
.login-sep {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0; color: var(--au-tekst-2); font-size: 12.5px;
}
.login-sep::before, .login-sep::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--au-obramowanie);
}

/* przycisk Google , biel z obrysem, kolorowe logo G (wytyczne marki Google) */
.login-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; padding: 11px 20px;
  border-radius: var(--au-promien-pigulka); border: 1px solid var(--au-obramowanie-mocne);
  background: var(--au-bg); color: var(--au-tekst);
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-google:hover {
  border-color: var(--au-tekst-3); background: var(--au-bg-przyciemnione);
  box-shadow: var(--au-cien-sm);
}
.login-google:focus-visible { outline: 2px solid var(--au-fiolet); outline-offset: 3px; }
.login-google-g { flex: 0 0 auto; }

@media (max-width: 480px) {
  .login-panel { padding: var(--space-8) var(--space-5); align-items: flex-start; padding-top: var(--space-12); }
  .login-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-input, .login-submit, .login-google { transition: none; }
  .login-submit:hover { transform: none; }
}

/* ======================================================================
   TWOJE TRESCI KLIENTA , .kt-card (Zadanie Z147) , dodaje WYLACZNIE
   padding do bazowej karty v2 (.card, zdefiniowana wyzej: tlo + cien +
   radius-xl, bez paddingu). Uzyte w templates/klient_tresci.html, zeby
   karty mialy ta sama rodzine co .task-card na Start (cien zamiast
   plaskiego obrysu .v-card), bez zmiany struktury sekcji. ---------- */
.kt-card { padding: var(--space-6); }

/* ======================================================================
   AURORA (D957) , siatka bezpieczenstwa prefers-reduced-motion: gasi
   RUCH (polysk przyciskow, wjazd sidebaru mobile, przejscie pigulek)
   dodany tym zadaniem, poza punktowymi @media juz dopisanymi wyzej przy
   kazdym komponencie. Kolor/uklad zostaje , tylko animacja znika. ---- */
@media (prefers-reduced-motion: reduce) {
  .v-btn.primary::after, .a-btn.primary::after,
  .v-pilllink, .a-pilllink,
  .side-nav, .side-nav__zwin svg,
  .mnav-toggle-input::before, .mnav-toggle-input::after {
    transition: none;
  }
}

/* ======================================================================
   E2/Z301 punkt 3: LISTA ZADAN W STYLU "ai task list" (specyfikacje/
   makiety_aurora/aurora.css, wzorzec 1:1 kolorystycznie zmapowany na
   istniejace tokeny --v- i --au- tego arkusza) , uzyta w templates/
   admin_zadania.html dla (a) kolejki runnera (plan_zadania: oczekuje/w_toku,
   bez zmyslonych podetapow gdy dane ich nie niosa) i (b) tabeli zadania
   (todo/in_progress/waiting_owner/done/dropped). Read-only komponent
   wizualny, zero nowej logiki decyzyjnej.
   ====================================================================== */
.task-list { display: flex; flex-direction: column; gap: 2px; }
.task-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 4px; border-bottom: 1px solid var(--v-border);
}
.task-item:last-child { border-bottom: none; }
.task-item__ikona { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.task-item__body { flex: 1 1 auto; min-width: 0; }
.task-item__glowna { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-item__tytul { font-weight: 600; font-size: 13.5px; color: var(--v-text); }
.task-item__meta { font-size: 11.5px; color: var(--v-muted); margin-top: 2px; }

/* stany: oczekuje (okrag pusty), w-toku (kropka gradientowa animowana),
   gotowe (haczyk zielony), blad (X czerwony), czeka-decyzje (pelny okrag
   ostrzegawczy, bez animacji , odrozniony od w-toku), porzucone (myslnik
   przygaszony). */
.task-stan-oczekuje { color: var(--v-muted); }
.task-stan-oczekuje svg circle { fill: none; stroke: var(--v-border); stroke-width: 1.6; }
.task-stan-gotowe { color: var(--v-ok-fg); }
.task-stan-blad { color: var(--v-err-fg); }
.task-stan-porzucone { color: var(--v-muted); opacity: .7; }
.task-stan-czeka-decyzje { color: var(--v-warn-fg); }
.task-stan-czeka-decyzje svg circle { fill: var(--v-warn-bg); stroke: var(--v-warn-fg); stroke-width: 1.6; }
.task-stan-w-toku { position: relative; color: var(--au-fiolet, var(--v-accent)); }
.task-item__kropka {
  width: 9px; height: 9px; border-radius: 50%; display: block; margin: 4px;
  background: var(--au-gradient, var(--v-accent));
  animation: task-puls 1.3s ease-in-out infinite;
}
@keyframes task-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(147, 51, 234, .45); }
  50% { box-shadow: 0 0 0 6px rgba(147, 51, 234, 0); }
}
@media (prefers-reduced-motion: reduce) { .task-item__kropka { animation: none; } }

.task-sekcja-tytul { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.task-sekcja-hint { font-size: 12px; color: var(--v-muted); font-weight: 500; }

/* Z708 (wlasciciel 2026-09-25): plakietka "kto nagrywa" przy wpisach wideo w
   widoku klientki (macro plakietka_nagrania w templates/_tresc_macros.html).
   Dluzszy tekst ("Nie nagrywasz: montujemy z gotowych materiałów") zawija sie
   zamiast rozpychac waska kolumne listy. */
.v-pill-nagranie { white-space: normal; line-height: 1.35; text-align: left; }
/* Neutralne etykiety: ciemniejszy szary niz .v-pill.off (#4b5563 na #f3f4f6
   = 6,9:1, WCAG AA); czerwona "Do nagrania" to .v-pill.err (#991b1b na
   #fee2e2 = 6,8:1). */
.v-pill.off.v-pill-nagranie { color: #4b5563; }
/* Czerwony akcent kafelka/wiersza wpisu "Do nagrania" (lista Nadchodzace,
   boks Do akceptacji, karta tresci). */
.v-do-nagrania-akcent { border-color: var(--v-err-fg) !important; box-shadow: inset 4px 0 0 var(--v-err-fg); }
.v-upcoming-nagranie { margin-top: 4px; }

/* Z1079 (D2117): Decyzje dla Ciebie, /admin/decyzje-wlasciciela */
.dw-grupa { margin-top: 8px; }
.dw-grupa__tytul { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
.dw-karta { display: flex; flex-direction: column; gap: 8px; }
.dw-karta--czeka { border-left: 3px solid var(--v-warn-fg); }
.dw-karta__naglowek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-karta__tytul { font-size: 14.5px; margin: 0; flex: 1 1 240px; min-width: 0; }
.dw-karta__krok { font-size: 13px; margin: 0; }
.dw-akcje { max-width: 520px; }
.dw-form { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.dw-form[hidden] { display: none; }
.dw-stan:empty { display: none; }

/* Z1190: /admin/dzialy , tabela szczupla (5 kolumn + szczegoly), miesci
   sie na 1280px bez przewijania w bok; drugorzedne liczby (odrzucone,
   eskalacje, wiek czeka, poprawki po kontroli, czas realizacji) i lista
   najstarszych todo w rozwijanym wierszu pod glownym, zero utraty danych. */
.za-dzialy-table th, .za-dzialy-table td { white-space: normal; }
.za-dzialy-szczegoly[hidden] { display: none; }
.za-dzialy-szczegoly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.za-dzialy-najstarsze { margin-top: 4px; }
.za-najstarsze-todo { margin: 6px 0 0; padding-left: 18px; }
.za-najstarsze-todo li { font-size: 12.5px; }