dialog {
        background-color: var(--lumo-base-color);
        border: none;
        outline: none;
        border-radius: var(--lumo-border-radius-l);
        padding: 0;
        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
        background-image: none;
        outline: none;
        color: var(--lumo-body-text-color);
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        font-weight: 400;
        line-height: var(--lumo-line-height-m);
        letter-spacing: 0;
        text-transform: none;
        width: 100%;
        max-width: 368px;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        animation: dialog-appear 0.2s ease;
    }
    
    dialog::backdrop {
        background: var(--lumo-shade-50pct);
        animation: backdrop-appear 0.2s ease;
    }
    
    dialog h2 {
        line-height: 0.8;
        text-align: center;
        font-size: 1.2em;
    }
    
    dialog hr {
        width: 100%;
        margin-top: -.1rem;
    }
    
    dialog .dialog-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-top: 1rem solid var(--lumo-primary-color);
        padding: 0 1rem;
        text-align: center;
        position: relative;
    }
    
    dialog button {
        user-select: none;
    }
    
    dialog .btn-close {
        position: absolute;
        top: .75rem;
        right: .4rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: inherit;
        font-size: 1.2rem;
        appearance: none;
    }
    
    dialog .btn-close:focus-visible {
        outline: 0;
    }
    
    dialog .btn-close::before {
        content: "✖";
    }
    
    dialog:has(.form-step.active[data-step="5"]) .btn-close {
        display: none;
    }
    
    dialog .btn-previous {
        position: absolute;
        top: .75rem;
        left: .5rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: inherit;
        font-size: 1.2rem;
        appearance: none;
    }

    dialog .img-success {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 150px;
        object-fit: contain;
    }
    
    dialog:has(.form-step.active[data-step="1"]) .btn-previous,
    dialog:has(.form-step.active[data-step="5"]) .btn-previous {
        display: none;
    }
    
    dialog .btn-previous:focus-visible {
        outline: 0;
    }
    
    dialog .btn-previous::before {
        content: "❮";
    }
    
    dialog .btn-next {
        border: none;
        background-color: rgb(46, 168, 54);
        color: white;
        border-radius: 4px;
        cursor: pointer;
        padding: 0 1rem;
        height: 36px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
    }
    
    dialog .btn-next:hover {
        background-color: #2a9f32;
    }
    
    dialog .form-step button[disabled] {
        background-color: var(--lumo-contrast-30pct);
        color: var(--lumo-base-color);
        pointer-events: none;
    }
    
    dialog .btn {
        border: var(--vaadin-button-tertiary-border, none);
        border-radius: 4px;
        color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
        font-weight: var(--vaadin-button-tertiary-font-weight, 500);
        padding: 4px 8px;
        background: transparent;
        cursor: pointer;
    }
    
    dialog .btn:hover {
        background: #222426;
    }
    
    dialog .dialog-content {
        padding: 0 1rem;
        margin-top: 0.5em;
        min-height: 350px;
    }
    
    dialog .dialog-footer {
        background-color: #1e2022;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    dialog .directions {
        display: flex;
        justify-content: center;
        gap: 4px;
    }
    
    dialog .promo-img {
        border-radius: var(--lumo-border-radius-l);
        width: 100%;
    }
    
    dialog .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    dialog form.loading {
        position: relative;
        pointer-events: none;
        opacity: 0.75;
    }

    dialog form.loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        margin-left: -24px;
        border-radius: 50%;
        border: 4px solid rgba(255, 255, 255, 0.25);
        border-top-color: var(--lumo-primary-color);
        animation: register-loading-spin 0.75s linear infinite;
        z-index: 10;
    }

    @keyframes register-loading-spin {
        to {
            transform: rotate(360deg);
        }
    }
    
    dialog form .form-step {
        display: none;
    }
    
    dialog form .form-step.active {
        display: block;
    }
    
    dialog form label, dialog form small {
        display: block;
        font-size: 0.7em;
        color: var(--lumo-primary-text-color);
        font-weight: 400;
        line-height: var(--lumo-line-height-m);
        letter-spacing: 0;
        text-transform: none;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    dialog form .input-error {
        display: none;
        font-size: 0.65em;
        color: #ff5555;
        font-weight: 500;
        margin-top: 2px;
        margin-bottom: 8px;
    }
    
    dialog form .input-error:empty {
        margin: 0;
    }
    
    dialog form input:invalid ~ .input-error,
    dialog form select:invalid ~ .input-error {
        display: block;
    }
    
    dialog form input, dialog form select {
        color: var(--vaadin-input-field-value-color, var(--lumo-body-text-color));
        background-color: #363636;
        font-size: var(--vaadin-input-field-value-font-size, var(--lumo-font-size-m));
        font-family: var(--lumo-font-family);
        margin: 4px 0;
        color-scheme: dark;
    }
    
    dialog form select {
        cursor: pointer;
    }
    
    dialog form input::placeholder, dialog form select::placeholder {
        color: #999;
    }
    
    dialog form .input-block {
        min-width: 108px;
    }
    
    dialog form .input-block-password {
        position: relative;
    }
    
    dialog form .input-block-password .password-toggle {
        position: absolute;
        width: 32px;
        top: 8px;
        right: .25rem;
        height: 32px;
        appearance: none;
        border: 0;
        background: transparent;
        color: white;
        cursor: pointer;
        font-size: 1.5rem;
        line-height: 1;
    }
    
    dialog form .input-block-password .password-toggle[aria-pressed="true"]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: center;
        pointer-events: none;
    }
    
    dialog form .input-blocks-a {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: flex-start;
        gap: .5rem;
    }
    
    dialog form .input-blocks-a > *:first-of-type {
        flex: 1;
    }
    
    dialog form .input-blocks-b {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: flex-start;
        gap: .5rem;
    }
    
    dialog form .input-blocks-b > *:last-of-type {
        flex: 1;
    }
    
    dialog form .input-checkbox {
        display: inline-flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        font-size: .75rem;
        user-select: none;
        cursor: pointer;
    }
    
    dialog form .input-checkbox input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
    
        width: 18px !important;
        height: 18px;
    
        border: 1px solid rgb(169, 169, 169);
        border-radius: 5px;
    
        display: grid;
        place-content: center;
    
        margin-top: 0 !important;
        margin-bottom: .25rem;
    
        cursor: pointer;
    }
    
    dialog form .input-checkbox input[type="checkbox"]:checked {
        background: var(--lumo-primary-color);
    }
    
    dialog form .input-checkbox input[type="checkbox"]::before {
        content: "✓";
    
        width: 4px;
        height: 8px;
    
        transform: translateX(100%) translateY(100%) scale(0);
    
        transition: transform 30ms ease-in-out;
    }
    
    dialog form .input-checkbox input[type="checkbox"]:checked::before {
        transform: translateX(-70%) translateY(-30%) scale(.75);
    }
    
    dialog form ul, dialog form ol {
        margin-top: 0;
        font-size: var(--lumo-font-size-xxs);
        color: var(--lumo-body-text-color);
        font-family: var(--lumo-font-family);
        /* font-size: var(--lumo-font-size-m); */
        font-weight: 400;
        line-height: var(--lumo-line-height-m);
        letter-spacing: 0;
        text-transform: none;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    dialog a {
        text-decoration: none;
        color: var(--lumo-primary-color);
    }
    
    @keyframes dialog-appear {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
    
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes backdrop-appear {
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
        }
    }