.otp-label {
    margin-bottom: var(--spacing-8);
    color: var(--color-essential-black);
}

.otp-input {
    text-align: center;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

.otp-input::placeholder {
    letter-spacing: 0.2em;
    opacity: 0.35;
}

.otp-hint {
    display: block;
    margin: var(--spacing-8) var(--spacing-16) 0;
    color: var(--color-essential-black);
    opacity: 0.6;
    text-align: center;
}

#input-error-otp {
    display: block;
    color: var(--color-secondary-flat-red);
    margin: var(--spacing-8) var(--spacing-16);
    text-align: center;
}

.otp-device-list {
    margin-bottom: var(--spacing-24);
}

.otp-device-list-label {
    margin-bottom: var(--spacing-12);
}

.otp-device-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-8);
}

.otp-device-option input[type="radio"] {
    accent-color: var(--color-primary-electric-indigo);
    width: 18px;
    height: 18px;
    margin: 0;
}

.otp-device-option label {
    cursor: pointer;
}

/* OTP setup (login-config-totp) */
.otp-setup-steps {
    list-style: none;
    margin: 0 0 var(--spacing-24);
    padding: 0;
    counter-reset: otp-setup-step;
}

.otp-setup-step {
    counter-increment: otp-setup-step;
    margin-bottom: var(--spacing-24);
}

.otp-setup-step:last-child {
    margin-bottom: var(--spacing-32);
}

.otp-setup-step > .body-semibold:first-child::before {
    content: counter(otp-setup-step) ". ";
}

.otp-setup-step-hint {
    margin-top: var(--spacing-8);
    opacity: 0.8;
}

.otp-setup-app-list {
    list-style: disc;
    margin: var(--spacing-12) 0 0 var(--spacing-24);
    padding: 0;
}

.otp-setup-app-list li {
    margin-bottom: var(--spacing-4);
}

.otp-setup-qr {
    margin: var(--spacing-16) 0;
    text-align: center;
}

.otp-setup-qr img {
    display: block;
    margin: 0 auto;
    max-width: min(200px, 100%);
    height: auto;
}

.otp-setup-toggle {
    margin: var(--spacing-12) 0 0;
    text-align: center;
}

.otp-setup-toggle-link {
    text-decoration: underline;
    text-decoration-thickness: var(--outline-width-1px);
}

.otp-setup-manual-key {
    margin: var(--spacing-12) 0;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--radius-16);
    background-color: var(--color-shades-light-powder-blue);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.otp-setup-manual-policy {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--radius-16);
    background-color: var(--color-light-background);
}

.otp-setup-manual-policy li {
    margin-bottom: var(--spacing-4);
}

.otp-setup-manual-policy li:last-child {
    margin-bottom: 0;
}

#input-error-otp-code,
#input-error-otp-label {
    display: block;
    color: var(--color-secondary-flat-red);
    margin: var(--spacing-8) var(--spacing-16);
    text-align: center;
}

.otp-setup-cancel {
    justify-content: center;
    margin-top: 0;
}

.otp-setup-cancel-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-primary-electric-indigo);
}