/* =====================================================================
   BiLLU Kontrahent — wspólna baza wyglądu modułu (ładowana przez templates/kontrahent/layout.php
   po style.css portalu; działa w klasie `.kon-app` na <body>).

   Komponenty skopiowane ze wzorców Umów (`um-*` → `kon-*`), bez importu — moduły zmieniają się niezależnie.

   ZASADY: wszystko z przedrostkiem `kon-`; kolory tylko przez tokeny niżej; bez gradientów,
   bez kart z lewym kolorowym paskiem, bez emoji; ikony z App\Kontrahent\Widok\Ui::ikona();
   cel dotyku ≥ 44 px; na 390 px nic nie wychodzi poza ekran (tabele: `.kon-tabela-pudlo`
   albo `.kon-tabela--karty`). Teksty wyłącznie ze słownika (`lang/kontrahent/*.php`).
   Stan ryzyka nigdy samym kolorem: znacznik niesie tekst i ikonę (Ui::znacznikRyzyka()).
   Barwy billu.pl: granat #0B2430, przyciski/linki #007A7A (hover #005E5E), #3CC6C6 tylko na ciemnym,
   bordo #882D61 drugi akcent, tło #F4F7F8, linie #E3E9EC, Montserrat.

   KOMPONENTY (jak w Umowach): .kon-ekran .kon-naglowek .kon-karta .kon-kafelki/.kon-kafelek
   .kon-tabela(-pudlo/--karty) .kon-status--<ton> .kon-przycisk(--glowny/--drugi/--niebezpieczny/--link/--maly)
   .kon-pole .kon-wejscie .kon-pusty .kon-baner(--info/--ostrzezenie/--blad/--sukces) .kon-zakladki
   .kon-siatka-2 .kon-dane .kon-wiersze; pomocnicze .kon-ciche .kon-mono .kon-sr .kon-stos
   ===================================================================== */

:root {
    --kon-granat: #0B2430;          /* granat billu.pl: nagłówki, ciemne tła */
    --kon-morski: #007A7A;          /* przyciski i linki (hover --kon-morski-hover) */
    --kon-morski-hover: #005E5E;
    --kon-morski-jasny: #3CC6C6;    /* wyłącznie na ciemnym tle */
    --kon-morski-tlo: #E6F4F4;
    --kon-bordo: #882D61;           /* drugi akcent: tagi sekcji, wyróżnienia, decyzje */
    --kon-bordo-tlo: #F6E7EF;
    --kon-bordo-ciemne: #6E2350;
    --kon-tlo: #F4F7F8;
    --kon-powierzchnia: #FFFFFF;
    --kon-linia: #E3E9EC;
    --kon-linia-mocna: #CBD5DA;
    --kon-tekst: #33414A;
    --kon-tekst-2: #4B5A63;
    --kon-tekst-3: #5B6B74;
    --kon-naglowki: #0B2430;
    --kon-ok: #146C3A;       --kon-ok-tlo: #DFF3E7;
    --kon-czeka: #8A4B08;    --kon-czeka-tlo: #FDF1D6;
    --kon-blad: #A21C1C;     --kon-blad-tlo: #FCE8E8;
    --kon-neutral: #3B4A53;  --kon-neutral-tlo: #EAEFF1;
    --kon-r: 12px;
    --kon-r-duzy: 16px;
    --kon-r-maly: 10px;
    --kon-cien: 0 1px 2px rgba(11, 36, 48, 0.05), 0 1px 3px rgba(11, 36, 48, 0.04);
    --kon-cien-wyzej: 0 6px 18px -6px rgba(11, 36, 48, 0.14);
    --kon-fokus: 0 0 0 3px rgba(0, 122, 122, 0.28);
    --kon-czcionka: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kon-mono: 'Roboto Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
    --kon-morski: #2FB3B3; --kon-morski-hover: #3CC6C6; --kon-morski-tlo: #123A40;
    --kon-bordo: #D58AB2; --kon-bordo-tlo: #3A1F30; --kon-bordo-ciemne: #E7AFCB;
    --kon-tlo: #0E1D25; --kon-powierzchnia: #13262F; --kon-linia: #284049; --kon-linia-mocna: #36525D;
    --kon-tekst: #D7E1E5; --kon-tekst-2: #B3C2C8; --kon-tekst-3: #9DB0B7; --kon-naglowki: #F1F5F7;
    --kon-ok: #7EDBA3; --kon-ok-tlo: #133526; --kon-czeka: #F3C676; --kon-czeka-tlo: #3A2C10;
    --kon-blad: #F49A9A; --kon-blad-tlo: #3E1A1A; --kon-neutral: #C9D4D9; --kon-neutral-tlo: #22363F;
    --kon-fokus: 0 0 0 3px rgba(60, 198, 198, 0.4);
}

/* ── Szkielet ─────────────────────────────────────────── */
.kon-app { background: var(--kon-tlo); color: var(--kon-tekst); font-family: var(--kon-czcionka); }
.kon-app .app-main.main-content { padding: 24px 32px 40px; }
.kon-app a { color: var(--kon-morski); }
.kon-app a:hover { color: var(--kon-morski-hover); }
.kon-app :focus-visible { outline: 2px solid var(--kon-morski); outline-offset: 2px; }
.kon-app h1, .kon-app h2, .kon-app h3 { color: var(--kon-naglowki); }
.kon-ekran { max-width: 1240px; }
.kon-stos > * + * { margin-top: 20px; }

/* Pasek górny i menu boczne modułu */
.kon-app .navbar { box-shadow: 0 1px 2px rgba(11, 36, 48, 0.06); border-bottom-color: var(--kon-linia); }
.kon-app .nav-container { gap: 12px; min-width: 0; }
.kon-app .nav-topbar-left, .kon-app .nav-topbar-right { min-width: 0; }
.kon-znak { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--kon-bordo-tlo);
    color: var(--kon-bordo-ciemne); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.kon-app .sidebar-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.kon-app .sidebar-toggle .kon-ikona { width: 22px; height: 22px; }
.kon-app .sidebar-link, .kon-app a.sidebar-link { min-height: 44px; color: var(--kon-naglowki); }
.kon-app a.sidebar-link:hover { color: var(--kon-naglowki); }
@media (min-width: 1024px) { .kon-app .sidebar-toggle { display: none; } }
.kon-app a.sidebar-link.active, .kon-app .sidebar-link.active { background: var(--kon-morski-tlo); color: var(--kon-morski-hover); box-shadow: inset 0 0 0 1px rgba(0, 122, 122, 0.18); }
.kon-app .sidebar-link.active svg { color: var(--kon-morski); }
.kon-menu-grupa { color: var(--kon-bordo); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 12px 6px; }
.kon-przestrzen { padding: 14px 16px; font-size: 12px; color: var(--kon-tekst-3); border-bottom: 1px solid var(--kon-linia); }
.kon-przestrzen strong { display: block; color: var(--kon-naglowki); font-size: 13px; margin-top: 2px; }
.kon-licencja-wprost { display: block; margin-top: 4px; font-size: 11px; }
.kon-podmenu { padding-left: 30px; }
.kon-podmenu .sidebar-link { font-size: 13px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.kon-boczny-portal { margin: 16px 12px; padding: 14px 16px; border-radius: var(--kon-r); background: var(--kon-morski-tlo); font-size: 13px; }
.kon-boczny-portal strong { display: block; color: var(--kon-naglowki); margin-bottom: 4px; font-weight: 600; }
.kon-boczny-portal a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 32px; }
.kon-boczny-portal .kon-ikona { width: 16px; height: 16px; }
@media (max-width: 1023px) {
    .kon-app .app-main.main-content { padding: 16px 16px 32px; }
}
@media (max-width: 720px) {
    .kon-app .nav-container { padding: 0 8px 0 4px; }
    .kon-app .nav-user, .kon-app .kon-nav-portal, .kon-app .kon-modul-etykieta { display: none; }
    .kon-app .topbar-logo img { height: 28px; max-width: 96px; }
    .kon-app .nav-logout { margin-left: 0; border-left: none; }
}

/* ── Ikony, pomocnicze ────────────────────────────────── */
.kon-ikona { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.kon-ciche { color: var(--kon-tekst-3); font-size: 13px; }
.kon-mono { font-family: var(--kon-mono); font-size: 12px; }
.kon-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Nagłówek ekranu ──────────────────────────────────── */
.kon-naglowek { margin: 0 0 24px; }
.kon-okruszki ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; padding: 0; font-size: 13px; }
.kon-okruszki li { display: inline-flex; align-items: center; gap: 4px; color: var(--kon-tekst-3); min-width: 0; }
.kon-okruszki li + li::before { content: '/'; color: var(--kon-linia-mocna); margin-right: 2px; }
.kon-okruszki a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.kon-okruszki a:hover { text-decoration: underline; }
.kon-okruszki [aria-current] { color: var(--kon-tekst-2); overflow-wrap: anywhere; }
.kon-naglowek-wiersz { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kon-naglowek-tytul { min-width: 0; flex: 1 1 420px; }
.kon-naglowek-tytul h1 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.kon-naglowek-tytul-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kon-naglowek-tytul-wiersz h1 { flex: 0 1 auto; }
.kon-naglowek-opis { margin: 6px 0 0; color: var(--kon-tekst-2); font-size: 14px; }
.kon-naglowek-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--kon-tekst-2); font-size: 13px; }
.kon-naglowek-meta > * { white-space: nowrap; }
.kon-naglowek-meta > * + *::before { content: '·'; margin-right: 14px; color: var(--kon-linia-mocna); }
.kon-naglowek-akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 720px) {
    .kon-naglowek-tytul h1 { font-size: 22px; }
    .kon-naglowek-akcje { width: 100%; }
    .kon-naglowek-akcje .kon-przycisk { flex: 1 1 auto; }
    .kon-naglowek-meta > * { white-space: normal; }
}

/* ── Przyciski ────────────────────────────────────────── */
.kon-przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border-radius: var(--kon-r-maly); border: 1px solid transparent; font: 600 14px/1.2 var(--kon-czcionka);
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.kon-przycisk .kon-ikona { width: 18px; height: 18px; }
.kon-przycisk:focus-visible { outline: none; box-shadow: var(--kon-fokus); }
.kon-przycisk--glowny, .kon-app a.kon-przycisk--glowny { background: var(--kon-morski); color: #fff; }
.kon-przycisk--glowny:hover, .kon-app a.kon-przycisk--glowny:hover { background: var(--kon-morski-hover); color: #fff; }
[data-theme="dark"] .kon-przycisk--glowny, [data-theme="dark"] .kon-app a.kon-przycisk--glowny { color: #062027; }
.kon-przycisk--drugi, .kon-app a.kon-przycisk--drugi { background: var(--kon-powierzchnia); color: var(--kon-naglowki); border-color: var(--kon-linia-mocna); }
.kon-przycisk--drugi:hover, .kon-app a.kon-przycisk--drugi:hover { border-color: var(--kon-morski); color: var(--kon-morski-hover); }
.kon-przycisk--niebezpieczny, .kon-app a.kon-przycisk--niebezpieczny { background: var(--kon-powierzchnia); color: var(--kon-blad); border-color: #E7B4B4; }
.kon-przycisk--niebezpieczny:hover { background: var(--kon-blad-tlo); color: var(--kon-blad); border-color: var(--kon-blad); }
.kon-przycisk--link, .kon-app a.kon-przycisk--link { background: none; border: none; padding: 0 4px; min-height: 44px; color: var(--kon-morski); text-decoration: underline; text-underline-offset: 3px; }
.kon-przycisk--maly { min-height: 36px; padding: 0 12px; font-size: 13px; }
.kon-przycisk[disabled], .kon-przycisk[aria-disabled="true"] { background: var(--kon-neutral-tlo); color: var(--kon-tekst-3); border-color: var(--kon-linia); cursor: not-allowed; }
.kon-powod { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 13px; color: var(--kon-tekst-2); }
.kon-powod .kon-ikona { width: 16px; height: 16px; margin-top: 1px; color: var(--kon-tekst-3); }
.kon-akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kon-akcje form { margin: 0; }
@media (max-width: 720px) { .kon-akcje > .kon-przycisk, .kon-akcje > form, .kon-akcje > form .kon-przycisk { flex: 1 1 100%; width: 100%; } }

/* Legacy klasy portalu wewnątrz modułu — dopóki ekran nie przejdzie na kon-*, wygląda spójnie */
.kon-app .btn-primary { background: var(--kon-morski); border-color: var(--kon-morski); color: #fff; }
.kon-app .btn-primary:hover { background: var(--kon-morski-hover); border-color: var(--kon-morski-hover); }
.kon-app .btn { min-height: 44px; border-radius: var(--kon-r-maly); }
.kon-app .btn-sm { min-height: 36px; }

/* ── Karty ────────────────────────────────────────────── */
.kon-karta { background: var(--kon-powierzchnia); border: 1px solid var(--kon-linia); border-radius: var(--kon-r-duzy); box-shadow: var(--kon-cien); min-width: 0; }
.kon-karta + .kon-karta { margin-top: 20px; }
.kon-karta-naglowek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 16px 20px; border-bottom: 1px solid var(--kon-linia); }
.kon-karta-naglowek h2 { font-size: 17px; font-weight: 700; margin: 0; }
.kon-karta-naglowek .kon-ciche { font-size: 12px; }
.kon-karta-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kon-karta-tresc { padding: 18px 20px; }
.kon-karta-tresc--bez { padding: 0; }
.kon-karta-stopka { padding: 14px 20px; border-top: 1px solid var(--kon-linia); }
.kon-karta--uwaga { background: var(--kon-bordo-tlo); border-color: #E8C6D8; }
.kon-karta--uwaga .kon-karta-naglowek { border-bottom-color: #E8C6D8; }
.kon-karta--blad { background: var(--kon-blad-tlo); border-color: #F1C2C2; }
.kon-karta--granat { background: var(--kon-granat); border-color: var(--kon-granat); color: #E5EEF1; }
.kon-karta--granat h2, .kon-karta--granat h3 { color: #fff; }
.kon-karta--granat a:not(.kon-przycisk) { color: var(--kon-morski-jasny); }
.kon-tag { display: inline-block; color: var(--kon-bordo); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 720px) { .kon-karta-naglowek, .kon-karta-tresc { padding-left: 16px; padding-right: 16px; } }

/* ── Kafelki liczb ────────────────────────────────────── */
.kon-kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kon-kafelek { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--kon-powierzchnia); border: 1px solid var(--kon-linia);
    border-radius: var(--kon-r-duzy); box-shadow: var(--kon-cien); text-decoration: none; color: var(--kon-tekst); min-height: 44px; }
.kon-app a.kon-kafelek { color: var(--kon-tekst); }
a.kon-kafelek:hover { border-color: var(--kon-morski); box-shadow: var(--kon-cien-wyzej); }
.kon-kafelek-etykieta { font-size: 13px; font-weight: 600; color: var(--kon-tekst-2); }
.kon-kafelek-liczba { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--kon-naglowki); font-variant-numeric: tabular-nums; }
.kon-kafelek-liczba--alarm { color: var(--kon-blad); }
.kon-kafelek-opis { font-size: 12px; color: var(--kon-tekst-3); }
.kon-kafelek-opis--akcent { color: var(--kon-bordo); font-weight: 600; }
@media (max-width: 720px) {
    .kon-kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kon-kafelek { padding: 12px 14px; }
    .kon-kafelek-liczba { font-size: 24px; }
}

/* ── Tabela ───────────────────────────────────────────── */
.kon-tabela-pudlo { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.kon-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.kon-tabela th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kon-tekst-3);
    padding: 12px 16px; border-bottom: 1px solid var(--kon-linia); background: var(--kon-tlo); white-space: nowrap; }
.kon-tabela td { padding: 12px 16px; border-bottom: 1px solid var(--kon-linia); vertical-align: middle; }
.kon-tabela tbody tr:last-child td { border-bottom: none; }
.kon-tabela tbody tr:hover td { background: rgba(0, 122, 122, 0.035); }
.kon-tabela .kon-komorka-glowna a { font-weight: 600; color: var(--kon-naglowki); text-decoration: none; }
.kon-tabela .kon-komorka-glowna a:hover { color: var(--kon-morski-hover); text-decoration: underline; }
.kon-tabela .kon-komorka-glowna .kon-mono { display: block; margin-top: 2px; color: var(--kon-tekst-3); }
.kon-tabela .kon-komorka-akcja { text-align: right; white-space: nowrap; }
.kon-tabela .kon-komorka-akcja a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
    .kon-tabela--karty thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .kon-tabela--karty, .kon-tabela--karty tbody, .kon-tabela--karty tr, .kon-tabela--karty td { display: block; width: 100%; }
    .kon-tabela--karty tr { padding: 12px 16px; border-bottom: 1px solid var(--kon-linia); }
    .kon-tabela--karty tbody tr:last-child { border-bottom: none; }
    .kon-tabela--karty td { border: none; padding: 3px 0; }
    .kon-tabela--karty td[data-etykieta]::before { content: attr(data-etykieta); display: block; font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--kon-tekst-3); margin-top: 6px; }
    .kon-tabela--karty .kon-komorka-glowna { font-size: 15px; }
    .kon-tabela--karty .kon-komorka-akcja { text-align: left; }
    .kon-tabela--karty tbody tr:hover td { background: none; }
}

/* ── Znacznik statusu (kolory tylko tutaj; ton z Dokument::TONY_STATUSOW) ── */
.kon-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    line-height: 1.5; white-space: nowrap; border: none; letter-spacing: 0; text-transform: none; }
.kon-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.kon-status--neutralny { background: var(--kon-neutral-tlo); color: var(--kon-neutral); }
.kon-status--info { background: var(--kon-morski-tlo); color: var(--kon-morski-hover); }
.kon-status--czeka { background: var(--kon-czeka-tlo); color: var(--kon-czeka); }
.kon-status--decyzja { background: var(--kon-bordo-tlo); color: var(--kon-bordo-ciemne); }
.kon-status--sukces { background: var(--kon-ok-tlo); color: var(--kon-ok); }
.kon-status--blad { background: var(--kon-blad-tlo); color: var(--kon-blad); }
[data-theme="dark"] .kon-status--info { color: var(--kon-morski-jasny); }

/* ── Formularz ────────────────────────────────────────── */
.kon-pole { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; }
.kon-etykieta, .kon-app .form-group > label:not(:has(input)) { display: block; font-weight: 600; font-size: 13px; color: var(--kon-naglowki); margin: 0; }
.kon-app .form-group > label:not(:has(input)) { margin-bottom: 6px; }
.kon-wymagane { color: var(--kon-blad); margin-left: 2px; }
.kon-wejscie, .kon-app .form-control {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; font: 400 14px/1.4 var(--kon-czcionka);
    border: 1px solid var(--kon-linia-mocna); border-radius: var(--kon-r-maly); background: var(--kon-powierzchnia); color: var(--kon-tekst);
}
select.kon-wejscie, .kon-app select.form-control { padding-right: 32px; }
textarea.kon-wejscie, .kon-app textarea.form-control { min-height: 88px; }
.kon-wejscie:focus, .kon-app .form-control:focus { outline: none; border-color: var(--kon-morski); box-shadow: var(--kon-fokus); }
.kon-wejscie:disabled, .kon-app .form-control:disabled { background: var(--kon-tlo); color: var(--kon-tekst-2); border-color: var(--kon-linia); }
.kon-podpowiedz, .kon-app .form-group > .kon-ciche { font-size: 12px; color: var(--kon-tekst-3); margin: 0; }
.kon-app .form-group > .kon-ciche { margin-top: 5px; }
.kon-blad-pola { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 600; color: var(--kon-blad); margin: 0; }
.kon-blad-pola .kon-ikona { width: 14px; height: 14px; margin-top: 1px; }
.kon-pole--blad .kon-wejscie, .kon-pole--blad .form-control, .kon-pole-brak .form-control { border-color: var(--kon-blad); background: var(--kon-blad-tlo); }
.kon-pole--blad .kon-etykieta, .kon-pole-brak > label { color: var(--kon-blad); }
.kon-formularz-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; }
.kon-pasek-narzedzi { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.kon-pasek-narzedzi .kon-pole { margin: 0; flex: 1 1 200px; }
.kon-pasek-narzedzi .kon-pole--szerokie { flex: 3 1 280px; }
.kon-szukaj { position: relative; }
.kon-szukaj .kon-ikona { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kon-tekst-3); pointer-events: none; }
.kon-szukaj .kon-wejscie { padding-left: 38px; }

/* ── Pusty stan ───────────────────────────────────────── */
.kon-pusty { text-align: center; padding: 40px 20px; max-width: 520px; margin: 0 auto; }
.kon-pusty--maly { padding: 24px 16px; }
.kon-pusty-ilustracja { position: relative; width: 120px; height: 96px; margin: 0 auto 16px; }
.kon-pusty--maly .kon-pusty-ilustracja { transform: scale(.8); margin-bottom: 4px; }
.kon-pusty-ilustracja svg:first-child { width: 120px; height: 96px; }
.kon-il-kartka { fill: var(--kon-powierzchnia); stroke: var(--kon-linia-mocna); stroke-width: 2; }
.kon-il-linie { stroke: var(--kon-linia-mocna); stroke-width: 3; }
.kon-il-kolo { fill: var(--kon-morski-tlo); stroke: var(--kon-morski); stroke-width: 2; }
.kon-pusty-ikona { position: absolute; left: 73px; top: 55px; width: 22px; height: 22px; color: var(--kon-morski); }
.kon-pusty-tytul { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.kon-pusty-opis { color: var(--kon-tekst-2); font-size: 14px; margin: 0 0 16px; }
.kon-pusty-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── Baner ────────────────────────────────────────────── */
.kon-baner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--kon-r); border: 1px solid transparent; font-size: 14px; margin: 0 0 16px; }
.kon-baner > .kon-ikona { width: 20px; height: 20px; margin-top: 1px; }
.kon-baner-tresc { flex: 1; min-width: 0; }
.kon-baner-tresc strong { display: block; margin-bottom: 2px; }
.kon-baner-tresc p { margin: 0; }
.kon-baner .kon-akcje { margin-top: 10px; }
.kon-baner--info { background: var(--kon-morski-tlo); border-color: #BFE3E3; color: var(--kon-granat); }
.kon-baner--info > .kon-ikona { color: var(--kon-morski); }
.kon-baner--ostrzezenie { background: var(--kon-czeka-tlo); border-color: #F1D79A; color: #5C3606; }
.kon-baner--ostrzezenie > .kon-ikona { color: var(--kon-czeka); }
.kon-baner--blad { background: var(--kon-blad-tlo); border-color: #F1C2C2; color: #7A1414; }
.kon-baner--blad > .kon-ikona { color: var(--kon-blad); }
.kon-baner--sukces { background: var(--kon-ok-tlo); border-color: #B9E2C8; color: #0F4D2A; }
.kon-baner--sukces > .kon-ikona { color: var(--kon-ok); }
[data-theme="dark"] .kon-baner { color: var(--kon-tekst); border-color: var(--kon-linia); }

/* ── Zakładki / filtry-pigułki ────────────────────────── */
.kon-zakladki { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; margin: 0 0 16px; scrollbar-width: thin; }
.kon-zakladka { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    font-size: 13px; font-weight: 600; text-decoration: none; color: var(--kon-tekst-2); background: var(--kon-powierzchnia); border: 1px solid var(--kon-linia); }
.kon-app a.kon-zakladka { color: var(--kon-tekst-2); }
.kon-app a.kon-zakladka:hover { border-color: var(--kon-morski); color: var(--kon-morski-hover); }
.kon-app a.kon-zakladka[aria-current] { background: var(--kon-granat); border-color: var(--kon-granat); color: #fff; }
.kon-zakladka-liczba { font-variant-numeric: tabular-nums; opacity: .75; font-weight: 500; }


/* ── Układ: treść + kolumna boczna ────────────────────── */
.kon-siatka-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px; align-items: start; }
.kon-siatka-2 > * { min-width: 0; }
.kon-kolumna > * + * { margin-top: 20px; }
@media (max-width: 1100px) { .kon-siatka-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Lista pierwszych kroków (onboarding) ─────────────── */
.kon-start { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kon-start-krok { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--kon-linia); border-radius: var(--kon-r); background: var(--kon-powierzchnia); }
.kon-start-numer { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    background: var(--kon-neutral-tlo); color: var(--kon-tekst-2); }
.kon-start-numer .kon-ikona { width: 16px; height: 16px; stroke-width: 2.5; }
.kon-start-krok h3 { font-size: 15px; font-weight: 700; margin: 0; }
.kon-start-krok p { font-size: 13px; color: var(--kon-tekst-2); margin: 0; flex: 1; }
.kon-start-krok .kon-przycisk { align-self: flex-start; }
.kon-start-krok--zrobiony .kon-start-numer { background: var(--kon-morski); color: #fff; }
.kon-start-krok--zrobiony h3 { color: var(--kon-tekst-2); }
.kon-start-krok--biezacy { border-color: var(--kon-morski); box-shadow: 0 0 0 3px var(--kon-morski-tlo); }
.kon-start-krok--biezacy .kon-start-numer { background: var(--kon-morski-tlo); color: var(--kon-morski-hover); }
@media (max-width: 900px) { .kon-start { grid-template-columns: minmax(0, 1fr); } .kon-start-krok .kon-przycisk { align-self: stretch; } }

/* ── Lista definicji (para etykieta–wartość) ──────────── */
.kon-dane { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.kon-dane dt { color: var(--kon-tekst-3); }
.kon-dane dd { margin: 0; color: var(--kon-tekst); text-align: right; overflow-wrap: anywhere; }

/* ── Wiersze listy w karcie (podpisujący, rewizje, paczka) ── */
.kon-wiersze { list-style: none; margin: 0; padding: 0; }
.kon-wiersze > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 20px; border-top: 1px solid var(--kon-linia); font-size: 13px; }
.kon-wiersze > li:first-child { border-top: none; }
.kon-wiersze-glowne { min-width: 0; flex: 1 1 180px; }
.kon-wiersze-glowne strong { display: block; color: var(--kon-naglowki); font-weight: 600; overflow-wrap: anywhere; }
.kon-wiersze-glowne strong a { color: inherit; text-decoration: none; } .kon-wiersze-glowne strong a:hover { text-decoration: underline; }
.kon-wiersze-glowne > span { display: block; margin-top: 2px; }
.kon-wiersze .kon-sha { font-family: var(--kon-mono); font-size: 11px; color: var(--kon-tekst-3); word-break: break-all; }
@media (max-width: 720px) { .kon-wiersze > li { padding: 12px 16px; } }

/* Odstęp sekcji, gdy siatka idzie po kafelkach, krokach albo karcie */
.kon-kafelki + .kon-siatka-2, .kon-kroki + .kon-siatka-2, .kon-karta + .kon-siatka-2, .kon-baner + .kon-siatka-2 { margin-top: 20px; }
.kon-kafelki { margin-bottom: 0; }

/* Krok K1a — szkielet: stan weryfikacji kontrahenta, formularz dodawania, lista */
.kon-ryzyko { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.kon-ryzyko .kon-ikona { width: 14px; height: 14px; }
.kon-ryzyko--niski { background: var(--kon-ok-tlo); color: var(--kon-ok); }
.kon-ryzyko--sredni { background: var(--kon-czeka-tlo); color: var(--kon-czeka); }
.kon-ryzyko--wysoki { background: var(--kon-blad-tlo); color: var(--kon-blad); }
.kon-ryzyko--brak_danych { background: var(--kon-neutral-tlo); color: var(--kon-neutral); border-color: var(--kon-linia-mocna); border-style: dashed; }
.kon-ryzyko--nie_zweryfikowano { background: var(--kon-powierzchnia); color: var(--kon-tekst-2); border-color: var(--kon-linia-mocna); }
.kon-formularz { max-width: 640px; }
.kon-formularz-akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.kon-lista-pasek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.kon-lista-pasek .kon-ciche { margin: 0; }
@media (max-width: 720px) {
    .kon-formularz { max-width: none; }
    .kon-formularz-akcje > .kon-przycisk { flex: 1 1 100%; }
}

/* Ekran odmowy / braku rekordu: wyśrodkowana karta */
.kon-odmowa .kon-karta-tresc, .kon-odmowa.kon-karta-tresc { text-align: center; padding: 32px 24px; }
.kon-odmowa { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.kon-odmowa h1 { font-size: 24px; line-height: 1.25; margin: 14px 0 8px; }
.kon-odmowa-ikona { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kon-czeka-tlo); color: var(--kon-czeka); }
.kon-odmowa-ikona .kon-ikona { width: 26px; height: 26px; }
.kon-odmowa-powod { margin: 0 auto 16px; max-width: 480px; color: var(--kon-tekst-2); font-size: 15px; }
.kon-akcje--srodek { justify-content: center; }

/* Krok K2 — wyniki źródeł na karcie kontrahenta */
.kon-naglowek-akcje { margin: 0; }
.kon-sekcja { margin-bottom: 20px; }
.kon-wyniki { list-style: none; margin: 0; padding: 0; }
.kon-wynik { padding: 14px 0; border-top: 1px solid var(--kon-linia); }
.kon-wynik:first-child { border-top: none; padding-top: 0; }
.kon-wynik-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.kon-wynik-glowa strong { color: var(--kon-naglowki); font-weight: 600; overflow-wrap: anywhere; }
.kon-wynik-meta { margin: 6px 0 0; font-size: 12px; color: var(--kon-tekst-3); overflow-wrap: anywhere; }
.kon-wynik .kon-dane { margin: 10px 0 0; }
.kon-lista-prosta { list-style: none; margin: 0; padding: 0; }
.kon-stan { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.kon-stan .kon-ikona { width: 14px; height: 14px; }
.kon-stan--znaleziono { background: var(--kon-ok-tlo); color: var(--kon-ok); }
/* „Nie znaleziono” to odpowiedź rejestru (bordo, linia ciągła) — nie myl z „Brak danych” (szary, linia przerywana). */
.kon-stan--nie_znaleziono { background: var(--kon-blad-tlo); color: var(--kon-blad); border-color: currentColor; }
.kon-stan--brak_danych { background: var(--kon-neutral-tlo); color: var(--kon-neutral); border-color: var(--kon-linia-mocna); border-style: dashed; }
.kon-stan--w_kolejce { background: var(--kon-powierzchnia); color: var(--kon-tekst-2); border-color: var(--kon-linia-mocna); }
@media (max-width: 720px) { .kon-naglowek-akcje, .kon-naglowek-akcje .kon-przycisk { width: 100%; } }

/* Krok K04 — karta kontrahenta: szczegóły podmiotu z kolejnych źródeł (REGON, KRS, CEIDG, CRBR, VIES, GLEIF) */
.kon-wynik .kon-dane dd .kon-lista-prosta li { padding: 2px 0; overflow-wrap: anywhere; }
.kon-wynik .kon-dane dd .kon-lista-prosta li + li { border-top: 1px solid var(--kon-linia); }

/* Krok K12 — listy sankcyjne: trafienia z porównaniem, stany i formularz decyzji (kon_kotwica_krok_K12) */
.kon-trafienia { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kon-trafienie { border: 1px solid var(--kon-linia); border-radius: var(--kon-r); padding: 14px 16px; background: var(--kon-powierzchnia); }
.kon-trafienie--potwierdzone { border-color: var(--kon-blad); }
.kon-trafienie .kon-ciche { margin: 4px 0 12px; }
.kon-porownanie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 12px; }
.kon-porownanie-kolumna { min-width: 0; border-top: 1px solid var(--kon-linia); padding-top: 10px; }
.kon-porownanie-kolumna h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--kon-naglowki); }
.kon-decyzja { max-width: none; border-top: 1px solid var(--kon-linia); padding-top: 12px; }
/* Stany trafienia: tekst i ikona niosą znaczenie, kolor tylko je wzmacnia. „Fałszywe” jest spokojne, „potwierdzone” — ostrzegawcze. */
.kon-stan--sankcje_do_przegladu { background: var(--kon-czeka-tlo); color: var(--kon-czeka); border-color: currentColor; }
.kon-stan--sankcje_potwierdzone { background: var(--kon-blad-tlo); color: var(--kon-blad); border-color: currentColor; font-weight: 700; }
.kon-stan--sankcje_falszywe { background: var(--kon-neutral-tlo); color: var(--kon-neutral); border-color: var(--kon-linia-mocna); border-style: dashed; }
/* Źródło „listy sankcyjne” na liście wyników: trafienie ostrzega, brak trafienia uspokaja (odwrotnie niż rejestry). */
.kon-stan--sankcje_trafienie { background: var(--kon-czeka-tlo); color: var(--kon-czeka); border-color: currentColor; font-weight: 700; }
.kon-stan--sankcje_czysto { background: var(--kon-ok-tlo); color: var(--kon-ok); }
@media (max-width: 720px) {
    .kon-porownanie { grid-template-columns: minmax(0, 1fr); }
    .kon-decyzja .kon-formularz-akcje .kon-przycisk { width: 100%; }
}
/* Krok K17 — ankiety dostawców: panel klienta i strona dostawcy bez logowania */
.kon-karta-naglowek--akcje { align-items: center; }
.kon-wejscie--krotkie { max-width: 280px; }
.kon-ank-wzory { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kon-ank-wzory legend { padding: 0; margin-bottom: 6px; }
.kon-ank-wybor { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; min-height: 44px; border: 1px solid var(--kon-linia-mocna); border-radius: var(--kon-r); background: var(--kon-powierzchnia); cursor: pointer; }
.kon-ank-wybor:hover, .kon-ank-wybor:focus-within { border-color: var(--kon-morski); }
.kon-ank-wybor input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--kon-morski); }
.kon-ank-wybor-tresc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kon-ank-wybor-tresc strong { color: var(--kon-naglowki); overflow-wrap: anywhere; }
.kon-ank-wybor--prosty { border: 0; padding: 4px 0; align-items: center; }
.kon-ank-liczniki { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kon-ank-licznik { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 44px; border: 1px solid var(--kon-linia-mocna); border-radius: var(--kon-r); background: var(--kon-powierzchnia); color: var(--kon-tekst-2); font-size: 14px; }
.kon-ank-licznik .kon-ikona { width: 18px; height: 18px; }
.kon-ank-licznik strong { font-size: 18px; color: var(--kon-naglowki); }
.kon-ank-licznik--jest.kon-ank-licznik--krytyczna { background: var(--kon-blad-tlo); border-color: var(--kon-blad); color: var(--kon-blad); }
.kon-ank-licznik--jest.kon-ank-licznik--krytyczna strong { color: var(--kon-blad); }
.kon-ank-licznik--jest.kon-ank-licznik--wazna { background: var(--kon-czeka-tlo); border-color: var(--kon-czeka); color: var(--kon-czeka); }
.kon-ank-licznik--jest.kon-ank-licznik--wazna strong { color: var(--kon-czeka); }
.kon-ank-licznik--jest.kon-ank-licznik--brak { background: var(--kon-neutral-tlo); border-color: var(--kon-linia-mocna); border-style: dashed; color: var(--kon-neutral); }
.kon-ank-klasa { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.kon-ank-klasa .kon-ikona { width: 14px; height: 14px; }
.kon-ank-klasa--krytyczna { background: var(--kon-blad-tlo); color: var(--kon-blad); border-color: currentColor; }
.kon-ank-klasa--wazna { background: var(--kon-czeka-tlo); color: var(--kon-czeka); border-color: currentColor; }
.kon-ank-klasa--brak { background: var(--kon-neutral-tlo); color: var(--kon-neutral); border-color: var(--kon-linia-mocna); border-style: dashed; }
.kon-stan--ank-wyslana, .kon-stan--ank-w_trakcie { background: var(--kon-powierzchnia); color: var(--kon-tekst-2); border-color: var(--kon-linia-mocna); }
.kon-stan--ank-zlozona { background: var(--kon-ok-tlo); color: var(--kon-ok); }
.kon-stan--ank-anulowana { background: var(--kon-neutral-tlo); color: var(--kon-neutral); border-color: var(--kon-linia-mocna); }
.kon-stan--ank-wygasla { background: var(--kon-czeka-tlo); color: var(--kon-czeka); border-color: currentColor; border-style: dashed; }
.kon-ank-podtytul { font-size: 14px; font-weight: 700; margin: 18px 0 8px; color: var(--kon-naglowki); }
.kon-ank-uwagi li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.kon-ank-uwagi .kon-ikona { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.kon-ank-zastrzezenie { margin-top: 16px; }
.kon-ank-odpowiedzi dd { overflow-wrap: anywhere; }
.kon-ank-znacznik { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--kon-czeka-tlo); color: var(--kon-czeka); border: 1px solid currentColor; }
.kon-ank-znacznik .kon-ikona { width: 14px; height: 14px; }
.kon-ank-znacznik--ok { background: var(--kon-ok-tlo); color: var(--kon-ok); }
.kon-ank-link-wiersz { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kon-ank-link-wiersz .kon-wejscie { flex: 1 1 280px; min-width: 0; }

/* Strona dostawcy (bez menu i bez logowania) */
.kon-ank-pub { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.kon-ank-pub-glowa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; background: var(--kon-granat); }
.kon-ank-pub-marka { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kon-ank-pub-logo { height: 28px; width: auto; filter: brightness(0) invert(1); }
.kon-ank-pub-glowa .kon-znak { color: var(--kon-morski-jasny); border-color: var(--kon-morski-jasny); }
.kon-ank-jezyki { display: flex; gap: 6px; }
.kon-ank-jezyki a, .kon-app .kon-ank-jezyki a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid #36525D; border-radius: var(--kon-r-maly); color: #E5EEF1; text-decoration: none; font-weight: 600; font-size: 13px; }
.kon-ank-jezyki a[aria-current], .kon-app .kon-ank-jezyki a[aria-current] { background: var(--kon-morski-jasny); color: #062027; border-color: var(--kon-morski-jasny); }
.kon-ank-pub-tresc { box-sizing: border-box; min-width: 0; flex: 1 0 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.kon-ank-pub-naglowek h1 { font-size: 24px; margin: 0 0 6px; color: var(--kon-naglowki); overflow-wrap: anywhere; }
.kon-ank-pub-od { font-weight: 600; margin: 0 0 6px; }
.kon-ank-pub-stopka { padding: 16px 24px 24px; text-align: center; font-size: 12px; color: var(--kon-tekst-3); }
.kon-ank-klauzula p { margin: 0 0 8px; font-size: 13px; color: var(--kon-tekst-2); }
.kon-ank-klauzula h2 { font-size: 15px; margin: 0 0 8px; }
.kon-ank-formularz { max-width: none; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.kon-ank-sekcja .kon-karta-tresc + .kon-karta-tresc { border-top: 1px solid var(--kon-linia); }
.kon-ank-pyt[hidden] { display: none; }
.kon-ank-pole { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kon-ank-pole legend { padding: 0; margin-bottom: 4px; font-size: 14px; line-height: 1.45; }
.kon-ank-radia { display: flex; flex-wrap: wrap; gap: 8px; }
.kon-ank-radia--kolumna { flex-direction: column; }
.kon-ank-opcja { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 12px; border: 1px solid var(--kon-linia-mocna); border-radius: var(--kon-r); background: var(--kon-powierzchnia); cursor: pointer; font-size: 14px; }
.kon-ank-opcja:hover, .kon-ank-opcja:focus-within { border-color: var(--kon-morski); }
.kon-ank-opcja input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--kon-morski); }
.kon-ank-pyt--delta { background: var(--kon-czeka-tlo); }
.kon-ank-pyt--blad { background: var(--kon-blad-tlo); }
.kon-ank-potwierdz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kon-ank-potwierdz .kon-ank-znacznik { margin-left: 0; }
.kon-ank-blad { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--kon-blad); font-weight: 600; font-size: 13px; }
.kon-ank-blad .kon-ikona { width: 16px; height: 16px; flex: 0 0 auto; }
.kon-ank-plik { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.kon-ank-plik .kon-ikona { width: 16px; height: 16px; color: var(--kon-ok); }
.kon-ank-akcje { position: sticky; bottom: 0; background: var(--kon-tlo); padding: 12px 0; border-top: 1px solid var(--kon-linia); z-index: 2; }
.kon-ank-komunikat { text-align: center; }
.kon-ank-komunikat-ikona { width: 40px; height: 40px; color: var(--kon-morski); }
.kon-ank-komunikat h1 { font-size: 22px; margin: 10px 0 8px; }
@media (max-width: 720px) {
    .kon-ank-pub-glowa { padding: 12px 16px; }
    .kon-ank-pub-naglowek h1 { font-size: 20px; }
    .kon-ank-radia:not(.kon-ank-radia--kolumna) .kon-ank-opcja { flex: 1 1 calc(50% - 8px); }
    .kon-ank-opcja { flex: 1 1 100%; }
    .kon-ank-akcje .kon-przycisk { flex: 1 1 100%; }
    .kon-wejscie--krotkie { max-width: none; }
}
.kon-ank-delta .kon-baner-tresc { min-width: 0; }
.kon-ank-delta .kon-przycisk { white-space: normal; max-width: 100%; height: auto; padding-top: 8px; padding-bottom: 8px; text-align: left; }
@media (max-width: 480px) { .kon-ank-pub-marka .kon-znak { display: none; } }

/* Krok K13 — ocena ryzyka: „Dlaczego ta ocena”, liczniki wg poziomu (kon_kotwica_krok_K13) */
.kon-powody { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 0; }
.kon-powod { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--kon-linia); }
.kon-powod:first-child { border-top: 0; }
.kon-powod-poziom { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--kon-naglowki); }
.kon-powod--wysoki .kon-powod-poziom { color: var(--kon-blad); }
.kon-powod--sredni .kon-powod-poziom { color: var(--kon-czeka); }
.kon-powod--brak_danych .kon-powod-poziom { color: var(--kon-neutral); }
.kon-powod-tekst { min-width: 0; overflow-wrap: anywhere; }
.kon-powod-linki { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kon-powod-linki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kon-morski); }
.kon-ryzyko-liczniki a { display: inline-flex; align-items: center; min-height: 44px; }
.kon-ryzyko-liczba { font-size: 20px; color: var(--kon-naglowki); }
@media (max-width: 720px) {
    .kon-powod { grid-template-columns: minmax(0, 1fr); }
    .kon-powod-linki { grid-column: 1; }
}

/* Krok K16 — monitoring: zmiany u kontrahentów i przełącznik (kon_kotwica_krok_K16) */
.kon-alert { display: flex; gap: 12px; align-items: flex-start; padding-left: 12px; border-left: 3px solid transparent; }
.kon-alert--nowy { border-left-color: var(--kon-morski); }
.kon-alert .kon-wiersze-glowne { min-width: 0; overflow-wrap: anywhere; }
/* Krok K1b — rejestracja i logowanie na kontrahent.billu.pl (kon_kotwica_krok_K1B) */
.kon-rej { min-height: 100vh; background: var(--kon-tlo); }
.kon-rej-kolumna { width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; }
.kon-rej-marka { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; }
.kon-rej-logo { height: 34px; max-width: 140px; width: auto; }
.kon-rej-karta .kon-karta-tresc { padding: 28px; }
.kon-rej-karta h1 { font-size: 24px; line-height: 1.25; margin: 0 0 6px; }
.kon-rej-zalety { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--kon-tekst-2); }
.kon-rej-zalety li { display: flex; align-items: flex-start; gap: 8px; }
.kon-rej-zalety .kon-ikona { width: 16px; height: 16px; margin-top: 2px; color: var(--kon-morski); }
.kon-rej-formularz { margin-top: 18px; }
.kon-rej-formularz > .kon-przycisk { margin-top: 4px; }
.kon-rej-logowanie { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.kon-rej-adres { text-align: center; margin: 0 0 14px; overflow-wrap: anywhere; }
.kon-rej-karta .kon-baner { margin-top: 16px; }
.kon-rej-kroki { margin: 16px 0; padding-left: 22px; display: grid; gap: 8px; color: var(--kon-tekst); font-size: 14px; }
.kon-przycisk--pelny { display: flex; width: 100%; }
.kon-srodek { text-align: center; margin-top: 10px; }
.kon-pole-wyboru { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 14px; color: var(--kon-tekst); cursor: pointer; }
.kon-pole-wyboru input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--kon-morski); }
.kon-odmowa-ikona--info { background: var(--kon-morski-tlo); color: var(--kon-morski-hover); }
@media (max-width: 720px) { .kon-rej-karta .kon-karta-tresc { padding: 20px 16px; } .kon-odmowa .kon-karta-tresc { padding: 24px 16px; } }

/* Krok K20 — licencja i rozliczenie (kon_kotwica_krok_K20) */
.kon-lista-prosta { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--kon-tekst); }
.kon-karta .kon-dane + .kon-ciche { margin-top: 12px; }
#kon-licencja-ostrzezenie a { font-weight: 600; margin-left: 6px; }
/* Krok K15 — import CSV, historia weryfikacji i przyciski raportu (kon_kotwica_krok_K15) */
.kon-baner--ok { background: var(--kon-ok-tlo); border-color: #B7DEC7; color: var(--kon-ok); }
.kon-baner--ok > .kon-ikona { color: var(--kon-ok); }
.kon-baner--ok a { color: inherit; font-weight: 600; text-decoration: underline; }
.kon-wybor { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.kon-wybor input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--kon-morski); }
.kon-imp-liczniki { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kon-imp-licznik { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid var(--kon-linia); border-radius: var(--kon-r); background: var(--kon-powierzchnia); color: var(--kon-tekst-2); font-size: 14px; }
.kon-imp-licznik strong { font-size: 20px; color: var(--kon-naglowki); }
.kon-imp-licznik--poprawny > .kon-ikona { color: var(--kon-ok); }
.kon-imp-licznik--jest.kon-imp-licznik--blad { border-color: var(--kon-blad); background: var(--kon-blad-tlo); }
.kon-imp-licznik--jest.kon-imp-licznik--blad > .kon-ikona { color: var(--kon-blad); }
.kon-imp-licznik--jest.kon-imp-licznik--duplikat { background: var(--kon-neutral-tlo); }
.kon-imp-stan { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.kon-imp-stan--poprawny { color: var(--kon-ok); }
.kon-imp-stan--blad { color: var(--kon-blad); }
.kon-imp-stan--duplikat_w_pliku, .kon-imp-stan--istnieje { color: var(--kon-neutral); }
.kon-imp-powod { display: block; margin-top: 2px; font-size: 12px; color: var(--kon-tekst-3); }
.kon-imp-kolumny { grid-template-columns: minmax(110px, max-content) 1fr; }
.kon-imp-kolumny dt { font-family: var(--kon-mono); }
.kon-imp-kolumny dd { text-align: left; }
.kon-rap-akcje { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.kon-rap-naglowek { flex-wrap: wrap; gap: 10px; justify-content: space-between; }
@media (max-width: 720px) {
    .kon-imp-licznik { flex: 1 1 100%; }
    .kon-rap-akcje, .kon-rap-naglowek { width: 100%; }
    .kon-rap-akcje .kon-przycisk { flex: 1 1 100%; }
}
/* Odstęp akapitu od listy danych pod nim (ekran licencji: stan, potem Od/Do/Płatnik) */
.kon-karta-tresc > p + .kon-dane { margin-top: 14px; }