.modal-action-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.modal-action-row--close-only {
    justify-content: flex-end;
}

.modal-back-control,
.modal-close-control {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 22px;
    font-weight: 750;
}

.confirm-actions--single {
    grid-template-columns: 1fr;
    justify-items: center;
}

.confirm-actions--single .ghost-btn {
    width: auto;
}

.proxy-apply-row--single,
.proxy-editor-actions--single {
    display: flex;
    justify-content: center;
}

.proxy-editor-actions--single .ghost-btn {
    width: auto;
}

.profile-key-copy.profile-key-ready .masked-config {
    color: var(--text-main);
    opacity: 1;
    user-select: none;
}

@media (max-width: 620px) {
    :root {
        --mobile-modal-width: min(440px, calc(100vw - 24px));
        --mobile-modal-height: min(560px, calc(100dvh - 24px));
    }

    .account-modal-backdrop > .account-modal,
    .onboarding-wizard,
    .device-create-dialog {
        width: var(--mobile-modal-width);
        height: var(--mobile-modal-height);
        min-height: 0;
        max-width: calc(100vw - 24px);
        max-height: var(--mobile-modal-height);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .account-modal-backdrop {
        padding: 12px;
    }

    .account-modal-backdrop > .account-modal {
        display: flex;
        flex-direction: column;
        padding: 12px;
        border-radius: 16px;
    }

    .account-modal-backdrop > .account-modal.login-methods-modal {
        padding: 16px 12px 12px;
    }

    .account-modal > *,
    #instructionsContent > *,
    #tariffDetailContent > * {
        flex-shrink: 0;
    }

    #instructionsContent,
    #tariffDetailContent {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .account-modal .modal-head {
        margin-bottom: 12px;
    }

    .account-modal .modal-head h2 {
        font-size: 20px;
    }

    .modal-action-row {
        gap: 8px;
        margin-top: 16px;
    }

    .account-modal .modal-action-row {
        position: sticky;
        bottom: -12px;
        z-index: 3;
        margin-top: auto;
        margin-bottom: -12px;
        padding-block: 16px 12px;
        background: var(--bg-modal);
    }

    .modal-back-control,
    .modal-close-control {
        min-height: 38px;
        padding: 0 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .account-modal .settings-menu-grid,
    .account-modal .support-content,
    .account-modal .profile-summary-grid {
        gap: 8px;
    }

    .account-modal .settings-menu-card,
    .account-modal .proxy-mode-btn,
    .account-modal .proxy-domains-open {
        min-height: 64px;
        gap: 8px;
        padding: 9px 10px;
        border-radius: 13px;
    }

    .account-modal .settings-menu-card {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .account-modal .proxy-mode-btn,
    .account-modal .proxy-domains-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-modal .settings-menu-card svg {
        width: 20px;
        height: 20px;
    }

    .account-modal .settings-menu-card-copy {
        gap: 3px;
    }

    .account-modal .settings-menu-card strong,
    .account-modal .proxy-mode-btn strong,
    .account-modal .proxy-domains-open strong {
        font-size: 15px;
    }

    .account-modal .settings-menu-card-copy span,
    .account-modal .proxy-mode-btn span,
    .account-modal .proxy-domains-open span {
        font-size: 11px;
        line-height: 1.25;
    }

    .account-modal .settings-onboarding-shortcut {
        min-height: 58px;
        margin-top: 8px;
    }

    .account-modal .profile-summary-card {
        min-height: 84px;
        gap: 5px;
        padding: 10px;
        border-radius: 14px;
    }

    .account-modal .profile-summary-card-wide {
        min-height: 76px;
    }

    .account-modal .profile-summary-icon {
        width: 30px;
        height: 30px;
    }

    .account-modal .profile-summary-card strong {
        font-size: 16px;
    }

    .account-modal .profile-summary-card span:not(.profile-summary-icon),
    .account-modal .profile-summary-card small {
        font-size: 10px;
    }

    .account-modal .instruction-device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .account-modal .instruction-card {
        min-height: 82px;
        gap: 4px;
        padding: 10px;
        border-radius: 13px;
    }

    .account-modal .instruction-card-icon {
        width: 30px;
        height: 30px;
    }

    .account-modal .instruction-card-icon svg {
        width: 26px;
        height: 26px;
    }

    .account-modal .instruction-card strong {
        font-size: 15px;
    }

    .account-modal .instruction-card span {
        font-size: 11px;
        line-height: 1.25;
    }

    .account-modal .support-faq-menu,
    .account-modal .support-ticket-list {
        gap: 7px;
    }

    .account-modal .support-faq-topic,
    .account-modal .support-faq-tickets,
    .account-modal .support-ticket-card,
    .account-modal .support-faq-detail,
    .account-modal .support-helper,
    .account-modal .support-empty {
        padding: 10px;
        border-radius: 13px;
    }

    .account-modal .support-faq-topic strong,
    .account-modal .support-ticket-card strong {
        font-size: 13px;
    }

    .account-modal .support-faq-topic span,
    .account-modal .support-ticket-card span:not(.support-ticket-status),
    .account-modal .support-faq-answer,
    .account-modal .support-helper,
    .account-modal .support-empty span {
        font-size: 11px;
        line-height: 1.35;
    }

    .account-modal .support-content--chat,
    .account-modal .dns-logs-content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .display-name-field,
    .profile-copy-group {
        gap: 6px;
        margin-bottom: 9px;
    }

    .display-name-field input {
        min-height: 40px;
        border-radius: 14px;
        padding: 0 11px;
        font-size: 14px;
    }

    .display-name-field span,
    .profile-copy-label {
        font-size: 10px;
    }

    .profile-account-id {
        padding: 9px 11px;
        border-radius: 14px;
    }

    .profile-key-copy {
        min-height: 62px;
    }

    .display-name-actions {
        gap: 8px;
        margin-top: 12px;
    }

    .display-name-actions .ghost-btn,
    .display-name-actions .modal-primary {
        min-height: 40px;
        padding: 0 10px;
        border-radius: 14px;
        font-size: 13px;
    }

    .account-modal .modal-message {
        margin-top: 10px;
        padding: 8px 10px;
        border-radius: 11px;
        font-size: 11px;
    }

    .account-modal .tariff-option,
    .account-modal .plan-btn.tariff-option {
        padding: 11px;
        border-radius: 13px;
    }

    .account-modal .payment-provider-btn,
    .account-modal .money-btn,
    .account-modal .ghost-btn:not(.modal-back-control):not(.modal-close-control) {
        min-height: 40px;
    }

    .login-info-close {
        width: auto;
        min-width: max-content;
        min-height: 38px;
        margin: auto 0 0 auto;
        padding: 0 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .onboarding-backdrop {
        align-items: center;
        padding: 12px;
    }

    .onboarding-wizard {
        border-radius: 16px;
    }

    .onboarding-shell {
        padding: 12px;
    }

    .onboarding-head {
        margin-bottom: 14px;
    }

    .onboarding-shell-connection .onboarding-head {
        padding: 0;
    }

    .onboarding-head h2 {
        font-size: 20px;
    }

    .onboarding-head p,
    .onboarding-note,
    .onboarding-alert,
    .onboarding-feature-list {
        font-size: 12px;
    }

    .onboarding-grid,
    .onboarding-country-grid,
    .onboarding-platform-grid,
    .onboarding-connection-methods {
        gap: 8px;
    }

    .onboarding-card {
        min-height: 76px;
        gap: 4px;
        padding: 10px;
        border-radius: 13px;
    }

    .onboarding-actions {
        bottom: calc(-12px - env(safe-area-inset-bottom));
        flex-wrap: wrap;
        gap: 8px;
        margin: 16px -12px -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .onboarding-actions .ghost-btn,
    .onboarding-shell-connection .onboarding-actions .ghost-btn {
        min-width: max-content;
        min-height: 38px;
        flex: 1 1 auto;
        padding: 0 12px;
        border-radius: 14px;
        font-size: 12px;
    }

    .device-create-backdrop {
        padding: 12px;
    }

    .device-create-dialog {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 12px;
        border-radius: 16px;
    }

    .onboarding-shell {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .onboarding-shell > * {
        flex-shrink: 0;
    }

    .onboarding-actions {
        margin-top: auto;
    }

    .device-create-actions,
    .device-edit-actions {
        margin-top: auto;
    }

    .device-create-dialog > * {
        flex-shrink: 0;
    }

    .device-create-head h3 {
        font-size: 18px;
    }

    .device-edit-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .device-danger-btn {
        grid-column: 1 / -1;
        margin-right: 0;
    }
}