/* Panele CompanyNow · arkusz stylów aplikacji (blok A)
   Źródło: makieta v1 (docs/spec/zalaczniki/makieta_v1/src/style.css), przeniesiona prawie wprost (04 §1):
   bez paska i spisu makiety; zmienne :root takie same jak w makiecie (test to sprawdza).
   Na końcu: kroje z własnego serwera i klasy zastępujące style inline makiety (CSP bez 'unsafe-inline'). */

/* ── kroje pism (woff2, OFL; pliki licencji w /static/fonts) ── */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/fonts/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/fonts/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/fonts/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Rama paneli CompanyNow v1 · na wzór panelu operatora 12B (B-139, B-145, B-146, B-153) po rundzie 5 (B-279)
   Układ: ciemny pasek boczny (232 px; < 1280 px ikony 64 px; < 760 px pasek u góry), górny pasek, treść w kartach.
   Barwy PP-42, PP-50: wszystkie widoki w granacie; konsola zespołu bez innej palety, wyróżniona stałym paskiem
   „Konsola zespołu” u góry, znakiem „Zespół CN” w pasku bocznym i przedrostkiem tytułu karty. Fiolet zostaje
   w panelu operatora SYS, żeby te dwa narzędzia się nie myliły. Jeden wygląd (jasny), bez trybu ciemnego, jak 12B. */
:root {
  --ink: #241a47;          /* granat z raportów: baza panelu klienta i partnera */
  /* fiolet panelu operatora SYS celowo nieużywany (PP-50) */
  --base: var(--ink);
  --base-tint: #efedf6;
  --base-tint2: #e4e0f0;
  --koral: #ff6b4a;        /* akcent: kropki, paski, liczniki */
  --koral-ciemny: #c2401f; /* koral na tekst i liczniki (kontrast 4,5:1) */
  --koral-tint: #fff0ec;
  --bursztyn: #8a5300;
  --bursztyn-tint: #fff4e0;
  --blad: #b42318;
  --blad-tint: #fdecea;
  --ok: #1f4d2a;
  --ok-tint: #eef6ef;
  --tekst: #1d1b2c;
  --tekst2: #4a4760;
  --szary: #6b6880;
  --linia: #e6e4ee;
  --linia2: #edebf4;
  --tlo: #f5f4f8;
  --karta: #ffffff;
  --na-ciemnym: #f3f1f9;
  --na-ciemnym2: #c9c3dd;
  --f-tytul: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-tekst: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}
/* konsola zespołu: ta sama paleta, wyróżnik zamiast koloru (PP-50) */
.pasek-zespolu { display: flex; align-items: center; gap: 8px; background: var(--base-tint); color: var(--ink); border-bottom: 1px solid var(--base-tint2); padding: 7px 28px; font-size: 13px; font-weight: 600; }
.pasek-zespolu span { font-weight: 400; color: var(--tekst2); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--tlo); color: var(--tekst); font: 14px/1.45 var(--f-tekst); font-variant-numeric: tabular-nums; }
a { color: var(--base); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--base); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-tytul); color: var(--tekst); margin: 0; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.mut { color: var(--szary); }
.small { font-size: 12.5px; }
[hidden] { display: none !important; }

/* ── rama ── */
.app { display: flex; min-height: 100vh; }
.sb { flex: 0 0 232px; background: var(--base); color: var(--na-ciemnym); display: flex; flex-direction: column; gap: 2px; padding: 22px 14px; }
.sb .logo { width: 170px; height: auto; margin: 0 8px 6px; display: block; }
.sb .sym { display: none; width: 30px; height: auto; margin: 0 auto 6px; }
.sb .znak { align-self: flex-start; margin: 2px 8px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 6px; padding: 2px 8px; }
.sb .sek { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--na-ciemnym2); opacity: .8; padding: 14px 10px 4px; }
.sb a.n { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--na-ciemnym2); font-weight: 500; text-decoration: none; }
.sb a.n:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb a.n.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.sb a.n svg { flex: 0 0 18px; }
.sb .lic { margin-left: auto; background: var(--koral-ciemny); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.sb .dol { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.sb .konto { display: flex; align-items: center; gap: 10px; padding: 12px 10px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.14); color: var(--na-ciemnym); }
.sb .konto .av { flex: 0 0 32px; height: 32px; border-radius: 16px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; }
.sb .konto .kt { min-width: 0; line-height: 1.25; }
.sb .konto .kt span { display: block; font-size: 12px; color: var(--na-ciemnym2); overflow-wrap: anywhere; }
.sb .konto a { color: var(--na-ciemnym2); font-size: 12px; font-weight: 500; }

.gl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; background: var(--karta); border-bottom: 1px solid var(--linia); padding: 14px 28px; }
.szukaj { flex: 0 1 520px; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--linia); background: var(--tlo); border-radius: 8px; padding: 8px 12px; color: var(--szary); }
.szukaj span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .akcje { margin-left: auto; display: flex; gap: 8px; }
.tresc { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 20px; min-width: 0; width: 100%; max-width: 1680px; }
.glowa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.glowa .ok { font-size: 12.5px; color: var(--szary); width: 100%; }
.glowa .ok a { font-weight: 500; }
.glowa .opis { color: var(--szary); width: 100%; }
.glowa .akcje { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── elementy ── */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 12px; min-width: 0; container-type: inline-size; }
/* wąska karta: znikają kolumny dodatkowe (.dod), żeby tabela się mieściła bez przewijania (B-279) */
@container (max-width: 730px) { table.t .dod { display: none; } }
.karta > .kg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px 12px; }
.karta > .kg .mut { font-size: 13px; }
.karta > .kg .akcje { margin-left: auto; display: flex; gap: 8px; }
.karta > .kc { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.karta > .stopka { padding: 12px 20px; border-top: 1px solid var(--linia); color: var(--szary); font-size: 13px; }
.rzad { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.rzad.pol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--f-tekst); padding: 10px 16px; border-radius: 8px;
  border: 1px solid var(--base); background: var(--base); color: #fff; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn.obr { background: var(--karta); color: var(--base); border-color: var(--linia); }
.btn.obr:hover { border-color: var(--base); }
.btn.mal { padding: 7px 11px; font-size: 13px; }
.btn.zly { background: var(--karta); color: var(--blad); border-color: #f3c2bc; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.pelna { width: 100%; }
.btn.ik { padding: 7px 8px; }

table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--szary); padding: 10px 12px; border-bottom: 1px solid var(--linia); white-space: nowrap; }
/* poprawki po S: nazwy (firma, organizacja, osoba) łamią się tylko między wyrazami; długie kody i adresy mają .zawijaj */
table.t td { padding: 12px 12px; border-bottom: 1px solid var(--linia); vertical-align: middle; overflow-wrap: break-word; }
/* domena w tabeli: najwyżej 26 znaków, dalej wielokropek, pełna wartość w title; w kartach danych łamie się na kropkach (<wbr>) */
.mono.dom { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.mono.lam { white-space: normal; }
/* adres e-mail pod nazwą osoby to nie nazwa: może się łamać w dowolnym miejscu */
table.t td .adres { overflow-wrap: anywhere; }
/* 760–1023 px: tabela szersza niż karta przewija się we własnej karcie, strona nigdy (04 §3) */
@media (min-width: 760px) and (max-width: 1023px) { .tw { overflow-x: auto; } }
table.t th a.sort { color: inherit; text-decoration: none; }
table.t th a.sort:hover { text-decoration: underline; }
table.t th .strz { margin-left: 4px; }
table.t th:first-child, table.t td:first-child { padding-left: 20px; }
table.t th:last-child, table.t td:last-child { padding-right: 20px; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.grupa td { background: var(--tlo); color: var(--tekst2); font-size: 12.5px; font-weight: 600; padding-block: 8px; }
table.t td.pr, table.t th.pr { text-align: right; }
table.t td .pod { display: block; font-size: 12.5px; color: var(--szary); }
table.t td b { font-weight: 600; }
table.t tr.wyr td { background: var(--base-tint); }
.tw { min-width: 0; }

.zn { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.zn.full { background: var(--base); color: #fff; }
.zn.basic { border: 1px solid var(--base-tint2); color: var(--base); background: var(--karta); }
.zn.st-w_toku { background: var(--linia2); color: var(--tekst2); }
.zn.st-wydany { background: var(--base-tint); color: var(--base); }
.zn.st-anulowane { background: var(--tlo); color: var(--szary); text-decoration: line-through; }
/* poprawki po Z (p. 7): neutralny szary znacznik bez przekreślenia (przekreślenie tylko dla anulowanych) */
.zn.st-neutralny { background: var(--tlo); color: var(--szary); }
.zn.st-czeka, .zn.st-wniosek_czeka { background: var(--koral-tint); color: var(--koral-ciemny); }
.zn.st-wniosek_przyjety { background: var(--base-tint); color: var(--base); }
.zn.st-wniosek_odrzucony { background: var(--tlo); color: var(--szary); }
.zn.st-wniosek_saldo { background: var(--bursztyn-tint); color: var(--bursztyn); }
.zn.st-konto_aktywne, .zn.st-org_aktywna { background: var(--ok-tint); color: var(--ok); }
.zn.st-konto_nowe { background: var(--linia2); color: var(--tekst2); }
.zn.st-konto_wylaczone, .zn.st-org_zawieszona { background: var(--blad-tint); color: var(--blad); }
.zn.rola { background: var(--tlo); color: var(--tekst2); font-weight: 500; }
.zn.rev { background: var(--linia2); color: var(--tekst2); font-family: var(--f-mono); font-size: 12px; }
.zn.gosc { background: var(--koral-tint); color: var(--koral-ciemny); }
.kropka { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--koral); }
.wiek { font-weight: 600; }
.wiek.s3 { color: var(--bursztyn); }
.wiek.s7 { color: var(--koral-ciemny); font-weight: 700; }

.kom { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.kom svg { flex: 0 0 18px; margin-top: 1px; }
.kom.blad { background: var(--blad-tint); color: var(--blad); }
.kom.ostrz { background: var(--bursztyn-tint); color: var(--bursztyn); }
.kom.info { background: var(--base-tint); color: var(--base); }
.kom.ok { background: var(--ok-tint); color: var(--ok); }
.kom .ak { margin-left: auto; }
/* poprawki po Z (p. 9): C4 „Dodaj osobę” z istniejącym e-mailem — dwa działania pod komunikatem, długi przycisk łamie się */
#c4-istniejaca { flex-wrap: wrap; }
#c4-istniejaca > div:not(.ak) { flex: 1 1 0; min-width: 0; }
#c4-istniejaca .ak { flex: 1 1 100%; margin-left: 28px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
#c4-istniejaca .ak form { display: contents; }
#c4-istniejaca .btn { white-space: normal; line-height: 1.3; text-align: left; max-width: 100%; }

.pusto { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pusto .ik { width: 44px; height: 44px; border-radius: 22px; background: var(--base-tint); color: var(--base); display: grid; place-items: center; }
.pusto p { max-width: 52ch; color: var(--szary); }

.pola { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pola .cale { grid-column: 1 / -1; }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole label { font-size: 13px; font-weight: 600; color: var(--tekst2); }
.pole label .mut { font-weight: 400; }
.pole input, .pole select, .pole textarea { font: 14px var(--f-tekst); color: var(--tekst); background: var(--karta); border: 1px solid #dcd8e8; border-radius: 8px; padding: 9px 11px; width: 100%; }
.pole textarea { min-height: 72px; resize: vertical; }
.pole input[readonly] { background: var(--tlo); color: var(--tekst2); }
.pole.zle input, .pole.zle select { border-color: var(--blad); background: #fffafa; }
.pole .bl { color: var(--blad); font-size: 12.5px; }
.pole .pom { color: var(--szary); font-size: 12.5px; }
.haslo { position: relative; }
.haslo input { padding-right: 42px; }
.haslo button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--szary); padding: 6px; cursor: pointer; border-radius: 6px; }
.wybor { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linia); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.wybor.on { border-color: var(--base); background: var(--base-tint); }
.wybor input { margin-top: 3px; accent-color: var(--base); }
.wybor .w { flex: 1; min-width: 0; }
.wybor .cena { text-align: right; white-space: nowrap; }
.wybor .cena s { color: var(--szary); font-size: 12.5px; display: block; }
.pfx { display: flex; gap: 8px; flex-wrap: wrap; }

.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.dl dt { color: var(--szary); }
.dl dd { margin: 0; overflow-wrap: anywhere; }

/* oś stanu badania */
.os { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.os div { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--szary); }
.os div::before { content: ""; height: 6px; border-radius: 3px; background: var(--linia2); }
.os div.zr::before { background: var(--base); }
.os div.ter { color: var(--tekst); font-weight: 600; }
.os div.ter::before { background: var(--koral); }

/* pliki */
.pliki { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
/* C8: wiersz miniatur pod rewizją (poprawki po S) */
table.t tr.z-plikami td { border-bottom: 0; padding-bottom: 4px; }
table.t tr.pliki-rew td { padding-top: 4px; }
table.t tr.pliki-rew .pliki { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.plik { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plik .mini { position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 170px; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.plik .mini i { display: block; height: 5px; border-radius: 2px; background: var(--linia2); }
.plik .mini i.a { background: var(--base); width: 45%; }
.plik .mini i.k { background: var(--koral); width: 30%; }
.plik .mini i.b { background: var(--koral-tint); height: 22px; }
.plik .mini.obraz { padding: 0; overflow: hidden; background: #fff; }
.plik .mini.obraz img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.plik .mini .lst { position: absolute; right: 8px; bottom: 8px; background: var(--base); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; }
.plik .nz { font-weight: 600; }
.plik .rz { font-size: 12.5px; color: var(--szary); }
.plik.brak .mini { border-style: dashed; background: var(--tlo); }

/* pula */
.bar { height: 8px; border-radius: 4px; background: var(--linia2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--base); }
.bar.ostrz > span { background: var(--koral); }
.kwota { font-family: var(--f-tytul); font-weight: 700; font-size: 28px; color: var(--tekst); line-height: 1.1; }
.kwota small { font-family: var(--f-tekst); font-size: 14px; color: var(--szary); font-weight: 500; }
.plus { color: var(--ok); }

.zak { display: flex; gap: 4px; border-bottom: 1px solid var(--linia); padding: 0 20px; flex-wrap: wrap; }
.zak a { padding: 10px 12px; color: var(--szary); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.zak a.on { color: var(--base); border-bottom-color: var(--base); font-weight: 600; }
.zak a .lic { margin-left: 6px; background: var(--koral-ciemny); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11.5px; font-weight: 700; }
.zak a.wyl { pointer-events: none; color: #a9a5ba; }
.filtry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 20px 12px; }
.chip { border: 1px solid var(--linia); border-radius: 18px; padding: 5px 12px; font-size: 13px; color: var(--tekst2); background: var(--karta); font-weight: 500; text-decoration: none !important; }
.chip.on { background: var(--base); border-color: var(--base); color: #fff; }

.upusc { border: 2px dashed #cfcadd; border-radius: 12px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--tekst2); background: var(--tlo); }
.postep { display: flex; flex-direction: column; gap: 6px; }

/* logowanie */
.wej { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wej .lewa { background: var(--ink); color: var(--na-ciemnym); padding: 48px; display: flex; flex-direction: column; gap: 22px; }
.wej .lewa img { width: 190px; height: auto; }
.wej .lewa h2 { color: #fff; font-size: 26px; line-height: 1.25; max-width: 18ch; margin-top: auto; }
.wej .lewa p { color: var(--na-ciemnym2); max-width: 42ch; }
.wej .lewa .kic { font-family: var(--f-tytul); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--koral); }
.wej .prawa { display: grid; place-items: center; padding: 40px 24px; }
.wej .form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.wej .form .pd { color: var(--szary); }
.qr { width: 156px; height: 156px; border: 1px solid var(--linia); border-radius: 8px; padding: 8px; background: #fff; }
.kody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; background: var(--tlo); border-radius: 10px; padding: 14px 18px; font-family: var(--f-mono); font-size: 14px; }
.jednoraz { font-family: var(--f-mono); font-size: 22px; font-weight: 500; letter-spacing: .06em; background: var(--tlo); border: 1px solid var(--linia); border-radius: 10px; padding: 14px 18px; text-align: center; overflow-wrap: anywhere; }
.rozdz { border: 0; border-top: 1px solid var(--linia); margin: 0; }

/* menu konta (W6) */
.menu { position: absolute; left: 14px; bottom: 72px; width: 260px; z-index: 30; background: var(--karta); color: var(--tekst); border: 1px solid var(--linia); border-radius: 10px; box-shadow: 0 12px 32px rgba(29,27,44,.18); padding: 6px; display: flex; flex-direction: column; }
.menu .mh { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--szary); padding: 8px 10px 4px; }
.menu a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--tekst); font-weight: 500; text-decoration: none; }
.menu a:hover { background: var(--tlo); }
.menu a .mut { font-weight: 400; font-size: 12.5px; }
.sb { position: relative; }

/* ── szerokości (B-145) ── */
@media (max-width: 1279px) {
  .sb { flex: 0 0 64px; padding: 18px 8px; align-items: center; }
  .sb .logo, .sb .sek, .sb .znak, .sb .lic, .sb .konto .kt { display: none; }
  .sb .sym { display: block; }
  .sb a.n { justify-content: center; padding: 9px; }
  .sb a.n .tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sb .konto { justify-content: center; padding-inline: 0; }
  .pasek-zespolu { padding-inline: 24px; }
  .menu { left: 72px; bottom: 16px; }
  .top, .tresc { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1099px) {
  .rzad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .app { flex-direction: column; }
  .sb { flex: 0 0 auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px max(16px, env(safe-area-inset-left, 0px)); gap: 4px; }
  .sb .sym { margin: 0 8px 0 0; }
  .sb .dol { margin: 0; padding: 0; flex-direction: row; }
  .sb .konto { border: 0; margin: 0; padding: 0 0 0 6px; }
  .top { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); flex-wrap: wrap; }
  .tresc, .pasek-zespolu { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .tw { overflow-x: auto; }
  .tw table.t { width: max-content; min-width: 100%; }
  .tw table.t td { overflow-wrap: normal; }
  .tw table.t td .pod { white-space: nowrap; }
  .rzad.pol, .pola { grid-template-columns: minmax(0, 1fr); }
  .wej { grid-template-columns: minmax(0, 1fr); }
  .wej .lewa { padding: 28px max(16px, env(safe-area-inset-left, 0px)); }
  .wej .lewa h2 { margin-top: 8px; }
  .pliki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.t tr.pliki-rew .pliki { grid-template-columns: repeat(2, minmax(0, 140px)); }
  .menu { left: 16px; top: 56px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── dodatki aplikacji (zamiast stylów inline makiety; elementy bez JS) ── */
.odstep-12 { height: 12px; }
.filtry.gora { padding-top: 14px; }
.zak.gora { padding-top: 6px; }
.qr-rzad { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.qr-rzad svg.qr { width: 156px; height: 156px; }
.mono.zawijaj { white-space: normal; overflow-wrap: anywhere; }
.pole.waskie { max-width: 200px; }
.pfx.prawo { justify-content: flex-end; }
.sb .konto a.av { text-decoration: none; }
button.btn { font: 600 14px/1 var(--f-tekst); }
button.btn.mal { font-size: 13px; }
form.wiersz { display: contents; }
form.wiersz-inline { display: inline; margin: 0; }
.przycisk-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--base); font-weight: 500; cursor: pointer; text-align: left; }
.przycisk-link:hover { text-decoration: underline; }
.sb .konto .przycisk-link { color: var(--na-ciemnym2); font-size: 12px; font-weight: 500; }
.menu { display: none; }
.menu:target { display: flex; }
.menu form { margin: 0; }
.menu button { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--tekst); font: 500 14px/1.45 var(--f-tekst); text-align: left; background: none; border: 0; cursor: pointer; }
.menu button:hover { background: var(--tlo); }
.menu button .mut { font-weight: 400; font-size: 12.5px; }
.wej .form .pd a { font-weight: 500; }
.filtry .szuk { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; min-width: 0; max-width: 420px; }
.filtry .szuk input, .filtry select, .filtry input[type=date] { font: 13px var(--f-tekst); color: var(--tekst); background: var(--karta); border: 1px solid #dcd8e8; border-radius: 8px; padding: 6px 10px; min-width: 0; }
.filtry .szuk input { flex: 1 1 auto; }
.filtry label.ukryta, .ukryta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.strony { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--linia); color: var(--szary); font-size: 13px; }
details.zmiany summary { cursor: pointer; color: var(--base); font-weight: 500; }
details.zmiany dl { margin: 6px 0 0; }
.kody.jednorazowe span { white-space: nowrap; }
.szukaj input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--tekst); padding: 0; }
.szukaj input::placeholder { color: var(--szary); opacity: 1; }
.szukaj input:focus { outline: none; }
.szukaj:focus-within { outline: 2px solid var(--base); outline-offset: 2px; }
.tw { position: relative; } /* ukryte etykiety w tabelach nie wychodzą poza przewijaną kartę */
.top { min-height: 67px; } /* wysokość jak w makiecie także bez pola wyszukiwania */

/* ── blok B: elementy spoza makiety i zamiast stylów inline makiety ── */
/* tabela z wieloma kolumnami (K3): kolumna .dod2 znika już przy karcie węższej niż 880 px */
@container (max-width: 880px) { table.t .dod2 { display: none; } }
.zn.jez { background: var(--linia2); color: var(--tekst2); font-family: var(--f-mono); font-size: 11.5px; padding: 1px 6px; margin-left: 4px; }
.zn.zastapiona { text-decoration: none; }
.karta.bez-ramki { border: 0; background: none; }
.plik:hover .nz { text-decoration: underline; }
a.plik { text-decoration: none; color: inherit; }
.upusc input[type=file] { max-width: 100%; font: 13px var(--f-tekst); }
.postep[hidden] { display: none; }
.wiersz-zgody { display: flex; flex-direction: column; gap: 4px; }
.gosc-wiersz { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gosc-wiersz > div { flex: 1; min-width: 0; }
.gosc-wiersz .mut { overflow-wrap: anywhere; }
fieldset.gosc { border: 1px solid var(--linia); border-radius: 10px; padding: 12px 14px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
fieldset.gosc legend { font-size: 13px; font-weight: 600; color: var(--tekst2); padding: 0 4px; }
fieldset.gosc .cale { grid-column: 1 / -1; }
@media (max-width: 759px) { fieldset.gosc { grid-template-columns: minmax(0, 1fr); } }
.wybor input[type=checkbox] { margin-top: 3px; accent-color: var(--base); }
.c9-tabela td.mono { white-space: normal; overflow-wrap: anywhere; }
button.btn[disabled] { opacity: .5; cursor: not-allowed; }
.odstep-gora { margin-top: 6px; }
.wybor.zle { border-color: var(--blad); }
.zn.zawijaj { white-space: normal; }
/* blok D: pasek pięciu kroków API (K4, G1), stan powiązania (C6), połączenie z systemem (C13) */
.os.os5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 559px) { .os.os5 { grid-template-columns: minmax(0, 1fr); gap: 8px; } .os.os5 div { flex-direction: row; align-items: center; } .os.os5 div::before { width: 28px; flex: none; } }
.os div .kiedy { font-size: 12px; font-weight: 400; color: var(--szary); }
.dl dd .pod, .kroki-sys .pod { display: block; font-size: 12.5px; color: var(--szary); }
.dl dd .pod.blad-tekst, .blad-tekst { color: var(--blad); }
.kroki-sys { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kroki-sys li { overflow-wrap: anywhere; }
.dl dd { overflow-wrap: anywhere; }
.btn.zawijaj { white-space: normal; text-align: left; }

/* blok E1: podgląd e-maila w C14 jako tekst źródłowy (bez renderowania HTML wiadomości w konsoli) */
pre.zrodlo { margin: 0; padding: 12px 14px; max-height: 480px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.55; background: var(--tlo); border: 1px solid var(--linia); border-radius: 10px; }
.powiad-lista { list-style: none; margin: 0; padding: 0; }
.powiad-lista li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linia); }
.powiad-lista li:last-child { border-bottom: 0; }
.powiad-lista .mut { font-size: 12.5px; }