.topbar-account-menu {
    &.btn-group {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        flex: 0 0 auto;
    }

    &.btn-group > .topbar-account-trigger.pill-btn.dropdown-toggle:not(.dropdown-toggle-split) {
        width: auto;
        min-width: 0;
        max-width: min(280px, 42vw);
        background: var(--white);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        box-shadow: none;
        &::before {
            display: none;
        }
        &:hover {
            background: var(--white);
            border-color: var(--accent);
            color: var(--accent);
            box-shadow: none;
        }

        @media (max-width: 768px) {
            width: auto;
            min-width: 0;
            max-width: none;
            height: auto;
            padding: 0;
            gap: 0;
            justify-content: center;
            align-items: center;
            border-radius: 0;
            background: transparent;
            border: none;
            box-shadow: none;

            &:hover,
            &:focus {
                background: transparent;
                border-color: transparent;
                box-shadow: none;
                color: inherit;
            }

            &:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: 2px;
            }

            &:focus:not(:focus-visible) {
                outline: none;
            }
        }
    }

    &.app-dropdown .dropdown-menu.topbar-account-panel.topbar-account-panel--guest {
        min-width: 260px;
    }

    &.app-dropdown .dropdown-menu.topbar-account-panel {
        min-width: 300px;
        max-width: min(340px, 92vw);
        padding: 0;
        margin-top: 10px;
        border: 1px solid var(--topbar-account-panel-border);
        border-radius: 14px;
        box-shadow:
            0 0 0 1px var(--topbar-account-panel-inset-ring) inset,
            0 4px 6px var(--shadow-card),
            0 16px 48px var(--topbar-account-panel-shadow);
        background: var(--white);
        overflow: hidden;

        @media (max-width: 768px) {
            min-width: 0;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
            max-width: min(272px, calc(100vw - 16px));
            margin-top: 6px;
            max-height: min(420px, calc(100vh - 72px));
            overflow-y: auto;
            box-shadow:
                0 0 0 1px var(--topbar-account-panel-inset-ring) inset,
                0 8px 24px var(--shadow-modal),
                0 24px 64px var(--topbar-account-panel-shadow-mobile);
        }
    }

    &.app-dropdown .topbar-account-panel-actions {
        padding: 6px 0 8px;
        background: var(--topbar-account-actions-bg);
        border-top: none;

        .dropdown-item {
            width: calc(100% - 16px);
            margin: 0 8px;
            min-height: 0;
            height: auto;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            box-shadow: none;
            background: transparent;
            color: var(--text-color);

            i {
                width: 1.35em;
                margin-right: 10px;
                color: var(--topbar-account-item-icon);
                text-align: center;
            }

            &:hover,
            &:focus,
            &:active {
                background: var(--topbar-account-item-hover-bg) !important;
                border-color: transparent !important;
                color: var(--gray-900) !important;
                box-shadow: 0 1px 3px var(--topbar-account-item-hover-shadow) !important;

                i {
                    color: var(--accent);
                }
            }

            @media (max-width: 768px) {
                width: calc(100% - 12px);
                margin: 0 6px 3px;
                padding: 10px 12px;
                min-height: 44px;
                font-size: 14px;
                border-radius: 10px;
                display: flex;
                align-items: center;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .topbar-account-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 4px 36px 4px 6px;
        text-align: left;
        border-radius: 999px;

        .topbar-account-avatar {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--gray-800);
            background: var(--gray-200);
            border: 1px solid var(--border-color);
            box-shadow: none;

            @media (max-width: 768px) {
                width: 40px;
                height: 40px;
                font-size: 13px;
            }
        }

        .topbar-account-trigger-email {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media (max-width: 768px) {
                display: none;
            }
        }

        .pill-btn-caret {
            @media (max-width: 768px) {
                display: none;
            }
        }
    }

    .topbar-account-panel-body {
        padding: 22px 22px 20px;
        text-align: center;
        background: linear-gradient(
            180deg,
            var(--topbar-account-profile-bg-start) 0%,
            var(--topbar-account-profile-bg-mid) 45%,
            var(--white) 100%
        );
        border-bottom: 1px solid var(--topbar-account-profile-border);

        @media (max-width: 768px) {
            padding: 14px 14px 12px;
        }

        .topbar-account-avatar--lg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            margin: 0 auto 14px;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.02em;
            border-radius: 50%;
            color: var(--topbar-account-avatar-lg-fg);
            background: var(--topbar-account-avatar-lg-bg);
            border: 1px solid var(--topbar-account-avatar-lg-border);
            box-shadow: none;

            @media (max-width: 768px) {
                width: 48px;
                height: 48px;
                font-size: 15px;
                margin: 0 auto 10px;
            }
        }

        .topbar-account-panel-name {
            font-size: 17px;
            font-weight: 600;
            color: var(--gray-900);
            line-height: 1.25;
            letter-spacing: -0.02em;
            word-break: break-word;

            @media (max-width: 768px) {
                font-size: 15px;
                line-height: 1.25;
            }
        }

        .topbar-account-panel-email {
            margin-top: 6px;
            font-size: 13px;
            line-height: 1.35;
            color: var(--text-muted);
            word-break: break-all;

            @media (max-width: 768px) {
                font-size: 12px;
                margin-top: 4px;
            }
        }
    }
}

.topBar {
    justify-content: center;
    align-items: center;
    display: flex;
    background: var(--white);
    height: 80px;
    font-family: var(--font-sans);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-subtle);

    .topbar-nav-btn {
        width: auto;
    }

    .topbar-left {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .topbar-account-menu .topbar-account-trigger--guest.dropdown-toggle:not(.dropdown-toggle-split) {
        padding-right: 36px;
    }

    .topbar-account-trigger--guest {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: auto;
        min-width: 0;
        max-width: min(280px, 42vw);
        padding: 4px 14px 4px 6px;
        border-radius: 999px;
        border: 1px solid var(--gray-200);
        background: var(--gray-100);
        color: var(--gray-800);

        &:hover,
        &:focus {
            background: var(--white);
            border-color: var(--gray-300);
        }

        .topbar-account-avatar {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--gray-700);
            background: var(--white);
        }

        .topbar-account-trigger-email {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

@media (min-width: 769px) {
    .topBar .topbar-left {
        padding-left: 3rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 768px) {
    .topBar {
        height: 60px;
        overflow: visible;
        padding-left: 0;
        padding-right: 0;

        .topbar-left {
            justify-content: flex-start;
            padding-left: 12px;
            padding-right: 4px;
            gap: 12px;
        }

        .topbar-right {
            justify-content: flex-end;
            padding-left: 4px;
            padding-right: 12px;
            min-width: 0;
        }

        .topbar-center {
            padding-left: 8px;
            padding-right: 8px;
            overflow: hidden;
            min-width: 0;
        }

        .topbar-nav-btn {
            width: 40px;
            height: 40px;
            min-width: 40px;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .topbar-btn-text {
                display: none;
            }

            i {
                margin: 0;
            }
        }

        .topbar-account-menu .topbar-account-trigger--guest.dropdown-toggle:not(.dropdown-toggle-split) {
            padding-right: 0;
        }

        .topbar-account-trigger--guest {
            width: 40px;
            height: 40px;
            min-width: 40px;
            padding: 0;
            border-radius: 50%;
            justify-content: center;

            .topbar-account-trigger-email {
                display: none;
            }

            .topbar-account-avatar {
                width: 30px;
                height: 30px;
            }
        }

        .topbar-account-menu.btn-group > .topbar-account-trigger.pill-btn.press-feedback.dropdown-toggle:not(.dropdown-toggle-split):active {
            border-radius: 0;
            box-shadow: none;
        }
    }
}