/* Page-level MosVPN presentation. Business state and API behavior stay in the
   existing Umi bundles and surface decorators. */

/* Native admin dashboard --------------------------------------------------- */
body.mosvpn-shell.mosvpn-admin-dashboard .js-classic-nav,
body.mosvpn-shell.mosvpn-admin-dashboard .v2board-stats-bar[data-mosvpn-dashboard-source],
body.mosvpn-shell.mosvpn-admin-dashboard [data-mosvpn-dashboard-source-column] {
    display: none !important;
}

.mosvpn-admin-dashboard-overview {
    --mvc-border: var(--mos-color-border);
    --mvc-ink: var(--mos-color-text);
    --mvc-muted: var(--mos-color-text-subtle);
    --mvc-red: var(--mos-color-red-500);
    --mvc-red-dark: var(--mos-color-red-700);
    --mvc-surface: var(--mos-color-surface);
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-panel);
    box-shadow: var(--mos-shadow-xs);
    margin-bottom: var(--mos-space-4);
    padding: var(--mos-space-5);
}

.mosvpn-admin-dashboard-overview .mosvpn-overview-section {
    padding: 0;
}

body.mosvpn-shell.mosvpn-admin-dashboard #main-container > div > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1023.98px) {
    body.mosvpn-shell.mosvpn-admin-dashboard #main-container > .p-0 {
        padding-left: var(--mos-space-4) !important;
        padding-right: var(--mos-space-4) !important;
    }
}

body.mosvpn-shell.mosvpn-admin-dashboard #main-container .content > .block,
body.mosvpn-shell.mosvpn-admin-dashboard #main-container .content > .row .block {
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-panel) !important;
    box-shadow: var(--mos-shadow-xs) !important;
}

body.mosvpn-shell.mosvpn-admin-dashboard #main-container canvas {
    height: var(--mos-dashboard-chart-min-height) !important;
    min-height: var(--mos-dashboard-chart-min-height);
    max-width: 100%;
    overflow: hidden;
}

body.mosvpn-shell.mosvpn-admin-dashboard .mosvpn-dashboard-revenue-chart {
    height: 540px !important;
    min-height: 540px;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    body.mosvpn-shell.mosvpn-admin-dashboard .mosvpn-dashboard-revenue-chart {
        height: 500px !important;
        min-height: 500px;
    }
}

body.mosvpn-shell.mosvpn-admin-dashboard .mosvpn-dashboard-revenue-panel {
    margin-bottom: var(--mos-space-4) !important;
}

/* MosVPN management pages ------------------------------------------------- */
body.mosvpn-shell .mosvpn-control-center {
    color: var(--mos-color-text) !important;
    min-height: calc(100vh - var(--mos-topbar-height));
    padding-bottom: var(--mos-space-12) !important;
    padding-top: var(--mos-space-6) !important;
}

body.mosvpn-shell .mosvpn-control-hero {
    align-items: center;
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-panel) !important;
    box-shadow: var(--mos-shadow-xs) !important;
    color: var(--mos-color-text) !important;
    gap: var(--mos-space-4);
    min-height: 0;
    overflow: visible;
    padding: var(--mos-space-5) var(--mos-space-6);
}

body.mosvpn-shell .mosvpn-control-hero::before,
body.mosvpn-shell .mosvpn-control-hero::after,
body.mosvpn-shell .mosvpn-control-mark {
    display: none !important;
}

body.mosvpn-shell .mosvpn-hero-brand {
    align-items: center;
    gap: var(--mos-space-3);
    min-width: 0;
}

body.mosvpn-shell .mosvpn-control-hero h1 {
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-h1) !important;
    line-height: var(--mos-line-height-heading);
    margin: 0;
}

body.mosvpn-shell .mosvpn-control-hero p {
    color: var(--mos-color-text-muted) !important;
    font-size: var(--mos-font-size-small);
    margin: var(--mos-space-1) 0 0;
}

body.mosvpn-shell .mosvpn-control-hero .mosvpn-eyebrow {
    color: var(--mos-color-red-700) !important;
    font-size: var(--mos-font-size-caption);
    letter-spacing: var(--mos-letter-spacing-caption);
    margin-bottom: var(--mos-space-1);
    text-transform: none !important;
}

body.mosvpn-shell .mosvpn-health {
    background: var(--mos-color-success-50) !important;
    border: var(--mos-border-width) solid var(--mos-color-success-border) !important;
    color: var(--mos-color-success-700) !important;
}

body.mosvpn-shell .mosvpn-health.is-error {
    background: var(--mos-color-danger-50) !important;
    border-color: var(--mos-color-danger-border) !important;
    color: var(--mos-color-danger-700) !important;
}

body.mosvpn-shell .mosvpn-hero-actions {
    gap: var(--mos-space-2);
}

body.mosvpn-shell .mosvpn-subscription-actions {
    align-items: center;
    gap: var(--mos-space-2);
}

body.mosvpn-shell .mosvpn-subscription-actions .mosvpn-action-btn {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text-muted) !important;
    min-height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-3);
}

body.mosvpn-shell .mosvpn-subscription-actions .mosvpn-action-btn:hover:not(:disabled) {
    background: var(--mos-color-surface-muted) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
    transform: none;
}

.mosvpn-overflow-menu {
    position: relative;
}

.mosvpn-overflow-menu > summary {
    align-items: center;
    background: transparent;
    border: var(--mos-border-width) solid transparent;
    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;
    list-style: none;
    width: var(--mos-control-height-sm);
}

.mosvpn-overflow-menu > summary::-webkit-details-marker {
    display: none;
}

.mosvpn-overflow-menu > summary:hover,
.mosvpn-overflow-menu[open] > summary {
    background: var(--mos-color-surface-muted);
    border-color: var(--mos-color-border);
    color: var(--mos-color-text);
}

.mosvpn-overflow-menu__content {
    background: var(--mos-color-surface-raised);
    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);
    padding: var(--mos-space-2);
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + var(--mos-space-1));
    width: var(--mos-overflow-menu-width);
    z-index: 4;
}

body.mosvpn-shell .mosvpn-overflow-menu__content .mosvpn-action-btn {
    justify-content: flex-start;
    width: 100%;
}

body.mosvpn-shell .mosvpn-overflow-menu__content .mosvpn-action-danger {
    color: var(--mos-color-danger-700) !important;
}

/* Customer dashboard ------------------------------------------------------ */
body.mosvpn-shell .mosvpn-client-hero {
    background:
        linear-gradient(var(--mos-color-overlay), var(--mos-color-overlay)),
        url('/theme/default/assets/mosvpn-auth-hero.webp') center / cover no-repeat !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-panel) !important;
    box-shadow: var(--mos-shadow-sm) !important;
    color: var(--mos-color-neutral-0);
    margin-bottom: var(--mos-space-6);
    min-height: var(--mos-page-hero-min-height);
    padding: var(--mos-space-4) var(--mos-space-8);
}

body.mosvpn-shell .mosvpn-client-hero::after,
body.mosvpn-shell .mosvpn-client-orbit,
body.mosvpn-shell .mosvpn-client-hero-badges {
    display: none;
}

body.mosvpn-shell .mosvpn-client-hero-content {
    max-width: var(--mos-page-hero-copy-max-width);
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-client-hero h1 {
    color: var(--mos-color-neutral-0) !important;
    display: -webkit-box;
    font-size: var(--mos-font-size-h1);
    line-height: var(--mos-line-height-heading);
    margin: 0 0 var(--mos-space-1);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.mosvpn-shell .mosvpn-client-hero p {
    color: var(--mos-color-neutral-200) !important;
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: 0 0 var(--mos-space-2);
}

body.mosvpn-shell .mosvpn-client-eyebrow {
    color: var(--mos-color-red-200) !important;
    font-size: var(--mos-font-size-caption);
    letter-spacing: var(--mos-letter-spacing-caption);
    margin-bottom: var(--mos-space-1);
    text-transform: none;
}

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

body.mosvpn-shell .mosvpn-client-hero-actions a {
    border-radius: var(--mos-radius-control);
    box-shadow: none;
    font-size: var(--mos-font-size-small);
    min-height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-4);
    transition: background-color var(--mos-motion-fast), border-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

body.mosvpn-shell .mosvpn-client-hero-actions a:hover {
    transform: none;
}

body.mosvpn-shell .mosvpn-client-hero-primary {
    background: var(--mos-color-red-500) !important;
    color: var(--mos-color-neutral-0) !important;
}

body.mosvpn-shell .mosvpn-client-hero-secondary {
    background: transparent !important;
    border: var(--mos-border-width) solid var(--mos-color-neutral-400) !important;
    color: var(--mos-color-neutral-0) !important;
}

.mosvpn-client-subscription-empty {
    border: var(--mos-border-width) dashed var(--mos-color-border-strong) !important;
    border-radius: var(--mos-radius-card) !important;
    display: block;
    text-decoration: none !important;
}

.mosvpn-client-subscription-empty .mosvpn-empty-state {
    min-height: var(--mos-empty-state-min-height);
}

.mosvpn-client-management {
    display: grid;
    gap: var(--mos-space-4);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    margin-bottom: var(--mos-space-6);
}

.mosvpn-client-device-shortcut {
    align-items: center;
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: auto minmax(0, 1fr);
}

.mosvpn-client-device-shortcut-icon {
    align-items: center;
    background: var(--mos-color-red-50);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-red-700);
    display: inline-flex;
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mosvpn-client-device-shortcut-copy {
    min-width: 0;
}

.mosvpn-client-device-shortcut-copy > span {
    color: var(--mos-color-text-muted);
    display: block;
    font-size: var(--mos-font-size-caption);
    line-height: var(--mos-line-height-tight);
}

.mosvpn-client-device-shortcut-copy > strong {
    color: var(--mos-color-text);
    display: block;
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    line-height: var(--mos-line-height-heading);
    margin-top: var(--mos-space-1);
    overflow-wrap: anywhere;
}

.mosvpn-client-device-shortcut .mosvpn-button {
    grid-column: 1 / -1;
    text-decoration: none;
    touch-action: manipulation;
    width: 100%;
}

body.mosvpn-shell .mosvpn-client-subscription-overview {
    margin-bottom: var(--mos-space-4) !important;
}

body.mosvpn-shell .mosvpn-client-subscription-overview .mosvpn-client-subscription-card {
    margin-bottom: 0 !important;
}

.mosvpn-client-subscription-actions {
    align-items: center;
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    display: grid;
    gap: var(--mos-space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--mos-space-4);
    padding-top: var(--mos-space-4);
}

.mosvpn-client-subscription-actions .mosvpn-button {
    min-width: 0;
    text-decoration: none;
    touch-action: manipulation;
    width: 100%;
}

.mosvpn-client-subscription-traffic-stat {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    display: grid;
    gap: var(--mos-space-2);
    grid-template-columns: auto minmax(0, 1fr);
    min-height: var(--mos-control-height-md);
    min-width: 0;
    padding: var(--mos-space-2) var(--mos-space-3);
}

.mosvpn-client-subscription-traffic-icon {
    align-items: center;
    border-radius: var(--mos-radius-control);
    display: inline-flex;
    height: var(--mos-space-6);
    justify-content: center;
    width: var(--mos-space-6);
}

.mosvpn-client-subscription-traffic-icon .mosvpn-lucide {
    height: var(--mos-icon-size);
    width: var(--mos-icon-size);
}

.mosvpn-client-subscription-traffic-copy {
    min-width: 0;
}

.mosvpn-client-subscription-traffic-copy > span,
.mosvpn-client-subscription-traffic-copy > strong {
    display: block;
    line-height: var(--mos-line-height-tight);
}

.mosvpn-client-subscription-traffic-copy > span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mosvpn-client-subscription-traffic-copy > strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    margin-top: var(--mos-space-1);
    overflow-wrap: anywhere;
}

.mosvpn-client-subscription-traffic-stat--upload .mosvpn-client-subscription-traffic-icon {
    background: var(--mos-color-success-50);
    color: var(--mos-color-success-700);
}

.mosvpn-client-subscription-traffic-stat--download .mosvpn-client-subscription-traffic-icon {
    background: var(--mos-color-red-50);
    color: var(--mos-color-red-700);
}

html[data-mosvpn-theme="dark"] .mosvpn-client-subscription-traffic-stat--download .mosvpn-client-subscription-traffic-icon,
html.mosvpn-dark .mosvpn-client-subscription-traffic-stat--download .mosvpn-client-subscription-traffic-icon {
    color: var(--mos-color-red-300);
}

body.mosvpn-client-device-page-active #main-container .content > [data-mosvpn-client-device-page-source] {
    display: none !important;
}

.mosvpn-client-device-page {
    display: grid;
    gap: var(--mos-space-4);
    min-width: 0;
    padding-bottom: var(--mos-space-8);
}

.mosvpn-client-device-page-hero {
    align-items: center;
    background: linear-gradient(135deg, var(--mos-color-surface), var(--mos-color-red-50));
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-panel);
    box-shadow: var(--mos-shadow-xs);
    display: flex;
    gap: var(--mos-space-6);
    justify-content: space-between;
    min-width: 0;
    padding: var(--mos-space-6);
}

.mosvpn-client-device-page-hero > div {
    min-width: 0;
}

.mosvpn-client-device-page-eyebrow {
    color: var(--mos-color-red-700);
    display: block;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-caption);
    margin-bottom: var(--mos-space-1);
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-client-device-page-hero h1 {
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-h1);
    line-height: var(--mos-line-height-heading);
    margin: 0;
}

.mosvpn-client-device-page-hero p {
    color: var(--mos-color-text-muted);
    line-height: var(--mos-line-height-body);
    margin: var(--mos-space-2) 0 0;
    max-width: var(--mos-empty-copy-max-width);
}

.mosvpn-client-device-page-hero .mosvpn-button {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
}

.mosvpn-client-device-page-panel,
.mosvpn-client-device-page-panel > .mosvpn-panel {
    min-width: 0;
}

.mosvpn-client-device-page-note {
    align-items: flex-start;
    background: var(--mos-color-info-50);
    border: var(--mos-border-width) solid var(--mos-color-info-border);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-info-700);
    display: flex;
    gap: var(--mos-space-3);
    padding: var(--mos-space-4);
}

.mosvpn-client-device-page-note-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 var(--mos-control-height-xs);
    height: var(--mos-control-height-xs);
    justify-content: center;
}

.mosvpn-client-device-page-note strong {
    display: block;
    font-size: var(--mos-font-size-small);
    margin-bottom: var(--mos-space-1);
}

.mosvpn-client-device-page-note p {
    color: inherit;
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: 0;
}

html[data-mosvpn-theme="dark"] .mosvpn-client-device-page-hero,
html.mosvpn-dark .mosvpn-client-device-page-hero {
    border-color: var(--mos-color-border-strong);
}

.mosvpn-client-management > .mosvpn-panel {
    min-width: 0;
}

.mosvpn-client-account-details,
.mosvpn-client-device-meta {
    display: grid;
    gap: var(--mos-space-3);
    margin: 0;
}

.mosvpn-client-account-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mosvpn-client-account-details > div,
.mosvpn-client-device-meta > div {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    min-width: 0;
    padding: var(--mos-space-3);
}

.mosvpn-client-account-details dt,
.mosvpn-client-device-meta dt {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-tight);
    margin-bottom: var(--mos-space-1);
}

.mosvpn-client-account-details dd,
.mosvpn-client-device-meta dd {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-body);
    margin: 0;
    overflow-wrap: anywhere;
}

.mosvpn-client-device-hwid {
    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);
    display: inline-flex;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--mos-font-size-caption);
    font-variant-numeric: var(--mos-tabular-nums);
    letter-spacing: var(--mos-letter-spacing-caption);
    max-width: 100%;
    padding: var(--mos-space-1) var(--mos-space-2);
    user-select: all;
}

.mosvpn-client-account-skeleton,
.mosvpn-client-device-loading {
    display: grid;
    gap: var(--mos-space-3);
}

.mosvpn-client-account-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mosvpn-client-account-skeleton .mosvpn-skeleton {
    min-height: var(--mos-control-height-lg);
}

.mosvpn-client-device-loading .mosvpn-skeleton {
    min-height: calc(var(--mos-control-height-lg) + var(--mos-space-8));
}

.mosvpn-client-device-panel-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--mos-space-2);
}

.mosvpn-client-management .mosvpn-alert {
    margin-bottom: var(--mos-space-4);
}

.mosvpn-client-device-list {
    display: grid;
    gap: var(--mos-space-3);
}

.mosvpn-client-device-item {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--mos-space-4);
}

.mosvpn-client-device-icon {
    align-items: center;
    background: var(--mos-color-red-50);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-red-700);
    display: inline-flex;
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mosvpn-client-device-copy {
    min-width: 0;
}

.mosvpn-client-device-heading {
    align-items: center;
    display: flex;
    gap: var(--mos-space-2);
    justify-content: space-between;
    margin-bottom: var(--mos-space-3);
    min-width: 0;
}

.mosvpn-client-device-heading > strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-heading);
    min-width: 0;
    overflow-wrap: anywhere;
}

.mosvpn-client-device-heading .mosvpn-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mosvpn-client-device-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mosvpn-client-device-item .mosvpn-button {
    touch-action: manipulation;
    white-space: nowrap;
}

html[data-mosvpn-theme="dark"] .mosvpn-client-device-item,
html.mosvpn-dark .mosvpn-client-device-item {
    border-color: var(--mos-color-border-strong);
}

@media (max-width: 1023.98px) {
    .mosvpn-admin-dashboard-overview {
        padding: var(--mos-space-4);
    }

    body.mosvpn-shell .mosvpn-control-hero {
        align-items: flex-start;
        padding: var(--mos-space-4);
    }

    .mosvpn-client-management {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    body.mosvpn-shell .mosvpn-control-hero,
    body.mosvpn-shell .mosvpn-subscription-actions {
        align-items: stretch;
    }

    body.mosvpn-shell .mosvpn-control-hero,
    body.mosvpn-shell .mosvpn-hero-actions {
        flex-direction: column;
    }

    body.mosvpn-shell .mosvpn-subscription-actions .mosvpn-action-btn {
        flex: 1 1 auto;
        width: auto;
    }

    body.mosvpn-shell .mosvpn-client-hero {
        padding: var(--mos-space-5);
    }

    .mosvpn-client-account-details,
    .mosvpn-client-account-skeleton,
    .mosvpn-client-device-meta {
        grid-template-columns: 1fr;
    }

    .mosvpn-client-management .mosvpn-panel__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mosvpn-client-device-panel-actions {
        justify-content: space-between;
        width: 100%;
    }

    .mosvpn-client-device-item {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mosvpn-client-device-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .mosvpn-client-device-heading .mosvpn-badge {
        white-space: normal;
    }

    .mosvpn-client-device-item .mosvpn-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .mosvpn-client-device-page {
        gap: var(--mos-space-3);
        padding-bottom: var(--mos-space-6);
    }

    .mosvpn-client-device-page-hero {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mos-space-4);
        padding: var(--mos-space-5);
    }

    .mosvpn-client-device-page-hero .mosvpn-button {
        width: 100%;
    }

    .mosvpn-client-subscription-actions {
        align-items: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mosvpn-client-subscription-actions .mosvpn-button {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
    }
}

/* Mobile admin management overrides load after shared components. */
@media (max-width: 767.98px) {
    body.mosvpn-shell .mosvpn-control-hero {
        align-items: start;
        display: grid;
        gap: var(--mos-space-3) var(--mos-space-2);
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--mos-space-4) !important;
    }

    body.mosvpn-shell .mosvpn-hero-brand {
        display: block;
        min-width: 0;
    }

    body.mosvpn-shell .mosvpn-hero-actions {
        align-self: start;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
    }

    body.mosvpn-shell .mosvpn-mobile-control-tabs {
        background: var(--mos-color-surface-muted);
        border-color: var(--mos-color-border);
    }

    body.mosvpn-shell .mosvpn-mobile-control-tabs button {
        color: var(--mos-color-text-muted);
    }

    body.mosvpn-shell .mosvpn-mobile-control-tabs button.is-active {
        background: var(--mos-color-red-700) !important;
        color: #fff !important;
    }

    body.mosvpn-shell .mosvpn-mobile-control-tabs button.is-active .fa {
        color: #fff !important;
    }

    body.mosvpn-shell .mosvpn-subscription-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.mosvpn-shell .mosvpn-subscription-actions .mosvpn-action-btn {
        background: var(--mos-color-surface) !important;
        border-color: var(--mos-color-border) !important;
        color: var(--mos-color-text-muted) !important;
        min-height: var(--mos-control-height-lg);
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body.mosvpn-shell .mosvpn-modal {
        border-radius: var(--mos-radius-panel) var(--mos-radius-panel) 0 0 !important;
        max-height: calc(100vh - 54px);
        max-height: calc(100dvh - 54px);
    }
}