:root {
    --fimson-tlo: #0b0b0f;
    --fimson-tlo-glebokie: #01000c;
    --fimson-tlo-karta: #1b1b25;
    --fimson-tlo-karta-hover: #24242f;
    --fimson-tlo-wglebienie: #17171f;
    --fimson-obramowanie: #32324a;
    --fimson-obramowanie-jasne: #4a4a68;
    --fimson-akcent: #e8b000;
    --fimson-akcent-ciemny: #3a2c00;
    --fimson-akcent-poswiata: rgba(232, 176, 0, 0.10);
    --fimson-zielony: #22c55e;
    --fimson-zielony-tlo: rgba(34, 197, 94, 0.12);
    --fimson-czerwony: #ef4444;
    --fimson-czerwony-tlo: rgba(239, 68, 68, 0.12);
    --fimson-tekst: #f0f0f5;
    --fimson-tekst-drugi: #8b8b9e;
    --fimson-naglowek-tekst: #d6d6e4;
    --fimson-tekst-trzeci: #4a4a62;
    --fimson-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fimson-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.fimson-naglowek,
.fimson-naglowek *,
.fimson-pasek-goscia,
.fimson-pasek-goscia * { box-sizing: border-box; }

.fimson-naglowek {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 11, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--fimson-obramowanie);
    font-family: var(--fimson-font);
}

.fimson-menu-przelacznik,
.fimson-menu-burger { display: none; }

.fimson-naglowek-tresc {
    width: 100%;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    height: 58px;
}

.fimson-naglowek-lewa {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fimson-naglowek-srodek {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fimson-naglowek-prawa {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

.fimson-marka {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--fimson-tekst);
    text-decoration: none;
    white-space: nowrap;
}

.fimson-kropka { color: var(--fimson-akcent); }

.fimson-aplikacja {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fimson-naglowek-tekst);
    border-left: 1px solid var(--fimson-obramowanie);
    border-right: 1px solid var(--fimson-obramowanie);
    padding: 0 14px;
    margin-right: 4px;
    white-space: nowrap;
    cursor: default;
}

.fimson-aplikacja:empty { display: none; }

.fimson-nawigacja {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 10px;
}

.fimson-nawigacja:empty { display: none; }

.fimson-naglowek a,
.fimson-menu-etykieta {
    font-size: 14px;
    line-height: 1;
    color: var(--fimson-naglowek-tekst);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.fimson-naglowek a:hover,
.fimson-menu-pozycja:hover .fimson-menu-etykieta { color: var(--fimson-tekst); }

.fimson-naglowek a.active { color: var(--fimson-tekst); }

.fimson-menu-pozycja {
    position: relative;
    width: 118px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fimson-menu-etykieta {
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.fimson-menu-etykieta::after {
    content: "▾";
    font-size: 10px;
    line-height: 1;
    opacity: 0.7;
}

.fimson-menu-lista {
    position: absolute;
    top: 54px;
    left: 50%;
    min-width: 208px;
    padding: 8px;
    background: linear-gradient(170deg, #20202c 0%, #15151e 100%);
    border: 1px solid var(--fimson-obramowanie);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 176, 0, 0.06);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px) scale(0.97);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.fimson-menu-lista::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -6px;
    background: #20202c;
    border-left: 1px solid var(--fimson-obramowanie);
    border-top: 1px solid var(--fimson-obramowanie);
    border-radius: 2px 0 0 0;
    transform: rotate(45deg);
}

.fimson-menu-pozycja:hover .fimson-menu-lista,
.fimson-menu-pozycja:focus-within .fimson-menu-lista {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.fimson-menu-lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.fimson-menu-lista a::after {
    content: "→";
    font-size: 13px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.fimson-menu-lista a:hover {
    background: linear-gradient(90deg, rgba(232, 176, 0, 0.14), rgba(232, 176, 0, 0.04));
    border-color: rgba(232, 176, 0, 0.28);
    color: var(--fimson-tekst);
}

.fimson-menu-lista a:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--fimson-akcent);
}

.fimson-uzytkownik {
    font-size: 14px;
    line-height: 1;
    color: var(--fimson-tekst);
    white-space: nowrap;
}

.fimson-link-admin { color: var(--fimson-akcent) !important; }
.fimson-link-admin:hover { opacity: 0.85; }

html:not([data-gosc="tak"]) .tylko-gosc,
html[data-gosc="tak"] .bez-goscia { display: none; }

.fimson-pasek-goscia {
    background: var(--fimson-akcent-poswiata);
    border-bottom: 1px solid var(--fimson-akcent-ciemny);
    color: var(--fimson-tekst-drugi);
    font-family: var(--fimson-font);
    font-size: 0.85rem;
    padding: 9px 28px;
    text-align: center;
}

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

.fimson-pasek-goscia a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .fimson-naglowek-tresc {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "marka burger"
            "aplikacja aplikacja"
            "nawigacja nawigacja"
            "srodek srodek"
            "prawa prawa";
        height: auto;
        padding: 0 16px;
        gap: 0;
        align-items: center;
    }

    .fimson-naglowek-lewa { display: contents; }

    .fimson-marka {
        grid-area: marka;
        padding: 15px 0;
        font-size: 19px;
    }

    .fimson-aplikacja {
        grid-area: aplikacja;
        display: none;
        margin: 0;
        padding: 12px 2px 2px;
        border: 0;
        border-top: 1px solid var(--fimson-obramowanie);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--fimson-tekst-trzeci);
    }

    .fimson-menu-przelacznik:checked ~ .fimson-naglowek-lewa:has(.fimson-nawigacja:not(:empty)) .fimson-aplikacja { display: block; }

    .fimson-menu-burger {
        grid-area: burger;
        justify-self: end;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 11px;
        cursor: pointer;
    }

    .fimson-menu-burger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--fimson-naglowek-tekst);
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .fimson-menu-przelacznik:checked ~ .fimson-menu-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .fimson-menu-przelacznik:checked ~ .fimson-menu-burger span:nth-child(2) { opacity: 0; }
    .fimson-menu-przelacznik:checked ~ .fimson-menu-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .fimson-nawigacja,
    .fimson-naglowek-srodek,
    .fimson-naglowek-prawa { display: none; }

    .fimson-menu-przelacznik:checked ~ .fimson-naglowek-lewa .fimson-nawigacja:not(:empty),
    .fimson-menu-przelacznik:checked ~ .fimson-naglowek-srodek,
    .fimson-menu-przelacznik:checked ~ .fimson-naglowek-prawa { display: flex; }

    .fimson-nawigacja {
        grid-area: nawigacja;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 2px 0 4px;
    }

    .fimson-naglowek-lewa:not(:has(.fimson-aplikacja:not(:empty))) .fimson-nawigacja { border-top: 1px solid var(--fimson-obramowanie); }

    .fimson-nawigacja > a { padding: 11px 2px; }

    .fimson-nawigacja > button {
        align-self: flex-start;
        margin: 6px 0 10px;
    }

    .fimson-naglowek-srodek {
        grid-area: srodek;
        flex-direction: column;
        align-items: stretch;
        padding: 4px 0 8px;
        border-top: 1px solid var(--fimson-obramowanie);
    }

    .fimson-naglowek-prawa {
        grid-area: prawa;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 12px 0 14px;
        border-top: 1px solid var(--fimson-obramowanie);
    }

    .fimson-menu-pozycja {
        display: block;
        width: auto;
        height: auto;
    }

    .fimson-menu-pozycja:not(:has(.fimson-menu-etykieta)) { display: none; }

    .fimson-menu-etykieta {
        display: block;
        padding: 12px 2px 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--fimson-tekst-trzeci);
    }

    .fimson-menu-etykieta::after { content: none; }

    .fimson-menu-lista {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .fimson-menu-lista::before { content: none; }

    .fimson-menu-lista a {
        padding: 11px 2px;
        font-size: 15px;
    }
}

h1:focus,
[tabindex="-1"]:focus { outline: none; }

@view-transition { navigation: auto; }

a.fimson-uzytkownik {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

a.fimson-uzytkownik:hover { color: var(--fimson-akcent); }

.fimson-awatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    background: rgba(255, 255, 255, 0.08);
}

.fimson-polaczenie,
.fimson-polaczenie * { box-sizing: border-box; }

.fimson-polaczenie p,
.fimson-polaczenie button,
.fimson-polaczenie-animacja { display: none; }

.fimson-polaczenie.components-reconnect-show .components-reconnect-first-attempt-visible,
.fimson-polaczenie.components-reconnect-show .fimson-polaczenie-animacja,
.fimson-polaczenie.components-reconnect-paused .components-pause-visible,
.fimson-polaczenie.components-reconnect-resume-failed .components-resume-failed-visible,
.fimson-polaczenie.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
.fimson-polaczenie.components-reconnect-retrying .fimson-polaczenie-animacja,
.fimson-polaczenie.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

.fimson-polaczenie {
    width: min(340px, calc(100vw - 32px));
    margin: 20vh auto;
    padding: 28px 24px;
    border: 1px solid var(--fimson-obramowanie);
    border-radius: 14px;
    background: var(--fimson-tlo-karta);
    color: var(--fimson-tekst);
    font-family: var(--fimson-font);
    font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.fimson-polaczenie::backdrop { background: rgba(11, 11, 15, 0.55); }

.fimson-polaczenie-tresc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.fimson-polaczenie p { margin: 0; color: var(--fimson-naglowek-tekst); }

.fimson-polaczenie button {
    padding: 9px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--fimson-akcent);
    color: var(--fimson-tlo);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.fimson-polaczenie-animacja {
    position: relative;
    width: 56px;
    height: 56px;
}

.fimson-polaczenie-animacja div {
    position: absolute;
    border: 3px solid var(--fimson-akcent);
    border-radius: 50%;
    animation: fimson-polaczenie-fala 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.fimson-polaczenie-animacja div:nth-child(2) { animation-delay: -0.5s; }

@keyframes fimson-polaczenie-fala {
    0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 56px; height: 56px; opacity: 0; }
}