.formbuilder-mask {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.25rem;
    font-family: monospace;
    font-size: 1rem;
    line-height: 1;
    cursor: text;
    user-select: none;
}

.formbuilder-mask__segment {
    display: inline-flex;
    align-items: center;
}

.formbuilder-mask__slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2ch;
    padding-bottom: 2px;
    text-align: center;
    border-bottom: 2px solid currentColor;
    opacity: 0.35;
    transition: opacity 0.15s, border-color 0.15s, background-color 0.15s;
}

.formbuilder-mask__slot--filled {
    opacity: 1;
}

.formbuilder-mask__slot--active {
    opacity: 1;
    border-color: var(--bs-primary, #0d6efd);
    background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent);
}

.formbuilder-mask__sep {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 0.1em 3px;
    opacity: 0.5;
    font-size: 0.9em;
}

.formbuilder-mask--active .formbuilder-mask__slot {
    opacity: 1;
    border-color: var(--bs-primary, #0d6efd);
}

.formbuilder-mask--active .formbuilder-mask__sep {
    opacity: 0.8;
}

/* pin-pad() — маска+numpad директно в полето (виж PinPadContainer.js докблока). */
.field--pin-pad__mask {
    display: flex;
    justify-content: center;
}

.field--pin-pad__mask .formbuilder-mask {
    font-size: 1.6rem;
}

.field--pin-pad__mask .formbuilder-mask__slot {
    width: 1.6ch;
}

.field--pin-pad__numpad .pk-container {
    background: rgba(0, 0, 0, .04);
    backdrop-filter: none;
    border-color: rgba(0, 0, 0, .08);
}