.verification-code-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 15px 0;
    max-width: 380px
}

.code-input {
    width: 45px !important;
    height: 50px !important;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0;
    background: white;
    transition: all 0.2s ease;
}

.code-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

.code-input.filled {
    border-color: #34a853 !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.code-input.error {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
}

@media (max-width: 480px) {
    .verification-code-container {
        gap: 8px;
    }

    .code-input {
        width: 40px;
        height: 45px;
        font-size: 20px;
    }
}