.cosmic-page {
    position: relative;
}

.cosmic-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 24, 66, 0.35) 0%, rgba(238, 218, 241, 0.14) 48%, rgba(247, 238, 250, 0.2) 100%),
        url("/static/images/elyndora-celestial-backdrop.1280368b7de6.png") center top / cover no-repeat;
    z-index: -2;
}

.cosmic-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 247, 252, 0.44) 100%);
    z-index: -1;
}

.auth-cosmic-page {
    position: relative;
}

.auth-cosmic-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 20, 60, 0.5) 0%, rgba(148, 128, 194, 0.24) 42%, rgba(238, 226, 246, 0.28) 100%),
        url("/static/images/elyndora-celestial-backdrop.1280368b7de6.png") center top / cover no-repeat;
    z-index: -2;
}

.auth-cosmic-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(248, 243, 254, 0.28) 0%, rgba(250, 247, 252, 0.68) 100%);
    z-index: -1;
}

.auth-cosmic-page .app-main {
    padding-top: 1.2rem;
}

.auth-cosmic-page .app-sidebar {
    background: rgba(21, 25, 68, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 34px rgba(19, 18, 52, 0.26);
    backdrop-filter: blur(6px);
}

.auth-cosmic-page .app-sidebar-brand,
.auth-cosmic-page .app-sidebar-account strong,
.auth-cosmic-page .app-sidebar-link {
    color: #eef1ff;
}

.auth-cosmic-page .app-sidebar-group-title,
.auth-cosmic-page .app-sidebar-account small {
    color: #c8d0f2;
}

.auth-cosmic-page .app-sidebar-account {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.auth-cosmic-page .app-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffe8a3;
}

.auth-cosmic-page .app-sidebar-bottom {
    border-top-color: rgba(255, 255, 255, 0.22);
}

.auth-cosmic-page .app-sidebar-logout {
    color: #ffd4d4;
}

.auth-cosmic-page .app-sidebar-logout:hover {
    background: rgba(255, 80, 80, 0.16);
    border-color: rgba(255, 198, 198, 0.34);
}

.auth-cosmic-page .card {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 28px rgba(31, 28, 74, 0.16);
    backdrop-filter: blur(3px);
}

.auth-cosmic-page .section-shell-nav {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.66);
}

.cosmic-content {
    max-width: 1020px;
    margin: 0 auto;
}

.cosmic-content .card,
.cosmic-card {
    max-width: 1000px;
    margin: 0 auto 1.5rem auto;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 28px rgba(27, 24, 58, 0.16);
    backdrop-filter: blur(3px);
}

/* Override the base .card max-width for redesigned public pages. */
.cosmic-page .card.cosmic-card,
.cosmic-page section.card.cosmic-card,
.cosmic-page div.card.cosmic-card {
    width: min(100%, 1000px);
    max-width: 1000px;
}

.cosmic-content h2,
.cosmic-content h3 {
    color: #1f224e;
}

.cosmic-page .btn {
    width: auto;
    min-width: 210px;
}

.public-header-shell {
    margin: -2rem -2rem 1.2rem -2rem;
    padding: 1.25rem 1.2rem 1rem 1.2rem;
    background: transparent;
}

.public-header-compact {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 14px;
    background: rgba(18, 21, 58, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 26px rgba(20, 19, 52, 0.2);
}

.public-header-link {
    color: #eef0ff;
}

.public-header-link:hover,
.public-header-link-active {
    color: #ffe8a3;
}

.public-header-language label {
    color: #dbe0ff;
}

.public-header-language select {
    background: rgba(255, 255, 255, 0.92);
}

.public-header-cta {
    display: inline-block;
    padding: 0.78rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.public-header-cta.primary {
    background: #f4c430;
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(244, 196, 48, 0.36);
}

.public-header-cta.secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .public-header-shell {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.9rem;
    }

    .public-header-top-row {
        flex-direction: column;
        align-items: stretch;
    }

    .public-header-nav-links {
        justify-content: center;
    }

    .public-header-actions {
        width: 100%;
        justify-content: center;
    }
}