:root {
    --ncc-bg: #f5f6f8;
    --ncc-surface: #ffffff;
    --ncc-text: #172033;
    --ncc-muted: #6b7280;
    --ncc-border: #e5e7eb;
    --ncc-primary: #2563eb;
    --ncc-primary-dark: #1d4ed8;
    --ncc-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --ncc-nav-height: 72px;
}

html, body.nevv-community-app {
    margin: 0;
    min-height: 100%;
    background: var(--ncc-bg);
    color: var(--ncc-text);
}

body.nevv-community-app {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.ncc-app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #eef3ff 0%, var(--ncc-bg) 220px);
}

.ncc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: calc(18px + env(safe-area-inset-top)) 18px 14px;
}

.ncc-kicker {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ncc-primary);
}

.ncc-topbar h1 {
    margin: 4px 0 0;
    font-size: clamp(22px, 5vw, 34px);
    line-height: 1.08;
    font-weight: 800;
}

.ncc-user-chip {
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255,255,255,.8);
    border: 1px solid var(--ncc-border);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.ncc-main {
    width: min(960px, calc(100% - 28px));
    margin: 0 auto;
    padding: 10px 0 calc(var(--ncc-nav-height) + 34px + env(safe-area-inset-bottom));
    flex: 1;
}

.ncc-card {
    background: var(--ncc-surface);
    border: 1px solid var(--ncc-border);
    border-radius: 24px;
    box-shadow: var(--ncc-shadow);
    padding: clamp(20px, 5vw, 34px);
    margin: 12px 0;
}

.ncc-card h2 {
    margin: 0 0 10px;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.15;
}

.ncc-card p {
    margin: 0;
    color: var(--ncc-muted);
    font-size: 16px;
    line-height: 1.6;
}

.ncc-actions {
    margin-top: 20px;
}

.ncc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ncc-primary);
    color: #fff !important;
    text-decoration: none;
    font-weight: 750;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.ncc-button:hover,
.ncc-button:focus {
    background: var(--ncc-primary-dark);
    color: #fff !important;
}

.ncc-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(760px, 100%);
    min-height: var(--ncc-nav-height);
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    background: rgba(255,255,255,.94);
    border-top: 1px solid var(--ncc-border);
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.09);
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    z-index: 99999;
}

.ncc-nav-item {
    color: var(--ncc-muted);
    text-decoration: none;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.1;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ncc-nav-item:hover,
.ncc-nav-item:focus,
.ncc-nav-item.is-active {
    color: var(--ncc-primary);
    background: #eff6ff;
}

.ncc-nav-item:active {
    transform: scale(.98);
}

.ncc-nav-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
}

.ncc-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ncc-nav-item.is-locked:not(.is-active) {
    opacity: .56;
}

@media (min-width: 860px) {
    .ncc-topbar {
        width: min(960px, calc(100% - 48px));
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .ncc-bottom-nav {
        bottom: 18px;
        border: 1px solid var(--ncc-border);
        border-radius: 28px;
        width: min(720px, calc(100% - 40px));
        padding: 8px;
    }
}


/* 1.0.2 - publiczny przycisk powrotu do community z NEWS */
.ncc-public-entry {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 99998;
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(16, 26, 51, .92);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .20);
    backdrop-filter: blur(12px);
}

.ncc-public-entry:hover,
.ncc-public-entry:focus {
    color: #fff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.admin-bar .ncc-public-entry {
    top: calc(46px + max(14px, env(safe-area-inset-top)));
}

@media (min-width: 783px) {
    .admin-bar .ncc-public-entry {
        top: calc(32px + max(14px, env(safe-area-inset-top)));
    }
}

@media (max-width: 620px) {
    .ncc-public-entry {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
    }
}

/* Lekka korekta: mniej pustki u góry w samej aplikacji community */
@media (min-width: 860px) {
    .ncc-topbar {
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-bottom: 10px;
    }

    .ncc-main {
        padding-top: 4px;
    }
}


/* 1.0.4 - aplikacyjny fixed topbar + przewijanie treści między belkami */
:root {
    --ncc-topbar-height: 74px;
}

body.nevv-community-app {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
}

body.nevv-community-app.admin-bar {
    --ncc-adminbar-offset: 46px;
}

@media (min-width: 783px) {
    body.nevv-community-app.admin-bar {
        --ncc-adminbar-offset: 32px;
    }
}

body.nevv-community-app:not(.admin-bar) {
    --ncc-adminbar-offset: 0px;
}

.ncc-app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: block;
    padding-top: calc(var(--ncc-topbar-height) + var(--ncc-adminbar-offset)) !important;
    padding-bottom: calc(var(--ncc-nav-height) + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
}

.ncc-topbar.ncc-fixed-topbar {
    position: fixed !important;
    left: 50% !important;
    top: calc(var(--ncc-adminbar-offset) + max(8px, env(safe-area-inset-top))) !important;
    transform: translateX(-50%) !important;
    z-index: 99998 !important;
    width: min(1320px, calc(100% - 28px)) !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--ncc-border) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Górna belka ma być identyfikatorem aplikacji, nie tytułem aktualnej sekcji. */
.ncc-topbar.ncc-fixed-topbar .ncc-kicker,
.ncc-topbar.ncc-fixed-topbar h1 {
    display: none !important;
}

.ncc-topbar.ncc-fixed-topbar > div:first-child {
    min-height: 34px;
    flex: 1 1 auto;
}

/* Tymczasowy chip logowania; kolejny krok: avatar jak w NEWS. */
.ncc-topbar.ncc-fixed-topbar .ncc-user-chip {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

.ncc-main {
    width: min(1320px, calc(100% - 28px)) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 10px 0 calc(26px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    flex: none !important;
}

.ncc-main > *:first-child {
    margin-top: 0 !important;
}

.ncc-bottom-nav {
    z-index: 99999 !important;
}

@media (min-width: 860px) {
    .ncc-topbar.ncc-fixed-topbar {
        width: min(1320px, calc(100% - 72px)) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ncc-main {
        width: min(1320px, calc(100% - 72px)) !important;
    }
}

@media (max-width: 620px) {
    :root {
        --ncc-topbar-height: 64px;
    }

    .ncc-topbar.ncc-fixed-topbar {
        width: calc(100% - 16px) !important;
        min-height: 48px !important;
        border-radius: 20px !important;
        top: calc(var(--ncc-adminbar-offset) + max(6px, env(safe-area-inset-top))) !important;
    }

    .ncc-main {
        width: calc(100% - 16px) !important;
        padding-top: 8px !important;
    }
}


/* 1.0.5 - ukrycie technicznego scrollbara obszaru aplikacji */
.ncc-main {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ncc-main::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Zapobiega poziomemu "drganiu" layoutu od paska przewijania. */
html:has(body.nevv-community-app),
body.nevv-community-app {
    scrollbar-gutter: stable;
}


/* 1.0.6 - prosty fixed topbar z miejscem na menu kontekstowe */
.ncc-topbar.ncc-fixed-topbar {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

.ncc-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 42px !important;
    flex: 0 0 auto !important;
}

.ncc-topbar-brand-mark {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    display: inline-block !important;
}

.ncc-topbar-brand-text {
    display: none !important;
}

.ncc-topbar-context {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ncc-user-chip {
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

.ncc-user-chip-empty {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    background: #f3f4f6 !important;
}

/* reset wcześniejszego ukrywania h1/kickera nie szkodzi, ale marka jest teraz osobna */
.ncc-topbar.ncc-fixed-topbar > div:first-child {
    min-height: 0 !important;
}

@media (max-width: 760px) {
    .ncc-topbar-brand {
        min-width: 34px !important;
    }

    .ncc-topbar-brand-mark {
        width: 24px !important;
        height: 24px !important;
    }

    .ncc-topbar-context {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .ncc-topbar-context::-webkit-scrollbar {
        display: none !important;
    }
}


/* 1.0.7 - uproszczony layout aplikacji: bez niebieskiej "dechy" i bez podwójnego scrolla */
:root {
    --ncc-bg: #f5f6f8 !important;
    --ncc-topbar-height: 64px !important;
    --ncc-nav-height: 72px !important;
}

html:has(body.nevv-community-app) {
    height: 100% !important;
    overflow: hidden !important;
    background: #f5f6f8 !important;
}

body.nevv-community-app {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f5f6f8 !important;
}

body.nevv-community-app.admin-bar {
    --ncc-adminbar-offset: 46px;
}

@media (min-width: 783px) {
    body.nevv-community-app.admin-bar {
        --ncc-adminbar-offset: 32px;
    }
}

body.nevv-community-app:not(.admin-bar) {
    --ncc-adminbar-offset: 0px;
}

.ncc-app-shell {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--ncc-adminbar-offset) !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #f5f6f8 !important;
    background-image: none !important;
}

/* Stały górny pasek, bez dużej grafiki/tła sekcji. */
.ncc-topbar.ncc-fixed-topbar {
    top: max(8px, env(safe-area-inset-top)) !important;
    min-height: 52px !important;
    height: 52px !important;
    background: #ffffff !important;
    border-radius: 24px !important;
}

/* Główna treść przewija się tylko tutaj, pomiędzy belkami. */
.ncc-main {
    position: absolute !important;
    left: 50% !important;
    top: calc(var(--ncc-topbar-height) + max(10px, env(safe-area-inset-top))) !important;
    bottom: calc(var(--ncc-nav-height) + 22px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(1320px, calc(100% - 72px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ncc-main::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ncc-card {
    background: #ffffff !important;
}

/* Dolna belka zostaje stała. */
.ncc-bottom-nav {
    z-index: 99999 !important;
}

/* Desktop: dolna belka ma ładnie wisieć, a treść nie wchodzić pod nią. */
@media (min-width: 860px) {
    .ncc-topbar.ncc-fixed-topbar {
        width: min(1320px, calc(100% - 72px)) !important;
    }

    .ncc-main {
        width: min(1320px, calc(100% - 72px)) !important;
        bottom: calc(var(--ncc-nav-height) + 30px + env(safe-area-inset-bottom)) !important;
    }
}

/* Mobile */
@media (max-width: 620px) {
    :root {
        --ncc-topbar-height: 58px !important;
    }

    .ncc-topbar.ncc-fixed-topbar {
        width: calc(100% - 16px) !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 20px !important;
        top: max(6px, env(safe-area-inset-top)) !important;
    }

    .ncc-main {
        width: calc(100% - 16px) !important;
        top: calc(var(--ncc-topbar-height) + max(6px, env(safe-area-inset-top))) !important;
        bottom: calc(var(--ncc-nav-height) + 12px + env(safe-area-inset-bottom)) !important;
    }
}

/* Na wypadek, gdy wcześniejsze reguły z wersji 1.0.4/1.0.5 zostaną w cache'u CSS niżej/wyżej. */
body.nevv-community-app,
.ncc-app-shell,
.ncc-main {
    scrollbar-gutter: auto !important;
}


/* 1.0.8 - topbar 3 części + dynamiczna wysokość */
:root {
    --ncc-topbar-height: 72px !important;
}

.ncc-topbar.ncc-fixed-topbar {
    display: grid !important;
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr) minmax(42px, auto) !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    padding: 8px 12px !important;
}

.ncc-topbar-brand {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
}

.ncc-topbar-context {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;
    min-width: 0 !important;
    width: 100% !important;
}

.ncc-user-chip {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
}

.ncc-main {
    top: calc(var(--ncc-topbar-height) + max(10px, env(safe-area-inset-top))) !important;
}

/* Gdy menu w topbarze ma 2 rzędy, body dostaje klasę z JS i środek zjeżdża niżej. */
body.nevv-community-app.ncc-topbar-tall {
    --ncc-topbar-height: 118px !important;
}

body.nevv-community-app.ncc-topbar-extra-tall {
    --ncc-topbar-height: 162px !important;
}

@media (max-width: 760px) {
    .ncc-topbar.ncc-fixed-topbar {
        grid-template-columns: minmax(34px, auto) minmax(0, 1fr) minmax(34px, auto) !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        padding: 7px 9px !important;
    }

    body.nevv-community-app.ncc-topbar-tall {
        --ncc-topbar-height: 108px !important;
    }

    body.nevv-community-app.ncc-topbar-extra-tall {
        --ncc-topbar-height: 150px !important;
    }
}


/* 1.0.10 - oficjalne sloty globalnej górnej belki: left / center / right */
.ncc-topbar.ncc-fixed-topbar {
    grid-template-columns: minmax(34px, auto) minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(42px, auto) !important;
}

.ncc-topbar-brand {
    grid-column: 1 !important;
}

.ncc-topbar-left {
    grid-column: 2 !important;
    justify-self: start !important;
}

.ncc-topbar-context {
    grid-column: 3 !important;
    justify-self: stretch !important;
    justify-content: center !important;
}

.ncc-topbar-right {
    grid-column: 4 !important;
    justify-self: end !important;
}

.ncc-user-chip {
    grid-column: 5 !important;
}

.ncc-topbar-action:empty {
    display: none !important;
}

.ncc-topbar-action {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ncc-topbar-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: #eef2f7 !important;
    color: #111827 !important;
    border: 0 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.ncc-topbar-center-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    max-width: min(420px, 52vw) !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    box-sizing: border-box !important;
}

.ncc-topbar-center-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

.ncc-topbar-center-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ncc-topbar-center-title {
    min-width: 0 !important;
    max-width: 340px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

@media (max-width: 760px) {
    .ncc-topbar.ncc-fixed-topbar {
        grid-template-columns: minmax(28px, auto) minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(34px, auto) !important;
        column-gap: 6px !important;
    }

    .ncc-topbar-button {
        min-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    .ncc-topbar-center-chip {
        max-width: 42vw !important;
        height: 34px !important;
        gap: 6px !important;
        padding: 0 4px !important;
    }

    .ncc-topbar-center-avatar {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }

    .ncc-topbar-center-title {
        max-width: 110px !important;
        font-size: 15px !important;
    }
}


/* 1.0.11 - globalne wymiary layoutu dla wszystkich modułów */
:root {
    --ncc-viewport-width: 100vw;
    --ncc-viewport-height: 100dvh;

    /* Zewnętrzna szerokość górnej/dolnej belki i głównego obszaru aplikacji */
    --ncc-shell-max-width: 1200px;
    --ncc-shell-width: min(var(--ncc-shell-max-width), calc(100vw - 28px));

    /* Wewnętrzna szerokość robocza dla modułów */
    --ncc-inner-max-width: 1100px;
    --ncc-inner-width: min(var(--ncc-inner-max-width), calc(var(--ncc-shell-width) - 28px));

    /* Wysokość realnie dostępna między belkami; aktualizuje JS */
    --ncc-available-height: calc(100dvh - 160px);
    --ncc-content-top: 80px;
    --ncc-content-bottom: calc(100dvh - 90px);
}

/* Górna i dolna belka mają tę samą szerokość wynikającą z core */
.ncc-topbar.ncc-fixed-topbar,
.ncc-bottom-nav {
    width: var(--ncc-shell-width) !important;
    max-width: var(--ncc-shell-max-width) !important;
    box-sizing: border-box !important;
}

/* Główny obszar aplikacji też trzyma wspólną szerokość */
.ncc-main {
    width: var(--ncc-shell-width) !important;
    max-width: var(--ncc-shell-max-width) !important;
}

/* Standardowy kontener modułów: max 1100, ale schodzi w dół na węższych ekranach */
.ncc-layout-inner,
.ncc-module-inner,
.ncc-form-shell,
.ncc-content-shell {
    width: var(--ncc-inner-width) !important;
    max-width: var(--ncc-inner-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Klasa użytkowa dla modułów, które chcą zająć dokładnie przestrzeń między belkami */
.ncc-fill-available-height {
    height: var(--ncc-available-height) !important;
    max-height: var(--ncc-available-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    :root {
        --ncc-shell-width: calc(100vw - 16px);
        --ncc-inner-width: calc(var(--ncc-shell-width) - 16px);
        --ncc-available-height: calc(100dvh - 140px);
    }
}


/* 1.0.12 - większy bezpieczny margines między belkami a modułami */
:root {
    /*
     * Core liczy wysokość między belkami, ale moduły mają też własne marginesy/cienie.
     * Ten bufor chroni przed wchodzeniem środka pod górną lub dolną belkę.
     */
    --ncc-layout-safe-gap: 56px;
    --ncc-module-top-gap: 22px;
    --ncc-module-bottom-gap: 34px;
}

/* Moduły wypełniają przestrzeń z buforem, a nie na żyletkę */
.ncc-fill-available-height {
    height: var(--ncc-available-height) !important;
    max-height: var(--ncc-available-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Gdy ekran jest niski, jeszcze mocniej pilnujemy, żeby dół nie schował się pod nawigacją */
@media (max-height: 760px) {
    :root {
        --ncc-layout-safe-gap: 70px;
        --ncc-module-top-gap: 18px;
        --ncc-module-bottom-gap: 44px;
    }
}

@media (max-width: 760px) {
    :root {
        --ncc-layout-safe-gap: 48px;
        --ncc-module-top-gap: 14px;
        --ncc-module-bottom-gap: 34px;
    }
}

@media (max-width: 760px) and (max-height: 760px) {
    :root {
        --ncc-layout-safe-gap: 60px;
        --ncc-module-bottom-gap: 42px;
    }
}


/* 1.0.13 - globalna responsywność core: belki i obszar roboczy */
/*
 * Core jest jedynym właścicielem szerokości głównych belek oraz dostępnego
 * obszaru dla modułów. Moduły powinny korzystać z:
 * --ncc-shell-width
 * --ncc-shell-gutter
 * --ncc-topbar-height
 * --ncc-bottom-nav-height
 * --ncc-available-height
 */
:root {
    --ncc-shell-max-width: 1200px;
    --ncc-shell-inner-max-width: 1100px;
    --ncc-shell-gutter: clamp(10px, 2.4vw, 24px);
    --ncc-topbar-height: 72px;
    --ncc-bottom-nav-height: 86px;
    --ncc-bars-gap: 14px;
    --ncc-shell-width: min(var(--ncc-shell-max-width), calc(100vw - (var(--ncc-shell-gutter) * 2)));
    --ncc-shell-inner-width: min(var(--ncc-shell-inner-max-width), var(--ncc-shell-width));
    --ncc-available-height: calc(100dvh - var(--ncc-topbar-height) - var(--ncc-bottom-nav-height) - (var(--ncc-bars-gap) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

html,
body {
    overflow-x: hidden !important;
}

/* Główne kontenery nie mogą mieć szerokości 100vw, bo to wycina zaokrąglenia
   przy pionowym pasku przewijania. */
.ncc-shell,
.ncc-layout,
.ncc-app,
.ncc-community,
.ncc-page,
.ncc-main,
.ncc-content,
.ncc-wrap {
    max-width: var(--ncc-shell-width) !important;
    width: var(--ncc-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Górna belka */
.ncc-topbar,
.ncc-floating-topbar,
.ncc-header-bar,
.ncc-community-topbar {
    width: var(--ncc-shell-width) !important;
    max-width: var(--ncc-shell-width) !important;
    min-height: var(--ncc-topbar-height) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}

/* Wnętrze górnej belki dostaje trochę powietrza, ale nie rozpycha całości. */
.ncc-topbar-inner,
.ncc-header-bar-inner,
.ncc-community-topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: clamp(10px, 2vw, 18px) !important;
    padding-right: clamp(10px, 2vw, 18px) !important;
}

/* Dolna belka */
.ncc-bottom-nav,
.ncc-mobile-nav,
.ncc-footer-nav,
.ncc-bottom-bar {
    width: var(--ncc-shell-inner-width) !important;
    max-width: var(--ncc-shell-inner-width) !important;
    min-height: var(--ncc-bottom-nav-height) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}

/* Karty modułów mają brać szerokość z core, nie z własnych pomysłów. */
.ncc-card,
.ncc-section-card,
.ncc-module-card,
.ncu-members-layout-card,
.ncm-messages-shell,
.ncm-thread-shell {
    width: 100% !important;
    max-width: var(--ncc-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Środkowy obszar roboczy. Moduły mogą podpiąć się pod --ncc-available-height. */
.ncc-main,
.ncc-content,
.ncc-module-card,
.ncu-members-layout-card,
.ncm-messages-shell,
.ncm-thread-shell {
    min-height: max(360px, var(--ncc-available-height)) !important;
}

/* Telefon / wąskie okno: najważniejsze jest, żeby belki nie wypadały poza ekran
   i nadal miały zaokrąglenia. */
@media (max-width: 760px) {
    :root {
        --ncc-shell-gutter: 8px;
        --ncc-topbar-height: 72px;
        --ncc-bottom-nav-height: 86px;
        --ncc-bars-gap: 10px;
        --ncc-shell-width: calc(100vw - (var(--ncc-shell-gutter) * 2));
        --ncc-shell-inner-width: var(--ncc-shell-width);
    }

    .ncc-shell,
    .ncc-layout,
    .ncc-app,
    .ncc-community,
    .ncc-page,
    .ncc-main,
    .ncc-content,
    .ncc-wrap {
        width: var(--ncc-shell-width) !important;
        max-width: var(--ncc-shell-width) !important;
    }

    .ncc-topbar,
    .ncc-floating-topbar,
    .ncc-header-bar,
    .ncc-community-topbar {
        width: var(--ncc-shell-width) !important;
        max-width: var(--ncc-shell-width) !important;
        min-height: var(--ncc-topbar-height) !important;
        border-radius: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }

    .ncc-bottom-nav,
    .ncc-mobile-nav,
    .ncc-footer-nav,
    .ncc-bottom-bar {
        width: var(--ncc-shell-width) !important;
        max-width: var(--ncc-shell-width) !important;
        min-height: var(--ncc-bottom-nav-height) !important;
        border-radius: 24px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        overflow: hidden !important;
    }

    .ncc-card,
    .ncc-section-card,
    .ncc-module-card,
    .ncu-members-layout-card,
    .ncm-messages-shell,
    .ncm-thread-shell {
        max-width: var(--ncc-shell-width) !important;
        width: var(--ncc-shell-width) !important;
        border-radius: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .ncc-main,
    .ncc-content,
    .ncc-module-card,
    .ncu-members-layout-card,
    .ncm-messages-shell,
    .ncm-thread-shell {
        min-height: max(360px, var(--ncc-available-height)) !important;
        max-height: none !important;
    }
}

@media (max-width: 420px) {
    :root {
        --ncc-shell-gutter: 6px;
    }

    .ncc-topbar,
    .ncc-floating-topbar,
    .ncc-header-bar,
    .ncc-community-topbar,
    .ncc-bottom-nav,
    .ncc-mobile-nav,
    .ncc-footer-nav,
    .ncc-bottom-bar,
    .ncc-card,
    .ncc-section-card,
    .ncc-module-card,
    .ncu-members-layout-card,
    .ncm-messages-shell,
    .ncm-thread-shell {
        border-radius: 22px !important;
    }
}