/*
 * Konwerter EPP - arkusz stylow.
 *
 * Zalozenie: to narzedzie ksiegowe, a nie strona produktu. Ma wygladac
 * powaznie i czytac sie szybko przy zmeczonych oczach o siedemnastej.
 * Stad duzo powietrza, jeden kolor akcentu i zero animacji dla ozdoby.
 */

:root {
    /* Wymiary i cienie - nie sa kolorami marki, wiec zyja tutaj. */
    --cien: 0 1px 2px rgba(10, 37, 64, .05), 0 8px 24px rgba(10, 37, 64, .07);
    --cien-mocny: 0 2px 4px rgba(10, 37, 64, .07), 0 16px 40px rgba(10, 37, 64, .12);
    --promien: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --cien: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .4);
        --cien-mocny: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }

/*
 * Atrybut hidden ma wygrywać z każdym selektorem klasy.
 *
 * Bez tego element ukrywany z JavaScriptu (el.hidden = true) potrafi zostać
 * widoczny, bo jego własna klasa ustawia display i ma wyższą specyficzność.
 * Objawia się to najgorzej jak można: interfejs pokazuje stan, którego nie ma.
 */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tekst);
    background: linear-gradient(180deg, var(--tlo) 0%, var(--tlo-glebia) 100%);
    -webkit-font-smoothing: antialiased;
}

.powloka {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 44px 20px 8px;
}


/* ── Znak marki ────────────────────────────────────────────────────────── */

/*
 * Znak istnieje w dwóch wariantach: na jasne i na ciemne tło. Przełączamy
 * gotowe pliki, zamiast przemalowywać znak filtrem.
 *
 * Oba selektory mają tę samą specyficzność, więc decyduje motyw, a nie
 * kolejność reguł. Wysokość ustawiamy na tych samych klasach - reguła
 * typu `.marka img` miałaby wyższą specyficzność i zniosłaby przełącznik,
 * pokazując oba warianty naraz.
 */
.marka { display: inline-flex; align-items: center; }
.marka__jasny, .marka__ciemny { height: 26px; width: auto; }
.marka__jasny { display: block; }
.marka__ciemny { display: none; }

@media (prefers-color-scheme: dark) {
    .marka__jasny { display: none; }
    .marka__ciemny { display: block; }
}

/* ── Naglowek ──────────────────────────────────────────────────────────── */

.naglowek {
    margin-bottom: 26px;
}

/*
 * Znak stoi nad tytułem, nie obok.
 *
 * W jednej linii marka i nazwa narzędzia czytają się jak dwa równorzędne
 * byty i konkurują o uwagę. Rozdzielone na dwa poziomy układają się
 * w naturalną hierarchię: kto to zrobił, a poniżej - co to jest.
 */
.naglowek__marka {
    display: block;
    margin-bottom: 14px;
}

.naglowek__nazwa {
    display: block;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.2;
    color: var(--marka);
}

.naglowek__droga {
    margin: 9px 0 0;
    font-size: 13.5px;
    color: var(--tekst-drugi);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.znacznik {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--linia-mocna);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--tekst-drugi);
    background: var(--papier);
    white-space: nowrap;
}

.strzalka { color: var(--tekst-slaby); }

/* ── Karta ─────────────────────────────────────────────────────────────── */

.karta {
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 26px;
}

.karta + .karta { margin-top: 18px; }

/* ── Pole zrzutu pliku ─────────────────────────────────────────────────── */

.zrzutnia {
    position: relative;
    border: 2px dashed var(--linia-mocna);
    border-radius: 10px;
    background: var(--tlo);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.zrzutnia:hover,
.zrzutnia:focus-visible {
    border-color: var(--akcent);
    background: var(--akcent-tlo);
    outline: none;
}

.zrzutnia--aktywna {
    border-color: var(--akcent);
    background: var(--akcent-tlo);
    border-style: solid;
}

.zrzutnia--wypelniona {
    border-style: solid;
    border-color: var(--akcent);
    background: var(--akcent-tlo);
    padding: 22px 24px;
    text-align: left;
}

.zrzutnia input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.zrzutnia__ikona {
    width: 40px;
    height: 40px;
    color: var(--akcent);
    margin-bottom: 10px;
}

.zrzutnia__glowny {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.zrzutnia__pomocniczy {
    font-size: 13px;
    color: var(--tekst-drugi);
}

/* Widok po wybraniu pliku */
.wybrany {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wybrany__ikona {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--akcent);
}

.wybrany__opis { min-width: 0; flex: 1; }

.wybrany__nazwa {
    font-weight: 600;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wybrany__meta {
    font-size: 12.5px;
    color: var(--tekst-drugi);
}

.wybrany__zmien {
    position: relative;
    z-index: 2;
    flex: none;
    border: 1px solid var(--linia-mocna);
    background: var(--papier);
    color: var(--tekst-drugi);
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.wybrany__zmien:hover {
    border-color: var(--akcent);
    color: var(--akcent);
}

/* ── Opcja e-mail ──────────────────────────────────────────────────────── */

.opcja { margin-top: 22px; }

.przelacznik {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.przelacznik input {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--akcent);
    cursor: pointer;
    flex: none;
}

.przelacznik__tresc { font-size: 14px; }

.przelacznik__podpis {
    display: block;
    font-size: 12.5px;
    color: var(--tekst-drugi);
    margin-top: 1px;
}

.pole-email {
    margin-top: 12px;
    padding-left: 26px;
}

input[type="email"] {
    width: 100%;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--tekst);
    background: var(--papier);
    border: 1px solid var(--linia-mocna);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="email"]:focus {
    outline: none;
    border-color: var(--akcent);
    box-shadow: 0 0 0 3px var(--akcent-tlo);
}

/* ── Przycisk glowny ───────────────────────────────────────────────────── */

.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 22px;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    background: var(--akcent);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .06s ease;
}

.przycisk:hover:not(:disabled) { background: var(--akcent-ciemny); }
.przycisk:active:not(:disabled) { transform: translateY(1px); }

.przycisk:disabled {
    background: var(--linia-mocna);
    color: var(--tekst-slaby);
    cursor: not-allowed;
}

.przycisk__ikona { width: 18px; height: 18px; }

.wirujaca {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: obrot .7s linear infinite;
}

@keyframes obrot { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .wirujaca { animation-duration: 2s; }
    * { transition-duration: .01ms !important; }
}

/* ── Wynik ─────────────────────────────────────────────────────────────── */

.wynik__glowa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--linia);
}

.wynik__odznaka {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sukces-tlo);
    color: var(--sukces);
}

.wynik__odznaka svg { width: 21px; height: 21px; }

.wynik__tytul {
    font-size: 16.5px;
    font-weight: 700;
}

.wynik__podtytul {
    font-size: 13px;
    color: var(--tekst-drugi);
}

.dane {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--linia);
    border: 1px solid var(--linia);
    border-radius: 9px;
    overflow: hidden;
    margin: 18px 0;
}

.dane__pole {
    background: var(--papier);
    padding: 13px 14px;
}

.dane__etykieta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--tekst-slaby);
}

.dane__wartosc {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.przycisk--pobierz {
    background: var(--sukces-akcent);
    color: #fff;
    text-decoration: none;
}

.przycisk--pobierz:hover { background: var(--sukces); filter: brightness(1.08); }

.zegar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--tekst-drugi);
}

.zegar svg { width: 15px; height: 15px; flex: none; }
.zegar strong { font-variant-numeric: tabular-nums; color: var(--tekst); }
.zegar--konczy strong { color: var(--blad); }

/* ── Uwagi z konwersji ─────────────────────────────────────────────────── */

.uwagi { margin-top: 18px; }

.uwagi__przelacz {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tekst);
    text-align: left;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: 9px;
    cursor: pointer;
}

.uwagi__przelacz:hover { border-color: var(--linia-mocna); }

.uwagi__licznik {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--tekst-drugi);
}

.uwagi__daszek {
    width: 15px;
    height: 15px;
    transition: transform .18s ease;
}

.uwagi--otwarte .uwagi__daszek { transform: rotate(180deg); }

.uwagi__lista {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.uwaga {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.uwaga--ostrzezenie {
    background: var(--ostrzezenie-tlo);
    border-color: color-mix(in srgb, var(--ostrzezenie-akcent) 40%, transparent);
}

.uwaga--info {
    background: var(--tlo);
    border-color: var(--linia);
}

.uwaga__znak { flex: none; font-weight: 700; }
.uwaga--ostrzezenie .uwaga__znak { color: var(--ostrzezenie); }
.uwaga--info .uwaga__znak { color: var(--tekst-slaby); }

.uwaga__ile {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Komunikaty ────────────────────────────────────────────────────────── */

.komunikat {
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 18px;
    border: 1px solid transparent;
}

.komunikat--blad {
    background: var(--blad-tlo);
    border-color: color-mix(in srgb, var(--blad-akcent) 40%, transparent);
    color: var(--tekst);
}

.komunikat--info {
    background: var(--akcent-tlo);
    border-color: color-mix(in srgb, var(--akcent) 30%, transparent);
}

.komunikat__ikona { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.komunikat--blad .komunikat__ikona { color: var(--blad); }
.komunikat--info .komunikat__ikona { color: var(--akcent); }

/* ── Wskazowka i stopka ────────────────────────────────────────────────── */

.wskazowka {
    margin-top: 18px;
    padding: 15px 17px;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tekst-drugi);
}

.wskazowka strong { color: var(--tekst); }

.wskazowka__kroki {
    margin: 8px 0 0;
    padding-left: 20px;
}

.wskazowka__kroki li { margin-bottom: 3px; }


/* ── Strona bledu ──────────────────────────────────────────────────────── */

.blad-strona {
    max-width: 520px;
    margin: 0 auto;
    padding: 90px 20px;
    text-align: center;
}

.blad-strona__kod {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--linia-mocna);
    line-height: 1;
}

.blad-strona__tresc {
    margin: 14px 0 26px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--tekst-drugi);
}

.blad-strona .przycisk {
    width: auto;
    padding: 11px 26px;
    text-decoration: none;
}

/* ── Waskie ekrany ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .powloka { padding: 30px 16px 44px; }
    .karta { padding: 20px; }
    .dane { grid-template-columns: 1fr 1fr; }
    .dane__pole:last-child { grid-column: 1 / -1; }
    .zrzutnia { padding: 32px 18px; }
}

/* ── Podsumowanie dokumentów ───────────────────────────────────────────── */

.podsumowanie { margin-top: 22px; }
.podsumowanie__glowa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.podsumowanie__tytul {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
}

.podsumowanie__meta {
    font-size: 12.5px;
    color: var(--tekst-drugi);
}

/* Tabela bywa szersza niż telefon - przewija się w swojej ramce,
   nigdy nie rozpycha strony. */
.podsumowanie__przewijak {
    overflow-x: auto;
    border: 1px solid var(--linia);
    border-radius: 9px;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 460px;
}

/*
 * Kolumna nazwy dostaje całą pozostałą szerokość, liczbowe biorą tyle,
 * ile trzeba na najdłuższą kwotę. Bez tego przeglądarka dzieli szerokość
 * po równo i nazwa typu łamie się, mimo że obok jest wolne miejsce.
 */
.tabela th:first-child, .tabela td:first-child { width: 100%; }
.tabela th:not(:first-child), .tabela td:not(:first-child) { width: 1%; }

.tabela th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--tekst-slaby);
    background: var(--tlo);
    border-bottom: 1px solid var(--linia);
    white-space: nowrap;
}

.tabela td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--linia-miekka);
}

.tabela tr:last-child td { border-bottom: none; }

/* Liczby do prawej i o stałej szerokości znaku - kolumny da się porównywać
   wzrokiem, bez przesuwania się przecinka. */
.tabela--liczba {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 14px;
}

.tabela__grupa td {
    padding-top: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--akcent);
    background: var(--akcent-tlo);
    border-bottom: 1px solid var(--linia);
}

.tabela__symbol {
    display: inline-block;
    min-width: 32px;
    margin-right: 9px;
    padding: 1px 6px;
    border: 1px solid var(--linia-mocna);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--tekst-drugi);
}

.tabela__nieznany {
    border-style: dashed;
    color: var(--ostrzezenie);
}

.tabela__razem td {
    font-weight: 700;
    background: var(--tlo);
    border-top: 2px solid var(--akcent);
}

/* ── Pasek numerów KSeF ────────────────────────────────────────────────── */

.ksef {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.ksef__znak {
    flex: none;
    font-weight: 700;
    font-size: 14px;
}

.ksef--komplet {
    background: var(--sukces-tlo);
    border-color: color-mix(in srgb, var(--sukces-akcent) 35%, transparent);
}
.ksef--komplet .ksef__znak { color: var(--sukces); }

.ksef--braki {
    background: var(--ostrzezenie-tlo);
    border-color: color-mix(in srgb, var(--ostrzezenie-akcent) 40%, transparent);
}
.ksef--braki .ksef__znak { color: var(--ostrzezenie); }

.ksef--brak {
    background: var(--tlo);
    border-color: var(--linia);
    color: var(--tekst-drugi);
}
.ksef--brak .ksef__znak { color: var(--tekst-slaby); }

/* ── Wizytówka w stopce ────────────────────────────────────────────────── */

.stopka__prywatnosc {
    padding-top: 18px;
    border-top: 1px solid var(--linia);
    margin: 0 0 20px;
}

/*
 * Wizytówka gra rolę stopki firmowej: ma być zauważalna, ale nie może
 * konkurować z formularzem, po który ludzie tu przychodzą. Stąd pasek
 * akcentu zamiast wypełnienia kolorem i wyraźna, lecz spokojna ramka.
 */
.wizytowka {
    position: relative;
    padding: 20px 22px 20px 26px;
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    overflow: hidden;
}

.wizytowka::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--akcent);
}

/*
 * Znak i hasło stoją w jednej linii nad tekstem, nie w osobnej kolumnie obok.
 *
 * W układzie dwukolumnowym lewa strona kończyła się po dwóch elementach,
 * a prawa biegła jeszcze przez trzy akapity - blok czytał się jak
 * niedokończony. Poziomo obie części kończą się razem.
 */
.wizytowka__glowa {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linia-miekka);
}

.wizytowka__znak { display: block; flex: none; }
.wizytowka__znak .marka__jasny,
.wizytowka__znak .marka__ciemny { height: 28px; }

.wizytowka__haslo {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--marka);
    letter-spacing: -.1px;
}

.wizytowka__tresc {
    min-width: 0;
    font-size: 13px;
    line-height: 1.62;
    color: var(--tekst-drugi);
}

.wizytowka__tresc p { margin: 0 0 9px; }
.wizytowka__tresc p:last-child { margin-bottom: 0; }
.wizytowka__tresc strong { color: var(--tekst); font-weight: 700; }

.wizytowka__kontakt {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid var(--linia-miekka);
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12.5px;
}

.wizytowka__kontakt a {
    color: var(--akcent);
    text-decoration: none;
    font-weight: 600;
}

.wizytowka__kontakt a:hover { text-decoration: underline; }
.wizytowka__kontakt span { color: var(--tekst-slaby); }

.stopka {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px 40px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tekst-slaby);
}

@media (max-width: 560px) {
    .wizytowka { padding: 17px 17px 17px 20px; }
    .naglowek__nazwa { font-size: 22px; }
}

/* ── Kategorie dokumentów ──────────────────────────────────────────────── */

.kategorie {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: 9px;
}

.kategorie__glowa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kategorie__tytul {
    font-size: 13px;
    font-weight: 700;
    color: var(--tekst);
}

.kategorie__podpis {
    font-size: 12px;
    color: var(--tekst-slaby);
}

.kategorie__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.kategorie__lista li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 11px;
    background: var(--papier);
    border: 1px solid var(--linia);
    border-radius: 7px;
    font-size: 13px;
}

.kategorie__nazwa { font-weight: 600; color: var(--tekst); min-width: 0; }

.kategorie__ile {
    flex: none;
    font-size: 12px;
    color: var(--tekst-drugi);
    font-variant-numeric: tabular-nums;
}

.kategorie__wyjasnienie {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--tekst-drugi);
}

.kategorie__wyjasnienie em { font-style: normal; color: var(--tekst); }