<style>
    :root { --trafficpumper-admin-topbar-height: 4rem; }
    .fi-body-has-topbar .fi-topbar { min-height: var(--trafficpumper-admin-topbar-height); padding-inline: 1rem; }
    .fi-body-has-topbar .fi-topbar-start { width: calc(var(--sidebar-width) - 1rem); flex: 0 0 calc(var(--sidebar-width) - 1rem); margin-inline-end: 0; }
    .fi-body-has-topbar .fi-topbar-start .fi-logo { height: 2.5rem; width: auto; max-width: min(15rem, 100%); margin-inline-start: 0; object-fit: contain; object-position: left center; }
    .fi-body-has-topbar .fi-sidebar-header-ctn { display: none; }
    .fi-body-has-topbar .fi-sidebar-nav { padding-top: 1.5rem; }
    .fi-body-has-topbar .fi-topbar-end {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
        gap: .5rem;
        margin-block: 0;
    }
    .trafficpumper-admin-preferences {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: .5rem;
        margin-block: 0;
        white-space: nowrap;
    }
    .tp-admin-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        height: 2.5rem;
        min-width: 2.5rem;
        padding-inline: .625rem;
        border: 1px solid rgb(229 231 235);
        border-radius: .625rem;
        color: rgb(55 65 81);
        background: transparent;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1;
    }
    .tp-admin-control:hover { background: rgb(249 250 251); color: rgb(17 24 39); }
    .tp-admin-control:focus-visible { outline: 2px solid rgb(245 158 11); outline-offset: 2px; }
    .dark .tp-admin-control { border-color: rgb(55 65 81); color: rgb(209 213 219); }
    .dark .tp-admin-control:hover { background: rgb(31 41 55); color: rgb(255 255 255); }
    .tp-admin-control .fi-icon { width: 1.125rem; height: 1.125rem; }
    .tp-admin-control-chevron { width: .875rem !important; height: .875rem !important; }
    .tp-admin-theme-icon { width: 1.125rem; font-size: 1rem; text-align: center; }
    .tp-admin-user-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: .25rem;
        height: 2.5rem;
        margin: 0;
        padding: .125rem .375rem .125rem .125rem;
        border-radius: .625rem;
    }
    .tp-admin-user-control:hover { background: rgb(249 250 251); }
    .dark .tp-admin-user-control:hover { background: rgb(31 41 55); }
    .tp-admin-user-control:focus-visible { outline: 2px solid rgb(245 158 11); outline-offset: 2px; }
    .tp-admin-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 9999px;
        background: rgb(245 158 11);
        color: rgb(17 24 39);
        font-size: .75rem;
        font-weight: 700;
    }
    .tp-admin-user-chevron { width: .875rem; height: .875rem; color: rgb(107 114 128); }
    .tp-admin-user-name, .tp-admin-user-email { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tp-admin-user-email { margin-top: .125rem; color: rgb(107 114 128); font-size: .75rem; font-weight: 400; }
    @media (max-width: 63.999rem) {
        .fi-body-has-topbar .fi-topbar { gap: .5rem; }
        .fi-body-has-topbar .fi-topbar-start { display: flex; width: auto; flex: 1 1 auto; margin: 0; min-width: 0; }
        .fi-body-has-topbar .fi-topbar-start .fi-logo { height: 2.25rem; max-width: min(12rem, 42vw); }
        .fi-body-has-topbar .fi-topbar-end { gap: .5rem; }
    }
    @media (max-width: 39.999rem) {
        .fi-body-has-topbar .fi-topbar { padding-inline: .75rem; }
        .fi-body-has-topbar .fi-topbar-start .fi-logo { height: 2rem; max-width: 32vw; }
        .trafficpumper-admin-preferences, .fi-body-has-topbar .fi-topbar-end { gap: .25rem; }
        .tp-admin-control { padding-inline: .5rem; }
        .tp-admin-control-label, .tp-admin-control-chevron { display: none; }
        .tp-admin-user-control { width: 2.5rem; padding: .125rem; }
        .tp-admin-user-chevron { display: none; }
    }
</style>
