/* ==================================================
   SHARED CREATOR NAVIGATION
================================================== */

.app-creator-nav {
    position: relative;
    z-index: 100;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        auto
        minmax(220px, 1fr);

    align-items: center;

    gap: 22px;

    padding:
        12px 28px;

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

    border-bottom:
        1px solid
        rgba(123, 60, 255, 0.10);

    box-shadow:
        0 7px 28px
        rgba(28, 20, 50, 0.028);

    backdrop-filter:
        blur(14px);
}


/* ==================================================
   BRAND
================================================== */

.app-creator-brand {
    justify-self: start;

    color: #111116;

    text-decoration: none;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 21px;

    font-weight: 850;

    letter-spacing: -0.035em;

    white-space: nowrap;
}


.app-creator-brand:hover {
    color: #111116;
}


.app-creator-brand span {
    color: #7838ff;
}


/* ==================================================
   CENTER MENU
================================================== */

.app-creator-menu {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;
}


.app-creator-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    padding:
        8px 13px;

    border-radius: 11px;

    color: #40434d;

    text-decoration: none;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    font-weight: 720;

    white-space: nowrap;

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


.app-creator-link:hover {
    color: #111116;

    background:
        #f5f3f9;
}


.app-creator-link.active {
    color:
        #6e2af1;

    background:
        linear-gradient(
            135deg,
            rgba(123, 60, 255, 0.11),
            rgba(123, 60, 255, 0.045)
        );
}


.app-creator-link.active::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 2px;

    height: 2px;

    border-radius: 999px;

    background:
        #7b3cff;

    box-shadow:
        0 0 10px
        rgba(123, 60, 255, 0.55);
}


/* ==================================================
   CREDIT DISPLAY
================================================== */

.app-credit-balance {
    justify-self: end;

    min-width: 90px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        6px 10px 6px 7px;

    border:
        1px solid
        rgba(123, 60, 255, 0.20);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbf8ff
        );

    color:
        #111116;

    text-decoration: none;

    box-shadow:
        0 7px 20px
        rgba(82, 45, 160, 0.055);

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


.app-credit-balance:hover {
    color: #111116;

    border-color:
        rgba(123, 60, 255, 0.45);

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 26px
        rgba(82, 45, 160, 0.10);
}


.app-credit-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #6d2af2,
            #9257ff
        );

    color:
        #ffffff;

    box-shadow:
        0 7px 17px
        rgba(123, 60, 255, 0.20);
}


.app-credit-icon svg {
    width: 18px;
    height: 18px;
}


.app-credit-text {
    min-width: 35px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    line-height: 1;
}


.app-credit-text strong {
    color:
        #6e2af1;

    font-size:
        13px;

    font-weight:
        850;

    line-height: 1.05;
}


.app-credit-text small {
    margin-top: 3px;

    color:
        #898c96;

    font-size:
        8px;

    font-weight:
        600;

    line-height: 1;
}



/* ==================================================
   FINAL NAV NORMALIZATION
================================================== */

.app-creator-nav,
.app-creator-nav * {
    box-sizing: border-box;
}

.app-creator-nav {
    width: 100%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;

    margin: 0;

    padding:
        0 24px;
}


/* Brand immer gleiche Ma?e */

.app-creator-brand {
    margin: 0;
    padding: 0;

    line-height: 1;
}


/* Men? ohne externe Margins */

.app-creator-menu {
    margin: 0;
    padding: 0;
}


/* Credit-Box ?berall identisch */

.app-credit-balance {
    width: 96px;
    height: 48px;
    min-width: 96px;
    min-height: 48px;
    max-width: 96px;
    max-height: 48px;

    margin: 0;

    padding:
        6px 9px 6px 7px;

    gap: 8px;

    align-self: center;

    border-radius: 13px;

    line-height: 1;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.app-credit-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;
    min-height: 34px;

    max-width: 34px;
    max-height: 34px;

    padding: 0;
    margin: 0;
}


.app-credit-text {
    width: 36px;
    min-width: 36px;

    margin: 0;
    padding: 0;
}


.app-credit-text strong {
    margin: 0;
    padding: 0;

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


.app-credit-text small {
    margin:
        3px 0 0;

    padding: 0;

    font-size: 8px;
    line-height: 8px;
}


/* Links bekommen keine fremden Template-Styles */

.app-creator-nav a,
.app-creator-nav a:visited {
    text-decoration: none;
}



/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 920px) {

    .app-creator-nav {
        grid-template-columns:
            1fr auto;

        gap:
            10px 16px;
    }


    .app-creator-menu {
        grid-column:
            1 / -1;

        grid-row:
            2;

        order:
            3;

        justify-content:
            center;

        flex-wrap:
            wrap;
    }

}


@media (max-width: 560px) {

    .app-creator-nav {
        padding:
            11px 14px;
    }


    .app-creator-brand {
        font-size:
            18px;
    }


    .app-credit-balance {
        min-width:
            auto;
    }


    .app-creator-link {
        padding:
            7px 9px;

        font-size:
            12px;
    }

}



/* ==========================================================
   LIGHT + PRIMARY NEW DESIGN NAV
========================================================== */

/*
   Light geh?rt bewusst zur Navigation,
   soll aber weniger Gewicht haben als
   die Creator-Funktionen.
*/
.app-creator-link--light {
    opacity: .55;
    font-weight: 600;
}

.app-creator-link--light:hover {
    opacity: .82;
}

.app-creator-link--light.active {
    opacity: .78;
}


/*
   "Neues Design" ist die wichtigste Creator-Aktion.
   Etwas st?rker als die normalen Links,
   aber weiterhin passend zur schlanken Navbar.
*/
.app-creator-link--new-design {
    position: relative;

    padding-left: 14px;
    padding-right: 14px;

    font-weight: 750;

    color: #6f35f2;

    background:
        rgba(123, 60, 255, .07);

    border:
        1px solid
        rgba(123, 60, 255, .09);

    border-radius: 10px;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.app-creator-link--new-design:hover {
    transform:
        translateY(-1px);

    background:
        rgba(123, 60, 255, .11);

    box-shadow:
        0 5px 15px
        rgba(123, 60, 255, .08);
}


.app-creator-link--new-design.active {
    color: #6f35f2;

    background:
        rgba(123, 60, 255, .12);

    box-shadow:
        0 5px 16px
        rgba(123, 60, 255, .08);
}


/*
   Die Men?-Reihenfolge ergibt damit:

   Light
   Meine Designs
   Neues Design
   Credits
   Creator-Konto

   Neues Design sitzt damit bewusst
   im Zentrum der Creator-Aktionen.
*/


/* ==================================================
   NEURAL DESIGN LAB BRAND
================================================== */

.app-creator-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.app-creator-brand-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: contain;
    display: block;
}

.app-creator-brand-text {
    color: #111116;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1;
    white-space: nowrap;
}

.app-creator-brand-text strong {
    color: #6F3CFF;
    font-weight: 800;
}

@media (max-width: 560px) {

    .app-creator-brand-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .app-creator-brand-text {
        font-size: 16px;
    }
}`n


/* ==================================================
   BRAND + ÜBER UNS
================================================== */

.app-creator-brand-area {
    justify-self: start;

    display: flex;
    align-items: center;

    gap: 18px;
}


.app-creator-about-link {
    color: #40434d;

    text-decoration: none;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    opacity: .55;

    white-space: nowrap;

    transition:
        opacity .16s ease,
        color .16s ease;
}


.app-creator-about-link:hover {
    color: #111116;

    opacity: .82;
}


.app-creator-about-link.active {
    color: #6e2af1;

    opacity: .78;
}