/* Shared MosVPN application shell for both admin and customer menus. */
body.mosvpn-shell {
    background: var(--mos-color-bg) !important;
    color: var(--mos-color-text);
    /* Keep wide data tables scrollable in their own containers without
       letting a legacy page-level overflow shift the whole application. */
    overflow-x: hidden;
}

body.mosvpn-shell #page-container {
    background: var(--mos-color-bg) !important;
    transition: none;
}

body.mosvpn-shell #sidebar {
    background: var(--mos-color-surface) !important;
    border-right: var(--mos-border-width) solid var(--mos-color-border);
    box-shadow: none !important;
    color: var(--mos-color-text);
    width: var(--mos-sidebar-width) !important;
}

/*
 * OneUI keeps a 450ms transform transition on the sidebar even when the
 * desktop shell is permanently open. The legacy menu also renders every item
 * with an unstable key, so route changes recreate the whole list and restart
 * those transitions. Disable them for shell internals; the mobile drawer
 * keeps one transform transition on the stable outer sidebar only.
 */
body.mosvpn-shell #sidebar .content-header,
body.mosvpn-shell #sidebar .content-side,
body.mosvpn-shell #sidebar .nav-main,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main .nav-main-heading,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-badge,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-name {
    transition: none !important;
}

@media (min-width: 1024px) {
    body.mosvpn-shell #sidebar {
        transition: none !important;
    }
}

body.mosvpn-shell #sidebar .bg-header-dark,
body.mosvpn-shell #sidebar .bg-black-10,
body.mosvpn-shell #sidebar .bg-white-10 {
    background: var(--mos-color-surface) !important;
}

body.mosvpn-shell #sidebar .content-header {
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    height: var(--mos-topbar-height) !important;
    justify-content: space-between !important;
    padding: 0 var(--mos-space-3) !important;
    width: var(--mos-sidebar-width) !important;
}

body.mosvpn-shell #sidebar .content-side {
    width: var(--mos-sidebar-width) !important;
}

body.mosvpn-shell #sidebar .content-side-full {
    padding: var(--mos-space-4) var(--mos-space-3) var(--mos-space-6) !important;
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand,
body.mosvpn-shell #sidebar .link-fx {
    align-items: center;
    color: var(--mos-color-text) !important;
    display: inline-flex;
    font-size: var(--mos-font-size-body) !important;
    font-weight: var(--mos-font-weight-bold);
    gap: var(--mos-space-2);
    letter-spacing: var(--mos-letter-spacing-heading);
    min-width: 0;
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand::before,
body.mosvpn-shell #sidebar .link-fx::before {
    background-color: var(--mos-color-red-500) !important;
    background-image: url('/assets/brand/mosvpn-mark-light.svg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: var(--mos-space-6) var(--mos-space-6) !important;
    border-radius: var(--mos-radius-control);
    content: "";
    flex: 0 0 var(--mos-space-8);
    height: var(--mos-space-8);
    margin: 0 !important;
    width: var(--mos-space-8);
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand-name {
    color: var(--mos-color-text) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mosvpn-sidebar-collapse {
    align-items: center;
    background: transparent;
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    /* A 40px target; the header keeps its height, the glyph its 18px. */
    flex: 0 0 var(--mos-control-height-md, 40px);
    height: var(--mos-control-height-md, 40px);
    justify-content: center;
    padding: 0;
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
    width: var(--mos-control-height-md, 40px);
}

.mosvpn-sidebar-collapse:focus-visible {
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mosvpn-sidebar-collapse:hover {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text);
}

body.mosvpn-shell #sidebar .nav-main-heading {
    color: var(--mos-color-text-subtle) !important;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-caption);
    margin: var(--mos-space-6) 0 var(--mos-space-2);
    padding: 0 var(--mos-space-3);
}

body.mosvpn-shell #sidebar .nav-main-link {
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text-muted) !important;
    gap: var(--mos-space-3);
    margin-bottom: var(--mos-space-1);
    min-height: var(--mos-space-12);
    padding: var(--mos-space-3);
    position: relative;
    touch-action: manipulation;
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

body.mosvpn-shell #sidebar .nav-main-link:hover {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
    transform: none !important;
}

body.mosvpn-shell #sidebar .nav-main-link:active {
    opacity: var(--mos-pressed-opacity);
    transition-duration: 0s;
}

body.mosvpn-shell #sidebar .nav-main-link.active {
    background: var(--mos-color-red-50) !important;
    box-shadow: inset var(--mos-active-indicator-width) 0 0 var(--mos-color-red-500) !important;
    color: var(--mos-color-red-700) !important;
    font-weight: var(--mos-font-weight-bold);
}

body.mosvpn-shell #sidebar .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main-link:hover .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main-link.active .nav-main-link-icon {
    color: currentColor !important;
    flex: 0 0 var(--mos-icon-size);
    font-size: 0 !important;
    height: var(--mos-icon-size);
    line-height: 1;
    margin: 0 !important;
    width: var(--mos-icon-size);
}

/* The legacy customer theme shipped a high-specificity navy sidebar. Keep the
   same shared shell contract by overriding it with token surfaces. */
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar {
    background: var(--mos-color-surface) !important;
    border-right-color: var(--mos-color-border) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-heading {
    color: var(--mos-color-text-subtle) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link,
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link .nav-main-link-icon {
    color: var(--mos-color-text-muted) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active {
    background: var(--mos-color-red-50) !important;
    box-shadow: inset var(--mos-active-indicator-width) 0 0 var(--mos-color-red-500) !important;
    color: var(--mos-color-red-700) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active .nav-main-link-icon,
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover .nav-main-link-icon {
    color: currentColor !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .v2board-copyright {
    color: var(--mos-color-text-subtle) !important;
}

.mosvpn-lucide,
.mosvpn-lucide svg {
    color: currentColor !important;
    display: inline-block;
    height: var(--mos-icon-size);
    stroke-width: var(--mos-icon-stroke);
    vertical-align: middle;
    width: var(--mos-icon-size);
}

.mosvpn-lucide svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The collapse button carries .mosvpn-lucide for its glyph; the rule above
   would otherwise shrink the button itself to the 18px icon box. */
button.mosvpn-sidebar-collapse.mosvpn-lucide {
    height: var(--mos-control-height-md, 40px);
    width: var(--mos-control-height-md, 40px);
}

body.mosvpn-shell #page-header {
    background: color-mix(in srgb, var(--mos-color-surface) 94%, transparent) !important;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    box-shadow: none !important;
    min-height: var(--mos-topbar-height);
    position: sticky;
    top: 0;
}

body.mosvpn-shell:not(.mosvpn-auth-active) #main-container {
    padding-top: var(--mos-topbar-height) !important;
}

body.mosvpn-shell #page-header .content-header {
    gap: var(--mos-space-3);
    height: var(--mos-topbar-height) !important;
    max-width: none !important;
    padding: 0 var(--mos-space-6) !important;
}

body.mosvpn-shell #page-header .v2board-container-title {
    display: none !important;
}

/* One row, always. The title is the only thing allowed to give way. */
body.mosvpn-shell.mosvpn-client #page-header .content-header {
    flex-wrap: nowrap !important;
}

body.mosvpn-shell.mosvpn-client #page-header .sidebar-toggle {
    flex: 0 0 auto;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions {
    align-items: center;
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--mos-space-1);
    margin-left: auto;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .dropdown {
    display: inline-flex !important;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn {
    margin-right: 0 !important;
}

.mosvpn-shell-breadcrumb strong {
    min-width: 0;
}

#mosvpn-shell-topbar {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: var(--mos-space-4);
    min-width: 0;
}

.mosvpn-shell-breadcrumb {
    align-items: center;
    color: var(--mos-color-text-subtle);
    display: flex;
    flex: 1 1 auto;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
    min-width: 0;
}

.mosvpn-shell-breadcrumb a {
    align-items: center;
    color: var(--mos-color-text-subtle) !important;
    display: inline-flex;
    gap: var(--mos-space-2);
}

.mosvpn-shell-breadcrumb strong {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mosvpn-shell-search {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid transparent;
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-subtle);
    display: flex;
    flex: 0 1 var(--mos-search-width);
    gap: var(--mos-space-2);
    min-height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-3);
    transition: border-color var(--mos-motion-fast), background-color var(--mos-motion-fast);
}

.mosvpn-shell-search:focus-within {
    background: var(--mos-color-surface);
    border-color: var(--mos-color-red-300);
    box-shadow: var(--mos-focus-ring);
}

.mosvpn-shell-search input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--mos-color-text) !important;
    flex: 1;
    font-size: var(--mos-font-size-small);
    min-height: 0 !important;
    min-width: 0;
    outline: 0;
    padding: 0 !important;
}

.mosvpn-shell-locale {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

.mosvpn-shell-locale #v2board-admin-locale-switcher {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none;
    padding: 0;
    position: static !important;
}

.mosvpn-shell-locale #v2board-admin-locale-switcher select {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-small);
    height: var(--mos-control-height-sm);
}

.mosvpn-shell-duplicate-language {
    display: none !important;
}

body.mosvpn-shell .mosvpn-control-hero .mosvpn-locale-control {
    display: none !important;
}

body.mosvpn-shell #page-header .btn {
    align-items: center;
    background: transparent !important;
    border: var(--mos-border-width) solid transparent !important;
    border-radius: var(--mos-radius-control) !important;
    box-shadow: none !important;
    color: var(--mos-color-text-muted) !important;
    display: inline-flex;
    justify-content: center;
    min-height: var(--mos-control-height-sm);
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

body.mosvpn-shell #page-header .btn:hover,
body.mosvpn-shell #page-header .btn:focus {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
}

body.mosvpn-shell #main-container > .content,
body.mosvpn-shell #main-container .content:not(.content-header),
body.mosvpn-shell .mosvpn-control-center {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--mos-content-max-width) !important;
    padding-left: var(--mos-content-padding) !important;
    padding-right: var(--mos-content-padding) !important;
    width: 100%;
}

body.mosvpn-shell #page-container.sidebar-o {
    padding-left: var(--mos-sidebar-width) !important;
}

/*
 * OneUI's legacy `sidebar-mini` state applies a negative transform to the
 * sidebar and a compensating transform to its inner columns. The MosVPN
 * shell owns the desktop sidebar width/state, so inheriting that transform
 * can leave every menu label clipped on the left after a refresh or route
 * change. Reset the outer and inner transforms for desktop; the drawer
 * transforms below intentionally take over on smaller screens.
 */
@media (min-width: 1024px) {
    body.mosvpn-shell #page-container.sidebar-o #sidebar,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .content-header,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .content-side,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .nav-main,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .nav-main .nav-main-link-icon {
        transform: translateX(0) translateY(0) translateZ(0) !important;
    }

    /* Also undo the legacy mini-sidebar fade while the shared shell is in
       its expanded state. The custom collapsed class below remains the
       single source of truth for intentionally hiding labels. */
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-heading,
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-link-name,
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-link-badge {
        opacity: 1 !important;
    }
}

body.mosvpn-shell #page-container.page-header-fixed.sidebar-o #page-header,
body.mosvpn-shell #page-container.page-header-glass.sidebar-o #page-header {
    padding-left: var(--mos-sidebar-width) !important;
    transition: none;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar {
    width: var(--mos-sidebar-collapsed-width) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side {
    width: var(--mos-sidebar-collapsed-width) !important;
}

/* The legacy side-scroll layout has a more specific 250px rule on desktop.
   Match that specificity so the shared collapsed state cannot leave a wide
   content column hanging out of the 64px sidebar. */
@media (min-width: 1024px) {
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.side-scroll #sidebar .content-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.side-scroll #sidebar .content-side {
        width: var(--mos-sidebar-collapsed-width) !important;
    }
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header {
    justify-content: center !important;
    padding: 0 !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand-name,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-heading,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link-name,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .v2board-copyright {
    display: none !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .link-fx {
    font-size: 0 !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-sidebar-collapse {
    bottom: var(--mos-space-3);
    left: var(--mos-space-4);
    position: fixed;
    z-index: 1;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side-full {
    padding: var(--mos-space-4) var(--mos-space-2) var(--mos-space-12) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: var(--mos-space-3) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o {
    padding-left: var(--mos-sidebar-collapsed-width) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-fixed.sidebar-o #page-header,
body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-glass.sidebar-o #page-header {
    padding-left: var(--mos-sidebar-collapsed-width) !important;
}

.mosvpn-responsive-table td[data-mosvpn-numeric="true"],
.mosvpn-responsive-table th[data-mosvpn-numeric="true"] {
    font-variant-numeric: var(--mos-tabular-nums);
    text-align: right;
}

@media (max-width: 1023.98px) {
    body.mosvpn-shell #page-container.sidebar-o,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o {
        padding-left: 0 !important;
    }

    body.mosvpn-shell #page-container.page-header-fixed.sidebar-o #page-header,
    body.mosvpn-shell #page-container.page-header-glass.sidebar-o #page-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-fixed.sidebar-o #page-header {
        padding-left: 0 !important;
    }

    body.mosvpn-shell #sidebar,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar {
        transform: translateX(-100%) translateY(0) translateZ(0) !important;
        transition: transform var(--mos-motion-emphasized) !important;
        width: var(--mos-drawer-width) !important;
    }

    body.mosvpn-shell #page-container.sidebar-o-xs #sidebar,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o-xs #sidebar {
        transform: translateX(0) translateY(0) translateZ(0) !important;
        z-index: 1032 !important;
    }

    body.mosvpn-shell #sidebar .content-header,
    body.mosvpn-shell #sidebar .content-side,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side {
        width: 100% !important;
    }

    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand-name,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-heading,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link-name,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .v2board-copyright {
        display: initial !important;
    }

    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link {
        justify-content: flex-start;
    }

    .mosvpn-sidebar-collapse {
        display: none;
    }

    body.mosvpn-shell .v2board-nav-mask {
        background: var(--mos-color-overlay);
        inset: 0;
        position: fixed;
        z-index: 1031;
    }

    body.mosvpn-shell #page-header .content-header {
        padding: 0 var(--mos-space-4) !important;
    }

    body.mosvpn-shell #main-container > .content,
    body.mosvpn-shell #main-container .content:not(.content-header),
    body.mosvpn-shell .mosvpn-control-center {
        padding-left: var(--mos-space-4) !important;
        padding-right: var(--mos-space-4) !important;
    }

    .mosvpn-shell-search {
        display: none;
    }

    .mosvpn-responsive-table {
        background: transparent !important;
        border: 0 !important;
        display: block;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    .mosvpn-table-fixed-clone {
        display: none !important;
    }

    .mosvpn-table-scroll-wrap {
        overflow-x: auto !important;
    }

    .mosvpn-table-scroll {
        min-width: var(--mos-complex-table-min-width) !important;
    }

    .mosvpn-responsive-table thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .mosvpn-responsive-table tbody,
    .mosvpn-responsive-table tr,
    .mosvpn-responsive-table td {
        display: block;
        width: 100%;
    }

    .mosvpn-responsive-table tbody tr {
        background: var(--mos-color-surface);
        border: var(--mos-border-width) solid var(--mos-color-border);
        border-radius: var(--mos-radius-card);
        margin-bottom: var(--mos-space-3);
        overflow: hidden;
        padding: var(--mos-space-2) var(--mos-space-4);
    }

    .mosvpn-responsive-table tbody td {
        align-items: flex-start;
        background: transparent !important;
        border: 0 !important;
        display: flex;
        gap: var(--mos-space-3);
        justify-content: space-between;
        min-width: 0 !important;
        padding: var(--mos-space-2) 0 !important;
        text-align: right !important;
    }

    .mosvpn-responsive-table .ant-table-fixed-columns-in-body,
    .mosvpn-responsive-table .ant-table-fixed-columns-in-body > * {
        visibility: visible !important;
    }

    .mosvpn-responsive-table tbody td::before {
        color: var(--mos-color-text-subtle);
        content: attr(data-mosvpn-label);
        flex: 0 0 var(--mos-table-label-width);
        font-size: var(--mos-font-size-caption);
        font-weight: var(--mos-font-weight-semibold);
        text-align: left;
    }
}

@media (min-width: 992px) and (max-width: 1023.98px) {
    body.mosvpn-shell #page-header .sidebar-toggle,
    body.mosvpn-shell #page-header .d-lg-none {
        display: flex !important;
    }
}

@media (max-width: 575.98px) {
    .mosvpn-shell-breadcrumb > a,
    .mosvpn-shell-breadcrumb > .mosvpn-breadcrumb-separator,
    .mosvpn-shell-locale .v2board-admin-locale-icon {
        display: none !important;
    }

    /* Icon-only account button on phones: the caret and the wide padding
       were costing the page title ~26px it does not have at 320px. */
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn {
        padding-left: var(--mos-space-2) !important;
        padding-right: var(--mos-space-2) !important;
    }

    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn [data-mosvpn-icon="chevronDown"],
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn .fa-angle-down {
        display: none !important;
    }

    body.mosvpn-shell.mosvpn-client #page-header .content-header {
        gap: var(--mos-space-2);
    }

    /* 44px is the smallest target a thumb hits reliably. */
    body.mosvpn-shell.mosvpn-client #page-header .sidebar-toggle .btn,
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn,
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-theme {
        min-height: var(--mos-touch-target, 44px);
        min-width: var(--mos-touch-target, 44px);
    }

    .mosvpn-shell-locale #v2board-admin-locale-switcher select {
        max-width: var(--mos-locale-width-mobile);
    }
}

html[data-mosvpn-theme="dark"] body.mosvpn-shell #sidebar .nav-main-link.active,
html.mosvpn-dark body.mosvpn-shell #sidebar .nav-main-link.active {
    background: var(--mos-red-soft) !important;
    color: var(--mos-color-red-300) !important;
}


/* ---- Bottom navigation (phones) ------------------------------------------ */

.mosvpn-bottom-nav,
.mosvpn-sheet {
    display: none;
}

@media (max-width: 47.99875rem) {
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav .mosvpn-bottom-nav {
        background: color-mix(in srgb, var(--mos-color-surface) 96%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: var(--mos-border-width) solid var(--mos-color-border);
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        left: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        position: fixed;
        right: 0;
        z-index: 1030;
    }

    .mosvpn-bottom-nav__item {
        align-items: center;
        background: none;
        border: 0;
        color: var(--mos-color-text-muted) !important;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font: inherit;
        font-size: var(--mos-font-size-caption);
        font-weight: var(--mos-font-weight-medium);
        gap: var(--mos-space-1);
        justify-content: center;
        min-height: var(--mos-bottom-nav-height, 56px);
        padding: var(--mos-space-1) var(--mos-space-1);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mosvpn-bottom-nav__item > span:last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mosvpn-bottom-nav__item {
        transition: color var(--mos-motion-fast);
    }

    .mosvpn-bottom-nav__item.is-active {
        color: var(--mos-color-red-500) !important;
    }

    /* One small pop on the tab that just became current; never a loop. */
    .mosvpn-bottom-nav__item.is-active .mosvpn-lucide {
        animation: mosvpn-nav-pop var(--mos-motion-base) var(--mos-ease-out) both;
    }

    @keyframes mosvpn-nav-pop {
        from { transform: scale(.92); }
    }

    .mosvpn-bottom-nav__item:focus-visible {
        box-shadow: var(--mos-focus-ring);
        outline: none;
    }

    /* Content and any page-pinned action bar sit above the bar. */
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav #main-container {
        padding-bottom: calc(var(--mos-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + var(--mos-space-4)) !important;
    }

    /* One contract for every page-pinned action bar (pay, place order):
       it sits on top of the bar, and drops to the safe area when the bar
       hides for the keyboard, so it never leaves a 56px gap. */
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav .mos-order-detail-v2__actions,
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav .mos-checkout-v2__actions {
        bottom: calc(var(--mos-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px));
    }

    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav.mosvpn-keyboard-open .mos-order-detail-v2__actions,
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav.mosvpn-keyboard-open .mos-checkout-v2__actions {
        bottom: env(safe-area-inset-bottom, 0px);
    }

    /* One way in, not two: the hamburger goes, the "more" tab replaces it.
       The theme switch moves into the sheet. */
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav #page-header .sidebar-toggle,
    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav #page-header .mosvpn-shell-theme {
        display: none !important;
    }

    body.mosvpn-shell.mosvpn-client.mosvpn-has-bottom-nav.mosvpn-keyboard-open .mosvpn-bottom-nav {
        display: none;
    }

    body.mosvpn-sheet-open {
        overflow: hidden;
    }

    /* ---- "More" sheet ---- */
    .mosvpn-sheet.is-open {
        display: block;
        inset: 0;
        position: fixed;
        z-index: 1040;
    }

    .mosvpn-sheet__backdrop {
        animation: mosvpn-sheet-fade var(--mos-motion-fast) var(--mos-ease-out) both;
        background: var(--mos-color-overlay);
        inset: 0;
        position: absolute;
    }

    /* Closing plays the same motion in reverse; the shell keeps .is-open
       for one beat (.is-closing) so the panel has time to leave. */
    .mosvpn-sheet.is-closing .mosvpn-sheet__backdrop {
        animation-direction: reverse;
    }

    .mosvpn-sheet.is-closing .mosvpn-sheet__panel {
        animation: mosvpn-sheet-out var(--mos-motion-base) var(--mos-ease-standard) both;
    }

    @keyframes mosvpn-sheet-fade {
        from { opacity: 0; }
    }

    @keyframes mosvpn-sheet-out {
        to {
            opacity: 0;
            transform: translateY(var(--mos-space-6));
        }
    }

    .mosvpn-sheet__panel {
        animation: mosvpn-sheet-in var(--mos-motion-base) var(--mos-ease-out) both;
        background: var(--mos-color-surface);
        border-radius: var(--mos-radius-panel) var(--mos-radius-panel) 0 0;
        bottom: 0;
        box-shadow: var(--mos-shadow-sm);
        left: 0;
        max-height: 85vh;
        overflow: auto;
        padding: var(--mos-space-2) var(--mos-space-4) calc(var(--mos-space-4) + env(safe-area-inset-bottom, 0px));
        position: absolute;
        right: 0;
    }

    @keyframes mosvpn-sheet-in {
        from { opacity: .6; transform: translateY(var(--mos-space-6)); }
        to { opacity: 1; transform: none; }
    }

    .mosvpn-sheet__header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-height: var(--mos-touch-target, 44px);
    }

    .mosvpn-sheet__title {
        color: var(--mos-color-text);
        font-size: var(--mos-font-size-h2);
        font-weight: var(--mos-font-weight-semibold);
        margin: 0;
    }

    .mosvpn-sheet__close {
        align-items: center;
        background: var(--mos-color-surface-muted);
        border: 0;
        border-radius: var(--mos-radius-pill);
        color: var(--mos-color-text);
        cursor: pointer;
        display: inline-flex;
        height: var(--mos-touch-target, 44px);
        justify-content: center;
        width: var(--mos-touch-target, 44px);
    }

    .mosvpn-sheet__close:focus-visible,
    .mosvpn-sheet__link:focus-visible,
    .mosvpn-sheet__theme:focus-visible {
        box-shadow: var(--mos-focus-ring);
        outline: none;
    }

    .mosvpn-sheet__list {
        display: grid;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mosvpn-sheet__link {
        align-items: center;
        border-radius: var(--mos-radius-control);
        color: var(--mos-color-text) !important;
        display: flex;
        font-size: var(--mos-font-size-body);
        gap: var(--mos-space-3);
        min-height: var(--mos-control-height-lg);
        padding: 0 var(--mos-space-2);
        text-decoration: none;
    }

    .mosvpn-sheet__link .mosvpn-lucide {
        color: var(--mos-color-text-muted);
    }

    .mosvpn-sheet__link.is-active {
        background: var(--mos-color-red-50);
        color: var(--mos-color-red-700) !important;
    }

    .mosvpn-sheet__link.is-active .mosvpn-lucide {
        color: var(--mos-color-red-500);
    }

    .mosvpn-sheet__settings {
        border-top: var(--mos-border-width) solid var(--mos-color-border);
        margin-top: var(--mos-space-2);
        padding-top: var(--mos-space-2);
    }

    .mosvpn-sheet__setting {
        align-items: center;
        display: flex;
        gap: var(--mos-space-3);
        min-height: var(--mos-control-height-lg);
        padding: 0 var(--mos-space-2);
    }

    .mosvpn-sheet__setting .mosvpn-lucide {
        color: var(--mos-color-text-muted);
    }

    .mosvpn-sheet__setting-label {
        color: var(--mos-color-text);
        flex: 1 1 auto;
        font-size: var(--mos-font-size-body);
    }

    .mosvpn-sheet__theme {
        background: var(--mos-color-surface);
        border: var(--mos-border-width) solid var(--mos-color-border-strong);
        border-radius: var(--mos-radius-control);
        color: var(--mos-color-text);
        font: inherit;
        min-height: var(--mos-touch-target, 44px);
        padding: 0 var(--mos-space-3);
    }

    @media (prefers-reduced-motion: reduce) {
        .mosvpn-sheet__panel,
        .mosvpn-sheet__backdrop,
        .mosvpn-sheet.is-closing .mosvpn-sheet__panel,
        .mosvpn-bottom-nav__item.is-active .mosvpn-lucide {
            animation: none;
        }
    }
}


/* Routes the MosVPN runtime owns start with the compiled page hidden, so the
   first paint is not XiaoBoard's layout for a few hundred milliseconds
   before ours replaces it. The inline script in dashboard.blade.php sets the
   class; core.js removes it on mount; a timer removes it regardless. */
html.mosvpn-v2-pending #main-container > .content > :not([data-mosvpn-client-v2-root]) {
    visibility: hidden !important;
}

html.mosvpn-v2-pending-bare #root > :not([data-mosvpn-client-v2-root]) {
    visibility: hidden !important;
}

/* Same for the sidebar and header until mosvpn-shell.js has decorated them
   (see releaseShellPending), so a reload never shows the compiled menu. */
html.mosvpn-shell-pending #sidebar,
html.mosvpn-shell-pending #page-header {
    visibility: hidden !important;
}


/* ---- Split-screen widths: sidebar open, not much room left --------------- */
/* Between 992 and 1199px the fixed sidebar takes 284px and what remains had
   to hold breadcrumb, search, the theme select, language and the account
   email; the breadcrumb ended up at 35px. Search and theme shrink to what
   they are on a phone, the account button clips its email. */
@media (min-width: 62rem) and (max-width: 74.99875rem) {
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-search {
        flex-basis: calc(var(--mos-space-12) * 3);
    }

    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-theme {
        align-items: center;
        flex: 0 0 var(--mos-touch-target, 44px);
        height: var(--mos-touch-target, 44px);
        justify-content: center;
        max-width: var(--mos-touch-target, 44px);
        overflow: hidden;
        position: relative;
        width: var(--mos-touch-target, 44px);
    }

    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-theme select {
        opacity: 0;
        position: absolute;
        inset: 0;
        width: 100%;
    }

    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .btn {
        max-width: calc(var(--mos-space-12) * 4);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mosvpn-shell-breadcrumb {
        flex: 1 1 calc(var(--mos-space-12) * 3);
    }

    /* Crumbs never wrap into two lines; the current one clips instead. */
    .mosvpn-shell-breadcrumb > a,
    .mosvpn-shell-breadcrumb > strong {
        white-space: nowrap;
    }
}

/* 992–1099px: the sidebar has just appeared and the row is at its
   tightest. Search shrinks and the root crumb keeps only its icon, so the
   account menu and the actions are never the ones squeezed. */
@media (min-width: 62rem) and (max-width: 68.74875rem) {
    body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-search {
        flex-basis: calc(var(--mos-space-12) * 2);
    }

    .mosvpn-shell-breadcrumb [data-mosvpn-breadcrumb-home],
    .mosvpn-shell-breadcrumb > .mosvpn-breadcrumb-separator {
        display: none;
    }
}

/* ---- Header menus: theme and language share one control ------------------- */

body.mosvpn-client .mosvpn-shell-menu {
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

body.mosvpn-client .mosvpn-shell-menu__trigger {
    align-items: center;
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
    height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-2) 0 var(--mos-space-3);
    white-space: nowrap;
}

body.mosvpn-client .mosvpn-shell-menu__trigger:hover {
    border-color: var(--mos-color-border-strong);
}

body.mosvpn-client .mosvpn-shell-menu__trigger:focus-visible {
    box-shadow: var(--mos-focus-ring);
    outline: 0;
}

body.mosvpn-client .mosvpn-shell-menu__trigger[aria-expanded="true"] {
    border-color: var(--mos-color-red-500);
}

body.mosvpn-client .mosvpn-shell-menu__icon,
body.mosvpn-client .mosvpn-shell-menu__chevron,
body.mosvpn-client .mosvpn-shell-menu__item-icon,
body.mosvpn-client .mosvpn-shell-menu__check {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

body.mosvpn-client .mosvpn-shell-menu__icon {
    color: var(--mos-color-text-subtle);
}

body.mosvpn-client .mosvpn-shell-menu__chevron {
    color: var(--mos-color-text-subtle);
    transition: transform var(--mos-motion-fast) var(--mos-ease-standard);
}

body.mosvpn-client .mosvpn-shell-menu__trigger[aria-expanded="true"] .mosvpn-shell-menu__chevron {
    transform: rotate(180deg);
}

body.mosvpn-client .mosvpn-shell-menu__panel {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    box-shadow: var(--mos-shadow-md);
    display: grid;
    gap: var(--mos-space-1);
    inset-inline-end: 0;
    min-width: 12rem;
    padding: var(--mos-space-1);
    position: absolute;
    top: calc(100% + var(--mos-space-1));
    z-index: var(--mos-z-toast);
}

body.mosvpn-client .mosvpn-shell-menu__panel[hidden] {
    display: none;
}

body.mosvpn-client .mosvpn-shell-menu__item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
    min-height: var(--mos-control-height-md);
    padding: 0 var(--mos-space-3);
    text-align: left;
    width: 100%;
}

body.mosvpn-client .mosvpn-shell-menu__item:hover,
body.mosvpn-client .mosvpn-shell-menu__item:focus-visible {
    background: var(--mos-color-surface-muted);
    outline: 0;
}

body.mosvpn-client .mosvpn-shell-menu__item-icon {
    color: var(--mos-color-text-subtle);
}

body.mosvpn-client .mosvpn-shell-menu__item-label {
    flex: 1 1 auto;
}

body.mosvpn-client .mosvpn-shell-menu__check {
    color: var(--mos-color-red-500);
    visibility: hidden;
}

body.mosvpn-client .mosvpn-shell-menu__item[aria-checked="true"] {
    color: var(--mos-color-red-600);
    font-weight: var(--mos-font-weight-semibold);
}

body.mosvpn-client .mosvpn-shell-menu__item[aria-checked="true"] .mosvpn-shell-menu__item-icon,
body.mosvpn-client .mosvpn-shell-menu__item[aria-checked="true"] .mosvpn-shell-menu__check {
    color: var(--mos-color-red-500);
    visibility: visible;
}

/* The bundle's own language button goes; the header row rule above forces
   every .dropdown there to inline-flex, so this has to outrank it. */
body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-actions .dropdown.mosvpn-shell-duplicate-language {
    display: none !important;
}

/* The bundle's antd language list stays hidden even if it gets opened. */
body.mosvpn-client .mosvpn-shell-duplicate-language + .ant-dropdown,
body.mosvpn-client .mosvpn-shell-duplicate-language .ant-dropdown {
    display: none !important;
}

/* Narrow headers keep the icons and drop the words. */
@media (max-width: 74.99875rem) {
    body.mosvpn-client .mosvpn-shell-menu__value {
        clip: rect(0 0 0 0);
        height: var(--mos-border-width);
        margin: calc(-1 * var(--mos-border-width));
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: var(--mos-border-width);
    }

    body.mosvpn-client .mosvpn-shell-menu__trigger {
        justify-content: center;
        min-width: var(--mos-touch-target, 44px);
        padding: 0 var(--mos-space-2);
    }
}

/* ==== Customer shell, CloudFly-style layout ===================================
 * Layout only; every colour is an existing token. Scoped to the customer
 * site so the admin panel, which loads this file too, keeps its own shell. */

/* Sidebar: no group titles, a thin rule between groups instead. The words
   stay in the DOM for screen readers. */
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-heading {
    background: var(--mos-color-border);
    color: transparent !important;
    font-size: 0 !important;
    height: var(--mos-border-width);
    margin: var(--mos-space-3) calc(-1 * var(--mos-space-3)) !important;
    overflow: hidden;
    padding: 0 !important;
}

/* The current entry: accent text and a bar on the sidebar's own edge, no
   filled pill. Hover keeps the soft background. */
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mos-color-red-500) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active:hover {
    background: var(--mos-color-surface-muted) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active::before {
    background: var(--mos-color-red-500);
    border-radius: 0 var(--mos-radius-control) var(--mos-radius-control) 0;
    bottom: var(--mos-space-2);
    content: "";
    left: calc(-1 * var(--mos-space-3));
    position: absolute;
    top: var(--mos-space-2);
    width: var(--mos-active-indicator-width, 3px);
}

body.mosvpn-shell.mosvpn-client.mosvpn-sidebar-collapsed:not(.mosvpn-auth-active) #sidebar .nav-main-link.active::before {
    left: calc(-1 * var(--mos-space-2));
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .mosvpn-shell-brand {
    font-size: 1.125rem !important;
}

/* The collapse control is a round button riding the sidebar's edge, just
   below the header, in both states. */
@media (min-width: 1024px) {
    body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar {
        overflow: visible !important;
    }

    body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .mosvpn-sidebar-collapse,
    body.mosvpn-shell.mosvpn-client.mosvpn-sidebar-collapsed:not(.mosvpn-auth-active) #sidebar .mosvpn-sidebar-collapse {
        background: var(--mos-color-surface);
        border-radius: 999px;
        bottom: auto;
        box-shadow: var(--mos-shadow-sm);
        height: 28px;
        left: auto;
        position: absolute;
        right: -14px;
        top: calc(var(--mos-topbar-height) + var(--mos-space-5, 20px));
        width: 28px;
        z-index: 3;
    }

    body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .mosvpn-sidebar-collapse svg {
        height: 16px;
        width: 16px;
    }
}

/* Header: the breadcrumb goes (each page already opens with its title);
   search stays on the left, everything else sits on the right. */
body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-breadcrumb {
    display: none !important;
}

body.mosvpn-shell.mosvpn-client #mosvpn-shell-topbar {
    gap: var(--mos-space-2);
}

/* With the breadcrumb gone, the theme menu opens the right-hand group. */
body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-theme {
    margin-left: auto;
}

.mosvpn-shell-wallet {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--mos-space-2);
    margin-left: var(--mos-space-2);
}

.mosvpn-shell-wallet a {
    background: var(--mos-color-surface-muted);
    border-radius: 999px;
    display: grid;
    line-height: 1.2;
    padding: 5px var(--mos-space-4);
    text-decoration: none !important;
    white-space: nowrap;
}

.mosvpn-shell-wallet a:hover {
    background: var(--mos-color-border);
}

.mosvpn-shell-wallet small {
    color: var(--mos-color-text-muted);
    font-size: 11px;
    font-weight: var(--mos-font-weight-semibold);
}

.mosvpn-shell-wallet strong {
    color: var(--mos-color-red-500);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
}

/* Account: a round avatar with the email's first letter. The email itself
   moves into the menu header. */
body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account {
    margin-left: var(--mos-space-2);
    position: relative;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn {
    background: transparent !important;
    border: 0 !important;
    font-size: 0 !important;
    height: 40px;
    max-width: none !important;
    min-height: 40px;
    padding: 0 !important;
    width: 40px;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn > * {
    display: none !important;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn::before,
.mosvpn-shell-account__avatar {
    align-items: center;
    background: var(--mos-color-red-500);
    border-radius: 999px;
    color: var(--mos-color-neutral-0, #fff);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: var(--mos-font-weight-bold);
    height: 36px;
    justify-content: center;
    width: 36px;
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn::before {
    content: attr(data-mosvpn-initial);
    transition: box-shadow var(--mos-motion-fast);
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn:hover::before,
body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account > .btn:focus-visible::before {
    box-shadow: 0 0 0 3px var(--mos-color-red-50);
}

body.mosvpn-shell.mosvpn-client #page-header .mosvpn-shell-account .dropdown-menu {
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-card) !important;
    box-shadow: var(--mos-shadow-md) !important;
    min-width: 260px;
    overflow: hidden;
}

.mosvpn-shell-account__head {
    align-items: center;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    gap: var(--mos-space-3);
    padding: var(--mos-space-4);
}

.mosvpn-shell-account__who {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mosvpn-shell-account__who strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mosvpn-shell-account__who small {
    background: var(--mos-color-red-50);
    border-radius: 999px;
    color: var(--mos-color-red-500);
    font-size: 11px;
    font-weight: var(--mos-font-weight-bold);
    justify-self: start;
    padding: 1px var(--mos-space-2);
}

/* Narrower screens drop the words before anything else. */
@media (max-width: 74.99875rem) {
    .mosvpn-shell-wallet a[data-mosvpn-wallet="commission"] {
        display: none;
    }
}

@media (max-width: 61.99875rem) {
    .mosvpn-shell-wallet {
        display: none;
    }

}

/* Currency and language sit side by side in the same slot. */
body.mosvpn-client .mosvpn-shell-locale {
    gap: var(--mos-space-2);
}

/* Language, CloudFly style: a small button showing only the chosen flag;
   the list shows each flag with its language name. */
body.mosvpn-client .mosvpn-shell-menu--compact .mosvpn-shell-menu__trigger {
    justify-content: center;
    min-width: var(--mos-control-height-sm);
    padding: 0;
    width: var(--mos-control-height-sm);
}

body.mosvpn-client .mosvpn-shell-menu--compact .mosvpn-shell-menu__value,
body.mosvpn-client .mosvpn-shell-menu--compact .mosvpn-shell-menu__trigger .mosvpn-shell-menu__chevron {
    display: none;
}

body.mosvpn-client .mosvpn-shell-menu__flag {
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--mos-color-border);
    display: inline-flex;
    flex: 0 0 20px;
    height: 20px;
    overflow: hidden;
    width: 20px;
}

body.mosvpn-client .mosvpn-shell-menu__flag svg {
    display: block;
    height: 100%;
    width: 100%;
}

/* Theme: a single icon button that flips light and dark. */
body.mosvpn-client .mosvpn-shell-theme-toggle {
    align-items: center;
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    height: var(--mos-control-height-sm);
    justify-content: center;
    padding: 0;
    transition: border-color var(--mos-motion-fast), color var(--mos-motion-fast);
    width: var(--mos-control-height-sm);
}

body.mosvpn-client .mosvpn-shell-theme-toggle:hover {
    border-color: var(--mos-color-border-strong);
    color: var(--mos-color-text);
}

body.mosvpn-client .mosvpn-shell-theme-toggle:focus-visible {
    box-shadow: var(--mos-focus-ring);
    outline: 0;
}