/* Generated by frontend/mosvpn-client/build.mjs. Do not edit directly. */

/* source: styles/runtime.css */
body.mosvpn-client-v2-active #main-container > .content {
    margin-inline: auto;
    max-width: var(--mos-content-max-width);
    padding: var(--mos-content-padding) !important;
    width: 100%;
}

.mos-client-page {
    color: var(--mos-color-text);
    display: grid;
    gap: var(--mos-space-6);
    margin-inline: auto;
    max-width: var(--mos-content-max-width);
    width: 100%;
}

.mos-client-page[aria-busy="true"] {
    cursor: progress;
}

[data-mosvpn-client-v2-source][hidden] {
    display: none !important;
}

@media (max-width: 767.98px) {
    body.mosvpn-client-v2-active #main-container > .content {
        padding: var(--mos-space-4) !important;
    }

    .mos-client-page {
        gap: var(--mos-space-4);
    }
}

/* source: styles/components.css */
.mos-client-card {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-panel);
    color: var(--mos-color-text);
    overflow: hidden;
}

.mos-client-card__header {
    align-items: flex-start;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    gap: var(--mos-space-4);
    justify-content: space-between;
    padding: var(--mos-space-5) var(--mos-space-6);
}

.mos-client-card__heading {
    display: grid;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-client-card__title,
.mos-client-card__description,
.mos-client-eyebrow {
    margin: 0;
}

/* The compiled bundle's stylesheet gives every paragraph under .content a
   bottom margin, at a specificity a single class cannot beat; a card
   description then pushed its own table 28px down. Spacing in the runtime
   comes from grid and flex gaps, never from paragraph margins. */
.mos-client-page.mos-client-page p,
.mos-client-dialog.mos-client-dialog p,
.mos-client-toasts.mos-client-toasts p {
    /* Block only: a centred lead keeps its `margin-inline: auto`. */
    margin-block: 0;
}

.mos-client-card__title {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
}

.mos-client-card__description {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
}

.mos-client-eyebrow {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-caption);
    text-transform: uppercase;
}

.mos-client-card__body {
    padding: var(--mos-space-6);
}

.mos-client-card__footer {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
    justify-content: flex-end;
    padding: var(--mos-space-4) var(--mos-space-6);
}

.mos-client-button {
    align-items: center;
    border: var(--mos-border-width) solid transparent;
    border-radius: var(--mos-radius-control);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    justify-content: center;
    min-height: var(--mos-control-height-md);
    padding-inline: var(--mos-space-4);
    text-decoration: none;
    transition: background-color var(--mos-motion-fast), border-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

.mos-client-button--sm { min-height: var(--mos-control-height-sm); padding-inline: var(--mos-space-3); }
.mos-client-button--lg { min-height: var(--mos-control-height-lg); padding-inline: var(--mos-space-6); }
.mos-client-button--primary { background: var(--mos-color-red-500); color: var(--mos-color-neutral-0); }
.mos-client-button--primary:hover { background: var(--mos-color-red-600); color: var(--mos-color-neutral-0); }
.mos-client-button--secondary { background: var(--mos-color-surface); border-color: var(--mos-color-border-strong); color: var(--mos-color-text); }
.mos-client-button--secondary:hover,
.mos-client-button--ghost:hover { background: var(--mos-color-surface-muted); color: var(--mos-color-text); }
.mos-client-button--ghost { background: transparent; color: var(--mos-color-text-muted); }
.mos-client-button--danger { background: var(--mos-color-danger-500); color: var(--mos-color-neutral-0); }
[data-mosvpn-client-v2-root] .mos-client-button--primary,
[data-mosvpn-client-v2-root] .mos-client-button--danger { color: var(--mos-color-neutral-0) !important; }
[data-mosvpn-client-v2-root] .mos-client-button--secondary,
[data-mosvpn-client-v2-root] .mos-client-button--ghost { color: var(--mos-color-text) !important; }
.mos-client-button:disabled,
.mos-client-button[aria-disabled="true"] { cursor: not-allowed; opacity: var(--mos-disabled-opacity); pointer-events: none; }
.mos-client-button[aria-busy="true"] .mos-client-icon { animation: mos-client-spin var(--mos-skeleton-duration) linear infinite; }

@keyframes mos-client-spin { to { transform: rotate(1turn); } }

.mos-client-icon,
.mos-client-icon svg {
    display: inline-flex;
    flex: 0 0 var(--mos-icon-size);
    height: var(--mos-icon-size);
    width: var(--mos-icon-size);
}

.mos-client-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--mos-icon-stroke);
}

.mos-client-status {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    min-height: var(--mos-control-height-xs);
    padding-inline: var(--mos-space-3);
}

.mos-client-status__dot {
    background: currentColor;
    border-radius: var(--mos-radius-pill);
    height: var(--mos-space-2);
    width: var(--mos-space-2);
}

.mos-client-status--success { background: var(--mos-color-success-50); border-color: var(--mos-color-success-border); color: var(--mos-color-success-700); }
.mos-client-status--warning { background: var(--mos-color-warning-50); border-color: var(--mos-color-warning-border); color: var(--mos-color-warning-700); }
.mos-client-status--danger { background: var(--mos-color-danger-50); border-color: var(--mos-color-danger-border); color: var(--mos-color-danger-700); }
.mos-client-status--info { background: var(--mos-color-info-50); border-color: var(--mos-color-info-border); color: var(--mos-color-info-700); }

.mos-client-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-4);
    justify-content: center;
    min-height: var(--mos-empty-state-min-height);
    padding: var(--mos-space-8);
    text-align: center;
}

.mos-client-empty__icon {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    height: var(--mos-space-12);
    justify-content: center;
    width: var(--mos-space-12);
}

.mos-client-empty__copy { display: grid; gap: var(--mos-space-2); max-width: var(--mos-empty-copy-max-width); }
.mos-client-empty h3,
.mos-client-empty p { margin: 0; }
.mos-client-empty h3 { color: var(--mos-color-text); font-size: var(--mos-font-size-body); font-weight: var(--mos-font-weight-semibold); }
.mos-client-empty p { color: var(--mos-color-text-muted); font-size: var(--mos-font-size-small); }

.mos-client-skeleton-group { display: grid; gap: var(--mos-space-3); }
.mos-client-skeleton {
    animation: mos-client-skeleton var(--mos-skeleton-duration) ease-in-out infinite;
    background: linear-gradient(90deg, var(--mos-color-surface-muted), var(--mos-color-border), var(--mos-color-surface-muted));
    background-size: var(--mos-skeleton-background-size);
    border-radius: var(--mos-radius-control);
    display: block;
    height: var(--mos-control-height-md);
}

@keyframes mos-client-skeleton { to { background-position-x: -200%; } }

.mos-client-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-card);
    display: flex;
    gap: var(--mos-space-3);
    min-width: 0;
    padding: var(--mos-space-4);
}

.mos-client-stat__icon {
    align-items: center;
    background: var(--mos-color-surface);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-info-500);
    display: inline-flex;
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-client-stat > div { display: grid; gap: var(--mos-space-1); min-width: 0; }
.mos-client-stat__label,
.mos-client-stat__note { color: var(--mos-color-text-muted); font-size: var(--mos-font-size-caption); }
.mos-client-stat__value { color: var(--mos-color-text); font-size: var(--mos-font-size-body); font-variant-numeric: var(--mos-tabular-nums); font-weight: var(--mos-font-weight-semibold); }

.mos-client-toasts {
    display: grid;
    gap: var(--mos-space-2);
    inset-block-start: var(--mos-space-4);
    inset-inline-end: var(--mos-space-4);
    max-width: var(--mos-empty-copy-max-width);
    position: fixed;
    z-index: var(--mos-z-toast);
}

.mos-client-toast {
    align-items: center;
    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-sm);
    color: var(--mos-color-text);
    display: flex;
    gap: var(--mos-space-3);
    padding: var(--mos-space-3) var(--mos-space-4);
    transition: opacity var(--mos-motion-fast), transform var(--mos-motion-fast);
}

.mos-client-toast--success { border-color: var(--mos-color-success-border); color: var(--mos-color-success-700); }
.mos-client-toast--danger { border-color: var(--mos-color-danger-border); color: var(--mos-color-danger-700); }
.mos-client-toast.is-leaving { opacity: 0; transform: translateY(calc(-1 * var(--mos-space-2))); }

.mos-client-dialog {
    background: transparent;
    border: 0;
    color: var(--mos-color-text);
    max-width: var(--mos-empty-copy-max-width);
    padding: 0;
    width: calc(100% - (2 * var(--mos-space-4)));
}

.mos-client-dialog::backdrop { background: var(--mos-color-overlay); }
.mos-client-dialog__card { box-shadow: var(--mos-shadow-md); }
.mos-client-dialog.is-fallback {
    align-items: center;
    background: var(--mos-color-overlay);
    display: flex;
    inset: 0;
    justify-content: center;
    max-width: none;
    position: fixed;
    width: 100%;
    z-index: var(--mos-z-toast);
}

.mos-client-copy-proxy {
    inset-inline-start: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
}

.mos-client-data-table {
    color: var(--mos-color-text);
    display: grid;
    gap: var(--mos-space-4);
    min-width: 0;
}

.mos-client-data-table__scroll {
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    isolation: isolate;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    position: relative;
}

.mos-client-data-table__loading {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    min-height: var(--mos-empty-state-min-height);
    padding: var(--mos-space-6);
}

.mos-client-data-table__mobile-sort { display: none; }

.mos-client-data-table__table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    width: 100%;
}

.mos-client-data-table__caption {
    clip-path: inset(50%);
    height: var(--mos-border-width);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: var(--mos-border-width);
}

.mos-client-data-table__heading,
.mos-client-data-table__cell {
    padding: var(--mos-space-3) var(--mos-space-4);
    text-align: start;
    vertical-align: middle;
}

.mos-client-data-table__heading {
    background: var(--mos-color-surface-raised);
    border-block-end: var(--mos-border-width) solid var(--mos-color-border-strong);
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    inset-block-start: 0;
    letter-spacing: var(--mos-letter-spacing-caption);
    position: sticky;
    z-index: var(--mos-z-sticky-header);
}

.mos-client-data-table__cell {
    background: var(--mos-table-row-background, var(--mos-color-surface));
    border-block-end: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-client-data-table__row {
    --mos-table-row-background: var(--mos-color-surface);
}

.mos-client-data-table__row:last-child .mos-client-data-table__cell {
    border-block-end: 0;
}

.mos-client-data-table--zebra .mos-client-data-table__row:nth-child(even) {
    --mos-table-row-background: var(--mos-color-surface-muted);
}

.mos-client-data-table__row:hover {
    --mos-table-row-background: var(--mos-color-surface-muted);
}

.mos-client-data-table__heading.is-numeric,
.mos-client-data-table__cell.is-numeric {
    font-variant-numeric: var(--mos-tabular-nums);
    text-align: end;
}

.mos-client-data-table__heading.is-centered,
.mos-client-data-table__cell.is-centered {
    text-align: center;
}

.mos-client-data-table__sort {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: var(--mos-space-2);
    justify-content: flex-start;
    letter-spacing: inherit;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.mos-client-data-table__heading.is-numeric .mos-client-data-table__sort {
    justify-content: flex-end;
}

.mos-client-data-table__heading.is-centered .mos-client-data-table__sort {
    justify-content: center;
}

.mos-client-data-table__sort-indicator {
    color: var(--mos-color-text-subtle);
    flex: 0 0 auto;
    font-size: var(--mos-font-size-small);
}

.mos-client-data-table__value {
    min-width: 0;
}

.mos-client-data-table__heading.is-sticky-start,
.mos-client-data-table__cell.is-sticky-start {
    inset-inline-start: var(--mos-table-sticky-offset, 0);
    position: sticky;
}

.mos-client-data-table__heading.is-sticky-end,
.mos-client-data-table__cell.is-sticky-end {
    inset-inline-end: var(--mos-table-sticky-offset, 0);
    position: sticky;
}

.mos-client-data-table__cell.is-sticky-start,
.mos-client-data-table__cell.is-sticky-end {
    z-index: var(--mos-z-sticky-cell);
}

.mos-client-data-table__heading.is-sticky-start,
.mos-client-data-table__heading.is-sticky-end {
    background: var(--mos-color-surface-raised);
    z-index: var(--mos-z-sticky-corner);
}

.mos-client-data-table__heading.is-sticky-start,
.mos-client-data-table__cell.is-sticky-start {
    border-inline-end: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-client-data-table__heading.is-sticky-end,
.mos-client-data-table__cell.is-sticky-end {
    border-inline-start: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-client-data-table__empty {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
}

.mos-client-data-table.is-empty .mos-client-data-table__scroll {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
}

.mos-client-data-table.is-empty .mos-client-data-table__empty {
    border-block-start: 0;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    margin-block-start: calc(-1 * var(--mos-space-4));
}

.mos-client-data-table__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
    justify-content: flex-end;
}

.mos-client-data-table__pages {
    align-items: center;
    display: flex;
    gap: var(--mos-space-1);
}

.mos-client-data-table__page,
.mos-client-data-table__ellipsis {
    align-items: center;
    background: transparent;
    border: var(--mos-border-width) solid transparent;
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    justify-content: center;
    min-height: var(--mos-control-height-sm);
    min-width: var(--mos-control-height-sm);
    padding: 0;
}

.mos-client-data-table__page {
    cursor: pointer;
}

.mos-client-data-table__page:hover {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text);
}

.mos-client-data-table__page.is-current {
    background: var(--mos-color-red-50);
    border-color: var(--mos-color-red-500);
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-client-data-table__page-status {
    color: var(--mos-color-text-muted);
    display: none;
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
}

@media (max-width: 575.98px) {
    .mos-client-card__header,
    .mos-client-card__footer { padding: var(--mos-space-4); }
    .mos-client-card__body { padding: var(--mos-space-4); }
    .mos-client-button { min-height: var(--mos-control-height-lg); }
    .mos-client-toasts { inset-inline: var(--mos-space-3); max-width: none; }

    .mos-client-data-table--mobile-cards .mos-client-data-table__scroll {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__table,
    .mos-client-data-table--mobile-cards .mos-client-data-table__table tbody {
        display: block;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__table thead { display: none; }

    .mos-client-data-table__mobile-sort {
        align-items: center;
        color: var(--mos-color-text-muted);
        display: flex;
        font-size: var(--mos-font-size-small);
        gap: var(--mos-space-2);
        padding-block-end: var(--mos-space-3);
    }

    .mos-client-data-table__sort-select {
        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);
        flex: 1 1 auto;
        font: inherit;
        min-height: var(--mos-touch-target, 44px);
        min-width: 0;
        padding: 0 var(--mos-space-3);
    }

    /* Title row: the primary cell and any headline cell share the first line,
       everything else stacks under it as label / value rows. */
    /* Declared after the earlier grid rule for the row, and one class more
       specific, so the title row wins the cascade. */
    .mos-client-data-table--mobile-cards .mos-client-data-table__table .mos-client-data-table__row {
        display: flex;
        flex-wrap: wrap;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__table .mos-client-data-table__cell {
        flex: 1 1 100%;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__table .mos-client-data-table__cell.is-primary {
        border-block-end: 0;
        flex: 1 1 0;
        min-width: 0;
        order: -2;
        padding-block-end: var(--mos-space-2);
        text-align: start;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__table .mos-client-data-table__cell.is-headline {
        border-block-end: 0;
        flex: 0 0 auto;
        order: -1;
        padding-block-end: var(--mos-space-2);
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell.is-primary + .mos-client-data-table__cell:not(.is-headline),
    .mos-client-data-table--mobile-cards .mos-client-data-table__cell.is-headline + .mos-client-data-table__cell {
        border-block-start: var(--mos-border-width) solid var(--mos-color-border);
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell.is-primary .mos-client-data-table__value {
        font-size: var(--mos-font-size-body);
        font-weight: var(--mos-font-weight-semibold);
        justify-self: start;
        overflow-wrap: anywhere;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__row {
        background: var(--mos-table-row-background, var(--mos-color-surface));
        border: var(--mos-border-width) solid var(--mos-color-border);
        border-radius: var(--mos-radius-card);
        display: grid;
        margin-block-end: var(--mos-space-3);
        overflow: hidden;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__row:last-child {
        margin-block-end: 0;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell {
        align-items: start;
        border-block-end: var(--mos-border-width) solid var(--mos-color-border);
        display: grid;
        gap: var(--mos-space-3);
        grid-template-columns: minmax(0, var(--mos-table-label-width)) minmax(0, 1fr);
        padding: var(--mos-space-3) var(--mos-space-4);
        position: static;
        text-align: end;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell:last-child {
        border-block-end: 0;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell::before {
        color: var(--mos-color-text-muted);
        content: attr(data-label);
        font-size: var(--mos-font-size-caption);
        font-weight: var(--mos-font-weight-semibold);
        text-align: start;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__cell[data-label=""]::before {
        display: none;
    }

    .mos-client-data-table--mobile-cards .mos-client-data-table__value {
        justify-self: end;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .mos-client-data-table__pagination {
        justify-content: space-between;
    }

    .mos-client-data-table__pages {
        display: none;
    }

    .mos-client-data-table__page-status {
        display: inline-flex;
    }
}

/* source: styles/motion.css */
/*
 * MosVPN client motion layer.
 *
 * Motion is reserved for interaction feedback and state changes. Durations,
 * spacing, shadows and opacity come from the shared design tokens so this
 * layer remains consistent across themes and viewport sizes.
 */

.mos-client-button {
    transition: background-color var(--mos-motion-fast),
        border-color var(--mos-motion-fast),
        box-shadow var(--mos-motion-fast),
        color var(--mos-motion-fast),
        opacity var(--mos-motion-fast),
        transform var(--mos-motion-fast);
}

.mos-client-button .mos-client-icon,
.mos-dashboard-v2__shortcut-arrow,
.mos-knowledge-v2__article-action,
.mos-order-v2__menu > summary .mos-client-icon {
    transition: transform var(--mos-motion-fast);
}

.mos-client-button:active:not(:disabled):not([aria-disabled="true"]),
.mos-order-v2__menu > summary:active,
.mos-knowledge-v2__chip:active,
.mos-order-v2__tab:active,
.mos-client-data-table__page:active {
    opacity: var(--mos-pressed-opacity);
    transform: translateY(var(--mos-border-width));
}

.mos-client-button[aria-busy="true"] {
    box-shadow: none;
    transform: none;
}

.mos-client-status {
    transition: background-color var(--mos-motion-fast),
        border-color var(--mos-motion-fast),
        color var(--mos-motion-fast);
}

.mos-client-status__dot {
    transition: background-color var(--mos-motion-fast),
        transform var(--mos-motion-fast);
}

.mos-dashboard-v2__device-meter-fill,
.mos-devices-v2__slot-meter-fill,
.mos-profile-v2__strength-segment,
.mos-traffic-v2__bar-segment {
    transition: background-color var(--mos-motion-fast),
        flex-basis var(--mos-motion-fast),
        opacity var(--mos-motion-fast),
        width var(--mos-motion-fast);
}

.mos-client-data-table__cell,
.mos-devices-v2__device,
.mos-order-v2__tab,
.mos-order-v2__tab-count,
.mos-knowledge-v2__chip,
.mos-profile-v2__switch,
.mos-profile-v2__switch-knob {
    transition: background-color var(--mos-motion-fast),
        border-color var(--mos-motion-fast),
        color var(--mos-motion-fast),
        opacity var(--mos-motion-fast),
        transform var(--mos-motion-fast);
}

.mos-dashboard-v2__shortcut,
.mos-knowledge-v2__article,
.mos-invite-v2__share-button {
    transition: background-color var(--mos-motion-fast),
        border-color var(--mos-motion-fast),
        box-shadow var(--mos-motion-fast),
        color var(--mos-motion-fast),
        transform var(--mos-motion-fast);
}

.mos-traffic-v2__bar {
    transition: box-shadow var(--mos-motion-fast), transform var(--mos-motion-fast);
}

.mos-dashboard-v2__traffic-ring {
    animation: mos-client-ring-in var(--mos-motion-emphasized) both;
    transform-origin: center;
}

.mos-node-v2__input,
.mos-node-v2__select,
.mos-knowledge-v2__search-input,
.mos-profile-v2__input,
.mos-ticket-v2__input {
    transition: background-color var(--mos-motion-fast),
        border-color var(--mos-motion-fast),
        box-shadow var(--mos-motion-fast),
        color var(--mos-motion-fast);
}

@media (hover: hover) and (pointer: fine) {
    .mos-client-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
        transform: translateY(calc(-1 * var(--mos-border-width)));
    }

    .mos-client-button--primary:hover,
    .mos-client-button--secondary:hover,
    .mos-client-button--danger:hover {
        box-shadow: var(--mos-shadow-xs);
    }

    .mos-client-button:hover:not([aria-busy="true"]) .mos-client-icon,
    .mos-order-v2__menu > summary:hover .mos-client-icon {
        transform: translateY(calc(-1 * var(--mos-border-width)));
    }

    .mos-client-status:hover .mos-client-status__dot {
        transform: scale(1.15);
    }

    .mos-dashboard-v2__shortcut:hover,
    .mos-invite-v2__share-button:hover {
        box-shadow: var(--mos-shadow-xs);
        transform: translateY(calc(-1 * var(--mos-border-width)));
    }

    .mos-dashboard-v2__shortcut:hover .mos-dashboard-v2__shortcut-arrow,
    .mos-knowledge-v2__article:hover .mos-knowledge-v2__article-action {
        transform: translateX(var(--mos-space-1));
    }

    .mos-traffic-v2__day:hover .mos-traffic-v2__bar {
        box-shadow: var(--mos-shadow-xs);
        transform: translateY(calc(-1 * var(--mos-border-width)));
    }
}

.mos-order-v2__menu[open] .mos-order-v2__menu-content {
    animation: mos-client-menu-in var(--mos-motion-fast) both;
    transform-origin: top right;
}

.mos-client-toast {
    animation: mos-client-toast-in var(--mos-motion-fast) both;
}

.mos-client-toast.is-leaving {
    animation: none;
}

.mos-client-dialog[open]::backdrop {
    animation: mos-client-fade-in var(--mos-motion-emphasized) both;
}

.mos-client-dialog[open] .mos-client-dialog__card,
.mos-client-dialog.is-fallback .mos-client-dialog__card {
    animation: mos-client-dialog-in var(--mos-motion-emphasized) both;
}

@keyframes mos-client-menu-in {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--mos-space-1)));
    }
}

@keyframes mos-client-toast-in {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--mos-space-2)));
    }
}

@keyframes mos-client-dialog-in {
    from {
        opacity: 0;
        transform: translateY(var(--mos-space-2));
    }
}

@keyframes mos-client-fade-in {
    from { opacity: 0; }
}

@keyframes mos-client-ring-in {
    from {
        opacity: 0;
        transform: scale(.94) rotate(-8deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog),
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog) *,
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog)::before,
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog)::after,
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog) *::before,
    :where([data-mosvpn-client-v2-root], .mos-client-toasts, .mos-client-dialog) *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .mos-client-button,
    .mos-client-button .mos-client-icon,
    .mos-client-status__dot,
    .mos-dashboard-v2__shortcut,
    .mos-dashboard-v2__shortcut-arrow,
    .mos-invite-v2__share-button,
    .mos-knowledge-v2__article,
    .mos-knowledge-v2__article-action,
    .mos-order-v2__menu > summary,
    .mos-order-v2__menu-content,
    .mos-order-v2__tab,
    .mos-knowledge-v2__chip,
    .mos-client-data-table__page,
    .mos-traffic-v2__bar,
    .mos-client-toast,
    .mos-client-dialog__card {
        transform: none !important;
    }

    .mos-dashboard-v2__traffic-ring {
        animation: none !important;
    }
}

/* source: styles/motion-system.css */
/*
 * MosVPN client motion system.
 *
 * Three layers, one clock: ambient (very slow, tiny amplitude), reveal (once,
 * on the way in) and feedback (fast, on touch). Every duration and easing is a
 * token from mosvpn-tokens.css; nothing here names a number.
 *
 * Nothing is hidden until the runtime has marked the document
 * `html.mos-motion-ready` — a script failure leaves the page fully visible —
 * and every hidden state has a fallback that shows it. Only `transform` and
 * `opacity` move, so a mid-range phone stays at 60fps.
 */

/* ---- Page enter -------------------------------------------------------- */

/* core.js puts .mos-motion-enter on a freshly mounted page and takes it off
   again once the entrance is over, so later re-renders (polling, store
   updates) never replay it. Children stagger by the index the runtime sets. */
html.mos-motion-ready .mos-motion-enter > * {
    animation: mos-motion-enter var(--mos-motion-reveal) var(--mos-ease-out) both;
    animation-delay: calc(var(--mos-motion-stagger) * var(--mos-motion-index, 0));
}

@keyframes mos-motion-enter {
    from {
        opacity: 0;
        transform: translateY(var(--mos-space-3));
    }
}

/* ---- Scroll reveal ----------------------------------------------------- */

/* UI.reveal() marks a card, watches it with an IntersectionObserver and adds
   .is-visible once; a timer adds it regardless, so nothing stays at opacity 0. */
html.mos-motion-ready .mos-motion-reveal {
    opacity: 0;
    transform: translateY(var(--mos-space-5));
    transition: opacity var(--mos-motion-reveal) var(--mos-ease-out),
        transform var(--mos-motion-reveal) var(--mos-ease-out);
}

html.mos-motion-ready .mos-motion-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---- Ambient: the network motif on the plan card ------------------------ */

.mos-motion-motif {
    inset: 0;
    opacity: var(--mos-motif-opacity);
    overflow: hidden;
    pointer-events: none;
    position: absolute;
}

.mos-motion-motif svg {
    animation: mos-motion-float var(--mos-motion-ambient) var(--mos-ease-standard) infinite alternate;
    /* Top-right corner only: never under the numbers or the buttons. */
    height: 50%;
    inset-block-start: 0;
    inset-inline-end: 0;
    position: absolute;
    width: 44%;
}

/* Two or three nodes breathe, each on its own phase; the rest hold still. */
.mos-motion-motif .is-live {
    animation: mos-motion-breathe var(--mos-motion-ambient) var(--mos-ease-standard) infinite;
    animation-delay: calc(-1 * var(--mos-motion-ambient) * var(--mos-motion-phase, 0));
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes mos-motion-float {
    to { transform: translateY(var(--mos-space-1)); }
}

@keyframes mos-motion-breathe {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25); }
}

/* ---- Ambient: the live beacon on an active plan ------------------------ */

.mos-client-status.is-live .mos-client-status__dot {
    position: relative;
}

.mos-client-status.is-live .mos-client-status__dot::after {
    animation: mos-motion-beacon var(--mos-motion-beacon) var(--mos-ease-out) infinite;
    background: currentColor;
    border-radius: inherit;
    content: '';
    inset: 0;
    position: absolute;
}

@keyframes mos-motion-beacon {
    from { opacity: var(--mos-beacon-opacity); transform: scale(1); }
    to { opacity: 0; transform: scale(1.8); }
}

/* A hidden tab burns no frames on ambient loops. */
html.mos-motion-paused .mos-motion-motif svg,
html.mos-motion-paused .mos-motion-motif .is-live,
html.mos-motion-paused .mos-client-status.is-live .mos-client-status__dot::after {
    animation-play-state: paused;
}

/* ---- Data: chart bars grow once, on the first successful load ---------- */

.mos-traffic-v2__plot.is-growing .mos-traffic-v2__bar {
    animation: mos-motion-grow var(--mos-motion-reveal) var(--mos-ease-out) both;
    animation-delay: calc(var(--mos-motion-stagger-tight) * var(--mos-motion-index, 0));
    transform-origin: bottom;
}

@keyframes mos-motion-grow {
    from { transform: scaleY(0); }
}

/* ---- Feedback ---------------------------------------------------------- */

/* A changed total nudges up into place rather than blinking. */
.mos-checkout-v2__value.is-updated {
    animation: mos-motion-nudge var(--mos-motion-base) var(--mos-ease-out) both;
}

@keyframes mos-motion-nudge {
    from {
        opacity: 0;
        transform: translateY(var(--mos-space-1));
    }
}

/* Copy → check for a moment. */
.mos-client-button.is-copied .mos-client-icon {
    animation: mos-motion-pop var(--mos-motion-base) var(--mos-ease-spring) both;
}

@keyframes mos-motion-pop {
    from { transform: scale(.7); }
}

/* Press feedback everywhere, and the hover lift only where a pointer hovers. */
.mos-client-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(.985);
    transition-duration: var(--mos-motion-instant);
}

/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.mos-motion-ready .mos-motion-enter > *,
    html.mos-motion-ready .mos-motion-reveal,
    .mos-motion-motif svg,
    .mos-motion-motif .is-live,
    .mos-client-status.is-live .mos-client-status__dot::after,
    .mos-traffic-v2__plot.is-growing .mos-traffic-v2__bar,
    .mos-checkout-v2__value.is-updated,
    .mos-client-button.is-copied .mos-client-icon {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mos-client-status.is-live .mos-client-status__dot::after {
        opacity: 0 !important;
    }
}

/* source: styles/pages/dashboard.css */
/*
 * Dashboard.
 *
 * Banner first, then the three figures a customer looks for (plan, usage,
 * referral money), then the apps and the plans. Nine in ten customers open
 * this on a phone: every row collapses to one column and the plan card is the
 * first thing under the banner.
 */

body.mos-dashboard-v2-is-active #main-container > .content > :not(.mos-dashboard-v2) {
    display: none !important;
}

.mos-dashboard-v2 {
    align-content: start;
    display: grid;
    gap: var(--mos-space-4);
}

/* The compiled bundle's stylesheet gives every .content p a bottom margin;
   inside this page spacing comes from the grid gaps, not from paragraphs. */
.mos-client-page.mos-dashboard-v2 p {
    margin: 0;
}

/* The page keeps an accessible name; the topbar already shows the title. */
.mos-dashboard-v2__title {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---- Loading: the mark turns while the account loads ------------------- */

.mos-dashboard-v2__loading {
    align-content: center;
    display: grid;
    gap: var(--mos-space-2);
    justify-items: center;
    min-height: 60vh;
    position: relative;
    text-align: center;
}

.mos-dashboard-v2__loading-ring,
.mos-dashboard-v2__loading-mark {
    grid-column: 1;
    grid-row: 1;
}

.mos-dashboard-v2__loading-ring {
    animation: mos-dashboard-loading-ring var(--mos-motion-beacon) var(--mos-ease-out) infinite;
    border: 2px solid var(--mos-color-red-500);
    border-radius: var(--mos-radius-panel);
    height: 4.5rem;
    opacity: 0;
    width: 4.5rem;
}

.mos-dashboard-v2__loading-mark {
    align-items: center;
    background-color: var(--mos-color-red-500);
    background-image: linear-gradient(135deg, var(--mos-color-red-500), var(--mos-color-red-700));
    border-radius: var(--mos-radius-panel);
    box-shadow: inset 0 1px 0 var(--mos-glass-highlight), var(--mos-glass-shadow);
    color: var(--mos-color-neutral-0);
    display: inline-flex;
    height: 4.5rem;
    justify-content: center;
    margin-bottom: var(--mos-space-4);
    width: 4.5rem;
}

.mos-dashboard-v2__loading-mark svg {
    height: 2.75rem;
    width: 2.75rem;
}

.mos-dashboard-v2__loading-arcs {
    animation: mos-dashboard-loading-spin calc(var(--mos-motion-reveal) * 2) linear infinite;
    transform-box: view-box;
    transform-origin: center;
}

.mos-dashboard-v2__loading-slash {
    animation: mos-dashboard-loading-breathe var(--mos-motion-beacon) var(--mos-ease-standard) infinite;
}

.mos-dashboard-v2__loading-title {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-dashboard-v2__loading-hint {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-small);
}

@keyframes mos-dashboard-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes mos-dashboard-loading-breathe {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes mos-dashboard-loading-ring {
    from { opacity: .6; transform: scale(1); }
    to { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .mos-dashboard-v2__loading-ring,
    .mos-dashboard-v2__loading-arcs,
    .mos-dashboard-v2__loading-slash {
        animation: none;
    }

    .mos-dashboard-v2__loading-ring {
        opacity: .35;
    }
}

/* ---- Notice strip and banner ------------------------------------------- */

.mos-dashboard-v2__strip {
    align-items: center;
    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);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-3);
    min-height: var(--mos-touch-target, 44px);
    padding: var(--mos-space-2) var(--mos-space-4);
    text-align: left;
    width: 100%;
}

.mos-dashboard-v2__strip:hover {
    filter: brightness(1.05);
}

.mos-dashboard-v2__strip-icon,
.mos-dashboard-v2__strip-icon .mos-client-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.mos-dashboard-v2__strip-title {
    flex: 1 1 auto;
    font-weight: var(--mos-font-weight-semibold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mos-dashboard-v2__strip-date {
    color: var(--mos-color-text-subtle);
    flex: 0 0 auto;
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-dashboard-v2__hero {
    align-items: flex-end;
    background-color: var(--mos-color-surface-muted);
    background-position: center;
    background-size: cover;
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-panel);
    color: var(--mos-color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    min-height: 200px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
    width: 100%;
}

.mos-dashboard-v2__hero::after {
    background: linear-gradient(to top, var(--mos-color-overlay), transparent 70%);
    content: '';
    inset: 0;
    position: absolute;
}

.mos-dashboard-v2__hero--skeleton {
    cursor: default;
}

.mos-dashboard-v2__hero-copy {
    color: var(--mos-color-neutral-0);
    display: grid;
    gap: var(--mos-space-1);
    padding: var(--mos-space-5) var(--mos-space-6);
    position: relative;
    z-index: 1;
}

.mos-dashboard-v2__hero-title {
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-dashboard-v2__hero-date {
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    opacity: .85;
}

.mos-dashboard-v2__notice-dialog .mos-client-dialog__card {
    max-width: 44rem;
}

.mos-dashboard-v2__notice-image {
    border-radius: var(--mos-radius-card);
    display: block;
    margin-bottom: var(--mos-space-4);
    max-height: 16rem;
    object-fit: cover;
    width: 100%;
}

.mos-dashboard-v2__notice-body {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    line-height: 1.6;
    max-height: 60vh;
    overflow: auto;
    overflow-wrap: anywhere;
}

.mos-dashboard-v2__notice-body img {
    height: auto;
    max-width: 100%;
}

/* ---- Alerts (pending order / ticket) ----------------------------------- */

.mos-dashboard-v2__alerts {
    display: grid;
    gap: var(--mos-space-3);
}

.mos-dashboard-v2__alert {
    align-items: center;
    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;
    flex-wrap: wrap;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-3);
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-dashboard-v2__alert p {
    flex: 1 1 16rem;
    margin: 0;
}

.mos-dashboard-v2__alert--warning {
    background: var(--mos-color-warning-50);
    border-color: var(--mos-color-warning-border);
    color: var(--mos-color-warning-700);
}

.mos-dashboard-v2__alert--danger {
    background: var(--mos-color-danger-50);
    border-color: var(--mos-color-danger-border);
    color: var(--mos-color-danger-700);
}

.mos-dashboard-v2__alert-icon,
.mos-dashboard-v2__alert-icon .mos-client-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

/* ---- Cards -------------------------------------------------------------- */

.mos-dashboard-v2__card {
    display: grid;
    gap: var(--mos-space-4);
    min-width: 0;
    padding: var(--mos-space-5);
}

.mos-dashboard-v2__section-head {
    align-items: center;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
}

.mos-dashboard-v2__section-head h2 {
    align-items: center;
    color: var(--mos-color-text);
    display: flex;
    gap: var(--mos-space-2);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
    margin: 0;
}

.mos-dashboard-v2__section-icon,
.mos-dashboard-v2__section-icon .mos-client-icon {
    color: var(--mos-color-red-500);
    display: inline-flex;
}

.mos-dashboard-v2__hint {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-small);
    margin: calc(-1 * var(--mos-space-2)) 0 0;
}

.mos-dashboard-v2__link {
    color: var(--mos-color-red-600);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.mos-dashboard-v2__link:hover {
    text-decoration: underline;
}

.mos-dashboard-v2__stats {
    display: grid;
    gap: var(--mos-space-4);
    min-width: 0;
}

/* ---- Plan card ---------------------------------------------------------- */

.mos-dashboard-v2__package-card {
    background: var(--mos-color-surface);
    border-color: var(--mos-color-border-strong);
    overflow: hidden;
    /* The network motif is absolutely placed behind the content. */
    position: relative;
}

.mos-dashboard-v2__package-card > .mos-motion-motif {
    color: var(--mos-color-red-500);
}

.mos-dashboard-v2__package-card > :not(.mos-motion-motif) {
    position: relative;
}

.mos-dashboard-v2__plan-body {
    display: grid;
    gap: var(--mos-space-3);
}

.mos-dashboard-v2__plan-name {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
    margin: 0;
}

.mos-dashboard-v2__plan-expiry {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    margin: 0;
}

.mos-dashboard-v2__usage {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-dashboard-v2__usage-line {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    margin: 0;
}

.mos-dashboard-v2__usage-bar {
    --mos-dashboard-usage-color: var(--mos-color-success-500);
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    display: block;
    height: var(--mos-space-2);
    overflow: hidden;
}

.mos-dashboard-v2__usage-bar--warning { --mos-dashboard-usage-color: var(--mos-color-warning-500); }
.mos-dashboard-v2__usage-bar--danger { --mos-dashboard-usage-color: var(--mos-color-danger-500); }

.mos-dashboard-v2__usage-fill {
    background: var(--mos-dashboard-usage-color);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width var(--mos-motion-base) var(--mos-ease-out);
    width: var(--mos-dashboard-usage, 0%);
}

.mos-dashboard-v2__devices {
    align-items: center;
    color: var(--mos-color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
    margin: 0;
}

.mos-dashboard-v2__devices-icon,
.mos-dashboard-v2__devices-icon .mos-client-icon {
    display: inline-flex;
}

.mos-dashboard-v2__actions {
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-top: var(--mos-space-1);
}

.mos-dashboard-v2__actions .mos-client-button {
    white-space: nowrap;
}

.mos-dashboard-v2__plan--empty {
    align-content: start;
}

.mos-dashboard-v2__buy {
    align-items: center;
    color: var(--mos-color-text);
    display: grid;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-3);
    justify-items: center;
    min-height: 9rem;
    text-align: center;
    text-decoration: none;
}

.mos-dashboard-v2__buy-icon {
    align-items: center;
    background: var(--mos-color-red-500);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-neutral-0);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.mos-dashboard-v2__buy:hover .mos-dashboard-v2__buy-icon {
    background: var(--mos-color-red-600);
}

/* ---- Figure cards (usage, commission) ----------------------------------- */

.mos-dashboard-v2__figure-list {
    display: grid;
    gap: var(--mos-space-3);
}

.mos-dashboard-v2__figure {
    align-items: center;
    display: flex;
    gap: var(--mos-space-2);
    min-width: 0;
}

.mos-dashboard-v2__figure-icon,
.mos-dashboard-v2__figure-icon .mos-client-icon {
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    flex: 0 0 auto;
}

.mos-dashboard-v2__figure--up .mos-dashboard-v2__figure-icon { color: var(--mos-color-success-500); }
.mos-dashboard-v2__figure--down .mos-dashboard-v2__figure-icon { color: var(--mos-color-info-500); }
.mos-dashboard-v2__figure--total .mos-dashboard-v2__figure-icon { color: var(--mos-color-red-500); }

.mos-dashboard-v2__figure-label {
    color: var(--mos-color-text-muted);
    flex: 1 1 auto;
    font-size: var(--mos-font-size-small);
}

.mos-dashboard-v2__figure-value {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    white-space: nowrap;
}

.mos-dashboard-v2__card-link {
    align-items: center;
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    color: var(--mos-color-red-600);
    display: flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--mos-space-3);
    text-decoration: none;
}

.mos-dashboard-v2__card-link .mos-client-icon {
    display: inline-flex;
}

/* ---- Downloads ---------------------------------------------------------- */

.mos-dashboard-v2__tiles {
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

.mos-dashboard-v2__tile {
    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);
    color: var(--mos-color-text-muted);
    display: grid;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    justify-items: center;
    min-height: var(--mos-touch-target, 44px);
    padding: var(--mos-space-4) var(--mos-space-2);
    text-decoration: none;
    transition: border-color var(--mos-motion-fast) var(--mos-ease-standard), color var(--mos-motion-fast) var(--mos-ease-standard);
}

.mos-dashboard-v2__tile:hover {
    border-color: var(--mos-color-red-500);
    color: var(--mos-color-text);
}

.mos-dashboard-v2__tile-icon {
    align-items: center;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.mos-dashboard-v2__tile-icon img {
    display: block;
    height: 1.75rem;
    width: 1.75rem;
}

html[data-mosvpn-theme="dark"] .mos-dashboard-v2__tile-icon img,
html.mosvpn-dark .mos-dashboard-v2__tile-icon img {
    filter: invert(1);
}

/* ---- Plans -------------------------------------------------------------- */

.mos-dashboard-v2__offers {
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.mos-dashboard-v2__offer {
    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-1);
    padding: var(--mos-space-4);
}

.mos-dashboard-v2__offer.is-current {
    border-color: var(--mos-color-success-border);
}

.mos-dashboard-v2__offer-head {
    align-items: center;
    display: flex;
    gap: var(--mos-space-2);
    justify-content: space-between;
    margin-bottom: var(--mos-space-1);
}

.mos-dashboard-v2__offer-head h3 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    margin: 0;
}

.mos-dashboard-v2__offer-spec {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-small);
    margin: 0;
}

.mos-dashboard-v2__offer-price {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    margin: var(--mos-space-2) 0 var(--mos-space-3);
}

.mos-dashboard-v2__offer .mos-client-button {
    justify-self: start;
}

/* ---- Layout ------------------------------------------------------------- */

/* Between a phone and a wide desktop the plan card shares its row, so the
   two CTAs stack instead of wrapping their labels. */
@media (min-width: 48rem) and (max-width: 74.99875rem) {
    .mos-dashboard-v2__package-card .mos-dashboard-v2__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mos-dashboard-v2__actions .mos-client-button span:not(.mos-client-icon) {
    white-space: nowrap;
}

@media (min-width: 48rem) {
    .mos-dashboard-v2__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mos-dashboard-v2__plan {
        grid-column: 1 / -1;
    }

    .mos-dashboard-v2__hero {
        min-height: 240px;
    }
}

@media (min-width: 64rem) {
    .mos-dashboard-v2__stats {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .mos-dashboard-v2__plan {
        grid-column: auto;
    }
}

/* ---- Glass ---------------------------------------------------------------
 * Two soft glows behind the page, translucent panels with a blur on top.
 * The blur is spent on the six top-level panels only: the tiles and offers
 * inside them already sit on glass, and stacking blurs costs a phone frames.
 */

/* The theme paints every container with an !important flat background, so
   the glows live on a fixed layer inside the page's own stacking context:
   above the container, beneath the panels, and still when the page scrolls. */
.mos-dashboard-v2 {
    isolation: isolate;
    position: relative;
}

.mos-dashboard-v2::before {
    background-image:
        radial-gradient(60rem 40rem at -10% -10%, var(--mos-glow-warm), transparent 60%),
        radial-gradient(52rem 36rem at 110% 30%, var(--mos-glow-cool), transparent 60%),
        radial-gradient(40rem 30rem at 50% 120%, var(--mos-glow-warm), transparent 60%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.mos-dashboard-v2__strip,
.mos-dashboard-v2__hero,
.mos-dashboard-v2__card {
    -webkit-backdrop-filter: blur(var(--mos-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--mos-glass-blur)) saturate(1.4);
    border-color: var(--mos-glass-border);
    box-shadow: inset 0 1px 0 var(--mos-glass-highlight), var(--mos-glass-shadow);
}

.mos-dashboard-v2__card {
    background-color: var(--mos-glass-bg);
    background-image: linear-gradient(135deg, var(--mos-glass-sheen), transparent 55%);
}

.mos-dashboard-v2__strip {
    background-color: var(--mos-glass-bg);
    background-image: linear-gradient(90deg, var(--mos-color-info-50), transparent 70%);
}

.mos-dashboard-v2__package-card {
    background-image:
        linear-gradient(135deg, var(--mos-glass-accent), transparent 50%),
        linear-gradient(135deg, var(--mos-glass-sheen), transparent 55%);
}

.mos-dashboard-v2__hero {
    background-color: var(--mos-glass-bg-strong);
}

.mos-dashboard-v2__tile,
.mos-dashboard-v2__offer {
    background-color: var(--mos-glass-bg);
    background-image: linear-gradient(160deg, var(--mos-glass-sheen), transparent 60%);
    border-color: var(--mos-glass-border);
    box-shadow: inset 0 1px 0 var(--mos-glass-highlight);
}

.mos-dashboard-v2__buy-icon,
.mos-dashboard-v2 .mos-client-button--primary {
    background-image: linear-gradient(135deg, var(--mos-color-red-500), var(--mos-color-red-700));
    box-shadow: inset 0 1px 0 var(--mos-glass-highlight), var(--mos-shadow-sm);
}

/* No blur available, or the customer asked for less transparency: solid
   panels, same gradients. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mos-dashboard-v2__strip,
    .mos-dashboard-v2__card,
    .mos-dashboard-v2__tile,
    .mos-dashboard-v2__offer {
        background-color: var(--mos-glass-bg-strong);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mos-dashboard-v2__strip,
    .mos-dashboard-v2__hero,
    .mos-dashboard-v2__card,
    .mos-dashboard-v2__tile,
    .mos-dashboard-v2__offer {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--mos-color-surface);
    }
}

/* source: styles/pages/node.css */
body.mos-node-v2-is-active #main-container > .content > :not(.mos-node-v2) {
    display: none !important;
}

.mos-node-v2 {
    align-content: start;
}

.mos-node-v2__header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-4);
    justify-content: space-between;
}

.mos-node-v2__heading {
    display: grid;
    flex: 1 1 var(--mos-page-hero-copy-max-width);
    gap: var(--mos-space-2);
    min-width: var(--mos-space-0);
}

.mos-node-v2__heading h1,
.mos-node-v2__heading p,
.mos-node-v2__note,
.mos-node-v2__result-count,
.mos-node-v2__region-header h2,
.mos-node-v2__region-header p {
    margin: var(--mos-space-0);
}

.mos-node-v2__heading h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-node-v2__heading > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
}

/* One strip, three figures, always on one row. */
.mos-node-v2__stats {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2) var(--mos-space-5);
    margin: var(--mos-space-0);
}

.mos-node-v2__stat {
    align-items: baseline;
    display: inline-flex;
    gap: var(--mos-space-1);
}

.mos-node-v2__stat strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-heading);
}

.mos-node-v2__stat span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-node-v2__status-line {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: var(--mos-space-0);
}

.mos-node-v2__help {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    padding-top: var(--mos-space-2);
}

.mos-node-v2__help summary {
    align-items: center;
    color: var(--mos-color-text);
    cursor: pointer;
    display: flex;
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    list-style: none;
    min-height: var(--mos-touch-target, 44px);
}

.mos-node-v2__help summary::-webkit-details-marker {
    display: none;
}

.mos-node-v2__help summary:focus-visible {
    border-radius: var(--mos-radius-control);
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mos-node-v2__help-icon {
    color: var(--mos-color-info-500);
    display: inline-flex;
}

.mos-node-v2__help-chevron {
    display: inline-flex;
    margin-inline-start: auto;
    transition: transform var(--mos-motion-fast);
}

.mos-node-v2__help[open] .mos-node-v2__help-chevron {
    transform: rotate(180deg);
}

.mos-node-v2__help p {
    margin: var(--mos-space-2) 0 0;
}

.mos-node-v2__filters-card .mos-client-card__body {
    padding-block: var(--mos-space-4);
}

/* Search wants a full row on a phone and two thirds of one on a desktop; the
   flex bases do that without a media query, and the two selects share
   whatever is left. */
.mos-node-v2__filters {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
}

.mos-node-v2__field {
    flex: 1 1 calc(var(--mos-space-12) * 3);
}

.mos-node-v2__field--search {
    flex: 2 1 calc(var(--mos-space-12) * 6);
}

.mos-node-v2__stats-icon {
    align-self: center;
    color: var(--mos-color-text-subtle);
    display: inline-flex;
}

.mos-node-v2__list {
    display: grid;
    gap: var(--mos-space-2);
    list-style: none;
    margin: var(--mos-space-0);
    padding: var(--mos-space-0);
}

.mos-node-v2__row {
    align-items: center;
    background: var(--mos-color-surface-raised);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
    min-height: var(--mos-touch-target, 44px);
    padding: var(--mos-space-2) var(--mos-space-3);
}

.mos-node-v2__row .mos-node-v2__identity {
    flex: 1 1 auto;
}

.mos-node-v2__row-end {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--mos-space-2);
}

.mos-node-v2__field {
    color: var(--mos-color-text-muted);
    display: grid;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    letter-spacing: var(--mos-letter-spacing-caption);
    min-width: var(--mos-space-0);
}

.mos-node-v2__search-control {
    position: relative;
}

.mos-node-v2__search-icon {
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    inset-inline-start: var(--mos-space-3);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mos-node-v2__input,
.mos-node-v2__select {
    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-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    min-height: var(--mos-control-height-lg);
    width: 100%;
}

.mos-node-v2__input {
    padding-inline: var(--mos-control-height-md) var(--mos-space-3);
}

.mos-node-v2__select {
    padding-inline: var(--mos-space-3);
}

.mos-node-v2__input::placeholder {
    color: var(--mos-color-text-subtle);
}

.mos-node-v2__input:focus,
.mos-node-v2__select:focus {
    border-color: var(--mos-color-red-500);
    outline: var(--mos-focus-outline-width) solid var(--mos-color-red-500);
    outline-offset: var(--mos-focus-outline-offset);
}

.mos-node-v2__result-count {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-node-v2__regions {
    display: grid;
    gap: var(--mos-space-8);
}

.mos-node-v2__region {
    display: grid;
    gap: var(--mos-space-3);
    min-width: var(--mos-space-0);
}

.mos-node-v2__region-header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2) var(--mos-space-4);
    justify-content: space-between;
}

.mos-node-v2__region-header h2 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-node-v2__region-header p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-node-v2__identity {
    align-items: center;
    display: inline-flex;
    gap: var(--mos-space-3);
    min-width: var(--mos-space-0);
}

.mos-node-v2__flag,
.mos-node-v2__location-icon {
    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: inline-flex;
    flex: 0 0 var(--mos-control-height-md);
    font-size: var(--mos-font-size-body);
    height: var(--mos-control-height-md);
    justify-content: center;
    width: var(--mos-control-height-md);
}

.mos-node-v2__location-icon {
    color: var(--mos-color-text-subtle);
}

.mos-node-v2__identity-copy {
    display: grid;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-node-v2__identity-copy strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    overflow-wrap: anywhere;
}

.mos-node-v2__identity-copy small {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-node-v2__rate {
    color: var(--mos-color-text);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-medium);
}

.mos-node-v2__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-1);
}

.mos-node-v2__tag {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    padding: var(--mos-space-1) var(--mos-space-2);
}

.mos-node-v2 .mos-client-data-table__cell[data-column-key="status"] .mos-client-data-table__value {
    display: inline-flex;
}

/* source: styles/pages/order.css */
body.mos-order-v2-is-active #main-container > .content > :not(.mos-order-v2) {
    display: none !important;
}

.mos-order-v2 {
    align-content: start;
}

.mos-order-v2__header {
    align-items: flex-end;
    display: flex;
    gap: var(--mos-space-6);
    justify-content: space-between;
}

.mos-order-v2__header-copy {
    display: grid;
    gap: var(--mos-space-2);
    min-width: var(--mos-space-0);
}

.mos-order-v2__header h1,
.mos-order-v2__header p {
    margin: var(--mos-space-0);
}

.mos-order-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-order-v2__header-copy > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
}

.mos-order-v2__list .mos-client-card__body {
    display: grid;
    gap: var(--mos-space-5);
}

.mos-order-v2__tabs {
    border-block-end: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    /* Android Chrome paints a grey bar under the tabs otherwise. */
    scrollbar-width: none;
}

.mos-order-v2__tabs::-webkit-scrollbar {
    display: none;
}

.mos-order-v2__tab {
    align-items: center;
    background: transparent;
    border: var(--mos-border-width) solid transparent;
    border-block-end-color: transparent;
    color: var(--mos-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    min-height: var(--mos-control-height-md);
    padding: var(--mos-space-2) var(--mos-space-3);
    transform: translateY(var(--mos-border-width));
}

.mos-order-v2__tab:hover {
    color: var(--mos-color-text);
}

.mos-order-v2__tab.is-active {
    border-block-end-color: var(--mos-color-red-500);
    color: var(--mos-color-red-600);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-order-v2__tab-count {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    font-variant-numeric: var(--mos-tabular-nums);
    justify-content: center;
    min-height: var(--mos-control-height-xs);
    min-width: var(--mos-control-height-xs);
    padding-inline: var(--mos-space-2);
}

.mos-order-v2__tab.is-active .mos-order-v2__tab-count {
    background: var(--mos-color-red-50);
    color: var(--mos-color-red-700);
}

/* Table mode (the cards below 36rem keep their own rules). Sized by its
   cells: no value wraps, so the table asks for exactly the width it needs
   and the scroll wrapper takes any overflow. A fixed 1120px minimum forced a
   horizontal scroll on a 1280px screen while the period column was squeezed
   to two lines. */
@media (min-width: 36rem) {
    .mos-order-v2__table .mos-client-data-table__table {
        min-width: 100%;
        width: max-content;
    }

    .mos-order-v2__table .mos-client-data-table__heading,
    .mos-order-v2__table .mos-client-data-table__cell {
        padding-inline: var(--mos-space-3);
        white-space: nowrap;
    }

    .mos-order-v2__table .mos-client-status {
        white-space: nowrap;
    }

    .mos-order-v2__table .mos-order-v2__date-column {
        min-width: var(--mos-space-0);
    }

    /* The action column takes only what its buttons need. */
    .mos-order-v2__table .mos-client-data-table__heading.is-sticky-end,
    .mos-order-v2__table .mos-client-data-table__cell.is-sticky-end {
        width: 1%;
    }
}

/* Laptop widths: the period rides under the plan name and the detail
   button keeps only its icon, so seven columns fit without a scrollbar. */
.mos-order-v2__plan-period {
    color: var(--mos-color-text-muted);
    display: none;
    font-size: var(--mos-font-size-caption);
}

@media (min-width: 36rem) and (max-width: 89.99875rem) {
    .mos-order-v2__table .mos-client-data-table__heading,
    .mos-order-v2__table .mos-client-data-table__cell {
        padding-inline: var(--mos-space-2);
    }

    .mos-order-v2__plan-cell {
        display: grid;
        gap: var(--mos-space-1);
    }

    .mos-order-v2__plan-period {
        display: block;
    }

    .mos-order-v2__table .mos-order-v2__period-column {
        display: none;
    }

    .mos-order-v2__actions .mos-client-button--secondary span:not(.mos-client-icon) {
        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);
    }

    .mos-order-v2__actions .mos-client-button--secondary {
        padding-inline: var(--mos-space-2);
        position: relative;
    }
}

.mos-order-v2__table .mos-client-data-table__row.is-pending {
    --mos-table-row-background: var(--mos-color-warning-50);
}

/* Number and copy button side by side, each at its own width. The grid this
   replaced gave the number an 80px column, so the copy button was painted
   over its last digits. */
.mos-order-v2__trade {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-order-v2__trade-link {
    color: var(--mos-color-text) !important;
    font-family: var(--mos-font-family-mono);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    text-decoration: none;
    /* Already abbreviated to 10…6 digits; wrapping it to two lines on a
       phone only made the number harder to read. */
    white-space: nowrap;
}

.mos-order-v2__trade-link:hover {
    color: var(--mos-color-red-600) !important;
    text-decoration: underline;
}

.mos-order-v2__trade .mos-client-copy-proxy,
.mos-order-v2__trade .mos-client-button {
    align-self: center;
}

.mos-order-v2__trade small {
    color: var(--mos-color-text-muted);
    flex: 1 1 100%;
    font-size: var(--mos-font-size-caption);
    overflow-wrap: anywhere;
}

.mos-order-v2__amount,
.mos-order-v2__date {
    color: var(--mos-color-text);
    font-variant-numeric: var(--mos-tabular-nums);
    white-space: nowrap;
}

.mos-order-v2__date-column {
    min-width: var(--mos-date-time-column-width);
}

.mos-order-v2__actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mos-space-2);
    justify-content: flex-end;
}

.mos-order-v2__actions .mos-client-button {
    white-space: nowrap;
}

.mos-order-v2__menu {
    position: relative;
}

.mos-order-v2__table .mos-client-data-table__cell.is-menu-open {
    z-index: calc(var(--mos-z-sticky-corner) + 2);
}

.mos-order-v2__menu > summary {
    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);
    cursor: pointer;
    display: inline-flex;
    height: var(--mos-control-height-sm);
    justify-content: center;
    list-style: none;
    transition: background var(--mos-motion-fast), border-color var(--mos-motion-fast), color var(--mos-motion-fast);
    width: var(--mos-control-height-sm);
}

.mos-order-v2__menu > summary::-webkit-details-marker {
    display: none;
}

.mos-order-v2__menu > summary:hover,
.mos-order-v2__menu[open] > summary {
    background: var(--mos-color-surface-muted);
    border-color: var(--mos-color-border-strong);
    color: var(--mos-color-text);
}

.mos-order-v2__menu > summary:focus-visible {
    box-shadow: var(--mos-focus-ring);
    outline: var(--mos-focus-outline-width) solid transparent;
    outline-offset: var(--mos-focus-outline-offset);
}

.mos-order-v2__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;
    inset-block-start: calc(100% + var(--mos-space-1));
    inset-inline-end: var(--mos-space-0);
    padding: var(--mos-space-2);
    position: absolute;
    width: var(--mos-overflow-menu-width);
    z-index: calc(var(--mos-z-sticky-corner) + 1);
}

.mos-order-v2__menu-content .mos-client-button {
    justify-content: flex-start;
    width: 100%;
}

.mos-order-v2__cancel {
    color: var(--mos-color-danger-700) !important;
}

.mos-order-v2__cancel:hover {
    background: var(--mos-color-danger-50);
    color: var(--mos-color-danger-700) !important;
}

.mos-order-v2__error {
    min-height: var(--mos-empty-state-min-height);
}

@media (max-width: 47.99875rem) {
    .mos-order-v2__header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mos-space-4);
    }

    .mos-order-v2__header > .mos-client-button {
        align-self: flex-start;
    }
}

@media (max-width: 35.99875rem) {
    .mos-order-v2__list .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-order-v2__list .mos-client-card__header > .mos-client-button,
    .mos-order-v2__header > .mos-client-button {
        width: 100%;
    }

    .mos-order-v2__table .mos-client-data-table__table {
        min-width: var(--mos-space-0);
    }

    .mos-order-v2__table .mos-client-data-table__row.is-pending {
        border-color: var(--mos-color-warning-border);
    }

    /* Beside its label the value column is ~140px, too narrow for the
       number and its copy button. Put the label on its own line and the
       value under it at full width. */
    .mos-order-v2__table .mos-client-data-table__cell.mos-order-v2__trade-cell {
        gap: var(--mos-space-1);
        grid-template-columns: minmax(0, 1fr);
        text-align: start;
    }

    .mos-order-v2__actions {
        flex-wrap: wrap;
        width: 100%;
    }

    /* Pay takes the first row on its own; details and the overflow menu
       share the second so the ⋯ button no longer floats alone under an
       empty row. */
    .mos-order-v2__actions .mos-client-button {
        flex: 1 1 auto;
    }

    .mos-order-v2__actions .mos-client-button--primary {
        flex: 1 1 100%;
    }

    .mos-order-v2__menu {
        flex: 0 0 auto;
    }

    .mos-order-v2__menu > summary {
        height: var(--mos-control-height-md);
        width: var(--mos-control-height-md);
    }

    /* The card row clips its corners; let the open menu escape it and sit
       above the next card. */
    .mos-order-v2__table .mos-client-data-table__row:has(.is-menu-open) {
        overflow: visible;
        position: relative;
        z-index: calc(var(--mos-z-sticky-corner) + 2);
    }
}

/* source: styles/pages/order-detail.css */
/*
 * Order detail and payment.
 *
 * This is the last screen before a customer pays, on a phone, often after
 * switching to a banking app and back. So: the amount due is the loudest thing,
 * the gateway rows are full-width targets, and the pay button is pinned to the
 * bottom of the viewport rather than left at the end of a long scroll.
 */

body.mos-order-detail-v2-is-active #main-container > .content > :not(.mos-order-detail-v2) {
    display: none !important;
}

.mos-order-detail-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-4);
    /* Room for the pinned action bar. */
    padding-bottom: calc(var(--mos-control-height-lg) + var(--mos-space-8));
}

.mos-order-detail-v2__hero {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
}

.mos-order-detail-v2__hero h1 {
    font-size: var(--mos-font-size-h1);
    margin: 0;
    width: 100%;
}

.mos-order-detail-v2__hero .mos-client-eyebrow {
    margin: 0;
    width: 100%;
}

.mos-order-detail-v2__line {
    align-items: baseline;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
    padding: var(--mos-space-2) 0;
}

.mos-order-detail-v2__line + .mos-order-detail-v2__line {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-order-detail-v2__label {
    color: var(--mos-color-text-muted);
}

.mos-order-detail-v2__value {
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-medium);
    text-align: right;
    white-space: nowrap;
}

.mos-order-detail-v2__line.is-credit .mos-order-detail-v2__value {
    color: var(--mos-color-success-700);
}

/* The number the customer is about to hand over. */
.mos-order-detail-v2__line.is-total {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    margin-top: var(--mos-space-1);
    padding-top: var(--mos-space-3);
}

.mos-order-detail-v2__line.is-total .mos-order-detail-v2__label {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-order-detail-v2__line.is-total .mos-order-detail-v2__value {
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-bold);
}

.mos-order-detail-v2__note {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-text-muted);
    margin: 0;
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-order-detail-v2__note.is-info {
    background: var(--mos-color-info-50);
    color: var(--mos-color-info-700);
}

.mos-order-detail-v2__note.is-success {
    background: var(--mos-color-success-50);
    color: var(--mos-color-success-700);
}

.mos-order-detail-v2__methods {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-2);
}

/* The row is the target, not the dot inside it. */
.mos-order-detail-v2__method {
    align-items: center;
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    cursor: pointer;
    display: flex;
    gap: var(--mos-space-3);
    margin: 0;
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-order-detail-v2__method.is-selected {
    background: var(--mos-color-red-50);
    border-color: var(--mos-color-red-500);
}

.mos-order-detail-v2__method input {
    accent-color: var(--mos-color-red-500);
    flex: 0 0 auto;
    height: var(--mos-space-5);
    margin: 0;
    width: var(--mos-space-5);
}

.mos-order-detail-v2__method-body {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-order-detail-v2__method-name {
    font-weight: var(--mos-font-weight-medium);
}

.mos-order-detail-v2__method-fee {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-order-detail-v2__trade {
    align-items: center;
    display: flex;
    gap: var(--mos-space-2);
    min-width: 0;
}

.mos-order-detail-v2__trade code {
    font-size: var(--mos-font-size-small);
    overflow-wrap: anywhere;
}

.mos-order-detail-v2__payload {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-control);
    font-size: var(--mos-font-size-small);
    margin: var(--mos-space-2) 0;
    overflow-x: auto;
    padding: var(--mos-space-3);
    white-space: pre-wrap;
    word-break: break-all;
}

/*
 * Pinned so the customer never has to scroll to find the button that finishes
 * the purchase. The compiled page left it at the bottom of a 1382px document.
 */
.mos-order-detail-v2__actions {
    background: var(--mos-color-surface);
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-2);
    left: 0;
    padding: var(--mos-space-3) var(--mos-space-4);
    padding-bottom: calc(var(--mos-space-3) + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: var(--mos-z-sticky-header);
}

.mos-order-detail-v2__actions .mos-client-button,
.mos-order-detail-v2__secondary .mos-client-button {
    justify-content: center;
    min-height: var(--mos-control-height-lg);
    width: 100%;
}

.mos-order-detail-v2__secondary {
    display: flex;
}

@media (min-width: 720px) {
    .mos-order-detail-v2 {
        padding-bottom: 0;
    }

    /* Enough room to see the whole order at once, so nothing needs pinning. */
    .mos-order-detail-v2__actions {
        background: none;
        border-top: 0;
        flex-direction: row-reverse;
        justify-content: flex-end;
        padding: 0;
        position: static;
    }

    .mos-order-detail-v2__actions .mos-client-button {
        width: auto;
    }
}

/* source: styles/pages/plan.css */
/*
 * Plan list.
 *
 * Nine in ten customers arrive on a phone, so this is a single column with the
 * price as the loudest thing on each card and one full-width action. The wider
 * layout is a progressive enhancement, not the starting point.
 */

/* The compiled plan list still renders underneath; hide it while this is up,
   the same contract every other migrated page uses. */
body.mos-plan-v2-is-active #main-container > .content > :not(.mos-plan-v2) {
    display: none !important;
}

.mos-plan-v2__hero {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-2);
    margin-bottom: var(--mos-space-5);
    text-align: center;
}

.mos-plan-v2__lead {
    color: var(--mos-color-text-muted);
    margin: 0 auto;
    max-width: 46ch;
}

/* Scrolls rather than wraps: three chips do not fit 375px, and a wrapped row
   pushes the first card below the fold. */
.mos-plan-v2__filters {
    display: flex;
    gap: var(--mos-space-2);
    margin-bottom: var(--mos-space-4);
    overflow-x: auto;
    padding-bottom: var(--mos-space-1);
    scrollbar-width: none;
}

.mos-plan-v2__filters::-webkit-scrollbar {
    display: none;
}

.mos-plan-v2__filters > * {
    flex: 0 0 auto;
}

.mos-plan-v2__list {
    display: grid;
    gap: var(--mos-space-4);
    grid-template-columns: 1fr;
}

.mos-plan-v2__card {
    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-sm);
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-2);
    padding: var(--mos-space-5);
}

.mos-plan-v2__card.is-current {
    border-color: var(--mos-color-red-500);
}

.mos-plan-v2__head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
    justify-content: space-between;
}

.mos-plan-v2__name {
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-bold);
    margin: 0;
}

.mos-plan-v2__badge {
    background: var(--mos-color-red-50);
    border: var(--mos-border-width) solid var(--mos-color-red-500);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-red-700);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    padding: var(--mos-space-1) var(--mos-space-3);
}

/* Period chips: one scrolling row, like the filters. */
.mos-plan-v2__periods {
    /* A fade on the right says "there is more" where a hidden scrollbar
       said nothing. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--mos-space-6)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--mos-space-6)), transparent);
    display: flex;
    gap: var(--mos-space-2);
    margin-bottom: var(--mos-space-4);
    overflow-x: auto;
    padding-bottom: var(--mos-space-1);
    scrollbar-width: none;
}

.mos-plan-v2__periods::-webkit-scrollbar {
    display: none;
}

.mos-plan-v2__periods > * {
    flex: 0 0 auto;
}

.mos-plan-v2__unavailable {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-medium);
    margin: var(--mos-space-2) 0 0;
}

.mos-plan-v2__specs {
    display: grid;
    gap: var(--mos-space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--mos-space-2) 0 0;
}

.mos-plan-v2__spec {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-control);
    display: grid;
    gap: var(--mos-space-1);
    padding: var(--mos-space-2) var(--mos-space-3);
}

.mos-plan-v2__spec dt {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-plan-v2__spec 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);
    margin: 0;
}

.mos-plan-v2__more {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    margin-top: var(--mos-space-2);
    padding-top: var(--mos-space-1);
}

.mos-plan-v2__more summary {
    align-items: center;
    color: var(--mos-color-text-muted);
    cursor: pointer;
    display: flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
    justify-content: space-between;
    list-style: none;
    min-height: var(--mos-touch-target, 44px);
}

.mos-plan-v2__more summary::-webkit-details-marker {
    display: none;
}

.mos-plan-v2__more summary:focus-visible {
    border-radius: var(--mos-radius-control);
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mos-plan-v2__more-icon {
    display: inline-flex;
    transition: transform var(--mos-motion-fast);
}

.mos-plan-v2__more[open] .mos-plan-v2__more-icon {
    transform: rotate(180deg);
}

.mos-plan-v2__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
    margin: var(--mos-space-2) 0 0;
}

.mos-plan-v2__price strong {
    font-size: var(--mos-font-size-display);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-display);
    line-height: var(--mos-line-height-display);
}

.mos-plan-v2__period {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-medium);
}

.mos-plan-v2__rub {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    margin: 0;
}

.mos-plan-v2__capacity {
    color: var(--mos-color-warning-700);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    margin: 0;
}

/* Operator-authored description. It brings its own styling, so this only gives
   it room and stops a wide table from breaking the card open. */
.mos-plan-v2__content {
    margin-top: var(--mos-space-1);
    max-width: 100%;
    overflow-x: auto;
}

.mos-plan-v2__content > :last-child {
    margin-bottom: 0;
}

.mos-plan-v2__card .mos-client-button {
    justify-content: center;
    margin-top: var(--mos-space-3);
    min-height: var(--mos-control-height-lg);
    width: 100%;
}

@media (min-width: 720px) {
    .mos-plan-v2__list {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .mos-plan-v2__filters {
        justify-content: center;
        overflow-x: visible;
    }
}

/* source: styles/pages/checkout.css */
/*
 * Checkout (#/plan/{id}).
 *
 * The step where a customer commits to a price. On a phone: one column —
 * the plan, the term cards as full-width targets, then the summary with the
 * coupon folded inside — and a pinned bar with the total and the button, so
 * neither ever leaves the screen. On a wide screen: the plan and the terms
 * on the left, a sticky summary with the button on the right, nothing empty.
 */

body.mos-checkout-v2-is-active #main-container > .content > :not(.mos-checkout-v2) {
    display: none !important;
}

.mos-checkout-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-4);
    /* Room for the pinned action bar; the shell adds the bottom nav's own
       height and the safe area on #main-container. */
    padding-bottom: calc(var(--mos-control-height-lg) + var(--mos-space-12));
}

.mos-client-page.mos-checkout-v2 p {
    margin: 0;
}

/* ---- Header and steps -------------------------------------------------- */

.mos-checkout-v2__hero {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-2);
}

.mos-checkout-v2__hero h1 {
    font-size: var(--mos-font-size-h1);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
    margin: 0;
}

.mos-checkout-v2__lead {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-checkout-v2__steps {
    display: flex;
    gap: var(--mos-space-2);
    list-style: none;
    margin: var(--mos-space-2) 0 0;
    padding: 0;
}

.mos-checkout-v2__step {
    align-items: center;
    color: var(--mos-color-text-subtle);
    display: flex;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
}

.mos-checkout-v2__step + .mos-checkout-v2__step::before {
    background: var(--mos-color-border-strong);
    content: '';
    height: 1px;
    width: var(--mos-space-4);
}

.mos-checkout-v2__step-index {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    display: inline-flex;
    font-variant-numeric: var(--mos-tabular-nums);
    height: var(--mos-space-6);
    justify-content: center;
    width: var(--mos-space-6);
}

.mos-checkout-v2__step.is-current {
    color: var(--mos-color-text);
}

.mos-checkout-v2__step.is-current .mos-checkout-v2__step-index {
    background: var(--mos-color-red-500);
    border-color: var(--mos-color-red-500);
    color: var(--mos-color-neutral-0);
}

/* ---- Columns ------------------------------------------------------------- */

.mos-checkout-v2__main,
.mos-checkout-v2__aside {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-4);
    min-width: 0;
}

/* ---- Plan card ----------------------------------------------------------- */

.mos-checkout-v2__plan {
    display: grid;
    gap: var(--mos-space-3);
    padding: var(--mos-space-5);
}

.mos-checkout-v2__plan-head {
    align-items: flex-start;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
}

.mos-checkout-v2__plan-name {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
    margin: var(--mos-space-1) 0 0;
}

.mos-checkout-v2__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
}

.mos-checkout-v2__chip {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    padding: var(--mos-space-1) var(--mos-space-3);
}

.mos-checkout-v2__chip .mos-client-icon {
    color: var(--mos-color-red-500);
    display: inline-flex;
}

/* Operator-written benefits, folded: on a phone the feature table sat
   between the plan name and the periods, ~280px of it. */
.mos-checkout-v2__more {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    padding-top: var(--mos-space-1);
}

.mos-checkout-v2__more summary,
.mos-checkout-v2__coupon summary {
    align-items: center;
    color: var(--mos-color-red-600);
    cursor: pointer;
    display: flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    list-style: none;
    min-height: var(--mos-control-height-md);
}

.mos-checkout-v2__more summary::-webkit-details-marker,
.mos-checkout-v2__coupon summary::-webkit-details-marker {
    display: none;
}

.mos-checkout-v2__more summary:focus-visible,
.mos-checkout-v2__coupon summary:focus-visible {
    border-radius: var(--mos-radius-control);
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mos-checkout-v2__more summary > span:first-child {
    flex: 1 1 auto;
}

.mos-checkout-v2__more-icon {
    display: inline-flex;
    transition: transform var(--mos-motion-fast);
}

.mos-checkout-v2__more[open] .mos-checkout-v2__more-icon,
.mos-checkout-v2__coupon[open] .mos-checkout-v2__more-icon {
    transform: rotate(180deg);
}

.mos-checkout-v2__content {
    margin-top: var(--mos-space-2);
    max-width: 100%;
    overflow-x: auto;
}

.mos-checkout-v2__content > :last-child {
    margin-bottom: 0;
}

/* ---- Terms --------------------------------------------------------------- */

.mos-checkout-v2__period-card .mos-client-card__body {
    display: grid;
    gap: var(--mos-space-3);
}

.mos-checkout-v2__periods {
    display: grid;
    gap: var(--mos-space-2);
}

/* The card is the target, not the dot inside it. */
.mos-checkout-v2__period {
    align-items: center;
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    cursor: pointer;
    display: flex;
    gap: var(--mos-space-3);
    margin: 0;
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-3) var(--mos-space-4);
    transition: border-color var(--mos-motion-fast) var(--mos-ease-standard), background-color var(--mos-motion-fast) var(--mos-ease-standard);
}

.mos-checkout-v2__period:hover {
    border-color: var(--mos-color-border-strong);
}

.mos-checkout-v2__period.is-selected {
    background: var(--mos-color-red-50);
    border-color: var(--mos-color-red-500);
    box-shadow: inset 0 0 0 1px var(--mos-color-red-500);
}

.mos-checkout-v2__period:focus-within {
    box-shadow: var(--mos-focus-ring);
}

.mos-checkout-v2__period input {
    accent-color: var(--mos-color-red-500);
    flex: 0 0 auto;
    height: var(--mos-space-5);
    margin: 0;
    width: var(--mos-space-5);
}

.mos-checkout-v2__period-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--mos-space-1) var(--mos-space-2);
    min-width: 0;
}

.mos-checkout-v2__period-name {
    font-weight: var(--mos-font-weight-medium);
    white-space: nowrap;
}

.mos-checkout-v2__period-save {
    background: var(--mos-color-success-50);
    border: var(--mos-border-width) solid var(--mos-color-success-border);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-success-700);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    padding: 0 var(--mos-space-2);
    white-space: nowrap;
}

.mos-checkout-v2__period-price {
    display: grid;
    flex: 0 0 auto;
    gap: var(--mos-space-1);
    justify-items: end;
    text-align: right;
}

.mos-checkout-v2__period-price strong {
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    white-space: nowrap;
}

.mos-checkout-v2__period-sub {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-checkout-v2__notice {
    background: var(--mos-color-warning-50);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-warning-700);
    font-size: var(--mos-font-size-small);
    padding: var(--mos-space-2) var(--mos-space-3);
}

/* ---- Summary ------------------------------------------------------------- */

.mos-checkout-v2__summary {
    display: grid;
    gap: var(--mos-space-3);
    padding: var(--mos-space-5);
}

.mos-checkout-v2__summary-title {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    margin: 0;
}

.mos-checkout-v2__line {
    align-items: baseline;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
    padding: var(--mos-space-2) 0;
}

.mos-checkout-v2__line + .mos-checkout-v2__line {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-checkout-v2__label {
    color: var(--mos-color-text-muted);
    min-width: 0;
}

.mos-checkout-v2__value {
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-medium);
    text-align: right;
    white-space: nowrap;
}

.mos-checkout-v2__line.is-credit .mos-checkout-v2__value {
    color: var(--mos-color-success-700);
}

/* The number the customer is about to commit to. */
.mos-checkout-v2__line.is-total {
    border-top: var(--mos-border-width) solid var(--mos-color-border-strong);
    margin-top: var(--mos-space-1);
    padding-top: var(--mos-space-3);
}

.mos-checkout-v2__line.is-total .mos-checkout-v2__label {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-checkout-v2__line.is-total .mos-checkout-v2__value {
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-bold);
}

.mos-checkout-v2__rub {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    text-align: right;
}

/* ---- Coupon, folded inside the summary ------------------------------------ */

.mos-checkout-v2__coupon {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    padding-top: var(--mos-space-1);
}

.mos-checkout-v2__coupon summary > span:not(.mos-client-icon) {
    flex: 1 1 auto;
}

.mos-checkout-v2__coupon-form {
    display: flex;
    gap: var(--mos-space-2);
    padding-bottom: var(--mos-space-2);
}

.mos-checkout-v2__coupon-input {
    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);
    flex: 1 1 auto;
    font-family: var(--mos-font-family-mono);
    /* Body size: below 16px iOS Safari zooms into the field on focus. */
    font-size: var(--mos-font-size-body);
    letter-spacing: var(--mos-space-0);
    min-height: var(--mos-control-height-md);
    min-width: 0;
    padding: 0 var(--mos-space-3);
    text-transform: uppercase;
}

.mos-checkout-v2__coupon-input {
    /* Focus scrolling keeps the field above the pinned order bar. */
    scroll-margin-bottom: calc(var(--mos-control-height-lg) + var(--mos-space-8));
}

.mos-checkout-v2__coupon-input::placeholder {
    font-family: inherit;
    text-transform: none;
}

.mos-checkout-v2__coupon-input:focus-visible {
    border-color: var(--mos-color-red-500);
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mos-checkout-v2__coupon-input[aria-invalid="true"] {
    border-color: var(--mos-color-danger-500);
}

.mos-checkout-v2__coupon-form .mos-client-button {
    flex: 0 0 auto;
}

.mos-checkout-v2__coupon-applied {
    align-items: center;
    background: var(--mos-color-success-50);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-success-700);
    display: flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    margin-top: var(--mos-space-2);
    padding: var(--mos-space-2) var(--mos-space-2) var(--mos-space-2) var(--mos-space-3);
}

.mos-checkout-v2__coupon-applied.is-inactive {
    background: var(--mos-color-warning-50);
    color: var(--mos-color-warning-700);
}

.mos-checkout-v2__coupon-applied > span:not(.mos-client-icon) {
    flex: 1 1 auto;
    min-width: 0;
}

.mos-checkout-v2__error {
    color: var(--mos-color-danger-700);
    font-size: var(--mos-font-size-small);
    padding-bottom: var(--mos-space-2);
}

.mos-checkout-v2__hint {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-checkout-v2__submit-error {
    align-items: center;
    background: var(--mos-color-danger-50);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-danger-700);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
    justify-content: space-between;
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-checkout-v2__submit-error p {
    flex: 1 1 60%;
}

/* ---- Pinned bar: total on the left, the button on the right ---------------- */

.mos-checkout-v2__actions {
    align-items: center;
    background: var(--mos-color-surface);
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    bottom: 0;
    box-shadow: var(--mos-shadow-md);
    display: flex;
    gap: var(--mos-space-3);
    left: 0;
    padding: var(--mos-space-3) var(--mos-space-4);
    padding-bottom: calc(var(--mos-space-3) + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: var(--mos-z-sticky-header);
}

.mos-checkout-v2__bar-total {
    display: grid;
    flex: 1 1 auto;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-checkout-v2__bar-label {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-checkout-v2__bar-amount {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    white-space: nowrap;
}

.mos-checkout-v2__actions .mos-client-button {
    flex: 0 0 auto;
    justify-content: center;
    min-height: var(--mos-control-height-lg);
}

/* Beside the total, the button says only what it does. */
.mos-checkout-v2__actions .mos-client-button--primary span:not(.mos-client-icon) {
    white-space: nowrap;
}

.mos-checkout-v2__submit-amount {
    display: none;
}

.mos-checkout-v2__submit-amount::before {
    content: '· ';
}

/* ---- Wide screens ---------------------------------------------------------- */

@media (min-width: 720px) {
    .mos-checkout-v2 {
        align-items: start;
        display: grid;
        gap: var(--mos-space-5);
        grid-template-areas:
            "hero hero"
            "main aside";
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        padding-bottom: 0;
    }

    .mos-checkout-v2__hero { grid-area: hero; }
    .mos-checkout-v2__main { grid-area: main; }

    /* The summary keeps pace with the terms, so the total and the button
       stay in view while the customer compares. */
    .mos-checkout-v2__aside {
        grid-area: aside;
        position: sticky;
        top: var(--mos-space-4);
    }

    .mos-checkout-v2__periods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mos-checkout-v2__period {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--mos-space-2);
        padding: var(--mos-space-4);
        position: relative;
    }

    .mos-checkout-v2__period input {
        position: absolute;
        right: var(--mos-space-4);
        top: var(--mos-space-4);
    }

    .mos-checkout-v2__period-main {
        padding-right: var(--mos-space-8);
    }

    .mos-checkout-v2__period-price {
        justify-items: start;
        text-align: left;
    }

    .mos-checkout-v2__period-price strong {
        font-size: var(--mos-font-size-h2);
    }

    /* Enough room to see the whole order at once, so nothing needs pinning;
       the summary already shows the total, the bar keeps the button only. */
    .mos-checkout-v2__actions {
        background: none;
        border-top: 0;
        box-shadow: none;
        grid-area: actions;
        padding: 0;
        position: static;
    }

    .mos-checkout-v2__bar-total {
        display: none;
    }

    .mos-checkout-v2__actions .mos-client-button {
        flex: 1 1 auto;
        width: 100%;
    }

    .mos-checkout-v2__submit-amount {
        display: inline;
        font-variant-numeric: var(--mos-tabular-nums);
    }
}

/* source: styles/pages/devices.css */
body.mos-devices-v2-is-active #main-container > .content > :not(.mos-devices-v2) {
    display: none !important;
}

.mos-devices-v2__header {
    align-items: end;
    display: flex;
    gap: var(--mos-space-6);
    justify-content: space-between;
}

.mos-devices-v2__header-copy {
    display: grid;
    gap: var(--mos-space-2);
    max-width: var(--mos-page-hero-copy-max-width);
}

.mos-devices-v2__header h1,
.mos-devices-v2__header p {
    margin: var(--mos-space-0);
}

.mos-devices-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-devices-v2__header-copy > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
}

.mos-devices-v2__slot-summary {
    display: grid;
    gap: var(--mos-space-3);
}

.mos-devices-v2__slot-summary > strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
}

.mos-devices-v2__slot-meter {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    display: block;
    height: var(--mos-space-2);
    overflow: hidden;
    width: 100%;
}

.mos-devices-v2__slot-meter-fill {
    background: var(--mos-color-success-500);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width var(--mos-motion-fast);
    width: var(--mos-devices-slot-progress);
}

.mos-devices-v2__slot-meter.is-full .mos-devices-v2__slot-meter-fill {
    background: var(--mos-color-warning-500);
}

.mos-devices-v2__slot-meter.is-unlimited .mos-devices-v2__slot-meter-fill {
    background: var(--mos-color-info-500);
    opacity: var(--mos-disabled-opacity);
}

.mos-devices-v2__registered .mos-client-card__body {
    padding: var(--mos-space-0);
}

.mos-devices-v2__list {
    display: grid;
}

.mos-devices-v2__device {
    align-items: center;
    border-block-end: var(--mos-border-width) solid var(--mos-color-border);
    display: grid;
    gap: var(--mos-space-5);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) minmax(0, 1fr) auto;
    padding: var(--mos-space-5) var(--mos-space-6);
}

.mos-devices-v2__device:last-child {
    border-block-end-width: var(--mos-space-0);
}

.mos-devices-v2__identity {
    align-items: center;
    display: flex;
    gap: var(--mos-space-3);
    min-width: 0;
}

.mos-devices-v2__platform-icon {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-info-500);
    display: inline-flex;
    flex: 0 0 var(--mos-control-height-lg);
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-devices-v2__identity-copy {
    display: grid;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-devices-v2__identity-copy strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mos-devices-v2__identity-copy span,
.mos-devices-v2__identifier > span,
.mos-devices-v2__metadata dt {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-devices-v2__metadata {
    display: grid;
    gap: var(--mos-space-2);
    margin: var(--mos-space-0);
    min-width: 0;
}

.mos-devices-v2__metadata > div {
    align-items: baseline;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
    min-width: 0;
}

.mos-devices-v2__metadata dd,
.mos-devices-v2__metadata dt {
    margin: var(--mos-space-0);
}

.mos-devices-v2__metadata dd {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: end;
}

.mos-devices-v2__metadata time {
    cursor: help;
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-devices-v2__ip {
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-devices-v2__identifier {
    display: grid;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-devices-v2__identifier-value {
    align-items: center;
    display: flex;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-devices-v2__identifier code {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    overflow: hidden;
    padding: var(--mos-space-1) var(--mos-space-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mos-devices-v2__loading {
    display: grid;
    gap: var(--mos-space-6);
}

.mos-devices-v2__error {
    min-height: var(--mos-empty-state-min-height);
}

@media (max-width: 61.99875rem) {
    .mos-devices-v2__device {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .mos-devices-v2__identifier {
        grid-column: 1 / 3;
    }
}

@media (max-width: 47.99875rem) {
    .mos-devices-v2__header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mos-space-4);
    }

    .mos-devices-v2__header .mos-client-button {
        width: 100%;
    }

    .mos-devices-v2__device {
        align-items: stretch;
        gap: var(--mos-space-4);
        grid-template-columns: minmax(0, 1fr);
        padding: var(--mos-space-4);
    }

    .mos-devices-v2__identifier {
        grid-column: auto;
    }

    /* A quiet, right-aligned text action; the card is about the device,
       not about removing it. */
    .mos-devices-v2__device > .mos-client-button {
        justify-self: end;
        min-height: var(--mos-touch-target, 44px);
    }
}

@media (max-width: 29.99875rem) {
    .mos-devices-v2__slots .mos-client-card__header,
    .mos-devices-v2__registered .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-devices-v2__metadata > div {
        align-items: start;
        flex-direction: column;
        gap: var(--mos-space-1);
    }

    .mos-devices-v2__metadata dd {
        text-align: start;
    }
}

/* source: styles/pages/traffic.css */
body.mos-traffic-v2-is-active #main-container > .content > :not(.mos-traffic-v2) {
    display: none !important;
}

.mos-traffic-v2__header {
    align-items: end;
    display: flex;
    gap: var(--mos-space-6);
    justify-content: space-between;
}

.mos-traffic-v2__header-copy {
    display: grid;
    gap: var(--mos-space-2);
    max-width: var(--mos-page-hero-copy-max-width);
}

.mos-traffic-v2__header h1,
.mos-traffic-v2__header p {
    margin: var(--mos-space-0);
}

.mos-traffic-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-traffic-v2__header-copy > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
}

.mos-traffic-v2__summary {
    display: grid;
    gap: var(--mos-space-3);
}

/* Two qualifying figures on one line under the main tile. */
.mos-traffic-v2__stats {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2) var(--mos-space-5);
    margin: var(--mos-space-0);
}

.mos-traffic-v2__stat {
    align-items: baseline;
    display: inline-flex;
    gap: var(--mos-space-1);
}

.mos-traffic-v2__stat strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-traffic-v2__stat span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-traffic-v2__month-line {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: var(--mos-space-0);
}

.mos-traffic-v2__help {
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    padding-top: var(--mos-space-2);
}

.mos-traffic-v2__help summary {
    align-items: center;
    color: var(--mos-color-text);
    cursor: pointer;
    display: flex;
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    list-style: none;
    min-height: var(--mos-touch-target, 44px);
}

.mos-traffic-v2__help summary::-webkit-details-marker {
    display: none;
}

.mos-traffic-v2__help summary:focus-visible {
    border-radius: var(--mos-radius-control);
    box-shadow: var(--mos-focus-ring);
    outline: none;
}

.mos-traffic-v2__help-icon {
    color: var(--mos-color-info-500);
    display: inline-flex;
}

.mos-traffic-v2__help-chevron {
    display: inline-flex;
    margin-inline-start: auto;
    transition: transform var(--mos-motion-fast);
}

.mos-traffic-v2__help[open] .mos-traffic-v2__help-chevron {
    transform: rotate(180deg);
}

.mos-traffic-v2__help p {
    margin: var(--mos-space-2) 0 0;
}

.mos-traffic-v2__chart-card .mos-client-card__body {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.mos-traffic-v2__legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-4);
}

.mos-traffic-v2__legend-item {
    align-items: center;
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
}

.mos-traffic-v2__legend-swatch {
    border-radius: var(--mos-radius-pill);
    display: inline-block;
    height: var(--mos-space-2);
    width: var(--mos-space-2);
}

.mos-traffic-v2__legend-swatch.is-upload,
.mos-traffic-v2__bar-segment.is-upload {
    background: var(--mos-color-info-500);
}

.mos-traffic-v2__legend-swatch.is-download,
.mos-traffic-v2__bar-segment.is-download {
    background: var(--mos-color-success-500);
}

.mos-traffic-v2__plot {
    align-items: stretch;
    display: flex;
    gap: var(--mos-space-2);
    min-height: var(--mos-dashboard-chart-min-height);
    min-width: 100%;
}

.mos-traffic-v2__day {
    align-items: center;
    display: flex;
    flex: 1 0 var(--mos-space-6);
    flex-direction: column;
    gap: var(--mos-space-2);
    justify-content: flex-end;
    min-width: var(--mos-space-6);
    outline: none;
}

.mos-traffic-v2__day:focus-visible .mos-traffic-v2__bar,
.mos-traffic-v2__day.is-selected .mos-traffic-v2__bar {
    box-shadow: var(--mos-focus-ring);
}

/* Where a tapped bar's figures land; sized so it never jumps the layout. */
.mos-traffic-v2__caption {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    margin: var(--mos-space-3) var(--mos-space-0) var(--mos-space-0);
    min-height: calc(var(--mos-font-size-small) * 2 * var(--mos-line-height-body));
}

.mos-traffic-v2__bar {
    align-items: stretch;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    display: flex;
    flex-direction: column-reverse;
    height: calc(var(--mos-dashboard-chart-min-height) - var(--mos-space-12));
    justify-content: flex-start;
    overflow: hidden;
    width: var(--mos-space-4);
}

.mos-traffic-v2__bar-segment {
    display: block;
    flex: 0 0 var(--mos-traffic-bar-size);
    min-height: var(--mos-space-0);
    transition: flex-basis var(--mos-motion-fast);
}

.mos-traffic-v2__day-label {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
    font-variant-numeric: var(--mos-tabular-nums);
    min-height: var(--mos-space-4);
    white-space: nowrap;
}

.mos-traffic-v2__table-card .mos-client-card__body {
    padding: var(--mos-space-0);
}

.mos-traffic-v2__table .mos-client-data-table__table {
    min-width: var(--mos-complex-table-min-width);
}

.mos-traffic-v2__table time,
.mos-traffic-v2__charged {
    color: var(--mos-color-text);
    font-variant-numeric: var(--mos-tabular-nums);
    white-space: nowrap;
}

.mos-traffic-v2__rate {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    cursor: help;
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    padding: var(--mos-space-1) var(--mos-space-2);
    white-space: nowrap;
}

.mos-traffic-v2__error {
    min-height: var(--mos-empty-state-min-height);
}

@media (max-width: 47.99875rem) {
    .mos-traffic-v2__header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mos-space-4);
    }

    .mos-traffic-v2__header .mos-client-button {
        width: 100%;
    }

}

@media (max-width: 35.99875rem) {
    .mos-traffic-v2__chart-card .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-traffic-v2__table .mos-client-data-table__table {
        min-width: var(--mos-space-0);
    }

    .mos-traffic-v2__plot {
        gap: var(--mos-space-1);
    }
}

/* source: styles/pages/invite.css */
body.mos-invite-v2-is-active #main-container > .content > :not(.mos-invite-v2) {
    display: none !important;
}

.mos-invite-v2__header {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-invite-v2__header h1,
.mos-invite-v2__header p {
    margin: var(--mos-space-0);
}

.mos-invite-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-invite-v2__header > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
}

.mos-invite-v2__primary-grid {
    align-items: stretch;
    display: grid;
    gap: var(--mos-space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mos-dashboard-side-min-width)), 1fr));
}

.mos-invite-v2__primary-grid > .mos-client-card {
    height: 100%;
}

.mos-invite-v2__wallet-card .mos-client-card__body {
    display: grid;
    gap: var(--mos-space-4);
}

.mos-invite-v2__wallet-balance {
    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: flex;
    gap: var(--mos-space-4);
    padding: var(--mos-space-5);
}

.mos-invite-v2__wallet-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;
    flex: 0 0 auto;
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-invite-v2__wallet-copy {
    display: grid;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-invite-v2__wallet-copy span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-invite-v2__wallet-copy strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    overflow-wrap: anywhere;
}

.mos-invite-v2__wallet-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
}

.mos-invite-v2__wallet-note {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    margin: var(--mos-space-0);
}

.mos-invite-v2__form {
    display: grid;
    gap: var(--mos-space-4);
}

.mos-invite-v2__form-balance {
    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: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-invite-v2__form-balance span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-invite-v2__form-balance strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-invite-v2__form-field {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-invite-v2__form-field label {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
}

.mos-invite-v2__form-control {
    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-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    min-height: var(--mos-control-height-lg);
    min-width: var(--mos-space-0);
    padding: var(--mos-space-2) var(--mos-space-3);
    width: 100%;
}

.mos-invite-v2__form-control::placeholder {
    color: var(--mos-color-text-subtle);
}

.mos-invite-v2__form-control:focus-visible {
    border-color: var(--mos-color-red-500);
    box-shadow: var(--mos-focus-ring);
    outline: var(--mos-focus-outline-width) solid transparent;
    outline-offset: var(--mos-focus-outline-offset);
}

.mos-invite-v2__form-control[aria-invalid="true"] {
    border-color: var(--mos-color-danger-border);
}

.mos-invite-v2__form-error {
    color: var(--mos-color-danger-700);
    font-size: var(--mos-font-size-caption);
    min-height: var(--mos-space-4);
}

.mos-invite-v2__invite-card .mos-client-card__body,
.mos-invite-v2__stats-card .mos-client-card__body {
    display: grid;
    gap: var(--mos-space-5);
}

.mos-invite-v2__field {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-invite-v2__field-label,
.mos-invite-v2__share-label {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-caption);
    text-transform: uppercase;
}

.mos-invite-v2__field-control {
    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: minmax(var(--mos-space-0), 1fr) auto;
    padding: var(--mos-space-2);
}

.mos-invite-v2__field-value {
    background: transparent;
    border: var(--mos-space-0);
    color: var(--mos-color-text);
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-small);
    min-height: var(--mos-control-height-sm);
    min-width: var(--mos-space-0);
    padding-inline: var(--mos-space-2);
    text-overflow: ellipsis;
    width: 100%;
}

.mos-invite-v2__field-value.is-code {
    font-family: var(--mos-font-family-mono);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-caption);
}

.mos-invite-v2__field-value:focus {
    box-shadow: none;
    outline: none;
}

.mos-invite-v2__share {
    border-block-start: var(--mos-border-width) solid var(--mos-color-border);
    display: grid;
    gap: var(--mos-space-3);
    padding-block-start: var(--mos-space-5);
}

.mos-invite-v2__share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
}

.mos-invite-v2__share-button {
    flex: 1 1 auto;
}

.mos-invite-v2__flow-card .mos-client-card__body {
    padding-block: var(--mos-space-4);
}

.mos-invite-v2__steps {
    display: grid;
    gap: var(--mos-space-0);
    list-style: none;
    margin: var(--mos-space-0);
    padding: var(--mos-space-0);
}

.mos-invite-v2__step {
    align-items: flex-start;
    display: grid;
    gap: var(--mos-space-3);
    grid-template-columns: auto auto minmax(var(--mos-space-0), 1fr);
    padding-block: var(--mos-space-4);
}

.mos-invite-v2__step + .mos-invite-v2__step {
    border-block-start: var(--mos-border-width) solid var(--mos-color-border);
}

.mos-invite-v2__step-number,
.mos-invite-v2__step-icon {
    align-items: center;
    border-radius: var(--mos-radius-control);
    display: inline-flex;
    height: var(--mos-control-height-sm);
    justify-content: center;
    width: var(--mos-control-height-sm);
}

.mos-invite-v2__step-number {
    background: var(--mos-color-red-50);
    color: var(--mos-color-red-700);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-invite-v2__step-icon {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text-muted);
}

.mos-invite-v2__step-copy {
    display: grid;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-invite-v2__step-copy strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-invite-v2__step-copy p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: var(--mos-space-0);
}

.mos-invite-v2__stats-grid {
    display: grid;
    gap: var(--mos-space-4);
    grid-template-columns: repeat(3, minmax(var(--mos-space-0), 1fr));
}

.mos-invite-v2__zero-state {
    border-block-start: var(--mos-border-width) solid var(--mos-color-border);
    padding-block-start: var(--mos-space-2);
}

.mos-invite-v2__zero-state .mos-client-empty {
    min-height: var(--mos-empty-state-min-height);
    padding-block-end: var(--mos-space-2);
}

.mos-invite-v2__history-card .mos-client-card__body {
    padding: var(--mos-space-0);
}

.mos-invite-v2__history-loading {
    padding: var(--mos-space-6);
}

.mos-invite-v2__history-table .mos-client-data-table__table {
    width: 100%;
}

.mos-invite-v2__trade-no {
    color: var(--mos-color-text-muted);
    font-family: var(--mos-font-family-mono);
    overflow-wrap: anywhere;
}

.mos-invite-v2__commission {
    color: var(--mos-color-success-700);
    font-variant-numeric: var(--mos-tabular-nums);
    white-space: nowrap;
}

.mos-invite-v2__history-table time {
    color: var(--mos-color-text);
    font-variant-numeric: var(--mos-tabular-nums);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .mos-invite-v2__primary-grid {
        gap: var(--mos-space-4);
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__field-control {
        align-items: stretch;
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__field-control .mos-client-button {
        width: 100%;
    }

    .mos-invite-v2__share-actions {
        display: grid;
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__wallet-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__wallet-actions .mos-client-button {
        width: 100%;
    }

    .mos-invite-v2__stats-grid {
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__history-card .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-invite-v2__history-card .mos-client-card__header > .mos-client-button {
        width: 100%;
    }

    .mos-invite-v2__step {
        grid-template-columns: auto minmax(var(--mos-space-0), 1fr);
    }

    .mos-invite-v2__step-icon {
        display: none;
    }
}

/* Affiliate leaderboard: a ranked list, the top three and the customer's own
   row set apart. Amounts sit flush right like the history table. */
.mos-invite-v2__rank-tabs {
    display: flex;
    gap: var(--mos-space-2);
    margin-block-end: var(--mos-space-4);
}

.mos-invite-v2__ranks {
    display: grid;
    gap: var(--mos-space-2);
    list-style: none;
    margin: var(--mos-space-0);
    padding: var(--mos-space-0);
}

.mos-invite-v2__rank {
    align-items: center;
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    display: flex;
    gap: var(--mos-space-3);
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-2) var(--mos-space-3);
}

.mos-invite-v2__rank.is-me {
    background: var(--mos-color-red-50);
    border-color: var(--mos-color-red-500);
}

.mos-invite-v2__rank-number {
    color: var(--mos-color-text-muted);
    flex: 0 0 auto;
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    min-width: var(--mos-space-8);
}

/* Gold, silver, bronze: the tint of the row and the metal of the medal. */
.mos-invite-v2__rank.is-gold {
    background: var(--mos-color-medal-gold-soft);
    border-color: var(--mos-color-medal-gold-border);
}

.mos-invite-v2__rank.is-silver {
    background: var(--mos-color-medal-silver-soft);
    border-color: var(--mos-color-medal-silver-border);
}

.mos-invite-v2__rank.is-bronze {
    background: var(--mos-color-medal-bronze-soft);
    border-color: var(--mos-color-medal-bronze-border);
}

.mos-invite-v2__rank.is-me.is-top {
    box-shadow: var(--mos-focus-ring);
}

.mos-invite-v2__rank-number.is-medal {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: var(--mos-space-0);
    line-height: var(--mos-line-height-tight);
}

.mos-invite-v2__rank-number.is-medal small {
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
}

.mos-invite-v2__rank-number.is-gold { color: var(--mos-color-medal-gold); }
.mos-invite-v2__rank-number.is-silver { color: var(--mos-color-medal-silver); }
.mos-invite-v2__rank-number.is-bronze { color: var(--mos-color-medal-bronze); }

.mos-invite-v2__medal {
    display: inline-flex;
    filter: drop-shadow(var(--mos-shadow-xs));
}

.mos-invite-v2__medal svg {
    fill: currentColor;
    height: var(--mos-space-6);
    width: var(--mos-space-6);
}

.mos-invite-v2__rank-copy {
    display: grid;
    flex: 1 1 auto;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-invite-v2__rank-copy strong {
    /* Masked addresses may wrap; an ellipsis hid the domain on 390px. */
    overflow-wrap: anywhere;
}

.mos-invite-v2__rank-copy span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-invite-v2__rank-amount {
    color: var(--mos-color-success-700);
    flex: 0 0 auto;
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    white-space: nowrap;
}

.mos-invite-v2__rank-me {
    align-items: center;
    color: var(--mos-color-red-700);
    display: flex;
    font-weight: var(--mos-font-weight-medium);
    gap: var(--mos-space-2);
    margin: var(--mos-space-4) var(--mos-space-0) var(--mos-space-0);
}

.mos-invite-v2__rank-me.is-muted {
    color: var(--mos-color-text-muted);
    font-weight: var(--mos-font-weight-normal);
}

/* Under 480px the address and the amount could not share a line: the email
   broke mid-word. Name on top across the row, customers and amount below. */
@media (max-width: 29.99875rem) {
    .mos-invite-v2__rank {
        column-gap: var(--mos-space-3);
        display: grid;
        grid-template-areas:
            "badge name name"
            "badge meta amount";
        grid-template-columns: auto minmax(var(--mos-space-0), 1fr) auto;
        row-gap: var(--mos-space-1);
    }

    .mos-invite-v2__rank-number {
        grid-area: badge;
    }

    .mos-invite-v2__rank-copy {
        display: contents;
    }

    .mos-invite-v2__rank-copy strong {
        grid-area: name;
    }

    .mos-invite-v2__rank-copy span {
        align-self: center;
        grid-area: meta;
    }

    .mos-invite-v2__rank-amount {
        align-self: center;
        grid-area: amount;
    }
}

/* source: styles/pages/knowledge.css */
body.mos-knowledge-v2-is-active #main-container > .content > :not(.mos-knowledge-v2) {
    display: none !important;
}

body.mos-knowledge-v2-is-active > div > .ant-drawer,
body.mos-knowledge-v2-is-active > div > .ant-drawer-mask {
    display: none !important;
}

.mos-knowledge-v2 {
    align-content: start;
}

.mos-knowledge-v2__header,
.mos-knowledge-v2__category-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-4);
    justify-content: space-between;
}

.mos-knowledge-v2__heading {
    display: grid;
    gap: var(--mos-space-2);
    max-width: var(--mos-page-hero-copy-max-width);
    min-width: var(--mos-space-0);
}

.mos-knowledge-v2__heading h1,
.mos-knowledge-v2__heading p,
.mos-knowledge-v2__category-header h2,
.mos-knowledge-v2__category-header span,
.mos-knowledge-v2__result-count,
.mos-knowledge-v2__article-description {
    margin: var(--mos-space-0);
}

.mos-knowledge-v2__heading h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-knowledge-v2__heading > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
}

.mos-knowledge-v2__filters-card .mos-client-card__body {
    padding-block: var(--mos-space-4);
}

.mos-knowledge-v2__filters {
    display: grid;
    gap: var(--mos-space-4);
}

.mos-knowledge-v2__search-field {
    color: var(--mos-color-text-muted);
    display: grid;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    letter-spacing: var(--mos-letter-spacing-caption);
    max-width: var(--mos-page-hero-copy-max-width);
}

.mos-knowledge-v2__search-control {
    display: block;
    position: relative;
}

.mos-knowledge-v2__search-icon {
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    inset-inline-start: var(--mos-space-3);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mos-knowledge-v2__search-input {
    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-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    min-height: var(--mos-control-height-lg);
    padding-inline: var(--mos-control-height-md) var(--mos-space-3);
    width: 100%;
}

.mos-knowledge-v2__search-input::placeholder {
    color: var(--mos-color-text-subtle);
}

.mos-knowledge-v2__search-input:focus {
    border-color: var(--mos-color-red-500);
    outline: var(--mos-focus-outline-width) solid var(--mos-color-red-500);
    outline-offset: var(--mos-focus-outline-offset);
}

.mos-knowledge-v2__chip-group {
    /* The fade says "there is more" on the side that has more. The page
       sets is-scroll-* from the scroll position; the default (start of the
       row) fades the right edge only. */
    --mos-chip-fade-start: black;
    --mos-chip-fade-end: transparent;
    display: flex;
    gap: var(--mos-space-2);
    -webkit-mask-image: linear-gradient(to right, var(--mos-chip-fade-start), black var(--mos-space-6), black calc(100% - var(--mos-space-6)), var(--mos-chip-fade-end));
    mask-image: linear-gradient(to right, var(--mos-chip-fade-start), black var(--mos-space-6), black calc(100% - var(--mos-space-6)), var(--mos-chip-fade-end));
    max-width: 100%;
    overflow-x: auto;
    padding-block: var(--mos-space-1);
    /* The fade already says there is more; a grey bar under the chips does
       not (Android Chrome draws one). */
    scrollbar-width: none;
}

.mos-knowledge-v2__chip-group::-webkit-scrollbar {
    display: none;
}

.mos-knowledge-v2__chip-group.is-scroll-middle {
    --mos-chip-fade-start: transparent;
    --mos-chip-fade-end: transparent;
}

.mos-knowledge-v2__chip-group.is-scroll-end {
    --mos-chip-fade-start: transparent;
    --mos-chip-fade-end: black;
}

.mos-knowledge-v2__chip-group.is-scroll-none {
    --mos-chip-fade-start: black;
    --mos-chip-fade-end: black;
}

.mos-knowledge-v2__chip {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border-strong);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    /* A finger-sized target; the pill itself is drawn smaller inside. */
    min-height: var(--mos-touch-target, 44px);
    padding-inline: var(--mos-space-4);
    transition: background-color var(--mos-motion-fast), border-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

.mos-knowledge-v2__chip:hover {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text);
}

.mos-knowledge-v2__chip.is-active {
    background: var(--mos-color-red-500);
    border-color: var(--mos-color-red-500);
    color: var(--mos-color-neutral-0);
}

.mos-knowledge-v2__result-count {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-knowledge-v2__results,
.mos-knowledge-v2__category {
    display: grid;
    min-width: var(--mos-space-0);
}

.mos-knowledge-v2__results {
    gap: var(--mos-space-8);
}

.mos-knowledge-v2__category {
    gap: var(--mos-space-3);
}

.mos-knowledge-v2__category-header {
    align-items: baseline;
    gap: var(--mos-space-2) var(--mos-space-4);
}

.mos-knowledge-v2__category-header h2 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-knowledge-v2__category-header span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
}

.mos-knowledge-v2__grid {
    display: grid;
    gap: var(--mos-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mos-search-width)), 1fr));
}

.mos-knowledge-v2__article {
    align-items: flex-start;
    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-xs);
    color: var(--mos-color-text);
    display: flex;
    gap: var(--mos-space-4);
    min-height: var(--mos-stat-card-min-height);
    padding: var(--mos-space-5);
    text-decoration: none;
    transition: border-color var(--mos-motion-fast), box-shadow var(--mos-motion-fast), transform var(--mos-motion-fast);
}

.mos-knowledge-v2__article:hover {
    border-color: var(--mos-color-red-300);
    box-shadow: var(--mos-shadow-sm);
    color: var(--mos-color-text);
    transform: translateY(calc(-1 * var(--mos-space-1)));
}

.mos-knowledge-v2__article-icon {
    align-items: center;
    background: var(--mos-color-red-50);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-red-600);
    display: inline-flex;
    flex: 0 0 var(--mos-control-height-lg);
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-knowledge-v2__article-content {
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mos-space-2);
    min-width: var(--mos-space-0);
}

.mos-knowledge-v2__article-meta,
.mos-knowledge-v2__platforms {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
}

.mos-knowledge-v2__article-meta {
    color: var(--mos-color-text-subtle);
    font-size: var(--mos-font-size-caption);
    justify-content: space-between;
}

.mos-knowledge-v2__platform-badge {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    font-weight: var(--mos-font-weight-semibold);
    padding: var(--mos-space-1) var(--mos-space-2);
}

.mos-knowledge-v2__article-title {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
    overflow-wrap: anywhere;
}

.mos-knowledge-v2__article-description {
    color: var(--mos-color-text-muted);
    display: -webkit-box;
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mos-knowledge-v2__article-action {
    color: var(--mos-color-red-600);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    margin-block-start: auto;
}

.mos-knowledge-v2__detail-header,
.mos-knowledge-v2__detail-heading {
    display: grid;
}

.mos-knowledge-v2__detail-header {
    gap: var(--mos-space-5);
    justify-items: start;
}

.mos-knowledge-v2__detail-heading {
    gap: var(--mos-space-2);
    max-width: var(--mos-page-hero-copy-max-width);
}

.mos-knowledge-v2__detail-heading h1,
.mos-knowledge-v2__detail-heading p,
.mos-knowledge-v2__detail-heading time,
.mos-knowledge-v2__article-body > :first-child,
.mos-knowledge-v2__article-body > :last-child {
    margin-block: var(--mos-space-0);
}

.mos-knowledge-v2__detail-heading h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-knowledge-v2__detail-heading time {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-knowledge-v2__detail-card {
    margin-inline: auto;
    max-width: var(--mos-page-hero-copy-max-width);
    width: 100%;
}

.mos-knowledge-v2__article-body {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
    overflow-wrap: anywhere;
}

.mos-knowledge-v2__article-body h1,
.mos-knowledge-v2__article-body h2,
.mos-knowledge-v2__article-body h3,
.mos-knowledge-v2__article-body h4,
.mos-knowledge-v2__article-body h5,
.mos-knowledge-v2__article-body h6 {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
    margin-block: var(--mos-space-6) var(--mos-space-3);
}

.mos-knowledge-v2__article-body h1 { font-size: var(--mos-font-size-h1); }
.mos-knowledge-v2__article-body h2 { font-size: var(--mos-font-size-h2); }
.mos-knowledge-v2__article-body h3,
.mos-knowledge-v2__article-body h4,
.mos-knowledge-v2__article-body h5,
.mos-knowledge-v2__article-body h6 { font-size: var(--mos-font-size-body); }

.mos-knowledge-v2__article-body p,
.mos-knowledge-v2__article-body ul,
.mos-knowledge-v2__article-body ol,
.mos-knowledge-v2__article-body blockquote,
.mos-knowledge-v2__article-body pre,
.mos-knowledge-v2__article-body table {
    margin-block: var(--mos-space-4);
}

.mos-knowledge-v2__article-body ul,
.mos-knowledge-v2__article-body ol {
    padding-inline-start: var(--mos-space-6);
}

.mos-knowledge-v2__article-body li + li {
    margin-block-start: var(--mos-space-2);
}

.mos-knowledge-v2__article-body a {
    color: var(--mos-color-info-500);
    font-weight: var(--mos-font-weight-medium);
}

.mos-knowledge-v2__article-body code,
.mos-knowledge-v2__article-body pre {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text);
    font-family: var(--mos-font-family-mono);
}

.mos-knowledge-v2__article-body code {
    padding: var(--mos-space-1) var(--mos-space-2);
}

.mos-knowledge-v2__article-body pre {
    overflow-x: auto;
    padding: var(--mos-space-4);
}

.mos-knowledge-v2__article-body pre code {
    background: transparent;
    border: 0;
    padding: var(--mos-space-0);
}

.mos-knowledge-v2__article-body blockquote {
    border-inline-start: var(--mos-space-1) solid var(--mos-color-info-border);
    color: var(--mos-color-text-muted);
    padding-inline-start: var(--mos-space-4);
}

.mos-knowledge-v2__article-body img,
.mos-knowledge-v2__article-body video {
    border-radius: var(--mos-radius-card);
    height: auto;
    max-width: 100%;
}

.mos-knowledge-v2__article-body table {
    border-collapse: collapse;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.mos-knowledge-v2__article-body th,
.mos-knowledge-v2__article-body td {
    border: var(--mos-border-width) solid var(--mos-color-border);
    padding: var(--mos-space-3);
    text-align: start;
}

.mos-knowledge-v2__article-body th {
    background: var(--mos-color-surface-muted);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-knowledge-v2__article-body .v2board-no-access {
    background: var(--mos-color-warning-50);
    border: var(--mos-border-width) solid var(--mos-color-warning-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-warning-700);
    padding: var(--mos-space-4);
}

@media (max-width: 47.99875rem) {
    .mos-knowledge-v2__article {
        min-height: auto;
        padding: var(--mos-space-4);
    }

    .mos-knowledge-v2__article-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .mos-knowledge-v2__detail-card .mos-client-card__body {
        padding: var(--mos-space-4);
    }
}

/* The loading state renders before any article exists, so it needs its own
   breathing room: without it the spinner sat flush against the card edge and
   read as a rendering fault rather than a wait. */
.mos-knowledge-v2__loading,
.mos-knowledge-v2__detail-loading {
    align-items: center;
    display: grid;
    gap: var(--mos-space-4);
    justify-items: center;
    min-height: var(--mos-empty-state-min-height, 12rem);
    padding: var(--mos-space-6);
    text-align: center;
}

/* source: styles/pages/downloads.css */
body.mos-downloads-v2-is-active #main-container > .content > :not(.mos-downloads-v2) {
    display: none !important;
}

.mos-downloads-v2__hero {
    align-items: center;
    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);
    display: grid;
    gap: var(--mos-space-8);
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--mos-page-hero-min-height);
    overflow: hidden;
    padding: var(--mos-space-8);
    position: relative;
}

.mos-downloads-v2__hero::before {
    background: linear-gradient(135deg, var(--mos-color-red-50), transparent);
    content: '';
    inset: var(--mos-space-0);
    pointer-events: none;
    position: absolute;
}

.mos-downloads-v2__hero-copy {
    display: grid;
    gap: var(--mos-space-3);
    max-width: var(--mos-page-hero-copy-max-width);
    position: relative;
    z-index: var(--mos-z-sticky-cell);
}

.mos-downloads-v2__hero h1,
.mos-downloads-v2__hero p,
.mos-downloads-v2__platform h2,
.mos-downloads-v2__platform p,
.mos-downloads-v2__help h2,
.mos-downloads-v2__help p {
    margin: var(--mos-space-0);
}

.mos-downloads-v2__hero h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-downloads-v2__lead {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
}

.mos-downloads-v2__trust {
    align-items: center;
    color: var(--mos-color-success-700);
    display: flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
}

.mos-downloads-v2__hero-art {
    align-items: center;
    background: var(--mos-color-red-500);
    border-radius: var(--mos-radius-panel);
    display: flex;
    height: calc(var(--mos-space-12) * 2);
    justify-content: center;
    position: relative;
    width: calc(var(--mos-space-12) * 2);
    z-index: var(--mos-z-sticky-cell);
}

.mos-downloads-v2__hero-art img {
    height: var(--mos-space-12);
    object-fit: contain;
    width: var(--mos-space-12);
}

.mos-downloads-v2__signal {
    border: var(--mos-border-width) solid var(--mos-color-red-200);
    border-radius: var(--mos-radius-pill);
    inset: calc(-1 * var(--mos-space-3));
    position: absolute;
}

.mos-downloads-v2__signal--two {
    inset: calc(-1 * var(--mos-space-6));
    opacity: var(--mos-disabled-opacity);
}

.mos-downloads-v2__grid {
    display: grid;
    gap: var(--mos-space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mos-downloads-v2__platform {
    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);
    display: grid;
    gap: var(--mos-space-5);
    grid-template-rows: 1fr auto auto;
    min-width: var(--mos-space-0);
    padding: var(--mos-space-6);
    transition: border-color var(--mos-motion-fast), box-shadow var(--mos-motion-fast), transform var(--mos-motion-fast);
}

.mos-downloads-v2__platform-header {
    align-items: flex-start;
    display: flex;
    gap: var(--mos-space-4);
}

.mos-downloads-v2__platform-icon {
    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);
    color: var(--mos-color-text);
    display: flex;
    flex: 0 0 calc(var(--mos-space-12) + var(--mos-space-4));
    height: calc(var(--mos-space-12) + var(--mos-space-4));
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: calc(var(--mos-space-12) + var(--mos-space-4));
}

.mos-downloads-v2__platform-icon img {
    filter: var(--mos-platform-icon-filter, none);
    height: var(--mos-space-8);
    width: var(--mos-space-8);
}

.mos-downloads-v2__platform-name {
    clip: rect(var(--mos-space-0), var(--mos-space-0), var(--mos-space-0), var(--mos-space-0));
    clip-path: inset(50%);
    height: var(--mos-border-width);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: var(--mos-border-width);
}

.mos-downloads-v2__platform-copy {
    display: grid;
    gap: var(--mos-space-2);
    min-width: var(--mos-space-0);
}

.mos-downloads-v2__platform h2,
.mos-downloads-v2__help h2 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
}

.mos-downloads-v2__platform-copy p,
.mos-downloads-v2__help-copy p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
}

.mos-downloads-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
}

.mos-downloads-v2__actions .mos-client-button {
    flex: 1 1 auto;
}

.mos-downloads-v2__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-1);
}

.mos-downloads-v2__badge {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-caption);
    padding: var(--mos-space-1) var(--mos-space-2);
}

.mos-downloads-v2__badge--brand {
    background: var(--mos-color-red-50);
    border-color: var(--mos-color-red-500);
    color: var(--mos-color-red-700);
}

.mos-downloads-v2__platform.is-current {
    border-color: var(--mos-color-red-500);
}

.mos-downloads-v2__help {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-panel);
    display: grid;
    gap: var(--mos-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--mos-space-5) var(--mos-space-6);
}

.mos-downloads-v2__help-icon {
    align-items: center;
    background: var(--mos-color-surface);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-red-500);
    display: flex;
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-downloads-v2__help-copy {
    display: grid;
    gap: var(--mos-space-1);
}

@media (hover: hover) and (pointer: fine) {
    .mos-downloads-v2__platform:hover {
        border-color: var(--mos-color-border-strong);
        box-shadow: var(--mos-shadow-sm);
        transform: translateY(calc(-1 * var(--mos-border-width)));
    }
}

@media (max-width: 61.99875rem) {
    .mos-downloads-v2__hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .mos-downloads-v2__hero-art {
        display: none;
    }
}

@media (max-width: 47.99875rem) {
    .mos-downloads-v2__grid {
        gap: var(--mos-space-4);
        grid-template-columns: minmax(0, 1fr);
    }

    .mos-downloads-v2__hero,
    .mos-downloads-v2__platform {
        padding: var(--mos-space-5);
    }

    .mos-downloads-v2__help {
        align-items: stretch;
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--mos-space-4);
    }

    .mos-downloads-v2__help .mos-client-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 23.99875rem) {
    .mos-downloads-v2__platform-header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-downloads-v2__actions,
    .mos-downloads-v2__actions .mos-client-button {
        width: 100%;
    }
}

html[data-mosvpn-theme="dark"] .mos-downloads-v2__platform-icon,
html.mosvpn-dark .mos-downloads-v2__platform-icon {
    --mos-platform-icon-filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .mos-downloads-v2__platform {
        transition: none;
    }
}

/* source: styles/pages/profile.css */
body.mos-profile-v2-is-active #main-container > .content > :not(.mos-profile-v2) {
    display: none !important;
}

.mos-profile-v2 {
    align-content: start;
}

.mos-profile-v2__header {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-profile-v2__header h1,
.mos-profile-v2__header p,
.mos-profile-v2__section-heading h3,
.mos-profile-v2__section-heading p,
.mos-profile-v2__setting-copy p,
.mos-profile-v2__strength p,
.mos-profile-v2__field-messages p,
.mos-profile-v2__form-error {
    margin: var(--mos-space-0);
}

.mos-profile-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-profile-v2__header > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
}

.mos-profile-v2__layout {
    align-items: start;
    display: grid;
    gap: var(--mos-space-6);
    grid-template-columns: minmax(var(--mos-space-0), 1fr) minmax(var(--mos-space-0), 1fr);
}

.mos-profile-v2__column {
    display: grid;
    gap: var(--mos-space-6);
    min-width: var(--mos-space-0);
}

.mos-profile-v2 .mos-client-card__body,
.mos-profile-v2__form,
.mos-profile-v2__settings {
    display: grid;
    gap: var(--mos-space-5);
}

.mos-profile-v2__section-heading {
    display: grid;
    gap: var(--mos-space-1);
}

.mos-profile-v2__section-heading h3 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-heading);
}

.mos-profile-v2__section-heading p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
}

.mos-profile-v2__field {
    display: grid;
    gap: var(--mos-space-2);
    min-width: var(--mos-space-0);
}

.mos-profile-v2__field > label {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-profile-v2__input {
    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-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    min-height: var(--mos-control-height-lg);
    min-width: var(--mos-space-0);
    padding: var(--mos-space-2) var(--mos-space-3);
    width: 100%;
}

.mos-profile-v2__input::placeholder {
    color: var(--mos-color-text-subtle);
}

.mos-profile-v2__input[readonly] {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text-muted);
    cursor: default;
}

.mos-profile-v2__input[aria-invalid="true"] {
    border-color: var(--mos-color-danger-500);
}

.mos-profile-v2__input:disabled {
    cursor: not-allowed;
    opacity: var(--mos-disabled-opacity);
}

.mos-profile-v2__input-group {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(var(--mos-space-0), 1fr) auto;
}

.mos-profile-v2__input-group .mos-profile-v2__input {
    border-end-end-radius: var(--mos-space-0);
    border-start-end-radius: var(--mos-space-0);
}

.mos-profile-v2__input-group > span {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border-strong);
    border-inline-start: var(--mos-space-0);
    border-end-end-radius: var(--mos-radius-control);
    border-start-end-radius: var(--mos-radius-control);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    padding-inline: var(--mos-space-3);
}

.mos-profile-v2__field-messages {
    display: grid;
    gap: var(--mos-space-1);
}

.mos-profile-v2__field-help,
.mos-profile-v2__strength p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-profile-v2__field-error,
.mos-profile-v2__form-error {
    color: var(--mos-color-danger-700);
    font-size: var(--mos-font-size-small);
}

.mos-profile-v2__form-error {
    background: var(--mos-color-danger-50);
    border: var(--mos-border-width) solid var(--mos-color-danger-border);
    border-radius: var(--mos-radius-control);
    padding: var(--mos-space-3);
}

.mos-profile-v2__setting {
    align-items: center;
    border-block-start: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    gap: var(--mos-space-4);
    justify-content: space-between;
    padding-block-start: var(--mos-space-4);
}

.mos-profile-v2__setting-copy {
    display: grid;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-profile-v2__setting-copy strong {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-profile-v2__setting-copy p {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-profile-v2__switch {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border-strong);
    border-radius: var(--mos-radius-pill);
    cursor: pointer;
    display: flex;
    flex: 0 0 var(--mos-control-height-lg);
    justify-content: flex-start;
    min-height: var(--mos-control-height-xs);
    padding: var(--mos-space-1);
    position: relative;
    transition: background-color var(--mos-motion-fast), border-color var(--mos-motion-fast);
    width: var(--mos-control-height-lg);
}

/* The pill is 34px tall; extend the tap area to the touch minimum. */
.mos-profile-v2__switch::before {
    content: '';
    inset: calc(var(--mos-space-2) * -1) calc(var(--mos-space-1) * -1);
    position: absolute;
}

.mos-profile-v2__switch.is-on {
    background: var(--mos-color-red-500);
    border-color: var(--mos-color-red-500);
    justify-content: flex-end;
}

.mos-profile-v2__switch:disabled {
    cursor: not-allowed;
    opacity: var(--mos-disabled-opacity);
}

.mos-profile-v2__switch-knob {
    aspect-ratio: 1;
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill);
    box-shadow: var(--mos-shadow-xs);
    display: block;
    height: calc(var(--mos-control-height-xs) - (var(--mos-space-1) * 2));
}

.mos-profile-v2__strength {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-profile-v2__strength-heading {
    align-items: center;
    display: flex;
    font-size: var(--mos-font-size-caption);
    gap: var(--mos-space-3);
    justify-content: space-between;
}

.mos-profile-v2__strength-heading span {
    color: var(--mos-color-text-muted);
}

.mos-profile-v2__strength-heading strong {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
}

.mos-profile-v2__strength-meter {
    display: grid;
    gap: var(--mos-space-1);
    grid-template-columns: repeat(4, minmax(var(--mos-space-0), 1fr));
}

.mos-profile-v2__strength-segment {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-pill);
    height: var(--mos-space-1);
}

.mos-profile-v2__strength.is-score-1 .mos-profile-v2__strength-segment.is-active {
    background: var(--mos-color-danger-500);
}

.mos-profile-v2__strength.is-score-2 .mos-profile-v2__strength-segment.is-active {
    background: var(--mos-color-warning-500);
}

.mos-profile-v2__strength.is-score-3 .mos-profile-v2__strength-segment.is-active {
    background: var(--mos-color-info-500);
}

.mos-profile-v2__strength.is-score-4 .mos-profile-v2__strength-segment.is-active {
    background: var(--mos-color-success-500);
}

.mos-profile-v2__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
    justify-content: flex-end;
}

.mos-profile-v2__balance {
    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: flex;
    gap: var(--mos-space-4);
    padding: var(--mos-space-5);
}

.mos-profile-v2__balance-icon {
    align-items: center;
    background: var(--mos-color-surface);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-red-600);
    display: inline-flex;
    flex: 0 0 var(--mos-control-height-lg);
    height: var(--mos-control-height-lg);
    justify-content: center;
    width: var(--mos-control-height-lg);
}

.mos-profile-v2__balance > div {
    display: grid;
    gap: var(--mos-space-1);
    min-width: var(--mos-space-0);
}

.mos-profile-v2__balance span {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-caption);
}

.mos-profile-v2__balance strong {
    color: var(--mos-color-text);
    font-size: var(--mos-hero-value-size);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-display);
    line-height: var(--mos-line-height-display);
    overflow-wrap: anywhere;
}

.mos-profile-v2__deposit {
    border-block-start: var(--mos-border-width) solid var(--mos-color-border);
    padding-block-start: var(--mos-space-5);
}

.mos-profile-v2__page-error {
    min-height: var(--mos-empty-state-min-height);
}

@media (max-width: 61.99875rem) {
    .mos-profile-v2__layout {
        grid-template-columns: minmax(var(--mos-space-0), 1fr);
    }
}

@media (max-width: 35.99875rem) {
    .mos-profile-v2 .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-profile-v2 .mos-client-card__header > .mos-client-button,
    .mos-profile-v2__form-actions .mos-client-button {
        width: 100%;
    }

    .mos-profile-v2__setting {
        align-items: flex-start;
    }

    .mos-profile-v2__balance {
        align-items: flex-start;
    }

    .mos-profile-v2__balance strong {
        font-size: var(--mos-stat-value-size);
    }
}

/* The four cards on this page carry unrelated concerns — identity, password,
   balance, gift codes — but UI.card() renders them identically, so the page read
   as one undifferentiated stack and the operator had to read each heading to
   find the one they wanted. A tinted top edge gives each card a fixed colour
   the eye can aim for; the panel's own surface and border stay untouched. */
.mos-profile-v2__account-card,
.mos-profile-v2__security-card,
.mos-profile-v2__wallet-card,
.mos-profile-v2__gift-card {
    border-top: var(--mos-space-1) solid var(--mos-color-border-strong);
}

.mos-profile-v2__account-card {
    border-top-color: var(--mos-color-info-500);
}

/* Password changes are the destructive-adjacent card; red matches the tone used
   for the same weight of action elsewhere in the client. */
.mos-profile-v2__security-card {
    border-top-color: var(--mos-color-red-500);
}

.mos-profile-v2__wallet-card {
    border-top-color: var(--mos-color-success-700);
}

.mos-profile-v2__gift-card {
    border-top-color: var(--mos-color-warning-700);
}

/* source: styles/pages/ticket.css */
body.mos-ticket-v2-is-active #main-container > .content > :not(.mos-ticket-v2) {
    display: none !important;
}

.mos-ticket-v2__header {
    align-items: end;
    display: flex;
    gap: var(--mos-space-6);
    justify-content: space-between;
}

.mos-ticket-v2__header-copy {
    display: grid;
    gap: var(--mos-space-2);
    max-width: var(--mos-page-hero-copy-max-width);
}

.mos-ticket-v2__header h1,
.mos-ticket-v2__header p {
    margin: var(--mos-space-0);
}

.mos-ticket-v2__header h1 {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-h1);
    font-weight: var(--mos-font-weight-semibold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
}

.mos-ticket-v2__header-copy > p:last-child {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-body);
}

.mos-ticket-v2__empty {
    min-height: var(--mos-page-hero-min-height);
}

.mos-ticket-v2__empty-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
    justify-content: center;
}

.mos-ticket-v2__list .mos-client-card__body {
    display: grid;
    gap: var(--mos-space-4);
}

.mos-ticket-v2__open-note {
    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);
    font-size: var(--mos-font-size-small);
    margin: var(--mos-space-0);
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mos-ticket-v2__table .mos-client-data-table__table {
    min-width: var(--mos-complex-table-min-width);
}

.mos-ticket-v2__table .mos-client-data-table__row.has-new-reply {
    --mos-table-row-background: var(--mos-color-success-50);
}

.mos-ticket-v2__id {
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text);
    font-family: var(--mos-font-family-mono);
    font-size: var(--mos-font-size-small);
    font-variant-numeric: var(--mos-tabular-nums);
    padding: var(--mos-space-1) var(--mos-space-2);
}

.mos-ticket-v2__subject {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
    overflow-wrap: anywhere;
}

.mos-ticket-v2__table time {
    color: var(--mos-color-text);
    cursor: help;
    font-variant-numeric: var(--mos-tabular-nums);
    white-space: nowrap;
}

.mos-ticket-v2__actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mos-space-2);
    justify-content: flex-end;
}

.mos-ticket-v2__actions .mos-client-button {
    white-space: nowrap;
}

.mos-ticket-v2__form {
    display: grid;
    gap: var(--mos-space-4);
}

.mos-ticket-v2__field {
    display: grid;
    gap: var(--mos-space-2);
}

.mos-ticket-v2__field label {
    color: var(--mos-color-text);
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-medium);
}

.mos-ticket-v2__input {
    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-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-2) var(--mos-space-3);
    width: 100%;
}

.mos-ticket-v2__textarea {
    line-height: var(--mos-line-height-body);
    min-height: var(--mos-page-hero-min-height);
    resize: vertical;
}

.mos-ticket-v2__input:focus-visible {
    border-color: var(--mos-color-red-500);
    box-shadow: var(--mos-focus-ring);
    outline: var(--mos-focus-outline-width) solid transparent;
    outline-offset: var(--mos-focus-outline-offset);
}

.mos-ticket-v2__input[aria-invalid="true"] {
    border-color: var(--mos-color-danger-border);
}

.mos-ticket-v2__field-error {
    color: var(--mos-color-danger-700);
    font-size: var(--mos-font-size-caption);
    min-height: var(--mos-space-4);
}

.mos-ticket-v2__error {
    min-height: var(--mos-empty-state-min-height);
}

.mos-ticket-v2__channels-body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-3);
    justify-content: space-between;
}

.mos-ticket-v2__channels-lead {
    color: var(--mos-color-text-subtle);
    margin: var(--mos-space-0);
    min-width: 0;
}

.mos-ticket-v2__channels-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
}

/* The brand marks keep their own colours, so the usual stroke rules that style
   the Lucide glyphs must not touch them. */
.mos-ticket-v2__channel-logo {
    border-radius: var(--mos-radius-xs, 4px);
    display: block;
    flex: 0 0 auto;
    height: var(--mos-icon-size);
    width: var(--mos-icon-size);
}

@media (max-width: 47.99875rem) {
    .mos-ticket-v2__header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--mos-space-4);
    }

    .mos-ticket-v2__header > .mos-client-button {
        width: 100%;
    }
}

@media (max-width: 35.99875rem) {
    .mos-ticket-v2__list .mos-client-card__header {
        align-items: stretch;
        flex-direction: column;
    }

    .mos-ticket-v2__list .mos-client-card__header > .mos-client-button {
        width: 100%;
    }

    .mos-ticket-v2__empty-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .mos-ticket-v2__empty-actions .mos-client-button,
    .mos-ticket-v2__actions .mos-client-button {
        width: 100%;
    }

    .mos-ticket-v2__table .mos-client-data-table__table {
        min-width: var(--mos-space-0);
    }

    .mos-ticket-v2__table .mos-client-data-table__row.has-new-reply {
        border-color: var(--mos-color-success-border);
    }

    .mos-ticket-v2__actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
}

/* source: styles/pages/ticket-detail.css */
/*
 * Support conversation (#/ticket/{id}).
 *
 * XiaoBoard renders this route outside its dashboard layout, so the page owns
 * the viewport: a fixed bar with the way back, a thread that scrolls on its
 * own, and a composer pinned above the home indicator. Reads like the chat
 * apps the customer already uses.
 */

body.mos-ticket-detail-v2-is-active #root > :not(.mos-ticket-detail-v2) {
    display: none !important;
}

.mos-ticket-detail-v2 {
    background: var(--mos-color-surface-muted);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--mos-z-sticky-header);
}

.mos-ticket-detail-v2__bar {
    align-items: center;
    background: var(--mos-color-surface);
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    flex: 0 0 auto;
    gap: var(--mos-space-1);
    min-height: var(--mos-control-height-lg);
    padding: var(--mos-space-2) var(--mos-space-2) var(--mos-space-2) var(--mos-space-1);
    padding-top: calc(var(--mos-space-2) + env(safe-area-inset-top, 0px));
}

.mos-ticket-detail-v2__back,
.mos-ticket-detail-v2__close {
    flex: 0 0 auto;
}

.mos-ticket-detail-v2__back {
    min-width: var(--mos-control-height-md);
    padding-inline: var(--mos-space-2);
}

.mos-ticket-detail-v2__heading {
    display: grid;
    flex: 1 1 auto;
    gap: var(--mos-space-1);
    min-width: 0;
}

.mos-ticket-detail-v2__heading h1 {
    -webkit-box-orient: vertical;
    color: var(--mos-color-text);
    display: -webkit-box;
    font-size: var(--mos-font-size-body);
    font-weight: var(--mos-font-weight-semibold);
    -webkit-line-clamp: 2;
    line-height: var(--mos-line-height-tight);
    margin: var(--mos-space-0);
    overflow: hidden;
}

.mos-ticket-detail-v2__meta {
    align-items: center;
    color: var(--mos-color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--mos-font-size-caption);
    gap: var(--mos-space-1);
    margin: var(--mos-space-0);
}

.mos-ticket-detail-v2__bar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--mos-space-1);
}

.mos-ticket-detail-v2__thread {
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: var(--mos-space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--mos-space-4);
}

.mos-ticket-detail-v2__messages {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-3);
    margin-inline: auto;
    max-width: var(--mos-page-max-width, 60rem);
}

.mos-ticket-detail-v2__message {
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-1);
    max-width: 86%;
}

.mos-ticket-detail-v2__message.is-me {
    align-items: flex-end;
    align-self: flex-end;
}

.mos-ticket-detail-v2__message.is-staff {
    align-items: flex-start;
    align-self: flex-start;
}

.mos-ticket-detail-v2__stamp {
    color: var(--mos-color-text-muted);
    display: flex;
    font-size: var(--mos-font-size-caption);
    gap: var(--mos-space-2);
    padding-inline: var(--mos-space-1);
}

.mos-ticket-detail-v2__author {
    font-weight: var(--mos-font-weight-medium);
}

.mos-ticket-detail-v2__bubble {
    border-radius: var(--mos-radius-card);
    line-height: var(--mos-line-height-body);
    overflow-wrap: anywhere;
    padding: var(--mos-space-3) var(--mos-space-4);
    white-space: pre-wrap;
}

.mos-ticket-detail-v2__message.is-me .mos-ticket-detail-v2__bubble {
    background: var(--mos-color-red-50);
    border-end-end-radius: var(--mos-space-1);
    color: var(--mos-color-text);
}

.mos-ticket-detail-v2__message.is-staff .mos-ticket-detail-v2__bubble {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-end-start-radius: var(--mos-space-1);
    color: var(--mos-color-text);
}

.mos-ticket-detail-v2__composer {
    background: var(--mos-color-surface);
    border-top: var(--mos-border-width) solid var(--mos-color-border);
    flex: 0 0 auto;
    padding: var(--mos-space-2) var(--mos-space-3);
    padding-bottom: calc(var(--mos-space-2) + env(safe-area-inset-bottom, 0px));
}

.mos-ticket-detail-v2__form {
    align-items: flex-end;
    display: flex;
    gap: var(--mos-space-2);
    margin: var(--mos-space-0) auto;
    max-width: var(--mos-page-max-width, 60rem);
}

.mos-ticket-detail-v2__input {
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-text);
    flex: 1 1 auto;
    font-family: inherit;
    /* Body size: below 16px iOS Safari zooms into the field on focus. */
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
    min-height: var(--mos-control-height-md);
    min-width: var(--mos-space-0);
    padding: var(--mos-space-2) var(--mos-space-3);
    resize: none;
}

.mos-ticket-detail-v2__input:focus-visible {
    border-color: var(--mos-color-red-500);
    box-shadow: var(--mos-focus-ring);
    outline: var(--mos-space-0);
}

.mos-ticket-detail-v2__send {
    flex: 0 0 auto;
    height: var(--mos-control-height-md);
    min-width: var(--mos-control-height-md);
    padding-inline: var(--mos-space-3);
}

.mos-ticket-detail-v2__note {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mos-space-2);
    justify-content: space-between;
    margin: var(--mos-space-0) auto;
    max-width: var(--mos-page-max-width, 60rem);
}

.mos-ticket-detail-v2__note p {
    color: var(--mos-color-text-muted);
    flex: 1 1 60%;
    font-size: var(--mos-font-size-small);
    margin: var(--mos-space-0);
}

.mos-ticket-detail-v2__note.is-waiting p {
    color: var(--mos-color-success-700);
}

@media (max-width: 47.99875rem) {
    /* Icon-only close on a phone; the label is the accessible name. */
    .mos-ticket-detail-v2__close span:not(.mos-client-icon) {
        display: none;
    }

    .mos-ticket-detail-v2__close {
        min-width: var(--mos-control-height-md);
        padding-inline: var(--mos-space-2);
    }
}

@media (min-width: 48rem) {
    .mos-ticket-detail-v2__bar {
        padding-inline: var(--mos-space-4);
    }

    .mos-ticket-detail-v2__thread {
        padding: var(--mos-space-6);
    }

    .mos-ticket-detail-v2__message {
        max-width: 70%;
    }
}