@import url('../fonty/fonty.css');



:root {
    
    --tlo:            #0C1420;
    --tlo-glebia:     #080E17;
    --arkusz:         #131C2B;
    --arkusz-mocny:   #1A2536;
    --obrys:          #223148;
    --obrys-mocny:    #32465F;
    
    --obrys-pole:     #5E7391;

    
    --druk:           #E4EAF2;
    --druk-cichy:     #9DAEC5;
    --druk-slaby:     #718AA5;

    --marka:          #2B4362;
    --marka-jasna:    #3C5B82;

    
    --zloto:          #C7A45E;
    --zloto-cichy:    #9A7F49;
    --zloto-tlo:      #241E12;

    
    --oplacone:       #5AA37D;
    --oplacone-tlo:   #10231A;
    --zalega:         #D08843;
    --zalega-tlo:     #271A0F;
    --blad:           #D2685E;
    --blad-tlo:       #2A1414;
    
    --wygaszony:      #8095AC;

    
    --o1: 4px;   --o2: 8px;   --o3: 12px;  --o4: 16px;
    --o5: 24px;  --o6: 32px;  --o7: 48px;  --o8: 64px;

    
    --rog:      2px;
    --rog-pole: 3px;

    --tresc-szer: 1180px;

    --krzywa: cubic-bezier(0.16, 1, 0.3, 1);
}



*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--obrys-mocny) var(--tlo);
    scrollbar-width: thin;
}

body {
    margin: 0;
    background: var(--tlo);
    color: var(--druk);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


::selection { background: var(--marka); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tlo); }
::-webkit-scrollbar-thumb {
    background: var(--obrys-mocny);
    border: 2px solid var(--tlo);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--marka-jasna); }

:focus-visible {
    outline: 2px solid var(--zloto);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 var(--o3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--druk);
    text-decoration-color: var(--obrys-mocny);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.15s var(--krzywa);
}
a:hover { text-decoration-color: var(--zloto); }

hr {
    border: 0;
    border-top: 1px solid var(--obrys);
    margin: var(--o5) 0;
}


.ikona {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: -0.125em;
}



.kwota, .mono, td.kwota, .liczba {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.04em;
    font-size: 0.86em;
}

.kwota {
    color: var(--zloto);
    white-space: nowrap;
    font-weight: 500;
    
    text-transform: none;
}

.kwota--ujemna { color: var(--zalega); }
.kwota--zero   { color: var(--druk-slaby); }
.kwota--suma   { font-size: 1.05em; font-weight: 600; }


.kwota--duza {
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.95;
    
    word-spacing: -0.32em;
}



.wydruk {
    background: var(--arkusz);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    position: relative;
}


.wydruk__glowa {
    padding: var(--o3) var(--o5);
    min-height: 52px;
    border-bottom: 1px solid var(--obrys);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--o4);
    flex-wrap: wrap;
}

.wydruk__tytul {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--druk-cichy);
}

.wydruk__tresc { padding: var(--o5); }
.wydruk__tresc--ciasno { padding: var(--o3) var(--o5); }


.wydruk--odcinany::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -9px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0' fill='%23131C2B' stroke='%23223148' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 9px;
    background-repeat: repeat-x;
}


.perforacja {
    border: 0;
    border-top: 1px dashed var(--obrys-mocny);
    margin: var(--o4) 0;
}




.pozycja {
    display: flex;
    align-items: baseline;
    gap: var(--o2);
    padding: var(--o2) 0;
}

.pozycja__nazwa { min-width: 0; flex-shrink: 1; }
.pozycja > .numer { align-self: center; }

.pozycja__opis {
    display: block;
    font-size: 0.8125rem;
    color: var(--druk-slaby);
    margin-top: 2px;
}


.pozycja__wiodaca {
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--obrys-mocny);
    transform: translateY(-0.3em);
    min-width: var(--o5);
}

.pozycja--waga .pozycja__nazwa { font-weight: 600; }


.dyzur { padding: var(--o2) 0; }
.dyzur + .dyzur { border-top: 1px solid var(--obrys); }

.dyzur__okres {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--o2);
    font-size: 0.8125rem;
    color: var(--druk-cichy);
}


.dyzur__daty { white-space: nowrap; }

.dyzur__opis { color: var(--druk-slaby); }

.dyzur .pozycja { padding: var(--o1) 0 var(--o1) var(--o3); }

.dyzur--miniony .dyzur__okres,
.dyzur--miniony .pozycja { color: var(--wygaszony); }



.sumy {
    margin-top: var(--o4);
    padding-top: var(--o3);
    border-top: 1px solid var(--obrys-mocny);
}

.sumy__pozycja {
    display: flex;
    align-items: baseline;
    gap: var(--o2);
    padding: var(--o1) 0;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--druk-cichy);
}

.sumy__pozycja--saldo {
    margin-top: var(--o2);
    padding-top: var(--o3);
    border-top: 3px double var(--obrys-mocny);
    color: var(--druk);
    font-weight: 600;
}

.sumy__pozycja--saldo .kwota { font-size: 1.25em; }



.numer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 5px;
    border: 1px solid var(--obrys-pole);
    border-radius: var(--rog);
    background: var(--tlo-glebia);
    color: var(--druk-cichy);
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.numer--ja {
    border-color: var(--zloto-cichy);
    color: var(--zloto);
}


.numer--odszedl {
    border-color: var(--obrys);
    border-style: dashed;
    color: var(--wygaszony);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.numer--brak {
    border-style: dashed;
    color: var(--druk-slaby);
}

.numer--duzy { min-width: 42px; height: 38px; font-size: 1rem; }



.metryka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--o3) var(--o5);
}

.metryka__etykieta {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--druk-slaby);
    margin-bottom: 2px;
}

.metryka__wartosc { font-size: 0.9375rem; }



.tabela-owijka { overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tabela th {
    text-align: left;
    padding: var(--o2) var(--o3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--druk-slaby);
    border-bottom: 1px solid var(--obrys-mocny);
    white-space: nowrap;
}

.tabela td {
    padding: var(--o3);
    border-bottom: 1px dotted var(--obrys);
    vertical-align: baseline;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--arkusz-mocny); }

.tabela th.do-prawej, .tabela td.do-prawej { text-align: right; }
.tabela th.waska,     .tabela td.waska     { width: 1%; white-space: nowrap; }

.tabela tr.wygaszony td { color: var(--wygaszony); }
.tabela tr.wygaszony .kwota { color: var(--wygaszony); }



.stan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--o2);
    border: 1px solid;
    border-radius: var(--rog);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stan__ikona { width: 12px; height: 12px; flex-shrink: 0; }

.stan--oplacone  { color: var(--oplacone); border-color: color-mix(in srgb, var(--oplacone) 45%, transparent); background: var(--oplacone-tlo); }
.stan--zalega    { color: var(--zalega);   border-color: color-mix(in srgb, var(--zalega) 45%, transparent);   background: var(--zalega-tlo); border-style: dashed; }
.stan--czesciowo { color: var(--zloto);    border-color: color-mix(in srgb, var(--zloto) 45%, transparent);    background: var(--zloto-tlo); }
.stan--odszedl   { color: var(--wygaszony); border-color: var(--obrys); border-style: dashed; }
.stan--zamkniete { color: var(--druk-slaby); border-color: var(--obrys); }



.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--o2);
    padding: 9px var(--o4);
    border: 1px solid var(--obrys-pole);
    border-radius: var(--rog-pole);
    background: var(--arkusz-mocny);
    color: var(--druk);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s var(--krzywa), border-color 0.15s var(--krzywa);
}

.przycisk:hover { background: var(--marka); border-color: var(--marka-jasna); }
.przycisk:active { transform: translateY(1px); }

.przycisk[disabled], .przycisk[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.przycisk--glowny {
    background: var(--marka);
    border-color: var(--marka-jasna);
}
.przycisk--glowny:hover { background: var(--marka-jasna); border-color: #4A6E9B; }

.przycisk--cichy {
    background: transparent;
    border-color: transparent;
    color: var(--druk-cichy);
    padding-inline: var(--o2);
}
.przycisk--cichy:hover { background: var(--arkusz-mocny); color: var(--druk); }

.przycisk--groznny, .przycisk--usun {
    color: var(--blad);
    border-color: color-mix(in srgb, var(--blad) 40%, transparent);
    background: transparent;
}
.przycisk--usun:hover { background: var(--blad-tlo); border-color: var(--blad); }

.przycisk--maly { padding: 5px var(--o3); font-size: 0.8125rem; }
.przycisk--szeroki { width: 100%; }

.przycisk__ikona { width: 17px; height: 17px; flex-shrink: 0; }



.pole { margin-bottom: var(--o4); }

.pole__etykieta {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--druk-cichy);
}

.pole__wymagane { color: var(--zloto); }

.pole__podpowiedz {
    margin-top: 5px;
    font-size: 0.8125rem;
    color: var(--druk-slaby);
}


.pole--niedziala { opacity: 0.45; }

.pole__blad {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
    font-size: 0.8125rem;
    color: var(--blad);
}

input[type='text'], input[type='password'], input[type='number'],
input[type='date'], input[type='time'], input[type='search'],
input[type='email'], textarea, select {
    width: 100%;
    padding: 9px var(--o3);
    border: 1px solid var(--obrys-pole);
    border-radius: var(--rog-pole);
    background: var(--tlo-glebia);
    color: var(--druk);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.15s var(--krzywa);
}

input:hover, textarea:hover, select:hover { border-color: var(--marka-jasna); }
input:focus, textarea:focus, select:focus { border-color: var(--zloto); }


input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

input::placeholder, textarea::placeholder { color: var(--druk-slaby); }

input[aria-invalid='true'] { border-color: var(--blad); }

textarea { resize: vertical; min-height: 100px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239DAEC5'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80A8 8 0 0148 88h160a8 8 0 015.66 13.66z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    padding-right: var(--o6);
}


input.wpis-kwota, input.wpis-mono {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}


input.wpis-pin {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
    padding-left: 0.5em;
}

.wybor {
    display: flex;
    align-items: flex-start;
    gap: var(--o2);
    padding: 6px 0;
    cursor: pointer;
}

.wybor input[type='checkbox'], .wybor input[type='radio'] {
    width: 17px;
    height: 17px;
    margin: 3px 0 0;
    accent-color: var(--marka-jasna);
    flex-shrink: 0;
}


.lista-wyboru {
    max-height: 260px;
    overflow-y: auto;
    padding-right: var(--o2);
    border-block: 1px solid var(--obrys);
}



.komunikat {
    display: flex;
    align-items: flex-start;
    gap: var(--o3);
    padding: var(--o3) var(--o4);
    border: 1px solid var(--obrys-mocny);
    border-radius: var(--rog);
    background: var(--arkusz);
    margin-bottom: var(--o4);
    font-size: 0.9375rem;
}

.komunikat__ikona { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.komunikat__tresc { flex: 1; min-width: 0; }

.komunikat--sukces     { border-color: color-mix(in srgb, var(--oplacone) 45%, transparent); background: var(--oplacone-tlo); }
.komunikat--sukces .komunikat__ikona { color: var(--oplacone); }
.komunikat--ostrzezenie { border-color: color-mix(in srgb, var(--zalega) 45%, transparent);  background: var(--zalega-tlo); }
.komunikat--ostrzezenie .komunikat__ikona { color: var(--zalega); }
.komunikat--blad       { border-color: color-mix(in srgb, var(--blad) 50%, transparent);     background: var(--blad-tlo); }
.komunikat--blad .komunikat__ikona { color: var(--blad); }
.komunikat--info .komunikat__ikona { color: var(--druk-cichy); }



.pusto {
    padding: var(--o7) var(--o5);
    text-align: center;
    color: var(--druk-slaby);
}

.pusto__ikona { width: 34px; height: 34px; color: var(--obrys-mocny); margin-bottom: var(--o3); }
.pusto__tytul { color: var(--druk-cichy); font-weight: 600; margin-bottom: var(--o1); }
.pusto p { margin-inline: auto; }



.szkielet {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.gorny-pas {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--tlo) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--obrys);
}


.gorny-pas__srodek {
    max-width: var(--tresc-szer);
    margin-inline: auto;
    padding: var(--o3) var(--o5);
    display: flex;
    align-items: center;
    gap: var(--o4);
    flex-wrap: wrap;
}

.nawigacja {
    order: 3;
    width: 100%;
}

.znak {
    display: flex;
    align-items: center;
    gap: var(--o2);
    text-decoration: none;
    flex-shrink: 0;
}

.znak__nazwa {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.znak__rok {
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--druk-slaby);
    padding: 1px var(--o2);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    letter-spacing: -0.02em;
}



.nawigacja {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: var(--o1);
    padding-top: var(--o1);
    border-top: 1px solid var(--obrys);
}
.nawigacja::-webkit-scrollbar { display: none; }

.pas-konto {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.pas-konto__wyjscie { display: flex; }

.pas-konto button.nawigacja__pozycja {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 720px) {
    .pas-konto__osoba span { display: none; }
}


.nawigacja__pozycja {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: var(--rog);
    color: var(--druk-cichy);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s var(--krzywa), background 0.15s var(--krzywa);
}

.nawigacja__pozycja:hover { color: var(--druk); background: var(--arkusz); }

.nawigacja__pozycja[aria-current='page'] {
    color: var(--druk);
    background: var(--arkusz-mocny);
    box-shadow: inset 0 -2px 0 var(--zloto-cichy);
}

.nawigacja__ikona { width: 17px; height: 17px; }

.tresc {
    flex: 1;
    max-width: var(--tresc-szer);
    width: 100%;
    margin-inline: auto;
    padding: var(--o6) var(--o5) var(--o8);
}

.stopka {
    border-top: 1px solid var(--obrys);
    padding: var(--o4) var(--o5);
    color: var(--druk-slaby);
    font-size: 0.8125rem;
}

.stopka__srodek {
    max-width: var(--tresc-szer);
    margin-inline: auto;
    display: flex;
    gap: var(--o4);
    flex-wrap: wrap;
    justify-content: space-between;
}



.naglowek {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--o4);
    flex-wrap: wrap;
    margin-bottom: var(--o5);
}

.naglowek__opis {
    margin-top: var(--o1);
    color: var(--druk-cichy);
    font-size: 0.9375rem;
}

.naglowek__akcje { display: flex; gap: var(--o2); flex-wrap: wrap; }



.siatka { display: grid; gap: var(--o4); }
.siatka--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.siatka--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.siatka--glowna { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

@media (max-width: 900px) {
    .siatka--glowna { grid-template-columns: 1fr; }
}



.postep {
    display: flex;
    gap: 2px;
    height: 6px;
    margin: var(--o2) 0;
}

.postep__segment {
    flex: 1;
    background: var(--obrys);
    border-radius: 1px;
}

.postep__segment--pelny { background: var(--oplacone); }
.postep__segment--czesc { background: var(--zloto-cichy); }

.postep__opis {
    font-size: 0.8125rem;
    color: var(--druk-cichy);
}



.goly {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--o7) var(--o4);
    background: var(--tlo-glebia);
}

.goly__srodek { width: 100%; max-width: 348px; }


.wejscie {
    background: var(--arkusz);
    border-inline: 1px solid var(--obrys);
    padding: var(--o6) var(--o5) var(--o5);
    position: relative;
}

.wejscie::before,
.wejscie::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    height: 9px;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9 9 L18 0' fill='%23131C2B' stroke='%23223148' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 9px;
    background-repeat: repeat-x;
}

.wejscie::after { bottom: -9px; }

.wejscie::before {
    top: -9px;
    transform: scaleY(-1);
}

.wejscie__znak {
    display: block;
    margin: 0 auto var(--o5);
}


.wejscie__linia {
    border: 0;
    border-top: 1px dashed var(--obrys-mocny);
    margin: 0 0 var(--o5);
}

.wejscie__formularz .pole:last-of-type { margin-bottom: var(--o5); }


.wejscie .pole__etykieta {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--druk-slaby);
}


.goly__srodek--szeroki { max-width: 480px; }

.blad-strona { text-align: center; }

.blad-strona__kod {
    margin: 0 0 var(--o5);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    color: var(--zloto);
}

.blad-strona__tytul { font-size: 1.125rem; }
.blad-strona__opis  { margin: var(--o2) auto 0; }
.blad-strona__akcja { margin: var(--o5) 0 0; }

.blad-strona__slad {
    margin: var(--o5) 0 0;
    padding: var(--o3);
    background: var(--tlo-glebia);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    overflow: auto;
    max-height: 320px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--zalega);
    white-space: pre-wrap;
    text-align: left;
}

.wejscie__blog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--o5);
    padding-top: var(--o4);
    border-top: 1px dashed var(--obrys);
    color: var(--druk-cichy);
    font-size: 0.875rem;
    text-decoration: none;
}

.wejscie__blog:hover { color: var(--druk); }
.wejscie__blog .ikona { width: 15px; height: 15px; color: var(--zloto-cichy); }

.wejscie__powrot {
    margin: var(--o5) 0 0;
    padding-top: var(--o4);
    border-top: 1px dashed var(--obrys);
    text-align: center;
    font-size: 0.875rem;
    color: var(--druk-cichy);
}



.pulpit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--o4);
    align-items: start;
}

.pulpit__widget--szeroki { grid-column: span 2; }

@media (max-width: 860px) {
    .pulpit { grid-template-columns: 1fr; }
    .pulpit__widget--szeroki { grid-column: span 1; }
}



.saldo-blok {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.saldo-glowne { margin: 0; }


.saldo-podpis { margin: 0 0 var(--o2); }


.saldo-podpis--pod { margin: var(--o3) 0 0; }


.arkusz-salda {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(320px, 1fr);
    gap: var(--o5) var(--o8);
    align-items: center;
}

.arkusz-salda .sumy {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

@media (max-width: 860px) {
    .arkusz-salda {
        grid-template-columns: 1fr;
        gap: var(--o4);
    }

    .arkusz-salda .sumy {
        border-top: 1px solid var(--obrys-mocny);
        padding-top: var(--o3);
    }
}

.termin-blisko { color: var(--zalega); font-weight: 600; }

.ogloszenie { padding: var(--o2) 0; }
.ogloszenie + .ogloszenie { border-top: 1px dotted var(--obrys); }
.ogloszenie__tytul { font-size: 0.9375rem; margin-bottom: 2px; }
.ogloszenie__tytul .ikona { color: var(--zloto-cichy); width: 15px; height: 15px; }

.uklad-pulpitu { margin-bottom: var(--o4); }
.uklad-pulpitu[hidden] { display: none; }



.filtry {
    display: flex;
    gap: var(--o2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtry__pole { flex: 1 1 220px; }
.filtry__pole--waskie { flex: 0 1 190px; }


.filtry__przelacznik { display: none; }

.filtry__znacznik {
    padding: 0 5px;
    border: 1px solid var(--zloto-cichy);
    border-radius: var(--rog);
    color: var(--zloto);
    font-size: 0.6875rem;
}




.wyciag-glowa {
    padding-bottom: var(--o4);
    margin-bottom: var(--o2);
    border-bottom: 1px solid var(--obrys-mocny);
}

.wyciag-naglowki {
    display: grid;
    grid-template-columns: 88px 1fr 128px 128px;
    gap: var(--o2);
    padding: var(--o2) 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--druk-slaby);
    border-bottom: 1px solid var(--obrys);
}

.okres {
    display: flex;
    align-items: center;
    gap: var(--o3);
    margin: var(--o4) 0 var(--o1);
}

.okres:first-of-type { margin-top: var(--o2); }

.okres__nazwa {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--druk-slaby);
    white-space: nowrap;
}

.okres__linia {
    flex: 1;
    border-top: 1px solid var(--obrys);
}


.pozycja--z-saldem {
    display: grid;
    grid-template-columns: 88px minmax(0, auto) 1fr 128px 128px;
    align-items: baseline;
}

.pozycja--z-saldem .kwota { text-align: right; }

.kwota--saldo-po {
    color: var(--druk-cichy);
    font-weight: 400;
}

.pozycja__data {
    color: var(--druk-slaby);
    font-size: 0.75rem;
    white-space: nowrap;
}

.pozycja__rachunek {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: var(--o2);
    color: var(--zloto-cichy);
}
.pozycja__rachunek .ikona { width: 13px; height: 13px; }

.pozycja__akcja { margin-left: var(--o2); }

.pozycja--wygaszona { color: var(--wygaszony); }
.pozycja--wygaszona a { color: var(--wygaszony); }

.kolumna--luzno { gap: var(--o4); }


.wydruk--klikalny { position: relative; }
.wydruk--klikalny:hover { border-color: var(--obrys-mocny); }
.wydruk--klikalny:has(.skladka__odnosnik:focus-visible) { outline: 2px solid var(--zloto); outline-offset: 2px; }

.skladka__tytul { font-size: 1.0625rem; }

.skladka__odnosnik {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.skladka__odnosnik::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.skladka__odnosnik:focus-visible { outline: none; }

.skladka__strzalka {
    width: 16px;
    height: 16px;
    color: var(--druk-slaby);
    transition: transform 0.15s var(--krzywa), color 0.15s var(--krzywa);
}

.wydruk--klikalny:hover .skladka__strzalka { color: var(--zloto); transform: translateX(3px); }
.wydruk--klikalny:hover .skladka__odnosnik { text-decoration: underline; text-decoration-color: var(--zloto); }

.skladka__akcje {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--o2);
    flex-wrap: wrap;
    margin-top: var(--o4);
    padding-top: var(--o3);
    border-top: 1px dashed var(--obrys);
}


.niedostepna { text-align: center; padding: var(--o3) 0; }
.niedostepna__ikona { width: 34px; height: 34px; color: var(--zloto-cichy); margin-bottom: var(--o3); }
.niedostepna__tytul { font-size: 1.0625rem; margin-bottom: var(--o2); }
.niedostepna p { margin-inline: auto; }


.lista-widgetow { list-style: none; margin: 0; padding: 0; }

.widget-wpis {
    display: flex;
    align-items: center;
    gap: var(--o2);
    padding: var(--o1) 0;
}

.widget-wpis + .widget-wpis { border-top: 1px dotted var(--obrys); }
.widget-wpis__wybor { flex: 1; margin: 0; }
.widget-wpis__strzalki { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.widget-wpis__strzalki .przycisk { padding: 2px var(--o2); }


.wplata-formularz {
    padding: var(--o3);
    margin: 0 0 var(--o2);
    background: var(--tlo-glebia);
    border: 1px dashed var(--obrys-mocny);
    border-radius: var(--rog);
}
.wplata-formularz[hidden] { display: none; }

.wplata-formularz__pola {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--o3);
    align-items: end;
}
.wplata-formularz__pola .pole { margin-bottom: 0; }

.wybor--osoba { align-items: center; gap: var(--o3); }
.wybor--osoba input { margin-top: 0; }

.pole--zestaw { border: 0; padding: 0; margin-inline: 0; }
.pole--zestaw legend { padding: 0; }



.rachunki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--o3);
}

.rachunek { margin: 0; }

.rachunek img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--obrys-mocny);
    border-radius: var(--rog);
    background: var(--tlo-glebia);
}

.rachunek a:hover img { border-color: var(--zloto-cichy); }
.rachunek form { margin-top: var(--o1); }

input[type='file'] {
    width: 100%;
    padding: var(--o2);
    border: 1px dashed var(--obrys-pole);
    border-radius: var(--rog-pole);
    background: var(--tlo-glebia);
    color: var(--druk-cichy);
    font-family: inherit;
    font-size: 0.8125rem;
}

input[type='file']::file-selector-button {
    margin-right: var(--o3);
    padding: 5px var(--o3);
    border: 1px solid var(--obrys-pole);
    border-radius: var(--rog);
    background: var(--arkusz-mocny);
    color: var(--druk);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}



.kroki {
    margin: 0 0 var(--o4);
    padding-left: var(--o5);
    color: var(--druk-cichy);
    font-size: 0.9375rem;
}

.kroki li { padding: 3px 0; }
.kroki li::marker { color: var(--zloto-cichy); font-variant-numeric: tabular-nums; }

.eksport-dane {
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
}



.kalendarz {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--obrys);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    overflow: hidden;
}

.kalendarz__naglowek {
    background: var(--arkusz-mocny);
    padding: var(--o2);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--druk-slaby);
}

.kalendarz__dzien {
    background: var(--arkusz);
    min-height: 84px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kalendarz__dzien--puste { background: var(--tlo-glebia); }

.kalendarz__dzien--dzis {
    background: var(--arkusz-mocny);
    box-shadow: inset 0 0 0 1px var(--zloto-cichy);
}

.kalendarz__numer {
    font-size: 0.75rem;
    color: var(--druk-slaby);
    font-variant-numeric: tabular-nums;
}

.kalendarz__dzien--dzis .kalendarz__numer { color: var(--zloto); font-weight: 600; }

.kalendarz__wpis {
    display: block;
    padding: 2px 5px;
    border-radius: 2px;
    background: var(--marka);
    color: var(--druk);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kalendarz__wpis--termin {
    background: var(--zloto-tlo);
    box-shadow: inset 0 0 0 1px var(--zloto-cichy);
}

.kalendarz__wpis .kwota { display: block; font-size: 0.9em; }

@media (max-width: 700px) {
    .kalendarz__dzien { min-height: 58px; padding: 3px; }
    .kalendarz__wpis { font-size: 0.625rem; }
}



.pytanie-tresc { font-size: 1rem; font-weight: 600; margin-bottom: var(--o3); }
.pytanie-blok + .pytanie-blok { margin-top: var(--o5); padding-top: var(--o5); border-top: 1px dashed var(--obrys); }
.opcja-wpis + .opcja-wpis { margin-top: var(--o2); }

.wynik + .wynik { margin-top: var(--o3); }

.wynik__pasek {
    height: 8px;
    margin-top: 5px;
    background: var(--tlo-glebia);
    border: 1px solid var(--obrys);
    border-radius: 2px;
    overflow: hidden;
}


.wynik__wypelnienie {
    height: 100%;
    width: 100%;
    background: var(--marka-jasna);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--krzywa);
}

.odpowiedz-tekst {
    margin: 0 0 var(--o3);
    padding: var(--o3);
    background: var(--tlo-glebia);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    font-size: 0.9375rem;
}

.odpowiedz-tekst cite {
    display: block;
    margin-top: var(--o2);
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--druk-slaby);
}



.notatka-tresc { font-size: 0.9375rem; color: var(--druk-cichy); }
.notatka-tresc h3, .notatka-tresc h4 { margin: var(--o3) 0 var(--o1); color: var(--druk); }
.notatka-tresc ul, .notatka-tresc ol { margin: var(--o2) 0; padding-left: var(--o5); }
.notatka-tresc p { margin: 0 0 var(--o2); }
.notatka-tresc blockquote {
    margin: var(--o2) 0;
    padding-left: var(--o3);
    border-left: 1px solid var(--obrys-mocny);
    color: var(--druk-slaby);
}

.notatka-wpis + .notatka-wpis { margin-top: var(--o3); padding-top: var(--o3); border-top: 1px dotted var(--obrys); }

.edytor-pasek { display: flex; gap: 2px; }

.edytor {
    min-height: 180px;
    padding: var(--o3);
    border: 1px solid var(--obrys-pole);
    border-radius: var(--rog-pole);
    background: var(--tlo-glebia);
    color: var(--druk);
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-y: auto;
    max-height: 460px;
}

.edytor:focus { border-color: var(--zloto); }
.edytor:focus:not(:focus-visible) { outline: none; }
.edytor h3 { font-size: 1.0625rem; margin: var(--o3) 0 var(--o1); }
.edytor ul, .edytor ol { padding-left: var(--o5); }



.etykieta-roli {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: var(--o2);
    padding: 0 5px;
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    font-size: 0.6875rem;
    color: var(--druk-slaby);
}
.etykieta-roli .ikona { width: 11px; height: 11px; }

.kod-rejestracji { font-size: 1rem; letter-spacing: 0.04em; color: var(--zloto); }

.kody-zapasowe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--o2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kody-zapasowe li {
    padding: var(--o2) var(--o3);
    background: var(--tlo-glebia);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.qr-ramka {
    display: flex;
    justify-content: center;
    padding: var(--o4);
    background: #fff;
    border-radius: var(--rog);
    margin: var(--o4) 0;
}

.qr-sekret {
    padding: var(--o2) var(--o3);
    background: var(--tlo-glebia);
    border: 1px solid var(--obrys);
    border-radius: var(--rog);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    word-break: break-all;
}

.strony { display: flex; align-items: center; justify-content: center; gap: var(--o4); }




.nawigacja__ikona,
.przycisk__ikona {
    color: var(--druk);
}

.przycisk--cichy .przycisk__ikona { color: inherit; }
.nawigacja__pozycja:hover .nawigacja__ikona { color: var(--druk); }


.arkusz-ikon { display: none; }



.tylko-dla-czytnika {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cicho     { color: var(--druk-cichy); }
.slabo     { color: var(--druk-slaby); }
.male      { font-size: 0.8125rem; }
.wersaliki { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.do-prawej { text-align: right; }
.rozciag   { display: flex; align-items: center; justify-content: space-between; gap: var(--o3); }
.rzad      { display: flex; align-items: center; gap: var(--o2); flex-wrap: wrap; }
.kolumna   { display: flex; flex-direction: column; gap: var(--o2); }

.odstep-1 { margin-top: var(--o1); }
.odstep-2 { margin-top: var(--o2); }
.odstep-3 { margin-top: var(--o3); }
.odstep-4 { margin-top: var(--o4); }
.odstep-5 { margin-top: var(--o5); }
.odstep-6 { margin-top: var(--o6); }




@keyframes wysuw {
    from { clip-path: inset(-14px -4px 100% -4px); opacity: 0.4; }
    to   { clip-path: inset(-14px -4px -14px -4px); opacity: 1; }
}

.wysuwa {
    animation: wysuw 0.5s var(--krzywa) both;
}

.wysuwa--2 { animation-delay: 0.07s; }
.wysuwa--3 { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



@media (max-width: 700px) {
    body { font-size: 15px; }

    .tresc { padding: var(--o4) var(--o3) var(--o7); }
    .gorny-pas__srodek { padding: var(--o2) var(--o3); flex-wrap: wrap; }
    .wydruk__tresc { padding: var(--o4) var(--o3); }
    .wydruk__glowa { padding: var(--o3); }

    
    .nawigacja {
        width: 100%;
        margin-left: 0;
        order: 3;
        padding-bottom: var(--o1);
        gap: var(--o1);
        
        flex-wrap: nowrap;
        overflow-x: auto;
        mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    }

    .nawigacja__pozycja {
        flex-direction: column;
        gap: 3px;
        min-width: 60px;
        min-height: 48px;
        padding: 6px var(--o2);
        justify-content: center;
        font-size: 0.6875rem;
        line-height: 1.1;
        text-align: center;
    }

    .nawigacja__ikona { width: 19px; height: 19px; }

    .pas-konto {
        margin-left: auto;
        padding-left: var(--o2);
    }

    .pas-konto .nawigacja__pozycja { min-width: 44px; min-height: 44px; }

    
    .naglowek { margin-bottom: var(--o4); }
}


@media (max-width: 560px) {
    .pozycja--kasa {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            'data  .     kwota'
            'nazwa nazwa nazwa';
        row-gap: 2px;
    }

    .pozycja--kasa .pozycja__data     { grid-area: data; }
    .pozycja--kasa .pozycja__nazwa    { grid-area: nazwa; }
    .pozycja--kasa .kwota             { grid-area: kwota; }
    .pozycja--kasa .pozycja__wiodaca  { display: none; }

    
    .pozycja--z-saldem {
        grid-template-areas:
            'data  .     kwota'
            'nazwa nazwa saldo';
    }
    .pozycja--z-saldem .kwota--saldo-po {
        grid-area: saldo;
        align-self: end;
        font-size: 0.75rem;
    }
    .wyciag-naglowki { display: none; }
    .wyciag-glowa { grid-template-columns: 1fr 1fr; }

    
    .pozycja { flex-wrap: wrap; }
    .pozycja .pozycja__nazwa { flex: 1 1 60%; }
    .pozycja__wiodaca { min-width: var(--o3); }

    .filtry__pole, .filtry__pole--waskie { flex: 1 1 100%; }

    
    .filtry__przelacznik { display: inline-flex; margin-bottom: var(--o3); }
    .filtry[data-chowane] { display: none; }

    .metryka { grid-template-columns: 1fr 1fr; }

    
    .metryka__pole--powtorzone { display: none; }
    .metryka__pole--okres { grid-column: 1 / -1; }

    
    .naglowek__akcje .przycisk--maly { padding: 5px var(--o3); }
    .naglowek { align-items: flex-start; }
}

@media print {
    .gorny-pas, .stopka, .naglowek__akcje, .przycisk { display: none; }
    body { background: #fff; color: #000; }
    .wydruk { border-color: #999; }
}