.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}

.totp-code-display{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    flex-wrap:wrap;
}
.totp-code-value{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:clamp(2rem,7vw,3.25rem);
    font-weight:600;
    letter-spacing:.18em;
    color:var(--bs-primary);
    line-height:1;
    user-select:all;
}
[data-bs-theme="dark"] .totp-code-value{color:#74c0fc;}

.totp-progress-wrapper{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
}
.totp-progress{transform:rotate(-90deg);}
.totp-progress-track{
    fill:none;
    stroke:var(--bs-tertiary-bg);
    stroke-width:4;
}
.totp-progress-fill{
    fill:none;
    stroke:var(--bs-primary);
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:125.66; /* 2 * pi * 20 */
    stroke-dashoffset:0;
    transition:stroke-dashoffset .9s linear, stroke .3s;
}
.totp-progress-fill.totp-warn{stroke:var(--bs-warning);}
.totp-countdown-label{
    position:absolute;
    text-align:center;
    font-size:.85rem;
    font-weight:600;
    color:var(--bs-body-color);
}
.totp-countdown-label small{color:var(--bs-secondary-color);font-weight:400;}

.totp-qr-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:.5rem;
    padding:.5rem;
    border:1px solid var(--bs-border-color);
}
.totp-qr-wrap canvas{max-width:100%;height:auto;}