:root {
    --nevv-shell-edge-gap: 8px;
    --nevv-radius-global: 16px;
    --nevv-radius-button: 10px;
    --nevv-button-height: 44px;
    --nevv-button-font-size: 16px;
    --nevv-input-height: 38px;
    --nevv-input-font-size: 16px;
    --nevv-input-text-color: var(--nevv-color-text);
    --nevv-input-background-color: #fff;
    --nevv-select-height: 38px;
    --nevv-select-font-size: 16px;
    --nevv-select-text-color: var(--nevv-color-text);
    --nevv-select-background-color: #fff;
    --nevv-color-button-save: var(--nevv-color-primary);
    --nevv-color-button-delete: #dc2626;
    --nevv-color-button-edit: var(--nevv-color-primary);
    --nevv-color-button-function: var(--nevv-color-primary);
    --nevv-radius-input: 10px;
    --nevv-radius-sm: calc(var(--nevv-radius-global) * .375);
    --nevv-radius-md: var(--nevv-radius-button);
    --nevv-radius-lg: var(--nevv-radius-global);
    --nevv-content-margin: 12px;
    --nevv-color-app-bg: var(--nevv-color-bg);
    --nevv-app-max-width: 1200px;
    --nevv-content-max-width: 1160px;
    --nevv-form-max-width: 720px;
    --nevv-readable-max-width: 860px;
    --nevv-topbar-height: var(--nevv-topbar-min-height, 64px);
    --nevv-shadow-soft: 0 10px 30px rgba(15, 23, 42, .12);
    --nevv-border: 1px solid rgba(15, 23, 42, .10);
}

.nevv-app, .nevv-app * { box-sizing: border-box; }
html, body.nevv-community-standalone { background: var(--nevv-color-app-bg); }
body.nevv-community-standalone,
body.nevv-community-standalone .nevv-app,
body.nevv-community-standalone .nevv-content {
    background-color: var(--nevv-color-app-bg) !important;
}
html:has(body.nevv-community-standalone) { overflow: hidden; }
body.nevv-community-standalone { margin: 0; overflow: hidden !important; height: 100dvh; }
.nevv-app { min-height: 100dvh; font-family: var(--nevv-font-family); font-size: var(--nevv-font-size-base); color: var(--nevv-color-text); background: var(--nevv-color-app-bg); }
.nevv-app h1 { margin: 0 0 .7em; font-size: var(--nevv-h1-font-size, 32px); line-height: 1.16; color: var(--nevv-h1-color, var(--nevv-color-text)); }
.nevv-app h2 { margin: 0 0 .7em; font-size: var(--nevv-h2-font-size, 26px); line-height: 1.2; color: var(--nevv-h2-color, var(--nevv-color-text)); }
.nevv-app h3 { margin: 0 0 .7em; font-size: var(--nevv-h3-font-size, 22px); line-height: 1.25; color: var(--nevv-h3-color, var(--nevv-color-text)); }
.nevv-app h4 { margin: 0 0 .7em; font-size: var(--nevv-h4-font-size, 18px); line-height: 1.3; color: var(--nevv-h4-color, var(--nevv-color-text)); }
.nevv-description { font-size: var(--nevv-description-font-size, 16px); color: var(--nevv-description-color, var(--nevv-color-text)); }
.nevv-text-normal { font-size: var(--nevv-normal-font-size, 16px); font-weight: 400; color: var(--nevv-normal-text-color, var(--nevv-color-text)); }
.nevv-text-bold { font-size: var(--nevv-normal-font-size, 16px); font-weight: 700; color: var(--nevv-normal-text-color, var(--nevv-color-text)); }

.nevv-topbar {
    position: fixed;
    z-index: 9990;
    top: var(--nevv-shell-edge-gap);
    left: 50%;
    right: auto;
    width: min(calc(100% - (var(--nevv-shell-edge-gap) * 2)), var(--nevv-app-max-width));
    transform: translateX(-50%);
    min-height: var(--nevv-topbar-min-height);
    height: auto;
    display: grid;
    grid-template-columns: 15% 70% 15%;
    column-gap: 0;
    row-gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: var(--nevv-color-surface);
    border-bottom: var(--nevv-border);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}

.nevv-topbar-left, .nevv-topbar-right { display: flex; align-items: center; min-width: 0; }
.nevv-topbar-left { justify-content: flex-start; overflow: hidden; padding-right: 8px; }
.nevv-topbar-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-width: 0; overflow: visible; padding-left: 8px; padding-right: 8px; }
.nevv-topbar-right { justify-content: flex-end; overflow: hidden; padding-left: 8px; }
.nevv-logo { max-width: 100%; font-weight: 800; letter-spacing: .04em; text-decoration: none; color: var(--nevv-color-primary); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.nevv-logo-image { display: block; max-height: calc(var(--nevv-topbar-min-height) - 18px); max-width: 100%; object-fit: contain; }
.nevv-logo-text { color: var(--nevv-color-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nevv-content {
    width: min(100%, var(--nevv-content-max-width));
    margin-top: calc(var(--nevv-topbar-height) + var(--nevv-content-margin));
    margin-right: auto;
    margin-bottom: calc(var(--nevv-bottombar-height) + var(--nevv-content-margin));
    margin-left: auto;
    padding: var(--nevv-content-margin);
}
.nevv-width-app { width: min(100%, var(--nevv-app-max-width)); margin-left: auto; margin-right: auto; }
.nevv-width-content { width: min(100%, var(--nevv-content-max-width)); margin-left: auto; margin-right: auto; }
.nevv-width-form { width: min(100%, var(--nevv-form-max-width)); margin-left: auto; margin-right: auto; }
.nevv-width-readable { width: min(100%, var(--nevv-readable-max-width)); margin-left: auto; margin-right: auto; }
.nevv-width-full { width: 100%; }
.nevv-content-fixed { overflow: auto; }

.nevv-bottombar {
    position: fixed;
    z-index: 9990;
    left: 50%;
    right: auto;
    bottom: var(--nevv-shell-edge-gap);
    width: min(calc(100% - (var(--nevv-shell-edge-gap) * 2)), var(--nevv-app-max-width));
    transform: translateX(-50%);
    height: var(--nevv-bottombar-height);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--nevv-color-surface);
    border-top: var(--nevv-border);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .06);
}
.nevv-bottom-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--nevv-menu-text-color, var(--nevv-color-text)); font-size: var(--nevv-menu-font-size, 12px); }
.nevv-bottom-item:hover { color: var(--nevv-color-primary); }
.nevv-bottom-icon { font-size: var(--nevv-menu-icon-size, 18px); line-height: 1; color: inherit; }
.nevv-bottom-label { color: inherit; font-size: var(--nevv-menu-font-size, 12px); }
.nevv-nav-badge { position: absolute; top: 8px; right: calc(50% - 22px); min-width: 16px; height: 16px; border-radius: 999px; background: var(--nevv-color-primary); color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.nevv-nav-badge-dot { min-width: 9px; width: 9px; height: 9px; font-size: 0; padding: 0; }

.nevv-btn {
    appearance: none;
    border: 0;
    border-radius: var(--nevv-radius-button);
    min-height: var(--nevv-button-height, 44px);
    padding: 0 13px;
    font-family: var(--nevv-font-family);
    font-size: var(--nevv-button-font-size, 16px);
    line-height: 1;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.nevv-btn:hover { transform: translateY(-1px); }
.nevv-btn-primary,
.nevv-btn-secondary {
    background: var(--nevv-color-primary);
    color: #fff;
}
.nevv-btn-primary:hover,
.nevv-btn-secondary:hover {
    background: var(--nevv-color-primary-hover);
    color: #fff;
}
.nevv-btn-primary:active,
.nevv-btn-secondary:active,
.nevv-btn-active,
.nevv-btn.is-active,
.nevv-btn[aria-current="page"] {
    background: var(--nevv-color-primary-active);
    color: #fff;
}
.nevv-btn-active:hover,
.nevv-btn.is-active:hover,
.nevv-btn[aria-current="page"]:hover {
    background: var(--nevv-color-primary-active);
    color: #fff;
}
.nevv-btn-save { background: var(--nevv-color-button-save, var(--nevv-color-primary)); color: #fff; }
.nevv-btn-delete,
.nevv-btn-danger { background: var(--nevv-color-button-delete, #dc2626); color: #fff; }
.nevv-btn-edit { background: var(--nevv-color-button-edit, var(--nevv-color-primary)); color: #fff; }
.nevv-btn-function { background: var(--nevv-color-button-function, var(--nevv-color-primary)); color: #fff; }
.nevv-btn-save:hover,
.nevv-btn-delete:hover,
.nevv-btn-danger:hover,
.nevv-btn-edit:hover,
.nevv-btn-function:hover { background: var(--nevv-color-primary-hover); color: #fff; }
.nevv-btn-save:active,
.nevv-btn-delete:active,
.nevv-btn-danger:active,
.nevv-btn-edit:active,
.nevv-btn-function:active,
.nevv-btn-save.is-active,
.nevv-btn-delete.is-active,
.nevv-btn-danger.is-active,
.nevv-btn-edit.is-active,
.nevv-btn-function.is-active { background: var(--nevv-color-primary-active); color: #fff; }
.nevv-btn-ghost { background: transparent; color: var(--nevv-color-primary); }
.nevv-btn-locked, .nevv-btn:disabled { background: rgba(15, 23, 42, .08); color: #6b7280; cursor: not-allowed; transform: none; }
.nevv-btn-back { min-width: var(--nevv-button-height, 44px); width: var(--nevv-button-height, 44px); height: var(--nevv-button-height, 44px); padding: 0; font-size: calc(var(--nevv-button-font-size, 16px) + 4px); line-height: 1; flex: 0 0 auto; }

.nevv-input,
.nevv-textarea {
    min-height: var(--nevv-input-height, 38px);
    border: var(--nevv-border);
    border-radius: var(--nevv-radius-input);
    padding: 0 10px;
    background: var(--nevv-input-background-color, #fff);
    color: var(--nevv-input-text-color, var(--nevv-color-text));
    font-family: var(--nevv-font-family);
    font-size: var(--nevv-input-font-size, 16px);
}
.nevv-textarea {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.35;
}
.nevv-select {
    min-height: var(--nevv-select-height, 38px);
    border: var(--nevv-border);
    border-radius: var(--nevv-radius-input);
    padding: 0 10px;
    background: var(--nevv-select-background-color, #fff);
    color: var(--nevv-select-text-color, var(--nevv-color-text));
    font-family: var(--nevv-font-family);
    font-size: var(--nevv-select-font-size, 16px);
}
.nevv-input:focus, .nevv-select:focus, .nevv-textarea:focus { outline: 2px solid color-mix(in srgb, var(--nevv-color-primary) 35%, transparent); border-color: var(--nevv-color-primary); }
.nevv-input[type="date"] { min-width: 180px; }
.nevv-style-demo-form { display: grid; gap: 12px; margin-top: 14px; }
.nevv-style-demo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.nevv-panel, .nevv-card {
    background: var(--nevv-color-surface);
    border: var(--nevv-border);
    border-radius: var(--nevv-radius-lg);
    padding: 18px;
    box-shadow: var(--nevv-shadow-soft);
    margin-bottom: 14px;
}
.nevv-card { box-shadow: none; }

.nevv-avatar-button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.nevv-avatar { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,.08); }
.nevv-login-state { font-size: var(--nevv-topbar-menu-font-size, 14px); color: var(--nevv-topbar-menu-text-color, var(--nevv-color-text)); }

.nevv-toast-stack { position: fixed; z-index: 10000; top: calc(var(--nevv-topbar-height) + 12px); right: 12px; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 24px)); }
.nevv-toast { padding: 12px 14px; border-radius: var(--nevv-radius-md); background: var(--nevv-color-surface); border: var(--nevv-border); box-shadow: var(--nevv-shadow-soft); }
.nevv-toast-success { border-left: 4px solid #16a34a; }
.nevv-toast-info { border-left: 4px solid var(--nevv-color-primary); }
.nevv-toast-warning, .nevv-toast-locked { border-left: 4px solid #f59e0b; }
.nevv-toast-error { border-left: 4px solid #dc2626; }

.nevv-admin-wrap .nevv-panel { max-width: 1100px; }
.nevv-admin-user-card label { margin-right: 14px; display: inline-block; vertical-align: top; }

@media (max-width: 720px) {
    :root { --nevv-content-margin: 8px; --nevv-shell-edge-gap: 0px; }
    .nevv-topbar, .nevv-bottombar { width: 100%; }
    .nevv-content { width: 100%; padding-left: 8px; padding-right: 8px; }
    .nevv-topbar { grid-template-columns: 15% 70% 15%; padding-left: 8px; padding-right: 8px; }
    .nevv-topbar-left { padding-right: 4px; }
    .nevv-topbar-center { grid-column: auto; justify-content: center; padding-left: 4px; padding-right: 4px; gap: 6px; }
    .nevv-topbar-right { padding-left: 4px; }
    .nevv-logo-text { font-size: 12px; letter-spacing: .02em; }
    .nevv-avatar { width: 36px; height: 36px; }
    .nevv-bottom-label { font-size: 11px; }
    .nevv-topbar-control { max-width: 100%; }
}

.nevv-news-community-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: var(--nevv-radius-md);
    padding: 7px 10px;
    font-weight: 750;
    line-height: 1;
    color: var(--nevv-color-primary);
    background: rgba(29, 78, 216, .08);
}
.nevv-news-community-entry:hover { color: #fff; background: var(--nevv-color-primary); }
.nevv-news-community-entry-avatar { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; }


/* NEWS topbar public entry compatibility */
.floating-community-link,
.nevv-news-community-entry {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    white-space: nowrap;
}
.nevv-news-community-entry-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    object-fit: cover;
}

.nevv-gate-screen { width: min(100%, var(--nevv-form-max-width)); margin-left: auto; margin-right: auto; }
.nevv-join-form { display: grid; gap: 14px; margin-top: 16px; }
.nevv-form-row { display: grid; gap: 6px; }
.nevv-form-label { font-weight: 750; }
.nevv-textarea { width: 100%; min-height: 130px; }
.nevv-required { color: #dc2626; }
.nevv-field-description { margin: 0; font-size: 13px; color: #6b7280; }
.nevv-alert { border: var(--nevv-border); border-radius: var(--nevv-radius-md); padding: 12px 14px; margin: 10px 0 16px; background: rgba(15,23,42,.04); }
.nevv-alert-warning { border-left: 4px solid #f59e0b; }
.nevv-admin-join-request { border: 1px dashed rgba(15,23,42,.18); border-radius: 10px; padding: 12px; margin: 12px 0; background: rgba(15,23,42,.025); }
.nevv-admin-join-request h4 { margin-top: 0; }



/* Desktop: belki maja zaokraglone brzegi. */
@media (min-width: 721px) {
    .nevv-topbar { border-radius: var(--nevv-radius-lg); }
    .nevv-bottombar { border-radius: var(--nevv-radius-lg); }
}

.nevv-demo-long-block { display: grid; gap: 12px; padding-bottom: 24px; }
.nevv-demo-row { padding: 12px; border: var(--nevv-border); border-radius: var(--nevv-radius-md); background: var(--nevv-color-surface); }

/* v0.1.16: TOP BAR ma trzy stale pola: lewe 15%, srodek 70%, prawe 15%. */
.nevv-topbar { grid-template-columns: 15% 70% 15%; }

/* v0.1.19: Usuniety tryb flow. Community uzywa jednego ukladu: fixed z przewijanym srodkiem. */
html:has(body.nevv-community-standalone) { overflow: hidden; }
body.nevv-community-standalone { margin: 0; overflow: hidden !important; height: 100dvh; }
body.nevv-community-standalone .nevv-app { height: 100dvh; overflow: hidden; }
body.nevv-community-standalone .nevv-content {
    position: fixed;
    top: calc(var(--nevv-shell-edge-gap) + var(--nevv-topbar-height) + var(--nevv-content-margin));
    bottom: calc(var(--nevv-shell-edge-gap) + var(--nevv-bottombar-height) + var(--nevv-content-margin));
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
}


/* v0.1.29: standard topbar integration for modules such as Forum.
   Modules may render a form or a wrapper inside the center column; CORE keeps the
   same wrapping, spacing and control sizing as profile/members topbar controls. */
.nevv-topbar-center > form,
.nevv-topbar-center > .nevv-topbar-form,
.nevv-topbar-center > .nevv-topbar-controls,
.nevv-topbar-center > .nevv-forum-topbar,
.nevv-topbar-center > .ncf-topbar,
.nevv-topbar-center > .nforum-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.nevv-topbar-center .nevv-btn,
.nevv-topbar-center .nevv-input,
.nevv-topbar-center .nevv-select,
.nevv-topbar-center button,
.nevv-topbar-center input,
.nevv-topbar-center select {
    flex: 0 1 auto;
    max-width: 100%;
}
.nevv-topbar-center .nevv-input,
.nevv-topbar-center .nevv-select {
    min-width: 0;
}

/* v0.1.22: podklad pod panelami i zaokragleniami zawsze jest globalnym tlem aplikacji. */
body.nevv-community-standalone .nevv-content,
body.nevv-community-standalone .nevv-content-fixed {
    background-color: var(--nevv-color-app-bg) !important;
}

.nevv-topbar-control, .nevv-topbar .nevv-btn, .nevv-topbar select, .nevv-topbar input {
    font-size: var(--nevv-topbar-menu-font-size, 14px);
    color: var(--nevv-topbar-menu-text-color, var(--nevv-color-text));
}

/* v0.1.26: button colors and dimensions map exactly to admin settings:
   basic = --nevv-color-primary, hover = --nevv-color-primary-hover,
   selected/active = --nevv-color-primary-active. */
.nevv-topbar .nevv-btn-primary,
.nevv-topbar .nevv-btn-secondary {
    background: var(--nevv-color-primary) !important;
    color: #fff !important;
}
.nevv-topbar .nevv-btn-primary:hover,
.nevv-topbar .nevv-btn-secondary:hover {
    background: var(--nevv-color-primary-hover) !important;
    color: #fff !important;
}
.nevv-topbar .nevv-btn-primary:active,
.nevv-topbar .nevv-btn-secondary:active,
.nevv-topbar .nevv-btn-active,
.nevv-topbar .nevv-btn.is-active,
.nevv-topbar .nevv-btn[aria-current="page"] {
    background: var(--nevv-color-primary-active) !important;
    color: #fff !important;
}
.nevv-topbar .nevv-btn-active:hover,
.nevv-topbar .nevv-btn.is-active:hover,
.nevv-topbar .nevv-btn[aria-current="page"]:hover {
    background: var(--nevv-color-primary-active) !important;
    color: #fff !important;
}
.nevv-topbar .nevv-btn-ghost {
    background: transparent !important;
    color: var(--nevv-topbar-menu-text-color, var(--nevv-color-primary)) !important;
}
.nevv-topbar .nevv-btn-back {
    color: var(--nevv-topbar-menu-text-color, var(--nevv-color-primary)) !important;
}


/* v0.1.27: bottom bar uses inline SVG icons and Forum points to /community/forum/. */
.nevv-bottom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nevv-menu-icon-size, 18px);
    height: var(--nevv-menu-icon-size, 18px);
    color: inherit;
}
.nevv-bottom-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}
.nevv-bottom-item-active {
    color: var(--nevv-color-primary);
}


/* v0.1.32: logo/left topbar area handles safe back navigation. */
.nevv-logo-back {
    cursor: pointer;
}
.nevv-logo-back:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--nevv-color-primary) 40%, transparent);
    outline-offset: 3px;
}


/* v0.1.33: mobile admin entry/floating management icon should not cover bottom bar. */
@media (max-width: 720px) {
    .nevv-admin-entry-floating,
    .nevv-admin-floating-button,
    .nevv-forum-admin-entry,
    .ncf-admin-entry-floating,
    .ncf-admin-floating-button,
    .ncf-forum-admin-link-floating,
    .ncf-admin-shortcut {
        bottom: calc(var(--nevv-bottombar-height, 58px) + var(--nevv-shell-edge-gap, 0px) + 56px) !important;
    }
}


/* v0.1.34: higher and broader mobile floating admin/manage shortcut positioning.
   This is intentionally in CORE because admin/manage shortcuts may be rendered by different modules.
   It only changes position on mobile, not colors or shape. */
:root {
    --nevv-admin-floating-mobile-offset: 112px;
}

@media (max-width: 720px) {
    .nevv-admin-entry-floating,
    .nevv-admin-floating-button,
    .nevv-forum-admin-entry,
    .nevv-forum-admin-floating,
    .nevv-forum-manage-floating,
    .nevv-module-admin-floating,
    .ncf-admin-entry-floating,
    .ncf-admin-floating-button,
    .ncf-forum-admin-link-floating,
    .ncf-admin-shortcut,
    .ncf-admin-mobile-entry,
    .ncf-forum-manage-button,
    .ncf-forum-admin-button,
    .nforum-admin-floating,
    .nforum-manage-floating,
    [class*="admin"][class*="floating"],
    [class*="floating"][class*="admin"],
    [class*="manage"][class*="floating"],
    [class*="floating"][class*="manage"] {
        bottom: calc(
            var(--nevv-bottombar-height, 58px)
            + var(--nevv-shell-edge-gap, 0px)
            + var(--nevv-admin-floating-mobile-offset, 112px)
        ) !important;
        z-index: 10020 !important;
    }
}