@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonty/poppins-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonty/poppins-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonty/poppins-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonty/poppins-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonty/inter-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonty/inter-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonty/inter-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonty/inter-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+0304-0308, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
    --bg-color: #8553F9;
    --violet-light: #b39afc;
    --text-white: #FFFFFF;
    --text-gray: #999999;
    --gray-line: #333333;
    
    --success-green: #4ade80;
    --gray-300: #cccccc;
    --tlo-strony: #141414;
    --tlo-karty: #1A1A1A;

    
    --font-display:
        'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
        Arial, sans-serif;
    --font-body:
        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif;

    
    
    
    --fs-9: 0.5625rem;
    --fs-10: 0.625rem;      
    --fs-13: 0.8125rem;     
    --fs-14: 0.875rem;      
    --fs-15: 0.9375rem;     
    --fs-15-5: 0.96875rem;  
    --fs-16: 1rem;          
    --fs-17: 1.0625rem;     
    --fs-20: 1.25rem;       
    --fs-22: 1.375rem;      
    --fs-24: 1.5rem;        
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--tlo-strony);
    color: var(--text-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

header {
    background: var(--bg-color);
    padding: 16px 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

header a.logo {
    --brand-mark: 56px;
    --brand-text: 27px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-white);
    text-decoration: none;
}

header a.logo img,
header a.logo .brand-mark {
    height: var(--brand-mark);
    width: auto;
    display: block;
    flex: none;
}

header a.logo .brand-name {
    font-family: var(--font-display);
    font-size: var(--brand-text);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
}

header a.logo .brand-tekst {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

header a.logo .brand-beta {
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 100px;
    font-size: var(--fs-10);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--text-white);
    opacity: 0.75;
    white-space: nowrap;
    line-height: 1.4;
    pointer-events: none;
}

@media (max-width: 560px) {
    header a.logo {
        --brand-mark: 46px;
        --brand-text: 23px;
    }
    header a.logo .brand-beta {
        font-size: var(--fs-9);
        padding: 1px 6px;
    }
}

header a.app {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-14);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 100px;
    padding: 8px 18px;
    white-space: nowrap;
}

main { max-width: 820px; margin: 0 auto; padding: 56px 5vw 96px; }

h1,
h2,
h3 {
    font-family: var(--font-display);
}

h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; line-height: 1.15; margin-bottom: 8px; }
.updated { color: var(--text-gray); font-size: var(--fs-14); margin-bottom: 40px; }
h2 { font-size: var(--fs-22); margin: 36px 0 12px; letter-spacing: -.5px; }
h3 { font-size: var(--fs-17); margin: 24px 0 8px; }
p, li { color: var(--gray-300); font-size: var(--fs-15-5); }
p { margin-bottom: 12px; }
ul, ol { padding-left: 24px; margin-bottom: 12px; }

ol.punkty { padding-left: 26px; }
ol.punkty > li { margin-bottom: 10px; }
ol.punkty > li::marker { color: var(--text-gray); font-weight: 700; }
ol.punkty ul { margin-top: 6px; margin-bottom: 0; }
a { color: var(--violet-light); }

details {
    background: rgba(255, 255, 255, .03);
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 12px;
    transition: background .2s;
}
details[open] { background: rgba(255, 255, 255, .08); }
summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-white);
    font-size: var(--fs-15);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: '+';
    font-size: var(--fs-20);
    font-weight: 400;
    color: var(--text-gray);
    transition: transform .3s;
}
details[open] summary::after { content: '−'; transform: rotate(180deg); }

summary h2 { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }

details div { padding-top: 10px; }

footer {
    border-top: 1px solid var(--gray-line);
    padding: 24px 6vw;
    color: var(--text-gray);
    font-size: var(--fs-13);
    text-align: center;
}
footer a { color: var(--gray-300); text-decoration: none; margin: 0 8px; }

.blad {
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}
.blad-kod {
    font-size: clamp(64px, 14vw, 128px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    
    color: rgba(255, 255, 255, .12);
}
.blad h1 { margin: 0; }
.blad p { max-width: 46ch; margin: 8px 0 0; }
.blad-adres {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-14);
    color: var(--violet-light);
    background: var(--tlo-karty);
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-block;
    margin-top: 4px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.blad-wyjscia {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.blad-wyjscia a {
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-15);
    border-radius: 100px;
    padding: 12px 24px;
    border: 1px solid var(--gray-line);
    color: var(--text-white);
}
.blad-wyjscia a.glowne {
    background: var(--bg-color);
    border-color: var(--bg-color);
}

body {
    display: block;
    min-height: 100dvh;
    justify-content: initial;
    background: var(--tlo-strony);
}

.z-otoczka {
    max-width: 720px;
    margin: 0 auto;
}

.z-postep-0 {
    width: 0%;
}
.z-postep-10 {
    width: 10%;
}
.z-postep-20 {
    width: 20%;
}
.z-postep-30 {
    width: 30%;
}
.z-postep-40 {
    width: 40%;
}
.z-postep-50 {
    width: 50%;
}
.z-postep-60 {
    width: 60%;
}
.z-postep-70 {
    width: 70%;
}
.z-postep-80 {
    width: 80%;
}
.z-postep-90 {
    width: 90%;
}
.z-postep-100 {
    width: 100%;
}

.z-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.z-sekcja {
    display: none;
}
#z-tab-lista:checked ~ .task-details .z-sekcja--lista,
#z-tab-rozmowa:checked ~ .task-details .z-sekcja--rozmowa,
#z-tab-notatka:checked ~ .task-details .z-sekcja--notatka,
#z-tab-dziennik:checked ~ .task-details .z-sekcja--dziennik {
    display: block;
}

#z-tab-lista:checked ~ .task-details .tab-btn[for='z-tab-lista'],
#z-tab-rozmowa:checked ~ .task-details .tab-btn[for='z-tab-rozmowa'],
#z-tab-notatka:checked ~ .task-details .tab-btn[for='z-tab-notatka'],
#z-tab-dziennik:checked ~ .task-details .tab-btn[for='z-tab-dziennik'] {
    background: #1a1a1a;
    color: var(--detail-colour, #3ddc84);
    opacity: 1;
}

#z-tab-lista:checked ~ .task-details .tab-btn[for='z-tab-lista'] .tab-label,
#z-tab-rozmowa:checked ~ .task-details .tab-btn[for='z-tab-rozmowa'] .tab-label,
#z-tab-notatka:checked ~ .task-details .tab-btn[for='z-tab-notatka'] .tab-label,
#z-tab-dziennik:checked ~ .task-details .tab-btn[for='z-tab-dziennik'] .tab-label {
    display: inline-block;
}

#z-bez-zrobionych:checked ~ .checklist-item-row:has(.hidden-checkbox:checked) {
    display: none;
}

.checklist-zrobione[for] {
    cursor: pointer;
}

.z-gdy-ukryte {
    display: none;
}
#z-bez-zrobionych:checked ~ .checklist-pasek .z-gdy-widoczne {
    display: none;
}
#z-bez-zrobionych:checked ~ .checklist-pasek .z-gdy-ukryte {
    display: inline;
}

#z-bez-zrobionych:checked ~ .checklist-pasek .checklist-zrobione {
    background: var(--text-white);
    
    color: var(--tlo-karty);
}

.tab-btn[for] {
    cursor: pointer;
}

.z-pusto {
    margin: 0;
    padding: 18px 4px;
    font-size: var(--fs-14);
    opacity: 0.7;
}

.z-stopka {
    margin-top: 24px;
    font-size: var(--fs-13);
    opacity: 0.7;
    text-align: center;
}