/* Extracted unchanged from login.php for repeat-visit caching. */
.otp-box-group {
        display: grid;
        /* Column count is injected inline from SW_OTP_DIGITS. */
        gap: 10px;
    }

    .otp-box {
        width: 100%;
        height: 64px;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        background: #f9fafb;
        font-size: 26px;
        font-weight: 900;
        color: #073940;
        text-align: center;
        outline: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        caret-color: transparent;
        box-shadow: 0 2px 8px rgba(8, 8, 8, 0.04);
        -webkit-appearance: none;
        appearance: none;
    }

    .otp-box:focus {
        border-color: #42D8CD;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(86, 199, 196, 0.14), 0 4px 16px rgba(86, 199, 196, 0.12);
        transform: translateY(-2px) scale(1.03);
    }

    .otp-box.filled {
        border-color: #42D8CD;
        background: #ffffff;
    }

    .otp-box.error {
        border-color: #ef4444;
        background: #fef2f2;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
        animation: otpShake 0.4s ease;
    }

    .auth-alert {
        display: none;
        border-radius: 18px;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
    }

    .auth-alert.show { display: block; }

    .auth-alert.success {
        color: #0f766e;
        background: rgba(86, 199, 196, 0.12);
        border: 1px solid rgba(86, 199, 196, 0.28);
    }

    .auth-alert.error {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .auth-alert.info {
        color: #374151;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
    }

    .step-hidden { display: none !important; }

    @keyframes otpShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(6px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
    }

    @media (max-width: 480px) {
        .otp-box-group { gap: 8px; }
        .otp-box {
            height: 56px;
            font-size: 22px;
            border-radius: 14px;
        }
    }

    @media (max-width: 360px) {
        .otp-box-group { gap: 6px; }
        .otp-box {
            height: 50px;
            font-size: 20px;
            border-radius: 12px;
        }
    }