/* =========================================================
   ZION SUPPORT HUB — FLARUM 2.x
   TEMĂ COMPLETĂ + FIXURI RESPONSIVE ȘI DROPDOWN
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    --zion-bg: #171a18;
    --zion-bg-deep: #101310;

    --zion-surface: #23262e;
    --zion-surface-light: #2b3038;
    --zion-surface-soft: #20251f;

    --zion-green: #9edc38;
    --zion-green-hover: #b4ef53;
    --zion-green-dark: #08734d;

    --zion-green-soft: rgba(158, 220, 56, 0.12);
    --zion-green-border: rgba(158, 220, 56, 0.32);

    --zion-text: #ffffff;
    --zion-text-soft: #e9edeb;
    --zion-muted: #b8bfc1;
    --zion-muted-dark: #858e8a;

    --zion-border: rgba(255, 255, 255, 0.10);
    --zion-border-strong: rgba(255, 255, 255, 0.16);

    --zion-danger: #e25a5a;
    --zion-danger-soft: rgba(226, 90, 90, 0.14);

    --zion-warning: #f1bd4b;
    --zion-warning-soft: rgba(241, 189, 75, 0.14);

    --zion-info: #4f82ff;
    --zion-info-soft: rgba(79, 130, 255, 0.14);

    --zion-success: #42cc87;
    --zion-success-soft: rgba(66, 204, 135, 0.14);

    --zion-radius-sm: 8px;
    --zion-radius: 12px;
    --zion-radius-lg: 18px;
    --zion-radius-xl: 24px;

    --zion-shadow:
        0 18px 50px rgba(0, 0, 0, 0.28);

    --zion-shadow-soft:
        0 10px 30px rgba(0, 0, 0, 0.18);

    --zion-container: 1240px;
}


/* =========================================================
   2. FLARUM VARIABLES
   ========================================================= */

:root,
body,
body.dark {
    --body-bg: var(--zion-bg);
    --body-color: var(--zion-text-soft);

    --control-bg: var(--zion-surface);
    --control-color: var(--zion-text-soft);

    --control-bg-light: var(--zion-surface-light);
    --control-bg-shaded: var(--zion-bg-deep);

    --primary-color: var(--zion-green);
    --secondary-color: var(--zion-surface);

    --header-bg: rgba(16, 19, 16, 0.96);
    --header-color: var(--zion-text);

    --header-control-bg: var(--zion-surface);
    --header-control-color: var(--zion-text-soft);

    --muted-color: var(--zion-muted);
    --muted-more-color: var(--zion-muted-dark);

    --link-color: var(--zion-green);
    --text-color: var(--zion-text-soft);

    --button-primary-bg: var(--zion-green);
    --button-primary-color: #172019;

    --tooltip-bg: #050705;
    --tooltip-color: #ffffff;
}


/* =========================================================
   3. GLOBAL
   ========================================================= */

html {
    background: var(--zion-bg-deep);
}

body {
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(158, 220, 56, 0.08),
            transparent 25rem
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(8, 115, 77, 0.10),
            transparent 30rem
        ),
        var(--zion-bg) !important;

    color: var(--zion-text-soft) !important;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--zion-green);
}

a:hover,
a:focus {
    color: var(--zion-green-hover);
}

::selection {
    background: var(--zion-green);
    color: #172019;
}

hr {
    border-color: var(--zion-border) !important;
}

code,
pre {
    border: 1px solid var(--zion-border) !important;
    background: #101511 !important;
    color: #d8efbd !important;
}

pre {
    border-radius: var(--zion-radius) !important;
}

.App-content {
    background: transparent !important;
}

.container {
    max-width: var(--zion-container);
}


/* =========================================================
   4. CUSTOM SHARED CONTAINER
   ========================================================= */

.zion-support-container {
    width: min(
        var(--zion-container),
        calc(100% - 40px)
    );

    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   5. CUSTOM TOP BAR
   ========================================================= */

.zion-support-topbar {
    position: relative;
    z-index: 1030;

    border-bottom: 1px solid var(--zion-border);

    background:
        linear-gradient(
            90deg,
            rgba(158, 220, 56, 0.08),
            transparent 35%
        ),
        #0d110e;

    color: var(--zion-muted);
}

.zion-support-topbar .zion-support-container {
    display: flex;

    min-height: 38px;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.zion-support-topbar__left,
.zion-support-topbar__nav {
    display: flex;
    align-items: center;
}

.zion-support-topbar__left {
    gap: 13px;
}

.zion-support-topbar__nav {
    gap: 22px;
}

.zion-support-status {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--zion-text-soft);

    font-size: 12px;
    font-weight: 700;
}

.zion-support-status__dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--zion-success);

    box-shadow:
        0 0 0 5px rgba(66, 204, 135, 0.12),
        0 0 16px rgba(66, 204, 135, 0.55);
}

.zion-support-topbar__separator {
    width: 1px;
    height: 15px;

    background: var(--zion-border-strong);
}

.zion-support-topbar__message {
    font-size: 11px;
}

.zion-support-topbar__nav a {
    color: var(--zion-muted) !important;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;

    transition: color 0.18s ease;
}

.zion-support-topbar__nav a:hover,
.zion-support-topbar__nav a:focus {
    color: var(--zion-green) !important;
}


/* =========================================================
   6. CUSTOM BRAND BAR
   ========================================================= */

.zion-support-brandbar {
    position: relative;
    z-index: 1025;

    border-bottom: 1px solid var(--zion-border);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            transparent
        ),
        rgba(23, 26, 24, 0.97);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.zion-support-brandbar__inner {
    display: flex;

    min-height: 86px;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.zion-support-brand {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: var(--zion-text) !important;

    text-decoration: none !important;
}

.zion-support-brand__mark {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--zion-green-hover),
            var(--zion-green-dark)
        );

    box-shadow:
        0 12px 28px rgba(8, 115, 77, 0.26);

    color: #172019;

    font-size: 25px;
    font-weight: 950;
    line-height: 1;
}

.zion-support-brand__text {
    display: flex;
    flex-direction: column;
}

.zion-support-brand__text strong {
    color: var(--zion-text);

    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.zion-support-brand__text small {
    margin-top: 4px;

    color: var(--zion-muted);

    font-size: 11px;
    line-height: 1.3;
}

.zion-support-brandbar__actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   7. CUSTOM HEADER BUTTONS
   ========================================================= */

.zion-support-header-button {
    display: inline-flex;

    min-height: 42px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    text-decoration: none !important;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.zion-support-header-button:hover,
.zion-support-header-button:focus {
    transform: translateY(-2px);
}

.zion-support-header-button--primary,
.zion-support-header-button--primary:visited {
    border-color: var(--zion-green) !important;

    background: var(--zion-green) !important;
    background-color: var(--zion-green) !important;
    background-image: none !important;

    color: #172019 !important;
    -webkit-text-fill-color: #172019 !important;
}

.zion-support-header-button--primary:hover,
.zion-support-header-button--primary:focus,
.zion-support-header-button--primary:active {
    border-color: var(--zion-green-hover) !important;

    background: var(--zion-green-hover) !important;
    background-color: var(--zion-green-hover) !important;
    background-image: none !important;

    color: #172019 !important;
    -webkit-text-fill-color: #172019 !important;
}

.zion-support-header-button--secondary,
.zion-support-header-button--secondary:visited {
    border-color: var(--zion-border-strong) !important;

    background: var(--zion-surface) !important;
    background-color: var(--zion-surface) !important;
    background-image: none !important;

    color: var(--zion-text-soft) !important;
    -webkit-text-fill-color: var(--zion-text-soft) !important;
}

.zion-support-header-button--secondary:hover,
.zion-support-header-button--secondary:focus {
    border-color: var(--zion-green-border) !important;

    background: var(--zion-green-soft) !important;
    background-color: var(--zion-green-soft) !important;
    background-image: none !important;

    color: var(--zion-green) !important;
    -webkit-text-fill-color: var(--zion-green) !important;
}

.zion-support-new-discussion {
    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;
}


/* =========================================================
   8. NATIVE FLARUM HEADER
   ========================================================= */

.App-header {
    border-bottom: 1px solid var(--zion-border) !important;

    background: rgba(13, 17, 14, 0.94) !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.20) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.Header-logo {
    max-height: 34px;
}

.Header-title {
    color: var(--zion-text) !important;
    font-weight: 850 !important;
}

.Header-primary .Button,
.Header-secondary .Button {
    color: var(--zion-text-soft) !important;
}

.Header-primary .Button:hover,
.Header-secondary .Button:hover {
    background: var(--zion-green-soft) !important;
    color: var(--zion-green) !important;
}

.Header-controls .Button,
.Header-navigation .Button {
    border-radius: 10px !important;
}


/* =========================================================
   9. SEARCH
   ========================================================= */

.Search-input input {
    border: 1px solid var(--zion-border) !important;
    border-radius: 999px !important;

    background: var(--zion-surface) !important;

    color: var(--zion-text) !important;

    box-shadow: none !important;
}

.Search-input input::placeholder {
    color: var(--zion-muted-dark) !important;
}

.Search-input input:focus {
    border-color: var(--zion-green-border) !important;

    background: var(--zion-surface-light) !important;

    box-shadow:
        0 0 0 4px rgba(158, 220, 56, 0.08) !important;
}


/* =========================================================
   10. MAIN LAYOUT
   ========================================================= */

.IndexPage {
    padding-bottom: 70px;
}

.IndexPage-toolbar {
    margin-bottom: 18px;
}

.IndexPage-toolbar-view,
.IndexPage-toolbar-action {
    gap: 8px;
}


/* =========================================================
   11. HERO
   ========================================================= */

.Hero,
.WelcomeHero {
    position: relative;

    overflow: hidden;

    border-bottom: 1px solid var(--zion-border);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(158, 220, 56, 0.16),
            transparent 26rem
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(8, 115, 77, 0.16),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #111611,
            #1d251f
        ) !important;

    color: var(--zion-text);
}

.Hero::before,
.WelcomeHero::before {
    position: absolute;

    top: -110px;
    right: -100px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(158, 220, 56, 0.14);
    border-radius: 50%;

    content: "";
}

.Hero::after,
.WelcomeHero::after {
    position: absolute;

    right: 30px;
    bottom: -150px;

    width: 300px;
    height: 300px;

    border: 55px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;

    content: "";
}

.Hero .container,
.WelcomeHero .container {
    position: relative;
    z-index: 2;

    padding-top: 54px;
    padding-bottom: 54px;
}

.Hero-title,
.WelcomeHero-title {
    color: var(--zion-text) !important;

    font-size: clamp(30px, 4vw, 48px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em;
    line-height: 1.06;
}

.Hero-subtitle,
.WelcomeHero-subtitle {
    max-width: 760px;

    color: var(--zion-muted) !important;

    font-size: 16px !important;
    line-height: 1.75;
}


/* =========================================================
   12. NATIVE BUTTONS
   ========================================================= */

.Button {
    border-radius: 10px !important;

    font-weight: 750 !important;

    transition:
        transform 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}

.Button:hover {
    transform: translateY(-1px);
}

.Button--primary,
.Button--primary:visited {
    border-color: var(--zion-green) !important;

    background: var(--zion-green) !important;
    background-color: var(--zion-green) !important;
    background-image: none !important;

    color: #172019 !important;
    -webkit-text-fill-color: #172019 !important;

    box-shadow:
        0 10px 24px rgba(8, 115, 77, 0.22) !important;
}

.Button--primary:hover,
.Button--primary:focus,
.Button--primary:active {
    border-color: var(--zion-green-hover) !important;

    background: var(--zion-green-hover) !important;
    background-color: var(--zion-green-hover) !important;
    background-image: none !important;

    color: #172019 !important;
    -webkit-text-fill-color: #172019 !important;
}

.Button--primary *,
.Button--primary:hover *,
.Button--primary:focus * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.Button:not(.Button--primary) {
    border-color: var(--zion-border) !important;

    background: var(--zion-surface) !important;
    background-color: var(--zion-surface) !important;

    color: var(--zion-text-soft) !important;
}

.Button:not(.Button--primary):hover,
.Button:not(.Button--primary):focus {
    border-color: var(--zion-green-border) !important;

    background: var(--zion-surface-light) !important;
    background-color: var(--zion-surface-light) !important;

    color: var(--zion-green) !important;
}


/* =========================================================
   13. SIDEBAR
   ========================================================= */

.IndexPage-nav .item-newDiscussion .Button {
    min-height: 42px;

    border-radius: 12px !important;
}

.IndexPage-nav .Dropdown-menu,
.sideNav .Dropdown-menu {
    padding: 7px !important;

    border: 1px solid var(--zion-border);
    border-radius: 14px !important;

    background: rgba(35, 38, 46, 0.82);

    box-shadow: var(--zion-shadow-soft);
}

.sideNav li {
    margin-bottom: 2px !important;
}

.sideNav .Button {
    min-height: 34px !important;

    justify-content: flex-start;

    padding: 6px 10px !important;

    border-color: transparent !important;
    border-radius: 8px !important;

    background: transparent !important;

    color: var(--zion-muted) !important;

    font-size: 12px !important;
}

.sideNav .Button:hover {
    background: var(--zion-green-soft) !important;
    color: var(--zion-green) !important;
}

.sideNav .active .Button {
    background: var(--zion-green-soft) !important;
    color: var(--zion-green) !important;
}


/* =========================================================
   14. DISCUSSION LIST CONTAINER
   ========================================================= */

.DiscussionList {
    position: relative !important;

    overflow: visible !important;

    border: 1px solid var(--zion-border) !important;
    border-radius: var(--zion-radius-lg) !important;

    background: rgba(35, 38, 46, 0.58) !important;

    box-shadow: var(--zion-shadow-soft) !important;
}

.DiscussionList > ul,
.DiscussionList-discussions {
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border-radius: inherit !important;
}


/* =========================================================
   15. DISCUSSION LIST ITEMS
   ========================================================= */

.DiscussionListItem {
    position: relative !important;
    z-index: 1 !important;

    overflow: visible !important;

    margin: 0 !important;

    border-bottom: 1px solid var(--zion-border) !important;

    background: transparent !important;
}

.DiscussionListItem:first-child,
.DiscussionListItem:first-child .DiscussionListItem-content {
    border-radius:
        var(--zion-radius-lg)
        var(--zion-radius-lg)
        0
        0 !important;
}

.DiscussionListItem:last-child,
.DiscussionListItem:last-child .DiscussionListItem-content {
    border-bottom: 0 !important;

    border-radius:
        0
        0
        var(--zion-radius-lg)
        var(--zion-radius-lg) !important;
}

.DiscussionListItem:only-child,
.DiscussionListItem:only-child .DiscussionListItem-content {
    border-radius: var(--zion-radius-lg) !important;
}

.DiscussionListItem:hover .DiscussionListItem-content,
.DiscussionListItem:focus-within .DiscussionListItem-content {
    background: rgba(255, 255, 255, 0.035) !important;
}


/* =========================================================
   16. DISCUSSION ITEM CONTENT
   ========================================================= */

.DiscussionListItem-content {
    position: relative !important;

    min-height: 70px !important;

    margin: 0 !important;

    padding:
        13px
        58px
        13px
        58px !important;

    overflow: visible !important;

    background: transparent !important;
}

.DiscussionListItem-title {
    display: block !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    max-width: none !important;

    color: var(--zion-text-soft) !important;

    font-size: 15px !important;
    font-weight: 780 !important;
    line-height: 1.32 !important;

    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.DiscussionListItem:hover .DiscussionListItem-title {
    color: var(--zion-green) !important;
}

.DiscussionListItem-info {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 3px 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    color: var(--zion-muted-dark) !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
}

.DiscussionListItem-author {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;

    margin: 0 !important;
}

.DiscussionListItem-tags {
    margin-left: 5px !important;
}

.DiscussionListItem .TagLabel {
    padding: 3px 8px !important;

    font-size: 9px !important;
    line-height: 1.15 !important;
}

.DiscussionListItem-count,
.DiscussionListItem-relevantPosts {
    color: var(--zion-muted-dark) !important;
}

.DiscussionListItem.unread {
    background:
        linear-gradient(
            90deg,
            rgba(158, 220, 56, 0.055),
            transparent 40%
        ) !important;
}

.DiscussionListItem.unread .DiscussionListItem-title {
    color: var(--zion-text) !important;
}


/* =========================================================
   17. THREE DOTS BUTTON
   ========================================================= */

.DiscussionListItem-controls {
    position: absolute !important;
    z-index: 300 !important;

    top: 50% !important;
    right: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: translateY(-50%) !important;
}

.DiscussionListItem-controls .Dropdown,
.DiscussionListItem .item-controls .Dropdown {
    position: relative !important;
    z-index: 301 !important;

    margin: 0 !important;
}

.DiscussionListItem-controls .Button,
.DiscussionListItem .item-controls .Button {
    display: inline-flex !important;

    width: 32px !important;
    min-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 8px !important;
}

.DiscussionListItem:hover,
.DiscussionListItem:focus-within {
    z-index: 500 !important;
}


/* =========================================================
   18. DISCUSSION DROPDOWN
   ========================================================= */

.DiscussionListItem-controls .Dropdown-menu,
.DiscussionListItem .item-controls .Dropdown-menu {
    position: absolute !important;
    z-index: 999999 !important;

    min-width: 190px !important;
    max-width: 260px !important;

    margin-top: 5px !important;
    padding: 5px !important;

    overflow: visible !important;

    border: 1px solid var(--zion-border) !important;
    border-radius: 10px !important;

    background: var(--zion-surface) !important;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.42) !important;
}


/* =========================================================
   19. TAGS
   ========================================================= */

.TagLabel {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px !important;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.02em;
}

.TagLabel.colored {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.TagTile {
    border: 1px solid var(--zion-border) !important;
    border-radius: var(--zion-radius-lg) !important;

    background: var(--zion-surface) !important;

    box-shadow: var(--zion-shadow-soft);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.TagTile:hover {
    transform: translateY(-4px);

    border-color: var(--zion-green-border) !important;

    box-shadow: var(--zion-shadow);
}


/* =========================================================
   20. DISCUSSION PAGE
   ========================================================= */

.DiscussionHero {
    border-bottom: 1px solid var(--zion-border) !important;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(158, 220, 56, 0.11),
            transparent 25rem
        ),
        #151b16 !important;
}

.DiscussionHero-title {
    color: var(--zion-text) !important;

    font-weight: 880 !important;
    letter-spacing: -0.025em;
}

.Post {
    border-bottom: 1px solid var(--zion-border) !important;
}

.Post-body {
    color: var(--zion-text-soft) !important;

    font-size: 15px;
    line-height: 1.8;
}

.Post-body h1,
.Post-body h2,
.Post-body h3,
.Post-body h4 {
    color: var(--zion-text) !important;
}

.Post-body a {
    color: var(--zion-green) !important;
}

.Post-body blockquote {
    border-left: 3px solid var(--zion-green) !important;

    background: var(--zion-green-soft) !important;

    color: var(--zion-text-soft) !important;
}

.PostUser-name {
    color: var(--zion-text) !important;
}

.PostUser-badges .Badge {
    box-shadow: none !important;
}


/* =========================================================
   21. COMPOSER
   ========================================================= */

.Composer {
    overflow: hidden;

    border: 1px solid var(--zion-border) !important;
    border-radius:
        var(--zion-radius-lg)
        var(--zion-radius-lg)
        0
        0 !important;

    background: var(--zion-surface) !important;

    box-shadow:
        0 -20px 55px rgba(0, 0, 0, 0.32) !important;
}

.Composer-header {
    border-bottom: 1px solid var(--zion-border) !important;

    background: var(--zion-bg-deep) !important;
}

.ComposerBody-header h3,
.Composer-title {
    color: var(--zion-text) !important;
}

.TextEditor-editor,
.FormControl {
    border-color: var(--zion-border) !important;

    background: var(--zion-bg-deep) !important;

    color: var(--zion-text-soft) !important;
}

.TextEditor-editor:focus,
.FormControl:focus {
    border-color: var(--zion-green-border) !important;

    box-shadow:
        0 0 0 4px rgba(158, 220, 56, 0.08) !important;
}


/* =========================================================
   22. COMPACT DROPDOWNS
   ========================================================= */

.Dropdown-menu,
.SelectDropdown-menu,
.Modal-content {
    border: 1px solid var(--zion-border) !important;

    background: var(--zion-surface) !important;

    box-shadow: var(--zion-shadow) !important;

    color: var(--zion-text-soft) !important;
}

.Dropdown-menu,
.SelectDropdown-menu {
    padding: 5px !important;

    border-radius: 10px !important;
}

.Dropdown-menu > li,
.SelectDropdown-menu > li {
    margin: 0 !important;
}

.Dropdown-menu > li > a,
.Dropdown-menu > li > button,
.SelectDropdown-menu > li > a,
.SelectDropdown-menu > li > button {
    display: flex !important;

    min-height: 32px !important;

    align-items: center !important;

    padding: 6px 9px !important;

    border-radius: 7px !important;

    color: var(--zion-text-soft) !important;

    font-size: 12px !important;
    line-height: 1.25 !important;
}

.Dropdown-menu > li > a:hover,
.Dropdown-menu > li > button:hover,
.SelectDropdown-menu > li > a:hover,
.SelectDropdown-menu > li > button:hover {
    background: var(--zion-green-soft) !important;

    color: var(--zion-green) !important;
}

.Dropdown-menu > li > a .icon,
.Dropdown-menu > li > button .icon,
.SelectDropdown-menu > li > a .icon,
.SelectDropdown-menu > li > button .icon {
    width: 17px !important;

    margin-right: 7px !important;

    font-size: 13px !important;
    text-align: center !important;
}

.Dropdown-menu .Dropdown-separator,
.Dropdown-menu .divider {
    margin: 4px 0 !important;

    border-color: var(--zion-border) !important;
}

.Dropdown.open,
.Dropdown--split.open,
.Dropdown.show {
    z-index: 999990 !important;
}

.Dropdown-menu,
.SelectDropdown-menu,
.ContextMenu,
.Menu {
    z-index: 999999 !important;
}


/* =========================================================
   23. MODALS
   ========================================================= */

.Modal-content {
    border-radius: var(--zion-radius-lg) !important;
}

.Modal-header {
    border-bottom: 1px solid var(--zion-border) !important;

    background: var(--zion-bg-deep) !important;
}

.Modal-title {
    color: var(--zion-text) !important;

    font-weight: 850;
}

.Modal-footer {
    border-top-color: var(--zion-border) !important;
}


/* =========================================================
   24. ALERTS
   ========================================================= */

.Alert {
    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    box-shadow: var(--zion-shadow-soft);
}

.Alert--success {
    border-color: rgba(66, 204, 135, 0.30);

    background: var(--zion-success-soft) !important;

    color: #a6efca !important;
}

.Alert--error {
    border-color: rgba(226, 90, 90, 0.32);

    background: var(--zion-danger-soft) !important;

    color: #ffb2b2 !important;
}


/* =========================================================
   25. PAGINATION
   ========================================================= */

.Pagination .Button {
    border-radius: 9px !important;
}

.Pagination .active .Button,
.Pagination .Button.active {
    border-color: var(--zion-green) !important;

    background: var(--zion-green) !important;

    color: #172019 !important;
}


/* =========================================================
   26. USER PROFILE
   ========================================================= */

.UserHero {
    border-bottom: 1px solid var(--zion-border);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(158, 220, 56, 0.11),
            transparent 24rem
        ),
        #151b16 !important;
}

.UserCard {
    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-lg);

    background: var(--zion-surface);

    box-shadow: var(--zion-shadow-soft);
}


/* =========================================================
   27. CUSTOM FOOTER
   ========================================================= */

.zion-support-footer {
    position: relative;

    margin-top: 70px;

    border-top: 1px solid var(--zion-border);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(158, 220, 56, 0.08),
            transparent 25rem
        ),
        #0d110e;

    color: var(--zion-muted);
}

.zion-support-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        repeat(3, minmax(150px, 1fr));

    gap: 50px;

    padding: 66px 0 48px;
}

.zion-support-brand--footer {
    margin-bottom: 20px;
}

.zion-support-footer__brand p {
    max-width: 420px;

    margin: 0;

    color: var(--zion-muted);

    font-size: 13px;
    line-height: 1.75;
}

.zion-support-footer__badges {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
}

.zion-support-footer__badges span {
    display: inline-flex;

    min-height: 29px;

    align-items: center;

    padding: 0 10px;

    border: 1px solid var(--zion-border);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--zion-muted);

    font-size: 10px;
    font-weight: 750;
}

.zion-support-footer__column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}

.zion-support-footer__column h3 {
    margin: 0 0 9px;

    color: var(--zion-text) !important;

    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zion-support-footer__column a {
    color: var(--zion-muted) !important;

    font-size: 12px;
    line-height: 1.5;

    text-decoration: none !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.zion-support-footer__column a:hover,
.zion-support-footer__column a:focus {
    color: var(--zion-green) !important;

    transform: translateX(3px);
}

.zion-support-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 22px 0 28px;

    border-top: 1px solid var(--zion-border);
}

.zion-support-footer__bottom p {
    margin: 0;

    color: var(--zion-muted-dark);

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   28. SCROLLBAR
   ========================================================= */

* {
    scrollbar-width: thin;

    scrollbar-color:
        var(--zion-surface-light)
        var(--zion-bg-deep);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--zion-bg-deep);
}

*::-webkit-scrollbar-thumb {
    border: 2px solid var(--zion-bg-deep);
    border-radius: 999px;

    background: var(--zion-surface-light);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--zion-green-dark);
}


/* =========================================================
   29. TABLET / SPLIT VIEW
   ========================================================= */

@media (max-width: 900px) {

    .zion-support-topbar__message,
    .zion-support-topbar__separator {
        display: none;
    }

    .zion-support-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .zion-support-footer__brand {
        grid-column: 1 / -1;
    }

    /*
     * În split view lista devine mai îngustă.
     * Reducem paddingul fără să mutăm butonul cu trei puncte.
     */
    .DiscussionListItem-content {
        min-height: 76px !important;

        padding:
            13px
            44px
            13px
            54px !important;
    }

    .DiscussionListItem-title {
        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.32 !important;
    }

    .DiscussionListItem-author {
        top: 14px !important;
        left: 12px !important;
    }

    .DiscussionListItem-controls {
        top: 12px !important;
        right: 6px !important;

        transform: none !important;
    }
}


/* =========================================================
   30. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .zion-support-container {
        width: min(
            100% - 26px,
            var(--zion-container)
        );
    }

    .zion-support-topbar .zion-support-container {
        min-height: 42px;
    }

    .zion-support-topbar__nav {
        display: none;
    }

    .zion-support-brandbar__inner {
        min-height: 72px;
    }

    .zion-support-brand__mark {
        width: 41px;
        height: 41px;

        border-radius: 12px;

        font-size: 21px;
    }

    .zion-support-brand__text strong {
        font-size: 15px;
    }

    .zion-support-brand__text small {
        display: none;
    }

    .zion-support-brandbar__actions {
        display: none;
    }

    .Hero .container,
    .WelcomeHero .container {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .Hero-title,
    .WelcomeHero-title {
        font-size: 31px !important;
    }

    .Hero-subtitle,
    .WelcomeHero-subtitle {
        font-size: 14px !important;
    }

    .DiscussionList {
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }

    .DiscussionListItem:first-child,
    .DiscussionListItem:first-child .DiscussionListItem-content,
    .DiscussionListItem:last-child,
    .DiscussionListItem:last-child .DiscussionListItem-content,
    .DiscussionListItem:only-child,
    .DiscussionListItem:only-child .DiscussionListItem-content {
        border-radius: 0 !important;
    }

    .DiscussionListItem-content {
        padding:
            12px
            42px
            12px
            52px !important;
    }

    .DiscussionListItem-title {
        font-size: 14px !important;
    }

    .DiscussionListItem-tags {
        position: static !important;

        display: flex !important;

        margin-top: 7px !important;
        margin-left: 0 !important;
    }

    .DiscussionListItem-controls {
        top: 9px !important;
        right: 5px !important;

        transform: none !important;
    }

    .zion-support-footer__grid {
        grid-template-columns: 1fr;

        gap: 36px;

        padding-top: 50px;
    }

    .zion-support-footer__brand {
        grid-column: auto;
    }

    .zion-support-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   31. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
.Button:focus-visible,
.FormControl:focus-visible {
    outline: 2px solid var(--zion-green) !important;
    outline-offset: 3px !important;
}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   ZION SUPPORT HUB — FoF Pages
   Documentație, Bug Report, Versiuni
   ========================================================= */

.zion-page {
    --page-accent: var(--zion-green);

    max-width: 1040px;

    margin: 38px auto 80px;
    padding: 0 20px;

    color: var(--zion-text-soft);
}

.zion-page * {
    box-sizing: border-box;
}

.zion-page h1,
.zion-page h2,
.zion-page h3 {
    color: var(--zion-text);
}

.zion-page p {
    color: var(--zion-muted);

    line-height: 1.75;
}

.zion-page code {
    padding: 2px 6px;

    border-radius: 5px;

    font-size: 0.92em;
}


/* Hero */

.zion-page-hero {
    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    overflow: hidden;

    margin-bottom: 28px;
    padding: 38px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-xl);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(158, 220, 56, 0.15),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #111611,
            #202720
        );

    box-shadow: var(--zion-shadow-soft);
}

.zion-page-hero::after {
    position: absolute;

    right: -90px;
    bottom: -145px;

    width: 300px;
    height: 300px;

    border: 52px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;

    content: "";
}

.zion-page-hero__icon {
    position: relative;
    z-index: 2;

    display: grid;

    width: 72px;
    min-width: 72px;
    height: 72px;

    place-items: center;

    border: 1px solid var(--zion-green-border);
    border-radius: 20px;

    background: var(--zion-green-soft);

    color: var(--zion-green);

    font-size: 29px;
}

.zion-page-hero__icon--danger {
    border-color: rgba(226, 90, 90, 0.32);

    background: var(--zion-danger-soft);

    color: var(--zion-danger);
}

.zion-page-hero__icon--release {
    border-color: rgba(241, 189, 75, 0.32);

    background: var(--zion-warning-soft);

    color: var(--zion-warning);
}

.zion-page-hero__content {
    position: relative;
    z-index: 2;
}

.zion-page-hero h1 {
    margin: 5px 0 10px;

    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.zion-page-hero p {
    max-width: 720px;

    margin: 0;

    font-size: 15px;
}


/* Shared headings */

.zion-page-eyebrow {
    display: block;

    color: var(--zion-green);

    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.zion-page-section {
    margin-top: 28px;
    padding: 30px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-lg);

    background: rgba(35, 38, 46, 0.66);

    box-shadow: var(--zion-shadow-soft);
}

.zion-page-section__heading {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}

.zion-page-section__heading h2 {
    margin: 3px 0 0;

    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.zion-page-section__icon {
    display: grid;

    width: 43px;
    min-width: 43px;
    height: 43px;

    place-items: center;

    border: 1px solid var(--zion-green-border);
    border-radius: 12px;

    background: var(--zion-green-soft);

    color: var(--zion-green);

    font-size: 16px;
}


/* Notices */

.zion-page-notice {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin: 25px 0;
    padding: 18px 20px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: var(--zion-surface);

    box-shadow: var(--zion-shadow-soft);
}

.zion-page-notice > i {
    margin-top: 3px;

    font-size: 18px;
}

.zion-page-notice strong {
    display: block;

    margin-bottom: 4px;

    color: var(--zion-text);
}

.zion-page-notice p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}

.zion-page-notice--info {
    border-color: rgba(79, 130, 255, 0.28);

    background: var(--zion-info-soft);
}

.zion-page-notice--info > i {
    color: var(--zion-info);
}

.zion-page-notice--warning {
    border-color: rgba(241, 189, 75, 0.28);

    background: var(--zion-warning-soft);
}

.zion-page-notice--warning > i {
    color: var(--zion-warning);
}

.zion-page-notice--danger {
    border-color: rgba(226, 90, 90, 0.30);

    background: var(--zion-danger-soft);
}

.zion-page-notice--danger > i {
    color: var(--zion-danger);
}


/* Feature cards */

.zion-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.zion-feature-card {
    padding: 21px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.45);
}

.zion-feature-card > i {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    margin-bottom: 15px;

    border-radius: 11px;

    background: var(--zion-green-soft);

    color: var(--zion-green);
}

.zion-feature-card h3 {
    margin: 0 0 7px;

    font-size: 14px;
    font-weight: 800;
}

.zion-feature-card p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}


/* Requirements */

.zion-requirements {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.zion-requirement {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 16px;

    border: 1px solid var(--zion-border);
    border-radius: 10px;

    background: rgba(16, 19, 16, 0.45);
}

.zion-requirement span {
    color: var(--zion-muted);

    font-size: 12px;
}

.zion-requirement strong {
    color: var(--zion-text);

    font-size: 12px;
}


/* Steps */

.zion-step-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.zion-step-list li {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 16px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.42);
}

.zion-step-list__number {
    display: grid;

    width: 31px;
    min-width: 31px;
    height: 31px;

    place-items: center;

    border-radius: 9px;

    background: var(--zion-green);

    color: #172019;

    font-size: 11px;
    font-weight: 900;
}

.zion-step-list strong {
    color: var(--zion-text);

    font-size: 13px;
}

.zion-step-list p {
    margin: 5px 0 0;

    font-size: 12px;
    line-height: 1.6;
}


/* Check grids */

.zion-check-grid,
.zion-danger-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.zion-check-grid > div,
.zion-danger-grid > span {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 15px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);

    color: var(--zion-muted);

    font-size: 12px;
}

.zion-check-grid i {
    color: var(--zion-success);
}

.zion-danger-grid i {
    color: var(--zion-danger);
}


/* Checklist */

.zion-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.zion-checklist label {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 15px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);

    color: var(--zion-muted);

    font-size: 12px;
    line-height: 1.55;
}

.zion-checklist input {
    margin-top: 3px;

    accent-color: var(--zion-green);
}


/* Tag examples */

.zion-tag-example {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.zion-demo-tag {
    display: inline-flex;

    min-height: 34px;

    align-items: center;

    gap: 7px;

    padding: 0 12px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}

.zion-demo-tag--bug {
    background: #e25a5a;
}

.zion-demo-tag--plugin {
    background: #6c5ce7;
}

.zion-tag-plus {
    color: var(--zion-muted);

    font-size: 15px;
    font-weight: 900;
}

.zion-page-muted {
    margin: 15px 0 0 !important;

    font-size: 11px;
}


/* Report cards */

.zion-report-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.zion-report-card {
    position: relative;

    overflow: hidden;

    padding: 21px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.42);
}

.zion-report-card__number {
    position: absolute;

    top: 10px;
    right: 14px;

    color: rgba(255, 255, 255, 0.06);

    font-size: 38px;
    font-weight: 950;
}

.zion-report-card h3 {
    position: relative;

    margin: 0 0 12px;

    font-size: 14px;
}

.zion-report-card ul {
    position: relative;

    margin: 0;
    padding-left: 18px;

    color: var(--zion-muted);

    font-size: 12px;
    line-height: 1.75;
}


/* Code preview */

.zion-code-preview {
    overflow: auto;

    border-radius: var(--zion-radius);
}

.zion-code-preview pre {
    margin: 0 !important;
    padding: 20px !important;

    font-size: 12px;
    line-height: 1.65;
}


/* Status flow */

.zion-status-flow {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 9px;
}

.zion-status-flow span {
    display: inline-flex;

    min-height: 32px;

    align-items: center;

    padding: 0 11px;

    border: 1px solid var(--zion-border);
    border-radius: 999px;

    background: rgba(16, 19, 16, 0.55);

    color: var(--zion-text-soft);

    font-size: 10px;
    font-weight: 800;
}

.zion-status-flow i {
    color: var(--zion-muted-dark);

    font-size: 10px;
}


/* Releases */

.zion-release-summary {
    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 30px;

    margin-bottom: 28px;
    padding: 28px 30px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-lg);

    background: rgba(35, 38, 46, 0.66);

    box-shadow: var(--zion-shadow-soft);
}

.zion-release-summary h2 {
    margin: 5px 0 8px;

    color: var(--zion-text);

    font-size: 23px;
    font-weight: 850;
}

.zion-release-summary p {
    margin: 0;

    font-size: 12px;
}

.zion-release-summary__version {
    min-width: 150px;

    padding: 18px;

    border: 1px solid rgba(241, 189, 75, 0.25);
    border-radius: var(--zion-radius);

    background: var(--zion-warning-soft);

    text-align: center;
}

.zion-release-summary__version span {
    display: block;

    margin-bottom: 5px;

    color: var(--zion-muted);

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zion-release-summary__version strong {
    color: var(--zion-warning);

    font-size: 30px;
    font-weight: 900;
}

.zion-release-timeline {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding-left: 25px;
}

.zion-release-timeline::before {
    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 6px;

    width: 1px;

    background: var(--zion-border-strong);

    content: "";
}

.zion-release-entry {
    position: relative;
}

.zion-release-entry__marker {
    position: absolute;

    top: 20px;
    left: -24px;

    width: 11px;
    height: 11px;

    border: 2px solid var(--zion-surface);
    border-radius: 50%;

    background: var(--zion-muted-dark);

    box-shadow:
        0 0 0 3px var(--zion-border);
}

.zion-release-entry--current .zion-release-entry__marker {
    background: var(--zion-green);

    box-shadow:
        0 0 0 4px var(--zion-green-soft);
}

.zion-release-entry__content {
    padding: 20px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.42);
}

.zion-release-entry__content h3 {
    margin: 0 0 12px;

    font-size: 17px;
    font-weight: 850;
}

.zion-release-entry__content ul {
    margin: 0;
    padding-left: 18px;

    color: var(--zion-muted);

    font-size: 12px;
    line-height: 1.75;
}

.zion-release-badge {
    display: inline-flex;

    margin-bottom: 7px;
    padding: 4px 8px;

    border-radius: 999px;

    background: var(--zion-green-soft);

    color: var(--zion-green);

    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}


/* Actions */

.zion-page-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}

.zion-page-button {
    display: inline-flex;

    min-height: 43px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 850;

    cursor: pointer;
    text-decoration: none !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.zion-page-button:hover {
    transform: translateY(-2px);
}

.zion-page-button--primary {
    border-color: var(--zion-green) !important;

    background: var(--zion-green) !important;

    color: #172019 !important;
}

.zion-page-button--secondary {
    border-color: var(--zion-border-strong) !important;

    background: var(--zion-surface) !important;

    color: var(--zion-text-soft) !important;
}

.zion-page-button--danger {
    border-color: var(--zion-danger) !important;

    background: var(--zion-danger) !important;

    color: #ffffff !important;
}


/* Responsive */

@media (max-width: 767px) {

    .zion-page {
        margin-top: 22px;
        padding: 0 13px;
    }

    .zion-page-hero {
        align-items: flex-start;

        padding: 25px;

        border-radius: var(--zion-radius-lg);
    }

    .zion-page-hero__icon {
        width: 50px;
        min-width: 50px;
        height: 50px;

        border-radius: 14px;

        font-size: 20px;
    }

    .zion-page-hero h1 {
        font-size: 29px;
    }

    .zion-page-section {
        padding: 21px;
    }

    .zion-feature-grid,
    .zion-requirements,
    .zion-check-grid,
    .zion-danger-grid,
    .zion-report-grid {
        grid-template-columns: 1fr;
    }

    .zion-release-summary {
        grid-template-columns: 1fr;
    }

    .zion-release-summary__version {
        min-width: 0;
    }

    .zion-status-flow i {
        display: none;
    }

    .zion-page-actions {
        flex-direction: column;
    }

    .zion-page-button {
        width: 100%;
    }
}

/* =========================================================
   ZION SUPPORT HUB — LEGAL PAGES
   Terms, Privacy, Cookies
   ========================================================= */

.zion-legal-page {
    --legal-accent: var(--zion-green);

    max-width: 1180px;

    margin: 38px auto 90px;
    padding: 0 20px;

    color: var(--zion-text-soft);
}

.zion-legal-page *,
.zion-legal-page *::before,
.zion-legal-page *::after {
    box-sizing: border-box;
}

.zion-legal-page h1,
.zion-legal-page h2,
.zion-legal-page h3,
.zion-legal-page strong {
    color: var(--zion-text);
}

.zion-legal-page p {
    color: var(--zion-muted);

    font-size: 13px;
    line-height: 1.8;
}

.zion-legal-page a {
    color: var(--zion-green);

    text-decoration: none;
}

.zion-legal-page a:hover {
    color: var(--zion-green-hover);
}


/* Hero */

.zion-legal-hero {
    position: relative;

    display: flex;

    align-items: center;

    gap: 26px;

    overflow: hidden;

    margin-bottom: 24px;
    padding: 40px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-xl);

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(158, 220, 56, 0.15),
            transparent 25rem
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(8, 115, 77, 0.12),
            transparent 23rem
        ),
        linear-gradient(
            135deg,
            #101510,
            #202720
        );

    box-shadow: var(--zion-shadow-soft);
}

.zion-legal-hero::before {
    position: absolute;

    top: -160px;
    right: -100px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(158, 220, 56, 0.12);
    border-radius: 50%;

    content: "";
}

.zion-legal-hero::after {
    position: absolute;

    right: 60px;
    bottom: -185px;

    width: 320px;
    height: 320px;

    border: 62px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;

    content: "";
}

.zion-legal-hero__icon {
    position: relative;
    z-index: 2;

    display: grid;

    width: 76px;
    min-width: 76px;
    height: 76px;

    place-items: center;

    border: 1px solid var(--zion-green-border);
    border-radius: 21px;

    background: var(--zion-green-soft);

    color: var(--zion-green);

    font-size: 30px;

    box-shadow:
        0 15px 32px rgba(0, 0, 0, 0.20);
}

.zion-legal-hero__icon--privacy {
    border-color: rgba(79, 130, 255, 0.32);

    background: rgba(79, 130, 255, 0.13);

    color: var(--zion-info);
}

.zion-legal-hero__icon--cookies {
    border-color: rgba(241, 189, 75, 0.32);

    background: var(--zion-warning-soft);

    color: var(--zion-warning);
}

.zion-legal-hero__content {
    position: relative;
    z-index: 2;
}

.zion-legal-eyebrow {
    display: block;

    color: var(--zion-green);

    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.zion-legal-hero h1 {
    margin: 5px 0 10px;

    font-size: clamp(31px, 4vw, 47px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.zion-legal-hero p {
    max-width: 760px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;
}

.zion-legal-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 17px;

    margin-top: 16px;
}

.zion-legal-meta span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--zion-muted-dark);

    font-size: 10px;
    font-weight: 700;
}

.zion-legal-meta i {
    color: var(--zion-green);
}


/* Summary */

.zion-legal-summary {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 24px;
    padding: 20px 22px;

    border: 1px solid var(--zion-green-border);
    border-radius: var(--zion-radius-lg);

    background:
        linear-gradient(
            135deg,
            rgba(158, 220, 56, 0.10),
            rgba(8, 115, 77, 0.05)
        );

    box-shadow: var(--zion-shadow-soft);
}

.zion-legal-summary__icon {
    display: grid;

    width: 40px;
    min-width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 11px;

    background: var(--zion-green-soft);

    color: var(--zion-green);
}

.zion-legal-summary strong {
    display: block;

    margin: 0 0 4px;

    font-size: 13px;
}

.zion-legal-summary p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}


/* Main two-column layout */

.zion-legal-layout {
    display: grid;

    grid-template-columns:
        230px
        minmax(0, 1fr);

    align-items: start;

    gap: 24px;
}

.zion-legal-toc {
    position: sticky;

    top: 85px;
}

.zion-legal-toc__inner {
    padding: 18px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-lg);

    background: rgba(35, 38, 46, 0.70);

    box-shadow: var(--zion-shadow-soft);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.zion-legal-toc__inner > strong {
    display: block;

    margin-bottom: 12px;

    color: var(--zion-text);

    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.zion-legal-toc nav {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.zion-legal-toc a {
    display: block;

    padding: 7px 9px;

    border-radius: 7px;

    color: var(--zion-muted) !important;

    font-size: 10px;
    line-height: 1.35;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
}

.zion-legal-toc a:hover,
.zion-legal-toc a:focus {
    background: var(--zion-green-soft);

    color: var(--zion-green) !important;

    transform: translateX(2px);
}


/* Content */

.zion-legal-content {
    min-width: 0;
}

.zion-legal-section {
    position: relative;

    scroll-margin-top: 100px;

    margin-bottom: 16px;
    padding: 29px;

    overflow: hidden;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius-lg);

    background: rgba(35, 38, 46, 0.64);

    box-shadow: var(--zion-shadow-soft);
}

.zion-legal-section::after {
    position: absolute;

    top: 0;
    right: 0;

    width: 110px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--zion-green)
        );

    content: "";
}

.zion-legal-section__number {
    position: absolute;

    top: 13px;
    right: 18px;

    color: rgba(255, 255, 255, 0.04);

    font-size: 48px;
    font-weight: 950;
    line-height: 1;
}

.zion-legal-section h2 {
    position: relative;

    margin: 0 0 17px;
    padding-right: 58px;

    font-size: 21px;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.zion-legal-section h3 {
    margin: 0 0 8px;

    font-size: 14px;
    font-weight: 800;
}

.zion-legal-section p {
    position: relative;

    margin: 0 0 14px;
}

.zion-legal-section p:last-child {
    margin-bottom: 0;
}

.zion-legal-muted {
    color: var(--zion-muted-dark) !important;

    font-size: 10px !important;
}


/* Lists */

.zion-legal-list {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin: 14px 0 17px;
    padding: 0;

    list-style: none;
}

.zion-legal-list li {
    position: relative;

    padding-left: 22px;

    color: var(--zion-muted);

    font-size: 12px;
    line-height: 1.65;
}

.zion-legal-list li::before {
    position: absolute;

    top: 0.68em;
    left: 4px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--zion-green);

    content: "";
}

.zion-legal-list--check li::before {
    top: 0.18em;

    width: auto;
    height: auto;

    border-radius: 0;

    background: transparent;

    color: var(--zion-success);

    content: "✓";

    font-weight: 900;
}


/* Identity */

.zion-legal-identity {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin: 18px 0;
}

.zion-legal-identity > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 13px 15px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);
}

.zion-legal-identity span {
    color: var(--zion-muted-dark);

    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.zion-legal-identity strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}


/* Callouts */

.zion-legal-callout {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin: 18px 0;
    padding: 16px 17px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.46);
}

.zion-legal-callout > i {
    margin-top: 3px;

    color: var(--zion-green);

    font-size: 17px;
}

.zion-legal-callout strong {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
}

.zion-legal-callout p {
    margin: 0;

    font-size: 11px;
    line-height: 1.6;
}

.zion-legal-callout--warning {
    border-color: rgba(241, 189, 75, 0.28);

    background: var(--zion-warning-soft);
}

.zion-legal-callout--warning > i {
    color: var(--zion-warning);
}

.zion-legal-callout--danger {
    border-color: rgba(226, 90, 90, 0.30);

    background: var(--zion-danger-soft);
}

.zion-legal-callout--danger > i {
    color: var(--zion-danger);
}


/* Prohibited content */

.zion-legal-prohibited-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin: 18px 0;
}

.zion-legal-prohibited-grid > div {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 14px;

    border: 1px solid rgba(226, 90, 90, 0.18);
    border-radius: 9px;

    background: rgba(226, 90, 90, 0.07);

    color: var(--zion-muted);

    font-size: 11px;
}

.zion-legal-prohibited-grid i {
    width: 17px;

    color: var(--zion-danger);

    text-align: center;
}


/* Contact card */

.zion-legal-contact-card {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-width: 300px;

    margin-top: 8px;
    padding: 14px 17px;

    border: 1px solid var(--zion-green-border);
    border-radius: var(--zion-radius);

    background: var(--zion-green-soft);

    color: var(--zion-text-soft) !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.zion-legal-contact-card:hover {
    transform: translateY(-2px);

    border-color: var(--zion-green);

    background: rgba(158, 220, 56, 0.17);
}

.zion-legal-contact-card > i {
    display: grid;

    width: 38px;
    min-width: 38px;
    height: 38px;

    place-items: center;

    border-radius: 10px;

    background: var(--zion-green);

    color: #172019;
}

.zion-legal-contact-card div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.zion-legal-contact-card span {
    color: var(--zion-muted);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.zion-legal-contact-card strong {
    font-size: 12px;
}


/* Privacy principles */

.zion-privacy-principles {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 24px;
}

.zion-privacy-principles > div {
    display: flex;
    flex-direction: column;

    padding: 17px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(35, 38, 46, 0.64);

    box-shadow: var(--zion-shadow-soft);
}

.zion-privacy-principles i {
    margin-bottom: 12px;

    color: var(--zion-info);

    font-size: 18px;
}

.zion-privacy-principles strong {
    margin-bottom: 4px;

    font-size: 11px;
}

.zion-privacy-principles span {
    color: var(--zion-muted-dark);

    font-size: 9px;
    line-height: 1.5;
}


/* Data categories and rights */

.zion-data-category-grid,
.zion-rights-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 17px 0;
}

.zion-data-category-grid article,
.zion-rights-grid article {
    padding: 17px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(16, 19, 16, 0.42);
}

.zion-data-category-grid article > i,
.zion-rights-grid article > i {
    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

    margin-bottom: 12px;

    border-radius: 9px;

    background: rgba(79, 130, 255, 0.12);

    color: var(--zion-info);
}

.zion-data-category-grid h3,
.zion-rights-grid h3 {
    margin-bottom: 8px;
}

.zion-data-category-grid ul {
    margin: 0;
    padding-left: 16px;

    color: var(--zion-muted);

    font-size: 10px;
    line-height: 1.7;
}

.zion-rights-grid p {
    margin: 0;

    font-size: 10px;
    line-height: 1.6;
}


/* Providers */

.zion-provider-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin: 18px 0;
}

.zion-provider-grid > div {
    display: grid;

    grid-template-columns:
        36px
        1fr;

    column-gap: 10px;

    padding: 13px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);
}

.zion-provider-grid i {
    grid-row: 1 / 3;

    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius: 9px;

    background: var(--zion-green-soft);

    color: var(--zion-green);
}

.zion-provider-grid strong {
    font-size: 11px;
}

.zion-provider-grid span {
    color: var(--zion-muted-dark);

    font-size: 9px;
    line-height: 1.45;
}


/* Retention */

.zion-retention-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin: 18px 0;
}

.zion-retention-grid > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 13px 15px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);
}

.zion-retention-grid span {
    color: var(--zion-muted-dark);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.zion-retention-grid strong {
    font-size: 11px;
    line-height: 1.5;
}


/* Tables */

.zion-legal-table-wrap {
    overflow-x: auto;

    margin: 18px 0;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);
}

.zion-legal-table {
    width: 100%;

    border-collapse: collapse;

    background: rgba(16, 19, 16, 0.38);
}

.zion-legal-table th,
.zion-legal-table td {
    padding: 12px 13px;

    border-bottom: 1px solid var(--zion-border);

    text-align: left;
    vertical-align: top;
}

.zion-legal-table th {
    background: rgba(255, 255, 255, 0.025);

    color: var(--zion-text);

    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.zion-legal-table td {
    color: var(--zion-muted);

    font-size: 10px;
    line-height: 1.55;
}

.zion-legal-table tr:last-child td {
    border-bottom: 0;
}

.zion-legal-table code {
    display: inline-block;

    padding: 2px 6px;

    border-radius: 5px;

    white-space: nowrap;

    font-size: 9px;
}


/* Cookie overview cards */

.zion-cookie-category-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 24px;
}

.zion-cookie-category {
    padding: 17px;

    border: 1px solid var(--zion-border);
    border-radius: var(--zion-radius);

    background: rgba(35, 38, 46, 0.64);

    box-shadow: var(--zion-shadow-soft);
}

.zion-cookie-category--required {
    border-color: var(--zion-green-border);

    background:
        linear-gradient(
            135deg,
            rgba(158, 220, 56, 0.09),
            rgba(35, 38, 46, 0.64)
        );
}

.zion-cookie-category__head {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 11px;
}

.zion-cookie-category__head > i {
    display: grid;

    width: 35px;
    min-width: 35px;
    height: 35px;

    place-items: center;

    border-radius: 9px;

    background: var(--zion-warning-soft);

    color: var(--zion-warning);
}

.zion-cookie-category--required
.zion-cookie-category__head > i {
    background: var(--zion-green-soft);

    color: var(--zion-green);
}

.zion-cookie-category h2 {
    margin: 0 0 2px;

    font-size: 12px;
    font-weight: 800;
}

.zion-cookie-category__head span {
    color: var(--zion-muted-dark);

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.zion-cookie-category p {
    margin: 0;

    font-size: 9px;
    line-height: 1.55;
}


/* Cookie status */

.zion-cookie-status {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 15px 0;
    padding: 14px 16px;

    border: 1px dashed var(--zion-warning);
    border-radius: var(--zion-radius);

    background: var(--zion-warning-soft);
}

.zion-cookie-status > i {
    color: var(--zion-warning);
}

.zion-cookie-status div {
    display: flex;
    flex-direction: column;
}

.zion-cookie-status strong {
    font-size: 11px;
}

.zion-cookie-status span {
    color: var(--zion-muted);

    font-size: 10px;
}


/* Cookie badges */

.zion-cookie-badge {
    display: inline-flex;

    align-items: center;

    padding: 4px 7px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    color: var(--zion-muted);

    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.zion-cookie-badge--required {
    background: var(--zion-green-soft);

    color: var(--zion-green);
}

.zion-cookie-badge--analytics {
    background: rgba(79, 130, 255, 0.12);

    color: var(--zion-info);
}


/* Browser management */

.zion-cookie-browser-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin: 18px 0;
}

.zion-cookie-browser-grid > div {
    display: grid;

    grid-template-columns:
        35px
        1fr;

    column-gap: 10px;

    padding: 13px;

    border: 1px solid var(--zion-border);
    border-radius: 9px;

    background: rgba(16, 19, 16, 0.42);
}

.zion-cookie-browser-grid i {
    grid-row: 1 / 3;

    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

    border-radius: 9px;

    background: var(--zion-warning-soft);

    color: var(--zion-warning);

    font-size: 16px;
}

.zion-cookie-browser-grid strong {
    font-size: 11px;
}

.zion-cookie-browser-grid span {
    color: var(--zion-muted-dark);

    font-size: 9px;
    line-height: 1.45;
}


/* Tablet */

@media (max-width: 980px) {

    .zion-legal-layout {
        grid-template-columns: 1fr;
    }

    .zion-legal-toc {
        position: static;
    }

    .zion-legal-toc nav {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .zion-privacy-principles,
    .zion-cookie-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* Mobile */

@media (max-width: 767px) {

    .zion-legal-page {
        margin-top: 22px;
        padding: 0 13px;
    }

    .zion-legal-hero {
        align-items: flex-start;

        gap: 16px;

        padding: 25px 21px;

        border-radius: var(--zion-radius-lg);
    }

    .zion-legal-hero__icon {
        width: 50px;
        min-width: 50px;
        height: 50px;

        border-radius: 14px;

        font-size: 20px;
    }

    .zion-legal-hero h1 {
        font-size: 29px;
    }

    .zion-legal-hero p {
        font-size: 12px;
    }

    .zion-legal-summary {
        padding: 17px;
    }

    .zion-legal-toc nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .zion-legal-section {
        padding: 22px 19px;
    }

    .zion-legal-section h2 {
        padding-right: 40px;

        font-size: 18px;
    }

    .zion-legal-section__number {
        right: 12px;

        font-size: 39px;
    }

    .zion-legal-identity,
    .zion-legal-prohibited-grid,
    .zion-data-category-grid,
    .zion-rights-grid,
    .zion-provider-grid,
    .zion-retention-grid,
    .zion-cookie-browser-grid {
        grid-template-columns: 1fr;
    }

    .zion-privacy-principles,
    .zion-cookie-category-grid {
        grid-template-columns: 1fr;
    }

    .zion-legal-contact-card {
        min-width: 0;
        width: 100%;
    }
}


/* Very small screens */

@media (max-width: 440px) {

    .zion-legal-hero {
        flex-direction: column;
    }

    .zion-legal-toc nav {
        grid-template-columns: 1fr;
    }

    .zion-legal-table th,
    .zion-legal-table td {
        padding: 10px;
    }
}

/* Cuprins floating/sticky pentru paginile juridice */

.zion-legal-layout {
    align-items: start !important;
}

.zion-legal-toc {
    position: sticky !important;
    top: 145px !important;
    align-self: start !important;

    max-height: calc(100vh - 170px);
}

.zion-legal-toc__inner {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color:
        var(--zion-surface-light)
        transparent;
}

/* Scrollbar compact doar pentru cuprins */

.zion-legal-toc__inner::-webkit-scrollbar {
    width: 5px;
}

.zion-legal-toc__inner::-webkit-scrollbar-track {
    background: transparent;
}

.zion-legal-toc__inner::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 999px;
    background: var(--zion-surface-light);
}

/* Linkurile nu trebuie să se micșoreze */

.zion-legal-toc nav {
    flex-shrink: 0;
}

/* La tabletă și mobil revine în fluxul normal */

@media (max-width: 980px) {
    .zion-legal-toc {
        position: static !important;
        top: auto !important;

        max-height: none;
    }

    .zion-legal-toc__inner {
        max-height: none;
        overflow: visible;
    }
}

/* =========================================================
   FIX DEFINITIV — CUPRINS LEGAL STICKY/FLOATING
   Trebuie să fie ultima regulă din Custom CSS
   ========================================================= */

/*
 * Sticky nu funcționează dacă un părinte are overflow
 * hidden/auto/scroll, transform sau contain.
 */
.App,
.App-content,
.App-content > div,
.Page,
.PagePage,
.PagePage .container,
.zion-legal-page,
.zion-legal-layout,
.zion-legal-content {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
}

/* Coloanele grid trebuie să înceapă de sus */
.zion-legal-layout {
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr) !important;
    align-items: start !important;
}

/* Cuprinsul rămâne lipit la scroll */
.zion-legal-toc {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: 150px !important;

    align-self: start !important;

    height: fit-content !important;
    max-height: calc(100vh - 175px) !important;

    overflow: visible !important;

    transform: none !important;
    contain: none !important;

    z-index: 50 !important;
}

/* Scroll intern dacă lista este mai înaltă decât ecranul */
.zion-legal-toc__inner {
    max-height: calc(100vh - 175px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: var(--zion-surface-light) transparent;
}

.zion-legal-toc__inner::-webkit-scrollbar {
    width: 5px;
}

.zion-legal-toc__inner::-webkit-scrollbar-track {
    background: transparent;
}

.zion-legal-toc__inner::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 999px;

    background: var(--zion-surface-light);
}

/*
 * Suprascrie regula veche @media (max-width: 980px)
 * care setează position: static.
 *
 * Păstrăm sticky inclusiv pe tabletă landscape.
 */
@media (min-width: 768px) {

    .zion-legal-layout {
        grid-template-columns: 230px minmax(0, 1fr) !important;
    }

    .zion-legal-toc {
        position: -webkit-sticky !important;
        position: sticky !important;

        top: 150px !important;

        max-height: calc(100vh - 175px) !important;
    }

    .zion-legal-toc__inner {
        max-height: calc(100vh - 175px) !important;
        overflow-y: auto !important;
    }
}

/* Pe telefon cuprinsul revine normal în pagină */
@media (max-width: 767px) {

    .zion-legal-layout {
        grid-template-columns: 1fr !important;
    }

    .zion-legal-toc {
        position: static !important;

        top: auto !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .zion-legal-toc__inner {
        max-height: none !important;
        overflow: visible !important;
    }
}