/* 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;
}


/* ---- 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);
    }
}