/*
 * Shared header geometry.
 * Keep the shell dimensions independent from the current page, active tab,
 * account type, and late-loading fonts. This prevents navigation from moving
 * while the workspace controls hydrate.
 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.app-header {
    box-sizing: border-box !important;
    min-height: 110px !important;
    height: 110px !important;
    padding: 0 !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

/* Several legacy profile pages append their own .app-header rules after the
 * shared stylesheet. Keep the shell dimensions authoritative at every
 * viewport so a page change cannot alter the header's block size. */
html body .app-header {
    min-height: 110px !important;
    height: 110px !important;
    padding: 0 !important;
}

.app-header .header-content {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
    grid-template-rows: 42px 40px !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: 110px !important;
    min-height: 110px !important;
    padding: 10px 20px !important;
    align-items: center !important;
}

.app-header .header-content > .logo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
}

.app-header .header-content > .mode-toggle-container {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0 !important;
    justify-self: center;
}

.app-header .header-content > .user-menu {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    height: 42px;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    justify-self: end;
}

.app-header .header-content > .nav-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 40px;
    min-height: 40px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex: none !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap;
}

.app-header .header-content > .nav-tabs::-webkit-scrollbar {
    display: none;
}

.app-header .nav-tab {
    box-sizing: border-box;
    min-height: 34px;
    height: 34px;
    flex: 0 0 auto;
    transform: none !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.app-header .nav-tab > i,
.app-header .user-actions .profile-btn > i,
.app-header .user-actions .recharge-history-btn > i,
.app-header .user-actions .admin-btn > i,
.app-header .user-actions .logout-btn > i,
.app-header .notification-compact-link > i,
.app-header .notification-btn > i,
.app-header .credits-display > i {
    box-sizing: border-box;
    width: 14px !important;
    min-width: 14px !important;
    flex: 0 0 14px !important;
    margin: 0 !important;
    text-align: center;
}

.app-header .user-menu,
.app-header .user-menu .user-info,
.app-header .user-menu .user-actions {
    min-width: 0;
    flex-wrap: nowrap !important;
}

.app-header .user-menu .user-info {
    height: 42px;
}

/* The workspace pill renders its own plus icon. Some legacy templates leave
 * the original recharge link as a sibling after HTML parser recovery. */
.app-header .user-info.workspace-switcher-ready > .recharge-btn {
    display: none !important;
}

.app-header .user-menu .user-actions {
    height: 36px;
    align-items: center;
    gap: 8px !important;
}

.app-header .user-actions > *,
.app-header .user-actions > * > button,
.app-header .user-actions > * > a {
    box-sizing: border-box;
    min-height: 34px;
}

.app-header .user-actions > .profile-dropdown,
.app-header .user-actions > .profile-dropdown:hover {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Personal-center pages use several legacy header skins. Normalize the
 * geometry so changing the inner section never shifts the account cluster. */
@media (min-width: 901px) {
    .app-header .header-content > .logo {
        width: 248px !important;
        min-width: 248px !important;
        max-width: 248px !important;
        flex: 0 0 248px !important;
    }

    .app-header .header-content > .nav-tabs {
        gap: 16px !important;
        justify-content: flex-start !important;
        padding-left: 24px !important;
    }

    .app-header .nav-tab {
        padding: 8px 16px !important;
        font-size: 14px !important;
        gap: 8px !important;
        border: 1px solid rgba(0, 0, 0, .1) !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    }

    .app-header .nav-tab.active {
        color: #fff !important;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    .app-header .nav-tab > i {
        width: 14px !important;
        min-width: 14px !important;
        margin: 0 !important;
        text-align: center;
    }

    .app-header .user-menu .workspace-trigger {
        width: 153px !important;
        min-width: 153px !important;
        max-width: 153px !important;
    }

    .app-header .credits-display.workspace-credit-pill {
        width: 131px !important;
        min-width: 131px !important;
        max-width: 131px !important;
        justify-content: center;
    }

    .app-header .user-menu .user-info {
        gap: 7px !important;
        margin: 0 !important;
    }

    .app-header .user-actions .profile-btn,
    .app-header .user-actions .recharge-history-btn,
    .app-header .user-actions .admin-btn,
    .app-header .user-actions .logout-btn {
        box-sizing: border-box;
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 14px !important;
        white-space: nowrap;
    }

    .app-header .user-actions .profile-btn {
        width: 124px !important;
        min-width: 124px !important;
    }

    .app-header .user-actions > .profile-dropdown {
        width: 124px !important;
        min-width: 124px !important;
        max-width: 124px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .app-header .user-actions .recharge-history-btn {
        width: 110px !important;
        min-width: 110px !important;
    }

    .app-header .user-actions .admin-btn {
        width: 110px !important;
        min-width: 110px !important;
    }

    .app-header .user-actions .logout-btn {
        width: 80px !important;
        min-width: 80px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .app-header .user-menu > .user-info {
        box-sizing: border-box;
        width: 291px !important;
        min-width: 291px !important;
        max-width: 291px !important;
    }
}

@media (min-width: 1280px) {
    .app-header .header-content > .user-menu {
        display: grid !important;
        grid-template-columns: 291px 490px !important;
        column-gap: 32px !important;
        width: 813px !important;
        min-width: 813px !important;
        max-width: 813px !important;
        align-items: center !important;
    }

    .app-header .user-menu > .user-info {
        box-sizing: border-box;
        width: 291px !important;
        min-width: 291px !important;
        max-width: 291px !important;
    }

    .app-header .user-menu > .user-actions {
        box-sizing: border-box;
        width: 490px !important;
        min-width: 490px !important;
        max-width: 490px !important;
    }
}

/* Keep the account action cluster identical across personal-center pages. */
.app-header .notification-compact-link,
.app-header .notification-btn-wrapper {
    box-sizing: border-box;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
}

.app-header .notification-compact-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    text-decoration: none;
}

.app-header .notification-compact-link i {
    font-size: 13px;
}

.app-header .notification-btn-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.app-header .notification-btn-wrapper .notification-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.app-header .notification-btn-wrapper .notification-btn i {
    font-size: 13px !important;
}

/* Crowded desktop headers get a dedicated action row instead of flex wrapping. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .app-header,
    html body .app-header {
        min-height: 154px !important;
        height: 154px !important;
    }

    .app-header .header-content {
        grid-template-rows: 42px 36px 40px !important;
        height: 154px !important;
        min-height: 154px !important;
    }

    .app-header .header-content > .user-menu {
        display: contents !important;
    }

    .app-header .user-menu > .user-info {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .app-header .user-menu > .user-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
    }

    .app-header .header-content > .nav-tabs {
        grid-row: 3;
    }
}

/* Tablet and mobile use the same fixed three-row shell. */
@media (max-width: 1024px) {
    .app-header,
    html body .app-header {
        min-height: 156px !important;
        height: 156px !important;
        padding: 0 !important;
    }

    .app-header .header-content {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
        grid-template-rows: 40px 40px 40px !important;
        height: 156px !important;
        min-height: 156px !important;
        padding: 10px 16px !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
    }

    .app-header .header-content > .logo {
        grid-column: 1;
        grid-row: 1;
    }

    .app-header .header-content > .mode-toggle-container {
        grid-column: 2;
        grid-row: 1;
    }

    .app-header .header-content > .user-menu {
        display: contents !important;
    }

    .app-header .user-menu > .user-info {
        grid-column: 3;
        grid-row: 1;
        height: 40px;
        justify-self: end;
    }

    .app-header .user-menu > .user-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        height: 40px;
    }

    .app-header .header-content > .nav-tabs {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start !important;
    }
}

/* On narrow screens action controls stay compact and predictable. */
@media (max-width: 900px) {
    .app-header .header-content > .nav-tabs {
        gap: 6px !important;
    }

    .app-header .nav-tab {
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 12px !important;
        gap: 6px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
    }

    /* Fixed semantic slots keep the scroll strip stable when one template
     * contains an extra whitespace node or a localized label has a different
     * intrinsic width. */
    .app-header .nav-tab#generate-tab { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
    .app-header .nav-tab#gallery-tab { width: 90px !important; min-width: 90px !important; max-width: 90px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-stream) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-code) { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-credit-card) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-gift) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-globe) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
    .app-header .nav-tabs > .nav-tab:has(> i.fa-external-link-alt) { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
    .app-header .nav-tabs > .mirror-site-nav-tab { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }

    .app-header .user-menu > .user-actions {
        gap: 6px !important;
    }

    .app-header .user-actions .profile-btn,
    .app-header .user-actions .recharge-history-btn,
    .app-header .user-actions .admin-btn,
    .app-header .user-actions .logout-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
        justify-content: center !important;
    }

    .app-header .user-actions > .profile-dropdown {
        display: block !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        overflow: visible !important;
    }

    .app-header .user-actions .profile-btn i,
    .app-header .user-actions .recharge-history-btn i,
    .app-header .user-actions .admin-btn i,
    .app-header .user-actions .logout-btn i {
        margin: 0 !important;
        font-size: 13px !important;
    }

    .app-header .user-actions .profile-btn .dropdown-arrow {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .app-header .header-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        column-gap: 6px !important;
    }

    .app-header .header-content > .nav-tabs {
        justify-content: flex-start !important;
    }

    .app-header .header-content > .logo {
        min-width: 0 !important;
    }

    .app-header .header-content > .logo #site-name,
    .app-header .header-content > .logo > span {
        display: block !important;
        max-width: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-header .header-content > .mode-toggle-container {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .app-header .user-menu > .user-actions {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: end;
    }

    .app-header .mode-label {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-header,
    .app-header .nav-tab {
        transition: none !important;
    }
}

/* -------------------------------------------------------------------------
 * Generation-header visual contract for every legacy application section.
 * The homepage already uses .home-header; keeping this selector separate
 * makes the change reversible and prevents a second header skin from
 * leaking into the generation page.
 * ---------------------------------------------------------------------- */
.app-header:not(.home-header),
html body .app-header:not(.home-header) {
    box-sizing: border-box !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e7e9ee !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .025) !important;
}

.app-header:not(.home-header) .header-content {
    display: grid !important;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) auto auto !important;
    grid-template-rows: 1fr !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1480px !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: center !important;
}

.app-header:not(.home-header) .header-content > .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 280px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 10px !important;
    justify-self: start !important;
    align-items: center !important;
    color: #111827 !important;
    text-decoration: none !important;
}

.app-header:not(.home-header) .logo-img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    object-fit: contain;
}

.app-header:not(.home-header) .logo:has(.logo-img) .logo-icon {
    display: none !important;
}

.app-header:not(.home-header) .logo > span,
.app-header:not(.home-header) #site-name {
    min-width: 0;
    overflow: hidden;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header:not(.home-header) .header-content > .nav-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
}

.app-header:not(.home-header) .header-content > .nav-tabs::-webkit-scrollbar {
    display: none;
}

.app-header:not(.home-header) .nav-tab {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    gap: 7px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: #5d6472 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

.app-header:not(.home-header) .nav-tab:hover {
    color: #111827 !important;
    border-color: transparent !important;
    background: #f3f4f6 !important;
    box-shadow: none !important;
    transform: none !important;
}

.app-header:not(.home-header) .nav-tab.active,
.app-header:not(.home-header) .nav-tab.active:hover {
    color: #303a66 !important;
    border-color: #dfe2ff !important;
    background: #eef0ff !important;
}

.app-header:not(.home-header) .nav-tab > i {
    width: 14px !important;
    min-width: 14px !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* The generation header keeps language switching in the account menu and
 * uses the shorter API label. Hide the legacy language tab before JavaScript
 * moves its original anchor into the dropdown, avoiding a hydration shift. */
.app-header:not(.home-header):has(.user-info) .nav-tabs > .nav-tab:has(> i.fa-globe) {
    display: none !important;
}

.app-header:not(.home-header) .nav-tabs > .nav-tab:has(> i.fa-code) {
    font-size: 0 !important;
}

.app-header:not(.home-header) .nav-tabs > .nav-tab:has(> i.fa-code)::after {
    content: "API";
    font-size: 13px;
}

/* The generation page uses an intrinsic centered group when the mode switch
 * is unavailable. Limit that one-row optimization to wide desktop so it
 * cannot override the intentional second nav row at narrower breakpoints. */
@media (min-width: 1435px) {
    .app-header:not(.home-header) .header-content:has(> .mode-toggle-container[style*="display: none"]),
    .app-header:not(.home-header) .header-content:not(:has(> .mode-toggle-container)) {
        grid-template-columns: max-content max-content auto !important;
        justify-content: center !important;
        column-gap: 12px !important;
    }

    .app-header:not(.home-header) .header-content:has(> .mode-toggle-container[style*="display: none"]) > .nav-tabs,
    .app-header:not(.home-header) .header-content:not(:has(> .mode-toggle-container)) > .nav-tabs {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: max-content !important;
        max-width: 100% !important;
    }

    .app-header:not(.home-header) .header-content:has(> .mode-toggle-container[style*="display: none"]) > .user-menu,
    .app-header:not(.home-header) .header-content:not(:has(> .mode-toggle-container)) > .user-menu {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
}

.app-header:not(.home-header) .header-content > .mode-toggle-container {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: end !important;
}

.app-header:not(.home-header) .header-content > .user-menu {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
}

.app-header:not(.home-header) .user-menu .user-info {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.app-header:not(.home-header) .user-menu .user-actions {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    margin: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.app-header:not(.home-header) .workspace-trigger {
    width: 148px !important;
    max-width: 148px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
}

.app-header:not(.home-header) .credits-display.workspace-credit-pill,
.app-header:not(.home-header) .credits-display {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 138px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border: 1px solid #dfe3ff !important;
    border-radius: 7px !important;
    justify-content: center !important;
    color: #343e71 !important;
    background: #f0f2ff !important;
    box-shadow: none !important;
}

.app-header:not(.home-header) .user-actions > .profile-dropdown,
.app-header:not(.home-header) .user-actions > .profile-dropdown:hover {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
}

.app-header:not(.home-header) .user-actions .profile-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid #e1e4e9 !important;
    border-radius: 7px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #343a46 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transform: none !important;
}

.app-header:not(.home-header) .user-actions .profile-btn > i:first-child {
    font-size: 13px !important;
}

.app-header:not(.home-header) .user-actions .profile-btn > span,
.app-header:not(.home-header) .user-actions .profile-btn .dropdown-arrow {
    display: none !important;
}

.app-header:not(.home-header) .profile-dropdown .dropdown-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 228px !important;
    max-height: min(520px, calc(100vh - 100px)) !important;
    margin-top: 0 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid #e2e5ea !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .99) !important;
    box-shadow: 0 18px 44px rgba(20, 27, 45, .16) !important;
}

.app-header:not(.home-header) .profile-dropdown .dropdown-item {
    box-sizing: border-box !important;
    display: flex !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
    align-items: center !important;
    color: #394150 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.app-header:not(.home-header) .profile-dropdown .dropdown-item:hover {
    color: #111827 !important;
    background: #f3f4f6 !important;
}

.app-header:not(.home-header) .profile-dropdown .dropdown-item > i {
    width: 16px !important;
    color: #737c8d !important;
    text-align: center !important;
}

.app-header:not(.home-header) .member-menu-account {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 52px !important;
    padding: 4px 9px 8px !important;
    gap: 9px !important;
    align-items: center !important;
}

.app-header:not(.home-header) .member-menu-avatar {
    display: block !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    object-fit: cover !important;
}

.app-header:not(.home-header) .member-menu-avatar img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: cover !important;
}

.app-header:not(.home-header) .member-menu-avatar--default {
    display: grid !important;
    place-items: center !important;
    color: #5b6474 !important;
    background: #eef0f3 !important;
}

.app-header:not(.home-header) .member-menu-account-copy {
    min-width: 0 !important;
}

.app-header:not(.home-header) .member-menu-account-copy strong,
.app-header:not(.home-header) .member-menu-account-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-header:not(.home-header) .member-menu-account-copy strong {
    color: #202633 !important;
    font-size: 13px !important;
}

.app-header:not(.home-header) .member-menu-account-copy small {
    margin-top: 3px !important;
    color: #7b8493 !important;
    font-size: 10px !important;
}

.app-header:not(.home-header) .profile-dropdown .dropdown-divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: #eceef1 !important;
}

.app-header:not(.home-header) .profile-dropdown .member-logout-item {
    color: #b42318 !important;
}

.app-header:not(.home-header) .workspace-credit-source {
    color: #747da6 !important;
    font-size: 9px !important;
}

.app-header:not(.home-header) .workspace-credit-value {
    color: #303a66 !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
}

/* Inline legacy BETA labels are not part of the generation header contract. */
.app-header:not(.home-header) .nav-tab > span[style*="font-size:10px"],
.app-header:not(.home-header) .team-header-beta {
    display: none !important;
}

/* Legacy templates use raw text nodes instead of the generation header's
 * compact label spans. Tighten only the narrow one-row desktop band so the
 * account cluster retains the same fixed position without overlap. */
@media (min-width: 1435px) and (max-width: 1530px) {
    .app-header:not(.home-header) .header-content > .nav-tabs {
        gap: 5px !important;
    }

    .app-header:not(.home-header) .nav-tab {
        padding-right: 7px !important;
        padding-left: 7px !important;
        gap: 5px !important;
    }
}

@media (max-width: 1434px) {
    .app-header:not(.home-header),
    html body .app-header:not(.home-header) {
        height: 120px !important;
        min-height: 120px !important;
    }

    .app-header:not(.home-header) .header-content {
        grid-template-columns: minmax(170px, 1fr) auto auto !important;
        grid-template-rows: 58px 48px !important;
        height: 120px !important;
        min-height: 120px !important;
        padding: 7px 20px !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
    }

    .app-header:not(.home-header) .header-content > .logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .app-header:not(.home-header) .header-content > .mode-toggle-container {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .app-header:not(.home-header) .header-content > .user-menu {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .app-header:not(.home-header) .header-content > .nav-tabs {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-content: center !important;
    }
}

@media (max-width: 760px) {
    .app-header:not(.home-header) .header-content {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 58px 48px !important;
        padding: 7px 12px !important;
        column-gap: 8px !important;
    }

    .app-header:not(.home-header) .header-content > .logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        max-width: 154px !important;
    }

    .app-header:not(.home-header) .header-content > .mode-toggle-container {
        display: none !important;
    }

    .app-header:not(.home-header) .header-content > .user-menu {
        grid-column: 2 !important;
        grid-row: 1 !important;
        gap: 5px !important;
    }

    .app-header:not(.home-header) .header-content > .nav-tabs {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
    }

    .app-header:not(.home-header) .nav-tab {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .app-header:not(.home-header) .nav-tabs > .nav-tab:has(> i.fa-code)::after {
        font-size: 12px;
    }

    .app-header:not(.home-header) .workspace-trigger,
    .app-header:not(.home-header) .avatar-display,
    .app-header:not(.home-header) .username-display {
        display: none !important;
    }

    .app-header:not(.home-header) .credits-display.workspace-credit-pill,
    .app-header:not(.home-header) .credits-display {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        padding: 0 7px !important;
    }

    .app-header:not(.home-header) .workspace-credit-source {
        display: none !important;
    }

    .app-header:not(.home-header) .user-actions > .profile-dropdown,
    .app-header:not(.home-header) .user-actions .profile-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .app-header:not(.home-header) .profile-dropdown .dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        right: 10px !important;
        width: min(236px, calc(100vw - 20px)) !important;
        max-height: calc(100vh - 74px) !important;
    }
}

@media (max-width: 400px) {
    .app-header:not(.home-header) .header-content {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }

    .app-header:not(.home-header) .logo > span,
    .app-header:not(.home-header) #site-name {
        max-width: 84px;
    }
}